Wrap page body content with <main> element to improve navigating by landmarks

[mrwweb]

Problem: Divi doesn't seem to output a <main> element nor give the option to add one. This means there is a header and footer landmark on the page but not one for the main content for screen reader users that navigate by landmark.

On a recent accessibility audit and remediation project for a Divi site, we were able to resolve this with the following code:

add_action( 'et_before_main_content', __NAMESPACE__ . '\main_open', 0 );
function main_open() {
    echo '<main>';
}

add_action( 'et_after_main_content', __NAMESPACE__ . '\main_close' );
function main_close() {
    echo '</main>';
}

I'm fairly sure that will give a pretty universal fix to most sites using Divi, but I'm not actually a very experienced user, so I'd need others to test and confirm this fix.

Here was the result on our site: