Siteimprove Web Accessibility Tool

This Articles applies to: Client content editors
 
Texas A&M University has purchased a 3rd party service called Siteimprove that scans our client’s websites and provides reports on web accessibility compliance, SEO optimization, and website quality assurance in an easy to read and fix format to our clients.  Web Accessibility is a shared responsibility between clients (content editors) and IT.  PITO and clients are working together in partnership towards website accessibility compliance.

If you do not have a Siteimprove account and you are a content editor for a Kentico website that PITO supports, please request access using our helpdesk system, ServiceDesk Plus (SDP).
  

Get Access to Siteimprove

  1. Login to the PITO Siteimprove Portal.
  2. The step above will automatically create your account, but does not give you access to anything yet.
  3. If you have already submitted a ServiceDesk Plus (SDP) request asking for access to Siteimprove, then reply to the ServiceDesk Plus (SDP) email you received to notify us that you have logged in and created your account.
  4. Otherwise, request access to Siteimprove by submitting a request using our helpdesk system, ServiceDesk Plus (SDP).
  5. We will add your account to the site(s) you manage and notify you when you can access your sites.
  

Training

  1. Login to the PITO Siteimprove Portal.
  2. From the top menu, click on the Help Center and Academy menu and select Get Started from the drop-down. View the 7 articles.
  3. Go back to the Siteimprove Portal and from the top menu, click on the Help Center and Academy menu and select Academy from the drop-down.
  4. Click on Course Library on the top menu.
  5. Select a "learning path" and start taking courses.  We recommend taking the following learning paths in order:
    1. Web Fundamentals: Accessibility, Analytics, and SEO.
    2. Accessibility for Content Contributors and Designers
  

Start Fixing Issues

View a Report of Accessibility Issues

  1. Once you have been notified that your Siteimprove account was added to the proper Site, login to the PITO Siteimprove Portal.
  2. Click on the Site drop-down button to display a list of Sites that you have access to.  Select your Site (in the example below we selected “PITO - http://financialaid.tamu.edu”).
  3. Next, on the left-side menu, click on the Accessibility tab.
    Siteimprove select site dropdown and toolbar
  4. Click on the Accessibility overview sub-tab and you will see your current Accessibility score.  If you scroll to the bottom of the page to the Fix these issues to improve your score section you will see the top 5 issues that if fixed will provide you the greatest improvement of your score based on your role as an editor (Content Writing).  Siteimprove categorizes issues by users that “most likely” have the responsibility(and access) to make the fixes (e.g. Content writing, Development, UX design, Visual Design).  For the most part, the issues that are our client’s responsibility, can be found under the Content Writing responsibility/area. 
    SI-AccessOverview.jpg
  5. Click on the Issues sub-tab to display the full list of confirmed Accessibility issues on your website in a sortable and filterable table.  Above the list of issues is a filter for Responsibility. Select the checkbox for "Content writing", then click on the Confirm button to filter the list of issues to those that you most likely have access to fix. 
    SI-FilterIssuesContentWriting-(1).jpg
  6. Fix all Issues identified by Siteimprove for the “Content Writing” Responsibility. There is a possibility that you will not have access to fix every item filtered into the "Content writing" responsibility.  There is also a chance that some issues that are your responsibility and that you have access to fix are actually listed under one of the other responsibility area (Development, UX Design, etc).  As you start addressing these issues you will be able to tell which ones have to be fixed by PITO.  PITO is working to address the remaining issues found under the other Responsibility areas with website redesign projects.​
  7. To start fixing issues, sort the list by clicking on the "Points you can gain" column heading to sort the items that give you the most points earned with a fix at the top.  This helps you prioritize your fixes.
  8. Click on the first issue in the list to see all pages that have that specific issue. In the example below, we selected the Issue “Link without a text alternative”
  9. This next page displays all pages of your website that have that specific Issue, along with a description of the issue and how to fix it. Click on the first page in the list to start evaluating the “Occurrences” of the issue on that page.
  10. A new browser tab opens displaying the Siteimprove Page Report.  To see where the Occurrences of the “Link without a text alternative” issue are for this page ("What We Offer"), click on them in the Occurrences section on the left side pane (you may have to click on the down or up icon to display/collapse each occurrrence). For each occurrence you can see a visual highlight (circled below with the Siteimprove semi-shaded rectangle with a red border).  This view is shown by clicking on the Content view button.  If you need more context or to see hidden content/code issues, click on the HTML view button.
  11. Click on the link to that page at the top to go straight there in your browser.
  12. To edit/fix the issue in Kentico the way you normally add/modify pages on your website, login to your Kentico website and find the page in your content tree, fix the issue, then Skip to step #9 in the Fixing Accessibility Issues with the Kentico On-Page Edit Option section below.

Fixing Accessibility Issues with the Kentico On-Page Edit Option

  1. Shortcut On-Page Edit Option:  alternatively, you can fix this issue using a shortcut for on-page editing. 
    1. At the top of the Siteimprove Page report, there is a link for your page.
    2. Click on that link to pull up the website page. 
    3. Then, add "?Edit" at the end of the URL and press the Enter key on your keyboard.  For example, to edit this page in Kentico - https://pito.tamu.edu/Self-Service/Kentico/Requesting-a-MediaSite-Account, you would add ?Edit to the end of the URL/Address bar of your browser like this - https://pito.tamu.edu/Self-Service/Kentico/Requesting-a-MediaSite-Account?Edit.
  2. If you used the shortcut link (?Edit) above, then you will be taken to the Kentico on-page editing feature.  Click on the Edit Page button in the upper left of your website.
    Screenshot of the Edit page sticky button to edit the currently displayed page.
  3. The Kentico on-page editing toolbar appears at the top of your page.  Now hover your mouse cursor over the section of your website that has the instance of the issue you would like t fix.
  4. If you have access to edit that part of your website, that area should have a rectangular dashed line border around it (e.g. “-------------“), and a region label box should appear for it with a pencil (edit) icon. In the example below, that region is titled SquaresEditableText.
  5. Click on the pencil (edit) icon to start editing that region of this page.
    Screenshot of the Kentico on-site editing toolbar and regions that can be edited by the CMS Editor.
  6. If your site has a workflow assigned to it, as usual, you will need to click the Check out button first before you can edit the region.
    Screenshot of the Editable Text region that must be checked out in order to edit.  Displays as being published and not checked out.
  7. The WYSIWYG Editor toolbar now appears and you edit your site like you do normally in Kentico.  Remember to Save, Check in & Publish.
    Screenshot of the WYSIWYG toolbar and editing mode for the region of the page the editor can edit.
  8. Close the browser tab for Kentico and click on the Siteimprove Page Report tab/page in your browser to continue working your way through the remaining occurrences found for this specific issue on that page. 
  9. Click on/return to the browser tab/page listing all pages on your site for the original specific issue you were working on, and click on the next page in the list of occurrences identified for that issue.  Repeat the steps above for that page, until you have fixed all the issues for all the pages of your site under the Content writing filtered responsibility.
  10. The Siteimprove website groups violations by WCAG 2.0 Level A, AA, & AAA.  If you use this view/report to address the issues on your site, it is best to work on addressing accessibility issues top down, in the following order, to see the fastest improvement:
    1. First, address WCAG 2.0, Level A Errors     (Circle icon with an explanation point “ ! “ inside)
    2. Next, address WCAG 2.0, Level AA Errors    (Circle icon with an explanation point “ ! “ inside)
    3. Then, address WCAG 2.0, Level A Warnings     (Circle icon with a triangle inside)
    4. Fix WCAG 2.0, Level AA Warnings     (Circle icon with a triangle inside)
    5. Finally, go through any WCAG 2.0, Level A & AA Potential issues and manually review the items    (Circle icon with an eye inside)
       
  11. Click on the Potential issues sub-tab to fix these issues as well. The Potential issues tab lists all potential issues that will require a manual inspection/verification to confirm if they are an actual issue.
  12. Potential issues must also be manually marked as completed/fixed.  When viewing the issue on a particular page on the Page Report, go through each occurrence and click on the Start review button to go through the guided process to determine if the issue is a real issue and if it has been resolved.
 

Setup Siteimprove Accessibility Reports to be Emailed

Setup a Siteimprove report to be emailed to you on a regular basis so that you can be kept abreast of any recent accessibility issues that may have been introduced into your site and to keep up with remaining issues and progress.
 
  1. Click on your name in the upper right of the screen, and select My Profile.
  2. Then click on the Reports sub-tab.
  3. Click on the Accessibility tab, then on the Accessibility Report, click on the New schedule button.
  4. Select the site you want an email report from in the site drop-down list that appears.
  5. In the New Schedule window, select the schedule interval (frequency you want the report emailed to you).
  6. Check the checkbox next to Entire site.
  7. Now select the email recipients by clicking on the "Recipients for this report" link.
  8. Select your email address and anyone else on your team that wants the report emailed to them.
  9. Save and then click on the Save schedule button.
 

Additional Resources

  • We highly recommend you take the free in-person EOD Course 2111936 - Web Accessibility - Essentials – EOD.  This course will teach the fundamentals of web accessibility and foster understanding in how you can maintain an accessible site.  It is great for content editors and developers alike.  Client content editors and PITO web developers and application developers are all required to take this or an equivalent website accessibility course before editing production websites.
  • Review the Complete List of Siteimprove Interactive Tutorials starting with the Accessibility tutorials first.
  • As you start working on resolving web accessibility violations and quality assurance issues, you may want to refer to the TAMU IT Accessibility website.  Texas A&M websites and web applications are expected to meet the required Accessibility Standards from the W3C’s Web Content Accessibility Guidelines (WCAG), Level AA. 
  • Siteimprove also identifies broken links and misspellings on your website.  This is the Quality Assurance tab/feature on their website.  Once you have addressed the Accessibility issues, we recommend you look at this feature to tackle any issues identified there and watch the Quality Assurance Tutorials here - Complete List of Siteimprove Interactive Tutorials.
  • At any time on the Siteimprove website, you can access help resources inside Siteimprove from the “Help Center and Academy” menu.