? ? Pending

User tests: Successful: Unsuccessful:

avatar hans2103
hans2103
1 Jul 2020

Pull Request for Issue # .

Summary of Changes

Make Joomla more accessible by adding the attributes aria-label or aria-labelledby
The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use aria-labelledby instead.

This attribute can be used with any typical HTML element; it is not limited to elements that have an ARIA role assigned.

source: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

When adding a module people can choose the module element. This can be a div element, but a section or an aside element too. The latter are called Landmarks. When adding more landmarks of the same type you have to add a label. Otherwise screenreaders have no clue about them.

Since Cassiopeia will be used to inspire people I have chosen to use the ArrayHelper::toString to render the attributes of the element (moduleTag or headerTag) stored in moduleAttribs and headerAttribs.

This PR will not change the current look and feel of the Cassiopeia template.

Testing Instructions

This PR only has influence on the module type html5, Cassiopeia card and Cassiopeia cardGrey.
Apply the PR and view source code of the homepage.

  • attribute aria-label is applied to modules where title is set to hide
  • attribute aria-labelledby is applied to module where title is set to show

Actual result BEFORE applying this Pull Request

No attribute aria-label or aria-labelledby are present in the modules of type html5, Cassiopeia card nor Cassiopeia cardGrey.

Expected result AFTER applying this Pull Request

The attribute aria-label or aria-labelledby are present in the modules of type html5, Cassiopeia card nor Cassiopeia cardGrey.

  • The attribute aria-label will be used when module parameter title is set to hide.
  • The attribute aria-labelledby will be used when module parameter title is set to show. The value refers to the newly set attribute id in the displayed title

Documentation Changes Required

No changes required

avatar hans2103 hans2103 - open - 1 Jul 2020
avatar hans2103 hans2103 - change - 1 Jul 2020
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 1 Jul 2020
Category Layout Front End Templates (site)
avatar brianteeman
brianteeman - comment - 1 Jul 2020

This fails validation because it should be aria-labelledby

Two letter L not one

avatar brianteeman
brianteeman - comment - 1 Jul 2020

Otherwise it works as intended - nice stuff

avatar hans2103 hans2103 - change - 2 Jul 2020
Labels Added: ?
avatar hans2103 hans2103 - change - 2 Jul 2020
Title
[4.0] add aria-label / aria-labeledby to module rendering
[4.0] add aria-label / aria-labelledby to module rendering
avatar hans2103 hans2103 - edited - 2 Jul 2020
avatar hans2103 hans2103 - change - 2 Jul 2020
The description was changed
avatar hans2103 hans2103 - edited - 2 Jul 2020
avatar hans2103
hans2103 - comment - 2 Jul 2020

This fails validation because it should be aria-labelledby

Two letter L not one

thank you @brianteeman
typo fixed and PR updated

avatar hans2103
hans2103 - comment - 2 Jul 2020

PR updated with latest changes from branch upstream/4.0dev

avatar ceford ceford - test_item - 2 Jul 2020 - Tested successfully
avatar ceford
ceford - comment - 2 Jul 2020

I have tested this item successfully on f2276b6

Without the patch there was one instance of aria-label


With the patch there were 14 instances of aria-labelledby

And 5 instances of aria-label

(A lot of experimentation with modules)
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/29886.

avatar brianteeman brianteeman - test_item - 2 Jul 2020 - Tested successfully
avatar brianteeman
brianteeman - comment - 2 Jul 2020

I have tested this item successfully on f2276b6


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/29886.

avatar alikon alikon - change - 2 Jul 2020
Status Pending Ready to Commit
avatar alikon
alikon - comment - 2 Jul 2020

RTC


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/29886.

avatar chmst chmst - change - 2 Jul 2020
Category Layout Front End Templates (site) Accessibility Front End Layout Templates (site)
avatar Quy Quy - change - 19 Jul 2020
Status Ready to Commit Pending
avatar Quy Quy - change - 21 Jul 2020
Status Pending Ready to Commit
avatar hans2103 hans2103 - change - 22 Jul 2020
Labels Added: ?
avatar wilsonge wilsonge - change - 25 Jul 2020
Status Ready to Commit Fixed in Code Base
Closed_Date 0000-00-00 00:00:00 2020-07-25 18:31:30
Closed_By wilsonge
avatar wilsonge wilsonge - close - 25 Jul 2020
avatar wilsonge wilsonge - merge - 25 Jul 2020
avatar wilsonge
wilsonge - comment - 25 Jul 2020

Thanks!

Add a Comment

Login with GitHub to post a comment