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.

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.

Linking Gravity Forms to BuddyPress Forums

I was posed with problem: make BuddyPress forum topics from a Gravity Forms form submission. Turning Gravity Form submissions into posts isn't a big party trick-- that is built in. What doesn't work, is the linkage to a particular forum as a new topic. So: I did some...

Making The Most of a Google Business Profile

Small business owners need to pay attention to their Google Business  profile. Given the power and reach of Google, having a business profile is like getting a desk somewhere at Google where you get to influence how people find your business. Some people don't even...

Customer Feedback and B2B: It’s Still Essential

How many times a day does the topic of online toxicity and cancel culture come up? That boils down to reputation management and how a comment can be an asymmetrical attack-- an attack with no adequate defense. Some business have spiralled and crashed thanks to a spate...

8 Things To Consider TO Build A Successful Ecommerce Website

The pandemic pushed businesses away from the traditional models and accelerated the move to online first interactions. Ecommerce has changed the face of commerce. Despite that,  most ecommerce websites will still fail. Things to keep in mind when building a highly...

What Is Data Resiliency?

Data resiliency is about having your organization's data always available and accessible even in the face of unexpected business disruptions such as cyber attacks. It allows a business to keep a handle on the data, continue to use the data and assess the potential for...

WordPress Trends for 2023

It is difficult to accurately predict specific trends in WordPress design for 2023, as the field is constantly evolving and new trends and technologies are emerging all the time. However, here are a few general predictions for WordPress that developers may want to...

Hiring a Webmaster vs. Retaining a Web Management Company

According to data from the Canada's Job Bank, the median hourly wage for web developers in Canada is $30.50. That works out to an annual salary of around $63,000 based on a full-time work week. It's important to consider other costs associated with hiring an employee:...

Porthole Acquired by Web321

We are proud to pick up the mantle of Porthole Solutions. Back in the day, they provided full service solutions. As they said it, back then: We provide full web services, including hosting and domain registration, and create custom designed websites that can be...

Indigenous Funding Options in BC

National Programs PacifiCan Jobs and Growth Fund  If you are working on a project for your business to transition to a green economy, foster an inclusive  recovery, become more competitive and create jobs for Canadians, you could get a contribution for up to 100% of...

Top 7 Signs A Website Is Abandoned

Websites need TLC. A garden and a website have a lot in common: They start in the dirt: for gardens, it’s literal soil; for websites, it’s dirt poor rankings and lack of discoverability.  The conditions need to be favourable to growth. Plant the seeds and give them...