The menu output includes the following tag:
<h2 class="visually-hidden" id="block-imp-main-menu-menu">Main navigation</h2>

The H2 headers ‘Main Navigation’ and ‘Secondary’ are visually hidden. But they are present in the main menu and therefore appear across the site on every page. They are not suitable keywords for SEO optimisation and should not have a H2 tag.

The H2 tag is required for accessibility but could be replaced with the following:
<div class="visually-hidden" role="heading" aria-level="2" id="block-mainnavigation-menu">Main navigation</div>

Additional Reference:
Bootstrap 5 documentation on accessibility:
https://getbootstrap.com/docs/5.0/getting-started/accessibility/

Accessible heading structure
https://www.a11yproject.com/posts/how-to-accessible-heading-structure/

CommentFileSizeAuthor
#9 after patch.png361.31 KBdishakatariya
#9 before patch.png374.24 KBdishakatariya
#6 after.png40.57 KBrupeshghar
#6 before.png38.73 KBrupeshghar

Issue fork bootstrap_barrio-3384625

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

sittard created an issue. See original summary.

sittard’s picture

sittard commented
Issue summary: View changes
ravi kant’s picture

ravi kant commented

The aria-hidden="true" attribute can use instead using class 'visually-hidden'.

rupeshghar made their first commit to this issue’s fork.

rupeshghar opened merge request !73

rupeshghar’s picture

rupeshghar commented
Assigned: Unassigned » rupeshghar
Status: Active » Needs review
StatusFileSize
new before.png38.73 KB
new after.png40.57 KB

I have replaced the heading tag with division and added attributes role and aria-level. The visually-hidden class was not replace with aria-hidden=true attribute as it ll not be considered while screen reading

rupeshghar’s picture

rupeshghar commented
Assigned: rupeshghar » Unassigned
dishakatariya’s picture

dishakatariya commented
Assigned: Unassigned » dishakatariya
dishakatariya’s picture

dishakatariya commented
Assigned: dishakatariya » Unassigned
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new before patch.png374.24 KB
new after patch.png361.31 KB

Hi,Verified and tested Issue with this Branch bootstrap_barrio-3384625 on the D10.X version with the Barrio Bootstrap 5 Theme
Version: 5.5.x-dev.
Testing steps-
1. Install the D10.x version
2. Install the theme 5.5.x version
3. Now Apply the patch and check for the hidden labels in the menu H2 tag has been removed by inspecting the element.
Testing Result
For the Hidden labels in menu an H2 tag is removed.
Attaching screenshot for reference.
Can be move to RTBC.
Thanks!

hatuhay closed merge request !73

hatuhay’s picture

hatuhay commented
Status: Reviewed & tested by the community » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.