📘 DOC: improve a11y (#806)

* Add `tabindex="0"` to `<pre>` so that they are navigable by keyboard users if they overflow.

* Landmark elements should have unique names https://dequeuniversity.com/rules/axe/4.3/landmark-unique

* Page must have one main landmark https://dequeuniversity.com/rules/axe/4.3/landmark-one-main

- Main landmark must not be contained by another landmark https://dequeuniversity.com/rules/axe/4.3/landmark-main-is-top-level

* Heading level cannot increase by more than one

* Ensure that links with the same accessible name serve a similar purpose

https://dequeuniversity.com/rules/axe/4.3/identical-links-same-purpose

* Just update the accessible name and require context for the visible link name

* Fix CSS from the removal of the second <main>

* Revert heading level change

2 files changed, 4 insertions, 4 deletions

diff --git a/docs/src/pages/guides/data-fetching.md b/docs/src/pages/guides/data-fetching.md
index 7b28bedb4..c3e033405 100644
--- a/docs/src/pages/guides/data-fetching.md
+++ b/docs/src/pages/guides/data-fetching.md
@@ -7,7 +7,7 @@ Astro components and pages can fetch remote data to help generate your pages. As
 
 ## `fetch()`
 
-Astro pages have access to the global `fetch()` function in their setup script. `fetch()` is a native JavaScript API ([MDN](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)) that lets you make HTTP requests for things like APIs and resources.
+Astro pages have access to the global `fetch()` function in their setup script. `fetch()` is a native JavaScript API ([MDN<span class="sr-only">- fetch</span>](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)) that lets you make HTTP requests for things like APIs and resources.
 
 Even though Astro component scripts run inside of Node.js (and not in the browser) Astro provides this native API so that you can fetch data at page build time.
 
@@ -25,7 +25,7 @@ console.log(data);
 
 ## Top-level await
 
-`await` is another native JavaScript feature that lets you await the response of some asynchronous promise ([MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await)). Astro supports `await` in the top-level of your component script.
+`await` is another native JavaScript feature that lets you await the response of some asynchronous promise ([MDN<span class="sr-only">- await</span>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await)). Astro supports `await` in the top-level of your component script.
 
 **Important:** These are not yet available inside of non-page Astro components. Instead, do all of your data loading inside of your pages, and then pass them to your components as props.
 
diff --git a/docs/src/pages/guides/styling.md b/docs/src/pages/guides/styling.md
index 1c8bb0dfb..d6a3691a2 100644
--- a/docs/src/pages/guides/styling.md
+++ b/docs/src/pages/guides/styling.md
@@ -70,8 +70,8 @@ import Styles from './styles.module.css'; // Use CSS Modules (must end in `.modu
 
 Vue in Astro supports the same methods as `vue-loader` does:
 
-- [Scoped CSS][vue-scoped]
-- [CSS Modules][vue-css-modules]
+- [vue-loader - Scoped CSS][vue-scoped]
+- [vue-loader - CSS Modules][vue-css-modules]
 
 ### 📕 Svelte