diff --git a/files/en-us/mdn/writing_guidelines/writing_style_guide/index.md b/files/en-us/mdn/writing_guidelines/writing_style_guide/index.md index 660a3151780affb..97b68009168e68d 100644 --- a/files/en-us/mdn/writing_guidelines/writing_style_guide/index.md +++ b/files/en-us/mdn/writing_guidelines/writing_style_guide/index.md @@ -434,7 +434,7 @@ Follow similar style when linking to a section on a page, as shown below: If the section you're linking to is on the same page, you can hint at the location of the section using the words "above" or "below". -- **Correct**: "This concept is described in more detail in the [Accessibility concerns](/en-US/docs/Web/CSS/gradient/repeating-conic-gradient#accessibility_concerns) section below." +- **Correct**: "This concept is described in more detail in the [Accessibility](/en-US/docs/Web/CSS/gradient/repeating-conic-gradient#accessibility) section below." You can link part of a sentence to an article or the section of an article. Be mindful to use descriptive phrases as link texts to provide enough context for the page being linked. diff --git a/files/en-us/web/accessibility/aria/roles/cell_role/index.md b/files/en-us/web/accessibility/aria/roles/cell_role/index.md index 3577057d18152e3..49359de353d4333 100644 --- a/files/en-us/web/accessibility/aria/roles/cell_role/index.md +++ b/files/en-us/web/accessibility/aria/roles/cell_role/index.md @@ -126,7 +126,7 @@ The above is a non-semantic ARIA table with five of 81 rows present in the DOM: ## Best practices -Only use {{HTMLElement('table')}}, {{HTMLElement('tbody')}}, {{HTMLElement('thead')}}, {{HTMLElement('tr')}}, {{HTMLElement('th')}}, {{HTMLElement('td')}}, etc., for data table structure. You can add ARIA roles to ensure accessibility should the native semantics of the table be removed, such as with CSS. A relevant use case for the ARIA table role is when the native semantics of a table are overridden by [CSS's display property, such as by display: grid](/en-US/docs/Web/CSS/display#accessibility_concerns). In this case, you can use the ARIA table roles to add the semantics back in. +Only use {{HTMLElement('table')}}, {{HTMLElement('tbody')}}, {{HTMLElement('thead')}}, {{HTMLElement('tr')}}, {{HTMLElement('th')}}, {{HTMLElement('td')}}, etc., for data table structure. You can add ARIA roles to ensure accessibility should the native semantics of the table be removed, such as with CSS. A relevant use case for the ARIA table role is when the native semantics of a table are overridden by [CSS's display property, such as by display: grid](/en-US/docs/Web/CSS/display#accessibility). In this case, you can use the ARIA table roles to add the semantics back in. ```html ``` -Above is the semantic way of writing a table. The ARIA roles are not necessary if the native semantics of the table, and therefore the table rows, have not been altered, such as through [the display property](/en-US/docs/Web/CSS/display#accessibility_concerns). +Above is the semantic way of writing a table. The ARIA roles are not necessary if the native semantics of the table, and therefore the table rows, have not been altered, such as through [the display property](/en-US/docs/Web/CSS/display#accessibility). ### Added benefits diff --git a/files/en-us/web/accessibility/aria/roles/row_role/index.md b/files/en-us/web/accessibility/aria/roles/row_role/index.md index b14366050d3a261..dc5323886257d13 100644 --- a/files/en-us/web/accessibility/aria/roles/row_role/index.md +++ b/files/en-us/web/accessibility/aria/roles/row_role/index.md @@ -200,7 +200,7 @@ Only use {{HTMLElement('table')}}, {{HTMLElement('tbody')}}, {{HTMLElement('thea
``` -Above is the semantic way of writing a table. The ARIA roles are only necessary if the native semantics of the table, and therefore the table rows, are obliterated, such as via setting the [display property to flex or grid](/en-US/docs/Web/CSS/display#accessibility_concerns). +Above is the semantic way of writing a table. The ARIA roles are only necessary if the native semantics of the table, and therefore the table rows, are obliterated, such as via setting the [display property to flex or grid](/en-US/docs/Web/CSS/display#accessibility). ### Added benefits diff --git a/files/en-us/web/accessibility/aria/roles/rowgroup_role/index.md b/files/en-us/web/accessibility/aria/roles/rowgroup_role/index.md index fb24d396d628332..f317fa56e8daf28 100644 --- a/files/en-us/web/accessibility/aria/roles/rowgroup_role/index.md +++ b/files/en-us/web/accessibility/aria/roles/rowgroup_role/index.md @@ -140,7 +140,7 @@ Only use {{HTMLElement('table')}}, {{HTMLElement('tbody')}}, {{HTMLElement('thea ``` -Above is the semantic way of writing a table. The ARIA roles are only necessary if the native semantics of the table, and therefore the table rows, are obliterated, such as by setting the [display property to flex or grid](/en-US/docs/Web/CSS/display#accessibility_concerns). +Above is the semantic way of writing a table. The ARIA roles are only necessary if the native semantics of the table, and therefore the table rows, are obliterated, such as by setting the [display property to flex or grid](/en-US/docs/Web/CSS/display#accessibility). ### Added benefits diff --git a/files/en-us/web/accessibility/aria/roles/rowheader_role/index.md b/files/en-us/web/accessibility/aria/roles/rowheader_role/index.md index 8b5718b481b5206..3339cd4db18d157 100644 --- a/files/en-us/web/accessibility/aria/roles/rowheader_role/index.md +++ b/files/en-us/web/accessibility/aria/roles/rowheader_role/index.md @@ -133,7 +133,7 @@ Only use {{HTMLElement('table')}}, {{HTMLElement('tbody')}}, {{HTMLElement('thea ``` -Above is the semantic way of writing a table. The ARIA roles are only necessary if the native semantics of the table, and therefore the table row headers, are obliterated, such as by setting the [display property to flex or grid](/en-US/docs/Web/CSS/display#accessibility_concerns). +Above is the semantic way of writing a table. The ARIA roles are only necessary if the native semantics of the table, and therefore the table row headers, are obliterated, such as by setting the [display property to flex or grid](/en-US/docs/Web/CSS/display#accessibility). ### Added benefits diff --git a/files/en-us/web/api/canvasrenderingcontext2d/fontvariantcaps/index.md b/files/en-us/web/api/canvasrenderingcontext2d/fontvariantcaps/index.md index f8d4e978cf77e0f..927f38804cb066c 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/fontvariantcaps/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/fontvariantcaps/index.md @@ -37,7 +37,7 @@ The font alternative capitalization value, which is one of: The property can be used to get or set the font capitalization value. -Note that there are accessibility concerns with some of these, which are outlined in the corresponding [`font-variant-caps`](/en-US/docs/Web/CSS/font-variant-caps#accessibility_concerns) topic. +Note that there are accessibility concerns with some of these, which are outlined in the corresponding [`font-variant-caps`](/en-US/docs/Web/CSS/font-variant-caps#accessibility) topic. ## Examples diff --git a/files/en-us/web/css/@font-face/font-stretch/index.md b/files/en-us/web/css/@font-face/font-stretch/index.md index 55a634c1369eb1b..18717843320904e 100644 --- a/files/en-us/web/css/@font-face/font-stretch/index.md +++ b/files/en-us/web/css/@font-face/font-stretch/index.md @@ -109,7 +109,7 @@ For TrueType or OpenType variable fonts, the "wdth" variation is used to impleme ## Accessibility -People with dyslexia and other cognitive conditions may have difficulty reading fonts that are too condensed, especially if the font has a [low contrast color ratio](/en-US/docs/Web/CSS/color#accessibility_concerns). +People with dyslexia and other cognitive conditions may have difficulty reading fonts that are too condensed, especially if the font has a [low contrast color ratio](/en-US/docs/Web/CSS/color#accessibility). - [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.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) diff --git a/files/en-us/web/css/@font-face/font-weight/index.md b/files/en-us/web/css/@font-face/font-weight/index.md index 74e22e50e0f545c..37841bb2929ad52 100644 --- a/files/en-us/web/css/@font-face/font-weight/index.md +++ b/files/en-us/web/css/@font-face/font-weight/index.md @@ -65,7 +65,7 @@ For TrueType or OpenType variable fonts, the "wght" variation is used to impleme ## Accessibility -People experiencing low vision conditions may have difficulty reading text set with a `font-weight` value of `100` (Thin/Hairline) or `200` (Extra Light), especially if the font has a [low contrast color ratio](/en-US/docs/Web/CSS/color#accessibility_concerns). +People experiencing low vision conditions may have difficulty reading text set with a `font-weight` value of `100` (Thin/Hairline) or `200` (Extra Light), especially if the font has a [low contrast color ratio](/en-US/docs/Web/CSS/color#accessibility). - [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.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) diff --git a/files/en-us/web/css/display-box/index.md b/files/en-us/web/css/display-box/index.md index fc4258728d4971f..12738af88808930 100644 --- a/files/en-us/web/css/display-box/index.md +++ b/files/en-us/web/css/display-box/index.md @@ -17,7 +17,7 @@ Valid `` values: - : These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that the CSS Display Level 3 spec defines how the `contents` value should affect "unusual elements" — elements that aren't rendered purely by CSS box concepts such as replaced elements. See [Appendix B: Effects of display: contents on Unusual Elements](https://drafts.csswg.org/css-display/#unbox) for more details. - _Due to a bug in browsers this will currently remove the element from the accessibility tree — screen readers will not look at what's inside. See the [Accessibility concerns](#accessibility_concerns) section below for more details._ + _Due to a bug in browsers this will currently remove the element from the accessibility tree — screen readers will not look at what's inside. See the [Accessibility](#accessibility) section below for more details._ - `none` - : Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off. diff --git a/files/en-us/web/css/font-weight/index.md b/files/en-us/web/css/font-weight/index.md index 34043fb06606bfd..c2f3ad26e4c72cf 100644 --- a/files/en-us/web/css/font-weight/index.md +++ b/files/en-us/web/css/font-weight/index.md @@ -172,7 +172,7 @@ This demo loads with `font-weight: 500;` set. Change the value of the `font-weig ## Accessibility -People experiencing low vision conditions may have difficulty reading text set with a `font-weight` value of `100` (Thin/Hairline) or `200` (Extra Light), especially if the font has a [low contrast color ratio](/en-US/docs/Web/CSS/color#accessibility_concerns). +People experiencing low vision conditions may have difficulty reading text set with a `font-weight` value of `100` (Thin/Hairline) or `200` (Extra Light), especially if the font has a [low contrast color ratio](/en-US/docs/Web/CSS/color#accessibility). - [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.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) diff --git a/files/en-us/web/css/list-style-type/index.md b/files/en-us/web/css/list-style-type/index.md index 6c3286f48485ae5..1ba308e30faf2d7 100644 --- a/files/en-us/web/css/list-style-type/index.md +++ b/files/en-us/web/css/list-style-type/index.md @@ -190,7 +190,7 @@ See the [compatibility table](#browser_compatibility) to check which browsers su ## Accessibility -Safari will not recognize an ordered or unordered list as a list in the accessibility tree if it has a `list-style-type` value of `none`. This can be resolved by adding `role="list"` to the list's opening tag. To learn more about this and potential workarounds, see [`list-style`](/en-US/docs/Web/CSS/list-style#accessibility_concerns). +Safari will not recognize an ordered or unordered list as a list in the accessibility tree if it has a `list-style-type` value of `none`. This can be resolved by adding `role="list"` to the list's opening tag. To learn more about this and potential workarounds, see [`list-style`](/en-US/docs/Web/CSS/list-style#accessibility). ## Formal definition