Website accessibility

Alt text

Alt text provides a non-visual method of communicating content or function of an image to a sight-impaired user. The types of images that require alt text include:

• pictures
• illustrations
• images of text
• shapes
• charts
• embedded objects

Adding Alt Text

After image has already been uploaded

• In editing mode, click on the image
• Select the pencil icon in the menu bar
• Find the Alt Text field
• Add appropriate text
• Update

When uploading new image

• After selecting new image to upload
• Fill in Alt Text field

Alt Text Best Practices

• Present the same content or function as the image.
• Be succinct—usually a few words or short sentence is sufficient.
• You don’t need to use phrases such as “image of…” or “graphic of…”
• If an image is a person (such as a headshot), their name as the alt text is perfectly appropriate.
• If an image provides no support to the page content (i.e. it is a color box; you may add null to the alt text which tells the screen reader to bypass the image.
• Additional information on alt text

Headings and tables

Content needs to be organized in a logical, easy to follow manner using header tags (H1, H2, H3, H4) to help screen readers and other assistive technology navigate the content. Using the proper structure allows screen readers to skim through the page and hear an outline of the main ideas, much like sighted users do. They can then go back to read the parts of interest/importance. The lack of headers makes this process impossible, and the screen reader has to read the entire page from start to finish.

Hierarchy Structure

Pages should be structured in a hierarchical manner:

• Heading 1 is the page title. This is created automatically by WordPress and requires no action by you.
• Heading 2 is a major section heading. There can be a number of these on a page.
• Heading 3 is a sub-section of Heading 2.
• Heading 4 is a sub-section of Heading 3.

An example of a hierarchy outline:

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

Create a Heading

To create a heading, highlight the text and select the appropriate heading in the WYSIWYG.

Tables

Instead of using the Insert Table feature in the WYSIWYG, go to the left navigation in editing mode.

• Select TablePress
• Add New Table
• Create a Table Name
• Select the number of rows and number of columns
• Add Table

• Add content into the fields as needed.
• Please make sure under Table Options that you check Table Head Row: The first row of the table is the table header.
• Add the header row data into that row so it’s clear what type of content the rows hold (this helps make the table accessible).
• Make any other modifications allowed to your table.
• Save changes.

• Go back to the location you’d like the table to go
• Open that WYSIWYG
• Click on the icon Insert a Table from TablePress

• A box with a list of your tables will appear
• Select which table you’d like to add
• Click Insert Shortcode button
• A small piece of shortcode will be added
• Click Save & Exit
• Table should appear on your page

Link text

Helping users understand the destination of links is important in increasing the accessibility of a webpage or document. Screen readers can scan a page for hyperlinks, so it’s important that they make sense without the help of their surrounding content.

• Use link text that details its destination, not just “click here” or “learn more.”
• Use multiple words or a short phrase—single words are difficult for individuals with limited motor control to hit.
• Highlight only the one-to-three most important words, NOT "click here."
• Don’t use the actual URL as the link.

Examples

YES: Colorado School of Mines is accepting applications for Fall 2023 now. Submit an undergraduate application.
NO: Colorado School of Mines is accepting applications for Fall 2023 now. Click here to find out more.

YES: Students interested in buying Mines apparel can shop on the bookstore website.
NO: Students interested in buying Mines apparel can look on the website.

Image links

If you use an image to create links, make sure the destination is included in the image alt text.

Link names to avoid: click here, read more, additional info