DEV Community

Neha Sharma
Neha Sharma

Posted on

Accessibility Interview questions

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

Oldest comments (4)

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

Hello,

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

Thanks,
Neha

Collapse
 
kunalkishoresharma profile image
Kunal K Sharma

Thank you neha,
nice one.

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!