Introduction
The instructions in this tutorial are meant to help maintain ADA compliance when new content is added to the site. Spot-checking the new content you create will help ensure compliance with accessibility guidelines.
The first section explains how to install and use the WAVE Tool (which will allow you to screen your content for ADA errors), and the following section explains how to resolve the most common error you are likely to encounter. If an error is present that you are unable to resolve, please contact the support team.
- Installing and Using the WAVE Tool
-
The WAVE Tool is able to review the page you are on, and report any ADA errors that it detects. Chrome and Firefox are the only browsers that currently support the official WAVE Tool extension/add-on. Links to the offical extension/add-on are available at https://wave.webaim.org/extension/.
For more information on installation, WAVE Tool's official Help page is located at http://wave.webaim.org/help.
Once installed, a WAVE Tool button should appear in your browser's toolbar. Use the steps below to perform a review:
- Visit the page you would like to review on the public-facing website
- Click the WAVE Tool button in your browser's toolbar to prompt a review of the current page
Initially, a Summary section will appear in the left sidebar. For the purposes of this tutorial, we will focus only on the Errors that may be present in the Summary. Errors (red) will be listed at the top of the summary, if present.
To view the individual errors, click the flag icon. Errors (if present) will be sorted by type and amount (ex. "1x Missing alternative text"). Clickable icons corresponding to the amount will be shown below each type.
For example, if there is one "Missing alternative text" error present, one icon will be shown below this error type. Clicking it will highlight the error on the page with a dashed line, allowing you to narrow down the cause.
Using the WAVE Tool is the first step in the process. If errors are present, you can attempt to correct them, or contact [email protected] with their description (error type) and location (page title or URL). The sections below explain how to prevent and/or correct three of the most common errors.
Return to Top - Common Error: Missing Alternative Text
-
If you are unfamiliar with how to use alternative text, please revew the following article from webaim.org: https://webaim.org/techniques/alttext/
Images can be added to a HillTop website in a variety of ways. The instructions below explain how you can add alternative text to images in Posts, Text Blocks, and Photo Galleries.
- Posts
- There are two ways to include images in Posts: the "main" image, and "content" images.
- Main Image: The main image is attached in the "Image" section of a post, below the title and date.
1. Begin creating the post as you normally would. Once you have uploaded or selected an image, a thumbnail of the image will appear above the "Upload Image" / "Select from Warehouse" buttons. Click on the thumbnail, and a new tab/window will open to the image's "Edit Image" page in the Warehouse.
2. Here, enter a short description of the image in the "Title" field, and a detailed description in the "Abstract" field. Once complete, click the "Submit" button to save your changes and return to the post. - Content Image: Content images are included in the "Content" section of the Post. Unlinke the "main" image, the alternative text can be added in the "Content" section itself.
1. To add an image to the "Content" field, first click the "Add/Insert Image" button on the editing toolbar. This will cause a pop-up window to appear, where an image can be uploaded or selected from the Warehouse.
2. Select or upload your image as you normally would, then locate the "Image Description" and "Title" fields in the pop-up window's "General" tab. Here, enter a detailed description in the "Image Description" field should and a short description in the "Title" field.
3. Once complete, click the "Insert" button to add the image to the post. - Text Blocks
- Images can be added to a Text Block's Content section.
- Content Image: This field contains the main body of text/links/images. Alternative text can be added at the same time the image is inserted.
1. To add an image to the "Content" field, first click the "Add/Insert Image" button on the editing toolbar. This will cause a pop-up window to appear, where an image can be uploaded or selected from the Warehouse.
2. Select or upload your image as you normally would, then locate the "Image Description" and "Title" fields in the pop-up window's "General" tab. Here, enter a detailed description in the "Image Description" field should and a short description in the "Title" field.
3. Once complete, click the "Insert" button to add the image to the Text Block. - Image Galleries
- See Step #3 in the Managing Image Galleries tutorial - Adding Titles/Descriptions and Reorganizing the Gallery.
This step explains how to add a title and description to your gallery images, which are used for alternative text. Enter a short Description in the "Title" field, and a longer description in the "Description" field.
- How to Contact Support
-
If an error is present that you cannot resolve or have questions about, please send an email to [email protected] with the follwing information:
- Your name
- The name of your office/committee
- The title or URL of the page/post where the error is present
- Additional information relevant to the error (Optional)