search

F4IF / ctree-demo

Collaboration Tree - A community discussion platform built for maximum insight with minimum oversight.
http://demo.ctree.org
Other
37 stars 22 forks source link

Landing page accessibility #118

Closed judithhinlung closed 5 years ago

judithhinlung commented 5 years ago

Added aria-labels to make the Show Search, Show Account Dialog, Show Account Statts, and Show notifications buttons accessible to screen readers.

judithhinlung commented 5 years ago

Not sure why, but aria-labels and aria-labelledby attributes don't seem to be compatible with the attributes, my screen reader was unable to detect them but had no problem locating it when it was labeled with the HTML label element. However, I think whenever possible, it is better to label icons and image buttons with aria-labels, because they allow screen readers to read the label's when the cursor is directly on the element. Because HTML labels are always found next to the element, screen reader users have to toggle back and forth to try and match labels with their elements before being able to make a selection.

CSchmitz81 commented 5 years ago

FYI, I haven't forgotten about this, but I've been having trouble getting audio to work on my computer so I haven't been able to verify the functionality. My current concern is that a separate label tag is used for menu, but all other paper-icon-button tags have the aria-label attribute added to them. I was wondering if they were handled differently in this code because behaved differently, which could have to do with focus (I can't see any other reason why they'd behave differently). If you're at the hackathon this Saturday we can check this out to see if we can standardize it so all tags are implemented the same way.

judithhinlung commented 5 years ago

Yes, I agree and would like to standardize the labeling and use all aria-labels too. I'll also keep looking into it and let you know if I learn anything on Saturday!