Inclusive web design: quick tips for beginners

Don’t have time for a full accessibility assessment? Don’t have time to learn all the guidelines? Here are some tips to keep in mind when designing a website or web content
Design Thinking

Sometimes you might not have time to assess the accessibility of your website according to all 38 success criteria in the WCAG AA 2.0 guidelines or to learn these guidelines. It can be hard or overwhelming to get your head around all of the different requirements. Here are some things that I like to practice doing to get a general idea of how users with disability may have to interact with a design without having to conduct a whole accessibility audit. These tips can be particularly useful when you’re in the middle of a spring and haven’t completed the designing or the developing yet. They also serve as a useful and insightful empathy exercise. 

1) Close your eyes when viewing your video content

Multimedia content on websites requires various alternatives to be accessible to users who might not be able to perceive some forms of sensory content. My main struggle when I was learning to understand how blind users view video content was understanding the whole concept of an “audio description”. Now what I do is close my eyes and listen to a video to see if all the important information is conveyed.

Questions to ask yourself:

  • Am I getting all the important information I need through the audio alone?
  • If I’m not, is this information available to me anywhere else?

Note: another cool resource to look at is audio descriptions of movies. This audio described trailer of the film Frozen is a good example. 

2) Navigate through your site using just the "tab" key

Keyboard accessibility on website often gets lost on things like carousels, funky javascript widgets, sliders, and interactive calendars. Keyboard accessibility affects a significant amount of people who identify as having a disability, such as users with motor or dexterity impairments who cannot use a mouse or users with blindness who may rely on keyboards in conjunction with their screen readers. Using the “tab” key will allow you to identify a large portion of keyboard accessibility issues that may be encountered when navigating through your site. 

Questions to ask yourself:

  • Can I clearly see which element I’m focusing on?
  • Is every part of my website operable using keyboard controls alone?
  • Am I getting stuck anywhere using the keyboard controls?
  • Are elements being focused on in the right order?

3) Use a screen reader to read through your site

Screen readers may not make a lot of sense to sighted users who have never needed to use one. The way screen readers typically work is within two modes; a mode that reads content and a mode through which you can activate content. NVDA for example uses arrow keys to “read” through a page and the tab keys to find interactive elements on a page that you can activate. Using a screen reader with your website will allow you to listen to a linearised version of all the content on your page that some blind users will have to rely on to understand your content. Like tip #1, I like to close my eyes while using a screen reader so that I can really understand what a blind user might see. Using screen readers will help web developers improve their coding skills, as the software often relies on semantic markup to operate correctly (such as programmatically determinable headings and appropriate table markup).

Questions to ask yourself:

  • Is content being announced in an order that makes sense?
  • Is information conveyed through images announced in a way that makes sense?
  • Is the name, role, and value of different elements and sections being announced? (I.e do you know if an expandable section is expanded just by listening to the screen reader)
  • Do link titles make sense?
  • Can I tell what the headings are on a page?

4) View your site through the lens of other vision impairments

I think all designers can benefit from trying to understand or empathise with users with low vision. While screen readers help us to understand how content is linearised to blind users, different tools and software can help us to understand how content appears to those who can still perceive visual content but are still affected by different health conditions. 

  • Spectrum Colour Blidness Emulator Google Chrome Extension 
  • High Contrast Themes in Windows 10 

Questions to ask yourself 

  • Is any information completely lost?
  • Is the contrast of very important elements or information severely reduced? 

At least a fifth of the population live with a disability. Understanding how users with disability may have to interact with your website will ensure that that your information, products, and services have a wider reach. When a site is accessible, it also often results in improved usability for all users. 

- Post by Monica Regalado