The art of labeling -- A11ycasts #12

Рет қаралды 57,934

7 жыл бұрын

Watch the "Just Use Button -- A11ycasts #05" video here: goo.gl/BIJOlz
Every interactive control in your application needs to have an accessible "name", more often referred to as a "label". In today's episode I'll show you how elements actually get their accessible names, and some techniques you can use to provide proper labeling. After you're done watching, be sure to skim through your current site or app to make sure all of your controls have labels!
Watch all A11ycasts episodes: goo.gl/06qEUW
Subscribe to the Chrome Developers KZfaq channel for updates on new episodes of A11ycasts: goo.gl/LLLNvf

Пікірлер: 30

@zsoltoroszlany7172 7 жыл бұрын

It was really helpfull! I've used aria-labelledby before as you showed on the last example but I didn't know that you can self reference an element like a div button in this case by giving it an id; thid confused me until now; because as you said the button label said Mens shirt without the Shop now label.

@khoushiekram5287 Жыл бұрын

Thanks for everything you've done for the community rob!

@emmaarce7057 7 жыл бұрын

Very useful information, I finally understood what is the difference between aria-label and aria-labelledby. Thanks!

@Cuddlehead 3 жыл бұрын

such a good playlist, thanks man!

@estefa7777 3 жыл бұрын

Thanks for this channel Rob! Is necessary for all front-end developer!

@ko17277 4 жыл бұрын

Hi Rob, I dont see "Developer tools Assembly" when I goto chrome://flags. I only see Experimental WebAssembly. thanks!

@Real_Atomik 7 жыл бұрын

Is there any way to check through a tool like analytics if a user on your site has used a screen reader? This is extremely useful, and I wouldn't want to exclude any visitor to the site but sometimes you have to balance where to put your development resources.

@wyndward 7 жыл бұрын

Thank you for creating this series. I am not a developer, but these videos are incredibly helpful. Feeling through this series that I understand better what it takes to make an inaccessible web app compliant with WCAG and functionally useful in a screen reader. Any recommendations on other youtube series like the A11ycast?

@liammiddleton3224 4 жыл бұрын

For the menu button. Is it better to just use "Menu" as the label, or would it be more appropriate to use "Open Menu" or "Close Menu" giving the user a directive about what action this button will take? I'd like to make my actions clear and I'm not sure if using "Menu" gives enough context.

@glennmercier7553 5 жыл бұрын

when i go to accessibility inspection in the experiments page it doesn't show, can anyone help! thanks in advance

@konstantinkkk8397 5 жыл бұрын

when I go to experiments it shows all options expect Accessibility Inspection. Pls can someone help me?

@bhardwajanshul2007 6 жыл бұрын

Hi very good video , Due you how can automate this labeling validation ?

@yuviaperez6839 3 ай бұрын

Hello there! I have a quick question. Is the DevTools Experiments section already available online?

@tvvignesh 7 жыл бұрын

@Rob Dodson: If I have a Shop Now button like what you had but rather did not have an ID for it (the repetitive elements are given a class rather than an ID in most cases), how will you still reference with aria-labelled-by?

@user-ss7gy1cq5b 7 жыл бұрын

tv vignesh

@victorvarenic7610 4 жыл бұрын

NVDA doesn't read first element with aria-label. What can I do with this problem? Can I somehow avoid such behaviour?

@toma1610 2 жыл бұрын

I see “aria-labelledby” and “aria-label”. This last one is used mostly to label graphics and elements that don‘t have a text-content?

@levidahlin4618 6 жыл бұрын

you bad boy

@mahone-kt4dj 3 жыл бұрын

@MinopolisMc 7 жыл бұрын

Why doesn't self referencing result in infinite recursion?

@IAmAdamTaylor 7 жыл бұрын

Infinite recursion would only occur if the same function is called within itself. In this case, the DevTools are using a function which only finds the text of a given element, therefore it doesn't call itself and doesn't recurse

@MinopolisMc 7 жыл бұрын

It seems like they just ignore the `aria-labelledby` and use the next best property when the element references itself.