Why accessibility matters
- 1 in 4 Americans are living with some type of disability.
- 4.6% are blind or have serious difficulty seeing.
- 5.9% are deaf or have serious difficulty hearing.
- 10.3% are living with a cognitive disability like dyslexia, attention deficit, or autism.
- About 1 in 12 men are colorblind.
- It’s the law. Section 508 requires most government websites to be accessible to everyone.
When you make content accessible, you make it better for everyone.
Examples of how people without disabilities benefit
- Closed captions on a video helps someone who doesn’t want to disturb people near them or if they are in a noisy environment.
- Good color contrast helps if someone is looking at something on their phone when the sun is out.
- Short sentences help people who are stressed. When people are stressed or anxious, it’s harder for them to understand complex sentences.
How to be more accessible
Fonts, text, and style
- Use sans serif and opentype fonts. Good choices are Arial, Verdana, or Open Sans.
- Left justify your text.
- Structure your content with descriptive titles, headings and lists.
- Provide whitespace.
- Minimize your use of italics and bold.
- Only use ALL CAPS for acronyms.
- Only underline text for links.
- Use CamelCase for hashtags.
- Make sure all form fields have meaningful labels.
- Use plain language.
- Add concise and descriptive “alt text” to all images. You can leave this blank if the image is only decorative. Alt text should not:
- Repeat the caption or surrounding text
- Include URLs
- Say “image of…”
- Do not use images of text. If you do (such as an infographic), also include the text as web content.
- Do not use content that blinks or flashes. If you do, allow people to disable animations.
- For complex graphs, also provide the data in a table.
- Avoid using images that don’t help your reader understand the content.
Audio and video
- Provide transcripts for audio and video.
- Provide closed captions for video.
- Allow people to play, pause and stop video content.
- Use descriptive text for your links so people know where a link will take them. Avoid saying “click here” or “learn more” on their own.
- Minimize mouse-only or dynamic interactions (like swiping or pinching). If you do use those, allow people to disable them.
- Use CamelCase for file names. It’s ok to use hyphens, but avoid spaces or underscores (_) in file names.
- Make sure your content is responsive so it works on any device. You can check how it looks by resizing your browser to the width of a cell phone.
- Make sure you have good color contrast so text shows up clearly against the background.
- Do not use colors as the only way of to convey information. For example, don’t rely on a green circle alone to indicate something is allowed. In addition to the green circle use text to say it’s allowed.
- Minimize the use of PDFs as the only form of information. If you do use PDFs, consider including the content also as text on your website.
- Create PDFs using PDF creation/export tools within your word processing software such as Microsoft, Google or Adobe. Don’t use the “Print” to PDF option (it typically breaks the tags that screen readers use).
- If you scan a document to create a PDF, use Optical Character Recognition (OCR) technology to make the text searchable.
- Let people know if a link goes to a PDF.
- Avoid using PDFs for forms (use web forms instead). If you do, here’s a guide for making them accessible using Adobe.
- Dos and don’ts on designing for accessibility
- Alternate text for images guide
- The perfect link
- Technique: Writing link text
- PDF Accessibility
- Accessibility beyond compliance playbook (from Ad Hoc)
- The hitchhiker’s guide to image accessibility