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.

Five Tips For AI In Content Creation

There’s a lot to consider about the practical aspects of creating content with AI but also the creative collaboration between human intelligence and artificial intelligence.

Understanding CSS Media Queries

CSS media queries are a powerful tool that allow you to apply different styles based on the characteristics of the device or viewport. They enable you to create responsive designs that adapt to different screen sizes, resolutions, and device types (desktop, tablet, mobile, etc.).

Spring into 2024: 30 Great Backlink Sources

Creating backlinks, which are links from one website to another, is a fundamental aspect of search engine optimization (SEO). They act as a "vote of confidence" from one site to another, indicating to search engines that the content is valuable, credible, and useful....

Empowering Legal Advocacy Through Digital Solutions

In an era where digital presence is crucial, Web321 stands at the forefront of offering custom web solutions tailored for groups embarking on legal advocacy, particularly those initiating or involved in class-action lawsuits. Our expertise caters to the unique needs...

What’s the Deal With Quality Content?

What makes content high-quality? When it comes to content marketing, quality goes beyond surface metrics like word count or citations. True quality lies in how well content achieves its purpose and connects with readers. Does it align with marketing goals? Resonate...

Turning Off The AI Bar on Divi

Divi (the theme system from Elegant Themes) has added an AI tool. Some people don’t like it. With the most recent copy of Divi, the element can be switched off.

Performance Improvements That Can Speed Up Your Website

Let’s explore how to achieve some WordPress performance improvements to ensure your website is as swift while keeping any of the pizazz delivered by Javascript and CSS, keeping your audience captivated and Google happy. Let’s supercharge your WordPress website!

7 WordPress Maintenance Services in 2023

If you are tired of spending hours on mundane upkeep tasks or need expert help improving your WordPress website, a maintenance service can help you take the hassle out of running your site.

Kite Acquired by Web321

We are proud to pick up the mantle of Kite Dish. Back in the day, they provided WordPress Maintenance. As they said it, back then: Our service provides you a peace of mind with a secure, regularly backed up, bug-free and proactively updated site so you can concentrate...