diff --git a/packages/demo/src/content/docs/start-here/accessibility.md b/packages/demo/src/content/docs/start-here/accessibility.md
deleted file mode 100644
index 94c37f3..0000000
--- a/packages/demo/src/content/docs/start-here/accessibility.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-title: Accessibility
----
-
-:::caution
-WIP
-:::
-
-````md
-```some alt="..."
-
-```
-````
-
-```html
-<img alt="..." />
-```
-
-I can add option for [figcaption](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption) as well.
diff --git a/packages/demo/src/content/docs/start-here/accessibility.mdx b/packages/demo/src/content/docs/start-here/accessibility.mdx
new file mode 100644
index 0000000..98436ea
--- /dev/null
+++ b/packages/demo/src/content/docs/start-here/accessibility.mdx
@@ -0,0 +1,72 @@
+---
+title: Accessibility
+---
+
+import { Tabs, TabItem } from "@astrojs/starlight/components";
+
+## Alt
+
+Works only with `strategy=file` and `strategy=data-url`.
+
+<Tabs>
+  <TabItem label="Markdown">
+````md
+```d2 strategy=file pad=20 alt="testing alt"
+direction: right
+a -> b -> c -> d -> e
+```
+````
+  </TabItem>
+  <TabItem label="Diagram">
+```d2 strategy=file pad=20 alt="testing alt"
+direction: right
+a -> b -> c -> d -> e
+```
+
+  </TabItem>
+  <TabItem label="Resulting HTML">
+```html
+...
+<img alt="testing alt" .../>
+...
+```
+  </TabItem>
+</Tabs>
+
+## Figcaption
+
+[figcaption](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption) can be implemented.
+
+## Mermaid
+
+Mermaid has special params for accessibility
+
+<Tabs>
+  <TabItem label="Markdown">
+````md
+```mermaid strategy=inline
+graph LR
+  accTitle: Big Decisions
+  accDescr: Bob's Burgers process for making big decisions
+  a --> b
+```
+````
+  </TabItem>
+  <TabItem label="HTML">
+
+```xml
+<svg>
+  <desc>Bob's Burgers process for making big decisions</desc>
+</svg>
+```
+  </TabItem>
+  <TabItem label="Diagram">
+```mermaid strategy=inline
+graph LR
+  accTitle: Big Decisions
+  accDescr: Bob's Burgers process for making big decisions
+  a --> b
+```
+  </TabItem>
+</Tabs>
+
diff --git a/packages/demo/src/content/docs/start-here/configuration.md b/packages/demo/src/content/docs/start-here/configuration.md
new file mode 100644
index 0000000..c806c30
--- /dev/null
+++ b/packages/demo/src/content/docs/start-here/configuration.md
@@ -0,0 +1,60 @@
+---
+title: Configuration
+sidebar:
+  order: 4
+---
+
+All Rehype diagram plugins support (at least) following configurations:
+
+- `cache` (optional) - Map-like storage to speed up consequent renders of page. You can use standard JS `Map`, but probably it is better to use [@beoe/cache](https://github.com/stereobooster/beoe/tree/main/packages/cache/).
+- `class` (optional) - allows to setup additional classes for diagrams. For example, `.not-content` for inline diagrams if you use [tailwindcss-typography](https://github.com/tailwindlabs/tailwindcss-typography)
+- `svgo` (optional) - options for [SVGO](https://github.com/svg/svgo). Use `false` to disable optimization with SVGO
+- [`strategy`](/start-here/strategy/)
+- [`darkScheme`](/start-here/dark-scheme/)
+
+All configurations can be set either globally or locally (via fence-code meta). Global configurations applies to all diagrams. Local configurations applies only to one diagram. Local configurations always override global, with exception for `class` option (it applies all provided classes).
+
+Also you want be able to set `cache` and `svgo` via local configurations, excpet disabling them with `false` value.
+
+## Global configurations
+
+For example,
+
+```js
+import { getCache } from "@beoe/cache";
+const cache = await getCache();
+
+use(rehypeDiagram, {
+  strategy: "file",
+  darkTheme: "class",
+  class: "not-content",
+  cache,
+});
+```
+
+## Local configurations
+
+````md
+```some-diagram strategy=inline darkTheme=false class=interactive
+...
+```
+````
+
+## Other configurations
+
+Often plugins would have additional options, for example, D2 also has `d2Options`
+
+```js
+import { getCache } from "@beoe/cache";
+const cache = await getCache();
+
+use(rehypeD2, {
+  d2Options: { pad: 20 },
+});
+```
+
+````md
+```d2 pad=50
+...
+```
+````
diff --git a/packages/rehype-code-hook-img/src/utils.ts b/packages/rehype-code-hook-img/src/utils.ts
index ab8b31a..18ec9a6 100644
--- a/packages/rehype-code-hook-img/src/utils.ts
+++ b/packages/rehype-code-hook-img/src/utils.ts
@@ -89,9 +89,12 @@ export function svgStrategy(
     fsPath,
     webPath,
     darkScheme,
-  }: BasePluginOptions,
+    alt: optsAlt,
+  }: BasePluginOptions & { alt?: string },
   { svg, data, darkSvg, width, height, alt }: Result
 ) {
+  alt ??= optsAlt;
+
   if (svgo !== false) {
     // @ts-expect-error
     svgoConfig.plugins[0].params.overrides.cleanupIds = !data;