PLIP #6504: Make CMS-UI inclusive and accessible

[Wagner3UB]

PLIP (Plone Improvement Proposal)

Adding the capability for people using a keyboard or assistive technologies to add/edit content or use the controlpanels.

Responsible Persons

Proposer: @Wagner3UB

Seconder: @pnicolli

Abstract

This PLIP proposes improving the Plone CMS user interface (CMS-UI) to ensure accessibility and inclusivity. The focus will be on enabling users who rely on keyboards or assistive technologies to add and edit content and navigate control panels effectively. The goal is to align the CMS-UI with modern accessibility standards, enhancing the overall user experience.

Motivation

Plone is committed to being an inclusive platform. While the CMS already offers some accessibility features, there are limitations for users who depend solely on keyboards or assistive devices. Enhancing the CMS-UI for these users ensures that Plone continues to serve a diverse audience and complies with global accessibility standards, such as WCAG. Accessibility improvements will also foster broader adoption and demonstrate Plone’s commitment to equitable digital experiences.

Assumptions

• Users may rely on various assistive technologies, including screen readers, switch devices, and alternative input methods.
• Plone’s UI components need refinement to fully support keyboard navigation and meet ARIA (Accessible Rich Internet Applications) requirements.
• Developers and designers involved in this project will follow best practices in accessibility.

Proposal & Implementation

1. Audit the CMS-UI: Conduct an accessibility audit to identify areas that require improvement, focusing on navigation, form handling, different use cases for blocks and content types, modals, control panels and sidebars/toolbars handling.
2. Implement Keyboard Navigation: Ensure that all interactive elements, such as buttons, links, menus, and forms, are accessible via keyboard.
3. Add ARIA Roles and Labels: Integrate ARIA attributes to provide context and improve compatibility with screen readers.
4. Implement and promote the use of Adobe Aria Components while gradually phasing out Semantic-UI.
5. Color Contrast & Focus Indicators: Review and adjust color contrast and add clear focus indicators for interactive elements.
6. Testing and Feedback: Collaborate with users of assistive technologies to validate improvements through real-world testing.
7. Documentation: Update Plone’s accessibility documentation to reflect changes and provide guidelines for future development.
8. Specific guideline: Provide documentation with use cases, such as focus and minimal contrast for the main font color, links, and buttons (+). Additionally, include a list of used colors, font sizes, and border widths (+)

Deliverables

• A fully accessible CMS-UI that complies with WCAG 2.1 standards.
• Comprehensive documentation on accessibility improvements and usage.
• Automated and manual test cases focusing on accessibility.

Risks

• Increased Complexity: Accessibility enhancements may introduce complexities in the UI codebase, potentially requiring more maintenance.
• Time and Resources: Ensuring thorough testing and validation may require additional time and resources.
• Browser Compatibility and assistive technologies: Ensuring consistent behavior across different browsers and assistive technologies may present challenges.

Participants

• @stevepiercy for documentation
• @ichim-david as member of the A11Y Team
• @JeffersonBledsoe as member of the A11Y Team
• @Wagner3UB as member of the A11Y Team

Issues and related PR's

At this moment it's possible to use the label: "99 tag: UX Accessibility" to find most of the issues and PR's.

TODO: An improvement in the way items related to accessibility and inclusion are cataloged is necessary.

PR's

• Update a11y guidelines #6361
• Accessibility for sortable table headers in slate table #6358
• Add visually-hidden class #6356
• feat: added custom condition to the aria-label user button #6346
• A11y Addons control panel  #6345
• fix: fixed actions button around wrapper text input and tried to add focus on wrapper #6344
• Refs #4770 - Accessibility acceptance tests for blocks #6329
• fix: Listing block default summary should use ul tag for its listing #6318
• onFocus handle to focus tabbed blocks #6314
• fix: Listing block default summary should use ul tag for its listing #6318
• onFocus handle to focus tabbed blocks #6314
• Folder Contents Overhaul #6025
• Fixed A11y Video Block Issue #5732
• First focus edit page #5392
• onFocus function to handle block selection #5273
• Accessibility management for Slate containers and keyboard navigation focus #5271
• Add Accessibility acceptance tests for blocks (#4770) #4781
• Add Accessibility acceptance tests for content-types(#770) #4773
• 4580 it should be possible to open linked items in a new tab #4600
• Fix video block can't be re-selected once it has been clicked on #4147
• Add a sidebar toggle into the toolbar and close button into sidebar #3912
• fix a11y search #3491

Issues

• a11y - autocomplete attribute on text fields in Form (volto-form-block) #6336
• FileWidget and CheckboxWidget don't have accessible field labels #6341
• a11y - site setup - Date and Time - input fields - cms ui - focus visible #6348
• Image gallery variation has no proper focus border #6304
• Image gallery listing variation: Disable play-pause button for screen-readers #6303
• [A11Y] Video Block - Videos not playable via screen-reader/tab focus #5731
• a11y: add aria-live="polite" to results table in folder content #5617
• Sidebar and toolbar shrink/ expanded functionality should work correctly for screen reader users #5466
• No Label for Search Block Dropdown Form element #5400
• a11y - unable to tab to #toolbar-personal #5396
• a11y - edit page - handle and delete block icons - cms ui #5269
• a11y - edit page - skip links - cms ui #5268
• a11y - edit page - sidebar objectBrowser button - cms ui #5221
• a11y - edit page - add block/blocks-chooser - cms ui  #5212
• a11y - edit page - block identification - cms ui  #5211
• a11y - edit page - text input keyboard path focus - cms ui #5204
• a11y - default text block minimum contrast and focus - cms ui #5203
• a11y - Edit - main content/sidebar - cms ui #5150
• a11y - contents page - select columns to show - cms ui  #5148
• a11y - contents page - visible focus - cms ui #5147
• a11y - contents page - contrast - cms ui #5144
• a11y - site setup - User Group Membership - cms ui #5143
• a11y - site setup - Addon-ons - cms ui #5142
• a11y - site setup - Content Types - sidebar "add new content type" button - cms ui #5141
• a11y - site setup - Date and Time - cancel/delete buttons input fields - cms ui #5140
• a11y - sharing page - Under table text description - cms ui  #5129
• a11y - sharing page - Minimum contrast - cms ui #5127
• a11y - sharing page - Visible focus - cms ui #5125
• a11y - Default sidebar - sidebar tabs (plone site/blocks), full-screen and shrink/expand sidebar button - cms ui #5123
• a11y - Default sidebar "plone site" - Focus and labels - cms ui #5122
• a11y - key press focus - wrong behavior - cms ui #5121
• a11y - Icon for toolbar button "user" - cms ui #5119
• a11y - expand/shrink toolbar - cms ui #5118
• Listing block default summary view uses headline html tags for its listing #4982
• Accessibility acceptance tests for the blocks editor #4771
• Accessibility acceptance tests for blocks #4770
• Accessibility: Video block placeholder image missing Alt #4747
• Slate text editor causes a focus trap when tabbing #3679
• A11Y: Testing in editor #2544
• A11Y: Testing the whole site #2543
• A11Y: Change language within a text block #2485
• A11Y: Accessibility documentation for developers #1508
• A11Y: Accessible Video/Audio files #1507
• A11Y: Check uploaded PDFs for accessibility #1506 - To confirm if it needs more attention
• [UI improvements] Toolbar #1384
• Accessibility acceptance tests for content-types #770 - To confirm if it needs more attention
• Pastanaga Editor: Increase contrast #301 - To confirm if it needs more attention

[tisto]

@Wagner3UB +1 from me!

I am wondering if the ATAG guidelines are relevant here?

https://www.w3.org/WAI/standards-guidelines/atag/

@sneridagh please make sure that the @plone/volto-team votes on this at the next meeting.

[stevepiercy]

Proposal & Implementation

7. Documentation: Update Plone’s accessibility documentation to reflect changes and provide guidelines for future development.

Update to:

7. Documentation: Update Plone’s accessibility documentation to reflect changes and provide guidelines for future development. WIP Update a11y guidelines #6361.

Issues and related PR's

TODO: An improvement in the way items related to accessibility and inclusion are cataloged is necessary.

What improvements do you want that the current label does not do?

[stevepiercy]

We also need to align how we market Plone with this PLIP. See https://plone.org/accessibility

[JeffersonBledsoe]

I am wondering if the ATAG guidelines are relevant here?

Makes me happy hearing ATAG mentioned! It's not discussed as much as it should be.
As a generalisation, the ATAG guidelines are essentially WCAG for the editor + making sure the content produced by the CMS is accessible + having tools within the editing environment to check & fix accessibility issues with content.
That said, we still have alot of work to do to in meeting the WCAG compliance side so should focus in on that!

[sneridagh]

Terrific work by compiling all the a11y issues in Volto!

@plone/volto-team @plone/volto-accessibility I wonder how to apply this to Seven in a sustainable way, so we test exhasustively a11y from the very beginning. Shall we create a new PLIP exclusively for Seven with the directives and best practices in there, or just reuse this one? The thing is that all the listed issues would be useless in there.

[stevepiercy]

@sneridagh the first steps are to prioritize what we will test within accessibility (we can't test everything without exploding), how we test it, what tools we will use, and document the process. I don't know when the next @plone/volto-accessibility team meeting will be for sure, but it's tentatively scheduled for Mar 4.