- Do not depend on color
- Do not block zoom
- Rediscover the alt attribute
- Add subtitles and captions to your videos
- Semantics = accessibility
- Use the right mark-up
- Use roles when necessary
- On hiding elements
- Follow web accessibility standards
- Audit and review
I can’t wait to get my hands on Laura’s book. It will be released on September 26th, but you can preorder it now.
Another great deep dive by Heydon into a single interface pattern. This time it’s the tooltip, and its cousin, the toggletip.
There’s some great accessibility advice in here.
Riffing on Rachel’s talk at Patterns Day:
At the Patterns Day conference last month, Rachel Andrew mentioned something interesting about patterns. She said that working with reusable interface components, where each one has its own page, made her realise that those work quite well as isolated test cases. I feel this also goes for some accessibility tests: there is a number of criteria where isolation aids testing.
Hidde specifically singles out these patterns:
- Collapsible (“Show/hide”)
- Form field
- Video player
James gives—if you’ll pardon the pun— hands-on advice on making sites that consider motor impairment:
- Don’t assume keyboard access is all you need
- Auto complete/Autofill
- Show me my password
- Allow for fine motor control issues
- Don’t autoplay videos
- Avoid hover-only controls
- Infinite scrolling considerations
- Be mindful of touch
- Avoid small hit targets
- Provide alternate controls for touch gestures
Far from being a niche concern, visitors with some form of motor impairment likely make up a significant percentage of your users. I would encourage you to test your website or application with your less dominant hand. Is it still easy to use?
I’m looking for work. I’d prefer to work remotely with a product team and to work in the areas I love: accessibility, CSS, and HTML. But it turns out those three things are considered “easy” in the industry right now. Which is fascinating because if you talk to anyone who uses assistive technology to surf the web or who doesn’t use a mouse, or who is accessing content in a different manner, you’ll find out it isn’t so easy.
Somebody hire Susan already!
A series of small suggestions that anyone can try so that they can better empathise with people who experience digital products differently.
These prompts are intended to help build empathy, not describe any one person’s experience. These prompts are not intended to tokenize the experience of the individuals experiencing these conditions.
A great short talk by Tim. It’s about performance, but so much more too.
A really great overview of using
prefers-reduced-motion to tone down CSS animations.
This post was written by James Craig, and I’m going to take this opportunity to say a big “thank you!” to James for all the amazing accessibility work he has been doing at Apple through the years. The guy’s a goddamn hero!
Stylish and accessible checkboxes and radio buttons accompanied by an explanation of the CSS involved.
No images were harmed in the making of these form controls.
There are some great hands-on accessibility patterns in this talk transcript from Scott.
A plug-in for Sketch that allows you to simulate colour blindnesses and check colour contrasts.
Comparing different ways to hide content accessibly:
There are three reasons behind hiding content in an interface, and it’s important to identify what those reasons are, as they will correlate with the appropriate technique needed to hide such content.
- Temporarily Hidden Content
- Purposefully Visually Hidden Content
- Purposefully Visual-Only Content
There’s a lot of great knowledge in here that can be applied to plenty of other interface elements too.
This is wonderful meditation on the history of older technologies that degrade in varied conditions versus newer formats that fall of a “digital cliff”, all tied in to working on the web.
When digital TV fails, it fails completely. Analog TV, to use parlance of the web, degrades gracefully. The web could be similar, if we choose to make it so. It could be “the analog” web in contrast to “the digital” platforms. Perhaps in our hurry to replicate and mirror native platforms, we’re forgetting the killer strength of the web: universal accessibility.
One of the accessibility features built into OS X:
Using Switch Control, and tapping a small switch with his head, my son tweets, texts, types emails, makes FaceTime calls, operates the TV, studies at university online, runs a video-editing business using Final Cut Pro on his Mac, plays games, listens to music, turns on lights and air-conditioners in the house and even pilots a drone!
Following on from Ire’s post about linting HTML with CSS, here’s an older post from Ebay about how being specific with your CSS selectors can help avoid inaccessible markup getting into production.