Not a cybersecurity post
We are not here to talk about SQL injections, DDoS attacks, or man-in-the-middle attacks. We're talking about a11y and screen readers tonight. So...
A11y
Accessibility, or a11y, is how useable your site is to everyone on the internet. I decided for my first session of finding errors, I would tear apart the HAXcms website, and a Hello World, super basic, created in five minutes, website I made with the editor. I found four errors total using the Lighthouse Chrome plugin, WAVE, and tab order.
Lighthouse issue
I started with lighthouse on my Hello World page. The main issue in a11y is with the buttons on the page. HAX uses Web components to display the button images, but the button tags themselves do not have any information. This becomes an issue for screen readers, as pointed out by Lighthouse, because they will only read the button tags as buttons. Simple solution, add a descriptor or name to the button tags. Something that the screen reader will pick up on.
WAVE issues
WAVE was a tricky application to work with HAX. Most of the time, it would not render the main content of the page, or just not load the entire page. No idea how to fix that, I just think WAVE hates HAX.
The other issue is fixable. WAVE gave a warning that page regions are not defined in the code. Visually, they are, but screen readers cannot tell where the main content begins in the page. Simple enough solution here as well (I say that like I know anything about the backend), a few main, header, nav, any tags that show what content is where, would help screen readers find the important content.
Tab order
This is the issue that really got me confused. HAX pages load all sub-menu links in the side bar when the site loads. While this is great for performance, as they do not need to be created when the drop down is selected, it presented an interesting issue for screen readers and tab order. The selection (which is easier to see in the video below) cycles through all of the hidden sub-menus before going down to the next main menu item. There are a variety of way to hide items from tab order indexes, but it is all dependent on the backend engine. There is a simpler way using HTML5, a tabindex=-1 in a HTML tag, but it will not work on older browsers, which is an a11y issue.
In conclusion, let me break things.
Github issue links
Lighthouse buttons
WAVE page regions
Tab order
WAVE render issues
Video
Top comments (0)