Archived topic
Single Posts - Ensure ARIA regions, landmarks and HTML sections are identifiable
9 replies · Started by John on April 2, 2021
Hi there,
When I test single blog posts on this web accessibility site tester - https://www.webaccessibility.com
I get the following 4 errors on this website: https://beingwellflorida.com/
The issue does not show when I test pages/front page.
<nav itemscope="" itemtype="https://schema.org/SiteNavigationElement" class="has-sticky-branding main-navigation sub-menu-right" id="site-navigation">
<div class="inside-navigation grid-container grid-parent"><button aria-expanded="false" aria-controls="primary-menu" class="menu-toggle"><span class="screen-reader-text">Menu</span></button>
<div class="main-nav" id="primary-menu">
<ul class=" menu sf-menu" id="menu-main-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2842" id="menu-item-2842"><a href="https://beingwellflorida.com/dorothy-wells/">About Dr. Dorothy</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2793" id="menu-item-2793"><a>Women’s Health Programs<span class="dropdown-menu-toggle" role="presentation"></span></a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2656" id="menu-item-2656"><a href="https://beingwellflorida.com/hormone-imbalance-treatment/">Hormone Balance</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2693" id="menu-item-2693"><a href="https://beingwellflorida.com/immune-system-boost/">Immune Boost</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2970" id="menu-item-2970"><a href="https://beingwellflorida.com/index.php/gut-doctor/">Soothe Gut and Inflammation</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2794" id="menu-item-2794"><a>Resources<span class="dropdown-menu-toggle" role="presentation"></span></a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2650" id="menu-item-2650"><a href="https://us.fullscript.com/welcome/dwells">Fullscript</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2792" id="menu-item-2792"><a href="https://beingwellflorida.com/faq-telemedicine-florida/">Telemedicine Florida: FAQ</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2750" id="menu-item-2750"><a href="https://beingwellflorida.com/blog/">Blog</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2773" id="menu-item-2773"><a href="https://beingwellflorida.com/contact/">Contact</a></li>
</ul>
</div>
</div>
</nav><nav class="post-navigation" id="nav-below"><span class="screen-reader-text">Post navigation</span>
<div class="nav-next"><span title="Next" class="next"><a rel="next" href="https://beingwellflorida.com/it-all-starts-with-your-gut/">It all starts with your gut</a></span></div>
</nav><nav itemscope="" itemtype="https://schema.org/SiteNavigationElement" class="has-sticky-branding main-navigation sub-menu-right" id="site-navigation">
<div class="inside-navigation grid-container grid-parent"><button aria-expanded="false" aria-controls="primary-menu" class="menu-toggle"><span class="screen-reader-text">Menu</span></button>
<div class="main-nav" id="primary-menu">
<ul class=" menu sf-menu" id="menu-main-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2842" id="menu-item-2842"><a href="https://beingwellflorida.com/dorothy-wells/">About Dr. Dorothy</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2793" id="menu-item-2793"><a>Women’s Health Programs<span class="dropdown-menu-toggle" role="presentation"></span></a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2656" id="menu-item-2656"><a href="https://beingwellflorida.com/hormone-imbalance-treatment/">Hormone Balance</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2693" id="menu-item-2693"><a href="https://beingwellflorida.com/immune-system-boost/">Immune Boost</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2970" id="menu-item-2970"><a href="https://beingwellflorida.com/index.php/gut-doctor/">Soothe Gut and Inflammation</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2794" id="menu-item-2794"><a>Resources<span class="dropdown-menu-toggle" role="presentation"></span></a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2650" id="menu-item-2650"><a href="https://us.fullscript.com/welcome/dwells">Fullscript</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2792" id="menu-item-2792"><a href="https://beingwellflorida.com/faq-telemedicine-florida/">Telemedicine Florida: FAQ</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2750" id="menu-item-2750"><a href="https://beingwellflorida.com/blog/">Blog</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2773" id="menu-item-2773"><a href="https://beingwellflorida.com/contact/">Contact</a></li>
</ul>
</div>
</div>
</nav><nav class="post-navigation" id="nav-below"><span class="screen-reader-text">Post navigation</span>
<div class="nav-next"><span title="Next" class="next"><a rel="next" href="https://beingwellflorida.com/it-all-starts-with-your-gut/">It all starts with your gut</a></span></div>
</nav>Any ideas on how to fix this please?
Hi there,
it seems that checking tool doesn't like the Post navigation - which is odd as its complaining that the landmarks are not clearly labelled which is required when there is more than one of the same element in this case <nav>.
But the Primary Nav is clearly marked - so there isn't any discrepancy between the role of the Primary Nav and the Post Nav.
I also tested the site on WebAim.orgs WAVE testing tool and there are no issue flagged.
Hi David,
I have been testing lots of sites on different Accessibility tools and some seem to pick up on different issues. I have gone through this site as deeply as I can and this is the only thing which is causing an issue.
Are you saying there is no violation here?
And would that stand up in a court of law?
A lot of our clients are very worried about getting sued right now (lots of it happening in the USA)
So can I say that there is an error in the test and to earmark this reply as evidence that we investigated it?
This is above my pay grade in many ways and I want to ensure I have done my due diligence.
Is there a way to make the Navigations even more distinctive/different in how they are labelled - making it really obvious that there is some kind of change?
Or is that not what the issue is here?
Many thanks!
John
Well thats no good... are you using a child theme ?
If so copy the highlighted code here into your child themes functions.php:
Then this line ( line 40 in the git):
<nav id="<?php echo esc_attr( $nav_id ); ?>" class="<?php echo esc_attr( $nav_class ); ?>">
change to:
<nav id="<?php echo esc_attr( $nav_id ); ?>" class="<?php echo esc_attr( $nav_class ); ?>" role="navigation" aria-label="Posts">
Hi - Sorry for the slow reply - Easter and tummy bug.
I was not using a child theme but did set one up.
I added all that code to the child functions.php but got the following error:
`Your PHP code changes were rolled back due to an error on line 164 of file wp-content/themes/generatepress/inc/structure/post-meta.php. Please fix and try saving again.
Cannot redeclare generate_do_post_meta_item() (previously declared in wp-content/themes/generatepress-child/functions.php:164)`
Is it possible to add that code using a snippet instead? or can you clarify if I have just missed something/done something wrong?
Cheers!
Hi John,
Is it possible to add that code using a snippet instead? or can you clarify if I have just missed something/done something wrong?
You can't, unfortunately. Its hard coded on the theme file with no filter hook to change it from so you'll have to make a new template file on your child theme for your post-meta.php.
Try copying the theme's post-meta.php file and paste it on your child theme's folder. You then make the change on that file you've pasted.
Only have to change 1 line on the newly pasted post-meta.php on your child theme which is line 40 here:
https://github.com/tomusborne/generatepress/blob/7b35168f546f83a7abb098a8da3bc0674d49ddeb/inc/structure/post-meta.php#L40
Change the line to David's suggestion.
ah Ok - I thought he said functions.php - it should be post-meta.php
WIll try that and get back to you thanks!
No problem. Let us know how it goes. :)
That worked - thank you very much!
Nice one! Glad you got it sorted. :D
