Aria required in html

aria-required

The aria-required attribute indicates that user input is required on the element before a form may be submitted.

Description

When a semantic HTML , , or must have a value, it should have the required attribute applied to it. The HTML required attribute disables submitting the form unless the required form controls have valid values, while ensuring those navigating with the aid of assistive technologies understand which semantic form controls need valid content.

When form controls are created using non-semantic elements, such as a with a role of checkbox , the aria-required attribute should be included, with a value of true , to indicate to assistive technologies that user input is required on the element for the form to be submittable. The aria-required attribute can be used with HTML form elements; it is not limited to elements that have an ARIA role assigned.

Similar to the HTML required attribute set on semantic HTML form controls, the aria-required attribute explicitly conveys to assistive technologies that the element is required before a form may be submitted. The required attribute on a semantic HTML form control will prevent the form control from being submitted if no value is present — providing native error messaging in some browsers if a required value is invalid when the user attempts to submit the form. The aria-required attribute, like all ARIA states and properties, has no impact on element functionality. Functionality and behavior must be added in with JavaScript.

Note: ARIA only modifies the accessibility tree, modifying how assistive technology presents content to users. ARIA does not change anything about an element’s function or behavior. When not using semantic HTML elements for their intended purpose and default functionality, you must use JavaScript to manage behavior, focus, and ARIA states.

If a form contains both required and optional form elements, the required elements should be indicated visually using a treatment that does not rely solely on color to convey meaning. Typically, descriptive text and/or an icon are used.

Note: Which elements are required should be apparent to all users. Ensure the visual presentation indicates the form control is required in a consistent, visible manner, remembering that color is not enough to convey information.

Examples

The attribute should be added to the form-control role. If the user needs to fill in an email address textbox , include aria-required=»true» on the textbox.

div id="tbLabel">Email Address *div> div role="textbox" contenteditable aria-labelledby="tblabel" aria-required="true" id="email1">div> 

Note: If the field’s label already contains the word «required», it is recommended to leave out the aria-required attribute. This avoids that screen readers read out the term «required» twice.

In this example, JavaScript must be used to prevent the containing form from being submitted if the textbox has no content.

This could be written semantically, without the need for JavaScript:

label for="email1">Email Address (required)label> input type="email" id="email1" required /> 

Values

The element requires a value or must be checked for the form to be submittable.

The element is not required.

ARIAMixin API

The ariaRequired property, part of the Element interface, reflects the value of the aria-required attribute.

The ariaRequired property, part of the ElementInternals interface, reflects the value of the aria-required attribute.

Associated roles

Specifications

See Also

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Technique ARIA2: Identifying a required field with the aria-required property

This technique is Advisory for 1.3.1: Info and Relationships .

Applicability

This technique relates to 1.3.1: Info and Relationships (Advisory) .

Description

The objective of this technique is to provide programmatic indication that a form field (which shown through presentation to be required) is mandatory for successful submission of a form.

The fact that the element is required is often visually presented (via a text or non-text symbol, or text indicating input is required or color / styling) but this is not programmatically determinable as part of the field’s name.

The WAI-ARIA aria-required property indicates that user input is required before submission. The aria-required property can have values of true or false . For example, if a user must fill in an address field, then aria-required is set to true .

Use of aria-required=»true» might be beneficial even when an asterisk or other text symbol is programmatically associated with the field as it may reinforce its required property for some assistive technology users.

The fact that the element is required is often visually presented (such as a sign or symbol after the control). Using the aria-required property in addition to the visual presentation makes it much easier for user agents to pass on this important information to the user in a user agent-specific manner. Refer to ARIA in HTML for information on how to provide WAI-ARIA States and Properties with HTML. WAI-ARIA States and Properties are compatible with other languages as well; refer to documentation in those languages.

Examples

Example 1: The required property is indicated by an asterisk placed in the label element

 
Note: * denotes a required field
 Login name *: Password *: 

Example 2: The required property is indicated by the word «required» placed next to the label element

  First name: (required) Middle name: (required) Last name: (required) Email address: (required) Zip / Postal code: (required) 

Example 3: Required fields are indicated by a red border around the fields and a star icon rendered via CSS using content::after

This example also uses custom radio buttons with role=radio but the script to make the span actually work like radio buttons is not included in this example. The CSS properties are available below the form.

Related CSS style definition for this example:

[aria-required=true] < border: red thin solid; >[data-required=true]::after < content: url('/iconStar.gif'); >

Other sources

Tests

Procedure

For each control which is shown via presentation to be required.

1. Check whether the aria-required attribute is present:
2. Check whether the value of the aria-required attribute is the correct required state of the user interface component.

Expected Results

Help improve this page

Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list group-ag-chairs@w3.org or via GitHub

Date: Updated 20 June 2023.

Developed by Accessibility Guidelines Working Group (AG WG) Participants (Co-Chairs: Alastair Campbell, Charles Adams, Rachael Bradley Montgomery. W3C Staff Contact: Michael Cooper).

The content was developed as part of the WAI-Core projects funded by U.S. Federal funds. The user interface was designed by the Education and Outreach Working Group (EOWG) with contributions from Shadi Abou-Zahra, Steve Lee, and Shawn Lawton Henry as part of the WAI-Guide project, co-funded by the European Commission.

Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.

Copyright © 2023 World Wide Web Consortium (W3C ® ). See Permission to Use WAI Material.

Источник