User tests: Successful: Unsuccessful:
Pull Request for Issue # .
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.
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.
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.
aria-label is applied to modules where title is set to hidearia-labelledby is applied to module where title is set to showNo attribute aria-label or aria-labelledby are present in the modules of type html5, Cassiopeia card nor Cassiopeia cardGrey.
The attribute aria-label or aria-labelledby are present in the modules of type html5, Cassiopeia card nor Cassiopeia cardGrey.
aria-label will be used when module parameter title is set to hide.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 titleNo changes required
| Status | New | ⇒ | Pending |
| Category | ⇒ | Layout Front End Templates (site) |
Otherwise it works as intended - nice stuff
| Labels |
Added:
?
|
||
| Title |
|
||||||
This fails validation because it should be
aria-labelledbyTwo letter L not one
thank you @brianteeman
typo fixed and PR updated
PR updated with latest changes from branch upstream/4.0dev
I have tested this item
Without the patch there was one instance of aria-label
I have tested this item
| Status | Pending | ⇒ | Ready to Commit |
RTC
| Category | Layout Front End Templates (site) | ⇒ | Accessibility Front End Layout Templates (site) |
| Status | Ready to Commit | ⇒ | Pending |
| Status | Pending | ⇒ | Ready to Commit |
| Labels |
Added:
?
|
||
| 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 |
Thanks!
This fails validation because it should be
aria-labelledbyTwo letter L not one