How do you make a form accessible?

What the interviewer wants to hear

• Every input has a visible label linked with for and id
• Use the correct native input types and elements, and group related fields with fieldset and legend
• Show errors in text, link them to fields with aria-describedby and set aria-invalid
• The whole form works with a keyboard and has a logical focus order
• Do not rely on placeholder or colour alone to convey meaning

Model answer

I start with native HTML. Every field gets a visible label connected with for and id, because placeholders disappear when people type and are not reliable labels. I use the right input types such as email, tel and number, which also give mobile users the right keyboard, plus autocomplete attributes so browsers can fill details. Related options like radio buttons go inside a fieldset with a legend. For validation, I show the error as text next to the field, connect it with aria-describedby, set aria-invalid on the input, and on submit I move focus to the first invalid field or an error summary. I never use colour alone to show an error. I make sure everything works with the keyboard, the tab order follows the visual order, and the submit is a real button. Finally I test with a screen reader and with keyboard only, and run an automated check such as axe.

More easy Frontend Developer questions

• Explain the CSS box model. What is the difference between content-box and border-box?
• What is the difference between var, let and const in JavaScript?
• What is semantic HTML and why does it matter?
• In React, what is the difference between props and state?
• How do you make a web page responsive for mobile, tablet and desktop?
• What is the difference between Flexbox and CSS Grid, and when would you use each?
• What is a closure in JavaScript? Give a practical example of where you use one.
• A button on a page does not work when clicked. How would you use browser DevTools to find the problem?
• What is a Promise, and how does async/await relate to it?