Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1215097

    I’m working with a client to get their site compliant with WCAG 2.1 Level AA.
    In order to identify the global issues, I’m running some guided tests using tools from deque (https://www.deque.com/axe/).

    The issues I’m not able to address have to do with how the theme structures the page and landmarks:

    • Document must not have more than one main landmark (1 found)
    • Ensures landmarks are unique (2 found)
    • All page content must be contained by landmarks (5 found)

    For the last item above, when adding color sections, columns, etc to a page, that content is being generated outside of the HTML5 <main> tag resulting in the issue.

    I’d prefer not to hack together a customization and maintain it if these can be addressed in the main theme.

    #1216988

    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

    #1218828

    Hello Ismael,
    Thank you for the help. I’ve applied those changes.

    The example page has a Color Section followed by a 1/1 column. It seems both of those generate HTML containing another <main> element which ends up forming nested <main> elements.

    This HTML getting output is:
    <main role="main" itemprop="mainContentOfPage" class="template-page content av-content-full alpha units">

    See this documenation:
    https://dequeuniversity.com/rules/axe/3.5/landmark-main-is-top-level

    Which files need to be modified to ensure only one <main> or <div role=’main’> element is present on the page?

    Thank you.

    Mitch

    P.S. I’ve copied the page.php file into my child theme and it doesn’t appear to be used.

    • This reply was modified 1 year, 7 months ago by  Mitchell Adams. Reason: I noticed the page.php file in my child theme was not getting used
    #1219067

    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

    #1219209

    Thank you Ismael,

    I’ve copied the directory structure into my child theme but it doesn’t want to pick up the changes. Only modifying the parent theme file works. Are there other steps I need to take to be able to use the changes in a child theme so changes don’t get overwritten after an update?

    Also, it appears the function ‘avia_markup_helper’ in the file ‘/includes/helper-markup.php’ is injecting ‘role=main’ which is also going to cause a conflict. Can line 69 of that file simply be commented out?

    case 'content':
                    $attributes['role']     = 'main';
                    $attributes['itemprop'] = 'mainContentOfPage';

    Or should I delete the args from the section.php file?

    Thank you.

    Mitch

    #1220367

    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

    #1220651

    Ismael,
    Thanks for the link to the shortcodes documentation. I have that piece working.

    The ‘avf_markup_helper_attributes_modified’ function you sent over doesn’t want to take (I removed the extra parenthesis).

    The only way I could get the ‘role’ attribute removed was to modify line 1336 in the section.php file and taking out the ‘context’ => ‘content’ array item.

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

    To
    $markup = 'div ' . avia_markup_helper( array( 'echo' => false, 'custom_markup' => $custom_markup ) );

    Should I just go that route instead of a function since I already have to modify section.php or will it introduce other complications?

    Thanks

    Mitch
    Mitch

    #1220781

    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

    #1220900

    Hi Ismael,

    Thank you for all your help. I had caught the syntax error and corrected it in my code. At any rate, it still doesn’t work so I’ll just stick with the hard code in the section.php file.

    Is there any chance the landmark issue will be addressed in a future release? There is a large need for WCAG compliant WordPress themes out there. I would imagine there are also business opportunities with companies like Deque.

    Mitch

    #1220909

    To summarize my changes for others with the same issue, the following was made to Enfold version 4.7.5 to address nested landmarks and non-unique landmarks in my child theme.

    File: page.php
    Changed line 26 from
    <main class='template-page content <?php avia_layout_class( 'content' ); ?> units' <?php avia_markup_helper(array('context' => 'content','post_type'=>'page'));?>>
    to
    <div class='template-page content <?php avia_layout_class( 'content' ); ?> units' <?php avia_markup_helper(array('context' => 'content','post_type'=>'page'));?>>
    and on line 39, changed the closing </main> tag to a </div> tag.

    ——————————–
    File: header.php
    Changed line 124 to have a role=’main’ attribute added:
    <div id='main' role='main' class='all_colors' data-scroll-offset='<?php echo avia_header_setting('header_scroll_offset'); ?>'>

    ——————————–
    File: includes/helper-main-menu.php
    Changed line 71 to add an id and aria-label to the <nav> element to make it unique from the main site nav.
    echo "<nav id='my_unique_id' aria-label='my_aria_label' class='sub_menu' ".avia_markup_helper(array('context' => 'nav', 'echo' => false)).">";

    ———————————
    File: config-templatebuilder/avia-shortcodes/section.php
    Created a ‘shortcodes’ folder in my child theme and copied the section.php file into the folder.

    Changed line 1336 from
    $markup = 'main ' . avia_markup_helper( array( 'context' => 'content', 'echo' => false, 'custom_markup' => $custom_markup ) );
    to
    $markup = 'div ' . avia_markup_helper( array( 'echo' => false, 'custom_markup' => $custom_markup ) );

    Changed line 1366 from
    $close_markup = '</main><!-- close content main element -->';
    to
    $close_markup = '</div><!-- close content main element -->';

    Finally, added the following function to the child theme functions.php file.

    function avia_include_shortcode_template($paths)
    {
      $template_url = get_stylesheet_directory();
          array_unshift($paths, $template_url.'/shortcodes/');
    
      return $paths;
    }
    add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
    

    ———————————

    Mitchell Adams

    #1221716

    Hi,

    Thank you for the short guide. We’ll forward this thread for further considerations.

    Best regards,
    Ismael

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘WCAG 2.1 Level AA and landmarks’ is closed to new replies.