Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Fix/issue 1659 give editable fields better labels #12473
How has this been tested?
In browser tests with the inspector
Types of changes
Added aria-labels to fields outlined in the issue so they differ from the placeholder attributes
@timwright12 would you mind refreshing this PR? There is one file that got updated in the master branch and might have some conflicts to resolve. There is also one failing e2e test which was rather a temporary thing which we shouldn't be worried about. Does it need sign of from the accessibility team or can we decide based on the description from #1659?
@gziolo I fixed the conflict, but I'm getting some troubling build and
afercia left a comment
Thanks for working on this! These changes are an improvement for screen reader users but I'm afraid they won't solve all the accessibility concerns.
A quick example to clarify: quote and paragraph:
The quote visible placeholder is "Add quote". Note this is not a real HTML placeholder attribute so it doesn't get announced by screen readers. It's just text which disappears as soon as the field gets focused.
The quote aria-label is "Quote". This gives the filed its accessible name which is announced by screen readers and clearly identifies what this field is about. Perfect.
However, the visible text mismatches the accessible name.
Speech input users see a visible text "Add quote" and will try to voice a command like "Click add quote" to focus the field. That wouldn't have any effect because the actual accessible name of the field is "Quote" instead.
This is one of the reasons why, as accessibility specialists, we always stress that visible labels are always preferred. In this case, the root cause of the issue is a design that didn't take into account accessibility requirements.
The only way I see as a viable option without design changes is to make the placeholder match the aria-label, e.g.:
The paragraph is a special case.
The visible text
When the paragraph has no content:
When the paragraph has content:
I now it's getting complicated, but it's because of the design constraints.
@timwright12 - this PR needs to be rebased with the latest changes in the
I now see the comment from @afercia, it still needs some work.