HTML & CSS Interview Question #50

What are important HTML accessibility practices a developer should know?

Forms, Validation, Metadata, Media, Responsive Images & Accessibility Mid-Level Intermediate

Quick Interview Answer

Start with semantic HTML and native interactive elements. Provide meaningful document headings, descriptive links, labels for form controls, text alternatives for informative images, table headers for tabular data, and language information for the document.

Detailed Explanation

Start with semantic HTML and native interactive elements. Provide meaningful document headings, descriptive links, labels for form controls, text alternatives for informative images, table headers for tabular data, and language information for the document.

Ensure interactive features work with a keyboard, preserve visible focus, and avoid using div or span as substitutes for buttons and links. ARIA can supplement HTML when native semantics are insufficient, but it should not replace a correct native element.

Accessibility also depends on CSS, JavaScript, content, color contrast, error handling, and testing. Developers should test with keyboard navigation and appropriate accessibility tools rather than assuming that valid markup alone guarantees an accessible experience.

Code Example

<main>
    <h1>Account Settings</h1>

    <form>
        <label for="displayName">
            Display name
        </label>
        <input id="displayName"
               name="displayName">

        <button type="submit">
            Save changes
        </button>
    </form>
</main>