ADA Compliance Issues - ARIA Landmarks

Support
#1

We are undergoing many updates to our website to become compliant with current accessibility standards and have run into an issue with our blog, on the Renew stack.

Basically, we are receiving an error that the template has two headers. One is the main masthead, and the other is the x-header-landmark where the blog’s title + breadcrumbs would be.

Unfortunately, to be ADA compatible, the x-header-landmark CANNOT be in a header element, since there already IS a header and you can’t have two.

I’ve been looking through the theme files/views for the Renew stack and can’t figure out where this is being set. Please advise.

This is a major legal issue for many businesses.

#2

Hey Robert,

I believe the compliance refers to the header tags rather than the classes according to the definition by w3.org: https://www.w3.org/TR/wai-aria-practices/examples/landmarks/banner.html

I’ll post this in our issue tracker so our development team would be made aware of this case but for now, we need to override the _landmark-header.php that’s inside the \framework\legacy\cranium\headers\views\renew directory of X.

If you’re not familiar with the process to override templates in X, please read this article first: https://theme.co/apex/forum/t/customizations-best-practices/205

Now that your child theme’s setup and the _landmark-header.php copied in the right directory in your child theme, you’re ready to override the file.

Inside the _landmark-header.php in your child theme, you’ll see the opening and closing header tags.

Change them to div.

Please just note that this is a temporary solution. Our development team might fix this differently and fixes that are included in the theme updates are the official solutions. Therefore, it’s recommended for users to always read the Changelog to see what has been included in each update.

Hope that helps.

#3

That worked! I’ll keep an eye out for the Changelog.

Many thanks!

#4

Glad we were able to help :slight_smile:

#6
#7

@floify

Would you mind letting me know what scanner you’re using above? I’ve been looking into this and don’t see this as an issue under WCAG 2.0 level AA standards. It’s also valid html to have multiple header elements. I don’t think we want to change the tag to a div as this could break any custom styles people have added over the years based on the header tag.

#8

nice catch. @floify