:focus-visible and backwards compatibility
Patrick is thinking through a way to implement :focus-visible that’s forwards and backwards compatible.
Tags: accessibility
257
Starability - Accessible rating system demo
Accessible star ratings (progressively enhanced from radio buttons) with lots of animation options. The code is on Github.
Dear Developer, The Web Isn’t About You | sonniesedge.co.uk
This is absolutely brilliant!
Forgive my excitement, but this transcript of Charlie’s talk is so, so good—an equal mix of history and practical advice. Once you’ve read it, share it. I want everyone to have the pleasure of reading this inspiring piece!
It is this flirty declarative nature makes HTML so incredibly robust. Just look at this video. It shows me pulling chunks out of the Amazon homepage as I browse it, while the page continues to run.
Let’s just stop and think about that, because we take it for granted. I’m pulling chunks of code out of a running computer application, AND IT IS STILL WORKING.
Just how… INCREDIBLE is that? Can you imagine pulling random chunks of code out of the memory of your iPhone or Windows laptop, and still expecting it to work? Of course not! But with HTML, it’s a given.
Why the Web Will Win || Matthew Ström: designer & developer
The first 22 years of the web platform were revolutionary. The open, accessible, and feature-rich applications that exist on the platform continue to drive the global economy. The next 5 years look like they’ll be filled with more innovation and growth than ever.
The web will be the platform of the Next Big Thing. Not just as the distribution network many see it as today; the web platform will deliver the most innovative experiences. They’ll be innovative not just for how they use new technology, but also because of how easy it will be for new users to experience.
Braille Neue
I love this idea (and implementation)—instead of treating braille signage as something “separate but equal”, this typeface attempts to unify lettering and braille into one.
Braille Neue is a universal typeface that combines braille with existing characters. This typeface communicates to both the sighted and blind people in the same space.
Focusing on Focus Styles | CSS-Tricks
A deep dive into the :focus pseudo-class and why it’s important.
Nobody Said CSS Is Easy
One thing I gained a stronger awareness of (simply from working with checkboxes) is that it’s important to progressively enhance UI components, so that a fancy custom one is able to fall back to the default browser styles and functionality. This way, a user can still access the UI if JavaScript or CSS fail.
Steve Faulkner on Twitter: Typical/expected screen reader output
Really handy accessibility information in a single tweet.
Vox Product Accessibility Guidelines
Accessibility isn’t a checklist …but this checklist is a pretty damn good starting point. I really like that it’s organised by audience: designers, engineers, project managers, QA, and editorial. You can use this list as a starting point for creating your own—tick whichever items you want to include, and a handy copy/paste-able version will be generated for you.
Useful accessibility resources
A whoooole bunch of links about inclusive design, gathered together from a presentation.
How we’ve made GOV.UK Elements even more accessible
A nice run-down of incremental accessibility improvements made to Gov.uk (I particularly like the technique of updating the title element to use the word “error” if the page is displaying a form that has issues).
Crucially, if any of the problems turned out to be with the browser or screen reader, they submitted bug reports—that’s the way to do it!
Accessible By Design | Sparkbox | Web Design and Development
A primer on accessible colour contrast with links to some handy tools for testing.
Notifications
Heydon keeps on delivering the goods. This time, he looks at making on-screen notification messages accessible using ARIA’s live regions.
As ever, structuring content is paramount, even where it pertains to dynamic events inside realtime web applications.
Be Kind, Design – Nat Dudley – Medium
The transcript of Nat’s superb Webstock talk.
We need to start thinking about inclusivity the same way as we think about mobile design. We realised with mobile, that we have to put that experience at the centre of what we do, otherwise it won’t be successful and we’ll fail mobile users. We realised we have to design mobile-first.
The same is true for inclusivity. Instead of it being an afterthought if it’s thought about at all, it needs to be our first thought. It needs to be central to our strategy, embedded in how we analyse and solve the problems we encounter. Designing inclusive-first is the only way we’ll manage to serve and protect all of the people who use what we build.
A Tale of Two Rooms: Understanding screen reader navigation | The Paciello Group
A nice analogy to help explain what it’s like to navigate with a screen reader—and how much well-structured markup can help make it easier.
Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility | CSS-Tricks
What it says on the tin—a few suggestions to ensure the accessibility of your site.
Improving the Accessibility of 24 ways | CSS-Tricks
Paul walks us through the process of making some incremental accessibility improvements to this year’s 24 Ways.
Creating something new will always attract attention and admiration, but there’s an under-celebrated nobility in improving what already exists. While not all changes may be visual, they can have just as much impact.
The Trials and Tribulations of the Title Attribute - 24 Accessibility
Everything you ever wanted to know about the title attribute in HTML.
What’s hot: using title on inputs, abbrs, and iframes.
What’s not: using title on anything else.
Accessible Links Re:visited | Filament Group, Inc., Boston, MA
Great advice on keeping your hyperlinks accessible.
A11Y Style Guide
A library of accessible UI elements that you can use as a starting point, complete with HTML and CSS. Alas, no JavaScript, but there’s always Heydon’s inclusive components for that.