- 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 above: designers can, for example, use grey and red numbered dots to indicate the desired reading and tab order of a component. In addition, the kit gives designers a constant refresher and summary of a11y guidelines, which have been translated from the more “verbose” WCAG specifications.
- Stephanie says: “All components are prefilled with the correct CSS or HTML elements so designers don’t have to remember things like the autocomplete value for a street field (it’s “address-level1”) or the correct landmark role for a footer (that’s “contentinfo.”). This helps developers use the right values as well.”
- “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” links:
- Change the link text to be more descriptive, which has the benefit of benefiting sighted users too.
- Hidden text within the link, e.g.
Read more <span class="sr-only"> about what Digital Access do</span>
- Remove the “read more” link – it often repeats a link slightly further up in the DOM, so has no real purpose.
- Nest the “read more” link in a contextual element. This was a new one for me: WCAG actually allows links that don’t make sense out of context, provided it is nested in an element that does provide the context, which might be a paragraph, list item, table cell, whatever. Screen readers can be made to “read the current sentence” relatively easily, so screen reader users can get context this way, though it is less intuitive.
aria-labelon the link, to replace the link text.
aria-labelledbyto reference other text on the page (such as the heading).
<h2 id="heading">Digital Access</h2><a id="read-more" aria-labelledby="read-more heading">Read more</a>would be read out as something like “Read more Digital Access, link”.
- Note that “read more” links make for a poor user experience, but many implementations are not inherently inaccessible. There’s a dedicated “Read more” example on Success Criterion 2.4.4: Link Purpose (In Context) which confirms that these links don’t fail that SC, provided that the context can be derived from the surrounding paragraph (solution number 4 in the article above).
- 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 is a privacy mode which, when activated, uses vibrations or audible beeps (‘pulses’) rather than announcing the value of notes with a voice. For example, one dollar is one pulse, two dollars is two pulses, and five dollars is three pulses.
- Dutch tech agency Q42 have published an NPM package – @q42/floating-focus-a11y – which embodies a new approach to styling the
:focusstate 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 at all times, particularly if your focusable elements aren’t very close together.
- 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 sign in form, but much of the advice applies to both.
- Password constraints (e.g. “Minimum 8 characters”) should be visible up front, not only shown after a failed form submission. These constraints should be in a list that is
aria-hidden, alongside the same information in a paragraph that is visible to screen readers only (
class="sr-only"), as the paragraph is less verbose than the list.
- The input should go after the hint, and should have an
aria-describedbyassociated with the hint. It should have
aria-required="true", rather than HTML’s native
required, as the latter announces the input is “invalid” the first time it receives focus (and thus still empty). Finally, it needs an
autocompletewith a value of
new-password, in this example, or
current-passwordfor a sign-in form. (This attribute is used by password managers).
- Now for the show/hide functionality: this should be a
<button role="switch" aria-pressed="false">. When it is pressed, you should change the value of the input from
text, and update the
aria-pressedvalue on the button.
Did you know that you can subscribe to dai11y, week11y, fortnight11y or month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.