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">';
}

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 offpolite,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:

Tags

What do you think?

What do you think?

13 Comments:
September 15, 2024

Модные советы по созданию необычных видов на любой день.
Статьи экспертов, новости, все новинки и мероприятия.
https://vladtoday.ru/news/2024-09-10-10-prichin-za-chto-my-lyubim-demnu-gvasaliyu/

November 1, 2024

Thanks for sharing superb informations. Your website is so cool. I am impressed by the details that you’ve on this web site. It reveals how nicely you understand this subject. Bookmarked this website page, will come back for extra articles. You, my friend, ROCK! I found just the info I already searched all over the place and simply could not come across. What a perfect website.

November 9, 2024

When he realized will megill dates lower blood pressure that his furosemide davis plus defense was completely unable to resist what can i quickly lower high blood pressure the furosemide davis plus what is the brand name for irbesartan attack furosemide davis plus that Kavin was performing at this time, it was too late, and Kavin did Furosemide Davis Plus not give him the opportunity to exert his furosemide davis plus full strength amazon priligy

November 15, 2024

My brother suggested I might like this blog. He was once entirely right. This submit actually made my day. You cann’t consider just how so much time I had spent for this information! Thank you!

can i buy cytotec no prescription Tamoxifen TAM is the endocrine therapeutic agent the most widely used in the treatment of breast cancer, and it operates primarily through the induction of apoptosis

December 6, 2024

I don’t think the title of your article matches the content lol. Just kidding, mainly because I had some doubts after reading the article.

December 19, 2024

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

December 29, 2024

I don’t think the title of your article matches the content lol. Just kidding, mainly because I had some doubts after reading the article.

Thank you for your sharing. I am worried that I lack creative ideas. It is your article that makes me full of hope. Thank you. But, I have a question, can you help me?

January 14, 2025

На этом сайте вы сможете узнать подробную информацию о витаминах для поддержания здоровья мозга. Также здесь представлены советы экспертов по приёму подходящих добавок и их влиянию на когнитивных функций.
https://marco9pw1f.bloggerswise.com/39217275/Топ-последние-пять-витамины-для-мозга-Городские-новости

January 16, 2025

Needed to send you that very small note to finally thank you very much over again regarding the precious advice you’ve shown on this website. It is simply surprisingly generous of you giving unhampered all a few people could possibly have distributed as an e book to end up making some profit for their own end, most importantly given that you could possibly have done it in case you desired. The concepts as well served as the good way to understand that many people have the identical keenness just like my very own to grasp very much more with reference to this problem. I am certain there are numerous more enjoyable instances up front for many who read carefully your blog.

January 26, 2025

На сайте MixWatch можно найти свежие новости из мира часов.
Тут выходят обзоры новинок и аналитика популярных брендов.
Ознакомьтесь с экспертными мнениями по трендам в часовом мире.
Следите за ключевыми событиями индустрии!
https://mixwatch.ru/

На данном сайте можно ознакомиться с информацией о сериале “Однажды в сказке”, развитии событий и ключевых персонажах. once upon a time сериал Здесь размещены интересные материалы о создании шоу, актерах и фактах из-за кулис.

Leave a Reply

Your email address will not be published. Required fields are marked *

More notes