No Code Attached Yet a11y
avatar Worti2
Worti2
25 Jan 2022

Hi everybody,

Steps to reproduce the issue

  1. Create a new menu module with a template which includes no overrides and the module position is deffined with the html5 style.
  2. Put the module to a module position of the template.
  3. Under Advanced take the setting "Collapsible Default Menu" for Layout and take the setting "div" for Module-Tag.

Expected result

<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>

Actual result

<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>

System information (as much as possible)

See attached file.

Additional comments

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

avatar Worti2 Worti2 - open - 25 Jan 2022
avatar joomla-cms-bot joomla-cms-bot - change - 25 Jan 2022
Title
There is a <nav>-Tag to many in the menu module with "Collapsible Default Menu"
There is a -Tag to many in the menu module with "Collapsible Default Menu"
Labels Added: No Code Attached Yet
avatar joomla-cms-bot joomla-cms-bot - labeled - 25 Jan 2022
avatar Worti2 Worti2 - change - 25 Jan 2022
The description was changed
avatar Worti2 Worti2 - edited - 25 Jan 2022
avatar drmenzelit drmenzelit - change - 25 Jan 2022
Labels Added: a11y
avatar drmenzelit drmenzelit - labeled - 25 Jan 2022
avatar brianteeman
brianteeman - comment - 25 Jan 2022

Sorry I dont agree that there is a problem here. You have chosen to add the extra nav.

Or am I missing something?

avatar drmenzelit
drmenzelit - comment - 26 Jan 2022

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...

avatar Worti2
Worti2 - comment - 26 Jan 2022

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

avatar ReLater
ReLater - comment - 26 Jan 2022

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...

avatar N6REJ
N6REJ - comment - 29 Jan 2022

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.

avatar Worti2
Worti2 - comment - 31 Jan 2022

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

avatar drmenzelit
drmenzelit - comment - 31 Jan 2022

That is a very interesting video about several navs on a page: https://www.youtube.com/watch?v=I1lq2ge7g4g

avatar brianteeman
brianteeman - comment - 31 Jan 2022

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

avatar richard67 richard67 - change - 31 Jan 2022
Status New Closed
Closed_Date 0000-00-00 00:00:00 2022-01-31 09:42:00
Closed_By richard67
avatar richard67 richard67 - close - 31 Jan 2022
avatar richard67
richard67 - comment - 31 Jan 2022

Closing as having a pull request. Please test #36900 . Thanks in advance.

avatar N6REJ
N6REJ - comment - 4 Feb 2022

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.

Add a Comment

Login with GitHub to post a comment