2008238 - Link has redundancy between description and accessible name (Top sites/Shorctuts section > links)

Status: NEW

(Firefox :: New Tab Page, defect)

Description

[John Northup]

Steps to Reproduce

Open DevTools. Using the Accessibility Inspector, inspect any link in the Top Sites/Shortcuts section.

Expected Behavior

Between name and description, link is conveyed both completely and concisely.

Actual Behavior

Redundancy exists between name and description.

User Impact

Redundancy for screen reader users.

WCAG 2.2 References

Best practice only.

Recommendations

To remove the redundancy, remove the title attribute.

Testing Environment

Any

Assistive Technology Used

Any

Code Pointers

<a class="top-site-button" href="https://www.wikipedia.org/" tabindex="0" draggable="true" data-is-sponsored-link="false" aria-label="Wikipedia" title="Wikipedia" data-l10n-args="{&quot;title&quot;:&quot;Wikipedia&quot;}">
  <div class="tile" aria-hidden="true">
    <div class="icon-wrapper" data-fallback="W">
      <div class="top-site-icon rich-icon" style="background-image: url([...]);">
      </div>
    </div>
  </div>
  <div class="title">
    <span class="title-label" dir="auto">Wikipedia</span>
    <span class="sponsored-label" data-l10n-id="newtab-topsite-sponsored">Sponsored</span>
  </div>
</a>

Further Reference

• WebAIM: Accessible Name Computation

Comment 1

[Simona Badau, Desktop Test Engineering]

Attachment: screenshot of Wikipedia shortcut being inspected

I was unable to reproduce this issue using the latest Nightly 149.0a1 or Firefox 148.0b5 on Windows 11 (x64).

When inspecting the Wikipedia Top Site using the Accessibility Inspector, the accessible name is “Wikipedia”, but the description is empty in my case.

@John, are you still seeing this issue? If so, do you have any non-default settings enabled? Or do you have some manually added shortcuts?

Comment 2

[❌ Anna Yeddi [:ayeddi] ❌ On leave until 2027-01-04]

Attachment: VoiceOver output showing "@google" being announced (after the accessible name) and Accessibility DevTools panel showing Description "@google" is provided alongside Name "@google (pinned)"

I was only able to locate description (coming from the HTML title attribute of the tile link) on pinned state of a tile, not on sponsored or default tiles. Using Fx 147.

Changing the status of the bug to "New" but keeping the NI for details

Comment 3

[❌ Anna Yeddi [:ayeddi] ❌ On leave until 2027-01-04]

Assigning the Severity value to align with the Accessibility severity, per discussions with :thecount and :marco

Comment 4

[John Northup]

(In reply to Anna Yeddi [:ayeddi] from comment #2)

Created attachment 9540249 [details]
VoiceOver output showing "@google" being announced (after the accessible name) and Accessibility DevTools panel showing Description "@google" is provided alongside Name "@google (pinned)"

I was only able to locate description (coming from the HTML title attribute of the tile link) on pinned state of a tile, not on sponsored or default tiles. Using Fx 147.

Changing the status of the bug to "New" but keeping the NI for details

To observe this redundancy in the code, inspect the HTML, look at the <a> elements, and note that the aria-label and title attributes match.