WAVE Icon Key

WAVE Icon	What It Means	What To Do	Additional Resources
	An image without an alt attribute is present.	Add an appropriate value to the alt attribute for this image. If it is purely decorative, consider moving it into the CSS for the page.	Best practices for alt text creation
	A form field without an accessible label is present.	Add a form label with appropriate descriptive text associated with the form field, using the “for” attribute on the label and the “id” attribute on the form field.	Code example for form labels
	Suspicious alt text	The alt text of the image appears to be incorrect, insufficient, or otherwise unhelpful. This may because the alt text is too short, too long, or contains obviously-suspicious values such as alt=".". Consult the best practices guide linked at right for creating alt text.	Best practices for alt text creation (including code examples)
	Suspicious link text	The text value of a link contains suspicious values. Link text should not be too short, too long, or consist only of non-descriptive phrases such as “click here,” “learn more” or “click here to learn more.”	Best practices for HTML links
	A PDF document linked directly as an HTML link.	This should be fine as long as the fact that the link target is a PDF is indicated through the text of the link and/or title attribute. Ideally, an appropriate icon should be used to indicate what type of document is linked as well.	Best practices for HTML links
	An empty link (<a href="#"></a>) has been detected.	Empty links are often accidentally created when using a WYSIWYG editor for content creation. Empty links are not in compliance with accessibility standards and must be removed.
	The default human language(s) of the document are not specified in the HTML header.	Specify the human language(s) contained within the text contents of the document in the HTML header. See code example at right.	Code example for language specification
	Noscript element detected	A <noscript> element has been detected on the page. This is intended for use in the event that Javascript has been disabled in the user’s browser. This warning is generated because noscript elements are no longer considered a viable option for presenting accessible alternatives of inaccessible scripted content, as nearly all user agents now have Javascript enabled. Whatever content is presented in the noscript element must be regarded as seen by very few users, and any content presented in that format must be additionally presented in a separate, accessible format.
	Redundant title text	The value of the title attribute on an item (most often a href link) is identical to the text of the item itself (that is, the link text or alt text on an image). The title attribute is most often used correctly for accessibility to indicate information about its associated element (see code examples linked at right). Redundant titles should be updated to reflect unique information about the element, or be removed if no additional unique information is available at this level.	Code example for title attribute
	Alt text empty	The alt attribute on this image has been set to null/empty, literally <img alt="" />. This should only be practiced if the image is intended to be ignored by screen readers and therefore imperceptible by screenreader users in this context. In most modern cases, images intended to be ignored by screen readers are intended be ignored because they are purely visually decorative and contain no information or context of presentation for the content of the page.	Best practices for alt text creation
	Embedded iFrame is present	An iFrame element is embedded on the page. This is often the case when 3rd-party website content needs to be included on a page. iFrames must include a title attribute that provides a very brief description of content presented therein, and should all scrolling within iFrames by not specifying the scrolling attribute to no. iFrames also require additional testing with assistive technologies such as screen readers and switch input devices, as third-party content may not adhere to desired accessibility guidelines/may steal navigation focus for some assistive user agents.	Code example for iFrame inclusion
	Form label without an associated form element is present	Form labels should always be associated with a form element in order to comply with accessibility standards. Orphaned form labels are often accidentally created when using a WYSIWYG editor for content creation, and must be removed.	Code example for form labels
	ARIA markup is present	Nothing! While it is possible to make accessibility-related mistakes using ARIA, this icon simply indicates that WAVE has detected ARIA markup that appears valid.	Code examples of ARIA markup
	ARIA label is present	Nothing! While it is possible to use ARIA labels incorrectly (see code examples at right), this icon simply indicates that WAVE has detected valid ARIA labels in use.	Code examples of ARIA markup
	Content is presented as unordered (bulleted) list	If content makes sense presented as an implicitly ordered, bulleted list, nothing! Otherwise, reconsider and update presentation of information.
	Content is presented as ordered (numbered) list	If content makes sense presented as an explicitly ordered, numbered list, nothing! Otherwise, reconsider and update presentation of information.
	Heading element is present	This icon or variation for heading levels 1 through 6 identify HTML heading tags as they occur on the page. As long as they comply with accessibility standards (see code examples at right), no action is needed.	Code examples for headings
	Content is wrapped in an HTML5 navigation element	If this is a navigation element of the page, nothing! Otherwise, reconsider and update presentation of information.	Code examples for HTML5 elements
	Content is wrapped in an HTML5 footer element	If this is the footer of the page, nothing! Otherwise, reconsider and update presentation of information.	Code examples for HTML5 elements