search

winnipegpolicecauseharm / wpch-ghost-theme

MIT License
3 stars 0 forks source link

Fixes several (but not all) accessibility issues #78

Open proximadams opened 1 year ago

proximadams commented 1 year ago

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/.

image

Solution

Added aria-labels to links and alt text to images.

Pre-conditions for merge

Out of scope

backspace commented 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.

proximadams commented 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.

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."