Best Practices for Creating Accessible Content

Outline Headings

Structure Headings

Headings should act as an outline for the content on the page. Your web audience will scan the headings on a page to find out what the page is about.

It is critical to keep headings in order and not skip heading levels. Use the headings provided in the theme and don’t choose headings based on style.

Well structured headings also improve search engine optimization.

Text description of process

From your WordPress visual editor, highlight the text you want to make a heading then select the appropriate heading from the drop-down list. You can also add your cursor to the front of your line of text and select an appropriate heading to change the entire line.

To view the HTML tags added to your content, you can switch from the visual editor to the text editor.

Add Accessible Images

Alternative Text

Alternative text provides information about the content and function of an image for people who cannot see the image. There are many reasons people might view your web content without images including visual impairment and low-bandwidth internet connections. Additionally, good alt text can contribute to improved search engine optimization.

Add alternative text to images using the “Alt text” field in the Attachment Details section in the WordPress Media library.

Good alt text should be concise but must provide the same information as the image it replaces.

For more information on alternative text, read WebAIM’s article on Alternative Text.

Avoid Images of Text

Do not use an image of text when you can use plain text to convey the same information.

Text in images is a bad user experience for many people including the following reasons.

• People with visual impairments who need to transform or zoom text.
• People who are translating web content into a different language.
• People using a text-only browser.

Images of text are also more difficult to update and maintain than web content and, since search engines cannot read text in images, users may have a more difficult time finding the information.

Review Complex Images for Accessibility

Organizational Charts

If an organizational chart must be posted on your site you will need to create an alternate text version to make it accessible. Text versions can easily be created using HTML headings and lists.

By using semantic headings on your page, along with unordered (bulleted) lists, you can represent how your department or college is organized in a way that iss accessible to everyone.

For more tips on creating an accessible org chart, see Organizing Your Org Chart.

Infographics

Infographics require a text description that explains the relevant content presented in the graphic. Translate your infographic into a text version. You don’t need to describe every graphical element in the infographic but rather focus on what’s most important.

Use headings, bullets, and lists to make your text description more readable. If appropriate, include the images with alternative text descriptions within your text description.

Data and Graphs

If your images display graphical data, you must supply a text equivalent to describe the data. The best way to do this is to include a text description on the page next to the image or provide a detailed description in the image caption.

On your chart or graph, don’t rely on color alone to provide context. Include data labels and ensure all colors have enough contrast to help users tell them apart.

Maps

Maps require a text alternative to be accessible.  You can either direct users to or embed as it has an accessible text version and printable PDF.

If you are including a different map, you must also include a text description on the page to explain the information presented on the map.

Use Descriptive Hyperlinks

• Use clear and descriptive link text in both text links and button text.
• Avoid vague link text like “Click here” and “Read more”.
• Ensure that links with different destinations do not have the same link text.

Use PDF Documents Sparingly, and Ensure They Are Accessible

• PDFs are not responsive and can be difficult to use on mobile devices.
• PDFs are costly and time-consuming to make accessible.
• Where possible, convert PDF documents to web content, including forms.
• If you must use a PDF, make it accessible and clearly label as a PDF.
• PDF Accessibility Resources

Ensure Videos are Accessible

• All videos with audio on UAMS websites must be captioned.
• Plan ahead when you are creating videos to include transcripts and captioning as part of the process.
• Captioning a video has many benefits including accessibility to deaf or hard of hearing viewers, usability in sound-sensitive environments and increased search engine optimization.
• Video Accessibility Resources

Review with Siteimprove

Review Siteimprove reports and resolve any level A or AA errors identified on your site.

If you have migrated to the new theme, you may be wondering how you can monitor your pages with Siteimprove. Currently, the web team is evaluating the errors being flagged by Siteimprove to determine what is theme related vs content related.  As such, all errors have been moved from the “editor” role to the “developer” role. As we finalize our review, we will move appropriate errors back to the “editor” role.

The most important thing you can do for your content is to continue to focus on links, images, headings and not adding style to your text:

• Links – the most common link error we’re seeing is conflicts with the global navigation. So avoid generic link text like apply, news, or about as these are all present in the global navigation. Also pay attention to the links in the footers.  In general, giving your links meaningful text descriptions will improve accessibility.
• Images – most images on your site require a short alternative text description. This is especially true if your image is also used as a link either to the media file or another webpage. Including alternative text will ensure your images are more accessible for users.
• Headings – most headings are handled by the new theme through panels. However, be mindful of what you are adding for headings on your page. These create an outline of your pages that help users navigate content more easily. Avoid skipping heading levels as well.  They should follow numeric order.
• Text Styling – lastly, don’t introduce style elements to your content. Let the theme add the style, while you focus on the content.  This means leaving your text plain, and not changing the color, size, or indents manually. Also use bold and italics sparingly and do not underline any text.

Review Usability

Although Siteimprove provides automated accessibility testing, there is no substitute for testing your site to make sure it is usable.

• Navigate your site using only a keyboard to understand how your content works without a mouse.
• Use a browser extension like the Images ON/OFF Chrome extension or imagine your page without images to ensure the information is still available even if you cannot see the images.
• Scan the headings and links on your site to ensure they are descriptive and properly structured.

Use Accessible Colors

In general, the color choices on the UAMS web properties are controlled by the university’s theme.