Top 5 aria-label mistakes

Подписаться 2,5 тыс.

Просмотров 6 тыс.

50% 1

If you misuse aria-labels, it makes the website even more inaccessible. I will show you mistakes I often find when testing websites for accessibility.
Enroll in my ARIA course - www.udemy.com/course/introduc...
Questions? Comments? Concerns? Drop a comment down below!
Interested in learning more about Accessibility? Check out my top rated Udemy courses for more details!
Web Content Accessibility Guidelines: bit.ly/3kH6qlK
Creating Accessible Websites: bit.ly/35OFkTx
Feeling social? So am I. Connect with me and other accessibility enthusiasts on Facebook: / webaccessibilityeducation
Have some spare change? Buy me a coffee: ko-fi.com/stef
Thank you for your continued support in liking, sharing, and watching my videos. Hit the Subscribe Button for more educational accessibility content just like this :-)
- Stefany

Опубликовано:

30 дек 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 7

@jo.c81 Год назад

Thank you !

@WebAccessibility Год назад

You're welcome!

@smchap9474 2 года назад

For first example: "The label should be inside the accessible name" - is "contact us" the accessible name? is this only for links that voice control where a user must speak the link content? I just saw a video with a suggestion for using an aria label to create more clear "read more" links by including an aria label with the article title instead of simply "read more". Would this then not be usable by voice control and thus break that code?

@WebAccessibility 2 года назад

If you are referring to 0:37, the accessible name is "Give us a call" which is the value of the aria-label. The example you mentioned is wrong and it will make the control impossible to use by voice control, unless "read more" is inside the aria-label. For example, if the title is "How to make a cake" and the visible label is "Read More", then to make the control accessible, the arial label must be "Read More - How to make a cake" or "How to make a cake. Read more". It is for all interactive elements, such as link, buttons, inputs, etc.

@clevermissfox 6 месяцев назад

I’m not sure what the accessible name is either. I understand that’s the wrong way to do it but an example of how to properly format it would be very helpful

@erikasramanauskas6171 Год назад

Appreciate for trying but you blur many words in to one very fast. Remember that people who look up for video about simple start up Programming concept like aria-labels are generally new to Programming and throwing many complex words fast is not help-full.