medialize / medialize/ally.js

API for adding aria-label with title content

Open
#75 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

aria discussion
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.