Your fortnightly 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:
outlineremains 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: transparentas 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.
We finish with a ‘social media special’, where I cover recent social media stories centered around accessibility.
Misuse of Twitter’s Alt Text Feature Draws Criticism From Accessibility Advocates
Since 2016, when Twitter first made it possible to write alt text, the text was only really retrievable by screen reader users. The result was that only a small fraction of images ever had alt text written for them.
In April, Twitter made it easier for all users to view alt text. The increased visibility has led to a rise in misuse. Instead of describing images, some accounts use the alt text field to “add hyperlinks, caption credits and source citations”, or “as a place to hide jokes, supplementary information or alternative captions from the main timeline”.
Critics say that Twitter bungled the roll-out, by not properly explaining the purpose of the alt text feature. It has started testing a new setting: a pop-up that gives more information and reminds people to add descriptions to their images. Some users would like to see Twitter go further, by detecting alt text misuse and flagging it to the author, by extending the 1000 character alt text limit, and by allowing people to retrospectively add alt text to images.
TikTok’s new captions and translation features are all about accessibility
This Digital Trends article covers a TikTok announcement about new accessibility tools coming to the social media platform. It is currently on a gradual roll-out and is only available on select videos.
Viewers will now have the option to turn on auto-generated captions for videos – something that only creators have been able to do until now.
TikTok will also be supporting translations for captions and for ‘stickers’ that creators embed in their videos. The following languages will be supported initially, with more to come: English, Portuguese, German, Indonesian, Italian, Korean, Mandarin, Spanish, and Turkish.
On the subject of social media, have you considered sharing this frequent11y newsletter with your friends and colleagues? Please consider writing a quick tweet and pointing people to https://ashton.codes/subscribe-to-frequent11y/ – it would really help me out and give me even more reason to keep writing!
This Toronto TikToker has gained a big following by reviewing restaurants. But her focus is on more than the food
Taylor Lindsay-Noel has over 17,000 followers and half a million views on her videos on TikTok. She reviews restaurants, but with a focus on the accessibility of the venue.
Taylor is quadriplegic and uses a 350 pound power chair, so even a single step stair at the entrance can be a big accessibility issue. Taylor researches restaurants online before visiting them, and calls ahead of time to double check that the venue is accessible, so is not afraid to give critical reviews when that turns out not to be the case!
People have been reaching out to Taylor to thank her, as it can be difficult to get the true picture of a place online, and it can be hard to find accessible eateries. Whilst her reviews are largely limited to Toronto establishments, Taylor is succeeding in raising awareness more widely, noting that a lot of “able-bodied people who want to do their part” will now spot accessibility issues and complain about them, after seeing her videos.
NASA’s alt text
This tweet from NASA’s official Twitter account has been heralded as a great example of alt text. According to an article I covered earlier: “Accessibility advocates were delighted. NASA’s alt text was thoughtful and evocative, but most important did its job of capturing an image fully with words to make it accessible to all.”
The background of space is black. Thousands of galaxies appear all across the view. Their shapes and colors vary. Some are various shades of orange, others are white. Most stars appear blue, and are sometimes as large as more distant galaxies that appear next to them. A very bright star is just above and left of center. It has eight bright blue, long diffraction spikes. Between 4 o’clock and 6 o’clock in its spikes are several very bright galaxies. A group of three are in the middle, and two are closer to 4 o’clock. These galaxies are part of the galaxy cluster SMACS 0723, and they are warping the appearances of galaxies seen around them. Long orange arcs appear at left and right toward the center.
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.
