Ongoing ADA Compliance

Introduction

The instructions in this tutorial are meant to help maintain ADA compliance when new content is added to the website. This applies to everyone who produces content on a Digital Bell website, including teachers who are adding assignments to class calendars, and administrators/office staff who manage the home page. 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 sections explain how to resolve the three most common errors 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.

Note: If a Contrast Error (dark grey) is present in the summary, please contact support@gslsolutions.com and provide the title or URL of the page.

Flag Icon

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. 

Element Breakdown

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.

Error Icon Highlight

Using the WAVE Tool is the first step in the process. If errors are present, you can attempt to correct them, or contact support@gslsolutions.com 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 #1: Missing Aternative 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 Digital Bell 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. 

Note: Images of text must have the full text contained in the image transcribed as the alternative text, in order to be read out to visitors using screen reader technology. For this reason, we do not reccomend images that contain large amounts of text, or images of text as the primary means of communicating pertienent information.

  1. Posts (see "Create a New Post" for more information)
    • 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, and is most commonly used for School News posts on the homepage. 

        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.

  2. Text Blocks (see "Creating Text Blocks" for more information)
    • There are two ways to add an image to a Text Block: in the Content section, and the Properties 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.

      • Properties Image: Images are added to the Properties section when using specialized Text Block layouts, such as "Image Blocks" or "Table of Contents." 

        1. Expand the properties section and select or upload the image as you normally would. Once the image has been selected/uploaded, its thumbnail will appear in the Properties section. 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.

  3. Image Galleries 
Return to Top
Common Error #2: Empty Heading

Note: Correcting this error requires basic knowledge of HTML. If you are unfamiliar with HTML, please contact the support team to report the error.

This error is occurs when an empty heading tag is present in a Text Block, Post or FAQs "Title" or "Content" fields. The most common reason for this error is an empty space in the "Title" or "Group Title" fields. If your content element does not have a title, check for a blank space, and delete if present. Once deleted, click the "Submit" button to save your changes.

If a blank space is not present in the "Title" or "Group Title" fields, the empty heading is most likely present in the "Content" field of a Text Block, Post, or FAQ. The steps below explain how to troubleshoot this issue:

1. First, determine which Text Block/Post/FAQ the error originates from. Next, edit the page/post where the error is present.

  • If present on a page, click the Text Block or FAQ to open their editor.
  • If present in a post, edit the post's content (see "Editing an Existing Post" for more information).

2. Next, click the "Edit HTML Source" button on the editing toolbar (small "HTML" icon on the 3rd row). This will bring up the "HTML Source" window, which contains the HTML code that represents the content. In this window, you will be searching for the empty HTML "heading" tags.

Heading tags begin with a bracket, followed by an "h" and a number (<h1> to <h9>). The "h" stands for "heading," whlile the number denotes the heading level. There should always be a pair of heading tags: an opening tag (ex. <h3>), and a closing tag which begins with a "/" character (ex. </h3>). For example, the following is a pair of "Heading 3" tags: <h3></h3>

Normally, there would be text between the opening and closing tag, such as <h4>This is a level four heading</h4>. An error is caused when no text is present between the tags. Scan the window for empty heading tags, or search for the examples below (the most common empty heading tags):

  • ></h3>
  • > </h3>
  • ></h4>
  • > </h4>
  • ></h5>
  • > </h5>

The six examples above will only be present in the event of an empty heading.

3. If a pair of empty headings tags are found, delete them and click the "Update" button on the "HTML Source" window. After returning to the main editor, click the "Submit" button to save your changes.

Return to Top
Common Error #3: Empty Link

Note: Correcting this error requires basic knowledge of HTML. If you are unfamiliar with HTML, please contact the support team to report the error.

First, determine which Text Block/FAQ/Post contains the error:

  • If present in a Text Block or FAQ, edit the page that contains the Text Block/FAQ, then click on the Text Block/FAQ to open their editor.
  • If present in a post, begin by editing the post's content (see "Editing an Existing Post" for more information).

Next, click the "Edit HTML Source" button on the editing toolbar (small "HTML" icon on the 3rd row). This will bring up the "HTML Source" window, which contains the HTML code that represents the content. Here, you will be looking for empty anchor tags. Anchor tags are used in combination with an "href" value (a URL) and link text to create a hyperlink. Like heading tags, anchor tags come in pairs.

An opening anchor tag begins with a bracket, followed by an "a" and the "href" value (URL). For example, <a href="http://www.thedigitalbell.com"> is an opening anchor tag. Other, optional, values can be included in an opening tag, such as a "target" value (target="_blank"), which determines whether a link will open in a new tab.

A closing anchor tag begins with a bracket, followed by a "/" character (</a>). A complete pair of anchor tags will resemble the following: 

<a href="http://www.thedigitalbell.com" target="_blank"> </a>

Normally, there would be text between the opening and closing tags (ex. <a href="http://www.thedigitalbell.com">Visit The Digital Bell</a>). An error is caused when no text is present between the tags.

Scan the "HTML Source" window for the empty anchor tag, or search for the following characters:

  • ></a>
  • > </a>

The exact characters above will only be present in the event of an empty link. If found, you can either delete the the pair of opening/closing tags, or enter link text between the opening and closing tags. Finally, click the "Update" button to return to the main editor, then click the "Submit" button to save your changes.

Return to Top
How to Contact Support

If an error is present that you cannot resolve or have questions about, please send an email to support@gslsolutions.com with the follwing information:

  • Your name
  • The name of your school
  • The title or URL of the page/post where the error is present
  • Additional information relevant to the error (Optional)
Return to Top