How do you make your forms and interactive elements more accessible and inclusive?

1 Use semantic HTML

Semantic HTML is the use of HTML elements that have a specific meaning and purpose, rather than relying on generic elements like <div> or <span>. Semantic HTML helps screen readers, assistive technologies, and search engines understand the structure and meaning of your web content. For example, use <form> for forms, <label> for labels, <input> for inputs, <button> for buttons, <fieldset> for groups of related inputs, and <legend> for captions. Semantic HTML also helps you style your elements more easily and consistently with CSS.

2 Provide clear and concise labels

Labels are the text that describe the purpose and function of your form fields and interactive elements. Labels help users know what information or action is expected from them, and how to fill out or use your elements correctly. Labels should be clear, concise, and visible to all users, regardless of their screen size, device, or assistive technology. Use the <label> element to associate labels with form fields, and use the for attribute to link the label to the id of the input. Use the <aria-label> or <aria-labelledby> attributes to provide labels for elements that do not have a visible text label, such as icons, images, or buttons.

3 Add helpful instructions and feedback

Instructions and feedback are the additional text or visual cues that help users understand how to complete or interact with your forms and elements. Instructions and feedback can include hints, tips, examples, placeholders, error messages, success messages, progress indicators, or validation indicators. Instructions and feedback should be relevant, timely, and informative, without being overwhelming or distracting. Use the <placeholder> attribute to provide a brief example of the expected input format or value. Use the <aria-describedby> attribute to link instructions or feedback to the relevant element. Use the <aria-invalid> and <aria-required> attributes to indicate invalid or required inputs. Use the <aria-live> attribute to announce dynamic changes or updates to the content.

4 Ensure sufficient contrast and focus

Contrast and focus are the visual aspects that help users distinguish and locate your forms and elements on the web page. Contrast is the difference in color or brightness between the foreground and the background of your elements. Focus is the indication of which element is currently active or selected by the user. Contrast and focus should be sufficient and consistent, so that users can easily see and interact with your elements, regardless of their vision, lighting, or device settings. Use the WCAG 2.1 guidelines to check the contrast ratio of your colors. Use the CSS :focus pseudo-class to style the focus state of your elements. Use the <tabindex> attribute to control the order and accessibility of your elements with the keyboard.

5 Offer multiple ways of interaction

Interaction is the way users communicate with your forms and elements, such as clicking, typing, tapping, swiping, or speaking. Interaction should be flexible and adaptable, so that users can choose the method that suits their preferences, abilities, or devices. Offer multiple ways of interaction for your forms and elements, such as mouse, keyboard, touch, voice, or gesture. Use the <input> element with different types and attributes to create various kinds of inputs, such as text, number, date, checkbox, radio, range, or file. Use the <button> element with different values and attributes to create different kinds of buttons, such as submit, reset, or toggle. Use the <select> element with the <option> or <optgroup> elements to create dropdown menus or lists. Use the <audio>, <video>, or <iframe> elements with the <source> or <track> elements to embed media or external content. Use the ARIA roles and attributes to define the role and state of your elements, such as role="button", role="slider", aria-expanded="true", or aria-pressed="false".

6 Test and evaluate your accessibility

Testing and evaluation are the processes of checking and improving the accessibility and usability of your forms and elements. Testing and evaluation should be done throughout the web design process, not just at the end, to identify and fix any issues or errors that may affect your users' experience. Test and evaluate your accessibility using different tools and methods, such as automated tools, manual testing, user testing, or accessibility audits. Use automated tools, such as Lighthouse, axe, or WAVE, to scan your web page and generate reports on accessibility issues or suggestions. Use manual testing, such as keyboard navigation, zooming, resizing, or disabling styles or scripts, to simulate different user scenarios and interactions. Use user testing, such as surveys, interviews, or observations, to collect feedback and insights from real users with different abilities, devices, or contexts. Use accessibility audits, such as WCAG 2.1, Section 508, or ADA, to measure and verify your compliance with accessibility standards and guidelines.

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?