11 Tips to Make Your Website More Disability Accessible

After the Americans with Disabilities Act of 1990 was passed people wondered how that would affect the internet. There weren’t any specific guidelines given to ensure that all websites were accessible to people with disabilities. Later the WCAG, or Web Content Accessibility Guidelines, were released to help companies build their websites to be more accessible for those with disabilities. 

Whether you are creating a website from scratch or trying to update your existing website, this article should be able to help you. Here are 11 things to keep in mind when creating your website and 6 things to remember as you update it so people with disabilities can still easily access your information.  

Designing Your Website

If you are designing your website or have hired someone else to design your website and you want it to be more accessible for those with disabilities then here are some common suggestions. 

1. Screen Readers

It is important to make your website easy for a screen reader to work with. The Idaho Commission for the Blind and Visually Impaired suggests checking your website with a screen reader called Jaws to see if it is screen reader friendly.

Another option that we've found to be helpful (and free) is the NVDA screen reader. 

A few things to keep in mind when setting up your website to be easily read by a screen reader:

• Even if the text is invisible the screen reader will still read it out loud.
• Consider implementing a process that will skip repetitive text.

2. Appearance

Something as simple as the wrong colors can make reading a screen very difficult for the visually impaired. Always use colors that have high contrast, for example, don’t use dark blue text on a light blue background. Also, when working with things such as the layout of the webpage remember these things:

• Turn off auto-refreshing pages. Auto-refreshing could mess with screen readers, making it difficult for them to get through an entire page.  
• Screens or graphics that flicker are not only distracting but can make it very difficult for someone with visual impairments to focus on the letters and words they are trying to read. 
• Make sure your website offers the ability to zoom in. Some people who are declared legally blind can still read text so long as they have the ability to enlarge it.  
• Make sure web pages are structured in a clear and simple format with logical heading levels. This will make it easier for someone using a screen reader to follow along. 

3. Pop-ups

Pop-up buttons or balloons are distracting and make it more difficult to navigate. If you feel like you need to have additional information on your website in the form of a pop-up or modal, then try this:

• Don’t use a box or balloon that will pop-up and disappear as the cursor moves over it.
• Make sure any modals or boxes with additional information are fixed in place.

4. Testing Pages

You’ll want to ensure your that the CSS of your website functions in a responsive, logical, and understandable manner. 

• To test your CSS you can drop your website URL into the tester on this website - http://jigsaw.w3.org/css-validator/
• Make sure each page transfers from one web format to another and can easily scale up and down in size. 
• Check that all headings make sense in their current order with your text. You need to consider how a screen reader would view your headings. 

5. Links

Links can be confusing to both the visually impaired and their helpful screen reader devices. To eliminate confusion, keep these things in mind: 

• The purpose of the link should be easy to understand from the context of the link itself. 
• Don’t use phrases like “click here” or “more.” It can be confusing out of context and isn’t super helpful. 
• Instead, use descriptive text that makes sense in the context of the text.

6. Keyboards

Keyboards are crucial for the blind and visually impaired so it is important that your website functions well with keyboard commands. 

• You should be able to complete all actions just with the keyboard. The mouse shouldn’t be necessary. 
• The keyboard should be able to access all toolbars, menus, and dialog boxes.
• When testing that the keyboard controls are working correctly check that the tab key follows a logical order on pages and forms. 
• You should also consider adding an option that allows anyone using a screen reader to skip to the most important content on the page with the tab or enter key. 

7. Forms

Forms should be easy to understand through a screen reader and they should have the ability to accomplish all functions with the keyboard.

• Make sure EVERYTHING is very clearly labeled.
• Form labels need to be linked to form items.
• Always have the group identifier come before any information so that they are easy to associate with one another. 

8. Tables

You will want to make sure that all of your tables on your website are clearly labeled and laid out. 

• All tables should have column and row headers.
• Use HTML to mark your tables.
• Have alternative ways to access data represented on tables or graphs, like written and/or audio explanations of the data. 

9. Images/Multimedia

With images and multimedia presentations there are a few things you’ll want to keep in mind for visitors with visual or hearing impairments. 

• If you have an image that functions as a button, make sure to have text that is associated with the action. 
• For all auditory information always have a visual option.
• Always provide captions or transcripts with all multimedia presentations such as videos and podcasts.
• All images, widgets, embedded media, plug-ins, and other such visual content should include clear titles and texts that also communicate the same message. 
• Include a descriptive alt attribute on every image to describe what is occurring in the image, or at least communicate the message of the image in the text that surrounds it. 

10. PDF Accessibility

PDFs have their own set of challenges when it comes to creating an accessible version for your website visitors. A few tips to keep your PDFs more accessible:

• Use a meaningful title on the PDF
• Include meta tags that describe what the PDF is about
• Include multiple languages of the PDF, especially if your audience is comprised of people who speak different languages
• Include alternative text in images on the PDF
• Include bookmarks on longer PDF documents
• Any tables within the document should have defined headers
• Image-only PDF's don't provide much value-include any images directly on your page with relevant alt text

Get a more in-depth look at creating accessible PDFs from the University of Ottawa. 

If you use Adobe Acrobat Pro to create your PDFs, then you should have the ability to run each document through an accessibility checker and make them more accessible.

To run your PDF through an accessibility checker:

1. When you have finished creating your PDF go to Tools > Accessibility. 
2. Click Full Check.
3. Select how you want to view your results under Report Options. 
4. Select at least one for the Checking Options. 
5. Click Start Checking. 

To make your PDF more accessible with Adobe Acrobat Pro:

1. Go to Tools > Action Wizard. 
2. Click Make Accessible from the action list. 
3. Select the files that you want to make accessible. Select Add Files if there are any documents you want to make accessible in addition to the one that you already have open. 
4. Click Start. 
5. Follow the prompts that the software gives you. 

For a more in-depth look at making your PDFs accessible with Adobe Acrobat Pro, visit helpx.adobe.com. 

11. Testing Website

Once you have your website set up, you can test it to see how accessible it is by running it through the following programs:

• Functional Accessibility Evaluator 1.1 (University of Illinois at Urbana-Champaign):  http://fae.cita.illinois.edu/
• WAVE - Web Accessibility Evaluation Tool:  http://wave.webaim.org/
• List of Web Accessibility Evaluation Tools:  http://www.w3.org/WAI/ER/tools/complete

Updating Your Website

If you just need to make a few simple updates to your website like a new page here or an extra paragraph there then remember these tips to keep your website as accessible as possible:

1. Font Type: Font choices that are easier for the visually impaired to distinguish are Times New Roman, Ariel, and Tahoma. 

2. Font Size: Try to keep all text on your website no smaller than 14 pt font. 

3. Color: Keep a solid colored background and make sure the font color contrasts well with the background color so the text is easily distinguishable. 

4. Brightness: Any visitor to your website should be able to adjust the contrast, brightness, and color. 

5. Headings: Make sure all of your headings are clear and make sense if read by a screen reader. 

6. Images and Multimedia: Include alt attributes in your images, and include captions or transcripts for any videos or podcasts you choose to display. 

If you found this information helpful but would like more in-depth instructions for making your website as accessible as possible, then visit the Northwest ADA Center for more tips to Accessible-ize Your Website.