Accessibility Basics

Following these simple tips will help make your content more accessible for all site visitors. 

Heading Structure

Headings add structure and meaning to pages. They let you give each section on your page a title, show readers what's important, and act as clues for skimming a page. Assistive technologies and some browsers will let users jump from heading to heading to easily find what they’re looking for rather than forcing them to process all the content.

When adding headings to sections of content on your site, use the Heading Level select box on the Configure Block screen (if available) or use the Paragraph/Heading Format select box 

 . in the WYSIWYG editor to add the appropriate heading level which will add a semantic heading with the corresponding tag (example: <h2>). Use the guidelines below for further best practices.

Guidelines

• There should generally be only one Heading 1 (<h1>) per page and should be reserved for the title of that page. On your site, the Heading 1 is automatically created using the Title of the page.
• Heading 2s must be nested within a Heading 1, Heading 3s must be nested within a Heading 2, and so on.
• All headings should be unique to their section of content. For instance, never have more than one Heading 2 with the same name.
• Never skip headings or use different headings for design purposes.
• Never use bold text or the styles under the Formatting Styles select box in place of a semantic heading.
• Write clear rather than clever headings. Your copy might be brilliant, but if it doesn’t describe what’s in the content below, it might not be helpful for users (especially if you're writing instructions or a process outline).

For more information, visit WebAIM: Semantic Structure: Headings.

Descriptive Link Text

Links seem simple, but they're another spot where attention to detail can help you improve your site's accessibility. Writing good link text can help your readers understand which strings of text are linked and what kind of page a link will lead them to. When adding links on your site, use the guidelines below to make them more accessible.

Guidelines

• Link text should be descriptive enough to let the user know what content they can find if they select the link.
• Link text should be concise so a screen reader can quickly read it. However, don’t make them too short as mobile users will need to be able to tap the link on a touch screen.
• Let the user know if a link leads to a download. You can do this by putting the file type in parentheses in the link or by explicitly including the word "Download". Adding the file size is also helpful for users with limited bandwidth or storage. Example: Fiscal Year Budget Report (XLSX, 1.2MB)
• Avoid using the word “link” in the link text. Keep in mind that screen readers will read whatever the link text is and then say the word “link.”
• Avoid putting links in all caps. This is visually much more difficult to read.
• Avoid using URLs as link text. This can be tedious for users with screen readers, especially if the URL is long.
• Avoid using uninformative link phrases. Link text should be descriptive of the content the link will lead to.
  • Bad example: To find out more click here.
  • Good example: Learn more about creating accessible links.

For more information, visit WebAIM: Links and Hypertext.

Alternative Text for Images

Alternative text (or alt text) is used by screen readers to describe meaningful images to visually impaired users, search engines to better crawl and rank your site, and is displayed when an image fails to load. When uploading an image on your site, an Alternative Text field will be available for you to add quality alt text using the guidelines below.

Guidelines

• Alt text should not include repetitive or vague language such as "picture of", "image of", or "link to". Screen readers will automatically announce an image as an image. For example, an image with the alt text "image of students sitting under a Buckeye tree on campus" would be read aloud by a screen reader as "image image of students sitting under a Buckeye tree on campus". Keep in mind, alt text can include phrases like "photograph/painting/screenshot of" or "infographic representing" if it's relevant to your content and the related image.
• Decorative images (images not integral to understanding the content) should not have alt text. Enter <null> in the Alternative Text field when uploading a new decorative image on your site.
• Alt text should describe the image as concisely as possible. Alt text longer than 150 characters results in poor user experience, especially for screen reader users as they can't skip over long alt text. If an image requires a long description, it's better to place any key information contained within the image in the text below it and either enter <null> or language such as "the content of this image is described in the text below" in the Alternative Text field.

For more information, visit WebAIM: Alternative Text.

Captions and Transcripts for Videos

Synchronized captions (text versions of speech and other important audio content that display on the video at approximately the same time as the corresponding audio) help make videos accessible to people who can't hear or understand the audio well. A transcript (a linked text file that includes spoken words, important audio information, and visual information) help those who can neither hear the audio or see the video as Braille device users can read the text to understand the video's content. In addition, many screen reader users prefer transcripts since their assistive technology reads much faster than natural speech.

Remote videos hosted on YouTube, Vimeo, or Mediasite can be embedded on your site using the video block or using the Insert Media icon 

 in the WYSIWYG editor. Follow the guidelines below when adding videos.

Guidelines

• Ensure all videos on your site have accurate captions. YouTube offers auto-generated captions using speech recognition technology, but it's important to review for accuracy and edit as needed.
• Upload a corresponding text transcript. When adding or editing a remote video, use the Add media button under the Transcript field to attach a transcript file to the video (the file type should be .pdf, .doc, .docx, or .txt). A link to the transcript will automatically display below the video on the page.

For more information, visit WebAIM: Captions, Transcripts, and Audio Descriptions.

Table Structure

Sighted visitors can visually scan tables to understand the data presented, while screen reader users rely on proper markup to understand the associations between table cells. Tables can be added on your site using the Insert Table icon 

 in the WYSIWYG editor and you should follow the formatting guidelines below.

Guidelines

• Tables should be used for tabular data only and not for defining page structure. Using tables for solely layout purposes can present content to a screen reader user in an illogical order.
• Tables should have a table caption that associates title content to the table. This helps people navigating the page to know which tables are available and it can describe what kind of information is found in the table. After inserting a table, select the Toggle caption on icon and type the caption in the field that displays above it.
• Tables should include either a column or row header, or both if appropriate. Screen reader users heavily rely on these headings to navigate and understand tabular data. After inserting a table, highlight an entire column or row that should serve as the header, select the Column or Row icon, and then check the Header column or Header row checkbox.

For more information, visit WebAIM: Creating Accessible Tables.

Editoria11y Accessibility Checker

To assist you in checking your content for accessibility errors, we have enabled an on-page accessibility checker tool called Editoria11y that displays in the bottom right corner of your screen when logged into your site as a Site Manager. If there are no issues detected on the page, a blue check icon 

 will display. 

If issues are detected, a number indicating the amount of issues will display in the circle 

 and when selected, alerts will display within the page with tooltips that explain the problem and what actions are needed to resolve it. If the item might be a false positive, buttons are available to ignore the alert.

Learn more about Editoria11y on drupal.org including how to use the tool and what all it tests.