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?
Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even 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.
An accessibility quality assurance tool geared towards content authors: Sa11y visually highlights common errors, with contextual information. Try out the demo.
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>.
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.
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 bighack.org comparing the best video conferencing software for accessibility, which found that some popular platforms such as Zoom do not provide live captioning.
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.
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.
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.
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.
Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even 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.
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.
Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even 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.
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 bighack.org comparing the best video conferencing software for accessibility, which found that some popular platforms such as Zoom do not provide live captioning.
Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even 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.
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.
Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even 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.
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>.
Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even 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.
An accessibility quality assurance tool geared towards content authors: Sa11y visually highlights common errors, with contextual information. Try out the demo.
Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even 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.
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!
Accessibility Works article warning against the installation of third-party overlays/widgets that promise to make your site accessible. These tools provide options for customising text size, providing magnifiers, and in some cases a built-in screen reader or alt-text generator. However, they cannot address the 70% of accessibility issues that can only be manually addressed – and they require the user to have to find and learn how to use a whole new accessibility tool.
Using a Chrome “Live Expression” to show the current focused element
Kayce Basques, technical writer at Google, shares a Chrome tip for developers/testers. By creating a “Live Expression” with the value document.activeElement, you can tab around the web page and always know where the focus state is, even if there aren’t any associated focus styles.
Brief but interesting article highlighting that one billion people in the world have preventable or treatable visual impairments; 300 million of these are cataracts, which accounts for 50% of blindness worldwide. A cataract is an opacity in the lens of the eye, often caused by ageing, and can be fixed with surgery: a small incision, fragmenting the lense, emitting ultrasound to aspirate the cataract.
Article by ABC News, highlighting the plight of the 40,000 deaf-blind Americans who rely on touch but have to maintain social distancing. They use hand-over-hand signing to communicate, and finger-scan braille public signs for mobility, now prone to contagion. The community uses computers and internet to try to counter isolation and loneliness. There are fears that states have considered putting people with disabilities at the back of the line for treatment.
Article (or video) by UI designer Koos Looijesteijn, describing ‘sidenotes’ that have been in print media for centuries, and the difficulty in representing them in HTML. His solution is a <span> containing a <label> that can be clicked to expand a corresponding <small> on mobile, or that highlights the text at the side on desktop. At publish time it required JS but now appears to have been refactored to be CSS-only, using clever checkbox logic. By the author’s admission, it’s ugly, and we should campaign for a native solution instead.
Adrian Roselli writes about this attribute that describes the role of an element. It overrides what is announced to the screen reader, e.g. <input type="text" aria-roledescription="Only numbers allowed"> will read as “Only numbers allowed” instead of “input type text”. This hides meaning and the control type – a confusing experience for the user. It also doesn’t translate. There’s an open issue about the global nature of this attribute. Don’t use it!
Å ime Vidas shares a helpful reminder that the <br> line break element is useful in some cases. Whilst web developers have generally moved away from <br> use – seeing line breaks as presentation, not content, and therefore using CSS instead – it should still be used when line breaks are part of the content. For example: poems or addresses.
GDS ran a conference on Thursday 21st May. Agenda: “An introduction to digital accessibility regulations”, “How to avoid common accessibility statement fails”, “How to carry out basic accessibility checks”, “Making accessibility accessible: the secret to engaging your workforce”, “What would Marie Kondo do? How to clear your website of inaccessible PDFs”. Stay tuned for how you can watch the talks back.
Dr Elizabeth Fernandez gives three reasons why AI is not the same as human thought. 1) they’re easy to fool: a neural network might correctly classify an image as a banana, but introduce a slight amount of noise and it might re-classify it as a toaster. 2) they need an enormous amount of data to learn: thousands of pictures, versus just a few for a toddler. 3) they’re “myopic”: powerful enough to correctly identify Kim Kardashian, yet seeing nothing wrong if her eye and lips swap places. I found this article via Marco Zehe’s blog, who references it to suggest that AI will never be able to write reliable alt text.
A post from 2018 that resurfaced recently and still has lots of great tips. GOV.UK uses the CSS triangle method to create a back link component whose triangle arrow icon renders even when the user has overridden their colours. The site logo was once a PNG, but under these conditions would disappear, so was replaced with inline SVG. Focus states and panels that ought to stand out would also get lost when colours are overridden, so a transparent border was added.
Lots of useful reminders. Something that conforms to WCAG 2.1 AA will also conform to WCAG 2.0 AA. Users should be able to override the following styles with no loss to content or functionality: line height (up to 1.5x font size); spacing following paragraphs (up to 2x font size); letter spacing (up to 0.12x font size); word spacing (up to 0.16x font size). JavaScript inside PDF forms that sets a timer must warn what data will be lost if not completed in time, and/or should allow time extensions.
Mozilla announces that by the end of June, Firefox should have basic support for MacOS VoiceOver. By the end of the year, the experience should be improved for visually impaired VoiceOver users, including live region support and rotor item support. The post goes into detail about what was achieved in each Firefox version from v75 onwards.
Adam Silver explains in detail how to build an accessible autocomplete component, taking into account the noJS experience, announcing results to screen readers, hiding suggestions ‘on blur’, keyboard support and endonym/typo support. It’s always surprising just how complicated autocompletes can be, and this is a really good example of one done right.
124 stations in Great Britain will gain new lifts, accessible toilets and/or improved customer information screens. A list of affected stations appears at the bottom of the page.
The USA is struggling to fill millions of jobs, but people with disabilities are often overlooked. 51-61% of HR professionals and managers have had no disability inclusion training, and 13-32% of managers say they’d feel uncomfortable working with colleagues with disabilities. However, 92% of managers (and 97% of HR professionals) who have employees who have a disability said those individuals perform the same or better than their peers.
A survey of 14.65 million active Brazilian websites found just 0.74% passed all accessibility tests. On this scale, it’s unclear how the sites were tested, though the article makes reference to checking images, links and validation fields. By the same criteria, this is still a 20% improvement on the previous survey from September 2019, in which 5.60% of sites failed all tests, compared to just 0.01% this year.
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.
GDS ran a conference on Thursday 21st May. Agenda: “An introduction to digital accessibility regulations”, “How to avoid common accessibility statement fails”, “How to carry out basic accessibility checks”, “Making accessibility accessible: the secret to engaging your workforce”, “What would Marie Kondo do? How to clear your website of inaccessible PDFs”. Stay tuned for how you can watch the talks back.
Dr Elizabeth Fernandez gives three reasons why AI is not the same as human thought. 1) they’re easy to fool: a neural network might correctly classify an image as a banana, but introduce a slight amount of noise and it might re-classify it as a toaster. 2) they need an enormous amount of data to learn: thousands of pictures, versus just a few for a toddler. 3) they’re “myopic”: powerful enough to correctly identify Kim Kardashian, yet seeing nothing wrong if her eye and lips swap places. I found this article via Marco Zehe’s blog, who references it to suggest that AI will never be able to write reliable alt text.
A post from 2018 that resurfaced recently and still has lots of great tips. GOV.UK uses the CSS triangle method to create a back link component whose triangle arrow icon renders even when the user has overridden their colours. The site logo was once a PNG, but under these conditions would disappear, so was replaced with inline SVG. Focus states and panels that ought to stand out would also get lost when colours are overridden, so a transparent border was added.
Lots of useful reminders. Something that conforms to WCAG 2.1 AA will also conform to WCAG 2.0 AA. Users should be able to override the following styles with no loss to content or functionality: line height (up to 1.5x font size); spacing following paragraphs (up to 2x font size); letter spacing (up to 0.12x font size); word spacing (up to 0.16x font size). JavaScript inside PDF forms that sets a timer must warn what data will be lost if not completed in time, and/or should allow time extensions.
Mozilla announces that by the end of June, Firefox should have basic support for MacOS VoiceOver. By the end of the year, the experience should be improved for visually impaired VoiceOver users, including live region support and rotor item support. The post goes into detail about what was achieved in each Firefox version from v75 onwards.
Adam Silver explains in detail how to build an accessible autocomplete component, taking into account the noJS experience, announcing results to screen readers, hiding suggestions ‘on blur’, keyboard support and endonym/typo support. It’s always surprising just how complicated autocompletes can be, and this is a really good example of one done right.
124 stations in Great Britain will gain new lifts, accessible toilets and/or improved customer information screens. A list of affected stations appears at the bottom of the page.
The USA is struggling to fill millions of jobs, but people with disabilities are often overlooked. 51-61% of HR professionals and managers have had no disability inclusion training, and 13-32% of managers say they’d feel uncomfortable working with colleagues with disabilities. However, 92% of managers (and 97% of HR professionals) who have employees who have a disability said those individuals perform the same or better than their peers.
A survey of 14.65 million active Brazilian websites found just 0.74% passed all accessibility tests. On this scale, it’s unclear how the sites were tested, though the article makes reference to checking images, links and validation fields. By the same criteria, this is still a 20% improvement on the previous survey from September 2019, in which 5.60% of sites failed all tests, compared to just 0.01% this year.
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.
