Making WordPress.org

Opened 8 years ago

Closed 6 years ago

#1819 closed task (blessed) (fixed)

Improve accessibility on DevHub

Reported by: drewapicture's profile DrewAPicture Owned by: obenland's profile obenland
Milestone: Priority: normal
Component: Developer Hub Keywords: accessibility
Cc:

Description (last modified by DrewAPicture)

The accessibility of DevHub is lacking in a lot of ways. Let's see if we can raise the bar a bit. Let's use this as a broad tracking ticket for various small changes. If there are more widespread needs, new tickets can be created.

  • #1820 – Use a table to display changelog data

Attachments (3)

1819.patch (2.3 KB) - added by keesiemeijer 8 years ago.
Add screen reader text to voting buttons
1819.1.patch (1.5 KB) - added by keesiemeijer 8 years ago.
Display skip links inside the note during hover, active and focus states
1819.2.patch (2.0 KB) - added by keesiemeijer 8 years ago.
Add a notification for screen readers after voting on a user contributed note

Download all attachments as: .zip

Change History (18)

#1 @DrewAPicture
8 years ago

  • Description modified (diff)

#2 @drewapicture
8 years ago

In 3657:

developer.wordpress.org: Add a skip link for screen reader users to skip to the content area.

The skip link is only initially displayed to screen readers but can be exposed when directly focused, making it available to all keyboard users.

See #1819.

#3 @DrewAPicture
8 years ago

  • Description modified (diff)

Related: Opened #1820 to cover converting the changelog to a tabular data table.

#4 @DrewAPicture
8 years ago

  • Type changed from defect to task

#5 @DrewAPicture
8 years ago

Note, the stylesheet still needs to be bumped following [3657].

@keesiemeijer
8 years ago

Add screen reader text to voting buttons

#6 @keesiemeijer
8 years ago

1819.patch adds basic screen reader texts to the voting buttons. These are empty elements that use the title attribute to describe the element.

It also adds a skip skip link to go directly to the vote content.

#7 @drewapicture
8 years ago

In 3663:

developer.wordpress.org: Revert the unnecessary global .screen-reader-text styles introduced in [3657].

They're already adequately covered under the .devhub-wrap parent.

See #1819.

#8 @drewapicture
8 years ago

In 3664:

developer.wordpress.org: Add a 'Skip to note content' link to each user contributed note for the benefit of screen reader and keyboard users.

Note: While skip links are displayed during hover, active, and focus states, they are all absolutely positioned in the top left of the document which can result in their visibility falling outside the current viewport depending on scroll position.

Props keesiemeijer.
See #1819.

#9 @drewapicture
8 years ago

In 3665:

developer.wordpress.org: Include descriptive text for the benefit of screen reader users when up- or down-vote arrows or vote totals are focused within individual user contributed notes.

Props keesiemeijer.
See #1819.

@keesiemeijer
8 years ago

Display skip links inside the note during hover, active and focus states

#10 @keesiemeijer
8 years ago

Thanks for the note, I didn't think of that. I hope the above patch solves it. Another thing we could do is add alternative text to the avatar image.

#11 @drewapicture
8 years ago

In 3668:

developer.wordpress.org: Display changelog data in a table, ordered newest-to-oldest.

See #1819. See #1820.

This ticket was mentioned in Slack in #meta-devhub by drew. View the logs.


8 years ago

@keesiemeijer
8 years ago

Add a notification for screen readers after voting on a user contributed note

#13 @iandunn
6 years ago

  • Keywords accessibility added

#14 @obenland
6 years ago

  • Owner set to obenland
  • Status changed from new to accepted

#15 @obenland
6 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 6400:

DevHub: Add a notification for screen readers after voting on a user contributed note

Props keesiemeijer.
Fixes #1819.

Note: See TracTickets for help on using tickets.