Wearable tech helps this blind runner compete in ultramarathons In 2017, Englishman Simon Wheatcroft was the first blind person to run the New York City Marathon solo, without being tethered to a sighted running guide. He managed this by wearing a “Wayband” on his wrist; the device has built-in GPS and vibrates to keep the… [Read More]

In Praise of the Unambiguous Click Menu Mark Root-Wiley shares his thoughts on why hover-based menus should be a thing of the past. They violate Jakob’s Law of Usability: that users prefer your site to work the same way as all the other sites they already know. This is because there are several different hover menu… [Read More]

iPhones can now tell blind users where and how far away people are An article from October 2020, but it taught me something I didn’t know: iOS 14.2 allows you to detect whether there are people in view (using your camera), and how far away they are. iOS will say how far the person is… [Read More]

Show/hide password accessibility and password hints tutorial Nicolas Steenhout describes how he implemented a standard show/hide feature for password inputs, with accessibility in mind. Show/hide is useful for those with memory issues, or essential tremors, or anybody who wants to double-check what they typed in. Nicolas’ tutorial is for a registration form rather than a… [Read More]

Beautiful accessibility with Floating Focus Dutch tech agency Q42 have published an NPM package – @q42/floating-focus-a11y – which embodies a new approach to styling the :focus state of form controls and links. Their solution animates the outline from one tabbed control to the next, making it easier to keep track of where the focus is… [Read More]

This Free App Reads Money for People Who Are Blind or Visually Impaired EyeNote is a free app for iOS, which can recognise US bank notes using your device’s camera. Only half the note needs to be visible for it to be recognised, but the app can’t detect whether or not notes are counterfeit. There… [Read More]

How to make “Read more” links accessible “Read more” links are a poor experience for screen reader users, who often browse the web by navigating lists of every link in the page. Therefore, each link should make sense when read out of context; “read more” doesn’t. This article lists six different ways to improve your… [Read More]

Building an Accessibility Library Stephanie Hagadorn, UX Design Lead at Indeed, writes about the creation of the “A11y Annotation Kit“. This is a Figma-based ‘accessibility library’, designed to improve the handover from designer to developer and prevent both roles from making the same old accessibility mistakes around things like colour contrast issues. See the screenshot… [Read More]

Disabled buttons don’t have to suck Product designer Justine Win describes three alternatives to using disabled buttons, which can otherwise lead to a confusing experience (“Why can’t I click this?”): Only show what’s actionable (i.e. don’t show the button in the first place) Provide context (i.e. show the disabled button, but pairing it with additional… [Read More]

HTML test cases A useful resource for testing: a complete list of form controls, and a table of how their associated labels/legends are announced by screen readers. For example, check out input type=”url” – the page describes what is announced on VoiceOver, NVDA and JAWS in Chrome, Firefox, Safari and Edge. Each page has an… [Read More]