A Quick Web Accessibility Checklist for our Content Editors

While the following is not a complete list of DOs and DONTs, it is a quick list adapted from a SiteImprove document on Web Accessibility

Page Structure

If you have a simple page, you may not think of page structure as being important, but any time you have multiple content areas on a page, page structure becomes an important part of accessibility. Here are some things to consider:

Organize the page content using a semantic structure so assistive technologies, search engines and site visitors can easy find their way around a page. One of the best ways to do this is the proper use of headings (h2, h3, h4, h5, and h6). Notice, I specifically skipped the h1 heading because by default, this heading is preset to the page title. After that, use page headings like you would when creating an outline of the content page to indicate different content areas that are at the same level or at a subordinate level. Never skip levels.

Focus on readability and usability. Do not create long pages that require excessive scrolling to see all of the content. If your content has more than a paragraph or two, it may be helpful to split the content with sub headers. For example, if you have a page that lists all of your policies, the top-level header might be: <h2>Policies</h2>. Then the name of each policy on the page might begin with <h3>Policy 1</h3>, <h3>Policy 2</h3>, <h3>Policy 3</h3>, etc. If you have different areas of content within a policy, you might use <h4>Policy 1 – Topic 1</h4>, <h4>Policy 1 – Topic 2</h4>, and so on.

Titles

Every page must have a Title. This is the user-friendly version of the page name. It is the name used in the menus and navigation elements of your page. However, it does not have to be the same as the page name. For example, if you are an elementary school, you can have separate pages under each grade with the name: Supply List. Because the page name is really referenced by the hierarchy to get to that page (ie: /academics/Grade1/Supply List), browsers will not be confused by having the same page name. However, because Page Title alone is often used by assistive technologies, it can be confusing to have multiple pages with the same title. To further confuse things, the Presence New Page and Edit Properties dialogs refers to the Page Title as the Page Name and the Name property as the Page URL. Perhaps they thought they were helping editors differentiate between these two properties. However, this does lead to confusion when talking about other things such as the fact that the page title appears on multiple pages within a site (where site is defined as a domain or subdomain). To correct this issue, you can go into the page properties and first remove the synchronization between Title (Page Name) and Name (Page URL) and then enter a unique title for the page such as: Grade 1 Supply List as shown in the following image.

Text

Use of proper headings is a must within your content. If a page has any content at all, it should have a header. If you have a page without any text content, with only perhaps a link to a document or another page, consider replacing that content page with an external link page linking directly to that document or other page. This saves the user an extra click.

Avoid instructions based solely on the location of items on the page. For example, instead of referring to the information on the right, combine the location with text (possibly the header of the content area) such as: “as shown to the right in the ‘Useful Links’ section of the page. You may even want to limit the text to something like: “as listed in the Useful Links portion of this page”. The reason you might want to limit a location direction is that when you display the page on a mobile device rather than a large computer screen, the device may automatically rearrange the different components of the page.

I’ve seen some pages with both English and Spanish text on the same page. The problem is that most screen readers and Braille devices cannot automatically identify the language used from the text alone. It must be identified. By default, all OCPS pages are assumed to be in English. However, if you repeat a section of the page in another language such as Spanish, you must use the <blockquote>, <div>, or <p> tag to identify that language as in:

<div lang=”es”>

<p>Lake Nona Middle School es ahora una escuela HERO!</p>

<p>HERO anima a los estudiante a tomar decisiones de comportamiento positivo. &nbsp; Cuando los estudiantes demuestran comportamientos HERO, adquieren puntos para obtener incentivos. Invitamos a los estudiantes y padres a registrar sus propias cuentas de HERO para as&iacute; poder mantener abiertas las l&iacute;neas de comunicaci&oacute;n entre el hogar y la escuela. Una vez que se haya inscrito, podr&aacute; descargar la aplicaci&oacute;n de HERO para comenzar a recibir notificaciones sobre el comportamiento de su estudiante durante todo el d&iacute;a. El estudiante y los padres tendr&aacute;n su propia cuenta de inicio de HERO.

</p>

</div>

Links

Insure that the link text makes sense when read out of context. Therefore, you cannot say just: “Link” or “Click Here” and you can definitely NOT simply repeat the URL of the link.

Try to keep the meaningful link text to 100 characters or less.

Images

Use alt-text on images to accurately reflect the purpose of the image or to provide an accurate description

If the image is linked, also describe the link destination in the alt-text

Minimize using images with text in them. If the image does have text, the alt text must communicate the same information as the text in the image.

The alt-text for a graph or diagram must explain the meaning of the graph or diagram or additional text elements must be present and associated with the image.

Lists

Use a bulleted list to provide a list of items or information in which the order is not important. For example, an ingredients list for a recipe can be in any order. Do not include more than one item per bullet.

Use a numbered list to provide a list of items or information in which the order is important. For example the steps to make something usually must be followed in a specific order. Do not include more than one item per numbered step.

A definition list is a special two column list and is meant to provide a list of terms and their definitions or similar information as shown in the following:

<dl>
  <dt>Coffee</dt>
  <dd>– black hot drink</dd>
  <dt>Milk</dt>
  <dd>– white cold drink</dd>
</dl>

Do not use a list just to format text on the page.

Video & Audio

Closed Captioning and Audio Descriptions are required for all video. Closed captioning is the text that often appears at the bottom of a video that displays in text what is being spoken in the video and helps the audio impaired. Audio Description for a video is a second audio track that describes the action that is occurring in the video for the visually impaired. Both are now required.

Check out this link from TechSmith about Audio Descriptions: https://bit.ly/2WNzss6 including this link to a fun example of Audio Description: https://youtu.be/7-XOHN2BWG4.

Review any closed captioning or audio description created for accuracy. Note that sometime audio description may fall slightly behind the action on the screen, but that is not critical as long as it catches back up. When the video has a large amount of regular audio content as in a class lecture, you may be able to interweave the audio description which may change little with the regular audio.

Any audio content must have a transcript as well. This includes the audio description track.

Readability

Use short concise sentences. Use shorter, common words when possible.

Keep the length of paragraphs to as short as possible to complete a single thought.

Use headings (described above) to split content into logical chunks that can be used by the visually impaired to find the information they need.