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]
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]
The Automated Accessibility Coverage Report (PDF) Thanks to GDS colleague Anika Henke, who discovered this report via the “Accessibility Testing Coverage: Automation and Intelligent Guided Testing” talk at axe-con. According to the report, Deque’s accessibility testing engine axe-core finds 57.38% of accessibility issues, rather than the “widely accepted belief that automated accessibility testing only provides… [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]
Imagining native skip links A proposal by Kitty Giraudel that is so brilliant, it’s a wonder it hasn’t been thought of and implemented already: native skip links. Every website ought to have a “Skip link” link as the first thing a keyboard user tabs to in the page. This is important for keyboard users and… [Read More]
Loading...