Accessibility (or "A11y") for Cascade Maintainers

Overview

As a web contributor or maintainer, you will have 4 primary accessibility considerations to remember when creating content for the web.


History of Web Accessibility

Web accessibility has many components. Legally, the most pertinent legislation is the following:

A set of guidelines was created to meet the requirements set down by these laws.

Web Content Accessibility Guidelines (now on version 2.0 and usually referred to as WCAG)

The University of San Diego makes every effort to comply with these laws to ensure that all of our students, faculty, and staff can use our websites.

The Web Team has incorporated solutions to the majority of accessibility requirements into Cascade. However, as content contributors, there are a few things maintainers need to be aware of and with which they must comply.

The guide below demonstrates how to successfully comply with the most common accessibility issues maintainers face. 

  • Descriptive Link Text – Avoid using generic, or duplicate text for hyperlinks. This is most frequently seen with the use of "click here."
  • PDF Accessibility – Ensure text is accessible, and documents are not scanned images. Here is a site that covers how to convert an inaccessible PDF into an accessible PDF.
  • Images – Images should have an appropriate "alt tag." Any text contained in the image must be placed in the alt (but, image-based text should generally be avoided).
  • Headings – Never use heading 1. All page titles are automatically set as Heading 1 by default. Verify order and need for headings.
  • Tables – Tables should have a summary and have properly labeled header cells if appropriate. See Data Tables Accessibility.

Descriptive Link Text

All links must have text which remains meaningful even without context. People using screen readers may not have access to anything outside of the link text to inform them about the link.

Avoid using links such as "click here," and "RSVP."

Below are examples of accessible links and an inaccessible links.


Accessible Documents (PDFs)

Many users upload and link to PDFs and other document types. We must ensure that all documents are accessible.

Generally, try clicking on the text in the document and see if it highlights the text. If it does, then it should be accessible.

However, if the entire page or the entire document becomes highlighted, then it is probably a "flat image." This means that as far as computers are concerned, what looks like words to us is simply a random assortment of colors.

How to Convert a PDF to Be Accessible

A PDF with only a single word highlighted after double-clicking it. Accessible Document

Notice that when the word "only" is double-clicked, only it is highlighted.

A PDF with only a single image in the center selected after double-clicking the page. Inaccessible Document

Notice that when you double-click anywhere on the document, only the intractable page icon in the middle of the document highlights.

This means the document is not actual text, but a "flat image," and thus, inaccessible.


Alternate Text for Images

View of USD campus. Decorative Images Alternate text reads: View of USD campus.

Most images on the USD website are decorative. However, none of them should ever use the "decorative" option. USD is committed to producing experiences as comparable as possible to all its users.
Flyer for art exhibit. Text on it is faint and purposefully difficulty to understand. It reads, "Love is here to stay and that’s enough. Put it a tiger in your tank. Air conditioner. Hiroshima Mon Amour." Flyers Alternate text reads: Flyer for art exhibit. Text on it is faint and purposefully difficulty to understand. It reads, "Love is here to stay and that’s enough. Put it a tiger in your tank. Air conditioner. Hiroshima Mon Amour."

This is a flyer because the main content of the image is words made out of color contrast. No actual text occurs in the data of this image which means it has to be completely transcribed into the alt text description of the image.

Verbose Flyers

Some flyers contain a lot of written content or content in which the layout of the flyer itself is necessary to see in order to understand. Alt text should be kept short.

There are two options in either of these cases:

1) Write out the content of the image next to the image on the page like in this example.

2) Copy the text out into a Microsoft Word or other text editing application that's accessible, upload it to Cascade, then link it from the image. Make sure to list in the alt tag for the image that clicking the link will take the user to an accessibility friendly document of the image's content.


Heading Structure

Never Use heading 1. Heading 1 is reserved for webpage titles. Starting with heading 2, heading should be used appropriately to convey nested groups of data like a bulleted list.

Correct Heading Structure

Heading 2

Heading 3

Heading 4

Heading 4

Heading 3

Heading 3

Heading 2

Heading 2

Heading 3

Correct Bullet List Example

  • Heading 2
    • Heading 3
      • Heading 4
      • Heading 4
    • Heading 3
    • Heading 3
  • Heading 2
  • Heading 2
    • Heading 3

Incorrect Heading Structure

Heading 3

Heading 2

Heading 4

Heading 3

Heading 1 

Incorrect Bullet List Example

      • Heading 3
    • Heading 2
        • Heading 4
      • Heading 3
  • Heading 1