Validating and making accessible a wordpress site

Nu Html Checker

First, run the Nu Html Checker for your site. You should have no errors there.

Elementor

				
					add_action( 'elementor/frontend/the_content', function( $content ) {
// element pack carousel widget
$content = str_replace(" bdt-grid>", " >", $content);
$content = str_replace(" bdt-margin>", " >", $content);
$content = str_replace("migration_allowed=\"1\"", "", $content);
$content = str_replace("migrated=\"0\"", "", $content);
$content = str_replace("<i ", "<span ", $content);
$content = str_replace("</i>", "</span>", $content);
return $content;
} );

add_action( 'elementor/widget/render_content', function( $content, $widget ) {
//echo $widget->get_name();
// woocommerce mini cart
if ( 'woocommerce-menu-cart' === $widget->get_name() ) {
$content = str_replace("class=\"elementor-menu-cart__container", "role=\"navigation\" class=\"elementor-menu-cart__container", $content);
$content = str_replace("class=\"elementor-menu-cart__main\" aria-expanded=\"false\"", "class=\"elementor-menu-cart__main\"", $content);
$content = str_replace("id=\"elementor-menu-cart__toggle_button\"", "", $content);
//var_dump($content);
}

// ajax search
if ( 'wp-widget-ajaxsearchprowidget' === $widget->get_name() ) {
$content = str_replace("id=\"x-mark-icon\"", "", $content);
}

// icon
if ( 'icon' === $widget->get_name() ) {
$content = str_replace("<i ", "<span style=\"display:none;\">dummy</span><i ", $content);
}

// jet-mega-menu
if ( 'jet-mega-menu' === $widget->get_name() ) {
$content = str_replace("<i ", "<span style=\"display:none;\">dummy</span><i ", $content);
}

// slides
if ( 'slides' === $widget->get_name() ) {
$content = str_replace("</a>", "<span style=\"display:none;\">dummy</span></a>", $content);
}

// bdt-mailchimp
if ( 'bdt-mailchimp' === $widget->get_name() ) {
	//Clean the line breaks and leave just a space
	$content = preg_replace("/[ \t]+/", " ", preg_replace("/\s*$^\s*/m", "\n", $content));
    $content = preg_replace("/[\n\r]/", "", $content);
    $content = str_replace("</div> <div class=\"bdt-newsletter-btn", "</span><span class=\"bdt-newsletter-btn", $content);
	$content = str_replace("</div> </div> </button>", "</span></span></button>", $content);
	$content = str_replace("<div class=\"bdt-newsletter-btn", "<span class=\"bdt-newsletter-btn", $content);
}

return $content;
}, 10, 2 );
				
			
				
					// remove font-display: swap
function start_wp_head_buffer() {
    ob_start();
}

add_action('wp_head', 'start_wp_head_buffer', 0);

function end_wp_head_buffer() {
    $in = ob_get_clean();
    // remove font-display:swap;
    $in = str_replace('font-display:swap;', '', $in);
    echo $in; // output the result unless you want to remove it
}

add_action('wp_head', 'end_wp_head_buffer', PHP_INT_MAX);
				
			

If you use GDPR cookie consent plugin, just open the Settings > Customize Cookie bar and convert div to span.

If you use a slick slider, and you get a aria-describedby error in wave, make sure that you show the bullets in slider (only bullets, not arrows). If this does not work, use a similar code to below.

				
					<script>
jQuery( document ).ready(function() {
	jQuery('.ht-products').each(function(){
		jQuery(this).on('init', function(event, slick){
			remove_aria_describedby(jQuery(this));
		});

		jQuery(this).on('afterChange', function(event, slick, currentSlide){
			remove_aria_describedby(jQuery(this));
		});

		jQuery(this).on('beforeChange', function(event, slick, currentSlide){
			remove_aria_describedby(jQuery(this));
		});
		
	});
	
	function remove_aria_describedby(el){
		console.log(el);
		jQuery('.ht-product').each(function () {
				//jQuery(this).removeAttr('aria-describedby');
				if (jQuery(this).attr('aria-describedby') != undefined) { // ignore extra/cloned slides
						jQuery(this).attr('id', jQuery(this).attr('aria-describedby'));
				}
		});
	}
});
</script>
				
			

If you use porto theme and you have errors in css, go THEME OPTIONS -> SKIN -> CSTOM CSS and check there. Also, inline style errors may be from blocks from template builer. You must remake them with elementor.

Alt images

Make sure that all your images have alt text

Acchecker

Go to acchecker site and run it for your site. Make sure no errors exist.

Wave checker

Add in chrome wave checker and see that no errors exist.