Logo
Logo

Creating Form Fields Without Labels While Maintaining A11Y

Introduction to Hiding Labels in Breakdance Forms for Accessibility

Discover how to hide labels from your form fields in Breakdance without compromising on accessibility, ensuring your website is user-friendly for the widest audience possible, including those using screen readers and keyboard navigation.

Understanding the Importance of Accessibility

Accessibility is about making your website usable for as many people as possible, including those who rely on screen readers or have other specific needs. Properly labeled form fields play a crucial role in this.

Hiding Labels Visually While Maintaining Accessibility

Using Breakdance to Visually Hide Labels

  1. Select your form builder in the Breakdance preview.
  2. Navigate to the design tab in the properties panel and then to the forms section.
  3. Go to ‘Fields’, select a field, then go to ‘Advanced’, and enable the ‘Hide Labels’ toggle. This hides labels visually but keeps them in the HTML for screen readers.

Adding Placeholders as Visual Indicators

  1. Return to the content tab and select each field in the forms section.
  2. In ‘Advanced’ options, ensure there’s a placeholder text that indicates the field’s purpose (e.g., ‘John Smith’ for a name field).
  3. Consider adding instructions or required indicators in the placeholder text, according to your requirements and preferences.

Indicating Required Fields for Sighted Users

  1. Add text like ‘required’ in the placeholder to indicate mandatory fields for sighted users, as screen reader users will automatically be informed of this.

Practical Application of Hidden Labels

  • Apply these techniques to forms where labels are already described elsewhere in the HTML, like in a footer with a horizontal email subscription form.
  • Use a single, clear placeholder without a ‘required’ indicator for forms with only one field, where it’s evident that the field is mandatory.

Conclusion

By visually hiding labels while keeping them accessible in the HTML, Breakdance forms cater to all users, balancing aesthetic design with the practical needs of accessibility.