Writing For Web Accessibility – Tips For Getting Started - W3C

This page introduces some basic considerations to help you get started writing web content that is more accessible to people with disabilities. These tips are good practice to help you meet Web Content Accessibility Guidelines (WCAG) requirements. Follow the links to the related WCAG requirements, detailed background in the “Understanding” document, guidance from Tutorials, user stories, and more.

• Provide informative, unique page titles
• Use headings to convey meaning and structure
• Make link text meaningful
• Write meaningful text alternatives for images
• Create transcripts and captions for multimedia
• Provide clear instructions
• Keep content clear and concise

Provide informative, unique page titles

For each web page, provide a short title that describes the page content and distinguishes it from other pages. The page title is often the same as the main heading of the page. Put the unique and most relevant information first; for example, put the name of the page before the name of the organization. For pages that are part of a multi-step process, include the current step in the page title.

Space Teddy Inc.

Latest News • Space Teddy Inc.

Buy Your Bear (Step 1 of 3) • Space Teddy Inc.

• WCAG
  • Page Titled 2.4.2 (Understanding 2.4.2)

Use headings to convey meaning and structure

Use short headings to group related paragraphs and clearly describe the sections. Good headings provide an outline of the content.

View inline example

Example: Headings and Subheadings

HTML elements provide information on structural hierarchy of a document. Using elements correctly will help convey additional meaning to assistive technology. In many cases, doing so will also make your document easier to edit.

For documents longer than three or four paragraphs, headings and subheadings are important for usability and accessibility. They help readers to determine the overall outline of a document and to navigate to specific information of interest.

Headings are classified into levels from one to six. The highest level is "Level 1" and often corresponds to the title of the page or major document section.

Visual readers identify headers by scanning pages for text of a larger size or a different style. Assistive technology users are not able to see these visual changes, so changing the style is not a sufficient cue.

Instead, the headings must be semantically "tagged" so that assistive technology can identify headings. Then headings can also be used for navigation.

This makes adding headings one of the most important tools for screen reader users, so that they can learn what is on the page. Note that tagging usually triggers a formatting change visually which can be adjusted in many documents.

Adapted from Headings and Subheadings at Penn State

View inline example

Example: Headings and Subheadings

HTML elements provide information on structural hierarchy of a document. Using elements correctly will help convey additional meaning to assistive technology. In many cases, doing so will also make your document easier to edit.

Example: Purpose of Headings

For documents longer than three or four paragraphs, headings and subheadings are important for usability and accessibility. They help readers to determine the overall outline of a document and to navigate to specific information of interest.

Example: Heading Levels

Headings are classified into levels from one to six. The highest level is "Level 1" and often corresponds to the title of the page or major document section.

Example: Meaning vs. Formatting

Visual readers identify headers by scanning pages for text of a larger size or a different style. Assistive technology users are not able to see these visual changes, so changing the style is not a sufficient cue.

Instead, the headings must be semantically "tagged" so that assistive technology can identify headings. Then headings can also be used for navigation.

This makes adding headings one of the most important tools for screen reader users, so that they can learn what is on the page. Note that tagging usually triggers a formatting change visually which can be adjusted in many documents.

Adapted from Headings and Subheadings at Penn State

• WCAG
  • Headings and Labels 2.4.6 (Understanding 2.4.6)
  • Section Headings 2.4.10 (Understanding 2.4.10)
  • Info and Relationships 1.3.1 (Understanding 1.3.1)
• User Stories
  • Ade, reporter with limited use of his arms
  • Ian, data entry clerk with autism
  • Lakshmi, senior accountant who is blind
  • Stefan, student with attention deficit hyperactivity disorder and dyslexia

Make link text meaningful

Write link text so that it describes the content of the link target. Avoid using ambiguous link text, such as ‘click here’ or ‘read more’. Indicate relevant information about the link target, such as document type and size, for example, ‘Proposal Documents (RTF, 20MB)’.

For more information on device independence, click here.

Read more about device independence.

• WCAG
  • Link Purpose (In Context) 2.4.4 (Understanding 2.4.4)
  • Link Purpose (Link Only) 2.4.9 (Understanding 2.4.9)
• User Stories
  • Ade, reporter with limited use of his arms
  • Ian, data entry clerk with autism
  • Lakshmi, senior accountant who is blind
  • Stefan, student with attention deficit hyperactivity disorder and dyslexia
  • Elias, retiree with low vision, hand tremor, and mild short-term memory loss

Write meaningful text alternatives for images

For every image, write alternative text that provides the information or function of the image. For purely decorative images, there is no need to write alternative text.

Charging the phone: Connect the phone to a power outlet using the cable and power adaptor provided.

Alternative text for image: "Charging phone"

Charging the phone: Connect the phone to a power outlet using the cable and power adaptor provided.

Alternative text for image: "Plug cable into the bottom edge of the phone."

Alternative text is usually not visible; it is included in this example just so you can see what it is.

• WCAG
  • Non-text Content 1.1.1 (Understanding 1.1.1)
• Tutorial
  • Images
• User Story
  • Lakshmi, senior accountant who is blind

Create transcripts and captions for multimedia

For audio-only content, such as a podcast, provide a transcript. For audio and visual content, such as training videos, also provide captions. Include in the transcripts and captions the spoken information and sounds that are important for understanding the content, for example, ‘door creaks’. For video transcripts, also include a description of the important visual content, for example ‘Athan leaves the room’.

• Making Audio and Video Media Accessible

• WCAG
  • Captions (Prerecorded) 1.2.2 (Understanding 1.2.2)
  • Audio Description or Media Alternative (Prerecorded) 1.2.3 (Understanding 1.2.3)
• User Stories
  • Dhruv, older adult student who is deaf
  • Marta, marketing assistant who is deaf and blind

Provide clear instructions

Ensure that instructions, guidance, and error messages are clear, easy to understand, and avoid unnecessarily technical language. Describe input requirements, such as date formats.

Password should be at least six characters with at least one number (0-9).

Password

1. The username 'superbear' is already in use.
2. The password needs to include at least one number.

• WCAG
  • Labels or Instructions 3.3.2 (Understanding 3.3.2)
• User Stories
  • Ian, data entry clerk with autism
  • Stefan, student with attention deficit hyperactivity disorder and dyslexia
  • Elias, retiree with low vision, hand tremor, and mild short-term memory loss

Keep content clear and concise

Use simple language and formatting, as appropriate for the context.

• Write in short, clear sentences and paragraphs.
• Avoid using unnecessarily complex words and phrases.
• Expand acronyms on first use. For example, Web Content Accessibility Guidelines (WCAG).
• Consider providing a glossary for terms readers may not know.
• Use list formatting as appropriate.
• Consider using images, illustrations, video, audio, and symbols to help clarify meaning.

CPP: In the event of a vehicular collision, a company assigned representative will seek to ascertain the extent and cause of damages to property belonging to all parties involved. Once our representative obtains information that allows us to understand the causality, we may or may not assign appropriate monetary compensation. The resulting decision may occasion one of the following options: the claim is not approved and is assigned a rejected status, the status of the claim is ambiguous and will require additional information before further processing can occur, the claim is partially approved and reduced payment is assigned and issued, or claim is fully approved and total claim payment is assigned and issued.

Claims Processing Procedure (CPP): If you have a car accident, our agent will investigate. Findings will determine any claim payment. This could result in:

• Approved claim - full payment
• Partially approved claim - reduced payment
• Undetermined claim - more information needed
• Rejected claim - no payment

• WCAG
  • Reading Level 3.1.5 (Understanding 3.1.5)
  • Unusual Words 3.1.3 (Understanding 3.1.3)
  • Abbreviations 3.1.4 (Understanding 3.1.4)
• User Stories
  • Ian, data entry clerk with autism
  • Sophie, basketball fan with Down syndrome
  • Stefan, student with attention deficit hyperactivity disorder and dyslexia

These tips are a few of the things you need to consider for web accessibility. Additional guidance on writing that meets the accessibility needs of people with cognitive and learning disabilities is in Use Clear and Understandable Content.

The following resources help you learn why accessibility is important, and about guidelines for making the web more accessible to people with disabilities.

• Accessibility Introduction — Introduces accessibility and provides links to many helpful resources
• Accessibility Principles — An introduction to the WCAG requirements
• How people with disabilities use the web — Real-life examples showing the importance of accessibility for people with disabilities
• How to Meet WCAG (Quick Reference) — customizable reference of all WCAG requirements and techniques

• Previous: Overview
• Next: Tips for Designing

Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list [email protected] or via GitHub.

E-mailFork & Edit on GitHubNew GitHub Issue Back to Top