Accessibility

Collections

레진 웹 접근성 가이드라인
A11y Automation Tracker > Potential Violations
Accessibility, assistive technology, and JavaScript
- A quick note about macOS - On macOS, keyboard focus navigation is off by default. Chromium browsers (like Chrome and Edge) automatically support keyboard navigation anyways, but Firefox and Safari honor the system preferences.
Please, stop disabling zoom
5 takeaways from screen reader usability interviews
- Usually when we think of alt text, we think "What is this a picture of?" - but in the case of links where the only content is an image, the alt text needs to describe the function of that link. Not the image itself.
https://webhint.io/docs/user-guide/hints/accessibility/
Using ARIA: Roles, states, and properties
Accessibility Solutions
👑 GOV.UK Design System > Accessibility explains how the team works to ensure the Design System and Frontend are accessible.
Improving Web Accessibility with Semantic HTML and Testing Techniques and Tools
display: contents considered harmful
Don't Use Fixed CSS height or width on Buttons, Links, or Any Other Text Containers

Despite some web design tools specifying CSS height values for elements like buttons, setting height or max-height can actually put you at risk for failing WCAG 2.2 Success Criterion 1.4.4 Resize Text.
Accessible notifications with ARIA Live Regions (Part 1)
Accessible notifications with ARIA Live Regions (Part 2)
Designing better target sizes
You Want border-color: transparent, Not border: none
- @media (forced-colors: active)
모두를 위한 디자인
Paragraphs

Text

Lost in Translation: Tips for Multilingual Web Accessibility
A Brief Note on Highlighted Text

If you plan to style text highlighted by the browser, you must give it sufficient contrast — 3:1 for the highlight block against its background and (probably) 4.5:1 for the text within that highlighted block against that background.
Rethinking Text Resizing on Web
- Airbnb has made improving web accessibility a priority, focusing on the WCAG 1.4.4 Resize Text guideline. This guideline is important for users with low vision, as it requires web content to be maintained when text is scaled 200%.

prefers-reduced-motion

The prefers-reduced-motion feature is explicitly1 intended to accommodate people with vestibular motion disorders, which are common above age 40.2

Unchain My Inaccessibly-Labelled Heart

<h2 id="article1-heading">All About Dragons</h2>
<p>I like dragons. Blah blah blah blah blah.</p>
<p>
  <a
    id="article1-read-more"
    aria-labelledby="article1-read-more article1-heading"
  >
    Read more
  </a>
</p>

What happens there is a screenreader will replace the existing semantic label between the link tags and use the content from both elements and announce them together as a single string of text:

Read more All About Dragons

Children

Footnotes

Collections

Text

prefers-reduced-motion

Unchain My Inaccessibly-Labelled Heart