Accessibility Tutorial

Please note that you should be following this tutorial only for page(s) that YOU are responsible for.

  1. Intro
  2. Accessibility Overview
  3. Pages
  4. Page Report
  5. Making Decisions
  6. Next Steps

I. Intro

Upon your first time using Siteimprove, you will be prompted to enter your UA username and password.  Login using your UA username and password.  Once logged in, the dashboard will appear, showing various statistics such as the Digital Certainty Index and Accessibility scores.  Along the left side of the screen is a menu bar where you can get more details regarding these statistics.  Displayed at the top of the page is your campus and the group(s) of pages you are responsible for. 

For this tutorial, we will only be concerned with the accessibility score.  Click on the "Accessibility" tab on the left menu bar, and then "Accessibility Overview".  Alternatively, you can click the "Improve score" button in the Accessibility panel on the dashboard.

Screenshot of Siteimprove Dashboard
Screenshot of Siteimprove Dashboard

 

II. Accessibility Overview

The Accessibility Overview page will be displayed, detailing the progress for the accessibility score among other things.  Under the four tabs ("Issues (all roles)", "Editor", "Webmaster", and "Developer) are two lists titled "Fix These Issues to Improve Your Score" and "Fixed Issues."  To see the unresolved issues with the pages that you are responsible for, click "See all issues" under the first list.  A new list titled Accessibility Issues will be displayed, showing what issues you can fix to raise your accessibility score, how many points you can gain from fixing each issue, and the points already gained.  You may have an issue(s) that says "Pages at level 2 with multiple Level A/AA errors" and/or "Pages at level 3 and above with multiple Level A/AA errors."  Click on one of these issues.

Screenshot of Accessibility Issues

III. Pages

A page titled "Pages" will now be displayed, with a list titled "Pages with WCAG issues."  Each page with issues will be listed along with their respective WCAG conformance level (A, AA, and AAA).  The university only needs to adhere up to level AA.  Click on any of the pages in the list.

Screenshot of Pages with WCAG issues

IV. Page Report

A report of the page you selected will be displayed with a preview on the right side of the screen, and any issues the page has displayed in a menu on the left.  Here, they are categorized into the kinds of issues they are, and what their WCAG conformance level is.  You can filter these issues by clicking the "Select issues" bar near the top of that menu.  Since we are only concerned with issues up to the AA level, click on "Select issues" and a dropdown menu will appear.  Uncheck the AAA Conformance checkbox, and then click "Apply selection."  You can click "Select issues" again to close the dropdown menu.

Screenshot of Page Report

V. Making Decisions

You can click on any of the categories of issues in the menu on the left side of the screen.  A dropdown menu will appear, showing the issues belonging to that category.  Displayed is the description of the issue, the number of occurrences of that issue, and a symbol representing its type, or "severity."  There are three different severities:

  1. Errors (exclamation mark)
    • Errors are issues that have failed to meet success criteria in the WCAG.  This includes things such as broken links that can be fixed using the WYSIWYG editor in OUCampus.  You can fix these issues by clicking "Edit in CMS" at the top of the screen, and fixing the respective error in the editor.
  2. Warnings (triangle)
    • Warnings are issues that are not necessarily errors, but could be fixed to follow WCAG best practices and improve accessibility score.
  3. Reviews (eye)
    • Reviews are issues that potentially don't meet best practices or success criteria, and can only be confirmed by manual inspection.

When you click on one of these issues, various details of the issue will be displayed.  You can make a decision for every occurence of the issue by clicking the gear icon to the right of the text that reads "Decision for this issue."  On the bottom of the menu, there is a box that reads "How do I meet this criteria?" which you can follow to fix the issue.

Screenshot of Review

Under the bar that reads "Occurrences on this page," you can make a decision for each occurrence of the issue on the page rather than all the of the occurrences at once.  To do this, click on any occurrence, and in the dropdown menu that appears, click on the gear icon to the right of "Decision for this occurrence."  From here, you can choose "Can't fix" if the occurrence is not fixable, or "Approved" if the occurrence meets WCAG standards.  In some occurrences, you can also choose if the decision will be applied to the current page only, or the entire site. 

You can see where the occurrence is on the page by clicking the "Page content" button under "Highlight in."  Siteimprove will highlight the occurrence of the issue in the preview on the right side of the screen.  Like the "Page content" button, the "HTML" button will highlight the occurrence of the issue, but in the HTML code of the page instead.  

Any issues of severity Error or Warning dealing with "aria-label," "aria-labelledby," or landmarks cannot be fixed by most users as it requires changing the source code, so these issues should be ignored.

VI. Next Steps

To fix another issue, click the left facing arrow near the top of the issue/left side menu, next to the issue's severity symbol.  From here, you can repeat step 5.  If you are finished fixing or reviewing issues on the current page, you can click the button that has two arrows going in a circular direction at the top of the left side of the screen to recheck the page.

Screenshot of Recheck Page button

Visit the official WCAG website for more information on accessibility and specific success criteria.