1. Run the Scanner On Your Site

  • On your WordPress admin site, while viewing your site, go to the administrator bar at the top of the page and hover over the “WCAG Check” button (Image 1).
Image 1
  • Choose one of the checks available to you:
    • Basic page check: Checks the current page up to A standard for WCAG 2.1
    • Full page check: Checks the current page up to AA standard for WCAG 2.1
    • Full site check: Checks the entire site up to AA standard for WCAG 2.1
  • For More information about conformances, click on this link -> Web Content Accessibility Guidelines (WCAG) 2.1
  • Once you have chosen one of the checks, all items that may need to be altered will appear highlighted with a question mark icon next to them (Image 2).
Image 2

2. The “Read more here” button

  • Once the scanner has been run, you can click the question mark next to the highlighted elements to open a description of the affected item. To open the recommendation on how to fix it click on the “Read more here” button (Image 3).
Image 3
  • This will most likely open another window that has information on it about what might be wrong and how to fix it. Make sure to keep track of this information (Image 4).
Image 4

3. Reading the Scanner Logs

  • Sometimes everything that is not accessible cannot be highlighted on the page itself. Because of this, when the scanner is run, it creates a log and records all of the information about any parts of your website that might not be accessible. This information can be seen in the “Scanner Logs”.
  • To access the “Scanner Logs”, go to your side navigation menu on your WordPress admin site, hover over the Purple Lens icon, and choose the “Scanner Logs” option from the side menu (Image 5).
Image 5
  • Now that you can see the “Scanner Logs” table, here is an explanation of what each of the columns mean:
  • First Column: Page
    • This column shows you the name of the page where the accessibility concerns are (Image 6). If you click on the name of the page, the indicated page will be opened in a new window.
Image 6
  • Second Column: Affected Nodes
    • This column shows the number of elements on that page that demand attention (Image 7).
Image 7
  • Third Column: Used Toolbar Options
    • This column shows whether or not any of the nodes were automatically fixed by the toolbar, meaning you don’t have to do anything (Image 8)!
Image 8
  • Fourth Column: Time of Scan
    • This column shows what time the scan took place (Image 9).
Image 9
  • Fifth Column: Data
    • This column contains a link to a pop-up that gives you more information about each of the elements that may need to be improved (Image 10). More detail is given to the information in this pop-up further down this page.
Image 10
  • Sixth Column: Type
    • This column shows whether the information for that row was collected during a “Full Site Check” or a “Full Page Check” (Image 11).
Image 11

4. Interpreting the “Show data” pop-up 

  • The fifth column of the “Scanner Logs” table is labeled “Data” and contains clickable text that says “Show Data”. Once this text is clicked, a pop-up of another table will appear (Image 12). 
Image 12
  • Now that you can see the “Show Data” pop-up, here is an explanation of what each of the columns mean:
  • First Column: Affected Items
    • This column groups similar errors into one field and shows how many elements are being described in that row (Image 13).
Image 13
  • Second Column: Description
    • This column offers a short explanation of the error (Image 14).
Image 14
  • Third Column: Rule
    • This column shows what rule was either broken or fulfilled (Image 15).
Image 15
  • Fourth Column: Selectors
    • This column shows the name of the selector or selectors that have violated the rule (Image 16). A selector identities the exact element that has broken the rule. This is a very important column because this information will be needed in the “Site Settings” section in order to fix any accessibility issues.
    • If a row contains multiple affected items as identified in the “Affected Items” column, this column will have multiple selectors, separated by commas
Image 16
  • Fifth Column: Information
    • This column contains a link that will open another window with information about how to fix the specific issue in that row (Image 17). Make sure to keep track of this information.