The usage of HTML5 aria-* and role in Bootstrap

HTML5 aria-* and role

See Role and aria-* in Bootstrap, don't know what to do. Google, Discover Aria means accessible Rich Internet application. Accessible is generally a feature for inconvenient people, such as Windows Magnifier, voice reading, high contrast themes, etc.

HTML5 attributes added for HTML tags: role and aria-*.

Role is to describe the actual role of a nonstandard tag. For example, using a div to do a button, then set the div's role= "button", the auxiliary tool can recognize that this is actually a button.

ARIA Roles

Use the ARIA role attribute to indicate that a generic tag was playing the role of a standard widgets like a button.

And aria-* 's role is to describe this tag in the visual context of the specific information. Like what

<div role= "checkbox" aria-checked= "Checked" ></div>

The helper will know that the DIV is actually a checkbox's role and is selected.

ADD ARIA for screen readers

ARIA attributes provides semantic information to screens readers that is normally conveyed visually.

Note that using ARIA does isn't automatically implement the standard widgets behavior, you'll still need to add focus Managem ENT and keyboard navigation yourself.

The usage of HTML5 aria-* and role in Bootstrap