I am limiting accessibility feedback to the hamburger navigation, though the site is full of accessibility issues and barriers (you can test with just your Tab key to start). The hamburger, however, is a critical failure that blocks the greatest set of users from accessing any of the content on the site while also demonstrating a broad swath of WCAG failures coupled with a technically straightforward fix.
The control that shows and hides the navigation when zoomed or in a mobile browser is inaccessible.
The hover style for the hamburger (the close button has no hover style) cannot be used as the focus style since it has a 2.2:1 contrast ratio with the adjacent border,
The SVG in both buttons lacks an image alternative, or should be hidden completely from screen readers if no alternative is appropriate (the latter applies in this case),
For more details on disclosure widgets, including how they work, how to code them, how they are exposed in screen readers, and so on, I have a tutorial: Disclosure Widgets.
I recommend you use this pattern for the language selectors as well, since right now they are completely inaccessible because they use <div>s with click handlers instead of native <button> elements.
I am limiting accessibility feedback to the hamburger navigation, though the site is full of accessibility issues and barriers (you can test with just your
Tab
key to start). The hamburger, however, is a critical failure that blocks the greatest set of users from accessing any of the content on the site while also demonstrating a broad swath of WCAG failures coupled with a technically straightforward fix.The control that shows and hides the navigation when zoomed or in a mobile browser is inaccessible.
Tab
presses or mobile swipes to get to the hamburger,<span>
),The relevant code today:
The easiest way to address this:
display: none;
until expanded;Your HTML and CSS then might look like this:
For more details on disclosure widgets, including how they work, how to code them, how they are exposed in screen readers, and so on, I have a tutorial: Disclosure Widgets.
I recommend you use this pattern for the language selectors as well, since right now they are completely inaccessible because they use
<div>
s with click handlers instead of native<button>
elements.