Stack Overflow
Stack Overflow

Questions tagged [wai-aria]

WAI-ARIA, the Web Accessibility Initiative - Accessible Rich Internet Applications specification suite, defines a way to make web content and web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with AJAX, HTML, JavaScript, and related technologies.

WAI-ARIA, the Web Accessibility Initiative - Accessible Rich Internet Applications specification suite, defines a way to make web content and web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with AJAX, HTML, JavaScript, and related technologies.

Defining Disability

Disabilities is an umbrella term, covering impairments, activity limitations, and participation restrictions. An impairment is a problem in body function or structure; an activity limitation is a difficulty encountered by an individual in executing a task or action; while a participation restriction is a problem experienced by an individual in involvement in life situations. Thus, disability is a complex phenomenon, reflecting an interaction between features of a person’s body and features of the society in which he or she lives.

— World Health Organization, Disabilities

Knowledge base

Related tags

1402 questions
311
votes
3 answers

What's the difference between HTML 'hidden' and 'aria-hidden' attributes?

I have been seeing the aria attribute all over while working with Angular Material. Can someone explain to me, what the aria prefix means? but most importantly what I'm trying to understand is the difference between aria-hidden and hidden attribute.
Daniel Kobe
  • 9,376
  • 15
  • 62
  • 109
277
votes
5 answers

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

Using Bootstrap modal, I've seen these aria attributes a lot, but I never knew how to make use of them. Does anyone know what cases to use these attributes? I googled—just didn't find any straightforward answers.
Hao
  • 6,291
  • 9
  • 39
  • 88
260
votes
5 answers

What is HTML5 ARIA?

What is HTML5 ARIA? I do not understand how to implement it.
Subbu
  • 3,299
  • 5
  • 24
  • 36
197
votes
1 answer

Can someone explain the HTML5 aria-* attribute?

I wanted to know what the aria-* attributes are used for. What values can they have, and are they defined values or can I create my own values?
soflow
  • 1,987
  • 2
  • 12
  • 3
118
votes
4 answers

How to bind dynamic data to aria-label?

I have dynamic text to bind to aria-label on a HTML page. This is an Angular 2 app. I am using something like this: aria-label="Product details for {{productDetails?.ProductName}}" But I get an error: Can't bind to 'aria-label' since it isn't a…
namrata
  • 2,235
  • 5
  • 28
  • 35
87
votes
3 answers

What is the difference between aria-label and title attributes?

I am used to use title="" attribute on my links/buttons/... to detail them. But bootstrap uses lots of aria-label="" attributes, for accessibility reasons as far as I understood. So I come up to create buttons like:
86
votes
2 answers

The purpose of using "aria-labelledby" on already labeled input elements?

Many ARIA demonstration websites use code such as: But what's the purpose of using aria-labelledby attribute in this case? The input…
Ian Y.
  • 2,293
  • 6
  • 39
  • 55
55
votes
1 answer

Difference between aria-live="assertive" and aria-live="polite"

Can somebody please elaborate on the difference between aria-live="assertive" and aria-live="polite"? As per my understanding aria-live="assertive" will get the higher priority and wipe off the queue, whereas aria-live="polite" is having low…
user1996823
  • 579
  • 1
  • 4
  • 10
53
votes
3 answers

When to use the disabled attribute vs the aria-disabled attribute for HTML elements?

I'm trying to make a form accessible. Should I make my inputs have both disabled and aria-disabled attributes, or just one? Or like this?
Ralph David Abernathy
  • 5,230
  • 11
  • 51
  • 78
51
votes
4 answers

React props - set isRequired on a prop if another prop is null / empty

I have a component ariaLabel prop…
sandrina-p
  • 3,794
  • 8
  • 32
  • 60
42
votes
5 answers

What is a WAI-ARIA compliant implementation for navigation bar/menu

We are in the process of implementing (i.e. adding) WAI-ARIA support to the main navigation menu of a web portal. Menu is the one shown here: Menu is implemented by means of classic
superjos
  • 12,189
  • 6
  • 89
  • 134
40
votes
4 answers

What is the meaning of the 'aria-describedby' property?

The following HTML is inserted by the jQuery Grid plugin: Sam What is the meaning of the 'aria-describedby' property?
RPB
  • 16,006
  • 16
  • 55
  • 79
37
votes
2 answers

When to use the required attribute vs the aria-required attribute for input elements?

I'm trying to make a form accessible. Should I make my inputs have both required and aria-required attributes, or just one? Or like this?
Ralph David Abernathy
  • 5,230
  • 11
  • 51
  • 78
37
votes
2 answers

Accessibility: what can aria-haspopup be used for?

I have it on good authority that aria-haspopup is appropriate for sub-menus (such as a popup context menu or sub-level menu). It's used on jQuery UI Selectmenu and also used in this great example. What I've not been able to find out is whether…
francois
  • 603
  • 1
  • 5
  • 11
36
votes
4 answers

Should role="contentinfo" be always added on footer element?

On ARIA demonstration websites, role="contentinfo" is usually added on footer element. However, footers in modern web design can be creative so that they can also contain things like supplementary navigation links, social website links, or even a…
Ian Y.
  • 2,293
  • 6
  • 39
  • 55
1
2 3
…
93 94