Improving accessibility for icons use

[condorito.fr]

Hello,

From an UX/accessibility point of view, it would be nice to have title on attributes icons, if you are using them.

It can be done easily.
JS snippet :

//specify which title goes to which icon
jQuery( function($) {
	$('.fa-map-marker-alt').prop('title', 'Localisation');
} );

You can go further and add the jQuery ui tooltip library

//specify which title goes to which icon
jQuery( function($) {
    $(document).tooltip();
	$('.fa-map-marker-alt').prop('title', 'Localisation');
} );

In this case, you have to add a PHP snippet, as this lib is already in WordPress, but not loaded by default

if( !wp_script_is('jquery-ui-tooltip') ) {     
  wp_enqueue_script('jquery-ui-tooltip');
}

And here the result :

Doing it with style :

JS (jQuery)

$('.fa-map-marker-alt').tooltip({tooltipClass: "mytooltip"});

[andrii]

Hi,

Thank you for the solution, it will be useful for our community.