The WAVE "Flags" have various meanings. When you run WAVE on any web page, the icons you'll see will be representative of the elements that are, have, or need accessibility features found within the page based on a pre-programmed rule (or set of rules) specifying how to solve some problem (algorithms). It can be a little confusing when you inspect each of the "flags" and every one of them have "How to Fix It" - it makes you think that there's something wrong with the accessibility of the element, when there likely isn't. Perhaps, this heading should say something more like "Ensure That" or "Make Sure" because, well, there just isn't always anything to fix - it's a bit misleading.
WAVE isn't quite AI but it does help tremendously when you want to see if there are elements in the markup that may have been overlooked or perhaps to just quickly locate certain types markup that are present.
Red "Error" Icons - Take Another Look!
The twenty-two various red icons may indicate an error that needs fixing. (If you notice any on our site, please let us know!) Even if there isn't actually an accessibility violation, it's better to not see this so it's best to do what's needed to not see red error flags.
For example, if you have an input element without a corresponding label element that contains an attribute of type="HIDDEN" it will be flagged as an error with a red "tag" icon. It does not recognize the uppercase letters (though most platforms and browser don't differentiate this variation) in the word hidden and the algorithm sees this input field as something that the screen reader should read but can't without a corresponding label. However, when you change this to type="hidden" the red "tag" icon will vanish. Accordingly, if you add a corresponding label element to the input element, the red, 'no-label' icon will change to a green, 'label' icon.
Yellow "Alert" Icons - Maybe, Maybe Not...
The thirty-four various yellow icons indicate the presence of an element that might be improperly marked up for accessibility and you'll want to take another look to be sure.
For example, there may be a search input field's label text placed in surrounding paragraph tags as its parent and is so the WAVE algorithm sees the paragraph tag, indicating text. It's font size is large, bold and/or italicized and is less than 50 characters the algorithm in WAVE guesses that it's a probably a heading, but it's not.
Also, any time a link opens a Word, PDF, or Excel document you will see an 'Alert' of its presence due to Section 508 success criteria. Even when you take all the steps to ensure that this material is accessible and passes all of the success criterial recommended, WAVE doesn't go so far as to check those past this point and we will still encounter these flags.
Another common flag is the "Redundant Link" alert. This happens when links that are adjacent go to the same URL. For example, if you have a list of employees, with two or more, that perhaps share an email address, that are adjacent to each other in the DOM, you may see this alert. It's not technically a WCAG violation but it results in additional navigation and repetition for keyboard and screen reader users if it is an unnecessary duplication of the link.
Green "Features" Icons - Green is for Good!
The green icons indicate the presence of an element that is for accessibility.
Features are elements such as alt text, labels for input fields, fieldset for grouping input fields, and skip links. They are there to tell you that you're doing something right!
Blue "Structural Elements" Icons - Logical Structure Just Makes Sense
Structural elements main purpose are to provide an accessible reading and navigation order. Checking to make sure that the headings flow in the correct hierarchy or that the presence of any lists are marked up as such is easily done using WAVE. The various light-blue structural element icons will be present wherever these accessibility features have been implemented.
Purple "HTML5 and ARIA" Icons - More Accessibility Elements
These flags let you know that there are accessibility elements present such as header/banner, main, footer/contentinfo. These are excellent (and sometimes required) for navigation!
Red "Text Contrast Errors" Icons
Text that is intended to be hidden from sight may earn itself a red icon error flag. Sometimes text intended for screen reader users only will activate the failing algorithm. This text generally provides information that is provided in some other way for the sighted and isn't really a failure since it's not meant to be seen.
If both background & foreground colors are not set but you have one or the other set, this can also trigger the contrast to be flagged because the algorithm cannot "see" the color, it needs to be able to read it in the code.
Also, occasionally, there will be control settings within the browser that are outside the scope of the WCAG standards and success criteria. For example, select menus that contain a dropdown list of options will present themselves with white text against a blue background. This is usually the default browser programming but can cause a WAVE algorithm to see it as a failure if the color settings cannot be "seen" in the webpage's local file. However, these elements can be overridden with CSS if you'd like to enhance their contrast for improved visibility.