Interaction Media Features and Their Potential (for Incorrect Assumptions) A really interesting CSS-Tricks article by Patrick Lauke, exploring the Media Queries Level 4 Interaction Media Features. In theory, they enable the detection of things like if the user is using a mouse or a touch screen (@media (pointer: fine|coarse) {), which you could use to decide… [Read More]

The lang attribute: browsers telling lies, telling sweet little lies Manuel Matuzović shares some useful CSS that can alert you to a missing, empty or incorrect page-level lang attribute. For example: html:not([lang]) { border: 10px dotted red; } Manuel explains why setting the right value is important for screen reader support, as well things like… [Read More]

WordPress adds support for video captions and subtitles WordPress v5.6 “Simone” introduces WebVTT support for its videos. This is a big deal considering WordPress powers around 4 out of 10 websites. It means you can upload .vtt files containing subtitles, to enable closed captions on the video. The article gives a nice example of a… [Read More]

State-Switch Controls: The Infamous Case of the “Mute” Button An article exploring the design of ‘mute’ buttons on the iPhone ‘call’ screen, on Zoom, and on WebEx. Two of the three use fill colour alone to denote state: the universal microphone icon has a dash through it, regardless of what state you’re in, making it… [Read More]

In a New Year special, I’m summarising not one, not two, but three articles today. It’s my attempt to clarify what seems quite a contradictory issue: whether you should ‘try on’ a disability to build empathy, and/or build better products and services. As someone who has written a series of articles on using the web… [Read More]

Equal Entry Guidelines for Describing 360-Degree Video An interesting set of guidelines describing the challenges of audio-describing a 360 degree video (which will become more prevalent as VR grows). You should divide the video into scenes, write a brief introductory description for each scene, then write audio descriptions for each direction a viewer could face… [Read More]

VoiceOver Preview for macOS Firefox Mozilla have worked hard over the past year to deliver VoiceOver support for Firefox on macOS – something that had been lacking for 15 years. It’s now ready to try in the Firefox 85 Beta and Mozilla are calling on volunteers to try it out and report any bugs they… [Read More]

Lists A Jeremy Keith entry from his journal. Lists are helpfully announced to screen readers when they are navigated to (e.g. “List: six items”). However, Webkit browsers such as Safari don’t announce lists if the lists’ bullets have been removed using CSS (just like it doesn’t announce content that has been visually hidden with display:… [Read More]

Alexa Makes Shopping Lists Sharable as Accessibility Feature Alexa allows you to create lists such as shopping lists and todo lists, adding and removing items with your voice. And now, users can ask Alexa to send a given list to a specific contact. Once Alexa confirms it has identified the right person, the recipient gets… [Read More]

A placeholder is not a label This is your regular reminder from HTMHell that <input type=”text” placeholder=”First name”> is not accessible and requires an associated <label>. Some screen readers will fall back to using the placeholder if a label is missing, but it can’t be relied upon. There are various UI issues with a placeholder-only… [Read More]