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
main role,
- the
main area must be the top level area (landmark),
- only one area can have the role of a
banner (header tag; a page can have only one page header),
- the
banner area (header tag ) must be the top level area (landmark),
- only one area can have the
contentinfo role (footer tag; a page can have only one page footer),
- the
contentinfo area must be the top level area (landmark),
- more than one area can have a
nav role,
- the
nav area can be part of another area (landmark),
- more than one area can have a
complementary role,
complementary areas must be top-level areas (landmarks)- more than one area can have a
search role,
- 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:
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,formand a newroleattribute (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
mainrole,mainarea must be the top level area (landmark),banner(headertag; a page can have only one page header),bannerarea (headertag ) must be the top level area (landmark),contentinforole (footertag; a page can have only one page footer),contentinfoarea must be the top level area (landmark),navrole,navarea can be part of another area (landmark),complementaryrole,complementaryareas must be top-level areas (landmarks)searchrole,region,A new structural element of the template is needed
Since there may be several areas on the page that serve as
role="complementary"orrole="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
sectiontag.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
h2level) with the identifier that should be pointed to by thearia-labelledattribute of the section tag.The hidden name only for assistive technologies, should be the
aria-labelattribute added to the section tag.References
See: