Events and News: improve the "organize one" link

[afercia]

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.

[afercia]

"organize one" link barely visible

[afercia]

"organize one" link when read out of context

[williampatton]

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'?

[afercia]

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.

[samful]

@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? :

[afercia]

@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.

[samful]

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.

2. 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 :)

[williampatton]

@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.

[afercia]

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.

[samful]

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]

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

[audrasjb]

Dashboard: Add explicit labelling to WordPress Events dashboard widget

[audrasjb]

50338.1.diff

[audrasjb]

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

[SergeyBiryukov]

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.