joomla
[6.0] - a11y - Contain page content by landmark
Pull Request for no issue
Summary of Changes
It is best practice that all content is contained by a landmark. On the login page of administrator the sidebar is not contained by a landmark. This PR will fix this
Testing Instructions
- Go to Joomla Administrator
- Open Dev Tools
- notice that element with className
sidebar-wrapperis not contained by a landmark. - Apply the PR
- Refresh login page
- Open Dev Tools
- notice that element with className
sidebar-wrapperis contained in landmark<aside>
Landmark <aside> is chosen because sidebar is supplementary support info
Actual result BEFORE applying this Pull Request
<div id="sidebar-wrapper" class="sidebar-wrapper">
Expected result AFTER applying this Pull Request
<aside id="sidebar-wrapper" class="sidebar-wrapper" aria-labelledby="main-brand">
Link to documentations
Please select:
-
[ ] Documentation link for docs.joomla.org:
-
[ ] No documentation changes for docs.joomla.org needed
-
[ ] Pull Request link for manual.joomla.org:
-
[ ] No documentation changes for manual.joomla.org needed
I agree with adding the landmark. Not sure about the arialabel. Will check in more detail later but I don't think it's needed or particularly helpful
I would like to have a landmark here and get rid of this ugly "missing landmark" error. But am not sure if <aside is correct. Semantic meaning is "content which is relaed to the main content and supports it". We can define modules - there we know when the module is related to the main content. But sidebar could be everything. Would be interesting to know if the <aside helps blind users and has a meaning
Aside means it is complimentary to the main region but I wonder if it can be considered as complimentary as it has the page h1 in it.
The <aside> HTML element represents a portion of a document whose content is only indirectly related to the document's main content. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/aside
This suggests it's not the correct landmark region to use here
A <div role="complementary" could match.
that is the exact same thing as aside https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/complementary.html
Not sure about the arialabel. Will check in more detail later but I don't think it's needed or particularly helpful
I was surprised that the label would identify the text as the referred id is to the div and not the individual text. So that arial label is both the h1 and the h2
In general a region only needs a label if there are more than one on the page but i dont suppose it harms having one anyway.
I wonder if this is the real main region on the page and its the login that is either complimentary or region https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/region.html
My 2 cents here.
As the h1and h2 are in the sidebar-wrapper thingy, I think the aside should be for the <div id="sidebar"> .
But, besides getting rid of the error in automatic detection tools. Does this help to anyone? Everytime I investigate about landmarks I end giving up because of the scarce support hey have in browsers and screen readers.
I have tested this item :white_check_mark: successfully on a692226b5cd71909d57ca4153ac486592b7ec517
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45988.
I have tested this item :white_check_mark: successfully on a692226b5cd71909d57ca4153ac486592b7ec517
I also looked up https://www.w3schools.com/accessibility/accessibility_landmarks.php
It tells that the
element "aside" is missing in above comment
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45988.
I just dont see how a region with the h1 inside it can ever be considered to be complimentary
I just dont see how a region with the h1 inside it can ever be considered to be complimentary
fair point. Any suggestions how to get rid of this ugly "missing landmark" error?
