Displaying violations

[raunofreiberg]

We should probably somehow distinguish that:

1. Violations have different levels of severity

I was thinking of maybe adding a different color for the violation overlay based on the severity.

Maybe something like:

Critical/Serious - Red Moderate - Orange Minor - Yellow

2. Violations have different types of checks

There are three types of checks that are made:

any: Array of checks that were made where at least one must have passed. all: Array of checks that were made where all must have passed. none: Array of checks that were made where all must have not passed.

Should we possibly categorize these in some way? Currently, they are merged in the UI.

[raunofreiberg]

Regarding no. 2. Maybe something like this:

[chaance]

I think it makes sense to use WCAG compliance as a guide for severity. Does the violate A, AA, or AAA compliance? I'd want to be able to configure the tool to highlight issues that fall below a target level of conformance for my project, and if the issue doesn't meet that threshold then we can look to WCAG for classifying the message: https://www.w3.org/TR/UNDERSTANDING-WCAG20/understanding-techniques.html

The three types of guidance in Techniques for WCAG 2.0 are explained below:

• Sufficient techniques
• Advisory techniques
• Failures

So if something is sufficient, it doesn't get flagged. Everything else is either an advisory or a failure. The Firefox dev tools accessibility tab appears to handle these with yellow warning icons vs. red warning icons with different shapes. Perhaps we can take a cue from that?

[chaance]

Ok, so now that I've looked at the examples a bit it seems as though axe does use their own criteria for severity so we're probably married to that! I whipped up these three icons we can use. What do you think?

(I also created a yellow "Flag" for minor violations, but I didn't see one in the example!)

[raunofreiberg]

Awesome! I like it.

What do you think about also having the same kind of distinction for the color of the overlay itself? So if a element has moderate violations, the overlay would be orange, etc.

I think it would be nice to not be treated with a lot of "screaming red" in your face when using Axe Mode, and rather have it be more subtle/approachable so you can tackle the most severe issues at first. I might be wrong though, maybe "screaming" is better when it comes to accessibility issues 😄

[chaance]

I think it would probably be nice to distinguish, though keep in mind that an important rule of accessibility is to make sure you aren't communicating meaning with color alone (hence the various icon shapes). Perhaps when a user hovers or focuses on an overlay we can show the relevant icon in the corner?

[raunofreiberg]

Closing this as it has been resolved by #3.