Hey Rikard,

I’ll post the rest of the accessibility report – I’d be curious if some of these items could be addressed in the next update for Enfold? They’re relatively “minor” but I’m having more and more people come to me quite concerned about whether or not their company will be sued.

Developer updates

Add :focus (tab) styling to all links (primarily an issue in the site’s footer)
Focus styles allow users to easily navigate the site using only their keyboard, which is a must for users who have difficulty using a mouse/trackpad.

Make sure that all“id” attributes are unique on every page
Duplicate “id” attributes is a violation of HTML standards, and can cause issues with older screen readers.

Add appropriate “aria-label” attributes to links that do not have discernible text (primarily for the social media links in the footer)
Links without discernible text in them cannot be read by screen readers. The solution to this is to use appropriate “aria-labels” to tag all textless links, allowing screen readers to infer their purpose.

Remove the “maximum-scale=1” attribute from “<meta name=”viewport”>” tag
The “maximum-scale=1” attribute disallows mobile users from zooming in on your website. Removing this is necessary to allow visually impaired visitors to enlarge any portion of the site when browsing on their phone/tablet.

Make sure all site content is contained within “landmark” regions (<header>, <nav>, <main>, <footer>)
Using these landmark tags allows screen readers to clearly understand the split between the site’s high-level sections.

Ensure that all elements have sufficient color contrast
Users with poor vision or color blindness are unable to distinguish text against a background without sufficient contrast. Ensuring that the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds is incredibly important for accessibility.

ARIA hidden element must not contain focusable elements
The site has a hidden “scroll to top” button that is still focusable via the tab key. A focusable element with aria-hidden=”true” is ignored as part of the reading order, but still part of the focus order, making its state of visible or hidden unclear.
Guidelines for the client to focus on moving forward

Make sure that all headings (H1-H6) are contextually appropriate, and ordered correctly
Screen readers use headings to summarize content sections, allowing non-sighted users to quickly navigate through the site. Ensuring that headings are contextually and semantically valid, as well as used to describe the structure of the page, not just highlight important text, speeds up this process.

Make sure that heading levels only increase by one (H1 followed by H2, never H1 followed by H4)
The underlying purpose of headers is to convey the structure of the page. While text size can be used to structure the page for sighted users, the same can not be done for non-sighted/visually impaired users. Only properly structured headings can achieve the same for screen readers, because a screen reader identifies a header only if it is properly marked-up.

Make sure that all pages contain a top-level H1 tag
Many of the site’s pages are missing H1 tags. Generally, it’s a best practice to ensure that the beginning of a page’s main content starts with an h1 tag, and also to ensure that the page contains only one h1 element. Screen readers have keyboard shortcuts to navigate directly to the first h1, which, in principle, should allow users to jump directly to the main content of the page. If there is no h1, or if the h1 appears somewhere other than at the start of the main content, screen reader users must listen to more of the page to understand its structure, wasting valuable time.

Ensure that all inline images have appropriate “alt” tags
Screen readers have no way of translating an image into words that gets read to the user (even if the image only consists of text). As a result, it’s necessary for images to have short, descriptive alt text so screen reader users clearly understand the image’s contents and purpose.

Hey Jordan,

Well, to help clarify, I changed the thumbnail size to be 150×100 instead of 80×80 and regenerated all of the image sizes but I didn’t realize the testimonial widget was also pulling that image. You can see further down the page starting with “Anonymous Grandville Center, March 2019” the cropping issue (I updated the image for the first few so the client wouldn’t notice). I need that image to be square instead. How do I go about changing that?

Any thoughts on a fix for this issue?

Please and thanks for any insight into what the issue is.

Worked great! Thanks for your help!

Sure thing.

Sooooo – you are helping me out a ton. Now it’s just a bit tweaky – could we make it so when you are hovering over the menu and not JUST on a link that this switch can take place?

Yeah, I know I’ve got a lot going on trying to center the logo, overlap the content below it, not have the menu below it overlapped, swap it out as you scroll, and make it clickable throughout. It was working for a bit so it feels like I’m missing something small.

Any insight would be great!

Any other thoughts? Disabling Jetpack didn’t fix it.

Please note that when you scroll down the logo changes to a more narrow version. When you are not scrolled down there is a logo that overlaps the section below it and the menu goes under the logo.

Sorry, I didn’t get that part. Done.

Just implemented and commented out:

/*.menu-item-mega-parent.current-menu-item a>span.avia-menu-text {
border-bottom: 2px solid!important;
}
*/

How do I also get the parent to hover along with the sub item?

I just made you a user and you should have received a password reset.

Thank you for troubleshooting!

This is what I’ve got to make it so the menu icons are underlined with dashes and then a solid line on hover and active state:

.html_header_top .av_bottom_nav_header #header_main_alternate .main_menu ul:first-child>li>a, span.avia-menu-text {
text-decoration: none;
border-bottom: 1px dashed #CF7E41;
-webkit-transition: .5s;
-moz-transition: .5s;
transition: .5s ease-out;
background-image: none!important;
}

.html_header_top .av_bottom_nav_header #header_main_alternate .main_menu ul:first-child>li:hover>a, span.avia-menu-text:hover {
border-bottom: 1px solid;
text-decoration: none;
-webkit-transition: .5s;
-moz-transition: .5s;
transition: .5s ease-out;
background-image: none!important;
}

#top h1 a, #top h2 a, #top h3 a, #top h4 a, #top h5 a, #top h6 a, #top #header .av-main-nav>li a, span.avia-menu-text, span.avia-menu-text:hover {
border-bottom-width: 2px;
-webkit-transition: .5s;
-moz-transition: .5s;
transition: .5s ease-out;
}

.menu-item-mega-parent.current-menu-item a>span.avia-menu-text {
border-bottom: 2px solid!important;
}

I am asking for more clarity on exactly when it happens – I have a Mac and it might be a PC / IE problem.