WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#34895 closed defect (bug) (fixed)

Add screen reader text for Admin Bar Comments link

Reported by: slushman Owned by: SergeyBiryukov
Milestone: 4.5 Priority: normal
Severity: normal Version: 3.1
Component: Toolbar Keywords: has-patch
Focuses: ui, accessibility Cc:
PR Number:

Description

The Comments link on the Admin Bar only contains the number of approved and/or waiting-for-moderation comments, but no additional context telling a screen reader the meaning of that number. @afercia mentions this in #31324 when fixing other parts of the admin bar.

The following patch uses the same concept used in the list table for comments in #32152, where a screen-reader-text span is added containing the information used for the link title attribute.

Attachments (3)

#34895-admin-bar-comments.patch (1.0 KB) - added by slushman 4 years ago.
Patch for adding screen reader text to Comments link on Admin Bar.
34895.patch (576 bytes) - added by rachelbaker 4 years ago.
Concat the $title string to include the screen reader span
#34895-admin-bar-comments.2.patch (1.0 KB) - added by slushman 4 years ago.
Better patch using @afercia's and @rachelbaker's feedback. The visible comment bubble includes the aria-hidden, the $title variable is concatenated and includes the screen reader text.

Download all attachments as: .zip

Change History (8)

@slushman
4 years ago

Patch for adding screen reader text to Comments link on Admin Bar.

#1 @swissspidy
4 years ago

  • Component changed from General to Toolbar
  • Focuses ui administration removed
  • Keywords has-patch added

#2 @wonderboymusic
4 years ago

  • Milestone changed from Awaiting Review to 4.5
  • Version changed from trunk to 3.1

@rachelbaker
4 years ago

Concat the $title string to include the screen reader span

#3 @rachelbaker
4 years ago

@afercia Can you review 34895.patch? I believe this matches the prior art in the admin toolbar.

#4 @afercia
4 years ago

  • Focuses ui added

A quick screenshot with the last patch applied, tested in Firefox+NVDA:

https://cldup.com/bauaU1nZRC.png

As you can see there's a bit of redundancy. NVDA reads out:

  • the comments pending count (as part of the accessible name)
  • the new screen reader text (as part of the accessible name)
  • then it announces the element type (link)
  • finally reads out the title attribute (the accessible description)

Ideally, the first pending count number should be hidden from assistive technologies using an aria-hidden attribute, one example of this is the comments "bubble" in the Posts list table.

Additionally, the title attribute should be removed :) it would make perfectly sense to remove the title attribute in the same way it was done for the comments bubble in #32152 with the help of design and UI people.

@slushman
4 years ago

Better patch using @afercia's and @rachelbaker's feedback. The visible comment bubble includes the aria-hidden, the $title variable is concatenated and includes the screen reader text.

#5 @SergeyBiryukov
4 years ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

In 36093:

Toolbar: In Comments link, replace title attribute containing the number of pending comments with a screen reader text.

Props slushman, rachelbaker.
Fixes #34895.

Note: See TracTickets for help on using tickets.