WCAG 2.1 Level AA and landmarks

Hey adamsml,

Thank you for the inquiry.

Is this the guideline that you’re trying to follow?

// https://dequeuniversity.com/rules/axe/3.2/region

According to the documentation, we can use the role attribute to define the landmarks.

There is div element with the id main in the header.php file. This element contains every sections and content in the page, so maybe we should apply the role attribute to it to make it the main landmark or container.

<div id='main' class='all_colors' data-scroll-offset='<?php echo avia_header_setting('header_scroll_offset'); ?>'>

You can then edit the page.php file, and replace this line.

<main class='template-page content  <?php avia_layout_class( 'content' ); ?> units' <?php avia_markup_helper(array('context' => 'content','post_type'=>'page'));?>>

.. with:

<div class='template-page content  <?php avia_layout_class( 'content' ); ?> units' <?php avia_markup_helper(array('context' => 'content','post_type'=>'page'));?>>

Don’t forget to look for the closing main tag around line 38:

<!--end content-->
				</main>

Replace it with div.

Best regards,
Ismael

Hi,

Thank you for the info.

Looks like the color section renders a main tag inside the container. Unfortunately, we can’t adjust it without editing the enfold\config-templatebuilder\avia-shortcodes\section.php file directly. You’ll find the main element around line 1314:

					$markup = 'main '.avia_markup_helper(array('context' =>'content','echo'=>false, 'custom_markup'=>$custom_markup));

And the closing tag is located around line 1344:

$avia_section_markup = false;
			$close_markup = '</main><!-- close content main element -->';

Best regards,
Ismael

Hi,

Thank you for following up.

You will have to create a new shortcode path in the child theme folder to be able to override an existing builder element or create custom ones. Please check the documentation for more info. Just add the snippet in the functions.php file and create a folder called “shortcodes” in the child theme directory. You can then make a copy of the section.php file and do the modifications inside that folder.

// https://kriesi.at/documentation/enfold/intro-to-layout-builder/#add-elements-to-alb

For the markup, please add this snippet in the functions.php file.

function avf_markup_helper_attributes_modified($attributes, $args) {
	if($args['content']) {
	    unset($attributes['role']);
            unset($attributes['itemprop']);
	}

	return $attributes;
}
add_filter('avf_markup_helper_attributes', 'avf_markup_helper_attributes_modified', 10, 2);

This should disable the attributes.

Best regards,
Ismael

Hi!

There was a minor syntax error in the above filter but we corrected it now. Please try to add it again in the functions.php file. If it’s still not working, then you can keep your extra modification in the section.php file and it should work just fine.

Regards,
Ismael