Open proximadams opened 1 year ago
Thanks for getting started on this, it’s definitely been neglected. I’ll look at it more thoroughly in the next while (this week is a tragic nightmare) but thoughts on using role="presentation"
in some places vs alt text? I think some of these images really are presentational and should be skipped by screen readers.
And the CI problems are definitely nothing you did, it needs updating.
Thanks for getting started on this, it’s definitely been neglected. I’ll look at it more thoroughly in the next while (this week is a tragic nightmare) but thoughts on using
role="presentation"
in some places vs alt text? I think some of these images really are presentational and should be skipped by screen readers.And the CI problems are definitely nothing you did, it needs updating.
You're welcome :D
I like the idea of utilizing role="presentation"
for the social media <img>
elements since this is pretty redundant
https://github.com/winnipegpolicecauseharm/wpch-ghost-theme/blob/bfd4be7c5af8a17d7ec19f0cfaa79a0ad02b98a5/partials/footer.hbs#L5
Screen readers would read out something along the lines of:
"W P G police harm Facebook page."
"Facebook logo."
Problem being solved
Blind users/users who rely on a screen reader are unable to interpret large portions of our website.
This was discovered by using the axe DevTools chrome extension which automatically finds accessibility gaps in websites (generally just low-hanging fruit). This was run on the home page https://winnipegpolicecauseharm.org/.
Solution
Added aria-labels to links and alt text to images.
Pre-conditions for merge
Out of scope
<img>
elements that don't havealt
however I'm not sure if this page is even a part of the app 🤔. Example: https://github.com/winnipegpolicecauseharm/wpch-ghost-theme/blob/90cdf9647d9c0f1e618a99caef571f4089d92c74/page-get-involved.hbs#L76-L77