The way 'more links' are currently built leads to bad practice in terms of accessibility — links with text like "Read more", "Learn more", etc. provide insufficient information about link purpose to screen reader users. This is especially problematic with lists of items, e.g. a view of blog teasers, leading to numerous links all announced by a screen reader as "Read more" with no additional context.
See Accessible "Read More" Links for a good general overview of the issue.
Add an aria-label attribute to the more link, with customizable text and token support — example: "Read more about [node:title]". In most cases, the screen reader will announce the aria-label text instead of the link text (watch a short demo on YouTube to see this in action). This provides the additional context needed for screen reader users, while keeping the link text short for others.
Though this is often accomplished with a "visually-hidden" element within the link text, recent testing indicates that "screen readers consistently and correctly expose aria-label overriding the anchor text on the Windows 10 platform as well as on mobile devices- iOS and Android."
This issue provides an alternative approach to #3115149: ARIA label for More link, which, despite having "aria label" in the title, uses CSS-hidden text coupled with aria-hidden and role=presentation.
Add a "more link aria-label" field and token browser to the formatter settings form.
None.
Add 'more_aria_label' to schema.
| Comment | File | Size | Author |
|---|---|---|---|
| #9 | smart_trim-aria-label-3194955-9.patch | 3.57 KB | justcaldwell |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
justcaldwellInitial patch attached. This adds:
If the additional dependency is undesirable, the new elements could be made conditional with a check for token.
Comment #3
justcaldwellComment #4
othermachines commentedPatch looks good. Tested in Drupal 8.9.13 and smart_trim 1.3.0 (as good as -dev since there are no new commits since last release). A simple yet complete solution. Thanks!
Comment #7
markie commented@justcaldwell thank you so much for this patch. I actually used this issue and patch for my global contrib talk tonight. One thing that came up as I was showing it is can we add drupal/token as a requirement in the composer.json and info.yml since we are using token?
Comment #8
justcaldwellHi @markie! Great point, the token dependency should definitely be added to composer.json. I can upload an updated patch a bit later today, if that's the right move. To be honest, I'm not fully up to speed on the new issue fork workflow yet :0
Comment #9
justcaldwellHere's the updated patch. No diff, as I only made the single change to composer.json.
Comment #10
markie commentedHey it's cool.. I'll take care of it, but more and more maintainers are going to start forcing the MR over patches. Also it's an easier workflow since all you should need to do is confirm push access, checkout the merge repo and then edit there and push.. no need to create and upload a patch.
Comment #11
markie commentedComment #13
markie commentederr.. merge fixes this right?
Comment #14
rachel_norfolkJust doing a little tag tidying. Nice work everyone!!