Ticket #12092 (confirmed Bug)

Opened 5 years ago

Last modified 3 years ago

Accessibility improvements to default Plone folder views

Reported by: trs22 Owned by: rmattb
Priority: minor Milestone: 5.0
Component: Templates/CSS Version: 4.3
Keywords: accessibility Cc: trs22, rmattb

Description (last modified by rmattb) (diff)

The folder_summary_view uses h2 and p tags as the item titles and descriptions:

 http://dev.plone.org/plone/browser/Products.CMFPlone/tags/4.1/Products/CMFPlone/skins/plone_content/folder_summary_view.pt

while the folder_listing view uses dl and dt and dd tags:

 http://dev.plone.org/plone/browser/Products.CMFPlone/tags/4.1/Products/CMFPlone/skins/plone_content/folder_listing.pt

There needs to be a discussion around if the h2's in folder_summary_view are semantically correct as headers, versus the dl/dt/dd implementation in folder_listing. When we discussed this, there wasn't a clear consensus on if headers made sense, but we did have a consensus that both should be implemented consistently.

This will probably break a *bunch* of individual themes CSS no matter how it changes.

Change History

comment:1 Changed 5 years ago by rmattb

  • Component changed from Infrastructure to Templates/CSS
  • Milestone set to 4.2

Considerations for users of screen readers:

  • the main content of the page is composed entirely of this listing
  • users of screen readers need a way to navigate the main content of the page (the listing)
  • users of screen readers commonly *do* expect to navigate the main content of the page by headings or links
  • users of screen readers commonly *do not* expect to navigate the main content of the page by definition terms

Therefore, people using screen readers are best served by the titles being tagged as headings.

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

comment:3 Changed 5 years ago by rmattb

  • Cc rmattb added

comment:4 in reply to: ↑ description ; follow-up: ↓ 11 Changed 5 years ago by rmattb

The folder_tabular_view should use <th> tags for the item titles in the first column, instead of <td>.

comment:5 in reply to: ↑ description Changed 5 years ago by rmattb

  • Description modified (diff)

Replying to trs22:

The folder_summary_view uses h2/p tags as the item titles and descriptions:

 http://dev.plone.org/plone/browser/Products.CMFPlone/tags/4.1/Products/CMFPlone/skins/plone_content/folder_summary_view.pt

while the folder_listing view uses dl/dt/dd:

 http://dev.plone.org/plone/browser/Products.CMFPlone/tags/4.1/Products/CMFPlone/skins/plone_content/folder_listing.pt

There needs to be a discussion around if the h2's in folder_summary_view are semantically correct as headers, versus the dl/dt/dd implementation in folder_listing. When we discussed this, there wasn't a clear consensus on if headers made sense, but we did have a consensus that both should be implemented consistently.

This will probably break a *bunch* of individual themes CSS no matter how it changes.

comment:6 Changed 5 years ago by rmattb

  • Description modified (diff)

The atct_album_view should also use heading tags.

comment:9 Changed 5 years ago by rmattb

  • Description modified (diff)
  • Summary changed from Accessibility enhancements to default Plone folder views (folder_listing, folder_summary_view) to Accessibility improvements to default Plone folder views

comment:10 in reply to: ↑ 7 Changed 5 years ago by rmattb

Adding a heading tag <h2> inside the definition term tag <dt> fails validation, because h2 is a block level element, and dt is inline.

This problem is similar to that of heading tags on portlet headings, #11978.

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

comment:11 in reply to: ↑ 4 Changed 5 years ago by rmattb

Replying to rmattb:

The folder_tabular_view should use <th> tags for the item titles in the first column, instead of <td>.

The table header tag should also specify the row as its scope: <th scope="row">

comment:12 Changed 4 years ago by rmattb

The best solution for the folder_listing view's definition lists is to change the definition list to headings and paragraphs. See  https://weblion.psu.edu/trac/weblion/changeset/17477

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

comment:13 Changed 4 years ago by rmattb

  • Version set to 4.1

Code for this in Plone 4.1 has been tested with JAWS, VoiceOver, and NVDA is at  https://weblion.psu.edu/trac/weblion/browser/weblion/plonetheme.psuaccessiblesunburst/

Specifically, these changesets for the non-tabular views:

 https://weblion.psu.edu/trac/weblion/changeset/17477/weblion/plonetheme.psuaccessiblesunburst/trunk/plonetheme/psuaccessiblesunburst

 https://weblion.psu.edu/trac/weblion/changeset/17481/weblion/plonetheme.psuaccessiblesunburst/trunk/plonetheme/psuaccessiblesunburst

 https://weblion.psu.edu/trac/weblion/changeset/17482/weblion/plonetheme.psuaccessiblesunburst/trunk/plonetheme/psuaccessiblesunburst

 https://weblion.psu.edu/trac/weblion/changeset/17491/weblion/plonetheme.psuaccessiblesunburst/trunk/plonetheme/psuaccessiblesunburst

 https://weblion.psu.edu/trac/weblion/changeset/17559/weblion/plonetheme.psuaccessiblesunburst/trunk/plonetheme/psuaccessiblesunburst

 https://weblion.psu.edu/trac/weblion/changeset/17574/weblion/plonetheme.psuaccessiblesunburst/trunk/plonetheme/psuaccessiblesunburst

Specifically, these changesets for the tabular view:

 https://weblion.psu.edu/trac/weblion/changeset/17485/weblion/plonetheme.psuaccessiblesunburst/trunk/plonetheme/psuaccessiblesunburst

 https://weblion.psu.edu/trac/weblion/changeset/17486/weblion/plonetheme.psuaccessiblesunburst/trunk/plonetheme/psuaccessiblesunburst

 https://weblion.psu.edu/trac/weblion/changeset/17490/weblion/plonetheme.psuaccessiblesunburst/trunk/plonetheme/psuaccessiblesunburst

 https://weblion.psu.edu/trac/weblion/changeset/17575/weblion/plonetheme.psuaccessiblesunburst/trunk/plonetheme/psuaccessiblesunburst

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

comment:14 Changed 4 years ago by rmattb

  • Owner set to rmattb

comment:15 Changed 4 years ago by rmattb

  • Version changed from 4.1 to 4.3
  • Milestone changed from 4.2 to 4.3

comment:16 Changed 4 years ago by rmattb

  • Status changed from new to confirmed

comment:18 follow-up: ↓ 19 Changed 3 years ago by kleist

Plone 4.3 b1 is round the corner, so if nothing has happened regarding this ticket I'd like to change its Milestone.

comment:19 in reply to: ↑ 18 Changed 3 years ago by rmattb

Replying to kleist:

Plone 4.3 b1 is round the corner, so if nothing has happened regarding this ticket I'd like to change its Milestone.

Yes, thank you.

comment:20 Changed 3 years ago by kleist

  • Milestone changed from 4.3 to 4.4

comment:21 Changed 3 years ago by rmattb

  • Milestone changed from 4.4 to 5.0

comment:22 Changed 3 years ago by rmattb

Changed milestone to next major version, due to theming backward incompatibility.

Note: See TracTickets for help on using tickets.