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

Building The Most Inaccessible Site Possible

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.