Date: Minor update 16 July 2024. Updated 5 August 2022. First published September 2015.
Editors: Kevin White, Shadi Abou-Zahra, and Shawn Lawton Henry. ACKNOWLEDGEMENTS.
Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-DEV project, co-funded by the European Commission IST Programme.
--- {::nomarkdown} {% include box.html type="start" h="2" title="Summary" class="full" %} {:/} 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. {::nomarkdown} {% include box.html type="end" %} {:/} {::options toc_levels="2" /} {::nomarkdown} {% include_cached toc.html type="start" title="Page Contents" class="full" %} {:/} - TOC is created automatically. {:toc} {::nomarkdown} {% include_cached toc.html type="end" %} {:/} ## 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. {::nomarkdown} {% include_cached box.html type="start" title="Example: Page Titles" class="example" %} {:/}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 {% include_cached excol.html type="end" %}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 {% include_cached excol.html type="end" %}For more information on device independence, click here.
Read more about device independence.
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.
{::nomarkdown} {% include_cached box.html type="end" %} {:/} {::nomarkdown} {% include_cached box.html type="start" title="More Information" class="simple" %} {:/} * **WCAG** * [Non-text Content 1.1.1](/WAI/WCAG21/quickref/#non-text-content) ([Understanding 1.1.1](/WAI/WCAG21/Understanding/non-text-content)) * **Tutorial** * [Images](/tutorials/images/) * **User Story** * [[Lakshmi, senior accountant who is blind]](/people-use-web/user-stories/story-three/) {::nomarkdown} {% include_cached box.html type="end" %} {:/} ## 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'. {::nomarkdown} {% include_cached box.html type="start" title="More Information" class="simple" %} {:/} * **[[Making Audio and Video Media Accessible]](/media/av/)** * **WCAG** * [Captions (Prerecorded) 1.2.2](/WAI/WCAG21/quickref/#captions-prerecorded) ([Understanding 1.2.2](/WAI/WCAG21/Understanding/captions-prerecorded)) * [Audio Description or Media Alternative (Prerecorded) 1.2.3](/WAI/WCAG21/quickref/#audio-description-or-media-alternative-prerecorded) ([Understanding 1.2.3](/WAI/WCAG21/Understanding/audio-description-or-media-alternative-prerecorded)) * **User Stories** * [[Dhruv, older adult student who is deaf]](/people-use-web/user-stories/story-six/) * [[Marta, marketing assistant who is deaf and blind]](/people-use-web/user-stories/story-seven/) {::nomarkdown} {% include_cached box.html type="end" %} {:/} ## 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. {::nomarkdown} {% include_cached box.html type="start" title="Example: Instructions communicate what information the user should provide" class="example" %} {:/}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:
{% include_cached image.html src="tips/clear_text_diagram.png" alt="" style="max-width:100%" %}