Fields must have labels or titles not accepting aria-label
andymsuk opened this issue · 12 comments
Summary
The following test fails unexpectedly for buttons with an aria-label:
Form labels: Fields must have labels or titles
Expected Behaviour
Given a page with the following markup:
<button class="arrows__chevron" aria-label="Scroll carousel right"></button>
Then the test "Fields must have labels or titles" passes, as it does with Google Lighthouse - https://developers.google.com/web/tools/lighthouse/audits/form-labels
Current Behaviour
The test fails as the button does not contain text, have an associated <label> or have a title attribute
Possible Solution
As per Google Lighthouse, allow aria-label and aria-labelledby
https://www.w3.org/WAI/tutorials/forms/labels/#labelling-buttons indicates that the label for a button can be text within a button element, a value attribute on on input element, or the alt attribute of an input element of type="image".
As aria-label and aria-labelled by would over-ride all of those in regard assistive tech, then it should probably pass. Mozilla uses it as an example at https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute.
More reading at https://developer.paciellogroup.com/blog/2011/04/html5-accessibility-chops-just-use-a-button/ ... Note, aria should only be used when it is needed! If there is another standard way to label a button then that method should be used.
The first part of your response, @EmmaJP, suggests that we should fix bbc-a11y as I suggested.
The last paragraph suggests we shouldn't change bbc-a11y and that we should use text within the button instead.
Please can you clarify?
Hi,
I’d agree with Andy and would support updating the code.
There are better ways than aria-label and aria-labelledby but they are both valid
An aria-label is accessible ... so it should probably pass a bbc-a11y check for a label.
However, if there is a standard way to provide that label with HTML, such as with an alt attribute on an image input, then I would encourage doing that over aria.
Could bbc-a11y determine and warn if another method should have been used? That's getting rather complex!!
If someone wants to make a list of elements and attributes/values and which should warn and which should error, I can look at doing that. Otherwise, I can just add aria-label and aria-labelledby to the list of allowed ways of labelling.
Perhaps do the latter, and see what other issues come up.
For some of these things I wonder should we be looking at what other tools do, or looking at auto-wcag rules for clarity.
Auto-wcag doesn't seem to have an explicit rule about it, the rules around labelling aren't very strict so long as a label exists unless I'm missing something: https://auto-wcag.github.io/auto-wcag/rules/SC2-4-6-descriptive-labels.html
Neither does aXe
The latest version of auto-wcag, now ACT Rules, is at https://act-rules.github.io/rules/97a4e1 and allows for a button with no text and an aria-label.
I think so long as the aria-label also serves as an alternative for something visible, such as a suitable image or icon, bbc-a11y should pass this - although that may require a manual check to confirm. I guess the code could also check for an applied background image or similar if an aria-label is used and there is no other text.
Examples:
aria-label provides text alternative for a background image applied via a CSS style:
<button class="arrows__chevron" aria-label="Scroll carousel right"></button>
aria-label provides additional context for shorter visible text with a layout context:
<button id="S1" class="share-btn" aria-labelledby="S1 itemTitle">Share</button>
aria-label is not necessary for an image button, though it could still pass:
<input type="button" src="./right-chevron.jpg" alt="Scroll carousel right"/>
<input type="button" src="./right-chevron.jpg" aria-label="Scroll carousel right"/>
In the background image example, when CSS is disabled/not loaded, the user wouldn't see the aria-label, is this acceptable?
@greenc05 as per my comments in June, if there is a way to appropriately label a button without using aria, then that should be encouraged. However, I think using an aria-label should pass this check.
It would be great to have an additional check that something about the button is visible when CSS and Javascript are absent.
This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.
This issue was closed because it has been stalled for 5 days with no activity.