Creating Accessible Drupal Sites

Heading tags

When you arrive for the first time at a page, you are likely to scan the document to get an overview of the page. This will help you decide if you want to stay and where you will want to start reading. Visually disabled users who use screen readers to access documents will want to do the equivalent. By making use of heading tags, they too can get a scan of the page. They can choose to hear all the headings first, or they may jump through the page by advancing to the next heading.

If you have a fair amount of content that does not have any headings, the screen reader user may have a hard time reviewing content when going back to review, as the document or page is not very navigable. The user will not have the ability to tab around the page easily to find or preview content.

Heading level hierarchy

Pay attention in particular to what heading styles are brought over. When copying, it is important to stay within the heading style numbering scheme that is already in play on SRJC Drupal sites. There are Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, and Heading 6 tags that can be used in the HTML behind the scenes. The numbering needs to reflect a hierarchy that fits with the content, and with the headings already assigned on the page. This is important for accessibility compliance and increases semantic value, which may affect search engine optimization (helping search engines index and display your site in searches).

Paragraph/Heading drop down menuThe drop-down menu for Paragraph Format is located directly under the icon buttons. Notice in the screen shot that the first heading available is a Heading 3. That is because Heading 1 and Heading 2 have already been applied to your page. If you copy text from other sources that bring over formatting, you may end up with a Heading 1 or Heading 2 in your copied text. Using one of the removing formatting options will remove the heading tags, allowing you to assign the correct tag from this drop down.

Hyperlinks

There are a few important considerations when creating hyperlinks:

  • Make unique, descriptive hyperlink text. Never make more than one link on a page have the same hyperlink text but go to different locations. (e.g. two links that say "Read More", but go to different pages). You should elaborate, and describe in the active hyperlink text where the viewer is going.
  • Do not use uninformative link text such as "Click Here" or "Click For Details" or "Read More". You want to provide more information about the linked content, such as "Read more about cute kitties."
  • Make links as concise as possible while still being informative. Don't make a whole paragraph be a link.
  • Don't make your link area too small, such as one very short word, in consideration of those with mobility issues.
  • Avoid URLs as the hyperlink text, unless the URL is short. It is very tedious to listen to a long URL be read by screen readers and they look bad on the page. Many people still hang onto the practice of putting the URL in as hyperlink text because of the concern of those that print the page will end up with no knowledge of the URL. When printing from the later versions of Chrome and Firefox, the link URL is printed as well.
  • Do not have empty links. This can happen behind the scenes in the HTML when deleting linked text. Sometimes the link tag remains, though empty.
  • In most cases, you should not have your links open to a new window, as this can be confusing for the screen reader user. There are cases where you still might want to do this, consider notifying the viewer.

Image Properties dialog boxAlternative Text For Images

When placing images onto web pages it is important to add what is called “alternative text” so that visually disabled viewers using screen readers will have information about the image. Ideally alternative text should be a short phrase that succinctly describes the image.

To assign alternative text to an image, access the Image Properties dialog box either at the time you are placing an image, or afterwards by right-clicking on the image and choosing Image Properties. On the Image Info tab that usually be selected by default, see the Alternative Text field directly under the URL field.

Basic Tips on Writing Alternative Text

  • Keep in mind that the text will be machine read.
  • Use words as opposed to abbreviations.
  • Write a phrase that is succinct, but adequately describes the image.
  • If there is text in the image that is important, that should be included in the alternative text.
  • Don't include "Image of ..." or "Graphic of...". Screen reader software announces "graphic" before reading the alt text.

See the article on the WebAIM site about writing effective alternative text

Empty Alternative Text

The Drupal system is configured to create empty alternative text if you leave the Alternative Text field blank in the Image Properties dialog box.

  • Consider if the alt text is useful content, if not, give it empty alternative text by not inputting any text in the Alternative Text field
  • If the explanation for the image is in the body text adjacent to the placed image, use empty alt text

Table Cell Headers

Table cell headers are important for accessibility compliance and visually help your viewers understand the relationship between cells that define content to the cells below or to the right or left of the header cell. Most commonly, table cell headers are used in the first row to define content for the cells below them. You can set table cells to be header cells in the Table Properties or Cell Properties. The style sheet has a style that puts a thick gray border under the header row of cells. See the following example of table headers.

Testing a Site with Siteimprove

SRJC has a subscription to Siteimprove, which is a tool to help check your site for broken links, misspellings, and accessibility compliance. Additionally, there is a robust analytics module to help track your site traffic. If your department has not been contacted about getting the reports sent to you, contact the IT department to get set up to use this tool. Reports get sent by email to users every five days.

Click the "Videos, Support & Tutorials" link under the left sidebar navigation to learn how to work with Siteimprove reports and tools.

Here is a direct link to an Accessibility Overview video on Siteimprove.

Accessibility Compliance of PDFs

Effort should be made to make accessibility compliant PDFs.

  • See the Creating Accessible PDF Documents page on the Web Accessibility site for Distance Education for information on making PDFs accessible.
  • A necessary tool in PDF accessibility work is Adobe Acrobat Pro. All employees using District computers can get access to this program by inquiring through IT.
  • Siteimprove has a tool to check the accessibility of PDFs.

ACCESSIBILITY COMPLIANCE OF Word Documents

Word documents may also need some work to make them accessibility compliant. See the Creating Accessible Word Documents page on the Web Accessibility site for Distance Education for information on making Word documents accessible. Microsoft Office version 2010 or later for the PC have an Accessibility Checker to aid in finding accessibility issues. Mac versions of Microsoft Office unfortunately do not have the same accessibility checking function, but accessibility features such as adding alternative text to images are included with the program.