Steps in Using Sa11y in WordPress and a Bookmarklet

Summary: Sa11y is a free tool to anyone at UConn and can be added to your WordPress site or it can be used on any website as a bookmarklet.

Installing Sa11y

WordPress: request from ITS that Sa11y is added to your site. Once Sa11y is added to WordPress change the setting for Exclusions: #uc-header should be added in so it is ignored when viewing the webpage.

Bookmarklet: follow the instructions on the Sa11y article to add it as a bookmarklet

Using Sa11y

1. Click on the person icon that is located at the bottom right of the webpage

2. The total number of errors and warnings will show as well as options to view the page outline and settings.

   1. Errors are marked with a red triangle with an exclamation point symbol, some examples are:

      1. Links that are not descriptive

      2. Images that do not have alternative text

      3. Color contrast is too low (If turned on in the settings section)

   2. Warnings are marked with a yellow circle with a question mark symbol, some examples are:

      1. If the alternative text correctly describes the images or the links that are linked to it

      2. If the image is marked as decorative

   3. Green check marks at various locations on the webpage may appear if something is marked as all good, for instance if alternative text was appropriately given for an image, etc.
      
      

      Open

      

3. Page outline lists the heading levels in the order that they appear on the webpage

4. The settings section allows color contrast, form labels, links (AAA), and readability (AAA) checking to be turned on and off as well as an option to turn on Dark Mode and color filters. Note: We are striving to meet AA standards.

Open