Fixes a number of unrelated accessibility issues in the site’s templates. Each commit is independent and could be reviewed separately – I chose to group all the fixes that seemed clear-cut to me to simplify QA, but am also happy to split them if you’d prefer.
Anything with aria-hidden="true" will be hidden for screen reader users, so this should only be used for completely decorative elements, and never on anything interactive.
The alt text that’s currently in use is pretty good, but for images of text in particular it’s always best if the alt text contains exactly the same content as the visuals.
We want to use alt="" or aria-hidden="true" whenever an image is pure decoration, so it doesn’t get announced for screen reader users / doesn’t show up when images fail to load. There are a lot of images on the site that could be considered to be decorative, I chose to apply this only for iconography where the decorative nature was particularly clear-cut.
A quick win for screen reader users. The main landmark allows them to move straight to this area of the page, or to skip it entirely and go to the footer when navigating sequentially.
Also a quick win for screen reader users. Due to the heading levels in use, this section previously appeared to be within whatever section was before on the page.
Description
Fixes a number of unrelated accessibility issues in the site’s templates. Each commit is independent and could be reviewed separately – I chose to group all the fixes that seemed clear-cut to me to simplify QA, but am also happy to split them if you’d prefer.
Remove inappropriate use of aria-hidden="true"
Anything with
aria-hidden="true"will be hidden for screen reader users, so this should only be used for completely decorative elements, and never on anything interactive.Update alt text for images of text to match the text more closely
The alt text that’s currently in use is pretty good, but for images of text in particular it’s always best if the alt text contains exactly the same content as the visuals.
Add unique labels for organizers social links
A quick fix so people using screen readers have an easier time telling which link is whose profile.
Make sure decorative icon images are marked as such for screen reader users
We want to use
alt=""oraria-hidden="true"whenever an image is pure decoration, so it doesn’t get announced for screen reader users / doesn’t show up when images fail to load. There are a lot of images on the site that could be considered to be decorative, I chose to apply this only for iconography where the decorative nature was particularly clear-cut.Add a main landmark on all pages
A quick win for screen reader users. The
mainlandmark allows them to move straight to this area of the page, or to skip it entirely and go to the footer when navigating sequentially.Avoid skipping a heading level for sponsors footer
Also a quick win for screen reader users. Due to the heading levels in use, this section previously appeared to be within whatever section was before on the page.
To test all of this, I would recommend: