Smartly Done Websites offers an affordable way for you to work with professionals, designers, programmers, and writers, to help you customize your new website to best suit your needs.
10 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 10 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.
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.
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.
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.
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.
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.
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.
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 occuring in the image, or at least communicate the message of the image in the text that surrounds it.
10. 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.
How does this work?
Is this a good fit for me?
Read our frequently asked questions to see if a Smartly Done website is a good fit for you!