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

No video

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

Рет қаралды 183,611

Күн бұрын

www.linode.com/... - Use code 'DESIGNC19' to get $20 credit on your new Linode account!
- Today, we're going to touch on an often overlooked subject in frontend development, although it's very important. And that is ARIA. ARIA is an acronym that stands for "Accessible Rich Internet Applications", and it's a set of attributes that help make your websites/web apps more accessible/usable to people with disabilities, such as blindness.
While there are many ARIA attributes and different use cases, we're not going to take a look at all of them. The purpose of this video instead, is to shine a light on the importance of understanding and using these attributes. With the assistance of a chrome plugin (ChromeVox), you will find out just how difficult it can be to navigate your way around a UI without sight -- and how using these ARIA attributes will help the user experience.
Some resources:
www.w3.org/TR/...
developers.goo...
ChromeVox (Free chrome extension):
chrome.google....
-- To disable/enable the plugin, the shortcut is SHIFT-ALT-A-A
NVDA screen reader (Free screen reader for Windows):
www.nvaccess.org/
Let's get started!
#accessibility #frontend
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesi...
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!

Пікірлер: 135

@DesignCourse 4 жыл бұрын

Have you neglected using ARIA attributes? Also, check out my upcoming UI design course: completeui.design

@coyotestark5598 4 жыл бұрын

Please, more tutorials about accessibility.

@MrFckingninja 4 жыл бұрын

GUYS! What can i use on LINUX UBUNTU as a screen reader? THANKS ! :)

@chrisleighton6289 4 жыл бұрын

@@MrFckingninja Orca

@chrisleighton6289 4 жыл бұрын

Yo Gary, great presentation style & quality. Do you have an interest in editing the vid. by adding a focus handler that with

@endivinavoluntad2328 3 жыл бұрын

WHEN??

@adamromero 4 жыл бұрын

This kind of stuff really needs to be more emphasized in learning courses for HTML. Web accessibility is too often an after thought for front end developers, I've been guilty of this too.

@notbrad4873 4 жыл бұрын

I'm a digital accessibility auditor. The best way to make accessible sites is to follow the HTML spec and Web Content Accessibility Guidelines (WCAG). ARIA is made for UI elements that don't have meaningful syntax native to HTML. The accordion is a good example. ARIA supplements the meaningful information not supplied by native code (there is no tag), so you take an existing HTML element (div or button) and give it new meaning and specify the UI relationships with ARIA (labelledby, role, etc). Hope that makes sense.

@cal9653 2 жыл бұрын

Worth noting the details / summary elements for accordions, but often you'll make a custom accordion for better transitions etc. so definitely still useful advice.

@dragosgheceanu9847 2 жыл бұрын

thanks!

@ahmedthebest 4 жыл бұрын

I am a blind developer already I use a screen reader normally I think the best way to make your website accessible to use the native HTML tags I mean when you create a button use the tag button not airlink and style it it as a button . The HTML cannabis doesn't accessible at all don't use it a lot

@IsaiahGamers 4 жыл бұрын

role=“button”

@GauravKumar-ue7nz 3 жыл бұрын

What does Blind Developer means?

@ahmedthebest 3 жыл бұрын

@@GauravKumar-ue7nz It's someone who can see works as a computer.

@jaidendechon35 2 жыл бұрын

@@IsaiahGamers This is a common misconception. The whole point of semantic HTML is to use the right element for the job. If you need a button, just use a button! Even if you use `role="button"`, you're making things much worse for accessibility and much harder for yourself. If you don't use a `button` tag for a button, you now have to manually implement a tabindex, event-handlers for click/enter/spacebar, and all sorts of other things semantic buttons do for you just by virtue of being a button. Check this out for more information about what happens when you use your technique: kzfaq.info/get/bejne/p8pya7aDzdfadpc.html It's best just to use a tag. Doing otherwise makes things harder for yourself AND your audience for no gain at all.

@seanpaulson9098 2 жыл бұрын

@@IsaiahGamers no don't use role='button' on a HTML button tag... that's redundant and will cause problems.

@brianmarwa8320 4 жыл бұрын

I just recently got hired for a position that requires me to make projects accessible and 508 compliant. This video came at the right time....

@HoTKreeZy 4 жыл бұрын

Wow... honestly, I've never worked with aria attributes and never really knew how important they are.. thank you, it is really interesting. Bravo!

@erikjansson1790 4 жыл бұрын

I love that you're making content about accessibility as well as UI/UX design. You could solve the accordion issues using only HTML with the and -tags. No script or aria needed. Try it!

@JAllen-tx3di Жыл бұрын

I prefer your approach much more because as a person who uses screen readers and have to teach my students how to use them, the accordion method is too wordy and I would much rather it say "button, list, etc" versus all of the text aria did, it can be confusing when hearing so much feedback. Thank you for giving this example in HTML. ARIA is used only when the HTML semantics isn't available. This video demonstrates why that is so, unintionally. But now I have more clarity.

@debjanibiswasroy Жыл бұрын

Honestly in youtube there are tons of ARIA tutorials and none of them is in this depth. This is exactly what I was looking for...Super helpful.

@iamtafara 4 жыл бұрын

Love how he says before we begin, halfway through the video.

@JaimeIniesta 4 жыл бұрын

The way to disable the extension (or enable it again) on a mac is: Control + Command + a + a

@brittpermien 3 жыл бұрын

Thank you!

@MarkBelain 2 жыл бұрын

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.

@microcolonel Жыл бұрын

One other thing that you could do is use a element instead of just a button and a paragraph in that expanding thing list. Another nice thing about 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.

@parthkumarchaudhary 4 жыл бұрын

Very Useful information. Now i understand why Bootstrap use "ARIA" attribute in their Development. Thanks Gery for great information. You added very important thing to my library.

@Mr.samomar 2 жыл бұрын

this is why I'm here

@marcelomoraes1341 2 ай бұрын

Great video! We gotta raise some awareness over the web accessibility importance.

@a-girl-has-no-name Жыл бұрын

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.

@chukwuemekakingsleyufoegbu263 Жыл бұрын

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.

@user-qj2uo5ns7y 8 ай бұрын

Great video! I already passed it along to my workmates. So clear and concise. Thanks!

@shannavick-morris1092 3 жыл бұрын

Start watching video at 3:26. That is where it starts to answer the question on the topic.

@cram6916 2 жыл бұрын

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

@ozanmuyes 2 ай бұрын

Thanks for the informative video! One suggestion I can make for @DesignCourse is to minimize dark-to-light switching (and vice versa). It hurt my eyes (no pun intended)

@Frankslaboratory 4 жыл бұрын

New video, great! Most websites ignore ARIA, even in the company where I work. You can't even checkout without mouse :D

@lequientlewis1937 2 жыл бұрын

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

@conaxlearn8566 2 жыл бұрын

Same for me. Guess that's the real reason for low rating.

@kuhaniresti 9 ай бұрын

Im implementing this in my javascript framework

@arthura.kupriyanov4667 4 жыл бұрын

I love this ending music :) Good job, bro!

@MeinDeutschkurs 5 ай бұрын

Thank you very much. This demo was eye opening! ❤

@elmalleable 4 жыл бұрын

how i wish i watched this one day before an interview, i totally almost forgot nav and aside when i was asked about semantic html. Thanks Gary, you help make the web a better place

@Niallphillips 2 жыл бұрын

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?

@SirSajjad 4 жыл бұрын

Keep up producing useful tutorials. All the best. Helpful to understand ARIA.

@sovereignlivingsoul Жыл бұрын

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.

@bathulanagendra4621 4 жыл бұрын

Nice video.Inspiring to do some work related to blind people's.appreciating your concern about blind people.Gud work.

@mascatrails661 2 жыл бұрын

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

@mojtabavahdati7648 3 жыл бұрын

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

@LearnFrontendNow 4 жыл бұрын

Great accessibility video and that outro tune ❤️

@6644guilherme Жыл бұрын

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

@minamulhaq 4 жыл бұрын

FF comes with built-in ScreenReader

@NorthOfDark 4 жыл бұрын

thank you for covering this.

@TheFeelGoodKid Жыл бұрын

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

@jomesias 4 жыл бұрын

So Aria reads the css data attribute and uses the speech utterance library to speak the description?

@DesignCourse 4 жыл бұрын

ARIA reads html markup along with associated attributes and presents it as an audio-based UI.

@jomesias 4 жыл бұрын

DesignCourse thanks for your reply! Its looking... err sounding awesome! 😆😆🎉🎉

@balajisv4052 Жыл бұрын

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

@ob5804 Жыл бұрын

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 (

@entertainmentmedia8298 3 жыл бұрын

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

@MZ-uv3sr 3 жыл бұрын

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

@victorstone3720 2 жыл бұрын

this was really helpful! Thank you so much👍🏽

@fh3r3 8 ай бұрын

thanks bro, very clear,

@snakone 4 жыл бұрын

thanks Angular cares about ARIA i learned what was it and why exist

@TheUnOriginalsAdda 2 жыл бұрын

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

@oudoulj 7 ай бұрын

Watch out: there's a typo at 10:14 This should be aria-labelledby with 2 L

@alex-suciu 4 жыл бұрын

do you have a full tutorial for accessibility?

@AugerHybrid 2 жыл бұрын

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

@engineerlawalhamzatademola4267 2 жыл бұрын

Could you please make more videos like this on accessibility?

@leogarza5022 4 жыл бұрын

VERY USEFUL! Awesome Content!!!

@anandhakumar8898 Жыл бұрын

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?

@hannaaverkamp-peters149 3 жыл бұрын

Great content! Thank you so much for this :)

4 жыл бұрын

When it came to e-books, i liked pdfs better than epubs. Now I like e-pubs better because edge browser can read them. So e-pubs = audio books :)

@adityamishra7711 4 ай бұрын

What if someone's like Helen Keller, I don't think they would put braile or sign languages... Goes to show that accessibility is just a game nerds love to play ...

@ravikirangundala4257 2 жыл бұрын

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.

@conaxlearn8566 2 жыл бұрын

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

@GiammaCarioca 4 жыл бұрын

Great video! More of that please!

@brittpermien 3 жыл бұрын

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

@ReactWithSamwize Жыл бұрын

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

@MZ-uv3sr 3 жыл бұрын

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.

@vikinggeorge7007 Жыл бұрын

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

@carolinaborges5467 4 жыл бұрын

Amigo, podes por o css ? obrigada.

@rebehayan 4 жыл бұрын

Wow.. sooo cooll~~ How is different ChromeVox, NVDA, JAWS??

@GoddessofWarr 3 жыл бұрын

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

@andreas_arvidsson 3 жыл бұрын

Nice video and music :D

@ru2979 2 жыл бұрын

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

@_rachid 3 жыл бұрын

Thank you

@abhishreymittal 4 жыл бұрын

The thumbnail looks justified... Got that?😅

@josephmbimbi 2 ай бұрын

Thank you for the vidoe, but you talking over the chrome box (or vice versa) is quite annoying. When you have something to say, wait until it is finished, don't do any action or disable it

@ahnmebnsina381 4 жыл бұрын

awesome tutorial :-)

@bulp9893 4 жыл бұрын

Cool stuff ❤

@mohamedelidrissi2839 4 жыл бұрын

Epic intro

@yugsoni2603 4 жыл бұрын

Thanks

@brunnosilva2668 Жыл бұрын

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....

@kakyoin4535 Жыл бұрын

Awesomeee

@valoricDe 3 жыл бұрын

Are you aware of a similar extension for firefox?

@josepharmstrong5852 4 жыл бұрын

what band is that hard-rock you always have as an outro?

@DesignCourse 4 жыл бұрын

It's from audiojungle.com, I bought it a long time ago, no clue who it was from 😂

@rudrapratapsinha8880 4 жыл бұрын

good video

@basith237 4 жыл бұрын

Nice 👍👍

@easywin775 3 жыл бұрын

@MrFckingninja 4 жыл бұрын

GUYS! What can i use on LINUX UBUNTU as a screen reader? THANKS ! :)

@chrisleighton6289 4 жыл бұрын

Orca

@princebillygrahamkarmoker2122 3 жыл бұрын

Hawkeye from avengers started to make coding tutorial 😂

@robertsakurai 3 жыл бұрын

If you are not yet convinced you should use this here is the answer: The Legal implications for not having an accesible website in some countries are big

@juliohintze595 4 жыл бұрын

Great content! Btw, your outro music kinda doesn't fit with the video, imo lol

@DesignCourse 4 жыл бұрын

I'm a rocker, I can't help it!

@I_Lemaire 3 жыл бұрын

Yeah, Julio. Get punked!

@davidfitcher2953 4 жыл бұрын

What are we doing?

@aniketkambli 4 жыл бұрын

source code?

@ExplodeingchildYAY Жыл бұрын

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

@user-sl6ou3qb9l 4 жыл бұрын

Why are commodities like ordering pizza held to the same tier as disabled parking and wheelchair ramps???

@chrisleighton6289 4 жыл бұрын

because in a quality community people with special needs or who are disabled are allowed to eat. Do you have an argument why pizza should be at a lower quality than wheelchair ramps?

@unknownman5296 2 жыл бұрын

ddf

@rickcode22 Жыл бұрын

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

@meatyt3296 3 жыл бұрын

Wait,, this isn't Minecraft music

@brucearmstrong5536 5 ай бұрын

that thumb nail was dirty

@BhupendraSingh-bj4uf 4 жыл бұрын

n here you look like Tintin

@JohnSmith-zl8rz 4 жыл бұрын

You don't let the voice over talk! everytime that voice over is on, you talk!

@privacyvalued4134 4 жыл бұрын

Yup! He does seem to let it speak separately more freuqently later on in the video. He's probably used to doing all the talking in his videos and is just doing it as a reflex action.