HTML Interview Questions: Semantics and Accessibility

Why this comes up so often

Accessibility has moved from a specialist concern to a baseline expectation, and it is legally required for a growing number of organisations. It is now a standard interview topic even for junior roles.

It is also a topic where vague answers stand out badly. Accessibility is important is not an answer. A div with a click handler is not focusable, so a keyboard user cannot reach it at all is.

Questions only.

Semantic HTML

1. What is semantic HTML and why does it matter? Give four concrete benefits.
2. Two pages look identical, one built from divs and one from semantic elements. What can the second do that the first cannot?
3. Does a class name such as class="navigation" convey anything to a browser? Explain.
4. Name the sectioning elements HTML5 introduced and what each is for.
5. How do you decide between article, section and aside?
6. How many main elements may a page have, and what may it not be nested inside?
7. When is a header element a banner landmark and when is it not?
8. What is the difference between section and div?
9. Is it wrong to use div? When is it the correct choice?
10. What does the time element give you that plain text does not?
11. What is details and summary for, and what does it replace?
12. Why does markup order matter more than visual order?

Accessibility fundamentals

13. What does web accessibility mean, and who benefits?
14. What are the four WCAG principles? Which conformance level is the practical target?
15. Name the most common accessibility failures found on real sites.
16. What is an accessible name, and where does a browser look for one?
17. What is the difference between aria-label and aria-labelledby? When would you use each?
18. What is aria-describedby for, and how does it differ from a label?
19. What is the first rule of ARIA?
20. Does role="button" on a div make it a button? Explain fully.
21. Name three ARIA attributes you have actually used and what each did.
22. Why is incorrect ARIA worse than no ARIA?

Keyboard and focus

23. Which elements are focusable by default?
24. What are the three values of tabindex and when is each appropriate?
25. Why should you never use a positive tabindex?
26. Why is removing the focus outline a problem, and what is the correct approach?
27. What is a skip link and why does its target need tabindex="-1"?
28. Name four ways to hide an element and say which leave it focusable.
29. What is a focus trap? When is one correct and when is it a bug?
30. How would you manage focus after a route change in a single page application?

Practical questions

31. How would you test a page for accessibility? What do automated tools miss?
32. Walk me through making an icon only button accessible.
33. A designer gives you light grey text on white. What do you do?
34. How would you build a modal dialog? What does the native element give you for free?
35. How do you convey an error state without relying on colour?

What a strong answer looks like

These questions are asked to find out whether you have done the work, not whether you have read about it. Three things distinguish a strong answer:

• A specific failure mode. The reader tabs into something invisible beats it is not accessible.
• Something you built. I found this when I tested a filter I had written - the hidden items were still in the tab order.
• A named tool or technique. I check the computed name in the accessibility pane.

If you have never used a screen reader, spend thirty minutes with one before an interview. Being able to say when I tested this with a screen reader and describe what you heard is worth more than any amount of theory.

Practice

1. Answer all thirty five out loud, giving a concrete example for each.
2. Spend thirty minutes navigating a real site with a screen reader and write down three things that surprised you.
3. Take a page you built and find three accessibility problems in it. Those become your interview examples.
4. Explain the first rule of ARIA to someone who does not write code.