How I do an accessibility check -- A11ycasts #11

[@sebapombo]

Congratulations Rob. The video is very clear and precise regarding the importance of implementing good practices when programming web applications. It is also clear how important this is for people with reduced abilities and poor vision.

[@lordpixel895]

Thank for this informative video, a11y is very important, but spreading the word and creating awareness is also important, you are contributing to that goal.

[@isralDuke]

This is great! I did most of this already, but you showed off some things I didn’t know.

[@aaronalex8568]

This series is beautiful!

[@gp8699]

Thanks, Rob! Awesome overview of your testing process.

[@deepaksurendar]

Your tutorials are awesome. Thank you.

[@manuelpineda9067]

Great explanations and information. Thx!

[@heddakortesmaki2532]

Great information sharing. Very clear and current on web accessibility. Thank you.

[@yoshieagata]

Super helpful! Thank you ☺🙏

[@StyledJavaScript]

Thanks Rob, for the useful check-list.

[@racheleditullio7501]

Very good primer. I'll share with our developers!

[@Slimjimb]

Excellent. Thanks.

[@rickschmoo]

Excellent summary. Thank you.

[@HardikDangar]

Thanks, This is awesome list to check accessibility.

[@webaccessibilitytool]

Good efforts

[@TheDestroDevShow]

Nice, Thanks 👍

[@anugrahtripathi8196]

Helpful content :)

[@grahamarmfield8513]

This is a great video Rob, as demystifying accessibility is one of the key ways to open up accessibility knowledge in my view. One point though, when you interact with the size dropdown at 5:20 using the up and down arrow keys, I'm not hearing any feedback from Voiceover. Did the audio get edited out there, or is that actually a problem in that site?

[@Ezinma88]

Yeah. I thought that too.

[@pitchforker3304]

In the video description: "Sidenote: at 5:18, not sure why the video didn't announce the different sizes but I tried again later and it was working. Maybe a VoiceOver quirk. "

[@pitchforker3304]

The browser plugin Tota11y is also very useful

[@ryanreviews8566]

Anyone know a video that teaches mobile ada like this one? That would be really helpful

[@kbtkitchenbeautytech4246]

Yes i can teach u in ios and android

[@randomz6592]

vo is not notifying when u were moving on in the dropdown from small to medium to large to xl is also a bug

[@MyBlindZone]

For the test you might consider turning the sound / voice feedback on. 😋

[@jollymail1]

Love your style of asking to subscribe or look for more content on the channel

[@darshingale3861]

Thanks for this important info. It is awesome. I need your help on how to make a final analysis report in excel to give to the client.

[@megankennedy2718]

Thank you so much for how you audit websites! I'm new to this and wondered about color/contrast for images or icons associated with text. For example, sometimes the social media icons next to the text of facebook, or twitter have really poor contrast. Is this a WCAG error, or is it sufficient if the text has enough contrast? I thought it would be an error in case someone with a cognitive impairment and low vision relies on using those icons. In short, when do you check for the color/contrast of images/icons and when do you ignore them to help companies achieve WCAG 2.0 standards?

[@Garbee]

I don't know any official guidance on this topic. However my best assumption is as long as you are suspecting. As long as the *text* has sufficient contrast it is fine, since that is the most important content. A lot of brands have guidance requirements on how you are allowed to display their logos. Those requirements don't change based on accessibility needs.

[@MyBlindZone]

Megan Kennedy if you low vision, contrast might play an important role. But if you are using a screen reader, the altattribute is very important when using images.

[@kbtkitchenbeautytech4246]

For barand icons and images color cobtrast is exception we won't check

[@saraholiveedwards4697]

I wonder how much control I have over these things on a Six site?

[@saraholiveedwards4697]

*Wix

Awesome, thanks!

[@viktorsvoboda3186]

helpful, sir

[@account1409]

Good one , but can you please help me on this .. I have some doubts, how to test the elements in the web application like Radio group, checkbox group, Menu etc... for example : 1. Assume that you have radio group , how we can test this group like how to move between radio buttons using Tab or arrow keys. 2. Assume that you have Check box group, again same question here , how to test this check box group , do we need to use arrow keys or tab key to move between the checkbox and how we can enable and disable the checkbox. Is there any standards define to test. I am having big confusion here.

[@MyBlindZone]

Account 1 use the x key to move forward between checkboxes and shift x to go back

[@kbtkitchenbeautytech4246]

Use left and riht or up and down arrow keyz based on funcationality. Once screen reader mode off

[@solesole9250]

Rob ai am a designer so from that point of view what do you recommend (causes, articles, general material, etc) to get better at auditing for accessibility? Thanks

[@aslam3161]

Brilliant

[@ryanreviews8566]

Or how you can include AXE audit with automation? Like what tools to use with what?

[@kbtkitchenbeautytech4246]

AXe will through some accessibility issues

[@kesuskim6072]

Thanks for tips :)

[@toma1610]

Do you that the W3C online validation is accurate with accessibility features, or does not detect everything? Thanks a lot.

[@Mustafaismail22]

thank you 😘

[@divakarkatta9060]

Hi Rob, thank you so much for info, Is there any other we need to check for as part of UI testing?

[@MarlonValladares-q5p]

11 pm

[@jMarly19]

I tried using the google chrome extensions shown in this video, but there are deprecated. Anyone know other tools that I can use to validate contrast and other accessibility issues? Thanks

[@A11yBogdan]

Google Chrome developer tools are implementing more and more a11y tools, please check them out. You have contrast ratio check built in for example. The other worthy toolset I use is the Audit part or Lighthouse if you want. Amazing tool, also for performance etc., not just a11y per-se.

[@kbtkitchenbeautytech4246]

If want all accessibllity testing tools extensions ill help u. Wbicb tool u want

[@JohnCostanzo]

On all the pages I visit and I hit ctrl+cmd+u it says that headings is empty. Am I doing something wrong?

[@kbtkitchenbeautytech4246]

Press h to identity heading in page. Or h1 h2 h3 at atime h and 1 keys

[@pramod1586]

any free tool which does the accessibility testing for the entire application and not page by page?

[@karengalloway812]

Thanks!

[@dakichaa]

Hey, is it a normal thing for a pop-up menu not read the available options when navigating with up and down arrow keys?

[@kbtkitchenbeautytech4246]

Can please ask u r doubt with more clarity ill help u

[@Soochoup]

I would argue though that you shouldn't HAVE to go for a skip link. You should design your page in order that you the main content is obvious

[@timolla678]

Soochoup

[@grahamarmfield8513]

You are right of course that skip links aren't mandatory, but they are really helpful for some - and not just for blind users. Screen reader users do have the option of jumping around the page from heading to heading or to specific landmark roles (main), so that's fine. But sighted keyboard only users do not have that option in any of the major browsers - so that's one place where skip links are very useful, and why it's also important to ensure that yopur skip link becomes visible when it gets keyboard focus. It would be useful if browsers did introduce corresponding jump functionality but I don't see much sign of that happening.

[@MyBlindZone]

Soochoup imagine you have to browse past the top content every time. Nain menu, social menu etc. nope that button must stay. 👍🏻

[@ocsicnarf04]

Hi Rob, I'm wondering if these basics stuff are already covered in automated tool like axe? navigating thru tab and screenreader.

[@randomz6592]

also pls Tell me y m not getting this option of accessibility properties in my chrome

[@kbtkitchenbeautytech4246]

For which tool do u want

[@dannagrabert1340]

Hey

[@presspress3219]

𝕐𝔼𝕊.. Am trying