Most people don’t set out to design their websites to exclude people – after all, anyone who comes is a potential customer. However, there are myths such as accessibility not fitting in with aesthetics that can cause sites to be designed in a way that drives off individuals with disabilities – particularly visual, auditory, and cognitive disabilities. Here are some of the most common mistakes people make that aren’t made with diverse abilities in mind:
- Providing information solely by means of a video. “Bonus” points if the video is not captioned. The recent trend to replace help pages with video tutorials is a problem. Uncaptioned videos are not accessible for the deaf or those with auditory processing disorders. If you do include a video, either caption it or provide a transcript. Captioning can be done automatically.
- Insufficient color contrast. People with poor vision may not be able to read the font (and I have also seen sites where even sighted people may have problems). This can also cause issues for people with dyslexia. Contrast should be 4.5 to 1 for normal text and 3 to 1 for large text. This should be done while avoiding white backgrounds, which can cause eye strain.
- Not indicating which element on a website is currently selected by people using only a keyboard. Some people with physical disabilities cannot use a mouse. Others may be advised to limit mouse use temporarily to avoid aggravating tendonitis or carpal tunnel.
- Missing (or incomprehensible) alt text on images. All important images should have alt text for the blind. Screen readers cannot handle images (yet, anyway).
- Link text that has nothing to do with where the link goes. Always hyperlink to words that make sense, so that those skimming the page using a screen reader can quickly determine which links might be valuable. You can also add aria-label or aria-describedby attributes to your links, which are “visible” only to screen readers.
- Text that becomes illegible if the viewer zooms in. All modern browsers can resize text and zoom a page, but some sites are so badly designed this causes text to overlap. This can be a problem not just for the disabled but really for anyone past their mid forties.
- Illogical tab through order…such as when tabbing through a form, in many cases, the cursor will stop on a help icon or similar. This can annoy even the non-disabled who are trying to fill out a form quickly.
- Not using heading 1, heading 2 tags. Screen readers will respond to these tags, but ignore font or font size changes.
- Using color to convey meaning. This will also mess up screen readers, and possibly some visitors with color blindness.
- Audio files without transcripts should be avoided.
- Animations that cannot be disabled or paused. Animations can be extremely distracting to people with some cognitive issues. Some animations may also trigger seizures or migraines in those susceptible.
- Not allowing the user to extend the time before a form times out. It can take people using screen readers a lot longer to navigate through and fill out an online form. Security is important, but so is accessibility.
Many people think that making their website accessible will be at the expense of aesthetics, but that is far from the truth. Accessible design helps not just disabled people but anyone (for example, if someone is at work in a cubicle and forgot their headphones, they will appreciate that transcript just as much as a deaf person). Most of the mistakes above are made as simple oversights. It’s important to test your website for accessibility. Running your website through a screen reader, for example, can help you determine any problems.
Better still would be to ask a disabled person to test your website for you, as they may spot problems a tester without their disability would never even think of!