New Link text feature released!

Community Showcase & Announcements
, ,
1

We just posted a product update:

  • Release of Slice Machine v2.8.0 with enhancement for link fields
  • Addition of new feature: link text
  • Simplifies creation of links with display text and style in slices
  • Easier experience for marketers in the Page Builder
  • Introduction of text property in link fields for display text like "Get started"
  • Updated PrismicLink SDK to support new text property
  • Instructions on how to use the new feature in Slice Machine and Page Builder
  • Simplifies workflow by eliminating need for manual addition of key text field to links
  • More enhancements to link field and slice building coming in future updates
    Read more at: Link field
2 Likes
2

This is a welcome improvement! :partying_face:

Another way y'all could beef up the Link field in the future is to add an aria-label option so that content editors have the best possible chance at building accessible links.

My current workaround for this involves building each link as a Group Field with separate fields for Link, Link Text, and Aria Label. Granted, the Aria Label field isn't always necessary, but it does help give meaning to an otherwise useless sea of Read More links.

5

Hi Erik,

Thanks a lot for this message. I'm curious about your use case and why do you use the ``aria-label` option for links with already a link text? Does the text itself do not provide enough information to describe the accessible element to screen readers?

I feel adding aria-label can be a really good addition, but that it can provide more value when we will be able to create buttons and links with icons, cases where the aria-label can be even more useful.

Anyway, to be fully transparent, I can't say that we will prioritize now this new addition but thanks for sharing the idea, it makes a lot of sense.

Best,

Côme

6

Thanks for your response, @come.sabran!

Here's the first rule of ARIA use, straight from W3C:

2.1 First Rule of ARIA Use

If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible**, then do so**.

Under what circumstances may this not be possible?

  • If the feature is available in HTML [HTML51] but it is not implemented or it is implemented, but accessibility support is not.
  • If the visual design constraints rule out the use of a particular native element, because the element cannot be styled as required.
  • If the feature is not currently available in HTML.

You're right that it's often not necessary to add an ARIA label to a link with text, but lately, I've been running into inflexible design patterns with non-descriptive link text such as Read More, which is totally unhelpful as a link description.

Imagine tabbing through a website and your assistive tech just keeps repeating to you: Read More, Read More, Read More. Yuck! Depending on the context, I'll make these sorts of vague links more accessible by using aria-label or aria-labelledby.

Here's another great resource from The A11y Collective on enhancing link accessibility:

In the meantime, I agree with you that it's more pressing to add aria labels to icon links :point_down:

Have a good one :v:
Erik

7

Thanks @epedersen for these details. Indeed, this "Read More" example makes a lot of sense.

Have a good day!

Best,

Côme

1 Like
8

Really an amazing addition, saves me so many additional fields haha :joy:
Maybe if not setting a link text, the page title could be used as a fallback, think for me it was just empty. Nothing super bad, but would save the editors a bit of time maybe.
Also @epedersen I think I once saw the idea to combine the aria-label from title and read more, so you could maybe build it together in code?
Example: if you have a preview to a post, maybe you could do something like <a href=".... aria-label="`` `Read more about ${post.title} ">Read more

2 Likes
9

Thanks Jan! Yeah, That example works great in a ton of scenarios. In case it's helpful for you or anybody looking to improve their link accessibility, here's an example of what I mean by using aria-labelledby attributes...

This link is wrapped around each "article" card in a repeatable Group field:

<PrismicLink
  v-for="(article, index) in featuredArticles"
  :key="index"
  :field="article"
  class="article"
  :aria-labelledby="`article__title--${index}`"
>

The aria-labelledby attribute tells assistive technology to read the element with the corresponding id="article__title" as the label for the link. In this case, it's this span element, which is tucked further inside the article card:

<span
  :id="`article__title--${index}`"
  class="title"
>
  {{ article.title }}
</span>

:v:

1 Like