DEV Community

loading...

Accessibility Interview questions

Neha Sharma
UI Engineer ,I love Web,JavaScript, Design System, A11Y, HTML5, CSS3 ,React; Community Advocate and enjoy giving talks and codelabs at the Meetups and conference. I am self-taught calligrapher too.
・2 min read

1. What is the difference between AA and AAA
As per WCAG, there are 3 levels of accessibility - A, AA, and AAA. A is the simplest one. AA is most widely adapted whereas AAA would be the best but AAA is very strict. Many AA rules get stricter at AAA. Eg: color-contrast becomes stricter. Hence, the color contrast which was getting a pass at AA will now fail at AAA.

2. You are building an eCommerce website. The homepage has a full-size banner image - 'Models wearing the branded clothes'. As per you what should be the alt tag?
Answer: This is a decorative image holding information about the website's mood. I would like to add a descriptive alt tag for the screen readers such as - "A female model wearing the red top with blue jeans holding shopping bags. Click on the button to see the offers."

3. Is this accessible or not?
Alt Text

Answer: No, it is not accessible for the screen readers. The label tag is missing. There are different ways to add a label. Below are the 2 approaches:

  • Alt Text

  • Alt Text

4. How you audit accessibility?
Answer: I start the accessibility audit by using tools such as Lighthouse and Axe tool. Once I fix all the issues reported by these tools, I move to the manual testing of the web application especially by not using my keyboard, use screen readers such as voiceover to see how the application is working in the real world.

5. How you will decide when to use button or a tag?
Answer: button is when we want to take an action such as submit the form, open a popup, etc. Whereas, a tag is when we want to redirect the user. On a website shopping cart should be a tag rather than button tag.

Happy Learning!!

Discussion (4)

Collapse
moopet profile image
Ben Sinclair

I would change "A female model wearing the red top with blue jeans holding shopping bags. Click on the button to see the offers."

There's no context from an image as to what button is being mentioned, and if it's text in the image and someone can't see the image they probably don't use "click" as an action anyway!

Collapse
kunalkishoresharma profile image
Kunal K Sharma

Thank you neha,
nice one.

Collapse
hkedia321 profile image
Harshit Kedia

Hello mam, nice article! Also it would help if you could post code snippets instead of screenshots. Thanks!

Collapse
hellonehha profile image
Neha Sharma Author

Hello,

Thank you for the suggestions. Surely from now onwards I will.

Thanks,
Neha