loading...
Cover image for Checklist: 56 guiding questions about web accessibility

Checklist: 56 guiding questions about web accessibility

sylwiavargas profile image Sylwia Vargas Updated on ・4 min read

Did you know that at least every fourth American is a person with a disability? Or, that globally, there are at least a billion people with disabilities? And that the estimates show that one in every 200 developers is blind?

Accessibility of information was one of the foundational values of the Internet. Let's make sure everyone can participate.

This blog post was written in reference to a lecture I ran for Flatiron School — see it here:


Table of contents:


Check your web app!

Here is a checklist of what to do when designing for accessibility. Check if your app is...

Perceivable

Information and user interface components must be presentable to users in ways they can perceive (it can't be invisible to all of their senses), for instance:

  • Did you check whether colors on your website are the right contrast?
  • Did you make sure links are easily visible?
  • Are you using accessible font or enable users to switch fonts?
  • Is it possible to increase the size of the text? Does your app still look the same?
  • Did you include :focus attribute in your CSS for links?
  • Did you remove invisible focusable elements? (If you click through the page, can you clearly follow the focused element?)

Operable

User interface components and navigation must be operable (the interface cannot require interaction that a user cannot perform), for instance:

  • Did you try to activate buttons and links on the mobile version of your app? Was it easy?
  • If you are using hover attribute, are you ensuring that people who don’t operate a mouse can use it as well?
  • Did you make sure to enable keyboard navigation?
  • Is a “skip to main content” link present before the navigation when tabbing?
  • Is your button element only for actual buttons (and not for styling)?
  • Did you enable autocomplete in your forms?
  • Do all your fields have a descriptive labels?

Understandable

Information and the operation of user interface must be understandable (the content or operation cannot be beyond their understanding), for instance:

  • Did you scan your text through Hemingway Project? If not, read on:
  • Did you write in plain English?
  • Did you have more short sentences than long ones?
  • Do you avoid passive voice and favor active voice?
  • Do you avoid jargon and culture-specific references?
  • Do you avoid figurative language, idioms or specific terminology?
  • Is your text left-aligned for left-to-right languages?
  • Did you ensure linear content flow?

Robust

Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies (as technologies and user agents evolve, the content should remain accessible), for instance:

  • Did you validate your HTML?
  • Are you using semantic HTML to clearly mark headers, articles, footers, etc.?
  • Did you make sure to use maximum one h1 per page/view?
  • Did you use the lang attribute on the html page?
  • Did you make sure to have a different <title> on each page/view?
  • Did you make sure you did not skip header levels? (e.g. h1, h3, h4)
  • When using lists, are you using ol, ul or dl (and not just new line and -)?
  • Are your links and buttons descriptive (e.g. “assistive technology” and not “click here”)?
  • Did you make sure your app does not include any text in all caps?
  • Have you checked how your page looks with text increased to 200%?
  • Did you remove horizontal scrolling on mobile devices?
  • Can your mobile app be rotated in any direction?
  • Did you enable viewport zoom?
  • Did you remove session timeouts?
  • Do you give your users advance warning if a link will open in a new window?
  • Did you test your page with a screen reader?

videos, pictures and gifs:

  • Do you pictures have alt text?
  • Can all videos and animations be paused?
  • Do you have transcripts for audio?
  • Is it easy to switch off gif animation on your website?
  • Did you disable autoplay?
  • Do videos on your page have subtitles?
  • Did you ensure that images have a descriptive alt tag?
  • Did you ensure that decorative elements have empty alt tag?

Codebase

  • Does your app include a readme? Does the readme include headers?
  • Does your code include comments that make it easy to understand what blocks do from the get-go?
  • Do your variables have names that make it clear what they do?
  • Did you sacrifice code readability for fewer lines?
  • Is your app open source? Did you include instructions on contributions?
  • Is your documentation inclusive?

Misc

  • Who cannot afford your app? How can you increase their access?
  • Are you using gender-neutral words?
  • Is language you are using albleist or discriminatory in any way?
  • Does your page require high-speed internet or a lot of data transfer?
  • Did you test your app on a non-Apple computer?

Read more:

Useful tools


Photo by Anna Shvets from Pexels

Posted on by:

sylwiavargas profile

Sylwia Vargas

@sylwiavargas

I teach React, Redux, JavaScript, Ruby, Rails at Flatiron School and Yale University | I code for a better world | she/her

Discussion

markdown guide
 

Great post, I have a lot to check, what do you recommend to deal with big tables on mobile, seems like horizontal scrolling is unavoidable. I understand most people consume information on their phones but should we just have to acknowledge that phones are not well suited for all content?.

 

I really love your comment — thank you! I love it because to be honest, I never had to think about big tables so I learned something right now. I found this post that speaks about Shopify's UX in this respect: ux.shopify.com/lessons-from-buildi...
Let me know what you think!

 

wow, thanks a lot, looks great, I'll check it out in detail, I'm not a front-end myself but once in a while I have to delve in those waters. I like clean and simple and don't mind keeping things old school and avoid JS as far as possible and frameworks only as a last resource; right now I'm working in a SSR web UI for an application and my solution to big tables was similar to one of the examples in the site you shared, to hide columns without CSS, and it took me a couple of hours to make drop-downs without JS nor :hovers (damned touchscreens), I was kinda proud of it :) (as I said, I'm more of a back-end/embedded kinda fellow). I think your link will make my humble application better.

WOW! Please share the link (to the website and/or github) if you can! I'm so curious! All this sounds great.

It's not up yet, but is nothing fancy, just something like:

    <label for="someid">visible text or button</label>
    <input id="someid" class="hidden" type="checkbox">
    <div>
        <ul>
            <li>some item of the menu</li>
            ...
        </ul>
    </div>
  • I'm conflicted if those divs should be aside.
.hidden {
    display: none;
    visibility: hidden;
}

#the-menu { display: none; }
#someid:checked ~ #the-menu { display: block; }

The idea is to take advantage of the :checked and the ~ in css

About the tables, is similar but using the column table element to toggle visibility: collapse

Besides adding a hidden I think it doesn't muddy the html or css much, if you are hidding a lot of columns you can get something not that pretty like:

   ...

    <label for="togglebtn1">Razón social</label>
    <label for="togglebtn2">Tipo</label>
    <label for="togglebtn3">Rut</label>
    <label for="togglebtn4">Rubro</label>
    <label for="togglebtn5">Url</label>
    <label for="togglebtn6">Horario</label>
    <label for="togglebtn7">Comentario</label>
    <label for="togglebtn8">Estado</label>
    <label for="togglebtn9">Acciones</label>

    <section>
        <input class="hidden" id="togglebtn1" type="checkbox">
        <input class="hidden" id="togglebtn2" type="checkbox">
        <input class="hidden" id="togglebtn3" type="checkbox">
        <input class="hidden" id="togglebtn4" type="checkbox">
        <input class="hidden" id="togglebtn5" type="checkbox">
        <input class="hidden" id="togglebtn6" type="checkbox">
        <input class="hidden" id="togglebtn7" type="checkbox">
        <input class="hidden" id="togglebtn8" type="checkbox">
        <input class="hidden" id="togglebtn9" type="checkbox">

        <table>
            <colgroup>
                <col span="2">
                <col class="toggle1">
                <col class="toggle2">
                <col class="toggle3">
                <col class="toggle4">
                <col class="toggle5">
                <col class="toggle6">
                <col class="toggle7">
                <col class="toggle8">
                <col class="toggle9">
            </colgroup>

            <thead>
                <tr>
                    <th>Condominio</th>
                    ...

But all in all, I avoided JS, works fast, doesn't add much html or css and is just a visual aid, shouldn't mess with screen readers or other devices, even without css the result is readable enough. I hope it helps.

WOW I love this so much! What a great resource. This is really awesome. Thank you!