Content accessibility guidelines
Article element | Guideline | Example |
---|---|---|
Body content | To create content that is easily understandable by everyone, use:
|
Not accessible
“If you want to assemble the widget, begin by inspecting the box. If the box is damaged, meaning that it has dents or is broken, be sure to report it to us. Next you can begin to perform the following tasks: Insert the screws into the unit and tighten them. Turn on the unit.” Accessible To assemble the widget
|
Headings | Use headings hierarchically, with <h1> being the most important heading and subheadings organized as <h2>, <h3>, and so on.
Increase or decrease headings by one level at a time when ordering them on the page. For example, use a <h4> after an <h3>, rather than a <h5> or <h6>. Try to have only one <h1>, with the most important text in it (such as the page’s title). Organizing web pages by headings makes them visually distinguishable for users with cognitive disabilities and is easier for screen reader users to navigate. |
Not accessible (no subheadings) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat turpis ac ultrices pulvinar. Nullam pharetra neque ac eros fermentum, sed tempor lorem tristique. Aenean ut malesuada diam. Not accessible (skipped subheading levels) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heading 1 Quisque tempor semper metus eu venenatis. Heading 4 Etiam et vehicula ipsum. Not accessible (more than one <h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heading 1 Quisque tempor semper metus eu venenatis. Heading 1 Etiam et vehicula ipsum. Accessible Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heading 1Quisque tempor semper metus eu venenatis. Integer vehicula interdum velit, sit amet rutrum nisi sollicitudin ac. Heading 2 Etiam et vehicula ipsum. Aenean placerat semper leo et bibendum. |
Images |
Provide clear and concise alternate (alt) text for purposeful images that describe what the image is about. Alt text is read aloud by screen reader software. If you are using
alt="" ) so they can be ignored by assistive technologies such as screen readers. |
Not accessible
Accessible
|
Link color and style |
Use a link color that contrasts with the page and surrounding text and includes a non-color indicator (such as underline or icon). This makes your links accessible for users who have difficulty differentiating text with low contrast or who are colorblind. Avoid using images as links. If necessary, use an image that includes alternative text that describes the location and purpose of the link. |
Not accessible
Accessible See Creating accessible help center content |
Link text |
Create link text that makes sense without the surrounding content. For example, avoid ambiguous link text such as “click here,” or “learn more”. Screen readers can’t interpret where the link will lead when it's not stated in the text. Don't use the raw URL for the link text. Screen readers will read the entire URL to users, regardless of length. |
Not accessible See www.website.com/linkedpage.htmlAccessible |
Titles | Use page titles that describe the topic or purpose. |
Not accessible “Accessibility details” Accessible “Creating accessible help center content” |
Video | Select a video provider who supports closed captions. Closed captions make videos more accessible to people who are deaf or hard of hearing.
Provide a transcript and audio description for the video. |
Accessible |
Content accessibility resources
Familiarize yourself with the following resources to learn more about how to create accessible help center content: