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.
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?
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.
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.
@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?
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
This question actually makes sense. This would have been of concern if the labels were chainable. They are, however, according to MDN, not: "The aria-labelledby property cannot be chained. If an element with aria-labelledby references another element that also has aria-labelledby, the aria-labelledby attribute on the referenced element is ignored."
Thanks for everything you've done for the community rob!
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.
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?
such a good playlist, thanks man!
Thanks for this channel Rob! Is necessary for all front-end developer!
Hello there! I have a quick question. Is the DevTools Experiments section already available online?
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.
Very useful information, I finally understood what is the difference between aria-label and aria-labelledby. Thanks!
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.
Hi Rob, I dont see "Developer tools Assembly" when I goto chrome://flags. I only see Experimental WebAssembly. thanks!
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?
when i go to accessibility inspection in the experiments page it doesn't show, can anyone help! thanks in advance
NVDA doesn't read first element with aria-label. What can I do with this problem? Can I somehow avoid such behaviour?
@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?
tv vignesh
when I go to experiments it shows all options expect Accessibility Inspection. Pls can someone help me?
Hi
very good video , Due you how can automate this labeling validation ?
Why doesn't self referencing result in infinite recursion?
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
It seems like they just ignore the `aria-labelledby` and use the next best property when the element references itself.
This question actually makes sense. This would have been of concern if the labels were chainable. They are, however, according to MDN, not:
"The aria-labelledby property cannot be chained. If an element with aria-labelledby references another element that also has aria-labelledby, the aria-labelledby attribute on the referenced element is ignored."
This needs an update
you bad boy
??
new friend
Please don't say "Trump"
Paul Warelis the space here is not safe for everyone
Trump
Please do grow up
Paul Warelis say
CoWinkKeyDinkInc huuu