9
7 Comments

How do you ensure that a website is accessible to users with disabilities?

How do you ensure that a website is accessible to users with disabilities?

on January 23, 2023
  1. 1

    I try to be conscious during development of the site. I also use https://userway.org to help accommodate anything I may have overlooked.

    1. 2

      Thanks for sharing the Userway.org site... not heard of them before!

  2. 1

    I took a class on this last semester,
    using the WAVE extension, it will analyze a webpage and will tell you about any contrast errors, missing alternate text for images, etc.

    Axe Devtools is also a good extension to check with, as it outputs any errors deemed obstructive to accessibility.
    html5validators online can do the same but these two add ons helped me a lot

  3. 1

    I don't consider myself an accessibility expert, but I have published more accessible themes on wordpress.org than anyone else, so here's my advice :)

    There are many ways a disability can affect how someone uses a website. For some, keyboard/trackpad navigation is difficult or impossible. For others, small and low-contrast elements are difficult to see. Sometimes web developers think accessibility is about making their site work for the blind, and it is, but there's also an entire spectrum of vision disabilities and other impairments to accommodate.

    Here are two quick improvements you can make:

    First, visit your website and start using the Tab key to navigate. Does it take you through the navigation elements and into the content? Is it clear which element is currently highlighted? Is there an option to skip straight to the main content before going through all the menu items? Updating your site so that the answer to all of those is "yes" will go a long way toward improving accessibility.

    And secondly, make sure that all of your text has enough contrast against the background. This is a nice tool for quickly comparing the contrast between a foreground and background element: https://contrast-ratio.com/. When designing for accessibility, you often have to forego certain styles, like colored buttons. The ones here, for instance, don't meet the contrast requirements, but you can always place color in the borders instead.

    There's a lot more to do if you want a fully accessible site, but those are two critical steps that will help a lot. If you want to dive deeper into accessibility, I'd recommend Luke McGrath's site: https://www.wuhcag.com/wcag-checklist/. His book on accessibility helped me wrap my head around WCAG.

  4. 1

    MDN has extensive resource on this subject about how you can make your website/app accessible: https://developer.mozilla.org/en-US/docs/Web/Accessibility - I recommend going through that to get an understanding of the basics and what methods fits you best.

    A tool that I commonly use for websites/webapps is the wave evaluation tool (https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh
    ). It's a very useful chrome plugin that gives you immediate overview of what you can improve to make it more accessible and you can tackle page per page. Obviously, it's up to you what you want to fix or not.

    1. 1

      These are great...and free! Thanks!

  5. 1

    I gain lots of insight from google analytics, for example if users leave the website quickly, if they don't do many actions, if there is poor conversion rate.. that would tell that something is wrong ( Content is not relevant for them, UX/UI etc.. )