Move Accessibility section above Examples for CSS pages

[mcaskill]

Description

Moves Accessibility section above Examples for CSS Function, Property, and Selector pages. Does not change the content of the section.

Motivation

Bring pages in line with template change from #34984, as agreed in github.com/orgs/mdn/discussions/430

Additional details

Full discussion thread: github.com/orgs/mdn/discussions/430

Many pages already had their Accessibility section above Examples or other sections above it.

The following pages and areas have been ignored since they do not follow the CSS page templates:

• CSS Layout cookbook
• CSS flag !important
• CSS media feature forced-colors

Related issues and pull requests

• Follow-up to: Move and rename "Accessibility concerns" section in CSS page templates #34984
• Similar changes to HTML: Move Accessibility section above Examples for html element pages #34007

[estelle]

Thank you for suggesting this contribution.

I did a search of live pages, and HTML element pages use the heading "Accessibility" while CSS pages and HTML attributes use the heading "Accessibility concerns". So we should not be dropping the "concerns" on these CSS pages.

[estelle]

Thank you for suggesting this contribution.

I did a search of live pages, and HTML element pages use the heading "Accessibility" while CSS pages and HTML attributes use the heading "Accessibility concerns". So we should not be dropping the "concerns" on these CSS pages.

I'll ping @dipikabh, just in case I am wrong.

[github-actions]

Preview URLs (73 pages)

• /en-US/docs/MDN/Writing_guidelines/Writing_style_guide
• /en-US/docs/Web/API/CanvasRenderingContext2D/fontVariantCaps
• /en-US/docs/Web/Accessibility/ARIA/Roles/cell_role
• /en-US/docs/Web/Accessibility/ARIA/Roles/row_role
• /en-US/docs/Web/Accessibility/ARIA/Roles/rowgroup_role
• /en-US/docs/Web/Accessibility/ARIA/Roles/rowheader_role
• /en-US/docs/Web/CSS/::-webkit-scrollbar
• /en-US/docs/Web/CSS/::after
• /en-US/docs/Web/CSS/::before
• /en-US/docs/Web/CSS/::placeholder
• /en-US/docs/Web/CSS/::selection
• /en-US/docs/Web/CSS/:empty
• /en-US/docs/Web/CSS/:focus-visible
• /en-US/docs/Web/CSS/:focus
• /en-US/docs/Web/CSS/:invalid
• /en-US/docs/Web/CSS/:optional
• /en-US/docs/Web/CSS/:required
• /en-US/docs/Web/CSS/:valid
• /en-US/docs/Web/CSS/@counter-style/speak-as
• /en-US/docs/Web/CSS/@font-face/font-stretch
• /en-US/docs/Web/CSS/@font-face/font-weight
• /en-US/docs/Web/CSS/@media
• /en-US/docs/Web/CSS/animation
• /en-US/docs/Web/CSS/background-clip
• /en-US/docs/Web/CSS/background-color
• /en-US/docs/Web/CSS/background-image
• /en-US/docs/Web/CSS/background
• /en-US/docs/Web/CSS/border-image
• /en-US/docs/Web/CSS/calc
• /en-US/docs/Web/CSS/color_value
• /en-US/docs/Web/CSS/color
• /en-US/docs/Web/CSS/content-visibility
• /en-US/docs/Web/CSS/content
• /en-US/docs/Web/CSS/cross-fade
• /en-US/docs/Web/CSS/display-box
• /en-US/docs/Web/CSS/display
• /en-US/docs/Web/CSS/flex-direction
• /en-US/docs/Web/CSS/font-style
• /en-US/docs/Web/CSS/font-variant-caps
• /en-US/docs/Web/CSS/font-variant-emoji
• /en-US/docs/Web/CSS/font-weight
• /en-US/docs/Web/CSS/gradient/conic-gradient
• /en-US/docs/Web/CSS/gradient/repeating-conic-gradient
• /en-US/docs/Web/CSS/height
• /en-US/docs/Web/CSS/image/image-set
• /en-US/docs/Web/CSS/image/image
• /en-US/docs/Web/CSS/image
• /en-US/docs/Web/CSS/letter-spacing
• /en-US/docs/Web/CSS/line-height
• /en-US/docs/Web/CSS/list-style-type
• /en-US/docs/Web/CSS/list-style
• /en-US/docs/Web/CSS/max-height
• /en-US/docs/Web/CSS/max-width
• /en-US/docs/Web/CSS/max
• /en-US/docs/Web/CSS/min
• /en-US/docs/Web/CSS/opacity
• /en-US/docs/Web/CSS/order
• /en-US/docs/Web/CSS/outline-color
• /en-US/docs/Web/CSS/outline
• /en-US/docs/Web/CSS/overflow
• /en-US/docs/Web/CSS/position
• /en-US/docs/Web/CSS/scrollbar-color
• /en-US/docs/Web/CSS/scrollbar-width
• /en-US/docs/Web/CSS/text-align
• /en-US/docs/Web/CSS/text-decoration-color
• /en-US/docs/Web/CSS/text-transform
• /en-US/docs/Web/CSS/touch-action
• /en-US/docs/Web/CSS/transform-function/scale
• /en-US/docs/Web/CSS/transform
• /en-US/docs/Web/CSS/transition-timing-function
• /en-US/docs/Web/CSS/visibility
• /en-US/docs/Web/CSS/width
• /en-US/docs/Web/CSS/word-spacing

External URLs (26)

URL: /en-US/docs/Web/CSS/background
Title: background

• https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/list-style
Title: list-style

• https://gerardkcohen.me/writing/2017/voiceover-list-style-type.html (1 time) (Note! This may be a new URL 👀)
• https://webkit.org/b/170179 (1 time) (Note! This may be a new URL 👀)
• https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html (1 time) (Note! This may be a new URL 👀)
• https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/:focus-visible
Title: :focus-visible

• https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/ (1 time) (Note! This may be a new URL 👀)
• https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/content
Title: content

• https://tink.uk/accessibility-support-for-css-generated-content/ (1 time) (Note! This may be a new URL 👀)
• https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/F87 (1 time) (Note! This may be a new URL 👀)
• https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/:focus
Title: :focus

• https://www.a11yproject.com/posts/never-remove-css-outlines/ (1 time) (Note! This may be a new URL 👀)
• https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/ (1 time) (Note! This may be a new URL 👀)
• https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html (2 times) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/max
Title: max()

• https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/image/image-set
Title: image-set()

• https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/word-spacing
Title: word-spacing

• https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/:empty
Title: :empty

• https://gomakethings.com/hidden-content-for-better-a11y/ (2 times) (Note! This may be a new URL 👀)
• https://www.tpgi.com/what-is-an-accessible-name/ (1 time) (Note! This may be a new URL 👀)
• https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/:invalid
Title: :invalid

• https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/:optional
Title: :optional

• https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/:valid
Title: :valid

• https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/:required
Title: :required

• https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/::selection
Title: ::selection

• https://webaim.org/resources/contrastchecker/ (1 time) (Note! This may be a new URL 👀)
• https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html (1 time) (Note! This may be a new URL 👀)
• https://www.w3.org/WAI/standards-guidelines/wcag/ (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2024-07-23 18:38:17)

[mcaskill]

@estelle Hello, thank you for reviewing this pull request. The section title change is in accordance with the decisions taken in the aforementioned discussion and related pull requests.

If what was decided has changed, I can revert the renaming of section titles and contribute a new pull request for HTML pages.

[dipikabh]

I'll ping @dipikabh, just in case I am wrong.

Hi @estelle, we are indeed moving ahead with changing "Accessibility concerns" to "Accessibility" across HTML and CSS pages, as mentioned in these comments (this and this) of the discussion. The idea is to expand the scope of the section to include guidelines (like best practices or tips) that are not necessarily "concerns".

[estelle]

Thank you.
Also, congratulations on your first merged MDN content PR.
Welcome to the team!