问题
If a HTML5 <div> element requires a role="button" attribute to secure a success outcome in an accessibility audit (Success Criterion 4.1.2 [Name, Role, Value]..the div is acting as a button in a UI), does it then also require a valid name attribute (which would normally be invalid HTML5 for a div).
If the answer is no - what other accessibility friendly attribute can I add to describe the div button and meet the criteria? A simple title attribute or aria-label?
回答1:
I think the original question came about because of some confusion on what "name" means in "WCAG 4.1.2 Name, Role, Value".
The name attribute is indeed invalid on a <div>. The name= is used to name an object so that it can be referenced in javascript. It has nothing to do with accessibility.
The "name" in 4.1.2 is referring to what the object will be called by the screen reader and other assistive technology. For buttons, it's usually the text that's displayed on the button. For input fields, it's usually the label for the field. If you have a <div>, then as pointed out by others, the aria-label is how you would "name" the object.
When focus goes to the object, most screen readers will read the name/label of the object, the role (button, checkbox, combobox, table, etc), and the value or state of the object if appropriate (input, combobox, checkbox status).
Those three pieces of information are quickly ascertained by the eye and essentially give you all the information you need to know about an object. That same info should be surfaced to assistive technology.
回答2:
The name attribute does not exist for <div> and cannot be added.
You will need aria-label to provide an accessible name.
However, if you are just trying to obtain a pass on SC 4.1.2, then you have probably approached this the wrong way. In fact, if you cannot test the aria-label in a screen reader to confirm that it works the way you want then you are coding to a checklist instead of truly helping users.
If that is the case, then you should probably ditch your <div role="button"> and instead start with the most correct element for the job.
A good rule of thumb is to never put yourself in a situation where you are changing the default semantics of an element (via role).
There are three elements already out there which may do what you want first. In the absence of context for your question, some general tips on when to use an <a href> versus a <button> or <input type="submit">:
- If the user is going to a new page (or anchor on the page), use a
<a href>(spec). - If the user is changing a state on the current page, use
<button>(spec). - If the user is submitting a form, use
<input type="submit">or<button type="submit">(spec).
I caution against changing the default role of an element with the role attribute, as that can ultimately cause some confusion and potentially conflict for some assistive technology. These also violate the first and second rules of ARIA use.
Consider the keyboard experience as well. If all you do is change the role of an element, then you also have to provide all the scripting to allow it to behave as the new element.
A hyperlink (<a href>) can be fired by pressing the enter key. But a true <button> can be fired by pressing the enter key or the space bar. When a hyperlink has focus and the user presses the space bar, the page will scroll one screenful. Users of some assistive technology will expect behavior based on the element used.
I think it’s also worth mentioning that events triggered by a space bar only fire when the key is released, whereas using the Enter key will fire the event as soon as you press the key down (prior to releasing it).
So start with the right element for the task using the list above, then style it to look however you want.
回答3:
Attribute name cant be added.
Buttons should always have an accessible name. For most buttons, this name will be the same as the text inside the button. In some cases, for example for icon buttons, the accessible name can be provided through an aria-label or aria-labelledby attribute.
Please refer more details here : Using Button Role
来源：https://stackoverflow.com/questions/38477954/if-an-html-element-has-role-button-should-it-also-have-the-attribute-name