Compatible 4.1

Understanding Guideline 4.1

Parsing 4.1.1

Understanding Success Criterion 4.1.1

Example

Duplicate Attribute; Do not do.
				
<style>
	.sampleText { font-weight: bold; }
</style>
				
<p class="textBold sampleText">
	Sample text here.
</p>
Acceptance Criteria
  1. Validate web pages.
  2. Ensure that opening and closing tags are used according to specs.
  3. Ensure that id attributes are unique on the web page.
  4. Avoid using duplicate attributes on elements.
Notes

In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features.

Name, Role, Value 4.1.2

Understanding Success Criterion 4.1.2

Acceptance Criteria
  1. Use the title attribute of the frame and iframe elements.
  2. Use the title attribute to identify form controls when the label element cannot be used.
  3. Use label elements to associate text labels with form controls.
Notes

For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

Status Messages 4.1.3

Understanding Success Criterion 4.1.3

Examples

  • After a user presses a Search button, the page content is updated to include the results of the search, which are displayed in a section below the Search button. The change to content also includes the message "5 results returned" near the top of this new content. This text is given an appropriate role for a status message. A screen reader announces, "Five results returned".
  • After a user presses an Add to Shopping Cart button, a section of content near the Shopping Cart icon adds the text "5 items". A screen reader announces "Five items" or "Shopping cart, five items".
  • After a user enters incorrect text in an input called Postal Code, a message appears above the input reading "Invalid entry". The screen reader announces, "Invalid entry" or "Postal code, invalid entry".
  • After a user activates a process, an icon symbolizing 'busy' appears on the screen. The screen reader announces "application busy".
  • After a user submits a form, text is added to the existing form which reads, "Your form was successfully submitted." The screen reader announces the same message.
  • After a user unsuccessfully fills in a form because some of the data is in the incorrect format, text is added to the existing form which reads "5 errors on page". The screen reader announces the same message.
Acceptance Criteria
  1. If status message advises on the success or results of an action, use role="status". Ex: When providing success feedback when data is submitted successfully.
  2. If status message conveys a suggestion or warning, use role="alert". Ex: Validation summary.
  3. If status message conveys information on the progress of a process, use role="progressbar".
  4. Do not use role="alert" or aria-live="assertive" on content which is not important and time-sensitive.
Notes

In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.

To Top