diff --git a/files/en-us/mdn/writing_guidelines/page_structures/page_types/html_element_page_template/index.md b/files/en-us/mdn/writing_guidelines/page_structures/page_types/html_element_page_template/index.md
index 6b9e6d3091bfb2b..48da5af31102536 100644
--- a/files/en-us/mdn/writing_guidelines/page_structures/page_types/html_element_page_template/index.md
+++ b/files/en-us/mdn/writing_guidelines/page_structures/page_types/html_element_page_template/index.md
@@ -78,6 +78,10 @@ The **`<insert_the_element_name>`** [HTML](/en-US/docs/Web/HTML) element does _(
 
 Further information — at this point, include a few more paragraphs explaining the most important things you need to know about using the element and its main features. It is good to explain briefly what is going on in the interactive example if it is not immediately obvious. You could also explain key points about how this element interacts with important related JavaScript or CSS features. Not too much detail — you don't want to repeat the documentation across pages — but a key point plus a link to that feature's page would be useful. Again, see the `<video>` page for an example.
 
+## Accessibility concerns
+
+Warn of any potential accessibility concerns that exist with using this element, and how to work around them. Remove this section if there are none to list.
+
 ## Attributes
 
 This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
@@ -135,10 +139,6 @@ See our guide on how to add [code examples](/en-US/docs/MDN/Writing_guidelines/P
 > For examples of this API, see [the page on fetch()](https://example.org).
 > ```
 
-## Accessibility concerns
-
-Optionally, warn of any potential accessibility concerns that exist with using this element, and how to work around them. Remove this section if there are none to list.
-
 ## Technical summary
 
 <table class="properties">
diff --git a/files/en-us/web/html/element/a/index.md b/files/en-us/web/html/element/a/index.md
index 71d9f65bcb6db60..e5b1e64f1feb69a 100644
--- a/files/en-us/web/html/element/a/index.md
+++ b/files/en-us/web/html/element/a/index.md
@@ -106,6 +106,152 @@ This element's attributes include the [global attributes](/en-US/docs/Web/HTML/G
 
     > **Note:** Use the {{HTMLElement("area")}} element for image maps instead.
 
+## Accessibility
+
+### Strong link text
+
+**The content inside a link should indicate where the link goes**, even out of context.
+
+#### Inaccessible, weak link text
+
+A sadly common mistake is to only link the words "click here" or "here":
+
+```html example-bad
+<p>Learn more about our products <a href="/products">here</a>.</p>
+```
+
+##### Result
+
+{{EmbedLiveSample('Inaccessible, weak link text')}}
+
+#### Strong link text
+
+Luckily, this is an easy fix, and it's actually shorter than the inaccessible version!
+
+```html example-good
+<p>Learn more <a href="/products">about our products</a>.</p>
+```
+
+##### Result
+
+{{EmbedLiveSample('Strong link text')}}
+
+Assistive software has shortcuts to list all links on a page. However, strong link text benefits all users — the "list all links" shortcut emulates how sighted users quickly scan pages.
+
+### onclick events
+
+Anchor elements are often abused as fake buttons by setting their `href` to `#` or `javascript:void(0)` to prevent the page from refreshing, then listening for their `click` events .
+
+These bogus `href` values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.
+
+Use a {{HTMLElement("button")}} instead. In general, **you should only use a hyperlink for navigation to a real URL**.
+
+### External links and linking to non-HTML resources
+
+Links that open in a new tab/window via `target="_blank"`, or links that point to a download file should indicate what will happen when the link is followed.
+
+People experiencing low vision conditions, navigating with the aid of screen reading technology, or with cognitive concerns may be confused when a new tab, window, or application opens unexpectedly. Older screen-reading software may not even announce the behavior.
+
+#### Link that opens a new tab/window
+
+```html
+<a target="_blank" href="https://www.wikipedia.org">
+  Wikipedia (opens in new tab)
+</a>
+```
+
+##### Result
+
+{{EmbedLiveSample('Link that opens a new tab/window')}}
+
+#### Link to a non-HTML resource
+
+```html
+<a href="2017-annual-report.ppt"> 2017 Annual Report (PowerPoint) </a>
+```
+
+If an icon is used to signify link behavior, make sure it has an [_alt text_](/en-US/docs/Web/HTML/Element/img#alt):
+
+```html
+<a target="_blank" href="https://www.wikipedia.org">
+  Wikipedia
+  <img alt="(opens in new tab)" src="newtab.svg" />
+</a>
+
+<a href="2017-annual-report.ppt">
+  2017 Annual Report
+  <img alt="(PowerPoint file)" src="ppt-icon.svg" />
+</a>
+```
+
+##### Result
+
+{{EmbedLiveSample('Link to a non-HTML resource')}}
+
+- [WebAIM: Links and Hypertext - Hypertext Links](https://webaim.org/techniques/hypertext/hypertext_links)
+- [MDN / Understanding WCAG, Guideline 3.2](/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.2_—_predictable_make_web_pages_appear_and_operate_in_predictable_ways)
+- [G200: Opening new windows and tabs from a link only when necessary](https://www.w3.org/TR/WCAG20-TECHS/G200.html)
+- [G201: Giving users advanced warning when opening a new window](https://www.w3.org/TR/WCAG20-TECHS/G201.html)
+
+### Skip links
+
+A **skip link** is a link placed as early as possible in {{HTMLElement("body")}} content that points to the beginning of the page's main content. Usually, CSS hides a skip link offscreen until focused.
+
+```html
+<body>
+  <a href="#content" class="skip-link">Skip to main content</a>
+
+  <header>…</header>
+
+  <main id="content"></main>
+  <!-- The skip link jumps to here -->
+</body>
+```
+
+```css
+.skip-link {
+  position: absolute;
+  top: -3em;
+  background: #fff;
+}
+.skip-link:focus {
+  top: 0;
+}
+```
+
+#### Result
+
+{{EmbedLiveSample('Skip links')}}
+
+Skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation.
+
+Skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be laborious.
+
+- [WebAIM: "Skip Navigation" Links](https://webaim.org/techniques/skipnav/)
+- [How-to: Use Skip Navigation links](https://www.a11yproject.com/posts/skip-nav-links/)
+- [MDN / Understanding WCAG, Guideline 2.4 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.4_%e2%80%94_navigable_provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are)
+- [Understanding Success Criterion 2.4.1](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html)
+
+### Size and proximity
+
+#### Size
+
+Interactive elements, like links, should provide an area large enough that it is easy to activate them. This helps a variety of people, including those with motor control issues and those using imprecise inputs such as a touchscreen. A minimum size of 44×44 [CSS pixels](https://www.w3.org/TR/WCAG21/#dfn-css-pixels) is recommended.
+
+Text-only links in prose content are exempt from this requirement, but it's still a good idea to make sure enough text is hyperlinked to be easily activated.
+
+- [Understanding Success Criterion 2.5.5: Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)
+- [Target Size and 2.5.5](https://adrianroselli.com/2019/06/target-size-and-2-5-5.html)
+- [Quick test: Large touch targets](https://www.a11yproject.com/posts/large-touch-targets/)
+
+#### Proximity
+
+Interactive elements, like links, placed in close visual proximity should have space separating them. Spacing helps people with motor control issues, who may otherwise accidentally activate the wrong interactive content.
+
+Spacing may be created using CSS properties like {{CSSxRef("margin")}}.
+
+- [Hand tremors and the giant-button-problem](https://axesslab.com/hand-tremors/)
+
 ## Examples
 
 ### Linking to an absolute URL
@@ -267,152 +413,6 @@ document
 
 Using `target="_blank"` without [`rel="noreferrer"`](/en-US/docs/Web/HTML/Attributes/rel/noreferrer) and [`rel="noopener"`](/en-US/docs/Web/HTML/Attributes/rel/noopener) makes the website vulnerable to {{domxref("window.opener")}} API exploitation attacks, although note that, in newer browser versions setting `target="_blank"` implicitly provides the same protection as setting `rel="noopener"`. See [browser compatibility](#browser_compatibility) for details.
 
-## Accessibility
-
-### Strong link text
-
-**The content inside a link should indicate where the link goes**, even out of context.
-
-#### Inaccessible, weak link text
-
-A sadly common mistake is to only link the words "click here" or "here":
-
-```html example-bad
-<p>Learn more about our products <a href="/products">here</a>.</p>
-```
-
-##### Result
-
-{{EmbedLiveSample('Inaccessible, weak link text')}}
-
-#### Strong link text
-
-Luckily, this is an easy fix, and it's actually shorter than the inaccessible version!
-
-```html example-good
-<p>Learn more <a href="/products">about our products</a>.</p>
-```
-
-##### Result
-
-{{EmbedLiveSample('Strong link text')}}
-
-Assistive software has shortcuts to list all links on a page. However, strong link text benefits all users — the "list all links" shortcut emulates how sighted users quickly scan pages.
-
-### onclick events
-
-Anchor elements are often abused as fake buttons by setting their `href` to `#` or `javascript:void(0)` to prevent the page from refreshing, then listening for their `click` events .
-
-These bogus `href` values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.
-
-Use a {{HTMLElement("button")}} instead. In general, **you should only use a hyperlink for navigation to a real URL**.
-
-### External links and linking to non-HTML resources
-
-Links that open in a new tab/window via `target="_blank"`, or links that point to a download file should indicate what will happen when the link is followed.
-
-People experiencing low vision conditions, navigating with the aid of screen reading technology, or with cognitive concerns may be confused when a new tab, window, or application opens unexpectedly. Older screen-reading software may not even announce the behavior.
-
-#### Link that opens a new tab/window
-
-```html
-<a target="_blank" href="https://www.wikipedia.org">
-  Wikipedia (opens in new tab)
-</a>
-```
-
-##### Result
-
-{{EmbedLiveSample('Link that opens a new tab/window')}}
-
-#### Link to a non-HTML resource
-
-```html
-<a href="2017-annual-report.ppt"> 2017 Annual Report (PowerPoint) </a>
-```
-
-If an icon is used to signify link behavior, make sure it has an [_alt text_](/en-US/docs/Web/HTML/Element/img#alt):
-
-```html
-<a target="_blank" href="https://www.wikipedia.org">
-  Wikipedia
-  <img alt="(opens in new tab)" src="newtab.svg" />
-</a>
-
-<a href="2017-annual-report.ppt">
-  2017 Annual Report
-  <img alt="(PowerPoint file)" src="ppt-icon.svg" />
-</a>
-```
-
-##### Result
-
-{{EmbedLiveSample('Link to a non-HTML resource')}}
-
-- [WebAIM: Links and Hypertext - Hypertext Links](https://webaim.org/techniques/hypertext/hypertext_links)
-- [MDN / Understanding WCAG, Guideline 3.2](/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.2_—_predictable_make_web_pages_appear_and_operate_in_predictable_ways)
-- [G200: Opening new windows and tabs from a link only when necessary](https://www.w3.org/TR/WCAG20-TECHS/G200.html)
-- [G201: Giving users advanced warning when opening a new window](https://www.w3.org/TR/WCAG20-TECHS/G201.html)
-
-### Skip links
-
-A **skip link** is a link placed as early as possible in {{HTMLElement("body")}} content that points to the beginning of the page's main content. Usually, CSS hides a skip link offscreen until focused.
-
-```html
-<body>
-  <a href="#content" class="skip-link">Skip to main content</a>
-
-  <header>…</header>
-
-  <main id="content"></main>
-  <!-- The skip link jumps to here -->
-</body>
-```
-
-```css
-.skip-link {
-  position: absolute;
-  top: -3em;
-  background: #fff;
-}
-.skip-link:focus {
-  top: 0;
-}
-```
-
-#### Result
-
-{{EmbedLiveSample('Skip links')}}
-
-Skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation.
-
-Skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be laborious.
-
-- [WebAIM: "Skip Navigation" Links](https://webaim.org/techniques/skipnav/)
-- [How-to: Use Skip Navigation links](https://www.a11yproject.com/posts/skip-nav-links/)
-- [MDN / Understanding WCAG, Guideline 2.4 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.4_%e2%80%94_navigable_provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are)
-- [Understanding Success Criterion 2.4.1](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html)
-
-### Size and proximity
-
-#### Size
-
-Interactive elements, like links, should provide an area large enough that it is easy to activate them. This helps a variety of people, including those with motor control issues and those using imprecise inputs such as a touchscreen. A minimum size of 44×44 [CSS pixels](https://www.w3.org/TR/WCAG21/#dfn-css-pixels) is recommended.
-
-Text-only links in prose content are exempt from this requirement, but it's still a good idea to make sure enough text is hyperlinked to be easily activated.
-
-- [Understanding Success Criterion 2.5.5: Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)
-- [Target Size and 2.5.5](https://adrianroselli.com/2019/06/target-size-and-2-5-5.html)
-- [Quick test: Large touch targets](https://www.a11yproject.com/posts/large-touch-targets/)
-
-#### Proximity
-
-Interactive elements, like links, placed in close visual proximity should have space separating them. Spacing helps people with motor control issues, who may otherwise accidentally activate the wrong interactive content.
-
-Spacing may be created using CSS properties like {{CSSxRef("margin")}}.
-
-- [Hand tremors and the giant-button-problem](https://axesslab.com/hand-tremors/)
-
 ## Technical summary
 
 <table class="properties">
diff --git a/files/en-us/web/html/element/abbr/index.md b/files/en-us/web/html/element/abbr/index.md
index ccf9a7c75847c44..9fda162c1bae93b 100644
--- a/files/en-us/web/html/element/abbr/index.md
+++ b/files/en-us/web/html/element/abbr/index.md
@@ -15,6 +15,27 @@ The optional [`title`](/en-US/docs/Web/HTML/Global_attributes#title) attribute c
 
 {{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}
 
+## Accessibility concerns
+
+Spelling out the acronym or abbreviation in full the first time it is used on a page is beneficial for helping people understand it, especially if the content is technical or industry jargon.
+
+Only include a `title` if expanding the abbreviation or acronym in the text is not possible. Having a difference between the announced word or phrase and what is displayed on the screen, especially if it's technical jargon the reader may not be familiar with, can be jarring.
+
+#### HTML
+
+```html
+<p>
+  JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight
+  data-interchange format.
+</p>
+```
+
+#### Result
+
+{{EmbedLiveSample("Accessibility_concerns")}}
+
+This is especially helpful for people who are unfamiliar with the terminology or concepts discussed in the content, people who are new to the language, and people with cognitive concerns.
+
 ## Attributes
 
 This element only supports the [global attributes](/en-US/docs/Web/HTML/Global_attributes). The [`title`](/en-US/docs/Web/HTML/Global_attributes#title) attribute has a specific semantic meaning when used with the `<abbr>` element; it _must_ contain a full human-readable description or expansion of the abbreviation. This text is often presented by browsers as a tooltip when the mouse cursor is hovered over the element.
@@ -117,27 +138,6 @@ You can use `<abbr>` in tandem with {{HTMLElement("dfn")}} to more formally defi
 
 {{EmbedLiveSample("Defining_an_abbreviation", 600, 120)}}
 
-### Accessibility concerns
-
-Spelling out the acronym or abbreviation in full the first time it is used on a page is beneficial for helping people understand it, especially if the content is technical or industry jargon.
-
-Only include a `title` if expanding the abbreviation or acronym in the text is not possible. Having a difference between the announced word or phrase and what is displayed on the screen, especially if it's technical jargon the reader may not be familiar with, can be jarring.
-
-#### HTML
-
-```html
-<p>
-  JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight
-  data-interchange format.
-</p>
-```
-
-#### Result
-
-{{EmbedLiveSample("Accessibility_concerns")}}
-
-This is especially helpful for people who are unfamiliar with the terminology or concepts discussed in the content, people who are new to the language, and people with cognitive concerns.
-
 ## Technical summary
 
 <table class="properties">
diff --git a/files/en-us/web/html/element/audio/index.md b/files/en-us/web/html/element/audio/index.md
index ad95875656258c0..06c97131e765675 100644
--- a/files/en-us/web/html/element/audio/index.md
+++ b/files/en-us/web/html/element/audio/index.md
@@ -15,6 +15,49 @@ The above example shows simple usage of the `<audio>` element. In a similar mann
 
 The content inside the opening and closing `<audio></audio>` tags is shown as a fallback in browsers that don't support the element.
 
+## Accessibility concerns
+
+Audio with spoken dialog should provide both captions and transcripts that accurately describe its content. Captions, which are specified using [WebVTT](/en-US/docs/Web/API/WebVTT_API), allow people who are experiencing hearing loss to understand an audio recording's content as the recording is being played, while transcripts allow people who need additional time to be able to review the recording's content at a pace and format that is comfortable for them.
+
+If automatic captioning services are used, it is important to review the generated content to ensure it accurately represents the source audio.
+
+The `<audio>` element doesn't directly support WebVTT. You will have to find a library or framework that provides the capability for you, or write the code to display captions yourself. One option is to play your audio using a {{HTMLElement("video")}} element, which does support WebVTT.
+
+In addition to spoken dialog, subtitles and transcripts should also identify music and sound effects that communicate important information. This includes emotion and tone. For example, in the WebVTT below, note the use of square brackets to provide tone and emotional insight to the viewer; this can help establish the mood otherwise provided using music, nonverbal sounds and crucial sound effects, and so forth.
+
+```plain
+1
+00:00:00 --> 00:00:45
+[Energetic techno music]
+
+2
+00:00:46 --> 00:00:51
+Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch?
+
+16
+00:00:52 --> 00:01:02
+[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?
+```
+
+Also it's a good practice to provide some content (such as the direct download link) as a fallback for viewers who use a browser in which the `<audio>` element is not supported:
+
+```html
+<audio controls>
+  <source src="myAudio.mp3" type="audio/mpeg" />
+  <source src="myAudio.ogg" type="audio/ogg" />
+  <p>
+    Download <a href="myAudio.mp3">MP3</a> or
+    <a href="myAudio.ogg">OGG</a> audio.
+  </p>
+</audio>
+```
+
+- [Web Video Text Tracks Format (WebVTT)](/en-US/docs/Web/API/WebVTT_API)
+- [WebAIM: Captions, Transcripts, and Audio Descriptions](https://webaim.org/techniques/captions/)
+- [MDN Understanding WCAG, Guideline 1.2 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.2_—_providing_text_alternatives_for_time-based_media)
+- [Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html)
+- [Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html)
+
 ## Attributes
 
 This element's attributes include the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
@@ -339,49 +382,6 @@ This example includes multiple `<source>` elements. The browser tries to load th
 </audio>
 ```
 
-## Accessibility concerns
-
-Audio with spoken dialog should provide both captions and transcripts that accurately describe its content. Captions, which are specified using [WebVTT](/en-US/docs/Web/API/WebVTT_API), allow people who are experiencing hearing loss to understand an audio recording's content as the recording is being played, while transcripts allow people who need additional time to be able to review the recording's content at a pace and format that is comfortable for them.
-
-If automatic captioning services are used, it is important to review the generated content to ensure it accurately represents the source audio.
-
-The `<audio>` element doesn't directly support WebVTT. You will have to find a library or framework that provides the capability for you, or write the code to display captions yourself. One option is to play your audio using a {{HTMLElement("video")}} element, which does support WebVTT.
-
-In addition to spoken dialog, subtitles and transcripts should also identify music and sound effects that communicate important information. This includes emotion and tone. For example, in the WebVTT below, note the use of square brackets to provide tone and emotional insight to the viewer; this can help establish the mood otherwise provided using music, nonverbal sounds and crucial sound effects, and so forth.
-
-```plain
-1
-00:00:00 --> 00:00:45
-[Energetic techno music]
-
-2
-00:00:46 --> 00:00:51
-Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch?
-
-16
-00:00:52 --> 00:01:02
-[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?
-```
-
-Also it's a good practice to provide some content (such as the direct download link) as a fallback for viewers who use a browser in which the `<audio>` element is not supported:
-
-```html
-<audio controls>
-  <source src="myAudio.mp3" type="audio/mpeg" />
-  <source src="myAudio.ogg" type="audio/ogg" />
-  <p>
-    Download <a href="myAudio.mp3">MP3</a> or
-    <a href="myAudio.ogg">OGG</a> audio.
-  </p>
-</audio>
-```
-
-- [Web Video Text Tracks Format (WebVTT)](/en-US/docs/Web/API/WebVTT_API)
-- [WebAIM: Captions, Transcripts, and Audio Descriptions](https://webaim.org/techniques/captions/)
-- [MDN Understanding WCAG, Guideline 1.2 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.2_—_providing_text_alternatives_for_time-based_media)
-- [Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html)
-- [Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html)
-
 ## Technical summary
 
 <table class="properties">
diff --git a/files/en-us/web/html/element/br/index.md b/files/en-us/web/html/element/br/index.md
index 71508be2b3a3ebd..524fb62a79a43de 100644
--- a/files/en-us/web/html/element/br/index.md
+++ b/files/en-us/web/html/element/br/index.md
@@ -15,6 +15,12 @@ As you can see from the above example, a `<br>` element is included at each poin
 
 > **Note:** Do not use `<br>` to create margins between paragraphs; wrap them in {{htmlelement("p")}} elements and use the [CSS](/en-US/docs/Web/CSS) {{cssxref('margin')}} property to control their size.
 
+## Accessibility concerns
+
+Creating separate paragraphs of text using `<br>` is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element, but not any content contained within `<br>`s. This can be a confusing and frustrating experience for the person using the screen reader.
+
+Use `<p>` elements, and use CSS properties like {{cssxref("margin")}} to control their spacing.
+
 ## Attributes
 
 This element's attributes include the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
@@ -48,12 +54,6 @@ USA<br />
 
 {{ EmbedLiveSample('Simple_br', 640, 120) }}
 
-## Accessibility concerns
-
-Creating separate paragraphs of text using `<br>` is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element, but not any content contained within `<br>`s. This can be a confusing and frustrating experience for the person using the screen reader.
-
-Use `<p>` elements, and use CSS properties like {{cssxref("margin")}} to control their spacing.
-
 ## Technical summary
 
 <table class="properties">
diff --git a/files/en-us/web/html/element/button/index.md b/files/en-us/web/html/element/button/index.md
index 8c64c8e38bff8b1..9fb9379361eb6cc 100644
--- a/files/en-us/web/html/element/button/index.md
+++ b/files/en-us/web/html/element/button/index.md
@@ -13,6 +13,75 @@ By default, HTML buttons are presented in a style resembling the platform the {{
 
 {{EmbedInteractiveExample("pages/tabbed/button.html", "tabbed-shorter")}}
 
+## Accessibility concerns
+
+### Icon buttons
+
+Buttons that only show an icon to represent do not have an _accessible name_. Accessible names provide information for assistive technology, such as screen readers, to access when they parse the document and generate [an accessibility tree](/en-US/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis). Assistive technology then uses the accessibility tree to navigate and manipulate page content.
+
+To give an icon button an accessible name, put text in the `<button>` element that concisely describes the button's functionality.
+
+#### Examples
+
+```html
+<button name="favorite">
+  <svg aria-hidden="true" viewBox="0 0 10 10">
+    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
+  </svg>
+  Add to favorites
+</button>
+```
+
+##### Result
+
+{{EmbedLiveSample('Icon buttons')}}
+
+If you want to visually hide the button's text, an accessible way to do so is to use [a combination of CSS properties](https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link) to remove it visually from the screen, but keep it parsable by assistive technology.
+
+However, it is worth noting that leaving the button text visually apparent can aid people who may not be familiar with the icon's meaning or understand the button's purpose. This is especially relevant for people who are not technologically sophisticated, or who may have different cultural interpretations for the icon the button uses.
+
+- [What is an accessible name? | The Paciello Group](https://www.tpgi.com/what-is-an-accessible-name/)
+- [MDN Understanding WCAG, Guideline 4.1 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Robust#guideline_4.1_—_compatible_maximize_compatibility_with_current_and_future_user_agents_including_assistive_technologies)
+- [Understanding Success Criterion 4.1.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html)
+
+### Size and Proximity
+
+#### Size
+
+Interactive elements such as buttons should provide an area large enough that it is easy to activate them. This helps a variety of people, including people with motor control issues and people using non-precise forms of input such as a stylus or fingers. A minimum interactive size of 44×44 [CSS pixels](https://www.w3.org/TR/WCAG21/#dfn-css-pixels) is recommended.
+
+- [Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)
+- [Target Size and 2.5.5 | Adrian Roselli](https://adrianroselli.com/2019/06/target-size-and-2-5-5.html)
+- [Quick test: Large touch targets - The A11Y Project](https://www.a11yproject.com/posts/large-touch-targets/)
+
+#### Proximity
+
+Large amounts of interactive content — including buttons — placed in close visual proximity to each other should have space separating them. This spacing is beneficial for people who are experiencing motor control issues, who may accidentally activate the wrong interactive content.
+
+Spacing may be created using CSS properties such as {{cssxref("margin")}}.
+
+- [Hand tremors and the giant-button-problem - Axess Lab](https://axesslab.com/hand-tremors/)
+
+### ARIA state information
+
+To describe the state of a button the correct ARIA attribute to use is [`aria-pressed`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) and not [`aria-checked`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked) or [`aria-selected`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected). To find out more read the information about the [ARIA button role](/en-US/docs/Web/Accessibility/ARIA/Roles/button_role).
+
+### Firefox
+
+Firefox will add a small dotted border on a focused button. This border is declared through CSS in the browser stylesheet, but you can override it to add your own focused style using [`button::-moz-focus-inner { }`](/en-US/docs/Web/CSS/::-moz-focus-inner).
+
+If overridden, it is important to **ensure that the state change when focus is moved to the button is high enough** that people experiencing low vision conditions will be able to perceive it.
+
+Color contrast ratio is determined by comparing the luminosity of the button text and background color values compared to the background the button is placed on. In order to meet current [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/), a ratio of 4.5:1 is required for text content and 3:1 for large text. (Large text is defined as 18.66px and {{cssxref("font-weight", "bold")}} or larger, or 24px or larger.)
+
+- [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
+- [MDN Understanding WCAG, Guideline 1.4 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
+
+### Clicking and focus
+
+Whether clicking on a {{HTMLElement("button")}} or {{HTMLElement("input")}} button types causes it to (by default) become focused varies by browser and OS. Most browsers do give focus to a button being clicked, but [Safari does not, by design](https://webkit.org/b/22261).
+
 ## Attributes
 
 This element's attributes include the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
@@ -119,75 +188,6 @@ While `<button type="button">` has no default behavior, event handlers can be sc
 
 {{ EmbedLiveSample('Example', 200, 64) }}
 
-## Accessibility concerns
-
-### Icon buttons
-
-Buttons that only show an icon to represent do not have an _accessible name_. Accessible names provide information for assistive technology, such as screen readers, to access when they parse the document and generate [an accessibility tree](/en-US/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis). Assistive technology then uses the accessibility tree to navigate and manipulate page content.
-
-To give an icon button an accessible name, put text in the `<button>` element that concisely describes the button's functionality.
-
-#### Examples
-
-```html
-<button name="favorite">
-  <svg aria-hidden="true" viewBox="0 0 10 10">
-    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
-  </svg>
-  Add to favorites
-</button>
-```
-
-##### Result
-
-{{EmbedLiveSample('Icon buttons')}}
-
-If you want to visually hide the button's text, an accessible way to do so is to use [a combination of CSS properties](https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link) to remove it visually from the screen, but keep it parsable by assistive technology.
-
-However, it is worth noting that leaving the button text visually apparent can aid people who may not be familiar with the icon's meaning or understand the button's purpose. This is especially relevant for people who are not technologically sophisticated, or who may have different cultural interpretations for the icon the button uses.
-
-- [What is an accessible name? | The Paciello Group](https://www.tpgi.com/what-is-an-accessible-name/)
-- [MDN Understanding WCAG, Guideline 4.1 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Robust#guideline_4.1_—_compatible_maximize_compatibility_with_current_and_future_user_agents_including_assistive_technologies)
-- [Understanding Success Criterion 4.1.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html)
-
-### Size and Proximity
-
-#### Size
-
-Interactive elements such as buttons should provide an area large enough that it is easy to activate them. This helps a variety of people, including people with motor control issues and people using non-precise forms of input such as a stylus or fingers. A minimum interactive size of 44×44 [CSS pixels](https://www.w3.org/TR/WCAG21/#dfn-css-pixels) is recommended.
-
-- [Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)
-- [Target Size and 2.5.5 | Adrian Roselli](https://adrianroselli.com/2019/06/target-size-and-2-5-5.html)
-- [Quick test: Large touch targets - The A11Y Project](https://www.a11yproject.com/posts/large-touch-targets/)
-
-#### Proximity
-
-Large amounts of interactive content — including buttons — placed in close visual proximity to each other should have space separating them. This spacing is beneficial for people who are experiencing motor control issues, who may accidentally activate the wrong interactive content.
-
-Spacing may be created using CSS properties such as {{cssxref("margin")}}.
-
-- [Hand tremors and the giant-button-problem - Axess Lab](https://axesslab.com/hand-tremors/)
-
-### ARIA state information
-
-To describe the state of a button the correct ARIA attribute to use is [`aria-pressed`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) and not [`aria-checked`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked) or [`aria-selected`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected). To find out more read the information about the [ARIA button role](/en-US/docs/Web/Accessibility/ARIA/Roles/button_role).
-
-### Firefox
-
-Firefox will add a small dotted border on a focused button. This border is declared through CSS in the browser stylesheet, but you can override it to add your own focused style using [`button::-moz-focus-inner { }`](/en-US/docs/Web/CSS/::-moz-focus-inner).
-
-If overridden, it is important to **ensure that the state change when focus is moved to the button is high enough** that people experiencing low vision conditions will be able to perceive it.
-
-Color contrast ratio is determined by comparing the luminosity of the button text and background color values compared to the background the button is placed on. In order to meet current [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/), a ratio of 4.5:1 is required for text content and 3:1 for large text. (Large text is defined as 18.66px and {{cssxref("font-weight", "bold")}} or larger, or 24px or larger.)
-
-- [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
-- [MDN Understanding WCAG, Guideline 1.4 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
-- [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
-
-### Clicking and focus
-
-Whether clicking on a {{HTMLElement("button")}} or {{HTMLElement("input")}} button types causes it to (by default) become focused varies by browser and OS. Most browsers do give focus to a button being clicked, but [Safari does not, by design](https://webkit.org/b/22261).
-
 ## Technical summary
 
 <table class="properties">
diff --git a/files/en-us/web/html/element/canvas/index.md b/files/en-us/web/html/element/canvas/index.md
index 4655c6ce67ece82..9cf4405a457da4b 100644
--- a/files/en-us/web/html/element/canvas/index.md
+++ b/files/en-us/web/html/element/canvas/index.md
@@ -76,6 +76,17 @@ Use the **HTML `<canvas>` element** with either the [canvas scripting API](/en-U
   </tbody>
 </table>
 
+## Accessibility concerns
+
+### Alternative content
+
+The `<canvas>` element on its own is just a bitmap and does not provide information about any drawn objects. Canvas content is not exposed to accessibility tools as semantic HTML is. In general, you should avoid using canvas in an accessible website or app. The following guides can help to make it more accessible.
+
+- [Canvas accessibility use cases](https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases)
+- [Canvas element accessibility issues](https://www.w3.org/html/wg/wiki/AddedElementCanvas)
+- [HTML Canvas Accessibility in Firefox 13 – by Steve Faulkner](https://www.tpgi.com/html5-canvas-accessibility-in-firefox-13/)
+- [Best practices for interactive canvas elements](https://html.spec.whatwg.org/multipage/scripting.html#best-practices)
+
 ## Attributes
 
 This element's attributes include the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
@@ -151,17 +162,6 @@ ctx.fillRect(10, 10, 100, 100);
 
 {{EmbedLiveSample('Examples', 600, 150)}}
 
-## Accessibility concerns
-
-### Alternative content
-
-The `<canvas>` element on its own is just a bitmap and does not provide information about any drawn objects. Canvas content is not exposed to accessibility tools as semantic HTML is. In general, you should avoid using canvas in an accessible website or app. The following guides can help to make it more accessible.
-
-- [Canvas accessibility use cases](https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases)
-- [Canvas element accessibility issues](https://www.w3.org/html/wg/wiki/AddedElementCanvas)
-- [HTML Canvas Accessibility in Firefox 13 – by Steve Faulkner](https://www.tpgi.com/html5-canvas-accessibility-in-firefox-13/)
-- [Best practices for interactive canvas elements](https://html.spec.whatwg.org/multipage/scripting.html#best-practices)
-
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/html/element/datalist/index.md b/files/en-us/web/html/element/datalist/index.md
index 7c1138a529cee3a..b606f204b8df801 100644
--- a/files/en-us/web/html/element/datalist/index.md
+++ b/files/en-us/web/html/element/datalist/index.md
@@ -16,6 +16,14 @@ Only certain types of {{HTMLElement("input")}} support this behavior, and it can
 
 > **Note:** The `<option>` element can store a value as internal content and in the `value` and `label` attributes. Which one will be visible in the drop-down menu depends on the browser, but when clicked, content entered into control field will always come from the `value` attribute.
 
+## Accessibility concerns
+
+When deciding to use the `<datalist>` element, here are some accessibility issues to be mindful of:
+
+- The font size of the data list's options does not zoom, always remaining the same size. The contents of the autosuggest do not grow or shrink when the rest of the contents are zoomed in or out.
+- As targeting the list of options with CSS is very limited to non-existent, rendering can not be styled for high-contrast mode.
+- Some screen reader/browser combinations, including NVDA and Firefox, do not announce the contents of the autosuggest popup.
+
 ## Attributes
 
 This element has no other attributes than the [global attributes](/en-US/docs/Web/HTML/Global_attributes), common to all elements.
@@ -168,14 +176,6 @@ The specification allows linking `<datalist>` with a {{HTMLElement("input/passwo
   </tbody>
 </table>
 
-## Accessibility concerns
-
-When deciding to use the `<datalist>` element, here are some accessibility issues to be mindful of:
-
-- The font size of the data list's options does not zoom, always remaining the same size. The contents of the autosuggest do not grow or shrink when the rest of the contents are zoomed in or out.
-- As targeting the list of options with CSS is very limited to non-existent, rendering can not be styled for high-contrast mode.
-- Some screen reader/browser combinations, including NVDA and Firefox, do not announce the contents of the autosuggest popup.
-
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/html/element/del/index.md b/files/en-us/web/html/element/del/index.md
index a1c4598caeef789..4a022e5dbbd572c 100644
--- a/files/en-us/web/html/element/del/index.md
+++ b/files/en-us/web/html/element/del/index.md
@@ -71,26 +71,6 @@ This element is often (but need not be) rendered by applying a strike-through st
   </tbody>
 </table>
 
-## Attributes
-
-This element's attributes include the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
-
-- `cite`
-  - : A URI for a resource that explains the change (for example, meeting minutes).
-- `datetime`
-  - : This attribute indicates the time and date of the change and must be a valid date string with an optional time. If the value cannot be parsed as a date with an optional time string, the element does not have an associated timestamp. For the format of the string without a time, see [Date strings](/en-US/docs/Web/HTML/Date_and_time_formats#date_strings). The format of the string if it includes both date and time is covered in [Local date and time strings](/en-US/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings).
-
-## Examples
-
-```html
-<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
-<del><p>This paragraph has been deleted.</p></del>
-```
-
-### Result
-
-{{EmbedLiveSample("Examples")}}
-
 ## Accessibility concerns
 
 The presence of the `del` element is not announced by most screen reading technology in its default configuration. It can be made to be announced by using the CSS {{cssxref("content")}} property, along with the {{cssxref("::before")}} and {{cssxref("::after")}} pseudo-elements.
@@ -121,6 +101,26 @@ Some people who use screen readers deliberately disable announcing content that
 - [Short note on making your mark (more accessible) | The Paciello Group](https://www.tpgi.com/short-note-on-making-your-mark-more-accessible/)
 - [Tweaking Text Level Styles | Adrian Roselli](https://adrianroselli.com/2017/12/tweaking-text-level-styles.html)
 
+## Attributes
+
+This element's attributes include the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
+
+- `cite`
+  - : A URI for a resource that explains the change (for example, meeting minutes).
+- `datetime`
+  - : This attribute indicates the time and date of the change and must be a valid date string with an optional time. If the value cannot be parsed as a date with an optional time string, the element does not have an associated timestamp. For the format of the string without a time, see [Date strings](/en-US/docs/Web/HTML/Date_and_time_formats#date_strings). The format of the string if it includes both date and time is covered in [Local date and time strings](/en-US/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings).
+
+## Examples
+
+```html
+<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
+<del><p>This paragraph has been deleted.</p></del>
+```
+
+### Result
+
+{{EmbedLiveSample("Examples")}}
+
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/html/element/dialog/index.md b/files/en-us/web/html/element/dialog/index.md
index 23e8e4c434b122f..18791f0d723ef3e 100644
--- a/files/en-us/web/html/element/dialog/index.md
+++ b/files/en-us/web/html/element/dialog/index.md
@@ -9,6 +9,16 @@ browser-compat: html.elements.dialog
 
 The **`<dialog>`** [HTML](/en-US/docs/Web/HTML) element represents a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.
 
+## Accessibility concerns
+
+The native HTML `<dialog>` element should be used in creating modal dialogs as it provides usability and accessibility features that must be replicated if using other elements for a similar purpose. Use the appropriate `.showModal()` or `.show()` method to render dialogs. If creating a custom dialog implementation, ensure all expected default behaviors are supported and proper labeling recommendations are followed.
+
+When implementing a dialog, it is important to consider the most appropriate place to set user focus. Explicitly indicating the initial focus placement by use of the [autofocus](/en-US/docs/Web/HTML/Global_attributes/autofocus) attribute will help ensure initial focus is set to the element deemed the best initial focus placement for any particular dialog. When in doubt, as it may not always be known where initial focus could be set within a dialog, particularly for instances where a dialog's content is dynamically rendered when invoked, then if necessary authors may decide focusing the `<dialog>` element itself would provide the best initial focus placement. When using {{domxref("HTMLDialogElement.showModal()")}} to open a `<dialog>`, focus is set on the first nested focusable element.
+
+Ensure a mechanism is provided to allow users to close a dialog. The most robust way to ensure all users can close a dialog is to include an explicit button to do so. For instance, a confirmation, cancel or close button as appropriate. Additionally, for those using a device with a keyboard, the <kbd>Escape</kbd> key is commonly expected to close modal dialogs as well. By default, a `<dialog>` invoked by the `showModal()` method will allow for its dismissal by the <kbd>Escape</kbd>. A non-modal dialog does not dismiss via the <kbd>Escape</kbd> key by default, and depending on what the non-modal dialog represents, it may not be desired for this behavior. If multiple modal dialogs are open, <kbd>Escape</kbd> should only close the last shown dialog. When using `<dialog>`, this behavior is provided by the browser.
+
+The `<dialog>` element is exposed by browsers similarly to custom dialogs using the ARIA [role="dialog"](/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role) attribute. `<dialog>` elements invoked by the `showModal()` method will have an implicit [aria-modal="true"](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal), whereas `<dialog>` elements invoked by the `show()` method, or rendered by use of the `open` attribute or changing the default `display` of a `<dialog>` will be exposed as `[aria-modal="false"]`. When implementing modal dialogs, everything other than the `<dialog>` and its contents should be rendered inert using the [`inert`](/en-US/docs/Web/HTML/Global_attributes/inert) attribute. When using `<dialog>` along with the `HTMLDialogElement.showModal()` method, this behavior is provided by the browser.
+
 ## Attributes
 
 This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
@@ -19,16 +29,6 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib
   - : Indicates that the dialog is active and can be interacted with. When the `open` attribute is not set, the dialog _shouldn't_ be shown to the user.
     It is recommended to use the `.show()` or `.showModal()` methods to render dialogs, rather than the `open` attribute. If a `<dialog>` is opened using the `open` attribute, it will be non-modal.
 
-## Accessibility considerations
-
-The native HTML `<dialog>` element should be used in creating modal dialogs as it provides usability and accessibility features that must be replicated if using other elements for a similar purpose. Use the appropriate `.showModal()` or `.show()` method to render dialogs. If creating a custom dialog implementation, ensure all expected default behaviors are supported and proper labeling recommendations are followed.
-
-When implementing a dialog, it is important to consider the most appropriate place to set user focus. Explicitly indicating the initial focus placement by use of the [autofocus](/en-US/docs/Web/HTML/Global_attributes/autofocus) attribute will help ensure initial focus is set to the element deemed the best initial focus placement for any particular dialog. When in doubt, as it may not always be known where initial focus could be set within a dialog, particularly for instances where a dialog's content is dynamically rendered when invoked, then if necessary authors may decide focusing the `<dialog>` element itself would provide the best initial focus placement. When using {{domxref("HTMLDialogElement.showModal()")}} to open a `<dialog>`, focus is set on the first nested focusable element.
-
-Ensure a mechanism is provided to allow users to close a dialog. The most robust way to ensure all users can close a dialog is to include an explicit button to do so. For instance, a confirmation, cancel or close button as appropriate. Additionally, for those using a device with a keyboard, the <kbd>Escape</kbd> key is commonly expected to close modal dialogs as well. By default, a `<dialog>` invoked by the `showModal()` method will allow for its dismissal by the <kbd>Escape</kbd>. A non-modal dialog does not dismiss via the <kbd>Escape</kbd> key by default, and depending on what the non-modal dialog represents, it may not be desired for this behavior. If multiple modal dialogs are open, <kbd>Escape</kbd> should only close the last shown dialog. When using `<dialog>`, this behavior is provided by the browser.
-
-The `<dialog>` element is exposed by browsers similarly to custom dialogs using the ARIA [role="dialog"](/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role) attribute. `<dialog>` elements invoked by the `showModal()` method will have an implicit [aria-modal="true"](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal), whereas `<dialog>` elements invoked by the `show()` method, or rendered by use of the `open` attribute or changing the default `display` of a `<dialog>` will be exposed as `[aria-modal="false"]`. When implementing modal dialogs, everything other than the `<dialog>` and its contents should be rendered inert using the [`inert`](/en-US/docs/Web/HTML/Global_attributes/inert) attribute. When using `<dialog>` along with the `HTMLDialogElement.showModal()` method, this behavior is provided by the browser.
-
 ## Usage notes
 
 - {{HTMLElement("form")}} elements can close a `<dialog>` if they have the attribute `method="dialog"` or if the button used to submit the form has `formmethod="dialog"` set. In this case, the state of the form controls are saved, not submitted, the `<dialog>` closes, and the {{domxref("HTMLDialogElement.returnValue", "returnValue")}} property gets set to the `value` of the button that was used to save the form's state.
diff --git a/files/en-us/web/html/element/div/index.md b/files/en-us/web/html/element/div/index.md
index 37e8f0e24d2ab75..34335ebf3784077 100644
--- a/files/en-us/web/html/element/div/index.md
+++ b/files/en-us/web/html/element/div/index.md
@@ -13,6 +13,10 @@ The **`<div>`** [HTML](/en-US/docs/Web/HTML) element is the generic container fo
 
 As a "pure" container, the `<div>` element does not inherently represent anything. Instead, it's used to group content so it can be easily styled using the [`class`](/en-US/docs/Web/HTML/Global_attributes#class) or [`id`](/en-US/docs/Web/HTML/Global_attributes#id) attributes, marking a section of a document as being written in a different language (using the [`lang`](/en-US/docs/Web/HTML/Global_attributes#lang) attribute), and so on.
 
+## Accessibility concerns
+
+The `<div>` element has [an implicit role of `generic`](https://www.w3.org/TR/wai-aria-1.2/#generic), and not none. This may affect certain ARIA combination declarations that expect a direct descendant element with a certain role to function properly.
+
 ## Attributes
 
 This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
@@ -23,10 +27,6 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib
 
 - The `<div>` element should be used only when no other semantic element (such as {{HTMLElement("article")}} or {{HTMLElement("nav")}}) is appropriate.
 
-## Accessibility concerns
-
-The `<div>` element has [an implicit role of `generic`](https://www.w3.org/TR/wai-aria-1.2/#generic), and not none. This may affect certain ARIA combination declarations that expect a direct descendant element with a certain role to function properly.
-
 ## Examples
 
 ### A simple example
diff --git a/files/en-us/web/html/element/dl/index.md b/files/en-us/web/html/element/dl/index.md
index 09e95f702d877dd..217210577bd364e 100644
--- a/files/en-us/web/html/element/dl/index.md
+++ b/files/en-us/web/html/element/dl/index.md
@@ -81,6 +81,14 @@ The **`<dl>`** [HTML](/en-US/docs/Web/HTML) element represents a description lis
   </tbody>
 </table>
 
+## Accessibility concerns
+
+Each screen reader exposes `<dl>` content differently, including total count, terms/definitions context, and navigation methods. These differences are not necessarily bugs.
+As of iOS 14, VoiceOver will announce that `<dl>` content is a list when navigating with the virtual cursor (not via the read-all command). VoiceOver does not support list navigation commands with `<dl>`. Be careful applying ARIA `term` and `definition` roles to `<dl>` constructs as VoiceOver (macOS and iOS) will adjust how they are announced.
+
+- [VoiceOver on iOS 14 Supports Description Lists](https://adrianroselli.com/2020/09/voiceover-on-ios-14-supports-description-lists.html)
+- [Brief Note on Description List Support](https://adrianroselli.com/2022/12/brief-note-on-description-list-support.html)
+
 ## Attributes
 
 This element only includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
@@ -215,14 +223,6 @@ Do not use this element (nor {{HTMLElement("ul")}} elements) to merely create in
 
 To change the indentation of a description term, use the [CSS](/en-US/docs/Web/CSS) {{cssxref("margin")}} property.
 
-## Accessibility concerns
-
-Each screen reader exposes `<dl>` content differently, including total count, terms/definitions context, and navigation methods. These differences are not necessarily bugs.
-As of iOS 14, VoiceOver will announce that `<dl>` content is a list when navigating with the virtual cursor (not via the read-all command). VoiceOver does not support list navigation commands with `<dl>`. Be careful applying ARIA `term` and `definition` roles to `<dl>` constructs as VoiceOver (macOS and iOS) will adjust how they are announced.
-
-- [VoiceOver on iOS 14 Supports Description Lists](https://adrianroselli.com/2020/09/voiceover-on-ios-14-supports-description-lists.html)
-- [Brief Note on Description List Support](https://adrianroselli.com/2022/12/brief-note-on-description-list-support.html)
-
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/html/element/embed/index.md b/files/en-us/web/html/element/embed/index.md
index b9a965ad98df8c7..f5c1d28765e7bce 100644
--- a/files/en-us/web/html/element/embed/index.md
+++ b/files/en-us/web/html/element/embed/index.md
@@ -15,6 +15,10 @@ The **`<embed>`** [HTML](/en-US/docs/Web/HTML) element embeds external content a
 
 Keep in mind that most modern browsers have deprecated and removed support for browser plug-ins, so relying upon `<embed>` is generally not wise if you want your site to be operable on the average user's browser.
 
+## Accessibility concerns
+
+Use the [`title` attribute](/en-US/docs/Web/HTML/Global_attributes/title) on an `embed` element to label its content so that people navigating with assistive technology such as a screen reader can understand what it contains. The title's value should concisely describe the embedded content. Without a title, they may not be able to determine what its embedded content is. This context shift can be confusing and time-consuming, especially if the `embed` element contains interactive content like video or audio.
+
 ## Attributes
 
 This element's attributes include the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
@@ -43,10 +47,6 @@ You can use the {{cssxref("object-position")}} property to adjust the positionin
   title="Title of my video" />
 ```
 
-## Accessibility concerns
-
-Use the [`title` attribute](/en-US/docs/Web/HTML/Global_attributes/title) on an `embed` element to label its content so that people navigating with assistive technology such as a screen reader can understand what it contains. The title's value should concisely describe the embedded content. Without a title, they may not be able to determine what its embedded content is. This context shift can be confusing and time-consuming, especially if the `embed` element contains interactive content like video or audio.
-
 ## Technical summary
 
 <table class="properties">
diff --git a/files/en-us/web/html/element/footer/index.md b/files/en-us/web/html/element/footer/index.md
index e5a4b1978b96291..09a53439c128da2 100644
--- a/files/en-us/web/html/element/footer/index.md
+++ b/files/en-us/web/html/element/footer/index.md
@@ -76,6 +76,12 @@ The **`<footer>`** [HTML](/en-US/docs/Web/HTML) element represents a footer for
   </tbody>
 </table>
 
+## Accessibility concerns
+
+Prior to the release of Safari 13, the `contentinfo` [landmark role](/en-US/docs/Learn/Accessibility/WAI-ARIA_basics#signpostslandmarks) was not properly exposed by [VoiceOver](https://help.apple.com/voiceover/info/guide/). If needing to support legacy Safari browsers, add `role="contentinfo"` to the `footer` element to ensure the landmark will be properly exposed.
+
+- Related: [WebKit Bugzilla: 146930 – AX: HTML native elements (header, footer, main, aside, nav) should work the same as ARIA landmarks, sometimes they don't](https://webkit.org/b/146930)
+
 ## Attributes
 
 This element only includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
@@ -116,12 +122,6 @@ footer {
 
 {{EmbedLiveSample('Examples')}}
 
-## Accessibility concerns
-
-Prior to the release of Safari 13, the `contentinfo` [landmark role](/en-US/docs/Learn/Accessibility/WAI-ARIA_basics#signpostslandmarks) was not properly exposed by [VoiceOver](https://help.apple.com/voiceover/info/guide/). If needing to support legacy Safari browsers, add `role="contentinfo"` to the `footer` element to ensure the landmark will be properly exposed.
-
-- Related: [WebKit Bugzilla: 146930 – AX: HTML native elements (header, footer, main, aside, nav) should work the same as ARIA landmarks, sometimes they don't](https://webkit.org/b/146930)
-
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/html/element/header/index.md b/files/en-us/web/html/element/header/index.md
index d65eba3591d99fc..6b65ca7be8e5c42 100644
--- a/files/en-us/web/html/element/header/index.md
+++ b/files/en-us/web/html/element/header/index.md
@@ -23,6 +23,10 @@ Otherwise, it is a `section` in the accessibility tree, and usually contains the
 
 The `<header>` element originally existed at the very beginning of HTML for headings. It is seen in [the very first website](http://info.cern.ch/). At some point, headings became [`<h1>` through `<h6>`](/en-US/docs/Web/HTML/Element/Heading_Elements), allowing `<header>` to be free to fill a different role.
 
+## Accessibility concerns
+
+The `<header>` element defines a [`banner`](/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role) landmark when its context is the {{HTMLElement('body')}} element. The HTML header element is not considered a banner landmark when it is descendant of an {{HTMLElement('article')}}, {{HTMLElement('aside')}}, {{HTMLElement('main')}}, {{HTMLElement('nav')}}, or {{HTMLElement('section')}} element.
+
 ## Attributes
 
 This element only includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
@@ -64,10 +68,6 @@ This element only includes the [global attributes](/en-US/docs/Web/HTML/Global_a
 
 {{EmbedLiveSample('Article Header')}}
 
-## Accessibility
-
-The `<header>` element defines a [`banner`](/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role) landmark when its context is the {{HTMLElement('body')}} element. The HTML header element is not considered a banner landmark when it is descendant of an {{HTMLElement('article')}}, {{HTMLElement('aside')}}, {{HTMLElement('main')}}, {{HTMLElement('nav')}}, or {{HTMLElement('section')}} element.
-
 ## Technical summary
 
 <table class="properties">
diff --git a/files/en-us/web/html/element/heading_elements/index.md b/files/en-us/web/html/element/heading_elements/index.md
index 5403ad4e9ea7585..f9597e753cc9a57 100644
--- a/files/en-us/web/html/element/heading_elements/index.md
+++ b/files/en-us/web/html/element/heading_elements/index.md
@@ -68,63 +68,6 @@ The **`<h1>`** to **`<h6>`** [HTML](/en-US/docs/Web/HTML) elements represent six
   </tbody>
 </table>
 
-## Attributes
-
-These elements only include the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
-
-## Usage notes
-
-- Heading information can be used by user agents to construct a table of contents for a document automatically.
-- Do not use heading elements to resize text. Instead, use the {{glossary("CSS")}} {{cssxref("font-size")}} property.
-- Do not skip heading levels: always start from `<h1>`, followed by `<h2>` and so on.
-
-### Avoid using multiple `<h1>` elements on one page
-
-While using multiple `<h1>` elements on one page is allowed by the HTML standard (as long as they are not [nested](#nesting)), this is not considered a best practice. A page should generally have a single `<h1>` element that describes the content of the page (similar to the document's [`<title> element`](/en-US/docs/Web/HTML/Element/title)).
-
-> **Note:** Nesting multiple `<h1>` elements in nested [sectioning elements](/en-US/docs/Web/HTML/Element#content_sectioning) was allowed in older versions of the HTML standard. However, this was never considered a best practice and is now non-conforming. Read more in [There Is No Document Outline Algorithm](https://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html).
-
-Prefer using only one `<h1>` per page and [nest headings](#nesting) without skipping levels.
-
-## Examples
-
-### All headings
-
-The following code shows all the heading levels, in use.
-
-```html
-<h1>Heading level 1</h1>
-<h2>Heading level 2</h2>
-<h3>Heading level 3</h3>
-<h4>Heading level 4</h4>
-<h5>Heading level 5</h5>
-<h6>Heading level 6</h6>
-```
-
-{{EmbedLiveSample('All_headings', '280', '300')}}
-
-### Example page
-
-The following code shows a few headings with some content under them.
-
-```html
-<h1>Heading elements</h1>
-<h2>Summary</h2>
-<p>Some text here…</p>
-
-<h2>Examples</h2>
-<h3>Example 1</h3>
-<p>Some text here…</p>
-
-<h3>Example 2</h3>
-<p>Some text here…</p>
-
-<h2>See also</h2>
-<p>Some text here…</p>
-```
-
-{{EmbedLiveSample('Example_page', '280', '480')}}
-
 ## Accessibility concerns
 
 ### Navigation
@@ -153,29 +96,29 @@ Headings may be nested as subsections to reflect the organization of the content
 
 1. `h1` Beetles
 
-   1. `h2` Etymology
-   2. `h2` Distribution and Diversity
-   3. `h2` Evolution
+  1. `h2` Etymology
+  2. `h2` Distribution and Diversity
+  3. `h2` Evolution
 
-      1. `h3` Late Paleozoic
-      2. `h3` Jurassic
-      3. `h3` Cretaceous
-      4. `h3` Cenozoic
+    1. `h3` Late Paleozoic
+    2. `h3` Jurassic
+    3. `h3` Cretaceous
+    4. `h3` Cenozoic
 
-   4. `h2` External Morphology
+  4. `h2` External Morphology
 
-      1. `h3` Head
+    1. `h3` Head
 
-         1. `h4` Mouthparts
+      1. `h4` Mouthparts
 
-      2. `h3` Thorax
+    2. `h3` Thorax
 
-         1. `h4` Prothorax
-         2. `h4` Pterothorax
+      1. `h4` Prothorax
+      2. `h4` Pterothorax
 
-      3. `h3` Legs
-      4. `h3` Wings
-      5. `h3` Abdomen
+    3. `h3` Legs
+    4. `h3` Wings
+    5. `h3` Abdomen
 
 When headings are nested, heading levels may be "skipped" when closing a subsection.
 
@@ -220,6 +163,65 @@ In this example, screen reading technology would announce that there are two {{H
 - [Using the aria-labelledby attribute](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)
 - [Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby)
 
+
+
+## Attributes
+
+These elements only include the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
+
+## Usage notes
+
+- Heading information can be used by user agents to construct a table of contents for a document automatically.
+- Do not use heading elements to resize text. Instead, use the {{glossary("CSS")}} {{cssxref("font-size")}} property.
+- Do not skip heading levels: always start from `<h1>`, followed by `<h2>` and so on.
+
+### Avoid using multiple `<h1>` elements on one page
+
+While using multiple `<h1>` elements on one page is allowed by the HTML standard (as long as they are not [nested](#nesting)), this is not considered a best practice. A page should generally have a single `<h1>` element that describes the content of the page (similar to the document's [`<title> element`](/en-US/docs/Web/HTML/Element/title)).
+
+> **Note:** Nesting multiple `<h1>` elements in nested [sectioning elements](/en-US/docs/Web/HTML/Element#content_sectioning) was allowed in older versions of the HTML standard. However, this was never considered a best practice and is now non-conforming. Read more in [There Is No Document Outline Algorithm](https://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html).
+
+Prefer using only one `<h1>` per page and [nest headings](#nesting) without skipping levels.
+
+## Examples
+
+### All headings
+
+The following code shows all the heading levels, in use.
+
+```html
+<h1>Heading level 1</h1>
+<h2>Heading level 2</h2>
+<h3>Heading level 3</h3>
+<h4>Heading level 4</h4>
+<h5>Heading level 5</h5>
+<h6>Heading level 6</h6>
+```
+
+{{EmbedLiveSample('All_headings', '280', '300')}}
+
+### Example page
+
+The following code shows a few headings with some content under them.
+
+```html
+<h1>Heading elements</h1>
+<h2>Summary</h2>
+<p>Some text here…</p>
+
+<h2>Examples</h2>
+<h3>Example 1</h3>
+<p>Some text here…</p>
+
+<h3>Example 2</h3>
+<p>Some text here…</p>
+
+<h2>See also</h2>
+<p>Some text here…</p>
+```
+
+{{EmbedLiveSample('Example_page', '280', '480')}}
+
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/html/element/hgroup/index.md b/files/en-us/web/html/element/hgroup/index.md
index e72e6ec7a03f00e..896616caf960f5f 100644
--- a/files/en-us/web/html/element/hgroup/index.md
+++ b/files/en-us/web/html/element/hgroup/index.md
@@ -11,6 +11,10 @@ The **`<hgroup>`** [HTML](/en-US/docs/Web/HTML) element represents a heading and
 
 {{EmbedInteractiveExample("pages/tabbed/hgroup.html", "tabbed-standard")}}
 
+## Accessibility concerns
+
+The `<hgroup>` presently has no strong accessibility semantics. The content of the element (a heading and optional paragraphs) is what is exposed by browser accessibility APIs.
+
 ## Attributes
 
 This element only includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
@@ -45,10 +49,6 @@ The `<hgroup>` itself has no impact on the document outline of a web page. Rathe
 
 {{EmbedLiveSample('Examples')}}
 
-## Accessibility concerns
-
-The `<hgroup>` presently has no strong accessibility semantics. The content of the element (a heading and optional paragraphs) is what is exposed by browser accessibility APIs.
-
 ## Technical summary
 
 <table class="properties">
diff --git a/files/en-us/web/html/element/html/index.md b/files/en-us/web/html/element/html/index.md
index 5ec0313e03bc7eb..fe64aae5b891aa7 100644
--- a/files/en-us/web/html/element/html/index.md
+++ b/files/en-us/web/html/element/html/index.md
@@ -58,6 +58,15 @@ The **`<html>`** [HTML](/en-US/docs/Web/HTML) element represents the root (top-l
   </tbody>
 </table>
 
+## Accessibility concerns
+
+While HTML does not require authors to specify `<html>` element start and ending tags, it is important for authors to do so as it will allow them to specify the [`lang`](/en-US/docs/Web/HTML/Global_attributes#lang) for the webpage. Providing a `lang` attribute with a valid language tag according to {{RFC(5646, "Tags for Identifying Languages (also known as BCP 47)")}} on the `<html>` element will help screen reading technology determine the proper language to announce. The identifying language tag should describe the language used by the majority of the content of the page. Without it, screen readers will typically default to the operating system's set language, which may cause mispronunciations.
+
+Including a valid `lang` declaration on the `<html>` element also ensures that important metadata contained in the page's {{HTMLElement("head")}}, such as the page's {{HTMLElement("title")}}, are also announced properly.
+
+- [MDN Understanding WCAG, Guideline 3.1 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.1_%e2%80%94_readable_make_text_content_readable_and_understandable)
+- [Understanding Success Criterion 3.1.1 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/language-of-page.html)
+
 ## Attributes
 
 This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
@@ -83,15 +92,6 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib
 </html>
 ```
 
-## Accessibility concerns
-
-While HTML does not require authors to specify `<html>` element start and ending tags, it is important for authors to do so as it will allow them to specify the [`lang`](/en-US/docs/Web/HTML/Global_attributes#lang) for the webpage. Providing a `lang` attribute with a valid language tag according to {{RFC(5646, "Tags for Identifying Languages (also known as BCP 47)")}} on the `<html>` element will help screen reading technology determine the proper language to announce. The identifying language tag should describe the language used by the majority of the content of the page. Without it, screen readers will typically default to the operating system's set language, which may cause mispronunciations.
-
-Including a valid `lang` declaration on the `<html>` element also ensures that important metadata contained in the page's {{HTMLElement("head")}}, such as the page's {{HTMLElement("title")}}, are also announced properly.
-
-- [MDN Understanding WCAG, Guideline 3.1 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.1_%e2%80%94_readable_make_text_content_readable_and_understandable)
-- [Understanding Success Criterion 3.1.1 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/language-of-page.html)
-
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/html/element/iframe/index.md b/files/en-us/web/html/element/iframe/index.md
index c5f34f4338f821d..0905af9b427a1df 100644
--- a/files/en-us/web/html/element/iframe/index.md
+++ b/files/en-us/web/html/element/iframe/index.md
@@ -15,6 +15,18 @@ Each embedded browsing context has its own [document](/en-US/docs/Web/API/Docume
 
 > **Warning:** Because each browsing context is a complete document environment, every `<iframe>` in a page requires increased memory and other computing resources. While theoretically you can use as many `<iframe>`s as you like, check for performance problems.
 
+## Accessibility concerns
+
+People navigating with assistive technology such as a screen reader can use the [`title` attribute](/en-US/docs/Web/HTML/Global_attributes/title) on an `<iframe>` to label its content. The title's value should concisely describe the embedded content:
+
+```html
+<iframe
+  title="Wikipedia page for Avocados"
+  src="https://en.wikipedia.org/wiki/Avocado"></iframe>
+```
+
+Without this title, they have to navigate into the `<iframe>` to determine what its embedded content is. This context shift can be confusing and time-consuming, especially for pages with multiple `<iframe>`s and/or if embeds contain interactive content like video or audio.
+
 ## Attributes
 
 This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
@@ -158,18 +170,6 @@ This example embeds the page at <https://example.org> in an iframe.
 
 {{ EmbedLiveSample('A_simple_iframe', 640,400)}}
 
-## Accessibility concerns
-
-People navigating with assistive technology such as a screen reader can use the [`title` attribute](/en-US/docs/Web/HTML/Global_attributes/title) on an `<iframe>` to label its content. The title's value should concisely describe the embedded content:
-
-```html
-<iframe
-  title="Wikipedia page for Avocados"
-  src="https://en.wikipedia.org/wiki/Avocado"></iframe>
-```
-
-Without this title, they have to navigate into the `<iframe>` to determine what its embedded content is. This context shift can be confusing and time-consuming, especially for pages with multiple `<iframe>`s and/or if embeds contain interactive content like video or audio.
-
 ## Technical summary
 
 <table class="properties">
diff --git a/files/en-us/web/html/element/img/index.md b/files/en-us/web/html/element/img/index.md
index 0a011d457cddff7..4eed8768c024a0b 100644
--- a/files/en-us/web/html/element/img/index.md
+++ b/files/en-us/web/html/element/img/index.md
@@ -53,6 +53,50 @@ If an error occurs while loading or rendering an image, and an `onerror` event h
 - The image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the `<img>` element's attributes.
 - The image is in a format not supported by the {{Glossary("user agent")}}.
 
+## Accessibility concerns
+
+### Authoring meaningful alternate descriptions
+
+An `alt` attribute's value should clearly and concisely describe the image's content. It should not describe the presence of the image itself or the file name of the image. If the `alt` attribute is purposefully left off because the image has no textual equivalent, consider alternate methods to present what the image is trying to communicate.
+
+#### Don't
+
+```html example-bad
+<img alt="image" src="penguin.jpg" />
+```
+
+#### Do
+
+```html example-good
+<img alt="A Rockhopper Penguin standing on a beach." src="penguin.jpg" />
+```
+
+When an `alt` attribute is not present on an image, some screen readers may announce the image's file name instead. This can be a confusing experience if the file name isn't representative of the image's contents.
+
+- [An alt Decision Tree • Images • WAI Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/images/decision-tree/)
+- [Alt-texts: The Ultimate Guide — Axess Lab](https://axesslab.com/alt-texts/)
+- [How to Design Great Alt Text: An Introduction | Deque](https://www.deque.com/blog/great-alt-text-introduction/)
+- [MDN Understanding WCAG, Guideline 1.1 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content)
+- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html)
+
+### Identifying SVG as an image
+
+Due to a [VoiceOver bug](https://webkit.org/b/216364), VoiceOver does not correctly announce SVG images as images. Include [`role="img"`](/en-US/docs/Web/Accessibility/ARIA/Roles/img_role) to all `<img>` elements with SVG source files to ensure assistive technologies correctly announce the SVG as image content.
+
+```html
+<img src="mdn.svg" alt="MDN logo" role="img" />
+```
+
+### The title attribute
+
+The [`title`](/en-US/docs/Web/HTML/Global_attributes#title) attribute is not an acceptable substitute for the `alt` attribute. Additionally, avoid duplicating the `alt` attribute's value in a `title` attribute declared on the same image. Doing so may cause some screen readers to announce the description twice, creating a confusing experience.
+
+The `title` attribute should also not be used as supplemental captioning information to accompany an image's `alt` description. If an image needs a caption, use the [`figure`](/en-US/docs/Web/HTML/Element/figure) and [`figcaption`](/en-US/docs/Web/HTML/Element/figcaption) elements.
+
+The value of the `title` attribute is usually presented to the user as a tooltip, which appears shortly after the cursor stops moving over the image. While this _can_ provide additional information to the user, you should not assume that the user will ever see it: the user may only have keyboard or touchscreen. If you have information that's particularly important or valuable for the user, present it inline using one of the methods mentioned above instead of using `title`.
+
+- [Using the HTML title attribute – updated | The Paciello Group](https://www.tpgi.com/using-the-html-title-attribute-updated/)
+
 ## Attributes
 
 This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
@@ -287,50 +331,6 @@ The `src` attribute is ignored in {{glossary("User agent", "user agents")}} that
 
 Although `<img>` elements have innocent uses, they can have undesirable consequences for user security and privacy. See [Referer header: privacy and security concerns](/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns) for more information and mitigations.
 
-## Accessibility concerns
-
-### Authoring meaningful alternate descriptions
-
-An `alt` attribute's value should clearly and concisely describe the image's content. It should not describe the presence of the image itself or the file name of the image. If the `alt` attribute is purposefully left off because the image has no textual equivalent, consider alternate methods to present what the image is trying to communicate.
-
-#### Don't
-
-```html example-bad
-<img alt="image" src="penguin.jpg" />
-```
-
-#### Do
-
-```html example-good
-<img alt="A Rockhopper Penguin standing on a beach." src="penguin.jpg" />
-```
-
-When an `alt` attribute is not present on an image, some screen readers may announce the image's file name instead. This can be a confusing experience if the file name isn't representative of the image's contents.
-
-- [An alt Decision Tree • Images • WAI Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/images/decision-tree/)
-- [Alt-texts: The Ultimate Guide — Axess Lab](https://axesslab.com/alt-texts/)
-- [How to Design Great Alt Text: An Introduction | Deque](https://www.deque.com/blog/great-alt-text-introduction/)
-- [MDN Understanding WCAG, Guideline 1.1 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content)
-- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html)
-
-### Identifying SVG as an image
-
-Due to a [VoiceOver bug](https://webkit.org/b/216364), VoiceOver does not correctly announce SVG images as images. Include [`role="img"`](/en-US/docs/Web/Accessibility/ARIA/Roles/img_role) to all `<img>` elements with SVG source files to ensure assistive technologies correctly announce the SVG as image content.
-
-```html
-<img src="mdn.svg" alt="MDN logo" role="img" />
-```
-
-### The title attribute
-
-The [`title`](/en-US/docs/Web/HTML/Global_attributes#title) attribute is not an acceptable substitute for the `alt` attribute. Additionally, avoid duplicating the `alt` attribute's value in a `title` attribute declared on the same image. Doing so may cause some screen readers to announce the description twice, creating a confusing experience.
-
-The `title` attribute should also not be used as supplemental captioning information to accompany an image's `alt` description. If an image needs a caption, use the [`figure`](/en-US/docs/Web/HTML/Element/figure) and [`figcaption`](/en-US/docs/Web/HTML/Element/figcaption) elements.
-
-The value of the `title` attribute is usually presented to the user as a tooltip, which appears shortly after the cursor stops moving over the image. While this _can_ provide additional information to the user, you should not assume that the user will ever see it: the user may only have keyboard or touchscreen. If you have information that's particularly important or valuable for the user, present it inline using one of the methods mentioned above instead of using `title`.
-
-- [Using the HTML title attribute – updated | The Paciello Group](https://www.tpgi.com/using-the-html-title-attribute-updated/)
-
 ## Technical summary
 
 <table class="properties">
diff --git a/files/en-us/web/html/element/input/index.md b/files/en-us/web/html/element/input/index.md
index b65e6481c22d8ad..5a51b1575e0989c 100644
--- a/files/en-us/web/html/element/input/index.md
+++ b/files/en-us/web/html/element/input/index.md
@@ -309,6 +309,27 @@ The available types are as follows:
   </tbody>
 </table>
 
+## Accessibility concerns
+
+### Labels
+
+When including inputs, it is an accessibility requirement to add labels alongside. This is needed so those who use assistive technologies can tell what the input is for. Also, clicking or touching a label gives focus to the label's associated form control. This improves the accessibility and usability for sighted users, increases the area a user can click or touch to activate the form control. This is especially useful (and even needed) for radio buttons and checkboxes, which are tiny. For more information about labels in general see [Labels](#labels) .
+
+The following is an example of how to associate the `<label>` with an `<input>` element in the above style. You need to give the `<input>` an `id` attribute. The `<label>` then needs a `for` attribute whose value is the same as the input's `id`.
+
+```html
+<label for="peas">Do you like peas?</label>
+<input type="checkbox" name="peas" id="peas" />
+```
+
+### Size
+
+Interactive elements such as form input should provide an area large enough that it is easy to activate them. This helps a variety of people, including people with motor control issues and people using non-precise forms of input such as a stylus or fingers. A minimum interactive size of 44×44 [CSS pixels](https://www.w3.org/TR/WCAG21/#dfn-css-pixels) is recommended.
+
+- [Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)
+- [Target Size and 2.5.5 | Adrian Roselli](https://adrianroselli.com/2019/06/target-size-and-2-5-5.html)
+- [Quick test: Large touch targets - The A11Y Project](https://www.a11yproject.com/posts/large-touch-targets/)
+
 ## Attributes
 
 The `<input>` element is so powerful because of its attributes; the [`type`](#type) attribute, described with examples above, being the most important. Since every `<input>` element, regardless of type, is based on the {{domxref("HTMLInputElement")}} interface, they technically share the exact same set of attributes. However, in reality, most attributes have an effect on only a specific subset of input types. In addition, the way some attributes impact an input depends on the input type, impacting different input types in different ways.
@@ -1401,27 +1422,6 @@ Firefox uses the following heuristics to determine the locale to validate the us
   </tbody>
 </table>
 
-## Accessibility concerns
-
-### Labels
-
-When including inputs, it is an accessibility requirement to add labels alongside. This is needed so those who use assistive technologies can tell what the input is for. Also, clicking or touching a label gives focus to the label's associated form control. This improves the accessibility and usability for sighted users, increases the area a user can click or touch to activate the form control. This is especially useful (and even needed) for radio buttons and checkboxes, which are tiny. For more information about labels in general see [Labels](#labels) .
-
-The following is an example of how to associate the `<label>` with an `<input>` element in the above style. You need to give the `<input>` an `id` attribute. The `<label>` then needs a `for` attribute whose value is the same as the input's `id`.
-
-```html
-<label for="peas">Do you like peas?</label>
-<input type="checkbox" name="peas" id="peas" />
-```
-
-### Size
-
-Interactive elements such as form input should provide an area large enough that it is easy to activate them. This helps a variety of people, including people with motor control issues and people using non-precise forms of input such as a stylus or fingers. A minimum interactive size of 44×44 [CSS pixels](https://www.w3.org/TR/WCAG21/#dfn-css-pixels) is recommended.
-
-- [Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)
-- [Target Size and 2.5.5 | Adrian Roselli](https://adrianroselli.com/2019/06/target-size-and-2-5-5.html)
-- [Quick test: Large touch targets - The A11Y Project](https://www.a11yproject.com/posts/large-touch-targets/)
-
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/html/element/input/number/index.md b/files/en-us/web/html/element/input/number/index.md
index 86289198b235bc6..2bbc0bb4fd9385f 100644
--- a/files/en-us/web/html/element/input/number/index.md
+++ b/files/en-us/web/html/element/input/number/index.md
@@ -15,6 +15,12 @@ The browser may opt to provide stepper arrows to let the user increase and decre
 
 On browsers that don't support inputs of type `number`, a `number` input falls back to type `text`.
 
+## Accessibility concerns
+
+The implicit [role](/en-US/docs/Web/Accessibility/ARIA/Roles) for the `<input type="number">` element is [`spinbutton`](/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role). If spinbutton is not an important feature for your form control, consider _not_ using `type="number"`. Instead, use [`inputmode="numeric"`](/en-US/docs/Web/HTML/Global_attributes/inputmode) along with a [`pattern`](/en-US/docs/Web/HTML/Attributes/pattern) attribute that limits the characters to numbers and associated characters. With `<input type="number">`, there is a risk of users accidentally incrementing a number when they're trying to do something else. Additionally, if users try to enter something that's not a number, there's no explicit feedback about what they're doing wrong.
+
+Also consider using the [`autocomplete`](/en-US/docs/Web/HTML/Attributes/autocomplete) attribute to help users complete forms more quickly and with fewer chances of errors. For example, to enable autofill on a zip code field, set `autocomplete="postal-code"`.
+
 ## Value
 
 A number representing the value of the number entered into the input. You can set a default value for the input by including a number inside the [`value`](/en-US/docs/Web/HTML/Element/input#value) attribute, like so:
@@ -390,12 +396,6 @@ After declaring a few variables, an event listener is added to the `button` to c
 >
 > If you didn't do this, you'd have to fill in both feet/inches **and** meters to submit the form!
 
-## Accessibility
-
-The implicit [role](/en-US/docs/Web/Accessibility/ARIA/Roles) for the `<input type="number">` element is [`spinbutton`](/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role). If spinbutton is not an important feature for your form control, consider _not_ using `type="number"`. Instead, use [`inputmode="numeric"`](/en-US/docs/Web/HTML/Global_attributes/inputmode) along with a [`pattern`](/en-US/docs/Web/HTML/Attributes/pattern) attribute that limits the characters to numbers and associated characters. With `<input type="number">`, there is a risk of users accidentally incrementing a number when they're trying to do something else. Additionally, if users try to enter something that's not a number, there's no explicit feedback about what they're doing wrong.
-
-Also consider using the [`autocomplete`](/en-US/docs/Web/HTML/Attributes/autocomplete) attribute to help users complete forms more quickly and with fewer chances of errors. For example, to enable autofill on a zip code field, set `autocomplete="postal-code"`.
-
 ## Technical summary
 
 <table class="properties">
diff --git a/files/en-us/web/html/element/ins/index.md b/files/en-us/web/html/element/ins/index.md
index c1dcafb4f8ac093..34595d3db076668 100644
--- a/files/en-us/web/html/element/ins/index.md
+++ b/files/en-us/web/html/element/ins/index.md
@@ -69,25 +69,6 @@ The **`<ins>`** [HTML](/en-US/docs/Web/HTML) element represents a range of text
   </tbody>
 </table>
 
-## Attributes
-
-This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
-
-- `cite`
-  - : This attribute defines the URI of a resource that explains the change, such as a link to meeting minutes or a ticket in a troubleshooting system.
-- `datetime`
-  - : This attribute indicates the time and date of the change and must be a valid date with an optional time string. If the value cannot be parsed as a date with an optional time string, the element does not have an associated timestamp. For the format of the string without a time, see [Format of a valid date string](/en-US/docs/Web/HTML/Date_and_time_formats#date_strings). The format of the string if it includes both date and time is covered in [Format of a valid local date and time string](/en-US/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings).
-
-## Examples
-
-```html
-<ins>This text has been inserted</ins>
-```
-
-### Result
-
-{{EmbedLiveSample("Examples")}}
-
 ## Accessibility concerns
 
 The presence of the `<ins>` element is not announced by most screen reading technology in its default configuration. It can be made to be announced by using the CSS {{cssxref("content")}} property, along with the {{cssxref("::before")}} and {{cssxref("::after")}} pseudo-elements.
@@ -118,6 +99,25 @@ Some people who use screen readers deliberately disable announcing content that
 - [Short note on making your mark (more accessible) | The Paciello Group](https://www.tpgi.com/short-note-on-making-your-mark-more-accessible/)
 - [Tweaking Text Level Styles | Adrian Roselli](https://adrianroselli.com/2017/12/tweaking-text-level-styles.html)
 
+## Attributes
+
+This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
+
+- `cite`
+  - : This attribute defines the URI of a resource that explains the change, such as a link to meeting minutes or a ticket in a troubleshooting system.
+- `datetime`
+  - : This attribute indicates the time and date of the change and must be a valid date with an optional time string. If the value cannot be parsed as a date with an optional time string, the element does not have an associated timestamp. For the format of the string without a time, see [Format of a valid date string](/en-US/docs/Web/HTML/Date_and_time_formats#date_strings). The format of the string if it includes both date and time is covered in [Format of a valid local date and time string](/en-US/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings).
+
+## Examples
+
+```html
+<ins>This text has been inserted</ins>
+```
+
+### Result
+
+{{EmbedLiveSample("Examples")}}
+
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/html/element/label/index.md b/files/en-us/web/html/element/label/index.md
index 79cee67152d6de7..074e32b9a859e5d 100644
--- a/files/en-us/web/html/element/label/index.md
+++ b/files/en-us/web/html/element/label/index.md
@@ -37,45 +37,6 @@ The form control that a label is labeling is called the _labeled control_ of the
 
 Elements that can be associated with a `<label>` element include {{HTMLElement('button')}}, {{HTMLElement('input')}} (except for `type="hidden"`), {{HTMLElement('meter')}}, {{HTMLElement('output')}}, {{HTMLElement('progress')}}, {{HTMLElement('select')}} and {{HTMLElement('textarea')}}.
 
-## Attributes
-
-This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
-
-- `for`
-
-  - : The value of the `for` attribute must be a single [`id`](/en-US/docs/Web/HTML/Global_attributes#id) for a [labelable](/en-US/docs/Web/HTML/Content_categories#labelable) form-related element in the same document as the `<label>` element. So, any given `label` element can be associated with only one form control.
-
-    > **Note:** To programmatically set the `for` attribute, use [`htmlFor`](/en-US/docs/Web/API/HTMLLabelElement/htmlFor).
-
-    The first element in the document with an `id` attribute matching the value of the `for` attribute is the _labeled control_ for this `label` element — if the element with that `id` is actually a [labelable element](https://html.spec.whatwg.org/multipage/forms.html#category-label). If it is _not_ a labelable element, then the `for` attribute has no effect. If there are other elements that also match the `id` value, later in the document, they are not considered.
-
-    Multiple `label` elements can be given the same value for their `for` attribute; doing so causes the associated form control (the form control that `for` value references) to have multiple labels.
-
-    > **Note:** A `<label>` element can have both a `for` attribute and a contained control element, as long as the `for` attribute points to the contained control element.
-
-## Styling with CSS
-
-There are no special styling considerations for `<label>` elements — structurally they are simple inline elements, and so can be styled in much the same way as a {{htmlelement("span")}} or {{htmlelement("a")}} element. You can apply styling to them in any way you want, as long as you don't cause the text to become difficult to read.
-
-## Examples
-
-### Defining an implicit label
-
-```html
-<label>Click me <input type="text" /></label>
-```
-
-{{EmbedLiveSample('Simple_label_example', '200', '50')}}
-
-### Defining an explicit label with the "for" attribute
-
-```html
-<label for="username">Click me to focus on the input field</label>
-<input type="text" id="username" />
-```
-
-{{EmbedLiveSample('Using_the_for_attribute', '200', '50')}}
-
 ## Accessibility concerns
 
 ### Interactive content
@@ -131,6 +92,45 @@ If a [form](/en-US/docs/Web/HTML/Element/form), or a section of a form needs a t
 
 An {{HTMLElement("input")}} element with a `type="button"` declaration and a valid `value` attribute does not need a label associated with it. Doing so may actually interfere with how assistive technology parses the button input. The same applies for the {{HTMLElement("button")}} element.
 
+## Attributes
+
+This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
+
+- `for`
+
+  - : The value of the `for` attribute must be a single [`id`](/en-US/docs/Web/HTML/Global_attributes#id) for a [labelable](/en-US/docs/Web/HTML/Content_categories#labelable) form-related element in the same document as the `<label>` element. So, any given `label` element can be associated with only one form control.
+
+    > **Note:** To programmatically set the `for` attribute, use [`htmlFor`](/en-US/docs/Web/API/HTMLLabelElement/htmlFor).
+
+    The first element in the document with an `id` attribute matching the value of the `for` attribute is the _labeled control_ for this `label` element — if the element with that `id` is actually a [labelable element](https://html.spec.whatwg.org/multipage/forms.html#category-label). If it is _not_ a labelable element, then the `for` attribute has no effect. If there are other elements that also match the `id` value, later in the document, they are not considered.
+
+    Multiple `label` elements can be given the same value for their `for` attribute; doing so causes the associated form control (the form control that `for` value references) to have multiple labels.
+
+    > **Note:** A `<label>` element can have both a `for` attribute and a contained control element, as long as the `for` attribute points to the contained control element.
+
+## Styling with CSS
+
+There are no special styling considerations for `<label>` elements — structurally they are simple inline elements, and so can be styled in much the same way as a {{htmlelement("span")}} or {{htmlelement("a")}} element. You can apply styling to them in any way you want, as long as you don't cause the text to become difficult to read.
+
+## Examples
+
+### Defining an implicit label
+
+```html
+<label>Click me <input type="text" /></label>
+```
+
+{{EmbedLiveSample('Simple_label_example', '200', '50')}}
+
+### Defining an explicit label with the "for" attribute
+
+```html
+<label for="username">Click me to focus on the input field</label>
+<input type="text" id="username" />
+```
+
+{{EmbedLiveSample('Using_the_for_attribute', '200', '50')}}
+
 ## Technical summary
 
 <table class="properties">
diff --git a/files/en-us/web/html/element/main/index.md b/files/en-us/web/html/element/main/index.md
index 66a09a5001dc2c0..1c145f273b7c6c6 100644
--- a/files/en-us/web/html/element/main/index.md
+++ b/files/en-us/web/html/element/main/index.md
@@ -74,6 +74,38 @@ A document mustn't have more than one `<main>` element that doesn't have the [`h
   </tbody>
 </table>
 
+## Accessibility concerns
+
+### Landmark
+
+The `<main>` element behaves like a [`main` landmark](/en-US/docs/Web/Accessibility/ARIA/Roles/main_role) role. [Landmarks](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles) can be used by assistive technology to quickly identify and navigate to large sections of the document. Prefer using the `<main>` element over declaring `role="main"`, unless there are [legacy browser support concerns](#browser_compatibility).
+
+### Skip navigation
+
+Skip navigation, also known as "skipnav", is a technique that allows an assistive technology user to quickly bypass large sections of repeated content (main navigation, info banners, etc.). This lets the user access the main content of the page faster.
+
+Adding an [`id`](/en-US/docs/Web/HTML/Global_attributes#id) attribute to the `<main>` element lets it be a target of a skip navigation link.
+
+```html
+<body>
+  <a href="#main-content">Skip to main content</a>
+
+  <!-- navigation and header content -->
+
+  <main id="main-content">
+    <!-- main page content -->
+  </main>
+</body>
+```
+
+- [WebAIM: "Skip Navigation" Links](https://webaim.org/techniques/skipnav/)
+
+### Reader mode
+
+Browser reader mode functionality looks for the presence of the `<main>` element, as well as [heading](/en-US/docs/Web/HTML/Element/Heading_Elements) and [content sectioning elements](/en-US/docs/Web/HTML/Element#content_sectioning) when converting content into a specialized reader view.
+
+- [Building websites for Safari Reader Mode and other reading apps.](https://medium.com/@mandy.michael/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9)
+
 ## Attributes
 
 This element only includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
@@ -117,38 +149,6 @@ The content of a `<main>` element should be unique to the document. Content that
 
 {{EmbedLiveSample('Examples')}}
 
-## Accessibility concerns
-
-### Landmark
-
-The `<main>` element behaves like a [`main` landmark](/en-US/docs/Web/Accessibility/ARIA/Roles/main_role) role. [Landmarks](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles) can be used by assistive technology to quickly identify and navigate to large sections of the document. Prefer using the `<main>` element over declaring `role="main"`, unless there are [legacy browser support concerns](#browser_compatibility).
-
-### Skip navigation
-
-Skip navigation, also known as "skipnav", is a technique that allows an assistive technology user to quickly bypass large sections of repeated content (main navigation, info banners, etc.). This lets the user access the main content of the page faster.
-
-Adding an [`id`](/en-US/docs/Web/HTML/Global_attributes#id) attribute to the `<main>` element lets it be a target of a skip navigation link.
-
-```html
-<body>
-  <a href="#main-content">Skip to main content</a>
-
-  <!-- navigation and header content -->
-
-  <main id="main-content">
-    <!-- main page content -->
-  </main>
-</body>
-```
-
-- [WebAIM: "Skip Navigation" Links](https://webaim.org/techniques/skipnav/)
-
-### Reader mode
-
-Browser reader mode functionality looks for the presence of the `<main>` element, as well as [heading](/en-US/docs/Web/HTML/Element/Heading_Elements) and [content sectioning elements](/en-US/docs/Web/HTML/Element#content_sectioning) when converting content into a specialized reader view.
-
-- [Building websites for Safari Reader Mode and other reading apps.](https://medium.com/@mandy.michael/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9)
-
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/html/element/mark/index.md b/files/en-us/web/html/element/mark/index.md
index 24220ef6bf94a21..c1aa40187a755cd 100644
--- a/files/en-us/web/html/element/mark/index.md
+++ b/files/en-us/web/html/element/mark/index.md
@@ -11,6 +11,36 @@ The **`<mark>`** [HTML](/en-US/docs/Web/HTML) element represents text which is *
 
 {{EmbedInteractiveExample("pages/tabbed/mark.html", "tabbed-shorter")}}
 
+## Accessibility concerns
+
+The presence of the `mark` element is not announced by most screen reading technology in its default configuration. It can be made to be announced by using the CSS {{cssxref("content")}} property, along with the {{cssxref("::before")}} and {{cssxref("::after")}} pseudo-elements.
+
+```css
+mark::before,
+mark::after {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+mark::before {
+  content: " [highlight start] ";
+}
+
+mark::after {
+  content: " [highlight end] ";
+}
+```
+
+Some people who use screen readers deliberately disable announcing content that creates extra verbosity. Because of this, it is important to not abuse this technique and only apply it in situations where not knowing content has been highlighted would adversely affect understanding.
+
+- [Short note on making your mark (more accessible) | The Paciello Group](https://www.tpgi.com/short-note-on-making-your-mark-more-accessible/)
+- [Tweaking Text Level Styles | Adrian Roselli](https://adrianroselli.com/2017/12/tweaking-text-level-styles.html)
+
 ## Attributes
 
 This element only includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
@@ -69,36 +99,6 @@ To help distinguish the use of `<mark>` for search results from other potential
 
 {{EmbedLiveSample("Identifying_context-sensitive_passages", 650, 130)}}
 
-## Accessibility concerns
-
-The presence of the `mark` element is not announced by most screen reading technology in its default configuration. It can be made to be announced by using the CSS {{cssxref("content")}} property, along with the {{cssxref("::before")}} and {{cssxref("::after")}} pseudo-elements.
-
-```css
-mark::before,
-mark::after {
-  clip-path: inset(100%);
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
-mark::before {
-  content: " [highlight start] ";
-}
-
-mark::after {
-  content: " [highlight end] ";
-}
-```
-
-Some people who use screen readers deliberately disable announcing content that creates extra verbosity. Because of this, it is important to not abuse this technique and only apply it in situations where not knowing content has been highlighted would adversely affect understanding.
-
-- [Short note on making your mark (more accessible) | The Paciello Group](https://www.tpgi.com/short-note-on-making-your-mark-more-accessible/)
-- [Tweaking Text Level Styles | Adrian Roselli](https://adrianroselli.com/2017/12/tweaking-text-level-styles.html)
-
 ## Technical summary
 
 <table class="properties">
diff --git a/files/en-us/web/html/element/output/index.md b/files/en-us/web/html/element/output/index.md
index d13d93def20236a..d87cceab37b9dc9 100644
--- a/files/en-us/web/html/element/output/index.md
+++ b/files/en-us/web/html/element/output/index.md
@@ -9,6 +9,10 @@ browser-compat: html.elements.output
 
 The **`<output>`** [HTML](/en-US/docs/Web/HTML) element is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.
 
+## Accessibility Concerns
+
+Many browsers implement this element as an [`aria-live`](/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) region. Assistive technology will thereby announce the results of UI interactions posted inside it without requiring that focus is switched away from the controls that produce those results.
+
 ## Attributes
 
 This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
@@ -42,10 +46,6 @@ In the following example, the form provides a slider whose value can range betwe
 
 {{ EmbedLiveSample('Examples')}}
 
-## Accessibility Concerns
-
-Many browsers implement this element as an [`aria-live`](/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) region. Assistive technology will thereby announce the results of UI interactions posted inside it without requiring that focus is switched away from the controls that produce those results.
-
 ## Technical summary
 
 <table class="properties">
diff --git a/files/en-us/web/html/element/p/index.md b/files/en-us/web/html/element/p/index.md
index 295705fecbfa777..e4fe8ada902482f 100644
--- a/files/en-us/web/html/element/p/index.md
+++ b/files/en-us/web/html/element/p/index.md
@@ -85,6 +85,20 @@ Paragraphs are [block-level elements](/en-US/docs/Glossary/Block-level_content),
   </tbody>
 </table>
 
+## Accessibility concerns
+
+Breaking up content into paragraphs helps make a page more accessible. Screen-readers and other assistive technology provide shortcuts to let their users skip to the next or previous paragraph, letting them skim content like how white space lets visual users skip around.
+
+Using empty `<p>` elements to add space between paragraphs is problematic for people who navigate with screen-reading technology. Screen readers may announce the paragraph's presence, but not any content contained within it — because there is none. This can confuse and frustrate the person using the screen reader.
+
+If extra space is desired, use {{glossary("CSS")}} properties like {{cssxref("margin")}} to create the effect:
+
+```css
+p {
+  margin-bottom: 2em; /* increase white space after a paragraph */
+}
+```
+
 ## Attributes
 
 This element only includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
@@ -179,20 +193,6 @@ document.querySelector("button").addEventListener("click", (event) => {
 
 {{EmbedLiveSample('Styling_paragraphs')}}
 
-## Accessibility concerns
-
-Breaking up content into paragraphs helps make a page more accessible. Screen-readers and other assistive technology provide shortcuts to let their users skip to the next or previous paragraph, letting them skim content like how white space lets visual users skip around.
-
-Using empty `<p>` elements to add space between paragraphs is problematic for people who navigate with screen-reading technology. Screen readers may announce the paragraph's presence, but not any content contained within it — because there is none. This can confuse and frustrate the person using the screen reader.
-
-If extra space is desired, use {{glossary("CSS")}} properties like {{cssxref("margin")}} to create the effect:
-
-```css
-p {
-  margin-bottom: 2em; /* increase white space after a paragraph */
-}
-```
-
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/html/element/portal/index.md b/files/en-us/web/html/element/portal/index.md
index c2de5518585f4a8..8b869409e1731c6 100644
--- a/files/en-us/web/html/element/portal/index.md
+++ b/files/en-us/web/html/element/portal/index.md
@@ -13,6 +13,16 @@ The **`<portal>`** [HTML](/en-US/docs/Web/HTML) element enables the embedding of
 
 A `<portal>` is similar to an `<iframe>`. An `<iframe>` allows a separate {{Glossary("browsing context")}} to be embedded. However, the embedded content of a `<portal>` is more limited than that of an `<iframe>`. It cannot be interacted with, and therefore is not suitable for embedding widgets into a document. Instead, the `<portal>` acts as a preview of the content of another page. It can be navigated into therefore allowing for seamless transition to the embedded content.
 
+## Accessibility concerns
+
+The preview displayed by a `<portal>` is not interactive, therefore does not receive input events or focus. Therefore the embedded contents of the portal are not exposed as elements in the {{Glossary("accessibility tree")}}. The portal can be navigated to and activated like a button, the default behavior when clicking on the portal is to activate it.
+
+Portals are given a default label which is the title of the embedded page. If no title is present the visible text in the preview is concatenated to create a label. The [`aria-label`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute can be used to override this.
+
+Portals used for prerendering only should be hidden with the hidden HTML attribute or the CSS {{cssxref("display")}} property with a value of `none`.
+
+When using animations during portal activation the {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} [media feature](/en-US/docs/Web/CSS/@media#media_features) should be respected.
+
 ## Attributes
 
 This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
@@ -32,16 +42,6 @@ The following example will embed the contents of `https://example.com` as a prev
 <portal id="exampleportal" src="https://example.com/"></portal>
 ```
 
-## Accessibility concerns
-
-The preview displayed by a `<portal>` is not interactive, therefore does not receive input events or focus. Therefore the embedded contents of the portal are not exposed as elements in the {{Glossary("accessibility tree")}}. The portal can be navigated to and activated like a button, the default behavior when clicking on the portal is to activate it.
-
-Portals are given a default label which is the title of the embedded page. If no title is present the visible text in the preview is concatenated to create a label. The [`aria-label`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute can be used to override this.
-
-Portals used for prerendering only should be hidden with the hidden HTML attribute or the CSS {{cssxref("display")}} property with a value of `none`.
-
-When using animations during portal activation the {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} [media feature](/en-US/docs/Web/CSS/@media#media_features) should be respected.
-
 ## Technical summary
 
 <table class="properties">
diff --git a/files/en-us/web/html/element/pre/index.md b/files/en-us/web/html/element/pre/index.md
index 413148b3a2a1093..8f6f9aa48249445 100644
--- a/files/en-us/web/html/element/pre/index.md
+++ b/files/en-us/web/html/element/pre/index.md
@@ -13,17 +13,6 @@ The **`<pre>`** [HTML](/en-US/docs/Web/HTML) element represents preformatted tex
 
 If you have to display reserved characters such as `<`, `>`, `&`, and `"` within the `<pre>` tag, the characters must be escaped using their respective [HTML entity](/en-US/docs/Glossary/Entity).
 
-## Attributes
-
-This element only includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
-
-- `cols` {{non-standard_inline}} {{deprecated_inline}}
-  - : Contains the _preferred_ count of characters that a line should have. It was a non-standard synonym of [`width`](#width). To achieve such an effect, use CSS {{Cssxref("width")}} instead.
-- `width` {{deprecated_inline}} {{Non-standard_Inline}}
-  - : Contains the _preferred_ count of characters that a line should have. Though technically still implemented, this attribute has no visual effect; to achieve such an effect, use CSS {{Cssxref("width")}} instead.
-- `wrap` {{non-standard_inline}} {{Deprecated_Inline}}
-  - : Is a _hint_ indicating how the overflow must happen. In modern browser this hint is ignored and no visual effect results in its present; to achieve such an effect, use CSS {{Cssxref("white-space")}} instead.
-
 ## Accessibility concerns
 
 It is important to provide an alternate description for any images or diagrams created using preformatted text. The alternate description should clearly and concisely describe the image or diagram's content.
@@ -56,6 +45,17 @@ A combination of the {{HTMLElement("figure")}} and {{HTMLElement("figcaption")}}
 - [MDN Understanding WCAG, Guideline 1.1 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content)
 - [H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/H86.html)
 
+## Attributes
+
+This element only includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
+
+- `cols` {{non-standard_inline}} {{deprecated_inline}}
+  - : Contains the _preferred_ count of characters that a line should have. It was a non-standard synonym of [`width`](#width). To achieve such an effect, use CSS {{Cssxref("width")}} instead.
+- `width` {{deprecated_inline}} {{Non-standard_Inline}}
+  - : Contains the _preferred_ count of characters that a line should have. Though technically still implemented, this attribute has no visual effect; to achieve such an effect, use CSS {{Cssxref("width")}} instead.
+- `wrap` {{non-standard_inline}} {{Deprecated_Inline}}
+  - : Is a _hint_ indicating how the overflow must happen. In modern browser this hint is ignored and no visual effect results in its present; to achieve such an effect, use CSS {{Cssxref("white-space")}} instead.
+
 ## Examples
 
 ### Basic example
diff --git a/files/en-us/web/html/element/progress/index.md b/files/en-us/web/html/element/progress/index.md
index f8c8589b455e492..c271ba0060b4a16 100644
--- a/files/en-us/web/html/element/progress/index.md
+++ b/files/en-us/web/html/element/progress/index.md
@@ -56,29 +56,6 @@ The **`<progress>`** [HTML](/en-US/docs/Web/HTML) element displays an indicator
   </tbody>
 </table>
 
-## Attributes
-
-This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
-
-- `max`
-  - : This attribute describes how much work the task indicated by the `progress` element requires. The `max` attribute, if present, must have a value greater than `0` and be a valid floating point number. The default value is `1`.
-- `value`
-  - : This attribute specifies how much of the task that has been completed. It must be a valid floating point number between `0` and `max`, or between `0` and `1` if `max` is omitted. If there is no `value` attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.
-
-> **Note:** Unlike the {{htmlelement("meter")}} element, the minimum value is always 0, and the `min` attribute is not allowed for the `<progress>` element.
-
-> **Note:** The {{cssxref(":indeterminate")}} pseudo-class can be used to match against indeterminate progress bars. To change the progress bar to indeterminate after giving it a value you must remove the value attribute with {{domxref("Element.removeAttribute", "element.removeAttribute('value')")}}.
-
-## Examples
-
-```html
-<progress value="70" max="100">70 %</progress>
-```
-
-### Result
-
-{{ EmbedLiveSample("Examples", 200, 50) }}
-
 ## Accessibility Concerns
 
 ### Labelling
@@ -125,6 +102,29 @@ If the `<progress>` element is describing the loading progress of a section of a
 
 {{EmbedLiveSample('Describing a particular region')}}
 
+## Attributes
+
+This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
+
+- `max`
+  - : This attribute describes how much work the task indicated by the `progress` element requires. The `max` attribute, if present, must have a value greater than `0` and be a valid floating point number. The default value is `1`.
+- `value`
+  - : This attribute specifies how much of the task that has been completed. It must be a valid floating point number between `0` and `max`, or between `0` and `1` if `max` is omitted. If there is no `value` attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.
+
+> **Note:** Unlike the {{htmlelement("meter")}} element, the minimum value is always 0, and the `min` attribute is not allowed for the `<progress>` element.
+
+> **Note:** The {{cssxref(":indeterminate")}} pseudo-class can be used to match against indeterminate progress bars. To change the progress bar to indeterminate after giving it a value you must remove the value attribute with {{domxref("Element.removeAttribute", "element.removeAttribute('value')")}}.
+
+## Examples
+
+```html
+<progress value="70" max="100">70 %</progress>
+```
+
+### Result
+
+{{ EmbedLiveSample("Examples", 200, 50) }}
+
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/html/element/s/index.md b/files/en-us/web/html/element/s/index.md
index ca034b43472feda..183eba7f7d1939c 100644
--- a/files/en-us/web/html/element/s/index.md
+++ b/files/en-us/web/html/element/s/index.md
@@ -68,27 +68,6 @@ The **`<s>`** [HTML](/en-US/docs/Web/HTML) element renders text with a strikethr
   </tbody>
 </table>
 
-## Attributes
-
-This element only includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
-
-## Examples
-
-```css
-.sold-out {
-  text-decoration: line-through;
-}
-```
-
-```html
-<s>Today's Special: Salmon</s> SOLD OUT<br />
-<span class="sold-out">Today's Special: Salmon</span> SOLD OUT
-```
-
-### Result
-
-{{EmbedLiveSample("Examples")}}
-
 ## Accessibility concerns
 
 The presence of the `s` element is not announced by most screen reading technology in its default configuration. It can be made to be announced by using the CSS {{cssxref("content")}} property, along with the {{cssxref("::before")}} and {{cssxref("::after")}} pseudo-elements.
@@ -119,6 +98,27 @@ Some people who use screen readers deliberately disable announcing content that
 - [Short note on making your mark (more accessible) | The Paciello Group](https://www.tpgi.com/short-note-on-making-your-mark-more-accessible/)
 - [Tweaking Text Level Styles | Adrian Roselli](https://adrianroselli.com/2017/12/tweaking-text-level-styles.html)
 
+## Attributes
+
+This element only includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
+
+## Examples
+
+```css
+.sold-out {
+  text-decoration: line-through;
+}
+```
+
+```html
+<s>Today's Special: Salmon</s> SOLD OUT<br />
+<span class="sold-out">Today's Special: Salmon</span> SOLD OUT
+```
+
+### Result
+
+{{EmbedLiveSample("Examples")}}
+
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/html/element/table/index.md b/files/en-us/web/html/element/table/index.md
index 739d162f1fe01b2..c5fc7d895448ed3 100644
--- a/files/en-us/web/html/element/table/index.md
+++ b/files/en-us/web/html/element/table/index.md
@@ -73,6 +73,74 @@ The **`<table>`** [HTML](/en-US/docs/Web/HTML) element represents tabular data 
   </tbody>
 </table>
 
+## Accessibility concerns
+
+### Captions
+
+By supplying a {{HTMLElement("caption")}} element whose value clearly and concisely describes the table's purpose, it helps the people decide if they need to read the rest of the table content or skip over it.
+
+This helps people navigating with the aid of assistive technology such as a screen reader, people experiencing low vision conditions, and people with cognitive concerns.
+
+- [MDN Adding a caption to your table with \<caption>](/en-US/docs/Learn/HTML/Tables/Advanced#adding_a_caption_to_your_table_with_caption)
+- [Caption & Summary • Tables • W3C WAI Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/tables/caption-summary/)
+
+### Scoping rows and columns
+
+The [`scope`](/en-US/docs/Web/HTML/Element/th#scope) attribute on header elements is redundant in simple contexts, because scope is inferred. However, some assistive technologies may fail to draw correct inferences, so specifying header scope may improve user experiences. In complex tables, scope can be specified to provide necessary information about the cells related to a header.
+
+#### Examples
+
+```html
+<table>
+  <caption>
+    Color names and values
+  </caption>
+  <tbody>
+    <tr>
+      <th scope="col">Name</th>
+      <th scope="col">HEX</th>
+      <th scope="col">HSLa</th>
+      <th scope="col">RGBa</th>
+    </tr>
+    <tr>
+      <th scope="row">Teal</th>
+      <td><code>#51F6F6</code></td>
+      <td><code>hsl(180 90% 64% / 1)</code></td>
+      <td><code>rgb(81 246 246 / 1)</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Goldenrod</th>
+      <td><code>#F6BC57</code></td>
+      <td><code>hsl(38 90% 65% / 1)</code></td>
+      <td><code>rgba(246 188 87 / 1)</code></td>
+    </tr>
+  </tbody>
+</table>
+```
+
+##### Result
+
+{{EmbedLiveSample('Scoping_rows_and_columns')}}
+
+Providing a declaration of `scope="col"` on a {{HTMLElement("th")}} element will help describe that the cell is at the top of a column. Providing a declaration of `scope="row"` on a {{HTMLElement("th")}} element will help describe that the cell is the first in a row.
+
+- [MDN Tables for visually impaired users](/en-US/docs/Learn/HTML/Tables/Advanced#tables_for_visually_impaired_users)
+- [Tables with two headers • Tables • W3C WAI Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/tables/two-headers/)
+- [Tables with irregular headers • Tables • W3C WAI Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/tables/irregular/)
+- [H63: Using the scope attribute to associate header cells and data cells in data tables | W3C Techniques for WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/H63.html)
+
+### Complicated tables
+
+Assistive technology such as screen readers may have difficulty parsing tables that are so complex that header cells can't be associated in a strictly horizontal or vertical way. This is typically indicated by the presence of the [`colspan`](/en-US/docs/Web/HTML/Element/td#colspan) and [`rowspan`](/en-US/docs/Web/HTML/Element/td#rowspan) attributes.
+
+Ideally, consider alternate ways to present the table's content, including breaking it apart into a collection of smaller, related tables that don't have to rely on using the `colspan` and `rowspan` attributes. In addition to helping people who use assistive technology understand the table's content, this may also benefit people with cognitive concerns who may have difficulty understanding the associations the table layout is describing.
+
+If the table cannot be broken apart, use a combination of the [`id`](/en-US/docs/Web/HTML/Global_attributes#id) and [`headers`](/en-US/docs/Web/HTML/Element/td#headers) attributes to programmatically associate each table cell with the header(s) the cell is associated with.
+
+- [MDN Tables for visually impaired users](/en-US/docs/Learn/HTML/Tables/Advanced#tables_for_visually_impaired_users)
+- [Tables with multi-level headers • Tables • W3C WAI Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/tables/multi-level/)
+- [H43: Using id and headers attributes to associate data cells with header cells in data tables | Techniques for W3C WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/H43.html)
+
 ## Attributes
 
 This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
@@ -612,74 +680,6 @@ tr:last-child td {
 
 {{EmbedLiveSample('Displaying_large_tables_in_small_spaces', '100%', 240)}}
 
-## Accessibility concerns
-
-### Captions
-
-By supplying a {{HTMLElement("caption")}} element whose value clearly and concisely describes the table's purpose, it helps the people decide if they need to read the rest of the table content or skip over it.
-
-This helps people navigating with the aid of assistive technology such as a screen reader, people experiencing low vision conditions, and people with cognitive concerns.
-
-- [MDN Adding a caption to your table with \<caption>](/en-US/docs/Learn/HTML/Tables/Advanced#adding_a_caption_to_your_table_with_caption)
-- [Caption & Summary • Tables • W3C WAI Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/tables/caption-summary/)
-
-### Scoping rows and columns
-
-The [`scope`](/en-US/docs/Web/HTML/Element/th#scope) attribute on header elements is redundant in simple contexts, because scope is inferred. However, some assistive technologies may fail to draw correct inferences, so specifying header scope may improve user experiences. In complex tables, scope can be specified to provide necessary information about the cells related to a header.
-
-#### Examples
-
-```html
-<table>
-  <caption>
-    Color names and values
-  </caption>
-  <tbody>
-    <tr>
-      <th scope="col">Name</th>
-      <th scope="col">HEX</th>
-      <th scope="col">HSLa</th>
-      <th scope="col">RGBa</th>
-    </tr>
-    <tr>
-      <th scope="row">Teal</th>
-      <td><code>#51F6F6</code></td>
-      <td><code>hsl(180 90% 64% / 1)</code></td>
-      <td><code>rgb(81 246 246 / 1)</code></td>
-    </tr>
-    <tr>
-      <th scope="row">Goldenrod</th>
-      <td><code>#F6BC57</code></td>
-      <td><code>hsl(38 90% 65% / 1)</code></td>
-      <td><code>rgba(246 188 87 / 1)</code></td>
-    </tr>
-  </tbody>
-</table>
-```
-
-##### Result
-
-{{EmbedLiveSample('Scoping_rows_and_columns')}}
-
-Providing a declaration of `scope="col"` on a {{HTMLElement("th")}} element will help describe that the cell is at the top of a column. Providing a declaration of `scope="row"` on a {{HTMLElement("th")}} element will help describe that the cell is the first in a row.
-
-- [MDN Tables for visually impaired users](/en-US/docs/Learn/HTML/Tables/Advanced#tables_for_visually_impaired_users)
-- [Tables with two headers • Tables • W3C WAI Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/tables/two-headers/)
-- [Tables with irregular headers • Tables • W3C WAI Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/tables/irregular/)
-- [H63: Using the scope attribute to associate header cells and data cells in data tables | W3C Techniques for WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/H63.html)
-
-### Complicated tables
-
-Assistive technology such as screen readers may have difficulty parsing tables that are so complex that header cells can't be associated in a strictly horizontal or vertical way. This is typically indicated by the presence of the [`colspan`](/en-US/docs/Web/HTML/Element/td#colspan) and [`rowspan`](/en-US/docs/Web/HTML/Element/td#rowspan) attributes.
-
-Ideally, consider alternate ways to present the table's content, including breaking it apart into a collection of smaller, related tables that don't have to rely on using the `colspan` and `rowspan` attributes. In addition to helping people who use assistive technology understand the table's content, this may also benefit people with cognitive concerns who may have difficulty understanding the associations the table layout is describing.
-
-If the table cannot be broken apart, use a combination of the [`id`](/en-US/docs/Web/HTML/Global_attributes#id) and [`headers`](/en-US/docs/Web/HTML/Element/td#headers) attributes to programmatically associate each table cell with the header(s) the cell is associated with.
-
-- [MDN Tables for visually impaired users](/en-US/docs/Learn/HTML/Tables/Advanced#tables_for_visually_impaired_users)
-- [Tables with multi-level headers • Tables • W3C WAI Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/tables/multi-level/)
-- [H43: Using id and headers attributes to associate data cells with header cells in data tables | Techniques for W3C WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/H43.html)
-
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/html/element/title/index.md b/files/en-us/web/html/element/title/index.md
index 6370324a358bd33..db234643b2a6dde 100644
--- a/files/en-us/web/html/element/title/index.md
+++ b/files/en-us/web/html/element/title/index.md
@@ -67,6 +67,31 @@ The **`<title>`** [HTML](/en-US/docs/Web/HTML) element defines the document's ti
   </tbody>
 </table>
 
+## Accessibility concerns
+
+It is important to provide an accurate and concise title to describe the page's purpose.
+
+A common navigation technique for users of assistive technology is to read the page title and infer the content the page contains. This is because navigating into a page to determine its content can be a time-consuming and potentially confusing process. Titles should be unique to every page of a website, ideally surfacing the primary purpose of the page first, followed by the name of the website. Following this pattern will help ensure that the primary purpose of the page is announced by a screen reader first. This provides a far better experience than having to listen to the name of a website before the unique page title, for every page a user navigates to in the same website.
+
+### Examples
+
+```html
+<title>Menu - Blue House Chinese Food - FoodYum: Online takeout today!</title>
+```
+
+If a form submission contains errors and the submission re-renders the current page, the title can be used to help make users aware of any errors with their submission. For instance, update the page `title` value to reflect significant page state changes (such as form validation problems).
+
+```html
+<title>
+  2 errors - Your order - Sea Food Store - Food: Online takeout today!
+</title>
+```
+
+> **Note:** Presently, dynamically updating a page's title will not be automatically announced by screen readers. If you are going to update the page title to reflect significant changes to a page's state, then the use of [ARIA Live Regions](/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) may be necessary, as well.
+
+- [MDN Understanding WCAG, Guideline 2.4 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.4_—_navigable_provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are)
+- [Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/page-titled.html)
+
 ## Attributes
 
 This element only includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
@@ -94,31 +119,6 @@ A few guidelines and tips for composing good titles:
 
 This example establishes a page whose title (as displayed at the top of the window or in the window's tab) as "Awesome interesting stuff".
 
-## Accessibility concerns
-
-It is important to provide an accurate and concise title to describe the page's purpose.
-
-A common navigation technique for users of assistive technology is to read the page title and infer the content the page contains. This is because navigating into a page to determine its content can be a time-consuming and potentially confusing process. Titles should be unique to every page of a website, ideally surfacing the primary purpose of the page first, followed by the name of the website. Following this pattern will help ensure that the primary purpose of the page is announced by a screen reader first. This provides a far better experience than having to listen to the name of a website before the unique page title, for every page a user navigates to in the same website.
-
-### Examples
-
-```html
-<title>Menu - Blue House Chinese Food - FoodYum: Online takeout today!</title>
-```
-
-If a form submission contains errors and the submission re-renders the current page, the title can be used to help make users aware of any errors with their submission. For instance, update the page `title` value to reflect significant page state changes (such as form validation problems).
-
-```html
-<title>
-  2 errors - Your order - Sea Food Store - Food: Online takeout today!
-</title>
-```
-
-> **Note:** Presently, dynamically updating a page's title will not be automatically announced by screen readers. If you are going to update the page title to reflect significant changes to a page's state, then the use of [ARIA Live Regions](/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) may be necessary, as well.
-
-- [MDN Understanding WCAG, Guideline 2.4 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.4_—_navigable_provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are)
-- [Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/page-titled.html)
-
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/html/element/video/index.md b/files/en-us/web/html/element/video/index.md
index e9ac17554907ee5..c2cb219d7e9dd51 100644
--- a/files/en-us/web/html/element/video/index.md
+++ b/files/en-us/web/html/element/video/index.md
@@ -15,6 +15,42 @@ The above example shows simple usage of the `<video>` element. In a similar mann
 
 The content inside the opening and closing `<video></video>` tags is shown as a fallback in browsers that don't support the element.
 
+## Accessibility concerns
+
+Videos should provide both captions and transcripts that accurately describe its content (see [Adding captions and subtitles to HTML video](/en-US/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video) for more information on how to implement these). Captions allow people who are experiencing hearing loss to understand a video's audio content as the video is being played, while transcripts allow people who need additional time to be able to review audio content at a pace and format that is comfortable for them.
+
+It's worth noting that while you can caption audio-only media, you can only do so when playing audio in a {{HTMLElement("video")}} element, since the video region of the element is used to present the captions. This is one of the special scenarios in which it's useful to play audio in a video element.
+
+If automatic captioning services are used, it is important to review the generated content to ensure it accurately represents the source video.
+
+In addition to spoken dialog, subtitles and transcripts should also identify music and sound effects that communicate important information. This includes emotion and tone:
+
+```plain
+14
+00:03:14 --> 00:03:18
+[Dramatic rock music]
+
+15
+00:03:19 --> 00:03:21
+[whispering] What's that off in the distance?
+
+16
+00:03:22 --> 00:03:24
+It's… it's a…
+
+16 00:03:25 --> 00:03:32
+[Loud thumping]
+[Dishes clattering]
+```
+
+Captions should not obstruct the main subject of the video. They can be positioned using [the `align` VTT cue setting](/en-US/docs/Web/API/WebVTT_API#cue_settings).
+
+- [Web Video Text Tracks Format (WebVTT)](/en-US/docs/Web/API/WebVTT_API)
+- [WebAIM: Captions, Transcripts, and Audio Descriptions](https://webaim.org/techniques/captions/)
+- [MDN Understanding WCAG, Guideline 1.2 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.2_—_providing_text_alternatives_for_time-based_media)
+- [Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html)
+- [Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html)
+
 ## Attributes
 
 Like all other HTML elements, this element supports the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
@@ -418,42 +454,6 @@ First [Ogg](/en-US/docs/Web/Media/Formats/Containers#ogg) is tried. If that can'
 
 Some media file types let you provide more specific information using the [`codecs`](/en-US/docs/Web/Media/Formats/codecs_parameter) parameter as part of the file's type string. A relatively simple example is `video/webm; codecs="vp8, vorbis"`, which says that the file is a [WebM](/en-US/docs/Web/Media/Formats/Containers#webm) video using [VP8](/en-US/docs/Web/Media/Formats/Video_codecs#vp8) for its video and [Vorbis](/en-US/docs/Web/Media/Formats/Audio_codecs#vorbis) for audio.
 
-## Accessibility concerns
-
-Videos should provide both captions and transcripts that accurately describe its content (see [Adding captions and subtitles to HTML video](/en-US/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video) for more information on how to implement these). Captions allow people who are experiencing hearing loss to understand a video's audio content as the video is being played, while transcripts allow people who need additional time to be able to review audio content at a pace and format that is comfortable for them.
-
-It's worth noting that while you can caption audio-only media, you can only do so when playing audio in a {{HTMLElement("video")}} element, since the video region of the element is used to present the captions. This is one of the special scenarios in which it's useful to play audio in a video element.
-
-If automatic captioning services are used, it is important to review the generated content to ensure it accurately represents the source video.
-
-In addition to spoken dialog, subtitles and transcripts should also identify music and sound effects that communicate important information. This includes emotion and tone:
-
-```plain
-14
-00:03:14 --> 00:03:18
-[Dramatic rock music]
-
-15
-00:03:19 --> 00:03:21
-[whispering] What's that off in the distance?
-
-16
-00:03:22 --> 00:03:24
-It's… it's a…
-
-16 00:03:25 --> 00:03:32
-[Loud thumping]
-[Dishes clattering]
-```
-
-Captions should not obstruct the main subject of the video. They can be positioned using [the `align` VTT cue setting](/en-US/docs/Web/API/WebVTT_API#cue_settings).
-
-- [Web Video Text Tracks Format (WebVTT)](/en-US/docs/Web/API/WebVTT_API)
-- [WebAIM: Captions, Transcripts, and Audio Descriptions](https://webaim.org/techniques/captions/)
-- [MDN Understanding WCAG, Guideline 1.2 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.2_—_providing_text_alternatives_for_time-based_media)
-- [Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html)
-- [Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html)
-
 ## Technical summary
 
 <table class="properties">