How I do an accessibility check -- A11ycasts #11

Подписаться 753 тыс.

Просмотров 131 тыс.

50% 1

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 RU-vid channel for updates on new episodes of A11ycasts: goo.gl/LLLNvf

Наука

Опубликовано:

29 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 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.

@isralDuke 2 года назад

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

@heddakortesmaki2532 5 лет назад

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

@StyledJavaScript 7 лет назад

Thanks Rob, for the useful check-list.

@rickschmoo 7 лет назад

Excellent summary. Thank you.

@HardikDangar 7 лет назад

Thanks, This is awesome list to check accessibility.

@manuelpineda9067 9 дней назад

Great explanations and information. Thx!

@racheleditullio7501 6 лет назад

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

7 лет назад

Awesome, thanks!

@aslam3161 7 лет назад

Brilliant

@anugrahtripathi8196 2 года назад

Helpful content :)

@kesuskim6072 7 лет назад

Thanks for tips :)

@webaccessibilitytool Год назад

Good efforts

@TheDestroDevShow 3 года назад

Nice, Thanks 👍

@Mustafaismail22 7 лет назад

thank you 😘

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

@karengalloway812 7 лет назад

Thanks!

@viktorsvoboda3186 3 года назад

helpful, sir

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

@jollymail1 4 года назад

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

@MyBlindZone 5 лет назад

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

@ocsicnarf04 4 года назад

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

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

@pitchforker3304 Год назад

The browser plugin Tota11y is also very useful

@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

@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

@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

@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 6 месяцев назад

11 pm

@pramod1586 5 лет назад

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

@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

@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

@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

@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

@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

@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

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