Checklist: 56 guiding questions about web accessibility

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:

• repo
• slide deck
• video

---

Table of contents:

• Check your if your app 🧐
  • is perceivable
  • is operable
  • is understandable
  • is robust
  • Check your videos, pictures and gifs
  • Check your code
  • Other considerations
• Read more 📚
• Useful tools 🔧

---

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 the colors on your website are the right contrast?
• Did you make sure links are easily visible?
• Are you using an 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 the 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 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 run your website through an html validator?
• Did you make sure to use a maximum of 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 an 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 your 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 an 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 the language you are using ableist 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:

• Web Content Accessibility Guidelines (WCAG) 2.0
• WCAG 2.0 checklist
• Color contrast explanation
• About :focus
• Google's guide to inclusive documentation

Useful tools

• Contrast checker
• Contrast generator
• Deque: accessible CSS library

---

Photo by Anna Shvets from Pexels

Comments

[Ghost]

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

[Sylwia Vargas]

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!

[Ghost]

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.

[Sylwia Vargas]

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

[Ghost]

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.

[Sylwia Vargas]

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

[Rahul]

I usually don't read excess of technical posts. But here I am just saving all your posts in my coding journey as they are very helpful and more than amazing.

[Sylwia Vargas]

Wow thank you. The funny thing is that this is very mutual — I do the same with yours and in fact one of them is scheduled to get a shoutout in my next newsletter✨ Thank you for this unprompted kindness.

[Rahul]

Ah. I should be more than happy coz my article is gonna get a shout out. Wooaaaaaaaaahh.