How I do an accessibility check -- A11ycasts #11

Рет қаралды 131,359

Күн бұрын

Today on A11ycasts I want to give a brief look into the process I use when I'm checking a site for accessibility. This is by no means an exhaustive audit that I'm doing here, but instead a set of quick checks that you can use to highlight any big problem areas. I've found that most sites tend to have issues with at least a few of these checks, and it only takes a few minutes to do it so it's totally worth it for the improved user experience!
Some of the things I look for are:
- Does the tab order make sense and can I reach all controls on the page?
- Is there a clear focus indicator for interactive controls?
- Are there any offscreen elements which should not be focusable?
- Can I traverse the page with a screen reader without getting stuck?
- Is there appropriate alt text on images?
- Do custom controls work with a screen reader?
- Is the user alerted to new content added to the page?
- Are there appropriate headings?
- What about landmark elements?
- Is text high contrast enough to be legible?
And here are some of the tools I like to use:
- Chrome aXe extension: goo.gl/67Bm24
- Chrome accessibility devtools extension: goo.gl/DvAxi2
- aXe-core: github.com/dequelabs/axe-core
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.
Watch all A11ycasts episodes: goo.gl/06qEUW
Subscribe to the Chrome Developers KZfaq channel for updates on new episodes of A11ycasts: goo.gl/LLLNvf

Пікірлер: 68

@sebapombo 4 жыл бұрын

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.

@gp8699 6 жыл бұрын

Thanks, Rob! Awesome overview of your testing process.

@aaronalex8568 4 жыл бұрын

This series is beautiful!

@deepaksurendar 5 жыл бұрын

Your tutorials are awesome. Thank you.

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

@heddakortesmaki2532 5 жыл бұрын

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

@isralDuke 2 жыл бұрын

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

@StyledJavaScript 7 жыл бұрын

Thanks Rob, for the useful check-list.

@rickschmoo 7 жыл бұрын

Excellent summary. Thank you.

@manuelpineda9067 20 күн бұрын

Great explanations and information. Thx!

@HardikDangar 7 жыл бұрын

Thanks, This is awesome list to check accessibility.

@racheleditullio7501 6 жыл бұрын

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

7 жыл бұрын

Awesome, thanks!

@kesuskim6072 7 жыл бұрын

Thanks for tips :)

@anugrahtripathi8196 2 жыл бұрын

Helpful content :)

@aslam3161 7 жыл бұрын

Brilliant

@TheDestroDevShow 3 жыл бұрын

Nice, Thanks 👍

@grahamarmfield8513 7 жыл бұрын

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 <a href="#" class="seekto" data-time="320">5:20</a> 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. "

@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

@toma1610 4 жыл бұрын

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

@Mustafaismail22 7 жыл бұрын

thank you 😘

@ocsicnarf04 4 жыл бұрын

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

@webaccessibilitytool Жыл бұрын

Good efforts

@darshingale3861 4 жыл бұрын

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.

@karengalloway812 7 жыл бұрын

Thanks!

@jollymail1 4 жыл бұрын

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

@pramod1586 5 жыл бұрын

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

@viktorsvoboda3186 3 жыл бұрын

helpful, sir

@ryanreviews8566 4 жыл бұрын

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

@kbtkitchenbeautytech4246 4 жыл бұрын

Yes i can teach u in ios and android

@megankennedy2718 7 жыл бұрын

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 6 жыл бұрын

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 5 жыл бұрын

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 4 жыл бұрын

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

@MyBlindZone 5 жыл бұрын

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

@dakichaa 7 жыл бұрын

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 4 жыл бұрын

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

@divakarkatta9060 3 жыл бұрын

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

@user-sm4mx7ou4n 7 ай бұрын

11 pm

@pitchforker3304 Жыл бұрын

The browser plugin Tota11y is also very useful

@ryanreviews8566 4 жыл бұрын

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

@kbtkitchenbeautytech4246 4 жыл бұрын

AXe will through some accessibility issues

@JohnCostanzo 4 жыл бұрын

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

@kbtkitchenbeautytech4246 4 жыл бұрын

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

@randomz6592 5 жыл бұрын

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

@account1409 6 жыл бұрын

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 5 жыл бұрын

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

@kbtkitchenbeautytech4246 4 жыл бұрын

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

@jMarly19 4 жыл бұрын

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 4 жыл бұрын

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 4 жыл бұрын

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

@saraholiveedwards4697 3 жыл бұрын

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

@saraholiveedwards4697 3 жыл бұрын

*Wix

@randomz6592 5 жыл бұрын

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

@kbtkitchenbeautytech4246 4 жыл бұрын

For which tool do u want

@Soochoup 7 жыл бұрын

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 7 жыл бұрын

Soochoup

@grahamarmfield8513 7 жыл бұрын

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 5 жыл бұрын

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