I came across the above post on LinkedIn about a year ago; a video of a man called Lincoln, who has cerebral palsy, putting on a shirt unaided. The shirt looks like a standard button shirt, but uses magnets for fastening. The typically viral LinkedIn post was lacking in detail, so I did some Googling, and found the company that creates these shirts.
US-based MagnaReady was started by Maura Horton when her husband Don developed Parkinson’s Disease. When he started having difficulty fastening his shirt in 2009, Maura had the idea about using magnets, and eventually started the company. Watch the video (~5m) for the full story.
Sadly, Don passed away in 2016, but the company remains active and has a range of casual, athletic and sleepwear clothing for men and women.
“The number of job listings with ‘accessibility’ in the title grew 78% in the year ending in July [2021] from the previous 12 months”. That’s on top of the 38% increase from the previous year. By 2027, the global accessibility testing market is poised to hit $606 million. Demand for accessibility professionals has never been higher.
But there’s relatively low take-up amongst newcomers to the industry. “WebAIM’s 2021 Survey of Web Accessibility Practitioners had a significantly higher level of respondents that were over the age of 45 (37.3%) than did the 2020 Stack Overflow survey of web professionals as a whole (8.9%).” The article suggests that the industry may reach chronic shortages when these individuals retire.
The article blames a lack of mandatory accessibility teaching in higher education, and calls for companies to pay accessibility professionals higher salaries to attract more people into this part of the industry.
I came across this article via a LinkedIn post by Gareth Ford Williams, which also summarises the article quite nicely.
This article looks at how over a million people use their phones in the Netherlands. 43% of users surveyed use at least one accessibility setting, the most common one being “adjust text size” (33%). Interestingly, of that 33%, 13% made the text smaller (meaning 20% made the text larger).
Only 1.27% of respondents have closed captions switched on by default, but as Gareth points out, this is likely because they’re more comfortable setting this feature on the app or website level. The figure is closer to 80% when looking at Netflix, Facebook and Twitter.
There are a whole host of other statistics about all sorts of accessibility features throughout, and reference to why such features might be enabled. This can include situational impairments (disabling “shake to undo” while on a rattling bus or train), educational (non-native speakers enabling captions while learning a new language), etc, as well as disabilities.
2021’s sample size of >1 million respondents is in stark contrast to the original study in 2020, which had just 268. The end of the article goes into detail about how it managed to achieve such high numbers this time around.
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.
I came across this article via a LinkedIn post by Gareth Ford Williams, which also summarises the article quite nicely.
This article looks at how over a million people use their phones in the Netherlands. 43% of users surveyed use at least one accessibility setting, the most common one being “adjust text size” (33%). Interestingly, of that 33%, 13% made the text smaller (meaning 20% made the text larger).
Only 1.27% of respondents have closed captions switched on by default, but as Gareth points out, this is likely because they’re more comfortable setting this feature on the app or website level. The figure is closer to 80% when looking at Netflix, Facebook and Twitter.
There are a whole host of other statistics about all sorts of accessibility features throughout, and reference to why such features might be enabled. This can include situational impairments (disabling “shake to undo” while on a rattling bus or train), educational (non-native speakers enabling captions while learning a new language), etc, as well as disabilities.
2021’s sample size of >1 million respondents is in stark contrast to the original study in 2020, which had just 268. The end of the article goes into detail about how it managed to achieve such high numbers this time around.
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.
“The number of job listings with ‘accessibility’ in the title grew 78% in the year ending in July [2021] from the previous 12 months”. That’s on top of the 38% increase from the previous year. By 2027, the global accessibility testing market is poised to hit $606 million. Demand for accessibility professionals has never been higher.
But there’s relatively low take-up amongst newcomers to the industry. “WebAIM’s 2021 Survey of Web Accessibility Practitioners had a significantly higher level of respondents that were over the age of 45 (37.3%) than did the 2020 Stack Overflow survey of web professionals as a whole (8.9%).” The article suggests that the industry may reach chronic shortages when these individuals retire.
The article blames a lack of mandatory accessibility teaching in higher education, and calls for companies to pay accessibility professionals higher salaries to attract more people into this part of the industry.
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.
I came across the above post on LinkedIn about a year ago; a video of a man called Lincoln, who has cerebral palsy, putting on a shirt unaided. The shirt looks like a standard button shirt, but uses magnets for fastening. The typically viral LinkedIn post was lacking in detail, so I did some Googling, and found the company that creates these shirts.
US-based MagnaReady was started by Maura Horton when her husband Don developed Parkinson’s Disease. When he started having difficulty fastening his shirt in 2009, Maura had the idea about using magnets, and eventually started the company. Watch the video (~5m) for the full story.
Sadly, Don passed away in 2016, but the company remains active and has a range of casual, athletic and sleepwear clothing for men and women.
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.
A UX Collective article outlining predicted trends for 2022:
The web will become more accessible – particularly the websites of larger companies.
The SOAR report found that 62% of the Alexa 100 websites were accessible to screen readers, up from 40% in 2020.
The WebAIM Million project found a very slight improvement in the accessibility of homepages across the web (from 2020 to 2021), but it will take until “the 2070s or 2080s” at this rate for the entire web to be accessible.
Digital accessibility lawsuits will continue to increase
More than 4000 accessibility lawsuits (based on the Americans with Disabilities Act) were filed in the USA in 2021.
The Hooters case found that companies can be sued even if they already have remediation efforts underway and if they’ve already entered into a settlement agreement with another party.
We’ll see less usage of accessibility overlays
Over 200 overlay customers were sued in 2021 for lack of accessibility on their website.
There could well be counterclaims against overlay companies from these customers.
One overlay company, AudioEye, had a stock value of $42 in February 2021, but recently fell to less than $7.
WCAG 2.2 will be the new standard most companies use to determine accessibility
The standard is expected to be finalised by the end of March 2022. WCAG 2.1 took just 4 months from being finalised to being referenced in its first settlement agreement; WCAG 2.2 is likely to follow a similar trend.
Unless you’ve been living under a rock in 2022, you’ll no doubt have come across Wordle, the viral word guessing game that has people sharing their results in a grid on social media, like so:
I’m not just sharing this one because I got a fantastic score…
The resulting grid of coloured squares represents how many letters of each guess was correct, and ultimately how many guesses were needed before the correct word was arrived at. But it’s something of an accessibility nightmare for screen reader users.
Federico Viticci has attempted to fix the issue, by building WordleBot. This is a shortcut for iOS and macOS which edits the text in your clipboard to have a more accessible output, like so:
Wordle 207 5/6
⬜🟨🟨⬜⬜ (2 partial) 🟨🟨⬜⬜⬜ (2 partial) ⬜🟩🟨🟩⬜ (1 partial, 2 perfect) ⬜🟩⬜🟩🟩 (3 perfect) 🟩🟩🟩🟩🟩 (Wordle done on Line 5)— Federico Viticci (@viticci) January 12, 2022
It’s a nice idea, and a valiant effort by Federico, but is a manual workaround that only works for Apple customers. I’d like to see somebody build a Twitter bot that automatically responds to inaccessible Wordle tweets and provides alt text responses – or better yet, the creator of Wordle could change the share text directly.
(Accessibility Myths, shared by Smashing Magazine)
Sergei Kriger debunks 22 myths about accessibility on the web, such as accessibility only being for blind users. I’ve not heard of all of these myths, so some items were added just in keeping with the format, I think, but it’s worth a quick read nonetheless, and as prompted at the end of the page, you’re encouraged to “show this website to your manager”.
Also see its sister website, a11yfacts.com, for a list of statistics on disabilities (e.g. 15% of the world’s population has a disability) and how certain demographics use the web (e.g. 67.7% of screen reader users use headings for navigating).
Thought-provoking article by Ben Bayliss, describing how game demos were a great vehicle for testing a game’s accessibility before purchasing the game. Demos used to come on a disc bundled with PlayStation Official Magazine (and others), but in the digital era are increasingly hard to find.
Without demos, disabled gamers are forced to watch YouTube videos of other people reviewing the games, to figure out whether or not it will be accessible to them. “Major game outlets rarely touch on accessibility in our reviews or editorials that go live around launch”.
“Some studios such as SMG Studio and Team 17 released videos showing accessibility features available at launch. This is vital information to be sharing, but there’s a huge difference between a blog post or a short clip on accessibility features and how these actually feel in play. And that goes for both accessibility and the game as a whole in general.”
In this 35m video from Smashing Meets (December 2021), Manuel Matuzović starts off with a simple HTML site that is considered 100% accessible by Lighthouse. He then deliberately breaks its accessibility as much as possible, without Lighthouse noticing. He calls this process “Progressive Degradation”.
He wraps all content in a <div aria-hidden="true">, which lowers the score because the wrapped content contained focusable descendents. Manuel then made these non-focussable (swapping the input button for a <div>, and changing the href of a link to an onclick). This then raised the accessibility score back to 100%.
It was quite fun seeing how Manuel disables keyboard zoom shortcuts (by adding a listener to the onkeydown event). He also overrides the cursor with a custom image that is offset 100 pixels from the actual click area, making it very difficult to click accurately! Manuel finishes by applying a filter to the text so that it is visually faded out (having already set himself the goal of not using display: none, visibility: hidden or opacity: 0, which would be too easy). As a bonus, he translates all text to HTML entities, so that people can’t even ‘view source’ to read the content.
The aim of the talk is not to make fun of Lighthouse, but to point out that automated accessibility testing can only be used as a guide. It is not a reliable summary of how accessible your site actually is. Indeed, Manuel runs his website through a few more automated tools at the end of the talk, none of which detects all of the issues that he’s introduced.
This applies focus styles to all standard interactable elements, and provides hooks for you to customise parts of the outline style where needed, e.g.
summary {
--outline-color: lightskyblue;
}
Some designers like to only apply focus styles when an interactable element is tabbed to via keyboard (as opposed to clicked on with a mouse). Stephanie explains how to use the :focus-visible selector to achieve this. The :focus rule above can be swapped± for :focus-visible, and then an outline: none applied when the focussed element is not:focus-visible.
± whilst browser support for the :focus-visible selector is still gaining traction, Stephanie advises not replacing the :focus rule, but duplicating it instead. Browsers throw out selectors they don’t understand, so we can’t simply join the selectors with a comma (i.e. :is(...), :is(...):focus-visible {}). By maintaining both a :focus and a :focus-visible block, we ensure that browsers that don’t support :focus-visible – but do support CSS custom properties – have visible focus styles. At time of writing, those browsers are Safari and ‘UC Browser for Android’.
The Web Almanac is “HTTP Archive’s annual state of the web report”, which started in 2019. It is split into 24 chapters concerning all sorts of topics, such as security, CDNs, SEO, Jamstack, and Ecommerce. We’re going to concentrate on chapter 9 – Accessibility – which in itself is a long read.
Depressing statistics:
Just 22% of sites have sufficient colour contrast; roughly unchanged from 2019 and 2020.
24% of desktop homepages, and 29% of mobile homepages, disable user zooming/scaling. This includes many of the top 1,000 sites globally.
Around 69% of font sizes are set with px, as opposed to more scalable/accessible alternatives such as em.
There’s a mixture of usage of HTML5 elements. Just 28% of sites have a <main> element, but around 62% have <header> and <nav> elements.
Surprisingly, more than half of sites make use of tabindex attributes.
Just 58% of sites have properly ordered headings, i.e. no levels skipped.
We’re generally poor at creating accessible tables. Just 5% of sites which make use of tables provide a corresponding <caption> element.
Almost a third of form inputs have no accessible name (i.e. no label). Around 58% of sites use a placeholder attribute, which is not very accessible to assistive technologies, and of these sites, nearly 65% had no label, implying that the placeholder is being improperly used as a label.
Videos were found on 5% of sites. Of these, a corresponding <track> element – designed to have the same benefits as alt text for images – was found on less than 1% of videos. That said, “this figure may not account for video content loaded by a third party <iframe>, such as an embedded YouTube video”.
Positive statistics:
80.5% of sites have a lang attribute, with 99.7% of these being valid values.
Surprisingly, almost 32% of sites use the prefers-reduced-motion media query; a relatively recent CSS addition.
Less than 1% of pages make use of an accessibility overlay.
Interesting tidbits:
91% of desktop pages have :focus { outline: 0; } declared. “In some cases, it is removed so that a more effective custom style can be applied. In many cases it is simply removed and never replaced, which can render a page unusable for keyboard users”. The almanac doesn’t dig deeper on numbers though.
Around 20% of sites are estimated to have a skip link (there’s no reliable automated test for this).
18-19% of pages contain at least one anchor element with role="button". “A native <button> element would be a better choice, per the first rule of ARIA.”
The most popular ARIA attribute is aria-hidden (used by 53% of sites), followed by aria-label (52%).
14.3% of pages have the class sr-only or visually-hidden on some elements, implying that they are providing text that is only visible to screen reader users.
The chapter concludes:
As an industry it is time that we acknowledge the story told by the numbers in this chapter; we are failing people with disabilities. The numbers from 2021 have not moved substantially from 2020. We need to do better, and this has to come from a combination of top-down leadership and investment (including the ongoing participation from browsers) and bottom-up effort to push our practices forward and advocate for the needs, safety and inclusion of people with disabilities using the web.
An article from July 2020 that’s been in my bookmarks for… well, you do the math.
A group of students from Harvard University have launched a startup called Foresight, a “wearable navigation aid for people with vision impairments”. It connects to the user’s camera, worn in a placeholder around the neck, which detects nearby objects and triggers tacticle ‘soft textile units’ on the body. These ‘inflate’ to provide haptic feedback as objects approach and pass, with the pressure increasing as objects get closer.
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.
In this 35m video from Smashing Meets (December 2021), Manuel Matuzović starts off with a simple HTML site that is considered 100% accessible by Lighthouse. He then deliberately breaks its accessibility as much as possible, without Lighthouse noticing. He calls this process “Progressive Degradation”.
He wraps all content in a <div aria-hidden="true">, which lowers the score because the wrapped content contained focusable descendents. Manuel then made these non-focussable (swapping the input button for a <div>, and changing the href of a link to an onclick). This then raised the accessibility score back to 100%.
It was quite fun seeing how Manuel disables keyboard zoom shortcuts (by adding a listener to the onkeydown event). He also overrides the cursor with a custom image that is offset 100 pixels from the actual click area, making it very difficult to click accurately! Manuel finishes by applying a filter to the text so that it is visually faded out (having already set himself the goal of not using display: none, visibility: hidden or opacity: 0, which would be too easy). As a bonus, he translates all text to HTML entities, so that people can’t even ‘view source’ to read the content.
The aim of the talk is not to make fun of Lighthouse, but to point out that automated accessibility testing can only be used as a guide. It is not a reliable summary of how accessible your site actually is. Indeed, Manuel runs his website through a few more automated tools at the end of the talk, none of which detects all of the issues that he’s introduced.
This applies focus styles to all standard interactable elements, and provides hooks for you to customise parts of the outline style where needed, e.g.
summary {
--outline-color: lightskyblue;
}
Some designers like to only apply focus styles when an interactable element is tabbed to via keyboard (as opposed to clicked on with a mouse). Stephanie explains how to use the :focus-visible selector to achieve this. The :focus rule above can be swapped± for :focus-visible, and then an outline: none applied when the focussed element is not:focus-visible.
± whilst browser support for the :focus-visible selector is still gaining traction, Stephanie advises not replacing the :focus rule, but duplicating it instead. Browsers throw out selectors they don’t understand, so we can’t simply join the selectors with a comma (i.e. :is(...), :is(...):focus-visible {}). By maintaining both a :focus and a :focus-visible block, we ensure that browsers that don’t support :focus-visible – but do support CSS custom properties – have visible focus styles. At time of writing, those browsers are Safari and ‘UC Browser for Android’.
The Web Almanac is “HTTP Archive’s annual state of the web report”, which started in 2019. It is split into 24 chapters concerning all sorts of topics, such as security, CDNs, SEO, Jamstack, and Ecommerce. We’re going to concentrate on chapter 9 – Accessibility – which in itself is a long read.
Depressing statistics:
Just 22% of sites have sufficient colour contrast; roughly unchanged from 2019 and 2020.
24% of desktop homepages, and 29% of mobile homepages, disable user zooming/scaling. This includes many of the top 1,000 sites globally.
Around 69% of font sizes are set with px, as opposed to more scalable/accessible alternatives such as em.
There’s a mixture of usage of HTML5 elements. Just 28% of sites have a <main> element, but around 62% have <header> and <nav> elements.
Surprisingly, more than half of sites make use of tabindex attributes.
Just 58% of sites have properly ordered headings, i.e. no levels skipped.
We’re generally poor at creating accessible tables. Just 5% of sites which make use of tables provide a corresponding <caption> element.
Almost a third of form inputs have no accessible name (i.e. no label). Around 58% of sites use a placeholder attribute, which is not very accessible to assistive technologies, and of these sites, nearly 65% had no label, implying that the placeholder is being improperly used as a label.
Videos were found on 5% of sites. Of these, a corresponding <track> element – designed to have the same benefits as alt text for images – was found on less than 1% of videos. That said, “this figure may not account for video content loaded by a third party <iframe>, such as an embedded YouTube video”.
Positive statistics:
80.5% of sites have a lang attribute, with 99.7% of these being valid values.
Surprisingly, almost 32% of sites use the prefers-reduced-motion media query; a relatively recent CSS addition.
Less than 1% of pages make use of an accessibility overlay.
Interesting tidbits:
91% of desktop pages have :focus { outline: 0; } declared. “In some cases, it is removed so that a more effective custom style can be applied. In many cases it is simply removed and never replaced, which can render a page unusable for keyboard users”. The almanac doesn’t dig deeper on numbers though.
Around 20% of sites are estimated to have a skip link (there’s no reliable automated test for this).
18-19% of pages contain at least one anchor element with role="button". “A native <button> element would be a better choice, per the first rule of ARIA.”
The most popular ARIA attribute is aria-hidden (used by 53% of sites), followed by aria-label (52%).
14.3% of pages have the class sr-only or visually-hidden on some elements, implying that they are providing text that is only visible to screen reader users.
The chapter concludes:
As an industry it is time that we acknowledge the story told by the numbers in this chapter; we are failing people with disabilities. The numbers from 2021 have not moved substantially from 2020. We need to do better, and this has to come from a combination of top-down leadership and investment (including the ongoing participation from browsers) and bottom-up effort to push our practices forward and advocate for the needs, safety and inclusion of people with disabilities using the web.
An article from July 2020 that’s been in my bookmarks for… well, you do the math.
A group of students from Harvard University have launched a startup called Foresight, a “wearable navigation aid for people with vision impairments”. It connects to the user’s camera, worn in a placeholder around the neck, which detects nearby objects and triggers tacticle ‘soft textile units’ on the body. These ‘inflate’ to provide haptic feedback as objects approach and pass, with the pressure increasing as objects get closer.
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.
An article from July 2020 that’s been in my bookmarks for… well, you do the math.
A group of students from Harvard University have launched a startup called Foresight, a “wearable navigation aid for people with vision impairments”. It connects to the user’s camera, worn in a placeholder around the neck, which detects nearby objects and triggers tacticle ‘soft textile units’ on the body. These ‘inflate’ to provide haptic feedback as objects approach and pass, with the pressure increasing as objects get closer.
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.
The Web Almanac is “HTTP Archive’s annual state of the web report”, which started in 2019. It is split into 24 chapters concerning all sorts of topics, such as security, CDNs, SEO, Jamstack, and Ecommerce. We’re going to concentrate on chapter 9 – Accessibility – which in itself is a long read.
Depressing statistics:
Just 22% of sites have sufficient colour contrast; roughly unchanged from 2019 and 2020.
24% of desktop homepages, and 29% of mobile homepages, disable user zooming/scaling. This includes many of the top 1,000 sites globally.
Around 69% of font sizes are set with px, as opposed to more scalable/accessible alternatives such as em.
There’s a mixture of usage of HTML5 elements. Just 28% of sites have a <main> element, but around 62% have <header> and <nav> elements.
Surprisingly, more than half of sites make use of tabindex attributes.
Just 58% of sites have properly ordered headings, i.e. no levels skipped.
We’re generally poor at creating accessible tables. Just 5% of sites which make use of tables provide a corresponding <caption> element.
Almost a third of form inputs have no accessible name (i.e. no label). Around 58% of sites use a placeholder attribute, which is not very accessible to assistive technologies, and of these sites, nearly 65% had no label, implying that the placeholder is being improperly used as a label.
Videos were found on 5% of sites. Of these, a corresponding <track> element – designed to have the same benefits as alt text for images – was found on less than 1% of videos. That said, “this figure may not account for video content loaded by a third party <iframe>, such as an embedded YouTube video”.
Positive statistics:
80.5% of sites have a lang attribute, with 99.7% of these being valid values.
Surprisingly, almost 32% of sites use the prefers-reduced-motion media query; a relatively recent CSS addition.
Less than 1% of pages make use of an accessibility overlay.
Interesting tidbits:
91% of desktop pages have :focus { outline: 0; } declared. “In some cases, it is removed so that a more effective custom style can be applied. In many cases it is simply removed and never replaced, which can render a page unusable for keyboard users”. The almanac doesn’t dig deeper on numbers though.
Around 20% of sites are estimated to have a skip link (there’s no reliable automated test for this).
18-19% of pages contain at least one anchor element with role="button". “A native <button> element would be a better choice, per the first rule of ARIA.”
The most popular ARIA attribute is aria-hidden (used by 53% of sites), followed by aria-label (52%).
14.3% of pages have the class sr-only or visually-hidden on some elements, implying that they are providing text that is only visible to screen reader users.
The chapter concludes:
As an industry it is time that we acknowledge the story told by the numbers in this chapter; we are failing people with disabilities. The numbers from 2021 have not moved substantially from 2020. We need to do better, and this has to come from a combination of top-down leadership and investment (including the ongoing participation from browsers) and bottom-up effort to push our practices forward and advocate for the needs, safety and inclusion of people with disabilities using the web.
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.
This applies focus styles to all standard interactable elements, and provides hooks for you to customise parts of the outline style where needed, e.g.
summary {
--outline-color: lightskyblue;
}
Some designers like to only apply focus styles when an interactable element is tabbed to via keyboard (as opposed to clicked on with a mouse). Stephanie explains how to use the :focus-visible selector to achieve this. The :focus rule above can be swapped± for :focus-visible, and then an outline: none applied when the focussed element is not:focus-visible.
± whilst browser support for the :focus-visible selector is still gaining traction, Stephanie advises not replacing the :focus rule, but duplicating it instead. Browsers throw out selectors they don’t understand, so we can’t simply join the selectors with a comma (i.e. :is(...), :is(...):focus-visible {}). By maintaining both a :focus and a :focus-visible block, we ensure that browsers that don’t support :focus-visible – but do support CSS custom properties – have visible focus styles. At time of writing, those browsers are Safari and ‘UC Browser for Android’.
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 35m video from Smashing Meets (December 2021), Manuel Matuzović starts off with a simple HTML site that is considered 100% accessible by Lighthouse. He then deliberately breaks its accessibility as much as possible, without Lighthouse noticing. He calls this process “Progressive Degradation”.
He wraps all content in a <div aria-hidden="true">, which lowers the score because the wrapped content contained focusable descendents. Manuel then made these non-focussable (swapping the input button for a <div>, and changing the href of a link to an onclick). This then raised the accessibility score back to 100%.
It was quite fun seeing how Manuel disables keyboard zoom shortcuts (by adding a listener to the onkeydown event). He also overrides the cursor with a custom image that is offset 100 pixels from the actual click area, making it very difficult to click accurately! Manuel finishes by applying a filter to the text so that it is visually faded out (having already set himself the goal of not using display: none, visibility: hidden or opacity: 0, which would be too easy). As a bonus, he translates all text to HTML entities, so that people can’t even ‘view source’ to read the content.
The aim of the talk is not to make fun of Lighthouse, but to point out that automated accessibility testing can only be used as a guide. It is not a reliable summary of how accessible your site actually is. Indeed, Manuel runs his website through a few more automated tools at the end of the talk, none of which detects all of the issues that he’s introduced.
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.
