Search code examples
javascripthtmlw3cwai-aria

Should I use a custom ARIA attribute if there is no suitable ARIA attribute exists?

I want to identify an element can be hidden automatically(using JavaScript to do it) when the user clicks its descendants.

for example:

<div>
    <div aria-autohide>
        <a href="http://..." target="_blank">A Link</a>
    </div>
</div>

Is it a proper way to do it?

Solution

  • While you can create custom HTML tags and you can create custom attributes, typically prefaced with "data-", you cannot create custom ARIA attributes. There's a predefined list of ARIA attributes that are mapped to certain properties in the accessibility API. If you make up a new one, there's no way for you to tell the accessibility API what the attribute means and how it should be interpreted by assistive technology, such as a screen reader.

    The best you can do for now is add visually hidden text to your element so that the screen reader reads it when focus (whether keyboard focus or screen reader focus) moves to the element.

    For example, 

    <div>
  <div>
    <a href="http://..." target="_blank">A Link <span class="sr-only">selecting this link will cause this element to be hidden</span></a>
  </div>
</div>

    See What is sr-only in Bootstrap 3? for information on the "sr-only" class.