Ensuring Digital Accessibility

Headings communicate the organization of the content on a page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation. Headings are nested by their rank (or level) to comprise a “content structure”—the organization of content into sections using headings and subheadings.

Structure is critical for adaptive technology users, who rely on properly formatted headings to understand and navigate documents and web pages. Without this structure, the document appears as a single chunk of text and is read as a single long section because there is no easy way to navigate the content.Headings make the structure of your documents accessible to screen readers while improving both scannability and maintainability.

On the wiki, structure can be applied manually, through ​title modules, as well as automatically, through module titles​. (For more on this see the “Wiki quirks” section below).

The title module’s “prominence” corresponds with its heading level, so use the title module and adjust the prominence to structure your content on the wiki.

One of the modules created to help make the wiki accessible is called the “Jump Links Module,” which allows you to add a table of contents to your page. This makes your page content more accessible for everyone, as it allows your page content to be clearly laid out at the very beginning.

If you leave this module blank, it will automatically grabs each title throughout the page. For example, a blank Jump Links Module on this page, looks like this:

But the Jump Links Module you see at the top is customized to only include the 2nd prominence headers. To customize which titles are included in the Jump Links Module enter a Markdown list of links to anchors on the page, like so:

which will render as:

• Part One
• Part Two

Note: This module’s automatic function will only generate links for modules that come after it.

Many modules on the wiki have titles. All titles automatically have an H4 tag applied, and therefore, to include a module title before H1, H2, and H3 are also listed would not meet accessibility standards.

There are some modules for which a title is required, such as this one, the Accordion Module, but for all other modules with titles—including and especially Scrolling Text Modules—it’s recommended you add a title module with the appropriate prominence level before, and leave the Scrolling Text Module title blank.

TL;DR: Don’t use module titles, use *Title Modules*

For images inserted using the Single Image Module:

• Since this image is embedded within the page, you must include alt text in the appropriate field.

• What is alt text?

Alt text is a brief label contained in the HTML code for the image. Screen readers read alt text aloud, and browsers reveal the alt text when images fails to load. Good alt text should be brief: ​less than 250 characters​, and should ​convey the purpose of the image​, not describe it.

To learn more about alt text, read our “Digital Citizenship Toolkit” >>

For Background Module images:

• Background Module images have been deemed “decorative” by Yale’s Web Accessibility team.

• Because these images are decorative, you must remove the alt text that automatically loads upon uploading your image (the image’s file name) and leave the alt lext field blank.

Ensure your images remain legible by including any text-on-image as plain text.

Anytime you upload an image that has text on it (for instance, a poster for a lecture or exhibition), your alt text should not list out all the information on the poster.

Instead, all the text on the poster should be copy/pasted, either in the image caption or in a Scrolling Text Module directly following the image, and the alt text should direct the reader to that location.

For example:

• Poster for the Undergrad Thesis Exhibition: “Remade”. Full poster text in image caption.

• Poster for the Undergrad Thesis Exhibition: “Remade”. Full poster text below.

The alt text that will load automatically for each image uploaded to the wiki is the image’s file name.

Because this will never be appropriate alt text, you must always either delete the alt text (if the image is in a Background Module), or write appropriate alt text to include in the alt text field.