Hi everybody,
<div class="moduletable module-menu">
<h3 >This Site</h3>
<div class="navbar navbar-expand-md">
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbar26" aria-controls="navbar26" aria-expanded="false" aria-label="Navigation umschalten">
<span class="icon-menu" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse" id="navbar26">
<ul class="mod-menu mod-list nav menu">
<li class="nav-item item-435 default"><a href="/index.php" >Home</a></li><li class="nav-item item-294 parent"><a href="/index.php/site-map" >Site Map</a></li><li class="nav-item item-233"><a href="/index.php/login" >Login</a></li><li class="nav-item item-238 parent"><a href="/index.php/sample-sites" >Sample Sites</a></li><li class="nav-item item-448"><a href="/administrator" target="_blank" rel="noopener noreferrer">Site Administrator</a></li><li class="nav-item item-455"><a href="/index.php/using-joomla/extensions/components" >Example Pages</a></li></ul>
</div>
</div>
</div>
<div class="moduletable module-menu">
<h3 >This Site</h3>
<nav class="navbar navbar-expand-md">
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbar26" aria-controls="navbar26" aria-expanded="false" aria-label="Navigation umschalten">
<span class="icon-menu" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse" id="navbar26">
<ul class="mod-menu mod-list nav menu">
<li class="nav-item item-435 default"><a href="/index.php" >Home</a></li><li class="nav-item item-294 parent"><a href="/index.php/site-map" >Site Map</a></li><li class="nav-item item-233"><a href="/index.php/login" >Login</a></li><li class="nav-item item-238 parent"><a href="/index.php/sample-sites" >Sample Sites</a></li><li class="nav-item item-448"><a href="/administrator" target="_blank" rel="noopener noreferrer">Site Administrator</a></li><li class="nav-item item-455"><a href="/index.php/using-joomla/extensions/components" >Example Pages</a></li></ul>
</div>
</nav>
</div>
See attached file.
systeminfo-2022-01-25T10 42 44+01 00.txt
The <nav>
tag after the <h3>
tag is not accessible because the screenreader skips the heading when jumping to the navigation.
Take the setting "nav" for Module-Tag in the advanced settings, than there will be two <nav>
tags:
<nav class="moduletable module-menu" aria-labelledby="mod-26">
<h3 id="mod-26">This Site</h3>
<nav class="navbar navbar-expand-md">
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbar26" aria-controls="navbar26" aria-expanded="false" aria-label="Toggle Navigation">
<span class="icon-menu" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse" id="navbar26">
<ul class="mod-menu mod-list nav menu">
<li class="nav-item item-435 default"><a href="/index.php" >Home</a></li><li class="nav-item item-294 parent"><a href="/index.php/site-map" >Site Map</a></li><li class="nav-item item-233"><a href="/index.php/login" >Login</a></li><li class="nav-item item-238 parent"><a href="/index.php/sample-sites" >Sample Sites</a></li><li class="nav-item item-448"><a href="/administrator" target="_blank" rel="noopener noreferrer">Site Administrator</a></li><li class="nav-item item-455"><a href="/index.php/using-joomla/extensions/components" >Example Pages</a></li></ul>
</div>
</nav>
</nav>
Markus
Title |
|
||||||
Labels |
Added:
No Code Attached Yet
|
Labels |
Added:
a11y
|
Your expected result with a div instead a nav element will be semantically not correct.
What do you mean with "The <nav>
tag after the <h3>
tag is not accessible because the screenreader skips the heading when jumping to the navigation." ? I tested a demo site using the screen reader in Chrome and I get a correct information about the button to open / close the menu...
Hi Viviana,
hi Brian,
with the help of the screenreader the user is able to skip to the next navigation, if the owner of the website is using the <nav>
Tag. In the "Actual Result" the user will skip to the navigation but behind the title of the navigation and not befor the title. In my opinion the title of the navigation is very important for the blind user. Here he is possible to regognise if he is at the top or main menu.
@brianteeman: If I choose the extra setting "nav" for the "Module-Tag" in the "Advanced Settings" than there are two <nav>
tags. The first one is right, the second is wrong.
@drmenzelit: Did the screenreader read also the title of the module? Did you use a template without a menu module override? Viviana, you can call mit from 13.00 - 15.30 h: 02924/974104. Maybe we could discuss the issue better in German on the phone.
Greetings
Markus
The first <nav>
comes from the module style and you have selected it like that. The second <nav>
comes from the module layout. The style doesn't know what content will come from the layout. From my point of view it would be a complete overhead to let Joomla check if you have chosen an "incorrect" tag for the style.
There are so many (from case to case) "incorrect" Module-Tags that you can select...
why would you NOT use a div there? the H3 is not part of the navbar so it makes no sense for it to be part of nav.
Hi everybody,
the <h3>
must be part of the navbar! Please have a look to most of the sites in the web. Mostly there is a topmenu, a sidebar menu and a footermenu. How should a blind person differentiate all the menus when there is no explaining heading? Although there is a heading, the screenreader will skipp directly to the menuitems. The blind user have to listen to all the items before he will recognise that he is at the wrong menu.
I have a friend who is blind. He allways tells me how much time he is spending on sites which have no menu heading. The same meaning of the association for the blind of Hamburg.
The <h3>
tag within the <nav>
tag is VERY IMPORTANT!
Greetings
Markus
That is a very interesting video about several navs on a page: https://www.youtube.com/watch?v=I1lq2ge7g4g
Actually the issue is not having the h3 within the nav but ensuring the nav is described by the h3.
I will submit a pr later today that addresses this.
Note it will not prevent a user adding an additional nav wrapper around the existing nav
Status | New | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2022-01-31 09:42:00 |
Closed_By | ⇒ | richard67 |
That is a very interesting video about several navs on a page: https://www.youtube.com/watch?v=I1lq2ge7g4g
great video. @Worti2 based on the video looks like aria-label="YOURH3TEXT" solves the issue.
I could be wrong.
Sorry I dont agree that there is a problem here. You have chosen to add the extra nav.
Or am I missing something?