I Was So Wrong About Web Accessibility That it's Laughable!
Tags: webaccessibility, aria, webdev, discuss
Published: 2019-06-14 01:00:31

---
title: I Was So Wrong About Web Accessibility That it's Laughable!
published: true
description: A Web Accessibility Cry For Help
tags: Web Accessibility, ARIA, Web Dev, Discuss
---

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: 

1. Use high contrast between the text and background color. The nav, main content area, and footer counted as one background.


2. 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](https://twitter.com/vetswhocode) "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. 


![](https://thepracticaldev.s3.amazonaws.com/i/4qbw1xae6y91t4rw2skz.png)


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. 

![](https://thepracticaldev.s3.amazonaws.com/i/vm7bn57hlet5agl5414z.png)


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

For the challenge, I had to create a dropdown nested inside of the nav bar. I used aria-expanded="false" as a default state for the items I did not want visible until the user interacts with it. Expanded true false is a unique attribute that calls for toggling using JavaScript. Here's a sample of a function that accesses two HTML elements and sets their attributes: 


![](https://thepracticaldev.s3.amazonaws.com/i/l4r4scz96092x964p98z.png)


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.



![](https://thepracticaldev.s3.amazonaws.com/i/aa5kpob56eef6jb08fd7.png)




There are better working examples of ARIA and web accessibility. Although its a work in progress, check out my navbar on CodePen.


{% codepen https://codepen.io/njericooper/pen/QXwXaO %}


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:
https://www.w3.org/WAI/PF/aria/states_and_properties#aria-controls
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
https://www.youtube.com/watch?v=qdB8SRhqvFc


Coding Challenge from #VetsWhoCode's slack channel. They're a veteran-owned non-profit that teaches veterans JavaScript. Learn more about them, apply for their program, or donate here: www.vetswhocode.io 


[Reach out to me on Twitter](https://twitter.com/intent/user?screen_name=@njericooper) 
{% twitter 1139336874135293954 %}