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-labelledby
Two 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-labelledby
Two letter L not one