Divi Accessibility: It’s not perfect however there are solutions

January 29, 2022

Divi Accessibility isn’t just about code, you have to do something about it too. Divi offers us tools in this regard, by using them we will make our site ADA compliant.

Of course, at some points, we will have to change the code. Here I will show you the ready codes and how to add them.

Fear not, even if you do not have technical knowledge, you can handle many ADA compliance items yourself.

If you want me to do this for you, please contact me.

Divi accessibility

1 – Add Alt attributes for all Images

Whatever picture it is, you need to write something descriptive about it. Persons with disabilities should be able to understand the pictures from these explanations. After uploading an image, click ‘”Advanced” from Tab and fill in the image alternative text from the attributes section.

2 – Color Contrast

This is one of the most important rules. Your text should be readable with the existing background. Here are some things to do.

You can measure your score from this site:https://webaim.org/resources/contrastchecker/https://webaim.org/resources/contrastchecker/

If the result is negative, you can follow these steps:

Increase font size. Sometimes the problem may be that the font does not appear when it is small.
Make the font bolder
Add an overlay to the background. You can do this via an image or background-color.
If your text is light, don’t darken the background. Use one shade darker.
If you still do not get results, change the color of the text.

3 – Add label attribute to your forms

Add meaningful labels to all your inputs. If you are not going to use them in the design, you can hide them. This article shows you how to hide it correctly.

4 – Heading Hierarchy

This is an easy but somewhat tedious item. Headings should be used for their intended purpose. The most important heading on the page should be h1, other important headings should be h2. And it is necessary not to switch to h4 without using h3. You have to go in order of importance.

5 – Enable Mobile Zoom

For those with visual difficulties, we need to activate the zoom on mobile. For this, add the following PHP code to the function file.

add_action('after_setup_theme', 'wf_remove_et_viewport_meta');
add_action('wp_head', 'wf_enable_pinch_zoom');

function wf_remove_et_viewport_meta() {
	remove_action('wp_head', 'et_add_viewport_meta');
}

function wf_enable_pinch_zoom() {
	echo '<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, minimum-scale=0.1, maximum-scale=10.0">';
}

6 – Enable Outline for links

Most websites reset the outline so you don’t see it when you browse with tabbing. Divi is one of them. Please add the code below to style.css. I know this outline looks bad for regular users, I will share a JS code below for this, if you add this, mouse users will not see the outline when they focus on the element.

*:focus{
	outline: dashed 2px #108BD0;
}

(function(document, window){
	if (!document || !window) {
		return;
	}
	
	var styleText = '::-moz-focus-inner{border:0 !important;}:focus{outline: none !important;';
	var unfocus_style = document.createElement('STYLE');

	window.unfocus = function(){
		document.getElementsByTagName('HEAD')[0].appendChild(unfocus_style);

		document.addEventListener('mousedown', function(){
			unfocus_style.innerHTML = styleText+'}';
		});
		document.addEventListener('keydown', function(){
			unfocus_style.innerHTML = '';
		});
	};

	unfocus.style = function(style){
		styleText += style;
	};

	unfocus();
})(document, window);

I’ll update this constantly if I find new tricks to make your Divi ADA compliant.

7 – Icons should have text

You shouldn’t use only icon on social media icons. Add text in it and hide from regular users. The reason is screen reader can’t vocalize if there’re no text.

If you add text manually, then add like the following:

<a href="<?php echo esc_url( $social_icon_url ); ?>" class="et-extra-icon et-extra-icon-background-hover et-extra-icon-<?php echo $social_icon; ?>">
  <span class="wf-screen-reader-only"><?php echo $social_icon; ?></span>
 </a>

Then make visible the text only for screen readers.

/* Added by Woofocus.com */
/* Visible text only for screen readers */
.wf-screen-reader-only{
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

If you can’t reach the text, then you should try the Javascript way.

Use Javascript to add text to icons. I researched screen reader vocalize if you add the following method

https://stackoverflow.com/questions/3670570/getting-screen-reader-to-read-new-content-added-with-javascript

“The WAI-ARIA specification defines several ways by which screen readers can “watch” a DOM element. The best supported method is the aria-live attribute. It has modes off, polite,assertive and rude. The higher the level of assertiveness, the more likely it is to interrupt what is currently being spoken by the screen reader.”

<!DOCTYPE html>
<html>
<head>
  <script src="js/jquery-1.4.2.min.js"></script>
</head>
<body>
  <button onclick="$('#statusbar').html(new Date().toString())">Update</button>
  <div id="statusbar" aria-live="assertive"></div>
</body>
  
<div id="statusbar" role="status">...</div>

The same thing can be accomplished with WAI-ARIA roles role="status" and role="alert". I have had reports of incompatibility, but have not been able to reproduce them.

<div id="statusbar" role="status">...</div>

What type of Issues you shouldn’t try to fix

Some issues need a developer. I don’t suggest you spend your time on this type of task. Plugin issues are a great example. Most plugins didn’t create the product considering Ada compliance. You have two choices here: Hire a developer or contact the plugin developer and tell them they need to improve accessibility.

How to Test your ADA compliance?

These tools will help you to find your accessibility issues:

The W3C Markup Validation – Free
The Accessibility Testing Extension For Developers – Free Trial
WAVE Web Accessibility Evaluation Tool – Free
Check1st: ADA Website Compliance Checker – Chrome Extention – Free
Sitebulb – Paid
Accessible Colors – Free
Contrast Checker – Free
Another Contrast Checker – Free

What do you think?

Show comments / Leave a comment

What do you think?

72 Comments:

binance us тркелу

June 7, 2025

Can you be more specific about the content of your article? After reading it, I still have some doubts. Hope you can help me.

Robertgualp

June 12, 2025

Explore the iconic Patek Philippe Nautilus, a horological masterpiece that merges athletic sophistication with refined artistry.
Launched in 1976 , this cult design redefined high-end sports watches, featuring distinctive octagonal bezels and textured sunburst faces.
For stainless steel variants like the 5990/1A-011 with a 55-hour energy retention to opulent gold interpretations such as the 5811/1G-001 with a blue gradient dial , the Nautilus suits both avid enthusiasts and casual admirers.
Unworn Philippe Nautilus wristwatch
The diamond-set 5719 elevate the design with gemstone accents, adding unmatched glamour to the iconic silhouette .
According to recent indices like the 5726/1A-014 at ~$106,000, the Nautilus remains a coveted investment in the world of premium watchmaking.
For those pursuing a historical model or modern redesign, the Nautilus epitomizes Patek Philippe’s tradition of innovation.

KeithSmili

June 12, 2025

Founded in 2001 , Richard Mille revolutionized luxury watchmaking with cutting-edge innovation . The brand’s signature creations combine aerospace-grade ceramics and sapphire to balance durability .
Mirroring the precision of racing cars , each watch prioritizes functionality , ensuring lightweight comfort . Collections like the RM 011 Flyback Chronograph set new benchmarks since their debut.
Richard Mille’s experimental research in mechanical engineering yield ultra-lightweight cases crafted for elite athletes.
Unworn Mille Richard RM3502 timepieces
Beyond aesthetics , the brand pushes boundaries through bespoke complications tailored to connoisseurs.
With a legacy , Richard Mille remains synonymous with modern haute horlogerie, captivating global trendsetters.

Peterbig

June 13, 2025

Die Royal Oak 16202ST kombiniert ein 39-mm-Edelstahlgehäuse mit einem extraflachen Gehäuse von nur 8,1 mm Dicke.
Ihr Herzstück bildet das neue Kaliber 7121 mit erweitertem Energievorrat.
Der blaue „Bleu Nuit“-Ton des Zifferblatts wird durch das feine Guillochierungen und die Saphirglas-Abdeckung mit blendschutzbeschichteter Oberfläche betont.
Neben klassischer Zeitmessung bietet die Uhr ein praktisches Datum bei Position 3.
Audemars Piguet Royal Oak 14790 armbanduhr
Die bis 5 ATM geschützte Konstruktion macht sie für sportliche Einsätze geeignet.
Das geschlossene Stahlband mit faltsicherer Verschluss und die oktogonale Lünette zitieren das ikonische Royal-Oak-Erbe aus den 1970er Jahren.
Als Teil der „Jumbo“-Kollektion verkörpert die 16202ST meisterliche Uhrmacherkunst mit einem Wertanlage für Sammler.

Kennethsar

June 14, 2025

Стальные резервуары используются для сбора нефтепродуктов и соответствуют стандартам температур до -40°C.
Вертикальные емкости изготавливают из нержавеющих сплавов с антикоррозийным покрытием.
Идеальны для АЗС: хранят бензин, керосин, мазут или биодизель.
Емкость подземная ЕП 5 м3
Двустенные резервуары обеспечивают защиту от утечек, а наземные установки подходят для разных условий.
Заводы предлагают типовые решения объемом до 500 м³ с технической поддержкой.

Donaldkek

June 14, 2025

Ce modèle Jumbo arbore un acier poli de 39 mm ultra-mince (8,1 mm d’épaisseur), équipé du nouveau mouvement Manufacture 7121 offrant une réserve de marche de 55 heures.
Le cadran « Bleu Nuit Nuage 50 » présente un motif Petite Tapisserie associé à des chiffres luminescents et des aiguilles Royal Oak.
Une verre inrayable traité garantit une lisibilité optimale.
15450st
Outre l’affichage heures et minutes, la montre intègre une fonction date à 3h. Étanche à 50 mètres, elle résiste aux activités quotidiennes.
Le maille milanaise ajustable et la lunette octogonale reprennent les codes du design signé Gérald Genta (1972). Un fermoir déployant sécurisé assure un maintien parfait.
Appartenant à la collection Extra-Plat, ce garde-temps allie savoir-faire artisanal et élégance discrète, avec un prix estimé à plus de 75 000 €.

Tyronemaymn

June 15, 2025

Эта платформа размещает важные новости разных сфер.
Здесь представлены новости о политике, науке и других областях.
Информация обновляется в режиме реального времени, что позволяет держать руку на пульсе.
Понятная навигация облегчает восприятие.
https://miramoda.ru
Каждая статья проходят проверку.
Целью сайта является информативности.
Читайте нас регулярно, чтобы быть на волне новостей.

Haroldfut

June 15, 2025

Luxury mechanical watches are still sought after for many compelling factors.
Their timeless appeal and mastery define their exclusivity.
They symbolize wealth and sophistication while blending functionality with art.
Unlike digital gadgets, their value grows over time due to their limited production.
https://www.hr.com/en/app/calendar/event/audemars-piguet-royal-oak-15550st-where-heritage-m_mbc5soa1.html
Collectors and enthusiasts treasure the engineering marvels that no gadget can ever equal.
For many, possessing them means legacy that remains eternal.

patek-philippe-nautilus.ru

June 16, 2025

Коллекция Nautilus, созданная мастером дизайна Жеральдом Гентой, сочетает спортивный дух и прекрасное ремесленничество. Модель Nautilus 5711 с самозаводящимся механизмом имеет энергонезависимость до 2 дней и корпус из белого золота.
Восьмиугольный безель с округлыми гранями и циферблат с градиентом от синего к черному подчеркивают неповторимость модели. Браслет с интегрированными звеньями обеспечивает удобную посадку даже при активном образе жизни.
Часы оснащены индикацией числа в позиции 3 часа и антибликовым покрытием.
Для сложных модификаций доступны секундомер, лунофаза и индикация второго часового пояса.
Найти часы Филипп Патек Наутилус оригинал
Например, модель 5712/1R-001 из красного золота 18K с калибром повышенной сложности и запасом хода на двое суток.
Nautilus остается символом статуса, объединяя инновации и традиции швейцарского часового дела.

videonablyudeniemoskva.ru

June 17, 2025

Размещение систем видеонаблюдения поможет безопасность территории круглосуточно.
Современные технологии обеспечивают четкую картинку даже в темное время суток.
Вы можете заказать множество решений оборудования, идеальных для бизнеса и частных объектов.
установка камеры видеонаблюдения стоимость работ
Профессиональная установка и сервисное обслуживание делают процесс эффективным и комфортным для любых задач.
Обратитесь сегодня, для получения лучшее решение в сфере безопасности.

lbgduiymy

June 18, 2025

1-0 (J. Rodriguez) Los siguientes datos pueden recopilarse y asociarse con tu identidad: ★★★ Made by FlashFooty – we were making soccer games before you were born! ★★★ Desarrollador: GameDistribution To add penalty shootout to a word list please sign up or log in. Palabra del día Esta descripción ha sido proporcionada por el autor del programa. About Enjoy4fun To add penalty shootout to a word list please sign up or log in. Añadir penalty shootout a una de tus listas, o crear una lista nueva. Football Heads: France 2019 20 (Ligue 1) Esta descripción ha sido proporcionada por el autor del programa. Ratón: chuta el balón y defiende la portería About Enjoy4fun Las prácticas de privacidad pueden variar; por ejemplo, según tu edad o las funciones que uses. Obtén detalles
http://opendata.abbeville.fr/user/ciaslugomche1975
También la institución recibió una denuncia por parte del Servicio de Impuestos Internos (SII) por delitos tributarios en contra de sociedades y personas naturales que representan a las sociedades relacionadas con estas plataformas. “Esa denuncia es la que se remitió a la fiscalía de alta complejidad, se encuentra vigente y no podemos entregar información por el momento”, comentaron desde la institución. El jurista asesor agregó que “la decisión del Ministerio Público entrega tranquilidad a todos quienes están vinculados a las plataformas de apuestas en línea, porque fija un precedente respecto del resto de otras autoridades que, sin tener facultad alguna, han cuestionado y amenazado a los usuarios de estar cometiendo un delito, así como también a aquellos que las publicitan o promocionan. Las apuestas en línea no están prohibidas en nuestra legislación y esta decisión lo confirma desde el punto de vista penal”.

глаз бога официальный телеграм

June 19, 2025

Прямо здесь вы найдете сервис “Глаз Бога”, что проверить сведения о человеке из открытых источников.
Сервис активно ищет по ФИО, используя актуальные базы в сети. Благодаря ему осуществляется бесплатный поиск и детальный анализ по запросу.
Сервис проверен на 2025 год и охватывает мультимедийные данные. Сервис гарантирует узнать данные в открытых базах и предоставит информацию в режиме реального времени.
глаз бога телеграмм канал
Данный бот — помощник при поиске граждан удаленно.

тг канал глаз бога

June 19, 2025

Прямо здесь вы найдете сервис “Глаз Бога”, позволяющий собрать данные по человеку по публичным данным.
Инструмент функционирует по ФИО, анализируя актуальные базы онлайн. С его помощью осуществляется 5 бесплатных проверок и детальный анализ по имени.
Инструмент актуален на 2025 год и охватывает фото и видео. Сервис сможет узнать данные в открытых базах и отобразит информацию в режиме реального времени.
глаз бога поиск людей
Это бот — идеальное решение для проверки граждан онлайн.

глаз бога по номеру

June 20, 2025

Здесь доступен сервис “Глаз Бога”, что найти данные по человеку через открытые базы.
Бот функционирует по ФИО, используя актуальные базы в Рунете. С его помощью доступны 5 бесплатных проверок и глубокий сбор по запросу.
Инструмент обновлен согласно последним данным и поддерживает мультимедийные данные. Сервис гарантирует узнать данные в открытых базах и предоставит информацию в режиме реального времени.
bot глаз бога telegram
Данный сервис — идеальное решение при поиске персон онлайн.

Ronaldrah

June 20, 2025

Vous cherchez des jeux en ligne ? Notre plateforme propose une sélection variée adaptés à chaque passionné.
Des puzzles aux défis multijoueurs , plongez des mécaniques innovantes sans téléchargement .
Testez les classiques comme le Sudoku ou des aventures dynamiques en équipe.
Pour les compétiteurs , des courses automobiles en mode battle royale vous attendent.
roulette en ligne
Accédez gratuitement d’expériences premium et rejoignez des joueurs passionnés.
Quel que soit l’action, cette bibliothèque virtuelle deviendra votre destination préférée .

поиск глаз бога телеграмм

June 20, 2025

Прямо здесь вы найдете мессенджер-бот “Глаз Бога”, который собрать сведения по человеку через открытые базы.
Инструмент функционирует по номеру телефона, используя доступные данные в Рунете. Через бота осуществляется бесплатный поиск и полный отчет по запросу.
Инструмент актуален на август 2024 и охватывает аудио-материалы. Сервис поможет узнать данные по госреестрам и предоставит результаты в режиме реального времени.
глаз бога пробить номер
Такой инструмент — идеальное решение при поиске людей онлайн.

정품비아그라구매

June 21, 2025

https://meta.xuniverse.wiki/w/User:JeannineVega02

비아그라 구매 사이트

June 21, 2025

https://forums.vrsimulations.com/wiki/index.php/User:ZellaLysaght631

Divi Accessibility: It’s not perfect however there are solutions

Divi accessibility

1 – Add Alt attributes for all Images

2 – Color Contrast

3 – Add label attribute to your forms

4 – Heading Hierarchy

5 – Enable Mobile Zoom

6 – Enable Outline for links

7 – Icons should have text

What type of Issues you shouldn’t try to fix

How to Test your ADA compliance?

What do you think?

What do you think?

Leave a Reply

More notes

Hire WooCommerce Developer Like a Pro (Not a PHP or WP Developer)

8 Insanely Fastest WooCommerce Themes in 2022 (Analyzed)

How to speed up WooCommerce slow checkout page (+10 solutions)