Making Your Website Accessible for People With Disabilities

Design flowchart illustrated by a designer. All arrows point to Design, including accessibility, usability, functionality, message, simplicity, professionalism, branding, and engaging
Credit: Matspersson0, Getty Images

By making your website accessible to people with disabilities, you end up making is accessible to everyone. In fact, making your website more accessible may even help people find your website in search engines. Why? Because search engines use some of the very same signals that screen readers do in order to find and understand the content of your website. 

But exactly how do you make an accessible website without becoming a coding expert?

 

Here are some tips and tricks that almost anyone with basic HTML knowledge can use to improve their website's accessibility. 

Web Accessibility Tools

W3C has a fantastic list of web accessibility tools you can use as a checker to spot potential problems with your website. That said, I still recommend doing some exploring with a screen reader and experiencing it for yourself. 

Understanding Screen Readers

One of the most important ways you can improve the accessibility of your website is to make sure it can be understood by screen readers. Screen readers use a synthesized voice to read the text on the screen. That sounds pretty straightforward; however, screen readers may not understand your website the way you currently have it set up.

The first thing you may want to do is try out a screen reader and see how it goes. If you are on a Mac, try using VoiceOver. 

  1. Go to System Preferences
  2. Select Accessibility
  1. Select VoiceOver
  2. Check the box for Enable VoiceOver

You can toggle it on and off using command-F5. 

If you are on a Windows machine, you may want to download NVDA. You can set it up to toggle on and off with the shortcut control+alt+n. 

Both screen readers operate by letting the user navigate by keyboard (this make sense - if you cannot see, using a mouse would be a challenge) and by creating a focus area for navigation.

The focus is essentially where the keyboard is "pointed," but it is usually displayed as a highlighted box around the focus object instead of a cursor. 

You can change both the voice pitch and the speed at which the voice reads if the default settings are annoying (and after about five minutes of listening to a standard slow voice reading, they usually are). Blind people usually read websites with their screen readers set to high speeds. 

It may help to close your eyes as you do this, but it may also help to keep them open and compare. Some of the things you may immediately notice when you try listening to your website is that some of the text may be out of order. Headings and tables may get jumbled. Images may either be skipped or they may say "image" or something equally unhelpful. Tables tend to be read as a series of items without context. 

You can, hopefully, fix this. 

Alt-Tags or Alternative Attribute

The alt-tag or alternative (alt) attribute is used in HTML to describe an image. In HTML, it looks something like this:

<img src ="image-location" alt="this is where your image description goes"> 

Even if you make your website with a visual tool that hides your HTML code, you will almost always have a chance to enter an image description.

You can enter nothing (alt=" ") but it would really be better to give each image a helpful description. If you were blind, what would you need to know about the image? "Woman" isn't much help, but maybe "Woman drawing design flow chart including accessibility, usability, branding, and  design." 

Title Text

Websites don't always display the HTML title tag, but it is helpful for screen readers. Make sure each of your website's pages has a descriptive (but not overly verbose) title that tells visitors what the page is about. 

Give Your Website Good Information Hierarchy 

Break up large chunks of text with headers, and, if possible, use headers with the H1, H2, H3 hierarchy appropriately.

  Not only does it make your website easier for screen readers, it makes it easier for everyone else. It's also a great signal for Google and other search engines to help them better index your website. 

Similarly, you should make sure your website is in a logical content order and that you don't have boxes of unrelated information appearing. If you're using ads, watch that your ads aren't overly intrusive and breaking up the text on your website too frequently. 

Make Better Tables

If you are using HTML tables, you can add captions to your tables using the tag in order to make them easier to understand by screen readers rather than just making the title of a table in bold text. You can also add the "scope" element and clearly label new rows and columns in your table so that screen readers don't simply rattle off a series of table cells without giving any context. 

Keyboard Navigation

In general, anything you put on your website should be something that someone could conceivably do using a keyboard only. That means your navigation buttons shouldn't be animated dropdown buttons if you can't use them with a screen reader (try it and see if you're not sure - some buttons are programmed for keyboard use.) 

Closed Captions

If you add videos or audio elements to your website, they should have captions. HTML5 and many video streaming services (like YouTube) offer closed captioning support. Closed captions are useful not only for accessibility but also for users who may be browsing your website somewhere where they can't play audio, such as in an office or in a noisy location. 

For podcasts or other audio elements, consider providing a text transcript. Not only is it useful for people who can't listen to the audio, having the text will make it easier for Google and other search engines to index that content and help your Google ranking.

ARIA

If you want to go to the advanced level of accessibility, HTML5 ARIA or WAI-ARIA specifications aim to be the new standard going forward. However, this is a complex (and evolving) technical manual, so what you could do is use an ARIA validator to scan to see if your website has any issues you can address. Mozilla also has a more approachable guide to getting started with ARIA.