How to Add aria-label And alt Tags to Your Divi Search Bar

by | Mar 28, 2023 | Business

Some of the code in Divi isn’t hooked into WordPress’ filter and action hooks. A good example: the menu system, especially the Search box. It needed WCAG descriptive tags and labels for the search open and close button.

The et_core_esc_previously() Function

et_core_esc_previously() is a function that is used in the Divi theme from Elegant Themes. The purpose of this function is to sanitize input data by escaping special characters, such as quotes and angle brackets, to prevent potential security vulnerabilities like cross-site scripting (XSS) attacks.

The function takes a single parameter, which is the data to be sanitized. It then applies a series of filters to the data to escape any characters that could potentially be used for malicious purposes. The sanitized data is then returned by the function.
The et_core_esc_previously() function is one of the Divi core functions. In the code base, it checked to see if the function as already been defined. If it has, it simply passes through the value. For the sake of adding labels, I added a custom version of this function my child theme’s functions.php file (see below). I looked for a string that surrounds where I want to add in the aria-label and alt tag. The str_replace() function was used to find-replace labels changes into place.

if(!(function_exists('et_core_esc_previously'))) {
   function et_core_esc_previously( $passthru ) {
       $passthru = str_replace('class="et_pb_menu__icon et_pb_menu__close-search-button"></button>', 'class="et_pb_menu__icon et_pb_menu__close-search-button" alt="close search" aria-label="close search"></button>', $passthru);
       $passthru = str_replace('et_pb_menu__search-button"></button>', 'et_pb_menu__search-button" alt="open search" aria-label="open search"></button>', $passthru);
       return $passthru;
   }
}

What is WCAG?

WCAG stands for Web Content Accessibility Guidelines: a set of guidelines from the World Wide Web Consortium (W3C) to make web content more accessible to people with disabilities.

The guidelines are organized into three levels of conformance: A, AA, and AAA. Level A includes the most basic guidelines for web accessibility, while level AAA includes the most advanced guidelines. Achieving level AA compliance is considered the industry standard for web accessibility.

WCAG guidelines cover a wide range of topics, including text alternatives for non-text content, keyboard accessibility, color contrast, language markup, and navigation. By following these guidelines, website owners can ensure that their content is accessible to people with disabilities, including those who are blind or visually impaired, deaf or hard of hearing, or have physical or cognitive disabilities.

In many countries, adherence to the WCAG guidelines is legally required for government and public sector websites. Even for private sector websites, compliance with WCAG is becoming increasingly important to ensure that all users can access web content. Best of all: it’s a set of good practices. WCAG compliant sites attract more visitors. A WCAG compliant site speaks more clearly to search engine spiders and AI agents.

 

How did I find this?

The starting point: the output. From there, I looked backwards. I looked at the HTML and found the ‘close-search-button’ phrase. I searched all of the Divi parent theme files for that phrase. Once found, I looked for the function that called that code. I found the function that called that function, et_core_esc_previously(). This function is referenced a number of times, so it’s a decent function to work with the get the HTML to output different code.

Why We Like Combining Divi and ACF

I want to show you how we can use ACF and Toolset to insert dynamic content into our text editor. With ACF, we can easily find available fields and insert them into our content. We can also enable raw HTML to display content verbatim. Toolset works similarly, but it...

What Should You Consider Before A Website Re-Design

Let's dive into the essential considerations for undertaking a website redesign. There are both minor and major technical issues, ensuring mobile readiness, optimizing for search engines, and possibly migrating to a more reliable platform, such as WordPress....

Clearing Your Cache In WordPress

Caching is a storage of the presentation of data. Caching is vital to contain how much processing power is needed to run your site. It can also be a pain when a cache holds onto old information. When a user is looking at a database driven web page, there’s a high...

Building A Website For An Electrical Contractor

For an electrical contracting company, we help by creating a new website to replace an existing legacy infrastructure that is bound to hosing and support. WordPress frees up a website and to be hosted on the best platform available. Our designs are clean, responsive,...

How Would We Tackle a Pilates Website Rebuild

We're been asked several times about how we would re-design a pilates or fitness website. Here's a quick rundown of what we recommend. We propose the following features & functions: Move site hosting to WPPro.ca (managed, optimized WordPress hosting). Update the...

Web321 Won the 2023 ICCC-KFC Recipe For Success

We’re excited to share that we won the $30,000 CAD grant through the ICCC-KFC Recipe for Success Program! Thank you to Inner City Capital Connections and KFCCanada for the opportunity to participate in the ICCC program and receive this grant. We look forward to using it to help our business continue to grow!

Why People Like Elementor (but we still don’t)

The TLDR: There is no real comparison between Elementor and Divi; however, it doesn't necessarily mean that Elementor is the best option. We use Divi and we love it. For us, Divi can turn out fantastic results. Why is Elementor considered better? Unlike Divi,...

What’s the difference between posts and pages in WordPress?

In WordPress, posts and pages are two of the most commonly used content types. Posts are typically used for blog entries, news updates, and other types of content that are time-sensitive and frequently updated. Pages, on the other hand, are used for more static content, such as an About Us page or a Contact page.