WordPress.org

Make WordPress Core

Opened 4 weeks ago

Closed 12 days ago

#50338 closed defect (bug) (fixed)

Events and News: improve the "organize one" link

Reported by: afercia Owned by: SergeyBiryukov
Milestone: 5.5 Priority: normal
Severity: normal Version:
Component: Widgets Keywords: has-screenshots good-first-bug has-patch commit
Focuses: accessibility, css, coding-standards Cc:

Description

The Events and News dashboard widget displays a "organize one" link that points to the Make page dedicated to meetup organisers. See first screenshot attached below.

This link has a couple accessibility problems:

  1. It's not underlined.
  2. It's not meaningful when read out of context.

1
Quoting from the WordPress accessibility coding standards:

When links can be identified as such by the context, for example because they’re part of a menu, or a set of links clearly identified as user interface controls, they don’t necessarily need to be underlined. In all the other cases, especially for links surrounded by other text (in a line or block of text), links need to be always underlined.

With no underline, this link is barely visible by persons with color perception impairments or low vision.

2.
The link isn't meaningful when read out of context. See second screenshot attached below.

Assistive technologies provide tools to list elements in a page, or jump through the same type of elements, etc. In this scenario, any link or user interface control should make sense also when read out of context.

When using these tools, user get a link that tells them just "organize one", with no sufficient context on the _what_. A good rule is: if this would be a front end page and good SEO was a priority, probably no one would craft a link that only says "organize one" as such a link wouldn't be meaningful enough.

Attachments (7)

Events and News widget link not underlined.png (101.2 KB) - added by afercia 4 weeks ago.
"organize one" link barely visible
Events and News widget link not underlined listed by screen readers.png (611.5 KB) - added by afercia 4 weeks ago.
"organize one" link when read out of context
organiseAWordpressEvent.png (28.2 KB) - added by samful 3 weeks ago.
50338-testing-only.diff (3.3 KB) - added by samful 3 weeks ago.
This will always show that there are no events in your area, for testing
50338.diff (1.6 KB) - added by samful 3 weeks ago.
50338.1.diff (1.7 KB) - added by audrasjb 12 days ago.
Dashboard: Add explicit labelling to WordPress Events dashboard widget
Capture d’écran 2020-06-23 à 19.02.47.png (49.9 KB) - added by audrasjb 12 days ago.
50338.1.diff

Download all attachments as: .zip

Change History (20)

@afercia
4 weeks ago

"organize one" link barely visible

@afercia
4 weeks ago

"organize one" link when read out of context

#1 @afercia
4 weeks ago

  • Focuses coding-standards added
  • Keywords good-first-bug added

#2 @williampatton
4 weeks ago

What would be the solution for the problem hilighed by the 2nd screenshot? Different text?

Would there be an appropriate way to change what a screen reader would see without adjusting the actual link? Something along the lines of the text remaining 'organise one' but the screen reader seeing 'organise a meetup near you'?

#3 @afercia
4 weeks ago

The best option is to just change the link text. There are other concerns not limited to screen reader users. Cognitive impairments for example, reading impairments, etc. etc.

#4 @samful
3 weeks ago

@afercia, I liked how you said "if this would be a front end page and good SEO was a priority,.."

If I was making this a link on the front page for SEO, I would say "Organise a WordPress Event" so that Google knows what we are talking about, and screen readers are very similar in this respect.

In this case, and the fact it requires an underline to be visible, how about making it like so? :

#5 @afercia
3 weeks ago

@samful thanks, looks good to me.

so that Google knows what we are talking about, and screen readers are very similar in this respect.

Exactly, that's the whole point. They're both software.

#6 @samful
3 weeks ago

I want to help as much as I can with this, so I can learn how to properly contribute to WordPress. I know the CSS rule we would need is:

#dashboard-widgets .event-none a{text-decoration: underline;} in the wp-admin/css/dashboard.min.css and wp-admin/css/dashboard.css files.

And also the text would need to be edited in the wp-admin/includes/dashboard.php file.

However, I can't make the patch because I don't know how to do 2 things yet...

  1. Is there a WordPress standard for minifying CSS files? I'm using Visual Studio Code but am unsure if any minify plugin will do, or if there is a standard.
  1. If I changed the text in that dashboard.php file, how would I alert the translation team and would I include my translation file admin-en_GB.po in this patch?

I hope this comment helps and a special thanks to anyone who can answer my questions :)

Last edited 3 weeks ago by samful (previous) (diff)

#7 @williampatton
3 weeks ago

@samful WP minifies it's CSS with a grunt process that can be triggered with npm run grunt build from the root of the develop repo (you do need to do npm install beforehand). It can take a while on the first run. See: https://make.wordpress.org/core/handbook/testing/patch/#setting-up-without-vvv for some more details.

Translations are handled through glotpress. Some details can be found here: https://translate.wordpress.org/ I have never done translations before so I cannot be more helpful but you can likley find more information there. You shouldn't need to include the .po file directly in your patch here though.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


3 weeks ago

#9 @afercia
3 weeks ago

  • Milestone changed from Awaiting Review to 5.5

This ticket was discussed during today's accessibility bug-scrub: agreed to set the milestone to the next major release, as this seems a pretty simple improvement.

#10 @samful
3 weeks ago

  • Focuses css added
  • Keywords has-patch needs-testing added

Thanks to @williampatton, I understand how WP creates the minified files now and also that I don't need to include my .po file. I'm adding 2 patches to test:

One is for testing, as currently the "WordCamp Denver, CO, USA" event appears no matter what location you type in. The patch effectively breaks the events code to always have no events, no matter what location you type in.

And the 2nd is the patch without the events code commented out.

To be clear, you'll probably want to use the 50338-testing-only.diff to test and if that works we can commit the 50338.diff

Please test, thanks.

@samful
3 weeks ago

This will always show that there are no events in your area, for testing

@samful
3 weeks ago

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


12 days ago

@audrasjb
12 days ago

Dashboard: Add explicit labelling to WordPress Events dashboard widget

#12 @audrasjb
12 days ago

  • Keywords commit added; needs-testing removed

50338.1.diff refreshes the previous patch (which didn't apply cleanly to trunk).
Marking this for commit.

#13 @SergeyBiryukov
12 days ago

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

In 48146:

Accessibility: Administration: Give the link to meetup organizer handbook in the WordPress Events and News dashboard widget a more meaningful label.

This ensures that the link still makes sense when read out of context by assistive technologies.

Additionally, underline the link per the accessibility coding standards.

Props samful, afercia, williampatton, audrasjb.
Fixes #50338.

Note: See TracTickets for help on using tickets.