Web Accessibility Basics

But web accessibility also benefits people without disabilities, such as:

• People using mobile phones, smart watches, smart TVs, and other devices with small screens, different input modes, etc.
• Older people with changing abilities due to aging
• People with “temporary disabilities” such as a broken arm or lost glasses
• People with “situational limitations” such as in bright sunlight or in an environment where they cannot listen to audio
• People using a slow Internet connection, or who have limited or expensive bandwidth

By implementing some basic principles and practices, we can improve web accessibility for many of our site visitors.

Text and Language

• Write in Plain Language.
• Use clear, concise, simple sentences.
• Write at a 6th to 8th grade level of reading comprehension.
• Use tools like the free Hemingway app http://www.hemingwayapp.com/ to analyze and simplify text.
• Break up large paragraphs into shorter ones.
• Use bullets or numbered lists.
• Provide adequate white space around text.
• Don’t hide important content in documents such as Word or PDF files. Place content on the web page where it is searchable, more readable and more accessible to people using assistive technologies and mobile devices.
• Use meaningful link text. Don’t use “Read more,” Learn more,” Click here,” etc.
• If many of your site visitors are multi-lingual, offer translation.

Fonts and Formats

• Use legible, inclusive fonts.
• Avoid styles where there is ambiguity between certain characters – this is especially important for people with dyslexia and some vision impairments – for example:

1. Number 8 and uppercase letter B
2. Capital letter I, lowercase letter l and number 1
3. Number 0 and uppercase letter O

• Use appropriate heading tags (H1, H2, H3, etc.) so screen readers can follow the outline of the page content. This helps non-visually impaired users to quickly scan the page as well.
• Don’t use bold, italics or color to indicate heading levels.
• Don’t rely on color as the only indicator for a function or to convey information.
• Avoid using underlines for emphasis; an underline indicates a link.
• Avoid all caps. It’s hard to read.

Color and Contrast

• Provide high contrast between text and the background.
• Use a tool like the free a11y® Color Contrast Accessibility Validator for instant color contrast analysis provided by the Bureau of Internet Accessibility, or other free analyzer tools from Section508.gov.

Images and Videos

• Use images only if they are pertinent to the content. Avoid purely decorative images.
• Include meaningful alt text descriptions for images that are pertinent to the content.
• If an image is used that is not pertinent to the content, make sure it has an alt text description of null (alt="") so screen readers will ignore it.
• Size/compress images appropriately. Larger file sizes increase download time for people with slower Internet connections and increase data usage for people with mobile devices.
• Be careful of gifs and animations that can trigger vertigo or seizures.
• Make sure videos have captions and/or transcripts so people with hearing loss can perceive the content. If nothing else, use YouTube’s free transcription and captioning services.
• Never set videos to auto play because they can trigger seizures, vertigo or migraines. Allow site visitors to control video or media play.

Document Files

Document files are the greatest source of clutter on a website, and most are not accessible.

• Don’t use your website as a file repository. Some state agencies have documents dating back decades. The State Archives is your resource for archiving official documents.
• If content in a document file is important, present it as a web page.
• Avoid putting MS Word files on your site because they:

1. Are proprietary – site visitors must have the application to access the file
2. Aren’t compressed – file sizes can be huge
3. Don’t open in (most) browsers – users must download to access
4. Eat into people’s data plans – it costs money for mobile users to download
5. Have settings for accessibility, but most writers don’t know about/how to use them
6. Are often used for basic forms when online webforms can replace them
7. Are often used for forms that require a signature, but the State has alternatives that use digital signatures

• If content must be presented in document form (such as an official report), use PDF because PDF files:

1. Can be accessed via free Adobe reader
2. Are compressed
3. Open in most browsers – users don’t have to download to access them
4. Have settings for accessibility that are more widely used

• Use analytics to periodically review your site and delete document files that are no longer used or needed.

Mobile Accessibility

Mobile accessibility is just as important as any other type of accessibility: Mobile users are not disabled or impaired; they simply need to engage with websites using something other than a desktop.

• Test to ensure mobile users can accomplish the same top tasks as any other site visitor.
• Test all the “things”:

1. Menus/navigation
2. Pinch/zoom/resize
3. Hover – not functional on a touch screen
4. Stacking – ensure there are no overlays
5. Webforms – can you submit?

• Test on real devices with different browsers.
• Respect people’s data plans by sizing and compressing images and files appropriately.
• Avoid PDFs and Word documents. Present content as web pages where possible.

There are many ways we can improve our sites’ accessibility. Starting with the basics puts us on the path to making our sites better for everyone.

Related Content links

W3C Web Accessibility Initiative (WAI)

Usability.Gov