Site Improve - Accessibility

Step 1 - Logging in and Finding Your Area

  • To log into Site Improve go to: https://siteimprove.com/
    Click the sign-in button at the top right hand corner (Figure 1)
    Site Improve website front page
    Figure 1
    NOTE: If you are unsure of your login, or have never received one, please contact the Engineering Communications Web Team.
  • Once logged in you should see a list of current sites with unique URLs (Figure 2).
    Click on "College of Engineering" or your relevant section
    Site Improve - Top Level Dashboard
    Figure 2
  • Once in you will see at the top of the screen two drop downs. One will now say "College of Engineering" the other will say "No Site Selected"
    Click on the "No Site Selected" and choose your section. In Figure 3, you will see there are two of every site. Please choose the one without a ~ in front of the number.
    Site Improve Website - Choosing a Site
    Figure 3

Step 2 - The Accessibility Area

  • On the left hand navigation bar, choose "Accessibility"
    Once chosen it will change the navigation on the left to the Accessibility menu. (Figure 4)
    On the Accessibility Menu, click on the "Issues" menu item.
    Site Improve Website - Accessibility Dashboard
    Figure 4
  • The Issues menu (Figure 5) shows the issues that Site Improve has identified, the number of pages the issue was located on, and the percent of change in the last 30 days.
    Choose an issue you wish to address and click on the description on the right. (For more information on what to address, check out Appendix A at the bottom of this guide.)
    Site Improve Website - Issues
    Figure 5


  • This page gives you an overview of the issue, how to fix it, and a chart to track progress made. (Figure 6) Below the chart is a list of pages the issue appears on as well as how many times the issue appears on the page. Click on the page link of any item in the list.
    Site Improve Website - Specific Issue list of pages
    Figure 6


  • This page shows the issues on the left hand side. You can switch between issues to find where on the page they occur (Figure 7). At this point, you can open Zope to that page and begin the edits suggested.
    Site Improve Website - Specific page showing an Accessibility error on a page.
    Figure 7

Appendix A - Site Improve Identified Accessibility Issues on COE Websites

  • A (COE) categorization of common issues:
    • Alt Tags
    • Depreciated Tags
    • Headings
    • Titles
    • Wording
    • Intermediate Fixes
      • WAI-ARIA
      • Forms
      • CSS
      • Media
      • Tables
    • Admin / Web Dev. Related Fixes


    WCAG Quick Reference
  • Common Alt Tag Errors

    • 2.4.4 – Image link is missing alternative text
      – Images do not have Alt text
    • 1.1.1 – Image with no alt attribute
      – Images do not have Alt text
    • 1.1.1 – The image does not have the correct alternative
      – The image has a title tag but no Alt tag
    • 1.1.1 – Alternative text for image is identical to link text
      – Be sure the Alternative Text describes the IMAGE that it is on (Some of these might be correct and should be noted as such)
    • 1.1.1 Should Image be marked as decorative?
      – The Alt Text is empty. If it is decorative mark it as correct, if it is not, add an alt text.
    • 1.4.5 – Is the image free of text?
      – Images should not have text or be properly described if they do.

    Common Depreciated Tag Errors

    • 1.3.1 - “Bold” tag used to format text
    • 1.3.1 – “u” tag used to format text
    • 1.3.1 – “Font” tag used to format text
    • 1.3.1 – “Small” tag used to format text
    • 1.3.1 – Reference to non-existent image map
      – usemap=”” can be removed
    • 1.3.1 – “Center” tag used to format text
    • 1.3.1 – “I” tag used to format text
    • 1.3.1 – “tt” tag used to format text
    • 1.3.1 – Is the “small” tag correctly used?
      – Be sure small tag is not used to make text smaller

    Common Heading Errors

    • 1.3.1 – Heading is missing text
      – there is no h1 or there is a heading that looks empty (Font Awesome Icons will cause this)
    • 1.3.1 – No headings on page
      – No Headings
    • 1.3.1 – No top-level heading on the page
      – there are no H1s
    • 2.4.10 – Headings are not nested properly
      – Headings are out of order.

    Common Title Errors

    • 2.4.2 – Webpage has multiple title elements or no title element
      – The <title> tag in the head is either missing or there are multiple <title> tags
    • 2.4.2 – Webpage title is missing text
      – There is no <title> tag

    Common Wording Errors

    • 2.4.4 – Link text is too generic in its current context
      – There is wording such as “Read More” or “Click Here” somewhere on the page.
  • Intermediate Level Errors

    WAI-ARIA

    • 1.3.1 – Generic landmarks are not named
    • 1.1.1 – "Aria-labelledby" has incorrect (ID) reference
    • 4.1.2 – Invalid WAI-ARIA role, state or property
    • 1.3.1 – WAI-ARIA group is missing a name
    • 3.3.1 – WAI-ARIA validation error is present when page loads 
    • 1.3.1 – Content not included in landmarks
    • 1.3.1 – Non-distinguishable landmarks
    • 4.1.2 – Redundant WAI-ARIA attribute
    • 1.3.1 – Are landmarks appropriately applied?
    • 1.3.1 – Could a standard landmark be used?
    • 1.1.1 – Does the "aria-label" attribute accurately describe the element?
    • 4.1.2 – Do WAI-ARIA roles match the functionality of the element?
    • 2.4.4 – Does the "aria-label" accurately describe the link?
    • 1.1.1 – Does the "aria-labelledby" attribute accurately describe the element?

    Forms

    • 3.2.2 – Missing button in form
    • 1.3.1 – Select box has no description
    • 1.3.1 – Input field has no description
    • 1.3.1 – Form elements are not grouped
    • 1.3.1 – Label is not connected to a form control
    • 1.3.1 – Text area has no description
    • 1.3.1 – Can options logically be grouped together?

    CSS

    • 1.3.1 – Element ID is not unique

    Media

    • 1.2.1 – Does video/audio have an alternative?
    • 1.2.2 – Is multimedia content captioned?
    • 1.2.3 – Does multimedia content have an alternative?

    Tables

    • 1.3.1 – Should the table have a description?
    • 1.3.1 – Does the table have clearly defined headers?
  • Admin / Web. Dev. Errors

    • 4.1.2 – iFrame is missing a description
    • 2.4.4 – Link text used for multiple different destinations
    • 1.3.1 – HTML is used to format content
    • 1.4.1 – Link identified only by color
    • 3.1.1 – Language of page has not been set
    • 1.3.1 – Element ID is not unique
    • 1.3.1 – Local link destination does not exist
    • 1.1.1 – "Area" element is missing alternative text
    • 1.1.1 – Page element has no description
    • 1.1.1 – Image alternatives don't match
    • 2.4.7 – Element not highlighted on focus
    • 1.4.3 – Color contrast is insufficient
    • 1.4.6 – Color contrast is insufficient