Ticket #11982 (closed Bug: fixed)

Opened 3 years ago

Last modified 23 months ago

“Read More” links ambiguous

Reported by: rmattb Owned by: rmattb
Priority: major Milestone: 4.2
Component: Templates/CSS Version: 4.1
Keywords: accessibility Cc: rmattb

Description (last modified by rmattb) (diff)

Issue:

Links should be understandable out of context. Screen reader users often browse through a list of all the links on a page (without the surrounding text) and “Read More...” appears over and over, which is ambiguous. This appears in the Summary View, for example.

Recommendation:

All of the following:

  • Before “Read More...” or "More...", add hidden text of the item title and a dash for screen readers to make the links semantically meaningful. For example, <span class=”hiddenStructure”>[title] - </span>, where [title] is generated by a tal expression.
  • Allow people to use the item title link by styling it clearly as a link. This link is in place, but for people who are color-impaired, it is not clearly styled with border-bottom. This is detailed in #11983, which also covers other heading links.
  • (Nice to have, but more work) Provide a checkbox in site setup to display or hide the "Read More..." block. Use cases for quickly finding reference information, such as intranets, may be better served *without* "Read More...", but use cases for maximizing site stickiness, such as marketing sites, may be better served *with* "Read More...".

Implementation:

"Read More..." links are present in these listing view templates:

  • Products/CMFPlone/skins/plone_content/folder_full_view_item.pt
  • Products/CMFPlone/skins/plone_content/folder_summary_view.pt
  • Products/CMFPlone/skins/plone_templates/events_listing.pt
  • plone/app/collection/browser/templates/summary_view.pt

"More..." links are present in these portlet view templates & test:

  • plone/app/collection/portlets/templates/collectionportlet.pt
  • plone/app/portlets/portlets/rss.pt
  • plone/portlet/collection/collection.pt
  • plone/portlet/collection/tests/functional.txt

These files were found in a Plone 4.2 development instance with:

  • grep -ri "more&hellip" eggs/* | grep -v ".svn" | grep -v "LC_MESSAGES" | grep -v "Binary file "
  • grep -ri "more&hellip" src/* | grep -v ".svn" | grep -v "LC_MESSAGES" | grep -v "Binary file "

Change History

comment:1 Changed 3 years ago by rmattb

  • Description modified (diff)

comment:2 Changed 3 years ago by rmattb

  • Description modified (diff)

comment:3 Changed 3 years ago by rmattb

  • Description modified (diff)

comment:4 Changed 3 years ago by rmattb

  • Description modified (diff)

comment:5 Changed 3 years ago by rmattb

  • Description modified (diff)

comment:6 Changed 2 years ago by rmattb

  • Description modified (diff)

comment:7 Changed 2 years ago by rmattb

  • Description modified (diff)

comment:8 Changed 2 years ago by rmattb

  • Description modified (diff)

comment:9 Changed 2 years ago by rmattb

  • Description modified (diff)
  • Summary changed from “Read more” links ambiguous to “Read More” links ambiguous

comment:10 Changed 2 years ago by rmattb

  • Description modified (diff)

comment:11 Changed 2 years ago by rmattb

  • Description modified (diff)

comment:12 Changed 2 years ago by rmattb

  • Description modified (diff)

comment:13 Changed 2 years ago by rmattb

  • Description modified (diff)

comment:14 Changed 2 years ago by rmattb

  • Description modified (diff)

comment:15 Changed 2 years ago by rmattb

  • Owner set to rmattb

comment:16 Changed 2 years ago by rmattb

  • Description modified (diff)

comment:17 Changed 2 years ago by rmattb

  • Description modified (diff)

comment:18 Changed 2 years ago by rmattb

  • Status changed from new to assigned

comment:19 Changed 2 years ago by rmattb

  • Description modified (diff)

Code now appears to be complete; testing on multiple screen readers.

comment:20 Changed 2 years ago by rmattb

For review, here are the proposed changes for the key change: Before “Read More...” or "More...", add hidden text of the item title and a dash for screen readers to make the links semantically meaningful.

Products/CMFPlone/skins/plone_content/folder_full_view_item.pt

<                tal:attributes="href python:test(item_type in use_view_action, item_url+'/view', item_url);"
<                i18n:translate="read_more">
<                 Read More&hellip;
---
>                tal:attributes="href python:test(item_type in use_view_action, item_url+'/view', item_url);">
>                <span class="hiddenStructure"><span tal:replace="context/Title" /> - </span>
>                <span i18n:translate="read_more">Read More&hellip;</span>

Products/CMFPlone/skins/plone_content/folder_summary_view.pt

<                            tal:attributes="href python:test(item_type in use_view_action, item_url+'/view', item_url);"
<                            i18n:translate="read_more">
<                         Read More&hellip;
---
>                            tal:attributes="href python:test(item_type in use_view_action, item_url+'/view', item_url);">
>                            <span class="hiddenStructure"><span tal:replace="item_title_or_id" /> - </span>
>                            <span i18n:translate="read_more">Read More&hellip;</span>

Products/CMFPlone/skins/plone_templates/events_listing.pt

<                             <a href="/view" tal:attributes="href resulturl" i18n:translate="read_more">
<                                 Read More&hellip;</a>
---
>                             <a href="/view" tal:attributes="href resulturl">
>                                 <span class="hiddenStructure"><span tal:replace="result/pretty_title_or_id" /> - </span>
>                                 <span i18n:translate="read_more">Read More&hellip;</span>

plone/app/collection/browser/templates/summary_view.pt

<                    tal:attributes="href python:item_type in use_view_action and item_url+'/view' or item_url;"
<                    i18n:translate="read_more">
<                 Read More&hellip;
---
>                    tal:attributes="href python:item_type in use_view_action and item_url+'/view' or item_url;">
>                    <span class="hiddenStructure"><span tal:replace="item/Title" /> - </span>
>                    <span i18n:translate="read_more">Read More&hellip;</span>

plone/app/collection/portlets/templates/collectionportlet.pt

<             <a tal:attributes="href collection_url" i18n:translate="more_url">
<                  More&hellip;
---
>             <a tal:attributes="href collection_url">
>                 <span class="hiddenStructure"><span tal:replace="view/data/header" /> - </span>
>                 <span i18n:translate="more_url">More&hellip;</span>

plone/app/portlets/portlets/rss.pt

<            tal:attributes="href view/siteurl"
<            i18n:translate="box_morelink">
<                 More&hellip;
---
>            tal:attributes="href view/siteurl">
>            <span class="hiddenStructure"><span tal:replace="view/title" /> - </span>
>            <span i18n:translate="box_morelink">More&hellip;</span>

plone/portlet/collection/collection.pt

<         <a tal:attributes="href collection_url" i18n:translate="more_url">
<             More&hellip;
---
>         <a tal:attributes="href collection_url">
>             <span class="hiddenStructure"><span tal:replace="view/data/header" /> - </span>
>             <span i18n:translate="more_url">More&hellip;</span>

plone/portlet/collection/tests/functional.txt

<     More&hellip;
---
>     <span class="hiddenStructure">Test Collection - </span>
>     <span>More&hellip;</span>
Last edited 2 years ago by rmattb (previous) (diff)

comment:21 Changed 2 years ago by rmattb

  • Owner rmattb deleted
  • Status changed from assigned to new

comment:22 Changed 2 years ago by rmattb

  • Description modified (diff)

comment:23 Changed 2 years ago by rmattb

  • Owner set to rmattb

comment:24 Changed 2 years ago by rmattb

In trying to test events_listing.pt, found that events_listing is mentioned in plone/app/portlets/portlets/events.py only when no events folder is present.

davisagli: mattbarkau: it's 404ing when the events_listing template tries to get portal_discussion.isDiscussionAllowedFor, which is no longer part of the API for the new discussion tool

davisagli: (figured that out by taking NotFound out of the ignored exceptions in the error_log)

davisagli: and it should be fixed to include comments in the same way as elsewhere

Created ticket #12477: events_listing template errs with NotFound: isDiscussionAllowedFor

Coding for this ticket is complete, but #12477 blocks the final testing of this ticket, since events_listing.pt is not working even before the accessibility fixes.

Last edited 2 years ago by rmattb (previous) (diff)

comment:25 Changed 2 years ago by rmattb

  • Version set to 4.1
Last edited 2 years ago by rmattb (previous) (diff)

comment:26 Changed 23 months ago by rmattb

Tested reading of the dash character in multiple screen readers: JAWS and Orca say "dash", VoiceOver and NVDA do not read the dash. Per bslash, Dutch guidelines also recommend using the dash character, rather than endash or emdash.

comment:27 Changed 23 months ago by hmharter

New updated commit message:

Updated "Read More" links to include hidden reference to item title for better accessibility. Ticket #11982.

Last edited 23 months ago by hmharter (previous) (diff)

comment:28 Changed 23 months ago by bslash

plone/app/collection/portlets/templates/collectionportlet.pt does not exist anymore (functionality duplicated in plone.portlet.collection) so one file less to edit

comment:29 Changed 23 months ago by bslash

Changes have been pushed to 4.2 branch on github, ready for review.

comment:30 Changed 23 months ago by bslash

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

comment:31 Changed 23 months ago by par117

  • Status changed from closed to reopened
  • Resolution fixed deleted

comment:32 Changed 23 months ago by par117

plone.app.collection introduced in 4.2 has separate templates that also exhibit the "Read More..." links that are ambiguous for screen reader users.

comment:33 Changed 23 months ago by par117

  • Status changed from reopened to closed
  • Resolution set to fixed

New updated commit message:

Made the "more" links more accessible by adding a contextual prefix to the link that is not visually displayed, see https://dev.plone.org/ticket/11982

Effects: plone/app/collection/browser/templates/summary_view.pt.

Note: See TracTickets for help on using tickets.