Your weekly frequent11y newsletter, brought to you by @ChrisBAshton:

The Hidden History of Screen Readers

This lengthy but approachable article by The Verge covers the history of JAWS and NVDA.

Ted Henter lost his sight in a car accident in 1978. Losing his job as a racing driver and mechanical engineer, he studied computer science, having to get volunteers to read programming books and terminal outputs to him.

In his first computing job, Ted got his first “talking computer” (software created by Maryland Computer Services), which read one character at a time. This meant Ted could finally work without assistance. In the next version, it could read one word at a time, and Ted became the most known user, regularly calling the company for tech support.

Ted was sent on a business trip to Chicago to train a businessman, Bill Joyce, in using the software. The two became friends and in 1987 created “Henter-Joyce”, releasing their own DOS screen reader called JAWS (Job Access With Speech). It had Braille support, dual cursors and a scripting language for users.

As companies moved from DOS to Windows, a graphical interface, screen reader development became more challenging. Henter-Joyce released JAWS for Windows in 1995. Microsoft ended up buying the source code and created its own native version, but that eventually went nowhere, and JAWS retained the majority of the market share all the way through to 2019.

The price of JAWS – $1000 for a home license – was prohibitive, especially to the 89% of people with vision loss from low and middle income countries. In 2019, NVDA (NonVisual Desktop Access) overtook JAWS in popularity. It is free and open source, developed by two friends from Australia: Michael Curran and Jamie Teh.

Michael started it as a prototype in 2006. Within a year, Mozilla funded Michael to attend the CSUN Assistive Technology Conference, where Michael met like-minded enthusiasts. Michael and Jamie then set up the NV Access nonprofit to govern the project long-term. Initially viewed as ‘fine for home use, but not professional use’, NVDA has come a long way, with contributors from all over the world.

The article contains lots of useful statistics. For example, in 2020, the estimated number of blind people worldwide was 49.1 million, comparable to the population of Spain or South Korea. An additional 255 million people have moderate to severe visual impairment. And in a recent Stackoverflow survey of developers, 1,142 people – approximately 1.7% of total participants – replied, “I am blind / have difficulty seeing.”

How to get the best out of Accessibility features in Windows 11

This is a useful overview of native accessibility features in Windows 11. I think it’s useful to occasionally remind ourselves what is available and think about how we should build our sites and apps to not get in the way of such features.

All of the features are viewable in one place (accessed via WINDOWS AND I and heading to the Accessibility section).

There’s a slider to change the system text size, as well as options to change your cursor style. You can opt in to having scrollbars visible the whole time – the disappearing scrollbar is something that catches me out a far bit on my Mac! (Though macOS also has options to configure this).

The WINDOWS AND + shortcut toggles the screen magnifier, and activating it twice switches to greater magnification. There are colour filters, configured for different kinds of colour blindness.

Windows Narrator is a built-in screen reader. You can also enable on-screen notifications to accompany audio notifications. Finally, there is speech recognition and voice typing.

All of the above accessibility features are accompanied by screenshots in the linked article.

The Guide To Windows High Contrast Mode

In this Smashing Magazine article, Cristian Díaz covers everything you need to know about this accessibility setting, which we’ll abbreviate as WHCM below. This is a Windows feature that users can enable to replace the colours on websites and applications, in order to increase readability and reduce noise.

WHCM is used by around 30% of Windows users with low vision, and around 4% of all active Windows devices. WHCM is misleadingly named, as many of its users actually opt for a colour palette that has a lower contrast than the default.

Cristian points out that semantics are incredibly important in WHCM. Take this example of three different elements with the same class:

<div role="button" class="button" tabindex=0>
  Not a button
</div>
<button class="button">
  Definitely a button
</button>
<a href="#" class="button">
  This is a link
</a>

They’re given the same styling, so would usually look the same. But in WHCM, they all appear different, as WHCM only looks at which underlying HTML element is being used.

Another area to pay close attention to is the use of background styling. A common pattern is to give ‘primary’ and ‘secondary’ buttons different background colours, but in WHCM, the background colours are removed, and it can be hard to distinguish between the button types (or even to know that it is a button at all, if you’ve set a border/outline of zero!). A workaround is to set a transparent border instead, which will still hide the border visually in normal mode, but ensure that there is a button-identifying border in WHCM mode. As a rule of thumb, Cristian says:

outline remains as the only reliable way to apply a focus state on an element in WHCM.

If you’re going to use something different to highlight a focus state in an element, add the property outline-color: transparent as a fallback [for WHCM].

WHCM will remove gradients applied using background-image, but will respect background images that use the url() value (something that I think has changed since my frontend developer days at the BBC!). The exception is background image in the body element, in Firefox, which apparently won’t render.

Cristian only briefly touches on currentColor, which can be used to set things like SVG colours to the same colour as whatever WHCM is using for link text. He caveats this though, saying it won’t work in Chromium based browsers, due to the default colour value of SVGs being none. Luckily there is a new forced-color-adjust property which can be set to get WHCM to obey it.

There’s also a forced-colors media query, so that you can target your WHCM overrides only for when WHCM is enabled. Within the media query, we can access system colors and can use them to ensure we style a consistent UI, whatever our markup. For example:

@media screen and (forced-colors: active) {
  .link {
    background-color: LinkText;
  }
  
  .link:visited {
    background-color: VisitedText;
  }
  
  .link:focus span {
    outline-color: Highlight;
  }
}

There is a useful set of resources to read at the end of the article.

---

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.