Discussion on: Accessibility Interview Questions - Part 4

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!