DEV Community


Discussion on: Accessibility Interview Questions - Part 4

inhuofficial profile image

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 */
Enter fullscreen mode Exit fullscreen mode

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!

hellonehha profile image
Neha Sharma Author

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 :)

inhuofficial profile image

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% 😋

Thread Thread
hellonehha profile image
Neha Sharma Author

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 👌🙏

Forem Open with the Forem app