The role=”navigation” attribute is a common element found in many WordPress themes. It is used to identify the navigation element on a page, and it is used to help screen readers better understand the structure of the page. While this attribute can be helpful, it is not necessary in most cases and it can even be detrimental in some cases. In this article, we will discuss why you should consider deleting role=”navigation” from your WordPress theme.
First, let’s talk about why the role=”navigation” attribute is used. This attribute is used to help screen readers understand the structure of the page. Screen readers are programs that read out the contents of a page to a user. This can be helpful for people with visual impairments, as it allows them to access the content of a page. The role=”navigation” attribute helps the screen reader understand that the element is a navigation element, which makes it easier for the user to understand the structure of the page.
However, there are some drawbacks to using the role=”navigation” attribute. For one, it can add unnecessary code to your page, which can slow down the loading time of your website. Additionally, it can be confusing for some users, as they may not understand why the attribute is being used. Finally, it can be difficult to maintain, as it needs to be kept up to date with any changes that are made to the navigation elements on the page.
In the new standard of the HTML, for the navigation menu, don’t use role=”navigation” anymore. To delete role=”navigation” from the HTML of the WordPress theme, add the code below in the functions.php file.
//delete role=navigation
add_filter( 'navigation_markup_template', 'hs_navigation_template' );
function hs_navigation_template( $template ) {
$template = '
<nav class="navigation %1$s">
<h2 class="screen-reader-text">%2$s</h2>
<div class="nav-links">%3$s</div>
</nav>';
return $template;
}When deleting the role=”navigation” attribute, it is important to make sure that you don’t delete any other code that is related to the navigation element. For example, if your theme uses CSS to style the navigation element, then you should make sure that you don’t delete that code. Additionally, you should make sure that you don’t delete any HTML elements that are related to the navigation element.
