Aria-label and Aria-labelledby application//////////[information Barrier-free Product Alliance]

Aria-label and Aria-labelledby applications

http://accessibilityunion.org/archives/808

posted on December 12, 2013 by Sisiyuan

Aria-label Property

Normally, the input component is assigned a label in the form, and when the user tabs to the input box, the read-screen software reads the text in the corresponding label.

Example: <label for= "username" > User name: </label><input type= "text" id= "username"/>

The Aria-label property specifies the built-in text label for the component when there is no position to design the corresponding label text for the input box. It is not visually presented.

such as: <input type= "text" aria-label= "username"/>

At this point, when the focus falls on the input box, the read-screen software reads out the contents of the Aria-label, the "user name".

After testing, Aria-label only add to the tab to the element, read the screen will read the content.

You can also read the following: <span tabindex= "0″aria-label=" label prompt content > tab-selectable span tags </span>

Aria-labelledby Property

When you want the label text to already exist in another element, you can set its value to the ID of the element.

<div role= "form" aria-labelledby= "Form-title">

<span id="Form-title"> Register with mobile phone number </span>

<form>......</form>

</div>

The form area adds the landmark identity role= "form", and the use of the letter "D" key in contention jumps between lankmark identities.

When you jump to this area, you will not only read the "form area", but also read "register using mobile phone number".

If an element has both Aria-labelledby and Aria-label, the read-screen software will first read the contents of the Aria-labelledby.

Test software: Contention Screen browser: IE9

Related articles:

• How much does voiceover know?
• Talk about the standard of the information barrier-free test engineer
• Website Content Accessibility Guide 2.0/web Content Accessibility Guidelines (WCAG) 2.0 Chinese
• Official recommendation standard for access to rich Internet applications (Wai-aria 1.0)
• Skip navigation link

Aria-label and Aria-labelledby application//////////[information Barrier-free Product Alliance]