Drupal Support

1. Check your Word, PDF, Excel, and PPT documents.

All documents uploaded to the university site must be accessible. The Center for Enhancement of Learning and Teaching has compiled some excellent resources for instructors.

Microsoft Word Documents

Use clear headings, readable fonts, and alternative text for images.

CELT's Checklist for Word documents Microsoft's Built-in Checking tool

PDF Documents

Use clear headings, readable fonts, and alternative text for images.

CELT's Checklist for PDF documents Adobe's Built-in Checking tool

Powerpoints

Use high color contrast, descriptive slide titles, and alternative text. Built-in layouts are usually the best option to make this easy.

CELT's checklist for Powerpoints Microsoft's Checklist for Powerpoints

Excel Spreadsheets

Use clear and meaningful naming conventions and avoid merging cells. Complicated formatting and dynamic workflows within a spreadsheet may not break any rules, but make it difficult for anybody except the creator of the sheet to follow, so refactor your spreadsheets for simplicity.

CELT's checklist for Excel spreadsheets Microsoft's checklist for excel spreadsheets

Document Listing Module

Consider using the module below when you need to upload multiple documents in a single section of your site. It provides the user with more information about the document before they click, such as the upload date and file extension.

2. Don't use text in images.

According to section 1.4.5 of the Web Content Accessibility Guidelines, to reach the mandatory level AA standard, the following must be observed:

"If the same visual presentation can be made using text alone, an image is not used to present that text."

Users with visual impairments use screen reader software to navigate the page, and screen readers will miss any information rendered as images. Therefore, images should always be supplemental to the information that needs to be conveyed, rather than its only source. We fill the media library with generic campus shots so you can quickly fill an image slot with a nice-looking supplement and focus on conveying your information through text.

We most often see this violated when publishers post to the Events Calendar. Many offices have flyers or branded graphics with slogans that they have already prepared for events, so we understand that it is quickest and easiest to upload these directly into the Image slot when creating an event. But it is not accessible. When filling out an event, you must enter all information in the provided text fields. If any information doesn't fit, put it in the Body field, which has no limit on the amount of content it can hold.

Violating Example: A past event that uses text in its image.
Good Example: A past event that uses a generic image.
Good Example: A past event with no image uploaded, resulting in a fallback image.

3. Structure your content cleanly in the text editor, using appropriate headings.

When working in the WYSIWYG text editor, paste styled text from other editors and clean it up using the Remove Format button.

Order all headings descending numerically. H3 comes before H4, H4 comes before H5, and so on. You can use the same heading level more than once in a row, but never skip a level.

4. Links and buttons should have specific labels that emphasize keywords.

According to section 2.4.5 of the Web Content Accessibility Guidelines, to reach the mandatory level A, the following must be observed:

"The purpose of each link (or image button or image map hotspot) can be determined from the link text alone, or from the link text and its context (e.g., surrounding text, list item, previous heading, or table headers). Links with the same text that go to different locations are readily distinguishable."

To improve search engine optimization and provide maximum context (especially for screen reader users), linked text should prioritize keywords. By linking keywords and removing filler words, the links will make sense out of context when the user is scanning the page quickly or when a screen reader reads the label for each link sequentially. Often, the best combination for a link is two words: the keyword that describes the content behind the link and a verb that describes how users will access it. See examples below.

5. Consider contrast of the background image with overlay text in banners.

According to section 1.4.3 of the Web Content Accessibility Guidelines, to reach the mandatory level AA, the following must be observed:

"Text and images of text have a contrast ratio of at least 4.5:1. Large text - at least 18 point (typically 24px) or 14 point (typically 18.66px) and bold - has a contrast ratio of at least 3:1."

In almost all cases, Drupal's design constraints ensure that the text you enter on your webpage has sufficient contrast for accessibility. The one module where this becomes a potential concern is the "Banner - CTA" module, because it overlays text on a background image. See examples below. In most cases, the contrast will take care of itself, even in this module, because the Banner - CTA includes a script that reads the color profile of the background image you choose and applies an appropriately dark tint to the image.

However, there may be cases where the dynamic contrast checker doesn't get it right, especially when the image is complex and mostly light-colored. There may also be cases where the contrast is technically achievable, but you would prefer the text to be even more readable. In these cases, you can manually increase the image's tint level. Go into the "Settings" tab of the Banner - CTA, and enter a value between 0 and 1 in the "Tint amount override" field." When you get above 0.6, the tint becomes very dark and should make the text readable in almost all cases. While manually adjusting, it is a good idea to run your page through the WAVE accessibility checker to ensure the contrast ratios are correct.

6. Write good alternate text when uploading images.

When you are uploading a new image file to the media library, after you fill out the Name field, you will have to fill out the Alternative Text field. This is a required field, so there's no risk of missing it, but it's important to know the function of alternative text so that you can fill it out as best you can. Alternative text is read by screen readers to provide information about the image to users with visual impairment. Therefore, alternative text should describe the image so that all of our users can understand its content.

When writing alt text, keep it concise. One sentence describing the image's central subject is usually enough. Sentence fragments are fine too, and often a noun phrase is most direct, such as "A group of students working in the library." Make sure to end your alt text in a period, though. See some examples of images with alt text below.