Intro to ARIA -- A11ycasts #13

ARIA 1.1 Spec: goo.gl/1rGD7S
ARIA Authoring Practices 1.1: www.w3.org/TR/wai-aria-practi...
Here on a11ycasts I always try to encourage developers to use native controls rather than roll their own mainly because you get semantics and keyboard functionality for free. But there are situations where you need to build something and there's no native analog in the platform. For these occasions when you need to go offroad and build your own control, the Web Content Accessibility Initiatives Accessible Rich Internet Applications spec (WAI-ARIA) can help you add in the semantics your new custom control is missing. Today on the show I'll cover what ARIA is from a high level and show off some of the features and relationships ARIA let's you take advantage of.
Why do semantics matter?
• Why do semantics matte...
Watch all A11ycasts episodes: goo.gl/06qEUW
Subscribe to the Chrome Developers TH-cam channel for updates on new episodes of A11ycasts: goo.gl/LLLNvf

[@MajorBreakfast]

Great job, Rob! I really like the style of your tutorials: Well edited and illustrated, detailed explanations, fast paced, but not rushed. That's the way :)

[@zanehannan5306]

Yep!
I wish there were javascriptless examples though. That'd be great!

[@daviddr2d2]

Brilliant, very informative about Aria, many thanks.

[@Erandros]

very enjoyable, easy to understand video, good work

[@jensyfrenzy]

Great job! Very informative... Thank you!

[@theblablablahs]

Thanks for this! Using this in 2019.

[@harrispinkham]

Thanks! Very informative!

[@AndreyMakR3]

Great job man!

[@busyrand]

Very helpful! Thank you...

[@user-pe3my8gl7d]

THX , This Knowledge is very important . Especially in China , it was not taken seriously . I really hope more people can know it

[@ChrisLampert]

Is it still considered best practice to create things like custom check boxes (if you want them styled in a certain way) or would it be better to use native check boxes that are visually hidden and then have a visual representation over the top using divs like you mention here? I am wondering which is better for maintainability. Talks earlier in this playlist refer to just use a button (and by extension, native HTML) but then this tutorial contradicts that somewhat. What is best practice?

[@microcolonel]

As a matter of team standards, when there is an accessibility attribute which matches the distinction used in the style (i.e. checked), then that accessibility attribute should be the way CSS discovers that state.

[@rajivuniyal4346]

Is ARIA useful for Search Engine Optimization (SEO) ?

[@marciaoliver123]

Sensacional ❤

[@cheng6523]

Nice content 👍

[@virendersingh9377]

Can someone share the organised playlist of this topic?

[@toma1610]

Hi, I need see live examples. For example, what is the screen reader "says" when you put any aria-xxx or without it, with role="navigation", with . What happens if you use and role="navigation". Is there conflict? In the video, I can not see what happens with the screen reader if you set/no set "aria-expanded".

[@ilovecomputers]

Is there a tool like caniuse, but for ARIA attributes and assistive tools?

[@naturadamus7263]

I was wondering about the exact same thing :S @Google Chrome Developers

[@nikosspiropoulos8417]

excuse me but shouldn't aria-expanded be "true" instead of "false" since it is actually expanded in order for the buttons to be visible? I would appreciate if anyone could help

[@toma1610]

Hi. If I have all checkboxes with aria-checked:"false", is bad? I would do it because I don't want to make influence (twist) to the user decisions. I don't understand the reason to set up for default a checked box as if this is "convenient" for the user. Your appreciation, ¿please? Thanks a lot. Clear tutorial, good sound.

[@Glutnix]

Hey Rob, could you do a screen reader demo for Voiceover on iOS?

[@tnblackdragongamingofficia6163]

yes

[@raomujadad8335]

Once you see the unicorn in the background you wont be able to ignore it for the rest of the videos.

[@ammarsadeq6078]

Why would some checkbox be created using DIV when without works well?

[@kostas_x]

Mainly for custom styling or a unique look and feel that cannot be accomplished using the regular input element.

[@jrjr1684]

Google is an amazing company~

[@user-blabla-47854]

It would be great if VoiceOver was included for additional examples too

[@qosku]

Hi, do you can help me Plis? I need change the valué of aria checked in role radio in the tag i for icon

[@user-blabla-47854]

@@qosku -> stackoverflow

[@qosku]

@@user-blabla-47854 dont found nothing, in voiceover its very diferent that Talckback and dont understand why.

[@user-blabla-47854]

@@qosku you should ask there

[@ashwanigupta4072]

nice

[@user-fj9ri5ef7h]

Ashwani Gupta سلام

[@Foxygrandpa2131]

16 ADA lawyers disliked this video

[@mahammadshajid8605]

hi sir, i am a new aira learner, i want to learn about accessibility tree, please help me to get knowledge from you.

[@konstantinkkk8397]

I cannot find info with real examples how aria-controls works. Can you please explain it by building something?

[@konstantinkkk8397]

and overall I want more examples with relationships attributes. On Udemy as I remember was explained only aria-owns

[@RealEstate3D]

This video is only black. I can only hear the voice and the transcripts. Is this intentional?

[@foreverwarriormak5803]

vas

[@rodrigomann]

Apple

[@zanehannan5306]

Pen

[@yongxiang9098]

lol

[@rodrigomann]

Zane Hannan Pinapple

[@mariaatanasova4686]

l am Maria my fredt teke my story after teke my akaynt

[@ericpodhorecki5427]

It's kinda weird that we invest so much effort to make things accessible but all of that work end up being read by a super bad fake voice. :-)