ARIA HTML Tutorial - What is ARIA & Why it's Important to Use!

Im implementing this in my javascript framework

Even in a simple symantic html demonstration your UI still looks elegant. Would definitely enroll for your UI course when am able to raise the money.

After being in this field for three years I had this sudden idea of looking up what the hell aria was because every one was using it, and I was just annoyed with these attributes that were everywhere and made no sense to me. Now I am embarrassed but glad that I got to know what they are. Thanks for this tutorial! It's so bad that these important points are not touched upon during the foundation learning of html.

OK, so basically we're going to build our thing normally and then make it screen reader friendly in the parts that aren't so clean for people using it....

how come without any key event listener, on enter press, it is getting expanded?

I always tought was because the font family and was confused until watched this video

Shit + Alt (cmd) + A A - doesn't turn this off.

Very good vid. Have you anymore videos or courses on web accessibility?

What camera are you using for your recording, its too clean😃

thanks for the intro on aria, i try to implment aria in my designs, it's one of those things you need to outline pror to actual coding, in my case anyway.

Everything is the same as in Gary's, but how do I get to the text, it is clear with the mouse, circles the text and reads it, and with the tab, only to the next button (item), but not to the text (

Ummm uhhh excuses me ummm my name is Aria 💀💀💀💀

When I saw aria, I was thinking about opera aria in Italian. Why not just call it a11y?

Awesomeee

After expanded the first row, now I click the second row the first row should automatically collapse and second row become expanded . What should I do for that?

started well until this f*** advertising...

One other thing that you could do is use a <details> element instead of just a button and a paragraph in that expanding thing list. Another nice thing about <details> is that it can be reached with browser search, and is automatically expanded and contracted when you do that. Also, no Javascript is necessary, in browsers from the last decade.

At the start you add a semantic 'nav' instead of just using role but it gives the same result. Whats the difference if it gives the same result?

But how I'm able to focus on text element revealed to get reader to say it?

Could you please make more videos like this on accessibility?

This is definitely not the video if you haven"t heard of ARIA and want to get a head start.

Shift+Alt A A doesn't work for me. 😢

Hi,

I have a problem like, after selecting any option from combo box, screen reader announcing as "combo box option collapsed required", but I need a custom message like "option selected combo box collapsed required" how can I achieve this.

Please help me out from this problem.

I pressed Shift + Alt + A.A , but it's still active 🙃

this was really helpful! Thank you so much👍🏽

ddf

OK so bookmarking this video for later, but I'm here because I thought Facebook was using "aria-describedby" to create pop-up descriptions, and I was asking "What is aria-describedby?" Your intro answered the ENTIRETY of my googling journey in just 5 seconds.

Even though I'm leaving as soon as your 5 second intro answered my question, kudos to you for clearing something up so well and so fast like that.

I PROMISE I will come back to watch the video in full, and soon.

visually impaired....

I don't understand why you added the aria-controls and aria-labeledby. These didn't seem to affect the screen reader at all...

14 min video and you didn't really teach anything😐👌

Thank you for the information you provide. its really helps me lot

Thanks for the Alt+Shift+(A x2) shortcut The reader says "Chrome Vox is now inactive" but it continues to read anything I mouse over or click. It lies to me! :D

Your voice sounds like a screen reader's voice too! :) Thanks man!

Wait,, this isn't Minecraft music

Your thumbnail is really really offensive dude.

Great content! Thank you so much for this :)

Are you aware of a similar extension for firefox?

Why always skipped text for me(heading paragaraph) only jump to button, link or input fields.

Super vidéo ! J'ai acheté un applaudissement à 2,00 € 👏

heydonworks asks javascript to be disabled ;;; so much for being easily accessible...

<i class="fa fa-heartbeat" aria-hidden="true"></i>

To disable plug in Shift Alt AA (once I turned it on it was hard to hear the video for these instructions)
Windows desktop

I turned it off like he said, and then it kept telling me it was inactive. Less than 5 minutes and i'm ready to de-install it but don't see it with the other extensions omg.

Hawkeye from avengers started to make coding tutorial 😂

Thank you

Nice video and music :D

What is the Mac key combo to quickly turn Vox on and off? Thanks!