Welcome to your monthly frequent11y newsletter, brought to you by @ChrisBAshton. I hope you enjoy these a11y articles I’ve collated and summarised for you. (Psst – if you find these emails too long, consider switching to shorter, more frequent updates). Now on with the show!

Android update adds scheduled texts and improves accessibility

• Whilst Android 12 will likely be released in September 2021, a first developer preview is out now. One accessibility improvement is that you will be able to make calls, set timers and play music from the lock screen, using Android’s ‘Assistant’. This will benefit those with mobility impairments and enable hands-free use.
• Android 12 will also incorporate big changes to the TalkBack screen reader (version 9.1). It adds 12 new multi-finger gestures that, for example, allow you to switch between reading just headlines, or words, or individual characters. It adds voice commands, so you can tell TalkBack “find” to locate text in the screen, or do things like increase the speech rate. Finally, it adds more customisation for its braille keyboard, including support for Arabic and Spanish. This blog post by Google explains the updates in more detail.

How we created a reporting tool to improve the accessibility of GOV.UK

• Avision Ho, a data scientist at GDS, describes how their team built a tool to check half a million GOV.UK pages for some specific WCAG failures. They concentrated on 8 problems, including non-semantic headers (paragraph text styled with bold, mimicking the style of a heading), badly ordered headers and falsely labelled non-English text.
• It goes into some technical detail on how the team used multi-processing techniques to generate the reports in just a few hours. The reports were sorted by government department, so that the Accessibility Team could speak with the relevant content editors about the issues identified.
• The article lacks a summary of how many issues were identified and how much has subsequently been fixed, but it’s certainly a step in the right direction and I hope we can read more about this soon.

The no-mouse challenge: Taking the keyboard navigation red pill

• Denis Boudreau describes “the no-mouse challenge”: start a timer, open a website and see how long it takes you to run into a brick wall. Participants in his workshops are “blown away” at the brittle nature of the web once you go off the beaten track of mouse navigation. He likens this to “taking the red pill” in The Matrix; the sudden realisation of how inaccessible most sites are. Common issues encountered are:
  • Losing your place, due to a lack of focus styling.
  • Triggering modal windows and having difficulty focussing on them.
  • Jumping around the page at random, due to confusing & illogical page order.
  • Skipping over entire sections of the page that really should be interactable.
• One person who took the challenge is Mickey Mellen, in his article, “An hour without a mouse“. It references my own article – which is always nice to see! – and also shares a useful resource on Chrome keyboard shortcuts.
• Both articles reference the 7% of working-age adults with severe dexterity difficulties, who might struggle to use a mouse. Combined with screen reader users, that’s about 10% of users who depend on keyboard support.

Material Design Text Fields Are Badly Designed

• Smashing Magazine article by Adam Silver, describing what’s wrong with the text fields in Material Design (Google’s design system).
• Material Design uses “float labels”: text that appears in the input, like a placeholder, but moves above the input when you focus on the element. This is better than relying on placeholders, which disappear on focus, and which can make it hard to remember what the input is for.
• However, float labels share the other drawbacks associated with placeholders; namely:
  • Float labels that are longer than the input itself get cut off.
  • The presence of text inside the input can make it appear as though it’s been filled in already.
  • As a result, in order to help the user distinguish between inputs that have been filled in and those that have not, float labels tend to have poor contrast, making them harder to read.
• Adam concludes that Google sacrificed usability for minimalism, and that forms that use conventional text labels can be beautiful too.

Accessible motion: why it’s essential and how to do it right

• Stephanie Cree shares some good UX tips for making your motion accessible:
  • Keep animation at the point of focus, to prevent zoomed in users from missing it outside the part of the page they’re zoomed in on.
  • Avoid flashes more than 3 times per second, which could trigger epileptic seizures.
  • Avoid parallax scrolling where the background and foreground move at different speeds, which can cause motion sickness.
  • Keep animations shorter than 1 second long.
  • Provide a setting to turn off all motion on your website. And, to facilitate this, you’ll need to design all elements of the page with and without motion.

Amazon Echo Show 8 extends the power of Alexa to people with disabilities

• An article from last November, reviewing the accessibility of Amazon’s Echo Show 8. It highlights a bunch of accessibility features I’d never considered the Echo devices to have:
  • Like phones and tablets, it has a pinch-and-zoom feature to allow you to magnify the screen.
  • Using VoiceView – Echo’s built in screen reader – information on the screen can be swiped through and interacted with by a blind person.
  • Screen colours can be inverted, providing higher contrast, and there are colour correction modes for colour blindness too.
  • Finally, Alexa Captioning shows subtitles for Alexa responses, making the devices viable for deaf users.

Hiding Content Responsibly

• Kitty Giraudel writes about the HTML attributes and CSS properties commonly used to ‘hide’ content, either visually or from assistive technologies (AT), or both. They then go into detail on each one:
  • An sr-only class is great for visually hiding something while preserving it for AT.
  • aria-hidden is great for hiding content from AT while keeping it visually displayed (e.g. decorative SVGs). However, make sure that there are no focusable elements within these areas, as they are still focusable.
  • display: none or the hidden attribute hide content from everyone, although their contents can still be referenced via aria-describedby/aria-labelledby, which could be handy to avoid vocalising something twice. Use this over width: 0 and height: 0.
  • visibility: hidden hides content visually and from AT (equivalent to display: none) but keeps the space, helping to avoid layout shift. Generally you’ll want to use this over opacity: 0 and clip-path: circle(0), which are inconsistently treated by AT, and over transform: scale(0), which has limited uses.
  • You’ll also want to use visibility: hidden over the Chrome-only content-visibility: hidden, which has low browser support.

Gold Nanoparticles Inside Contact Lenses Correct Color Blindness

• Researchers in the United Arab Emirates have developed contact lenses that could help correct red-green colour blindness. The lenses are created with gold nanocomposites and hydrogel, creating pink-tinted lenses. These could be a popular alternative to tinted eyewear. The next steps will involve human trials.

WordPress.org Removes Fake Reviews for AccessiBe Plugin

• Accessibility consultant Joe Dolson noticed a pattern amongst the reviews for the accessiBe WordPress plugin, which had 31 five-star reviews, 2 four-star reviews and 2 one-star reviews. Many of the accounts of the positive reviews had interacted with some of the same plugins, and tended to be one-sentence reviews. WordPress removed the majority of the reviews, leaving 3 one-star reviews and 1 five-star review at the time of writing.
• accessiBe has repeatedly come under fire for claiming that their overlay automatically makes your site WCAG-compliant. Adrian Roselli refutes this in detail, and presents evidence that suggests the company has paid for praise before.

Inaccessibility Warnings in the Browser anyone?

• An interesting proposal by Martin Mengele: should we show warnings in the browser when a site is deemed to have accessibility issues? The warning about insecure connections, which all modern browsers now display prominently when connecting over HTTP, helped to drive a large HTTPS adoption; Martin argues that an equivalent for accessibility could be the visual deterrent some websites need.

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 20-30% of accessibility testing coverage”.
• The discrepancy comes from theory vs practice. The 20-30% figure is the proportion of all possible accessibility issues that can be detected with tools, whereas the 57% figure comes from issues actually found on these sample websites.
• In addition, the 20-30% figure only counts unique issue types, whereas the 57% figure takes into account the number of times each issue occurs. In other words, if an issue that can be detected with automated tools accounts for a large proportion of all accessibility issues in the wild, then it’s reasonable to conclude that automated tools do in fact detect a larger proportion of accessibility issues than theorised. Deque hopes that this report will “remove the stigma attached to automated testing”.
• It’s worth noting that Deque analysed new client sites in getting the statistics for this report, which is based on the analysis of over 13,000 pages.

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 screen reader users, so that they can jump directly to the main content of the page (usually the <main> element or the first <h1>), skipping over all of the menus and header content that is duplicated on every page.
• Building these “skip links” isn’t difficult, but many sites fail to implement them, or do so incorrectly. So why not make it the responsibility of the browser?
• Kitty is clear that a native skip link should have as little customisability as possible, from the website’s perspective. All we should be able to set is the destination of the link, via a <meta> or <link> tag such as <meta name="skip-link" value="#content" />, where value is a CSS selector referencing a node in the DOM.
• Kitty even proposes a polyfill that sites might run to decide whether or not to include their bespoke skip link (in the event that the browser doesn’t have one natively). Not that this matters hugely in practice, as Kitty points out that a native skip link would not interfere with a bespoke one in any way, since the focus would have shifted over the bespoke skip link by the time it would have been reached.
• If you like the idea, be sure to +1 it on the WebWeWant GitHub discussion!

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 example of the form control for you to test your screen reader on too. Worth bookmarking!

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?”):
  1. Only show what’s actionable (i.e. don’t show the button in the first place)
  2. Provide context (i.e. show the disabled button, but pairing it with additional information – see screenshot above)
  3. Enable the button by default, then show error as needed. For example, a login form where the login button is enabled, but if you don’t fill in the username or password field, a validation error is shown.

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 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.”

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” links:
  1. Change the link text to be more descriptive, which has the benefit of benefiting sighted users too.
  2. Hidden text within the link, e.g. Read more <span class="sr-only"> about what Digital Access do</span>
  3. Remove the “read more” link – it often repeats a link slightly further up in the DOM, so has no real purpose.
  4. 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.
  5. Use aria-label on the link, to replace the link text.
  6. Use aria-labelledby to 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).

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 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.

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 at all times, particularly if your focusable elements aren’t very close together.
• You can see this in action on the Rijksmuseum website. I actually really like the effect, although it is quite complex under the hood and doesn’t work without JavaScript, so you’d still want to provide some fallback focus styles for when JS isn’t available, somewhat defeating the purpose of the project. And of course, there is a whole school of thought around not disabling native browser focus styles. But it is an interesting UX nonetheless, and attempts have been made to consider accessibility, such as not rendering any animation when prefers-reduced-motion is set.

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 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-describedby associated 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 autocomplete with a value of new-password, in this example, or current-password for 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 password to text, and update the aria-pressed value on the button.

Whew, that was a long newsletter! Did you know that you can subscribe to smaller, more frequent updates? The dai11y, week11y and fortnight11y newsletters get exactly the same content. The choice is entirely up to you! Curated with ♥ by developer @ChrisBAshton.