Compatibility:

WebSite X5 Evo and Pro v.2025.1

Forms are one of the most commonly used tools on the web: they allow users to subscribe to newsletters, submit requests, purchase products, and much more. However, if not properly designed, they can become a barrier for people with disabilities, preventing them from completing the desired actions.


Ensuring form accessibility is essential so that all users, including those who use screen readers, navigate with a keyboard, or have visual or cognitive impairments, can interact with your forms without difficulty. Creating accessible forms not only promotes inclusivity but also enhances the overall user experience: clear instructions, immediate feedback, and intuitive navigation make forms simpler and easier to understand for everyone.


In this guide, we will explore the fundamental principles for making a form accessible, focusing on:


Key WCAG Guidelines

The Web Content Accessibility Guidelines (WCAG) provide a set of criteria to make forms accessible to all users, including those with visual, motor, or cognitive disabilities. These criteria ensure that forms can be used both by assistive devices, such as screen readers, and by those who navigate exclusively with the keyboard.


Among the key WCAG requirements for forms, we find:

  • Criterion 1.3.1 - Information and Relationships (Level A)

This criterion requires that the information or relationships visible on a page are preserved even when the content is presented differently, for example, through a screen reader or other assistive navigation tools. In other words, information must be organized semantically and be understandable to all users.

For forms, this means ensuring that each field is correctly associated with its label, so that the relationships between various elements are usable by all users.

  • Criterion 3.3.1 - Error Identification (Level A)

This criterion requires that when a user makes an error while filling out a form, the error must be identified and communicated clearly and understandably. The goal is to ensure that the user is aware of the problem and has the necessary information to resolve it.

  • Criterion 3.3.2 - Labels or Instructions (Level A)

This criterion requires that each form field includes clear labels or instructions to help users understand what is required and how to correctly fill out the field. The objective is to provide appropriate context, reducing the likelihood of errors and making the completion process simple and intuitive for everyone.

  • Criterion 4.1.2 - Name, Role, Value (Level A)

This criterion requires that interactive elements on a webpage, such as form fields, have a clearly defined name, role, and value. This ensures that these elements are understandable not only to users who see them, but also to those using assistive technologies such as screen readers.


Labels and Instructions

The first step in making a form accessible is to correctly manage the labels and instructions related to the fields that compose it. Each field must be accompanied by a clear and visible label that precisely describes what to enter, along with instructions that provide useful context for completion.


For users without visual impairments, the position of the label next to the field is sufficient to understand what it refers to. However, this relationship may be lost for users who rely on assistive technologies, such as screen readers. For this reason, as required by WCAG Success Criterion 1.3.1, labels must be associated with fields not only visually but also in the HTML code. The use of the <label> tag or the aria-labelledby attribute ensures that each label is clearly linked to its corresponding field, significantly improving the experience for those navigating with assistive technologies.


Similarly, instructions must be easily understandable and accessible. It is important to avoid technical language and instead prioritize clarity and simplicity. Additionally, instructions should not rely solely on visual elements such as colors or icons but should include explicit text to ensure readability for users with visual impairments. Placing instructions above a field or group of fields, when necessary, helps clarify what is required, reducing errors and frustration.


Feedback and Error Handling

To help users complete a form without difficulty, it is essential to correctly manage all possible scenarios by providing clear feedback that allows them to understand what is happening and how to proceed. In this sense, error handling must be designed to highlight the problem and provide instructions on how to resolve it, without causing confusion or frustration.


When an error occurs, it is important to visually indicate it next to the affected field with a clear text message, such as “This field is required” or “Please enter a valid email address.” It is equally crucial that errors are communicated at the code level for users who rely on screen readers. This can be achieved using specific attributes such as aria-invalid, which signals the field's status, and aria-describedby, which links the field to the specific error message.


To ensure visual accessibility, it is useful to highlight fields with errors using contrasting colors. However, relying solely on color is not advisable, as some users may have difficulty distinguishing it. It is always best to combine color and text to make the error evident to all users.


Finally, providing positive feedback after successfully completing the form, such as a message saying “Form submitted successfully!”, helps users understand that the action has been completed correctly.


Keyboard Navigation

In addition to working on labels and feedback messages, ensuring that a form is accessible to everyone—including users with motor or visual impairments who do not use a mouse—requires making it fully navigable by keyboard. Keyboard navigation allows users to move between form fields, select options, and submit the form using only keyboard keys.


To ensure effective navigation, fields should follow a logical and predictable order that matches the visual flow of the page. This order is automatically determined by the structure of the HTML code, so it is important to avoid unnecessary modifications using the tabindex attribute. Altering the natural order of fields can create confusion and hinder users, especially those using screen readers.


It is also important that all interactive elements in the form, such as buttons, links, and checkboxes, are keyboard-accessible and can be activated using standard keys. For example:

  • Tab: to move from one field to another.
  • Enter: to activate buttons or select options.
  • Spacebar: to select checkboxes or activate buttons.


#tip - We have covered this topic in more detail in the guide: How to ensure accessible keyboard navigation


Creating an accessible form with WebSite X5

As we have seen, to meet the success criteria suggested by the WCAG and make a form accessible, it is necessary to modify the code by using semantic elements and, in some cases, ARIA attributes (Accessible Rich Internet Applications). This is essential to make forms understandable both for users who rely on assistive technologies and for browsers.


#tip - ARIA is not a programming language, but a set of attributes that can be added to HTML elements to improve the accessibility of web interfaces, particularly for dynamic or interactive states. 


That said, by working with WebSite X5, you can create accessible forms without manually modifying the code. The software automatically generates a semantically correct code, including the necessary HTML elements and ARIA attributes, ensuring a solid foundation for accessibility (see: Accessibility criteria implemented in WebSite X5).


However, the actual accessibility of the form also depends on your choices. WebSite X5 gives you full freedom to customize your website’s pages, so when setting up your contact forms, you should pay attention to aspects such as:

  • Colors and contrasts that must meet readability standards.
  • Label texts and error messages, which should be clear and understandable.
  • Instructions and guidelines, which should guide the user in filling out the form without ambiguity.


By combining correctly generated code from WebSite X5 with your conscious design choices, you will be able to create accessible forms that enhance the experience for all users.


#tip - Learn how to create a contact form: How to work with the Contact Form Object?


Tools to check form accessibility

To ensure that a form is truly accessible, it is essential to test it both with automatic tools, which analyze the code and structure, and with manual tests, which simulate the experience of users with disabilities.


Automated tools help detect common accessibility issues in forms, such as missing labels, contrast problems, or unclear feedback. Here are some of the most useful:


In addition to automated checks, it is important to conduct practical tests to ensure that the form is actually usable for those who rely on assistive tools:

  • Screen reader simulations → Test the form with screen readers such as NVDA (Windows) or VoiceOver (Mac) to verify that labels, error messages, and fields are understandable.
  • Keyboard navigation → Try filling out the form without using a mouse, navigating through fields using the TAB key and selecting buttons/options with Enter/Space.