Users cannot distinguish one issue from another

[boswall]

There are currently only 2 colours used (red and gold) to show the issues. I think this was to denote the severity of the issues.

This does not give any details of what the issue is (only that an issues exists) and means that the usability of the plugin is very limited. You have to inspect an element to know what the issue is.

My plan was to add a title attribute to the highlighted elements so that users could hover over them to see a description. However, elements with title attributes are something that is highlighted in the CSS and not very accessible.

Another option would be to add an ::after pseudo element with some text. This would only show one issue at a time and may break some themes (if the theme uses the pseudo element).

Another option would be to use different colours for each type of issue and add a legend for users to refer to.

Any other thoughts?

[boswall]

v1.1 uses JavaScript to find the issue elements, so I was able to also inject a new element just after the issue element. I can then add the issue label(s) to that new element.

This should mean that there are no potential compatibility issues with themes using ::after