0:00
Hello everyone, welcome to KeyTube blogging and in this video I will show you how can
0:03
fix an accessibility error in Elementor. So if you are using Elementor in WordPress and you may have faced this type of error
0:11
in PageSpeed inside like button do not have an accessible name or link do not have an
0:16
accessible name. So how we can fix that? To fix this you need to add the Arial label to the buttons or links
0:24
So as you can see that here in the button there is the Arial label attribute is added
0:29
So if you are using in links and you can also add the Arial label attribute to your links
0:36
So in this way you can fix that accessibility issue in your Elementor as well
0:41
So let's check how we can add that Arial label attribute in links or buttons
0:46
So for this I will go to the website here and this website is build with Elementor
0:51
So if I right click on here and click on inspect and here I can see that there is the anchor
0:57
element here or the link element and here as you can see that there is no Arial label
1:02
attribute is added. So how you can add that Arial label attribute to this link
1:07
So for this we are going to edit this page with Elementor
1:11
So let me just open this in a new tab. So to add the accessible name to this button let's click on the button here and here you
1:20
will see this link. So you can add the link here and after the link you will see this option link option
1:26
But here you will get limited options like you can add this to open a new window or add
1:31
no full attribute. But what if you want to add a Arial label attribute
1:35
So to add that attribute you can use the custom attribute feature here
1:40
So if you see the documentation how to add custom link attribute here as you can see
1:45
that you can add real sponsor or you can add real UGC
1:49
So these are the custom link attributes that you can use in Elementor as well
1:54
So to add the Arial label attribute what I can do is I will type like aria-label and
2:02
to add the value we need to add the symbol pipe symbol
2:06
So I will add a space here and I will add the pipe symbol as you can see in the description
2:12
and then I will add the Arial value. So we can add like view all course
2:22
Okay we have added the Arial label attribute. So let me just update this page
2:27
Now let's go to the website and let me just replace this page
2:32
Now right click on the button and let's click on inspect. As you can see that the Arial label attribute is added to our links
2:41
So in this way you can fix the accessibility error inside your Elementor
2:45
So I recently got this comment how to fix this. So here it is
2:50
And if you found this video helpful, then make sure to hit the like button. And if you have any doubt regarding this, then you can ask me in the comment section
2:57
I will see you in the next video. Bye bye
