This content originally appeared on CSS-Tricks and was authored by Chris Coyier
- A guide to designing accessible, WCAG-compliant focus indicators — Sara Soueidan says you can make more accessible focus outlines by doing your own, rather than leaving it to the browser — as long as you do it right. Deep dive!
- a11y-syntax-highlighting — Eric Bailey’s repo of code syntax highlighting themes for a variety of software that are both attractive and meet WCAG color contrast guidelines (including support for Windows High Contrast mode as well).
- Respecting Users’ Motion Preferences — Michelle Barker with a guide on when and how to honor people’s
prefers-reduced-motion
setting. While there is no one right way, it should be done. It’s interesting how many things might apply. Properties liketransition
andanimation
are fairly obvious, but did you think ofscroll-behavior
or things specifically in JavaScript (where you can also test for a preference)? - Accessibility testing — Jeremy Keith: “When you commission an accessibility audit, you should hope to get feedback that’s mostly in that third category—interactive widgets.” Don’t waste an accessibility expert’s time telling you about color contrast problems because you can find and fix those yourself fairly easily.
- The effect of CSS on screen readers — Part of me wishes the effect of CSS on screen readers was “nothing” but Jozsef Polgar notes there are some things CSS does affect. A classic is setting
list-style: none
on lists will force them to not read as lists in VoiceOver. Jozsef points to Ben Meyer’s article covering similar ground. - In Quest of Search — Sara again, this time weighing in on
<search>
. I’ve heard mostly negative things (like, why the focus on this when there are so many bigger fish to fry, like<dialog>
andinert
), but Sara is all for it. I agree that we might as well have an element that gives us a freerole="search"
like we get with<nav>
and<main>
. - Accessible Palette: stop using HSL for color systems — Eugene Fedorenko says, “While HSL and HSV are fine choices for choosing a single color, they’re not suitable for building a color system, as they simply transform the RGB model and ignore the complexities of human perception.” It seems like everyone who has looked into next-gen color formats is a fan, but I haven’t wrapped my mind around them yet. Things like LCh, Lch(ab), HCL, LCH(uv)… There is starting to be some trickles of browser support.
- One last time: custom styling radio buttons and checkboxes — Scott O’Hara notes that you can entirely replace these inputs with custom styling, and do it accessibly. Part of doing it right is dealing with every possible state. Worth noting: without replacing everything, you can get pretty far in styling checkboxes/radios by just changing
width
/height
and theaccent-color
, as Dave and I noted here. - Understanding Logical Focus Order — Rachel Leggett explains it is “the idea that someone navigating your webpage with a keyboard (i.e. without a mouse) will encounter elements in an order that makes sense.” Nearly anytime you use the
order
property, you’re probably interferring here. But less obviously, hidden elements that remain interactive can confuse logical focus order. - Assistiv Labs — I didn’t realize there was a tool in the vein of CrossBrowserTesting or BrowserStack that allowed you to test in JAWS and NVDA and stuff — but there is! Just the other day I wanted to test in JAWS, so I spun up a (paid) copy of Parallels with my (paid) copy of Windows 10 and used my (40-minute test version) of JAWS to test. While it worked, it was not particularly cheap or without significant technical debt. This seems easier, although I haven’t actually tried it yet.
The post Some Articles About Accessibility I’ve Saved Recently IV appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.
This content originally appeared on CSS-Tricks and was authored by Chris Coyier
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Chris Coyier | Sciencx (2021-10-29T18:28:38+00:00) Some Articles About Accessibility I’ve Saved Recently IV. Retrieved from https://www.scien.cx/2021/10/29/some-articles-about-accessibility-ive-saved-recently-iv/
" » Some Articles About Accessibility I’ve Saved Recently IV." Chris Coyier | Sciencx - Friday October 29, 2021, https://www.scien.cx/2021/10/29/some-articles-about-accessibility-ive-saved-recently-iv/
HARVARDChris Coyier | Sciencx Friday October 29, 2021 » Some Articles About Accessibility I’ve Saved Recently IV., viewed ,<https://www.scien.cx/2021/10/29/some-articles-about-accessibility-ive-saved-recently-iv/>
VANCOUVERChris Coyier | Sciencx - » Some Articles About Accessibility I’ve Saved Recently IV. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/10/29/some-articles-about-accessibility-ive-saved-recently-iv/
CHICAGO" » Some Articles About Accessibility I’ve Saved Recently IV." Chris Coyier | Sciencx - Accessed . https://www.scien.cx/2021/10/29/some-articles-about-accessibility-ive-saved-recently-iv/
IEEE" » Some Articles About Accessibility I’ve Saved Recently IV." Chris Coyier | Sciencx [Online]. Available: https://www.scien.cx/2021/10/29/some-articles-about-accessibility-ive-saved-recently-iv/. [Accessed: ]
rf:citation » Some Articles About Accessibility I’ve Saved Recently IV | Chris Coyier | Sciencx | https://www.scien.cx/2021/10/29/some-articles-about-accessibility-ive-saved-recently-iv/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.