Yesterday, I got my first ever product based coding challenge. The challenge was to develop a web app that allows for accessible nav bar usage. I used to think that making something web accessible meant that I used a good color scheme. And that’s all. I believed it was that simple. Here's my crappy, old accessibility thought process:
Use high contrast between the text and background color. The nav, main content area, and footer counted as one background.
Use Alt-Text for things I wanted to be indexed.
That's incorrect and not what web accessibility is about at all.
Here's the challenge ToDo's from VetsWhoCode's "code-challenge" slack channel:
- Add correct ARIA rules
- Ensure text is a readable size
- make the tabs on the navigation bar focusable
- Foreground/Background color ratio is at least 4:1
- Make sure that there is action to let users know which parts of the navigation bar is interactive
- Ensure that drop-down is focusable, also dismissable while on hover/focus.
I was an hour late seeing the challenge and noticed no one had posted solutions. I wanted to be the first student to get something up that worked. I dove into the deep science of web accessibility protocols, rules, and tools. Here's what I've learned so far:
ARIA stands for Accessible Rich Internet Applications. These applications assign roles, controls, and state definitions. ARIA is a set of attributes that work with a subset of the DOM known as the accessibility tree. The accessibility tree is not seen. It is keyboard controllable and screen reader friendly. It can also have nonvisible features that provide an even more unique experience.
ARIA supplements HTML by telling the accessibility tree where items are. The ability to interact with a web page element is also indexed. Here's an example of a nav bar with ARIA roles, tabindex, and the expanded attribute.
Tabindex gives the user the ability to tab over to and select menu items with their keyboards. The values that tabindex can be set to determine which order the items are listed in.
Aria-roles lets the accessibility tree know what functionality an element has. What if I used an icon as a button? I would set the role="button".
This function passes two arguments; "dropDown" and "dropDownParent". The arguments go through an if/else loop that changes the CSS visibility state of the drop down. The truth or falseness of aria-expanded is also changed at the same time.
The corresponding CSS for the focused, active, and hovered states set the drop down to visible.
There are better working examples of ARIA and web accessibility. Although its a work in progress, check out my navbar on CodePen.
I still haven't completed the challenge. I would like to discuss and learn more about how to provide the best user experiences to all users. Please tell me stories about and share examples of how you've used ARIA.
Where I learned about ARIA roles: