What Is HTML5 Aria

What is HTML5 ARIA?

WAI-ARIA is a spec defining support for accessible web apps. It defines bunch of markup extensions (mostly as attributes on HTML5 elements), which can be used by the web app developer to provide additional information about the semantics of the various elements to assistive technologies like screen readers. Of course, for ARIA to work, the HTTP user agent that interprets the markup needs to support ARIA, but the spec is created in such a way, as to allow down-level user agents to ignore the ARIA-specific markup safely without affecting the web app's functionality.

Here's an example from the ARIA spec:

<ul role="menubar">

  <!-- Rule 2A: "File" label via aria-labelledby -->
  <li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel"><span id="fileLabel">File</span>
    <ul role="menu">

      <!-- Rule 2C: "New" label via Namefrom:contents -->
      <li role="menuitem" aria-haspopup="false">New</li>
      <li role="menuitem" aria-haspopup="false">Open…</li>
      ...
    </ul>
  </li>
  ...
</ul>

Note the role attribute on the outer <ul> element. This attribute does not affect in any way how the markup is rendered on the screen by the browser; however, browsers that support ARIA will add OS-specific accessibility information to the rendered UI element, so that the screen reader can interpret it as a menu and read it aloud with enough context for the end-user to understand (for example, an explicit "menu" audio hint) and is able to interact with it (for example, voice navigation).

What is aria-label and how should I use it?

It's an attribute designed to help assistive technology (e.g. screen readers) attach a label to an otherwise anonymous HTML element.

So there's the <label> element:

<label for="fmUserName">Your name</label>
<input id="fmUserName">

The <label> explicitly tells the user to type their name into the input box where id="fmUserName".

aria-label does much the same thing, but it's for those cases where it isn't practical or desirable to have a label on screen. Take the MDN example:

<button aria-label="Close" onclick="myDialog.close()">X</button>`

Most people would be able to infer visually that this button will close the dialog. A blind person using assistive technology might just hear "X" read aloud, which doesn't mean much without the visual clues. aria-label explicitly tells them what the button will do.

what is the difference between placeholder and aria-placeholder in html5?

edit (added a deeper explanation)

ARIA labels are used to express semantics that HTML can't express on its own, i.e bridging areas with accessibility issues that can't be managed with native HTML. It works by allowing you to specify attributes that modify the way an element is translated into the accessibility tree.

for example, let's use a list item as a custom checkbox (the CSS class 'checkbox' gives the element the required visual characteristics.

<li tabindex="0" class="checkbox" checked>
  Receive promotional offers
</li>

for sighted users, this will work fine, but a screen reader won't give an indication that this element is a checkbox, so users with low vision might miss this element.

using ARIA will give the element the missing information for the screen reader to properly interpret it.

there are many ARIA attributes, and if you plan on using them (you should!) i recommended reading more here

---

Aria-label allows us to specify a string to be used as the accessible label. This overrides any other native labeling mechanism, such as a label element — for example, if a button has both text content and an aria-label, only the aria-label value will be used.

A placeholder is a text that appears in the form control when it has no value set. The HTML placeholder attribute enables providing a sample value or a brief description of the expected format for several HTML types and .

If you are creating a textbox using any other element, the placeholder is not supported. That is where aria-placeholder comes into play. The aria-placeholder attribute can be used to define a short hint to help the user understand what type of data is expected when a non-semantic form control has no value.

    <p id="date-of-birth">Birthday</span>
    <div contenteditable role="textbox" aria-labelledby="date-of-birth" 
     aria-placeholder="MM-DD-YYYY">MM-DD-YYYY</div>

The placeholder hint should be shown to the user whenever the control's value is empty, including when a value is deleted.

The aria-placeholder is used , in addition, to, not instead of, a label. They have different purposes and different functionality. A label explains what kind of information is expected. Placeholder text provides a hint about the expected value.

ARIA is only modifying the accessibility tree for an element and therefore how assistive technology presents the content to your users. ARIA doesn't change anything about the function or behavior of an element. When not using semantic HTML elements for their intended purpose and default functionality, you must use JavaScript to manage behavior.

for a more detailed explanation, you can visit the aria-label page on Mozilla

What are these attributes: `aria-labelledby` and `aria-hidden`

HTML5 ARIA attribute is what you're looking for. It can be used in your code even without bootstrap.

Accessible Rich Internet Applications (ARIA) defines ways to make Web
content and Web applications (especially those developed with Ajax and
JavaScript) more accessible to people with disabilities.

To be precise for your question, here is what your attributes are called as ARIA attribute states and model

aria-labelledby: Identifies the element (or elements) that labels the current element.

aria-hidden (state): Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented
by the author.

HTML5 accessibility/ARIA: What role should I use within an article for the translation?

Isn't that more the role of the lang attribute?

On the plus side you will be able to style the content depending on the language using the :lang pseudo-class.

Using Both WAI-ARIA attributes and HTML5 semantic tags in one document

WAI-ARIA support is iffy between both browsers and screen reader technologies.

I would recommend only using ARIA attributes in situations where you can not achieve the same result in native HTML, as HTML5 has greatly improved semantics. Adding ARIA attributes unnecessarily will do nothing to improve the accessibility of your website, and is just more work for you. Only use it as needed.

The first rule of ARIA states:

If you can use a native HTML element [HTML51] or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

For example, you wouldn't want to add aria-label to an image when you can just use an alt. There is also no need to explicitly assign roles with aria-role when many are already implied through their equivalent HTML elements (eg: button, nav, article). It's also prefered to use HTML states such as required and disabled rather than the ARIA equivalents: aria-disabled and aria-required.

WAI-ARIA Resources
PowerMapper WAI-ARIA Screen Reader Compatibility - This is a really good mapping of which ARIA attributes are compatible with which screen readers and browsers.

What is WAI-ARIA, what does it do for me, and what not? - Key sections I'd recommend reading are "When should I not use it?" and "When should I use it?".

---

Related Topics