Neha Sharma

Posted on Mar 24, 2021

Accessibility Interview Questions - Part 4

#webaccessibility #a11y #webdev

You can read part 1, 2, and 3 here:

Part 1

Part 2

Part 3

21: Besides hover, name other states an actionable element (links, buttons, form controls, etc.) could have styles for, and why providing them is important?

For links visited style as this will help non-visual users to understand which link is already visited and for visual users 'focus'.

For form controls style for required or not required, error and success are important. (Do take care that color should not be the only indicator of showing error and success). This is important because it will help the folks(non-visual) to know the required fields for visual users you need to add the aria tags for the same.

22: Why use semantic tags for a webpage?

Semantic tags are very important for the webpages. Semantic tags are helpful for the screen readers as screen readers will identify the right tag and speak aloud to the users. Otherwise, screen readers won't be able to identify the non-semantic tags and as a result, folks won't be able to visit sites via screen readers.

23: If a form or form field were to return an error message, where might you want those error messages to be located?

Ideally, all the error messages should be grouped in one place and at the top of the form.

24: Why is color alone insufficient to draw attention to actionable elements, or to convey state?

A lot of around the world have color blindness problems. In addition to color blindness, there are many color-related problems folks have. In such a case, any information based only on color will be missed out or not be accessible for these folks.

Eg: if you are showing error stages only by red color and not using the text to inform the users then this is the wrong approach and non-accessible.

25: Give 1 example of moving from AA to AAA

1 examples if one need to upgrade from AA to AAA:

As per WCAG AA is the minimum level to achieve accessibility and AAA when building federal web apps. In AAA, the guidelines are stricter. Eg:

1) Color Contrast
In AA, a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
In AAA, a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

26: Describe appropriate instances to use a link, vs a generic button, vs a submit button.

Most of the developers have confused about when to use which. As a result, this impacts accessibility.

Link	Button	Submit Button
When we want the user to navigate from one page to another.	To take some action. Eg: opening a dialog, closing a pop-up	To submit the form or to do server-side submission of data

27: Explain the Accessibility testing?

Accessibility should be a mix of manual and automated testing with the team effort. Automated testing can be plugins, tools, npm, or test-cases. Whereas, manual testing involves testing by AT.

Accessibility testing should be done at:

1) UX designing
While designing UX designers need to test for the accessible color, font-size, modules, focus style etc.

2) After Development
After doing the development, developers should do the manual and automation testing to see the accessibility issues.

3) After every bug fix
Step #2 should be repeated after every bug fix.

28: Is zooming is related to accessibility?

Yes, zooming is related to accessibility. There are many disabilities related to vision. Where people have the problem in seeing. One of them is where they are not 100% blind. Hence, they zoom in to read the content. As per WCAG, we should support 400% zooming.

In addition to the above for aging people hard to read is one of the common problems. Hence, it is important to support them by providing zooming support.

29: What are the top 5 things you to check-in UX (designs shared by the designers) for accessibility?

1) Color Contrast

2) Font-size

3) Responsive and different devices

4) Focus style

5) Accessible modules such as tab, carousels, pop-up, etc.

30: What would be the impact of CSS positions on accessibility?

CSS Positions such as absolute, relative, are not accessibility friendly. Anything section moved from its actual position on the screen by using position will not be picked by keyboard.

Happy Learning!!

Top comments (5)

GrahamTheDev • Mar 24 '21

Ah Neha, you passed with an A or an A+ up until this one, but you made a few mistakes here! You get a B 🤣

Seriously though, couple of things just to clarify so you nail it all (as you are doing great).

21: I think this was a mistake but styles help visual users not non-visual users. For clarity styles help sighted and partially sighted users, blind users do not gain any benefit from styles.

If this were an interview question you somehow missed the most obvious one, :focus indicator styling! Make it easy on yourself!

25: Your second example for moving from AA to AAA is incorrect. Video captions are a level A requirement (for pre-recorded, AA for live events).

Maybe you could do Audio Description AA to Extended Audio Description AAA for this answer?

The only other one that I can think of is Error prevention (Legal Financial and Data) at AA moving up to Error Prevention (All) AAA perhaps?

Personally I think the question is flawed as other than colour contrast the links between the AA and AAA level requirements are weak.

29: alt attributes is number one! As I said before make life easy for yourself 🤣

Semantic elements (as you mentioned earlier) would be number 2 (or aria equivalents).

30: Not entirely true, position: absolute is used within visually hidden text (sr-only text) all the time.

As long as it is positioned on the visible screen it will get announced in 99% of screen reader and browser combinations.

However some older screen readers (older versions of VoiceOver on Safari) will read things in an incorrect order if you use absolute positioning and change the position of the text with margin:. This is why I always recommend the following screen reader only text class as so far nobody has found an issue with it:

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

The main one to look out for is position: fixed as that tends to be placed out of order in the document flow by a lot of developers (it is more of a source order problem than a use of the CSS itself).

Other than that great answers once again, keep going!

Neha Sharma • Mar 24 '21

I am loving all the feedback from you :)

Let me go through all the points and rectify the blog.

I will make sure next time I will get A+ from you :)

GrahamTheDev • Mar 24 '21

Haha - was only a joke, the answers you gave showed a very good breadth of knowledge, I just want you to get that last 5% 😋

Neha Sharma • Mar 24 '21

So, I went back to the feedback and :

21: Is about non-visual only. But I added the 'focus'.

25: Thank you for this. I have updated the answer with only color contrast.

29: My question was not clear. It is about hand-off between designers and developers. Hence, I didn't add the alt tags. But I updated the question.

30: What about keyboards support if we use the position (absolute or relative)

Thank you again for your valuable feedback 👌🙏

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

DEV Community

Accessibility Interview Questions - Part 4

21: Besides hover, name other states an actionable element (links, buttons, form controls, etc.) could have styles for, and why providing them is important?

22: Why use semantic tags for a webpage?

23: If a form or form field were to return an error message, where might you want those error messages to be located?

24: Why is color alone insufficient to draw attention to actionable elements, or to convey state?

25: Give 1 example of moving from AA to AAA

26: Describe appropriate instances to use a link, vs a generic button, vs a submit button.

27: Explain the Accessibility testing?

28: Is zooming is related to accessibility?

29: What are the top 5 things you to check-in UX (designs shared by the designers) for accessibility?

30: What would be the impact of CSS positions on accessibility?

Top comments (5)

I made an AI Website Builder that generates websites from a single prompt ⚡️

Subscribe form using HTML and CSS

Mastering DSA with Pen and Paper: Unplug and Think Like a Problem-Solver

Storing images for your UGC app using Spring Boot and iDrive E2 S3

21: Besides hover, name other states an actionable element (links, buttons, form controls, etc.) could have styles for, and why providing them is important?

22: Why use semantic tags for a webpage?

23: If a form or form field were to return an error message, where might you want those error messages to be located?

24: Why is color alone insufficient to draw attention to actionable elements, or to convey state?

25: Give 1 example of moving from AA to AAA

26: Describe appropriate instances to use a link, vs a generic button, vs a submit button.

27: Explain the Accessibility testing?

28: Is zooming is related to accessibility?

29: What are the top 5 things you to check-in UX (designs shared by the designers) for accessibility?

30: What would be the impact of CSS positions on accessibility?

Read next

I made an AI Website Builder that generates websites from a single prompt ⚡️

Subscribe form using HTML and CSS

Mastering DSA with Pen and Paper: Unplug and Think Like a Problem-Solver

Storing images for your UGC app using Spring Boot and iDrive E2 S3