Accessibility goes well beyond the code and color scheme of your website. Accessibility applies to every aspect of your site, including one of the most important parts: your content. Using accessibility best practices can improve your site in many ways. For example, it will eliminate barriers for your visitors and can improve your SEO ranking. Read more below on 8 Ways to Make Your Content More Accessible.
If you are new to accessibility, check out What is Web Accessibility?
Creating new content or editing your existing content to be accessible will be less challenging with these helpful tips.
Titles and headings
Page titles should be meaningful and unique:
- The page title should be the main topic of the page.
- Different pages should never share the same title.
Use clear and descriptive page titles:
- The page title should describe the purpose of the page.
- Page titles help orient the website visitor.
- Page titles show in the sitemap and search results. The page title should help visitors quickly find the content they are seeking.
Break up content sections with headings:
- There are six heading styles: H1, H2, H3, H4, H5, and H6.
- Headings are hierarchical and ranked by order of importance: H1 is the most important heading, while H6 is the least important.
- Every page must have a title (H1).
- There should only be one H1 per page, but there is no limit to other headings per page.
- Use headings in the appropriate order:
- Do not choose a heading by its size; use headings by their level in the context of the content.
- Do not skip a heading rank from the top down. For example, an H4 should not directly follow an H2.
- Heading tags should never be empty.
Text
Use clear and concise language:
- Write for someone with only nine years of school.
- Write in clear and simple language that a general audience would understand.
- Avoid jargon and industry-specific language.
- When industry-specific language is required, explain the terms by adding the definition to provide context.
- Explain abbreviations.
- The same abbreviation can mean different things in different contexts. To help your visitors understand the context of abbreviations, include definitions that explain what they mean.
Provide clear instructions:
- Many visitors have difficulty perceiving color; for example, people with partial sight often experience limited color vision.
- Use other ways to convey information than color alone.
- Avoid instructions that rely only on color, such as “Click the blue link.”
- Use other ways to convey information than color alone. For example, a graph with colored lines may be difficult to understand for someone with color blindness if there are no text labels.
- An example line chart to show the importance of using other ways to convey information than color alone.
- A chart that conveys information with shapes, colors, and text labels will reduce barriers.
Sensory characteristics:
- There are visitors with disabilities that cannot perceive shape, size, or use information about spatial location or orientation.
- Avoid instructions that rely only on sensory characteristics, such as “Click the round button on the left.”
Links
Link text should be unique and describe the purpose of the link:
- Avoid vague links.
- Avoid link text such as “Read more” or “Learn more”. Instead, describe the purpose of the link. For example, “Read more about our services” clarifies the link’s purpose.
- Links that share link text must go to the same destination. For example, two links with the text “About Us” must link to the same page.
Links should not open in a new window or tab:
If links must open in a new window, give the visitor advanced notice that clicking on the link will open a new window. For example, adding “(opens in new window)” to the link text will help meet this requirement.
Images
Alternative text (also called alt text):
- The alternative text should be one or two sentences that accurately describe the image.
- Do not include “picture of” or “image of”.
- Use correct grammar.
- Limit using keywords. Keywords are not necessary.
- Alternative text should not provide the same information as text near the image.
- Screen readers will read the alternative text to the visitor so they can visualize the image.
Provide a text alternative to describe non-text content:
- Consider the text surrounding the image when writing alternative text.
- Decorative images do not require alternative text.
- Decorative images are purely for aesthetic purposes, do not add information to the content, and have no functionality.
- If you are unsure if an image is decorative or not, add the alternative text.
- Don’t forget to add alternative text to SVGs.
Image titles:
- Do not use title attributes on images.
- Image titles are unnecessary and redundant when using alternative text.
Image captions:
- Image captions add additional context.
- Examples of images that may require supporting information and would benefit from a caption are infographics, maps, graphs, and charts.
No images of text:
- Do not use text as part of an image.
- Visitors can adjust plain text to be more legible but cannot increase legibility when the text is part of an image.
- Screen readers cannot read the text to a visitor if the text is part of the image.
- Some exceptions include logos, infographics, screenshots, maps, graphs, and charts.
- Infographic showing the incorrect and correct use of images and text.
- Avoid using text as part of an image. Logos, infographics, screenshots, charts, and graphs are exceptions.
Linked images:
- Linked images have an action and require alternative text.
- Describe the purpose of the link in the alternative text.
Videos
Captions:
- Captions are a requirement for videos with audio.
- Some services will add closed captions to videos, such as YouTube and Vimeo, but they may require manual edits by your team. Automatic captioning often skips words or adds the wrong words.
Transcripts:
- Transcripts are essentially a script for the video.
- Transcripts provide a text alternative for visitors who cannot watch the video for any reason.
- Transcripts provide context to videos without audio for visually impaired visitors.
- Transcripts are not required if the surrounding content is a text alternative for the video.
Descriptions:
- Descriptions audibly explain visual information that occurs during a video.
- Descriptions help provide context for visitors with visual or cognitive impairments.
Background audio:
The background audio should not interfere with speech content. Lower the volume or remove the background audio when people are speaking.
Sign language:
To make your videos even more accessible, consider adding sign language.
Tables
- Tables require the appropriate ARIA attributes to be accessible, which may require assistance from a web developer.
- Table cells must be read in a logical order while using a screen reader, which can be challenging to achieve and may require assistance from a web developer.
- The visual appearance must be flexible to accommodate all screen sizes, which may require additional styling by a web developer.
- Avoid or simplify complex tables.
- Some screen readers do not support complex tables.
- Table cells should never be empty
- Table cells should be associated with the appropriate headers.
- Specify a heading row by using the appropriate markup.
- Mark up header cells with <th> and data cells with <td>.
- Add a caption to provide more information about the table.
- Captions help visitors understand the topic of the table.
- Use the <caption> tag to add a caption.
Popup modals and overlays
- Avoid popups that automatically display. Automatic popups are disruptive to visitors.
- Popups should only display when the visitor triggers the interaction by clicking on a button or link that opens the popup.
- For example, a search button displays the search form in a popup modal when the visitor clicks the button.
iFrames
- The contents of an iFrame must also be accessible.
- iFrames are generally from third-party websites and are only editable by their creator, so be sure only to use iFrames that are accessible.
- All iFrames require a title.
- The title should be a brief description of the purpose of the iFrame.
- Example iFrame code: <iframe src=”myiframe.html” title=”Your title goes here”>
- iFrame embed codes must not have HTML presentational attributes. For example, remove frameborder=”0″ from the iFrame embed code.
Add an accessibility statement to a page in the footer of your website to inform visitors that accessibility matters to you. Check out the SiteImprove accessibility statement generator to make creating one a breeze.
Adding accessibility to the mix may sound daunting if you have a large website with many pages and post types, but it does not have to be. Start small by applying these tips to one page to get acquainted with accessibility. In addition, you can add an accessibility statement to your website to inform your visitors that accessibility is a work in progress for your site.
