Making the Cassiopeia template more accessible #68
Description
Intruduction
HTML 5 has provided new semantic tags that are used to organize the pages on website, such as: header, main, footer, aside, nav, section, form and a new role attribute (complementary, conteninfo, search, region, etc.).
Over the past six years, rules have been very precisely defined for identifying key areas (landmarks) of the page using these new tags and the role attribute.
The use of these elements is particularly important for users of assistive technologies. For example, screen readers provide navigation through landmarks. It can be expected that such a function will also be implemented in modern browsers or that special plugins for browsers will be created (the Landmarks plugin for Chrome already exists).
Unfortunately, the default Joomla 4 template - Cassiopeia - did not apply these rules. As a result, the default template does not provide essential functionality for digital accessibility. It is also not a good design pattern for template creators.
Rules
- the entire page should be divided into key areas (named landmarks), no content may be outside these areas,
- each area must have a specific role in the page structure given by a structural tag or the role attribute,
- only one area can have the
mainrole, - the
mainarea must be the top level area (landmark), - only one area can have the role of a
banner(headertag; a page can have only one page header), - the
bannerarea (headertag ) must be the top level area (landmark), - only one area can have the
contentinforole (footertag; a page can have only one page footer), - the
contentinfoarea must be the top level area (landmark), - more than one area can have a
navrole, - the
navarea can be part of another area (landmark), - more than one area can have a
complementaryrole, complementaryareas must be top-level areas (landmarks)- more than one area can have a
searchrole, - more than one area can have a role
region, - more than one key area of the same type (performing the same role) must have a unique name.
- the key area (landmark) name can be given using aria-label or aria-labelldeby
A new structural element of the template is needed
Since there may be several areas on the page that serve as role="complementary" or role="region", a new structural element of the template is needed. It is a container in which modules can be placed and which can be given an accessible name.
It is best to define a new container using the section tag.
It should be a container in which to place modules and to which you can give an accessible name. The accessible name can be hidden or explicit. The administrator should be able to specify both an explicit and a hidden name.
The explicit name should be the area header (at the h2 level) with the identifier that should be pointed to by the aria-labelled attribute of the section tag.
The hidden name only for assistive technologies, should be the aria-label attribute added to the section tag.
References
See: