Summary: An overview on how the Dashboard in Dinolytics works. The five primary widgets of the dashboard are explained in greater detail.
The dashboard widgets
- Widget #1: Result Types
- Widget #2: Most Common Issues
- Widget #3: Scan Details
- Widget #4: Errors By Group
- Widget #5: Issues Over Time
Widget #1: Result types
The Results Types widget combines the results of the scan into different 6 reporting categories.
As the Dinolytics Platform is powered by the WebAIM’s Accessibility Scanning Tool (WAVE), our dashboard uses the same reporting categories as WAVE. Although many people are familiar with WAVE’s reporting categories, we will quickly review them here.
Errors, Alerts, and Contrast Errors
The first three reporting categories are identifying places where there are accessibility issues (or in the instance of Alerts a high likelihood of an accessibility issue).
- Errors: WAVE takes great care to not give false-positives in classifying something in this error category. These are accessibility errors and should be looked at for remediation.
- Alerts: Alerts are flagged because they are either accessibility errors or are suspicious. Alerts may or may not be an accessibility error. The accessibility impact can vary based on context. They require careful scrutiny. For this reason, they are classified as an alert. The following are examples of some of the most common alerts: Redundant title text; redundant links; very small text; tabindexes; nearby image has the same alternative text; skipped heading level; etc. The alerts also identify links to PDF, Word, and Excel documents as well as the Audio/Video, Flash, and other Plugins.
- Contrast: The scan detects instances on your page where the color contrast is an issue based on WCAG 2.0 guidelines. For more information about how WAVE analyzes contrast errors, you can visit and try out their Color Contrast Checker.
Structure, Features, and ARIA
The next three reporting categories are informative and do not necessarily mean there is an error. In fact, many times these elements are needed to design an accessible web page. But, if they are used incorrectly (or overused) they may present barriers to accessibility. Structural elements, Features, and ARIA are identified so that they may be manually evaluated as part of your comprehensive accessibility testing.
- Structure: Dinolytics identifies where web pages contain common structural elements. The following are some of the structural elements that are detected: Headers; data and layout tables; ordered, unordered, and definition/description lists; inline frames; etc.
- Features: The features response category points out when the web pages contain common accessibility features. These are things that improve accessibility if used correctly. The following are some of the features that are identified: Alternative text; null or empty alternative text; skip links and skip link targets; form labels; field sets; etc.
- ARIA: Aria brings to your attention anytime that ARIA was used in the web pages scanned. Most ARIA items require a manual review to see if they are used properly. For more information on ARIA, we recommend WebAIM’s blog post on the topic: Accessibility of Rich Internet Application.
Drilling down into result types
Related Video: How to drill down into results
You can quickly drill down on each of the reporting categories in the Results Type widget. This allows you to see specific errors, alerts, features, etc., which websites have these errors, and finally which web pages have the errors.
For example, after navigating to the dashboard, a user could go to the Results Type widget and navigate to the Errors category. This would change the dashboard to include a view of all the Errors detected in the scan. In the example shown below, there are Empty links, Missing labels, Missing alternative text, and so on. The most common error in this example is Empty links.
A user can then drill down into any specific error to see the websites where that error is present. In the example below the website with the most empty links is MainDomain.demo, it has 3,742 empty links across 450 pages.
A user can then drill down one more level on a website to see which specific pages have that error. In the example below the page with the most Empty links on the MainDomain.Demo site is /maps with 15 errors.
Drilled down to this view, the widget also provides the user with a direct link that takes them to WAVE. Within WAVE the user sees the actual error on the web page, views the line of code where the error is located. WAVE also provides information specific to each error, alert, etc. identified in the scan. You can also see why it matters, what it means, and tips on how to fix it.
For example for the Empty Link:
- What It Means: A link contains no text.
- Why It Matters: If a link contains no text, the function or purpose of the link will not be presented to the user. This can introduce confusion for keyboard and screen reader users.
- How to Fix It: Remove the empty link or provide text within the link that describes the functionality and/or target of that link.
- The Algorithm… in English: An anchor element has an href attribute, but contains no text (or only spaces) and no images with alternative text.
- Standards and Guidelines: 2.4.4 Link Purpose (In Context) (Level A)
As you can see, you can quickly move from the overall organization view down to where you can easily see the specific location of an error, alert, etc.
A similar process could be done for all the categories that are reported in the Results Type widget.
Widget #2: Most common issues
The Most Common Issues widget provides a quick overview of most common Errors and Alerts detected. It shows the top 4 error types by percentage and an “other category” with the remaining errors. In the example below, you can see that 28% of the Errors are Empty links and 20% are linked image missing alternative text and so on.
In this widget, you can toggle between Errors and Alerts. You can also view this information in a Table view instead of the default chart view.
The content in this widget is once again drillable, allowing you to quickly see which issues are the most common across your organization (or in your filtered view) and then drill down to the specific websites, web pages, and then out to the WAVE tool to identify where issues are located. Again, along the way, you will often learn important information about the status of websites, template errors, and where to focus your remediation and training efforts.
Widget #3: Scan details
The Scan Details widget allows an organization to see an overview of all their websites as well as a report on the total number of Errors, Contrast Errors, and Alerts. It also shows the total number of web pages scanned in that site.
Each one of the Errors, Contrast, and Alert labels in this view can be sorted by frequency from high to low or low to high.
The website links in this view are drillable allowing you to see a list of the URIs (pages). For each page, you can see the Errors, Contrast Errors, and Alerts. There is also a link that lets you view this web page in the WAVE tool for further evaluation.
Widget #4: Errors by group
Errors By Group looks at Errors and Contrast issues and displays them by groups. When users have multiple groups, this widget shows a comparison between the groups. If your organization only has one website or group, it will just display the horizontal, bar graph for your organization of the number of Errors and Contrast issues.
The Errors By Groups widget can be configured in different ways to allow better access to important information you are looking for. Here are the following configurations:
- Using the widget setting at the top of this widget with the gear icon, you can select view both Errors and Contrast errors (the default chart view), or you can toggle either of these on or off. This allows you to see only one type of error at a time or both at once.
- Errors and Contrast errors can be viewed By Occurrences or By Density. Viewing By Occurrences is a count of the total number of errors within a group. Alternatively, viewing By Density weights the results by the number of HTML nodes. The default chart view is By Occurrences. Selecting the label By Density changes the chart view to show density.
- Users can also see the data displayed in this widget in a table by navigating to the Table option.
Widget #5: Issues over time
Because we know websites are dynamic and you have the need to see how your website is changing as new pages are added and as content is remediated or updated, the last widget shows changes in Errors, Alerts, and Pages over time. The red top line is Errors, middle orange is Alerts and bottom blue is Pages.
In the example below, pages slightly increased the same with errors decreasing from 227 to 2 and alerts decreasing as well.
Once again, you can toggle on or off which of these categories are displayed in the graph. For example, you might only want to see how Errors compared to the number of web pages has changed over time. Alternatively, you could toggle off Errors and only see how Alerts have changed across time.
A final reminder
Remember testing for accessibility using a website scanner like Dinolytics is only one step in the process of evaluating your websites for accessibility. For more information on accessibility testing, we recommend you review our Partner, WebAIM’s guide: Quick Reference: Testing Web Content for Accessibility