radio
| <div role="radio" aria-checked="true" aria-label="单选2" tabindex="0">单选tabindex="0"</div> |
This div simulated radio function, the screen reader software is usually not be seen, but with role and aria-checked state, the screen reader will be able to read its contents a.
aira-label
Under normal circumstances, form the input components have a form corresponding to the label.
| <form role="form"> |
When the input component gets the focus, the screen reader will read out the appropriate label in the text.
But if we do not have to set the input box label, when it has the focus, the screen reader will read out the value of aria-label attributes, aria-label does not appear in the visual effects.
| <form role="form"> |
After testing, aria-label can only be applied to the tab to the elements, read out the contents of the screen will read.
| < Span tabIndex = "0" Aria-label = "prompt content tag"> tab may be a span of </ span> |
Note the following when using the aria-label:
-
At the same time using the aria-label and label for, ignoring the latter.
-
At the same time using the aria-label and aria-labelledy, ignored the former
-
IE does not support the use of aria-label on input, but support aria-labelledby.
-
When using the aria-labelledby, even if the corresponding note text is hidden, it is still able to read.
-
label for form elements for an effective and div, span not
-
Form element input type = button, do not add a comment, screen reader software can read the value
-
Not all title screen reader software to read, do not read the next title individual cases a, span and button of the, a, span tag reading content directly in IE, button read value value
-
After adding a tag to locate the href attribute must be, or we need to use tabindex.
aria-labelledby
If you want a screen reader to read the label text in the presence of other elements, it can be a value id of the element. Set id of an element of the aria-labelledby. Then the screen reader can read its value.
| <body> |
When ul get the focus, the screen reader will read: "Choose your career."
If an element while aria-labelledby and aria-label, screen readers will prefer to read the contents of aria-labelledby.
progressbar、aria-valuenow、aria-valuemin、aria-valuemax
| <div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" /> |
Since this is a scroll bar with a div written, there is no literal meaning. However, for developers, in HTML4 in, and no more semantic tags, so we need to introduce ARIA roles and attributes this to add specific attributes to the element. For example, role = "progressbar" This attribute tells the browser,
This element is actually a progress bar components implemented in JavaScript. aria-valuemin and aria-valuemax attribute indicates the minimum and maximum values of the progress bar. aria-valuenow then describes the current state of the progress bar, so it is imperative to update JavaScript.