0

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?

张焱伟
  • 61
  • 7
  • 1
    Can be hidden is not the same thing as actually hidden. There is no ARIA for can be hidden. Just add that attribute when the element becomes hidden. – Scott Marcus Jan 28 '19 at 03:19
  • @ScottMarcus You've right, I have read the document [Supported States and Properties](https://www.w3.org/WAI/PF/aria/states_and_properties), the `aria-hidden` just identify the state of the element that means it still in the dom. In my case, I'm not found a suitable ARIA attribute to describe this action, so I want to use a custom ARIA to identify the element can be hidden/removed, maybe the `aria-autoremove` is more suitable if the element will be removed from the dom. – 张焱伟 Jan 28 '19 at 04:28
  • What would be the point of an aria-autohide attribute? How do you imagine such a property would be exposed to AT users, and what use would it be for such a user to know that the element might autohide? – Alohci Jan 29 '19 at 12:39
  • if the user knows the element will be hidden, so do not manipulate it or do something else related it. for example, bind an event on it or create an element under it .... – 张焱伟 Jan 30 '19 at 07:01

1 Answers1

2

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.

slugolicious
  • 15,824
  • 2
  • 29
  • 43