Using Aria DevTools to improve accessibility

#a11y #webdev #html #frontend

Accessibility involves putting yourself in others' shoes. You might be surprised that this is a challenging endeavor.

Luckily, there are tools out there that help us get closer to understanding how people with disabilities can use the web. ARIA DevTools is one of them, It compiles a visual representation of the website that brings a new perspective and helps you build more accessible website.

With ARIA DevTools you see your website the way screen readers present it to the blind users. All page elements are presented according to their explicit or implied ARIA roles.

Here is a representation of the MDN website that showcases beautifully accessible Markup.

In this article I will share my experience with ARIA DevTools and how used it to make my website better.

Using ARIA DevTools

When I first learned of this extension, I was my website was going to look good in them and was eager to test it.
After all, i knew about semantic HTML and i always wrote alt text.

To my disappointment, this is how it looked:

Apparently, there was some work to do. I wanted my website too look more like MDN's.

Making improvements

A question that popped in my mind was, "Can I even do this? or this an incredible feat that only experienced developers can do?"

what did my markup need so it can look good and have a clear nested architecture?

Using ARIA DevTools made the needed improvement much more clearer, with further analysis i realized the following:

my projects should be wrote as a list, this makes for much better semantics.
for an element to be recognized with that blue color it needed 2 things:
1. be a semantic html tag (header, section, article ..etc).
2. have an aria-label.
I noticed some alt text that was incorrect or that needed to be more descreptive.

This is a simplified version of some of the changes; it went from this:

<section>
    <div class="projects">
        <div class="project">
            Project content
        </div>
    </div>
</section>

to this*:

<section aria-label="section-label">
    <ul class="projects">
        <li style="display: contents;">
            <article class="project" aria-label="project-label" aria-description="description">
                Project content
            </article>
        </li>
    </ul>
</section>