Tech 142 add accessibility analysis#135
Conversation
Fix a prettier lint error There are still a11y issues to fix though
…nt command, only do so for lint:fix
…nt command, only do so for lint:fix
… close to original as possible
travisfriesen
left a comment
travisfriesen
left a comment
There was a problem hiding this comment.
When testing with Voiceover on MacOS, the only place that I see missing a prompt is the footer social link icons. Those should be added before this gets merged.
Fix navbar so it doesn't unnecessarily tab into nav options when navbar is closed, but enable tabbing when navbar is opened Fix calendar so that the months are read fully even when text is shortened. Ex: Apr would be read as April.
…er announcement for nav bar button Make the next tab go to the modal when the modal is opened for calendar's pop up modal Prevent tab from exiting the modal just by tabbing continuously. Exit should only be allowed through escape, the X button, or once a month/year has been selected Improve aria labels on footer social media and nav bar menu Co-authored-by: Copilot <copilot@github.com>
I added this now and fixed other things as well! |
travisfriesen
left a comment
travisfriesen
left a comment
There was a problem hiding this comment.
this might be semantics but would it be better to make component groups aria groups? like on the event page having recent event, older events, and calendar being the next level of groups and you need to go into them to actually interact with their components? otherwise you have to go through them all to get to like the bottom of the page? this would be a change that should likely be applied site wide
@travisfriesen I'm not super sure. I'm concerned if screen reader users would expect that. Going on other websites, they seem to require the same thing as our website right now. (Tab a lot to get to the bottom) But I think it's a great idea that's worth exploring!! (Edit: Actually, if we make the cards not use a heading, users can use "H" to switch to different headings. This could speed up getting to the bottom. There are probably other keyboard shortcuts I'm not aware of that could help with this issue in other pages.) I also just found out about https://www.w3.org/WAI/ARIA/apg/patterns/ which has the recommended keyboard interactions for certain components. I don't really have the time to implement these anymore due to busy work and school schedule :( But I think it's also worth exploring those to improve the website if @ACM02 and his team are interested! |
travisfriesen
left a comment
travisfriesen
left a comment
There was a problem hiding this comment.
LGTM, comment to be address in a future change
2 participants
Jira Issue Reference
Type of Change
Description
Added a11y (accessibility) to the project, this gives us information on what we can improve on our code in terms of accessibility. Common shortcomings from our previous code was that we used div as a button without allowing the div to have accessibility functions that buttons have (e.g. being announced as clickable, navigable with tab and keyboard, etc.). The ones that a11y mentioned were fixed, but very likely we have other code elsewhere that we can improve keyboard navigation for. Keyboard navigation and labelling code are very important for users who use screen readers.
Testing
Ensure you've tested the following, if applicable. Select all that apply.