Chris Ashton

month11y issue 8

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

Sa11y – accessibility quality assurance assistant

  • An accessibility quality assurance tool geared towards content authors: Sa11y visually highlights common errors, with contextual information. Try out the demo.

Text link Accessibilty: aria-label and title

  • Deque article testing <a> links with various combinations of title and aria-label. The conclusion is that aria-label is the best supported attribute, and links to the ARIA8 WCAG technique which sites good use cases such as: <a aria-label="Read more about Seminole tax hike">Read more...</a>.

Twitter announces change to default alt text setting

  • Via TwitterA11y: starting May 27th, you no longer need a setting to add alt text to your images on Twitter. Prior to this, it was an exclusively opt-in feature.

Could coronavirus kickstart more accessible tech?

  • In this BBC video, we discover how live captioning enables deaf colleagues to participate in remote meetings in this era of coronavirus. It references an article on comparing the best video conferencing software for accessibility, which found that some popular platforms such as Zoom do not provide live captioning.

HTMHell special: close buttons

  • Article by HTMHell picking apart the real-world implementations of the ‘close’ button. Some sites use images or SVGs with no alt text, some use ‘X’ to represent ‘close’ (which is lost on screen readers), some use <div> or <a> elements where a <button> is required. There are a few recommended solutions depending on the visual style you’re going for.

Is it ok to ‘grey out’ disabled buttons?

  • UX Collective article that makes some interesting points: WCAG 2.1 success criterion 1.4.3 (“Contrast”) does not apply to text that is “part of an inactive user interface component”. However, if providing low-contrast styles for disabled buttons, the author encourages measures such as ensuring colour is not the only affordance, reducing opacity of the primary button colour when disabled rather than opting for grey, adding supporting text, and applying aria-disabled="true" to disabled buttons to support all screen readers.

I Don’t Care What Google or Apple or Whoever Did

  • Adrian Roselli complains that when he raises accessibility/usability issues with clients, their response is “but Google does this”. He then lists several poor UI changes the big companies have made and subsequently U-turned on, such as Google’s form fields without boxes, or Apple’s super thin typefaces in iOS. Heydon Pickering wrote a similar article in January. Both alluded to the fact that you wouldn’t want to replicate these companies’ designs anyway: why make your product look and feel like Google’s?

The Last of Us Part II: Accessibility features detailed

  • A comprehensive article on the PlayStation blog, detailing how The Last of Us Part II comes with three presets for different kinds of disabilities, but every setting can be individually overwritten. Gameplay alterations such as ‘invisible while prone’ allow gamers to enjoy stealth mode they might otherwise not be able to. Directional arrows accompanying subtitles show deaf gamers where the speech is coming from. Every command, including touchpad swipes and controller shake, can be remapped to different controller inputs.

Deaf fitness instructor calls for more accessibility in workout classes

  • India Morse (@youleanmeup) is a fitness instructor on Instagram. She was born deaf, and found that workout classes aren’t visual enough for the deaf community, and Instagram as a platform is lacking live-captions. So she launched Coaching by India; an online coaching app with captions and an interpreter voicing India’s signs, so that is accessible to everyone.

Legacy Applications and Accessibility

  • A blog post describing approaches to finding accessibility issues in legacy code; for example, scanning the codebase for positive tab index values (tabindex="1" etc). An interesting idea is an ‘accessibility JavaScript file’ that you can include on pages to help fix a11y issues without having to modify the legacy code. For example, var contButton = document.getElementById('continue'); if (contButton) { contButton.setAttribute('role', 'button'); // etc }.

Modesto Teen Who’s Legally Blind, Hearing Impaired Becomes Household Name In World Of Bowling

  • Jacob Gaddam is a sixteen year old who bowls like a champion – despite being legally blind and hearing impaired. Watch the video on YouTube (I had trouble getting any video content in the article itself).

My Accessibility-Tinged WWDC 2020 Wishlist

  • The Apple Worldwide Developers Conference is running from June 22-26 this year. Steven Aquino shares his hopes for what Apple will showcase, including the ability to zoom in on emoji; brightness slider for the Apple Watch display; and a Magic Keyboard with Touch Bar.

For Mothers Of Black Children With Disabilities, Living With Twice The Fear

  • Kim Kaiser voices the fears she has for her black, autistic 14 year old son. “When an African American person is disabled and can’t process a police command, [the result could be fatal]”. She’s taught her son to to keep his hands out of his pockets, to not carry anything that could be perceived as a weapon, and to put his hands up if approached by police. If questioned by police, he is to immediately inform them that he is on the autism spectrum. The sad reality is that his characteristics “automatically look suspicious to first responders”.

Volunteer scheme that tackles loneliness amongst young disabled people thrives online during pandemic

  • The Sense Buddying scheme matches volunteers and young people with disabilities to spend time together to help combat loneliness, something experienced by 77% of this demographic. Prior to the pandemic, matches did activities in local communities in East London, but now video-chat instead. One testimonial from Saihan Islam reads: “Maria is someone that I can talk to outside of my family which is really nice when I am feeling anxious. She is always really kind and helpful”. You can volunteer by emailing

The troubled state of screen readers in multilingual situations

  • Xurxe Toivo García shares their findings when testing different screen reader / browser / OS combinations with a simple English web page featuring a <span> with a different lang to the main page. All were inconsistent and none worked perfectly. On VoiceOver for desktop, paragraph text would be read with a Finnish voice (wrong) during continuous reading, and with an English voice (right) when using the keyboard to move the reading pointer. VoiceOver mobile ignored any language declarations.

How Web Accessibility Works

  • Segun Ola gives a brief but useful overview of how browsers generate an Accessibility Object Model (AOM) in addition to the DOM/CSSOM, and how this AOM interfaces between the browser and the assistive technology used by the user. He distinguishes between native primitives (e.g. checkbox) and more complicated widgets (such as autocomplete) which require ARIA markup.

How Eastenders’ Ben Mitchell is setting new standards for deaf representation

  • Eastenders‘ Ben Mitchell character was deaf in one ear but has now lost hearing in his other after a dramatic boating accident, and has to learn how to adapt. Interesting stats: 12 million people in the UK are deaf or live with hearing loss. Every day, 5 children are born deaf, and another 5 will become deaf by adulthood. Only 1 in 10 deaf children use sign language (most children considered ‘deaf’ do have access to some sound), and most attend a local school rather than a deaf school.

Inheritance Tax: The Real Cost of not Making Content Accessible

  • Simon Mellins, Ebook Technology Coordinator at Penguin, writes a condensed version of a talk he gave at the London Book Fair, where he described the accessibility case for creating good tags, metadata and logically structuring e-books. Here, he concentrates more on the legacy it leaves; the semantic richness that enables the curation and adoption of content into hitherto unknown reading systems. Simon argues that failing to add these features now is merely delaying the cost to a later date.
If overriding focus styles, use *:focus { outline: 3px solid transparent } to support Windows High Contrast Mode

Quick Tips for High Contrast Mode

  • Sarah Higley shares some tips for supporting Windows High Contrast Mode (WHCM). WHCM ignores ARIA roles/states/properties, so <a role="button"> will be styled as a link. Use svg { fill: currentColor } to have it match the color of the surrounding text. Beware that the -ms-high-contrast media query is being retired in favour of forced-colors, which is still experimental; current advice is to avoid using media queries at all.

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.