API for adding aria-label with title content
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 1.6k
- Forks
- 82
- PR merge metrics
- No merged PRs in 30d
Description
I'm improving the accessibility of an app that uses the title attribute on a bunch of icon-only links, and unfortunately I can't think of a clean way to pull it off. It makes sense for the title attribute to be present since the links are icon-only, but titles are inconsistently presented by screen readers. Far better would be to include an aria-label as well, but the titles are often generated conditionally, so for many links I'd have to:
- Duplicate the title calculation code in the aria-label definition or
- Extract the title calculation to a separate variable/function and use it twice
Neither is a nice solution.
I propose an API that combs through the page and duplicates any title attributes it finds onto any elements without text's aria-labels. I suppose this could be a bit complicated since what an element's text is differs. Perhaps it could initially work for links, replacing any without innerHtml with an aria-label containing the value of their title. Links seem to be the biggest offenders.
I don't know what this API might look like, but I wonder if implementing it as a MutationObserver might work? Then it would automatically react on document changes.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No file or test is named. Start by reviewing ally.js's existing public API conventions and accessibility-related entry points, then assess the proposed link-only title-to-aria-label behavior and MutationObserver approach. Done should include a settled API scope and documented behavior for dynamically changed elements.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100