Readability & Writing

Creating web content that's accessible means making it easy for everyone to use and understand, including people with disabilities. These tips will help you get started and meet Web Content Accessibility Guidelines (WCAG) requirements.

Make Your Text Easy to Read

The way your text looks is important. Choose clear, legible options so all individuals can read and comprehend your content.

  • Choose Clear Fonts: Use standard sans-serif fonts (like Arial, Verdana, or Inter) for your main content. These are generally easier to read on screens than serif fonts (like Times New Roman). Save decorative or very narrow fonts for purely aesthetic purposes, like logos.
  • Use Good Font Sizes: Ensure your web page text is at least 12 points (or 16 pixels). For text meant to be projected (like on slides), aim for at least 24 points. Text that's too small is a common barrier for people with low vision.
  • Limit Font Styles:
    • Use bold text sparingly for emphasis on keywords or phrases.
    • Italicized text can be hard to read on web pages; avoid using it for long passages.
    • ALL CAPITAL LETTERS are significantly harder to decipher than standard mixed-case text. Use them only in specific instances where they are absolutely necessary (e.g., for acronyms, but expand them on first use).
  • Ensure Strong Contrast: Your text must stand out clearly from its background. Never put text on busy graphics or a background color that doesn't provide adequate contrast. For example, light gray text on a white background can be very difficult to read.
  • Don't Rely on Color Alone: If you're trying to convey meaning, don't use color as the only indicator. For instance, if you want to show an error, don't just make the text red; also include a clear error message in words.
  • Avoid Distracting Text: Never use blinking, scrolling, or moving text. This can be extremely distracting, difficult to read, and potentially trigger seizures for some users.

Write Clear & Concise Content

Beyond how your text looks, the words and sentences themselves greatly impact readability. Aim for clear, simple language.

  • Keep it Simple: Write in short, clear sentences and paragraphs. Avoid using overly complex words, jargon, or long, rambling sentences.
  • Explain Acronyms: When you use an acronym for the first time, always spell it out. For example: Web Content Accessibility Guidelines (WCAG).
  • Check Readability: Strive to write content that's understandable to someone with a 7th-grade reading level or lower. Tools like the Flesch-Kincaid grade level can help you measure this.
  • Use Lists: Break up information and make it easier to scan by using bulleted or numbered lists.

Key Content Accessibility Practices

These are fundamental practices to apply when creating any web page.

Provide Informative Page Titles

Every web page needs a short, unique title that describes its content and helps distinguish it from other pages. This title appears in the browser tab. Put the unique and most important information first.

Example:

  • Good: "Latest News • Space Teddy Inc."
  • Better for a process: "Buy Your Bear (Step 1 of 3) • Space Teddy Inc."

Use Headings to Structure Content

Use short headings to group related paragraphs and clearly describe sections. Good headings create an outline of your content, making it easier to scan and navigate. Always use headings in a logical, sequential order (e.g., H1, then H2, then H3, never skipping levels like H1 straight to H3).

Make Link Text Meaningful

Your link text should clearly describe the content or destination of the link. Avoid generic phrases like "click here," "read more," or "learn more." If linking to a document, it's helpful to include its type and size (e.g., "Proposal Documents (RTF, 20MB)").

Example:

  • Poor: "For more information on device independence, click here."
  • Good: "Read more about device independence."

Write Meaningful Text Alternatives for Images

For every image that conveys information or has a function, provide alternative text (alt text). Alt text describes the image to someone who can't see it (e.g., a screen reader user). If an image is purely decorative and adds no meaning, use empty alt text (alt="").

Example:

  • Image Caption: "Charging the phone: Connect the phone to a power outlet using the cable and power adapter provided."
  • Uninformative Alt Text: alt="Charging phone"
  • Informative Alt Text: alt="Plug cable into the bottom edge of the phone."

Create Transcripts and Captions for Multimedia

If you include audio or video, you need to provide text alternatives.

  • For audio-only content (like a podcast), provide a transcript.
  • For audio and visual content (like a training video), provide captions.
  • Transcripts and captions should include all spoken information and any important sounds (e.g., "door creaks"). For video transcripts, also describe important visual content (e.g., "Athan leaves the room").

Provide Clear Instructions

Ensure all instructions, guidance, and error messages are clear, easy to understand, and avoid unnecessarily technical language. If an input is required, describe the format (e.g., date formats).

Example:

  • Clear Instruction: "Password should be at least six characters with at least one number (0-9)."
  • Clear Error Message: "The username 'superbear' is already in use."

By following these simple steps, you can significantly improve the accessibility of your web content, making it more usable for everyone.

More Resources

WCAG

User Stories