Improve website accessibility

up-for-grabs / up-for-grabs.net

This is a list of projects which have curated tasks specifically for new contributors. These issues are a great way to get started with a project, or to help share the load of working on open source projects. Jump in!

https://up-for-grabs.net/

Other

5.42k stars 2.08k forks source link

Improve website accessibility #912

Open ghost opened 6 years ago

ghost commented 6 years ago

I have spotted some possible improvements that would help make up-for-grabs.net more accessible to all users. Some possible changes that I suggest would be:

[ ] Include labels for inputs (helps with screen reader accessibility even if visibly hidden)
[ ] Add ARIA attributes such as "roles" and "describedby"
[ ] Improve keyboard navigation (I suggest that tabbing moves between project titles and skips project tags & "up-for-grabs" label)
[ ] Improve semantic HTML use by, for example, fixing nonconsecutive heading level use (many h1 tags) without altering visual presentation of course
[ ] Improve overall screen reader experience (humanise descriptions to avoid, for example, “Select a tag ellipsis edit text”)

I would be more than happy to take this on and make further improvements if you have other suggestions!

dahlbyk commented 6 years ago

Ghost is gone, but any of these seem like good ideas. I do wonder about keyboard navigation; what if we used vim-style j/k to move up and down through the list?

allieholcombe commented 6 years ago

I would be interested in pursuing this a11y update.

lbeckman314 commented 6 years ago

I opened pull request #994 that hopefully ticks two of the above boxes.

[x] Include labels for inputs (helps with screen reader accessibility even if visibly hidden)
[ ] Add ARIA attributes such as "roles" and "describedby"
[x] Improve keyboard navigation (I suggest that tabbing moves between project titles and skips project tags & "up-for-grabs" label)
[ ] Improve semantic HTML use by, for example, fixing nonconsecutive heading level use (many h1 tags) without altering visual presentation of course
[ ] Improve overall screen reader experience (humanise descriptions to avoid, for example, “Select a tag ellipsis edit text”)

I'm still very new to github issues, so if @alexandraholcombe or @dahlbyk have advice for these and other improvements, I'd be very open to them! : )

allieholcombe commented 6 years ago

Update: I've been working on the semantic HTML use, ended up consulting some a11y experts at my company in regards to some options. PR is forthcoming, probably next day or two.