Accessibility Support
A very handy community project that documents support for ARIA and native HTML accessibility features in screen readers and browsers.
Link tags: accessibility
378
Van11y: Accessibility and Vanilla JavaScript - ES2015
Van11y (for Vanilla-Accessibility) is a collection of accessible scripts for rich interfaces elements, built using progressive enhancement and customisable.
How-to: Create accessible forms - The A11Y Project
Another five pieces of sweet, sweet low-hanging fruit:
- Always label your inputs.
- Highlight input element on focus.
- Break long forms into smaller sections.
- Provide error messages.
- Avoid horizontal layout forms unless necessary.
5 most annoying website features I face as a blind person every single day by Holly Tuke
Five pieces of low-hanging fruit:
- Unlabelled links and buttons
- No image descriptions
- Poor use of headings
- Inaccessible web forms
- Auto-playing audio and video
Top 5 things to review in an Accessible Design Review - Hassell Inclusion
Considering how much accessibility work happens “under the hood”, it’s interesting that all five of these considerations are visibly testable.
- Think about accessible copy
- Don’t forget about the focus indicator
- Check your colour contrast
- Don’t just use colour to convey meaning
- Design in anticipation of text resizing
On not choosing WordPress for the W3C redesign project - Working in the open with W3C and Studio 24
The use of React complicates front-end build. We have very talented front-end developers, however, they are not React experts - nor should they need to be. I believe front-end should be built as standards-compliant HTML/CSS with JavaScript used to enrich functionality where necessary and appropriate.
Schedule / Inclusive Design 24 (#id24) 17 September 2020
No matter what time zone you’re in, you can tune in to some excellent-sounding talks tomorrow.
No sign-up. No registration. All sessions are streamed live and publicly on the Inclusive Design 24 YouTube channel.
Kokorobot — leanerweb
The problem is that most websites will adapt to the ever faster connections, which makes them gradually inaccessible for people with slower connections. Today, most websites are impossible to download with a dial-up connection, because they have become too corpulent.
This speaks to me:
Everything we do to make it harder to create a website or edit a web page, and harder to learn to code by viewing source, promotes that consumerist vision of the web.
Pretending that one needs a team of professionals to put simple articles online will become a self-fulfilling prophecy. Overcomplicating the web means lifting up the ladder that used to make it possible for people to teach themselves and surprise everyone with unexpected new ideas.
There’s a list of links at the end of this piece to help you reach this goal:
It is vital that the web stay participatory. That means not just making sites small enough so the whole world can visit them, but small enough so that people can learn to build their own, by example. Bloat makes the web inaccessible.
Why you should hire a frontend developer - Technology in government
This is a really good description of the role of a front-end developer.
That’s front end, not full stack.
The difference between aria-label and aria-labelledby - Tink - Léonie Watson
A handy reminder from Léonie (though remember that the best solution is to avoid the problem in the first place—if you avoid using ARIA, do that).
Solid Start
A four-point checklist for inclusive design:
Are you a person that makes digital things for other people? Awesome—because this page is all about making things for people. There are four ways you can improve your creation for everybody. All four are testable, fixable and they improve usability for everybody.
Marxian Alienation And Web Development: HeydonWorks
As a web designer or developer burnout comes calling when you try to do good work, but you’re not allowed.
- You want to make the app more performant; your boss wants to fill it full of third party trackers
- You want to make the app more accessible; your boss wants you to focus on the ‘able market’ instead
- You want to word the app more clearly; your boss wants to trick users with misleading language
If you are a good developer, and a good person, asked to do shit work, you will burn out.
Smashing Podcast Episode 21 With Chris Ferdinandi: Are Modern Best Practices Bad For The Web? — Smashing Magazine
I really enjoyed this interview between Drew and Chris. I love that there’s a transcript so you can read the whole thing if you don’t feel like huffduffing it.
Progressive · Matthias Ott – User Experience Designer
Progressive enhancement is not yet another technology or passing fad. It is a lasting strategy, a principle, to deal with complexity because it lets you build inclusive, resilient experiences that work across different contexts and that will continue to work, once the next fancy JavaScript framework enters the scene – and vanishes again.
But why don’t more people practice progressive enhancement? Is it only because they don’t know better? This might, in fact, be the primary reason. On top of that, especially many JavaScript developers seem to believe that it is not possible or necessary to build modern websites and applications that way.
A heartfelt look at progressive enhancement:
Some look at progressive enhancement like a thing from the past of which the old guard just can’t let go. But to me, progressive enhancement is the future of the Web. It is the basis for building resilient, performant, interoperable, secure, usable, accessible, and thus inclusive experiences. Not only for the Web of today but for the ever-growing complexity of an ever-changing and ever-evolving Web.
We need more inclusive web performance metrics | Filament Group, Inc.
Good point. When we talk about perceived performance, the perception in question is almost always visual. We should think more inclusively than that.
Accessible to some - Manuel Matuzović
A score of 100 in Lighthouse or 0 errors in axe doesn’t mean that you’re done, it means that you’re ready to start manual testing and testing with real users, if possible.
Introduction to Screen Readers Using Voiceover | Gymnasium
This is a great short introduction to using VoiceOver with Safari by the one and only Ethan Marcotte.
Where did the focus go? | Amber’s Website
Amber documents a very handy bit of DOM scripting when it comes to debugging focus management: document.activeElement.
Striking a Balance Between Native and Custom Select Elements | CSS-Tricks
I think this a solution worthy of Solomon. In this case, the Gordian knot is the select element and its inevitable recreation in order to style it.
What if we instead deliver a native select by default and replace it with a more aesthetically pleasing one if possible? That’s where the “hybrid” select idea comes into action. It’s “hybrid” because it consists of two selects, showing the appropriate one at the right moment:
- A native select, visible and accessible by default
- A custom select, hidden until it’s safe to be interacted with a mouse
The implementation uses a genius combination of a hover media query and an adjacent sibling selector in CSS. It has been tested on a number of device/platform/browser combinations but more tests are welcome!
What I love about this solution is that it satisfies the stakeholders insisting on a custom component but doesn’t abandon all the built-in accessibility that you get from native form controls.
Optimizing keyboard navigation using tabindex and ARIA — Sara Soueidan
Smart thinking from Sara to improve usability for keyboard users by using aria-hidden="true" tabindex="-1" to skip duplicate links:
A good rule of thumb for similar cases is that if you have multiple consecutive links to the same page, there is probably a chance to improve keyboard navigation by skipping some of those links to reduce the number of tab stops to one. The less tab stops, the better, as long as it does not worsen or compromise on other aspects of usability.
I’ve cautiously implemented this pattern now over on The Session where snippets of comments had both a title link and a “more” link going to the same destination.