This guide provides practical tips for making your web content accessible to all users, including those with disabilities. While not a replacement for formal standards like the W3C's Web Content Accessibility Guidelines (WCAG), these recommendations will help ensure your content reaches the widest possible audience.
Headings and Document Structure
Use headings properly to organize your content into a logical hierarchy. Screen reader users navigate pages using headings, so a clear structure is essential.
- Begin with one H1 for the main page title
- Use H2s for major sections, H3s for subsections, etc.
- Never skip heading levels (don't jump from H1 to H3)
- Keep headings brief but descriptive
A good heading structure provides an outline of your content, making it easier for everyone to scan and comprehend your information.
Text Formatting for Better Readability
The way you format text significantly impacts how easily people can read your content:
- Skip the ALL CAPS text – it's harder to read for many people
- Use bold sparingly for emphasis rather than italics or underlining
- Write out phrases instead of using "e.g." or "i.e." which can confuse screen readers
- Format dates consistently (October 30, 2022 is clearer than 30/10/2022)
- Break up walls of text into manageable chunks
Leaving plenty of white space between paragraphs and sections helps readers track text horizontally and reduces cognitive load, particularly for those with reading disabilities.
Images and Alt Text
Images need alternative text so screen reader users understand their purpose:
"Alt text should be provided for images so that screen reader users can understand the message conveyed by the use of images on the page. This is especially important for informative images (such as infographics). When creating the alt text, the text should contain the message you wish to convey through that image, and if the image includes text, that text should also be included in the alt."
For purely decorative images, use empty alt text (alt="") so screen readers skip them entirely.
Whenever possible, avoid using images of text. Text embedded in pictures can't be enlarged properly, isn't selectable, becomes blurry when zoomed, and hurts your search engine optimization.
Links That Make Sense
Links should make sense even when read out of context since screen reader users often navigate by tabbing through links.
Avoid vague phrases like "click here" or "read more" – instead, make your link text descriptive of the destination. For instance:
Instead of writing "For more information, click here," write "Learn more about our accessibility initiatives."
Since many screen reader users navigate alphabetically through links, place the most distinctive words at the beginning of your link text whenever possible.
Color Usage and Contrast
About 8% of men have some form of color blindness, most commonly red-green color deficiency. This means:
- Never use color as the only way to convey information
- Include additional indicators like icons, patterns, or text labels
- Ensure sufficient contrast between text and background
The WebAIM Contrast Checker is a handy tool to verify that your color combinations will be visible to people with various vision impairments. Aim for a ratio of at least 4.5:1 for normal text.
Tables: For Data, Not Layout
Tables should only be used for actual tabular data – never for page layout. Screen readers announce tables with their dimensions, which becomes confusing if tables are used inappropriately.
When creating data tables:
- Include proper headers for rows and columns
- Use the scope attribute to associate headers with data cells
- Add a caption or summary to explain the table's purpose
Making PDFs Accessible
PDFs require special attention to accessibility:
"Use tagged PDF, the only type of PDF that supports headings and alt text for images. Use the PDF Accessibility Checker that's provided by Adobe Acrobat."
Consider whether PDF is the right format – if preserving exact appearance isn't critical, HTML is generally more accessible to more people.
Keyboard Navigation
Not everyone uses a mouse. People with motor disabilities, vision impairments, or certain conditions like repetitive stress injuries may rely entirely on keyboard navigation.
Ensure all interactive elements can be accessed using only a keyboard in a logical sequence. The tab order should follow the visual layout of the page. For lengthy pages, provide "skip to content" links that allow users to bypass repetitive navigation elements.
Video and Multimedia Content
Make videos accessible by providing:
- Accurate captions for all dialogue and important sounds
- Transcripts in accessible formats
- Media players with keyboard-accessible controls
This helps deaf and hard-of-hearing users, as well as people in noisy environments or those who process written information better than audio.
Plain Language Benefits Everyone
Using clear, straightforward language isn't just about accessibility – it's good communication:
- Write in short, clear sentences
- Avoid unnecessary jargon
- Expand acronyms on first use (like "World Wide Web Consortium (W3C)")
- Consider providing a glossary for specialized terms
Remember that making your content accessible improves the experience for all users, not just those with disabilities. Regular testing with different devices and assistive technologies will help ensure your content remains accessible as it evolves.
