WordPress.org

Making WordPress.org

Opened 19 months ago

Closed 8 days ago

#4247 closed defect (reported-upstream)

Favoriting sessions has accessibility issues

Reported by: rianrietveld Owned by:
Milestone: Priority: normal
Component: WordCamp Site & Plugins Keywords: needs-patch good-first-bug needs-design
Cc:

Description

On the schedule of a WordCamp site there is the option to mark a session as favourite by clicking the star next to the title.
At the bottom of the page there is an option to mail/print/share the marked sessions.

There are the the following accessibility issues:

  • The colour contrast of the star against a white background is too low
  • The star is not focusable by a keyboard, it's placed in a, <a> without a href, so it get's no focus (it should be a <button>)
  • There is no text inside the <a>, so there is no accessible name, real text content for the star icon
  • The mail/print/share option should be activated by a <button>, not an <a>
  • The div with the mail/print/share option should be an accessible dialog modal
  • The tab interface inside is not keyboard accessible

This all means that this functionality is not usable for someone using a keyboard or a screen reader.

For accessible examples and components see: https://inclusive-components.design/

Change History (5)

#1 @coreymckrill
19 months ago

  • Keywords good-first-bug added
  • Status changed from new to assigned

Thank you @rianrietveld !

#2 @ryelle
9 months ago

  • Summary changed from Rate Setting Sessions, used on WordCamp sites has accessibility issues to Favoriting sessions has accessibility issues

Just noting that the issues around the star icon have been fixed (except the color contrast), the remaining issues are still accurate:

  • The mail/print/share option should be activated by a <button>, not an <a>
  • The div with the mail/print/share option should be an accessible dialog modal
  • The tab interface inside is not keyboard accessible

The color contrast of the star itself is also still too low (hasn't changed), but considering we don't know what theme/background someone will be using, this might need some thought. Good contrast against the default BG of Twenty Twenty would be a good start.

This ticket was mentioned in Slack in #meta-wordcamp by ryelle. View the logs.


4 months ago

#4 @ryelle
4 months ago

  • Keywords needs-design added

#5 @dd32
8 days ago

  • Resolution set to reported-upstream
  • Status changed from assigned to closed

This ticket has been moved to GitHub https://github.com/WordPress/wordcamp.org/issues/615

Note: See TracTickets for help on using tickets.