Blocks landing page: Better labels for links

[alexstine]

From: #245

Most of the links on the page have great context but there are some that could use some improvement.

1. Link: Try it live Suggestion: Try Gutenberg live Reasoning: Try what live?
2. Link: View documentation Suggestion: Create a Block Reasoning: This link goes to the Create a Block Tutorial, not generic docs.
3. Please eliminate the "↗︎" icons on the links under the "Only the beginning" heading 2. You never know what screen readers will do when they come in contact with arrows. In all fairness, up arrows really don't make much sense here.

Page: https://wordpress.org/blocks/

[joedolson]

The problem isn't that the arrow character is present, but that it needs to be hidden from screen readers. Decorative images (which includes font icons, svg, and any character used for graphical rather than lexical purposes) should always be wrapped in containers with aria-hidden. What screen readers will do when they encounter non-text characters can be very unpredictable.

[ryelle]

cc @annezazu for the link label suggestions ^

The list of links with arrows is a common visual design pattern, it's used on the homepage too. We can programmatically wrap them in aria-hidden. I can't think of a case where they're used in a non-decorative capacity (and it sounds like they shouldn't be, anyway).

[annezazu]

Thank you for this feedback! I've included it in the next iteration tracking issue. Here's what I'm going with:

Link: Try it live Suggestion: Try Gutenberg live Reasoning: Try what live?

Going with "Try blocks live" since it's more about blocks rather than Gutenberg.

Link: View documentation Suggestion: Create a Block Reasoning: This link goes to the Create a Block Tutorial, not generic docs.

Updated to "Create a block". I don't love that we say create twice but we can always iterate again.

Please eliminate the "↗︎" icons on the links under the "Only the beginning" heading 2. You never know what screen readers will do when they come in contact with arrows. In all fairness, up arrows really don't make much sense here.

I've noted this as a task for Kelly to follow up on.

[alexstine]

Looks good. 👍 Thanks.

[ryelle]

Please eliminate the "↗︎" icons on the links under the "Only the beginning" heading 2.

I've just deployed some code to automatically wrap those arrows in aria-hidden. With that, I think everything here has been addressed.

[alexstine]

Looks good, thanks.