How aria-label works with ADA Accessibility in HTML

aria-label can be a very powerful tool to use to make sure your site is ADA accessible. I'll break down how I used it on a series of links on a website.
Using aria-label for link purpose:
www.w3.org/WAI...
Video on how I made the social media links:
• Easily Add Social Medi...
- - - - - -
⤵ Download ALL of my source codes & more!
Introducing ADWC PRO
pro.adesignerw...
ADWC Pro provides you with:
• Access to all the source codes for ALL projects
• Bootstrap Bootstrap online course (retail $79) w/ supplied source code
• All future online courses (Gatsby v5 course coming soon)
• Updates of ADWC and the web dev business
• and more!
Price:
Just $6/mo. or $49/year (32% off monthly)
-------
Got a question for me?
adesignerwhoco...

[@deniseerazmus8248]

FYI - Since you have the link within an you do not need to put "link to" all you would need to put is facebook etc. When you use on screen reader on your code you would hear "link" "link to facebook". The screen reader knows it is a link and you do not need to repeat this information.

[@ADesignerWhoCodes]

Ya. I think that was me verbally explaining it and just writing it at the same time. You are correct. Thanks for that catch!

[@ob5804]

@@ADesignerWhoCodes Hi. I use aria-label also in button inside which is an icon is it wrong or right?

[@jakubliska4730]

thanks for this tip

[@JosephDelsoin-v9f]

Thanks for sharing! Noticed that making the update didn't improve your SEO score....Prior to you making the update your SEO score was a 91 and still the same score after the update.

[@ADesignerWhoCodes]

Ya. I think I ran the score too quickly. But it will improve it. :) Call it movie magic haha.

[@soulafm5634]

Keep going, I really love your channel
your videos help me a lot

[@ADesignerWhoCodes]

You are so welcome!

[@diegogaldames180]

I have a question, is it better to use in or , or both?

[@ADesignerWhoCodes]

Nav for your navigation. In this case, I wouldn’t use nav as it’s more of a list of social media icons. But of course you have to use tags for links.

[@Leonhart407]

What's the difference between aria label and alt tag? Thanks for the informative video!

[@ADesignerWhoCodes]

Alt tags are designed to describe the image in the image tag. The aria label is designed to describe where the link is going. Sometimes they overlap. Sometimes they don’t.
You always need alt tags with images. But you don’t always need an aria label if the information directed to is clear enough

[@adriananin3150]

Simple thanks

[@TheFeelGoodKid]

Can you share a link to the run audit website checker

[@Natalie-nb6zt]

Thank you

[@ADesignerWhoCodes]

You are so welcome.

[@ham2956]

Doesn’t have an a tag already announce on a screen reader that it’s a link. Would it not read link link to twitter

[@ADesignerWhoCodes]

Yes and no. All depends what is in said link. “Read more” or “click here” or a social media icon without any text doesn’t properly describe where the user is going.

[@SpookySkeletons]

How do I do this on a wordpress website?

[@MertDiker]

this accessibility for what, is it for the people that have disabilities.

[@ADesignerWhoCodes]

Yes. It is also one of the ranking factors that Google uses too. There has been a stronger and stronger push to make sites more accessible.
Accessibility isn’t just for disabilities. For example WCAG AA requires that a site can expand to 200% without losing usability. That’s helpful for my Dad who is older and increased the font size on his phone.
www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html