Skip to content

Accessibility: fails when Label for an input field is hidden #6268

@adventmedia

Description

@adventmedia

Describe the bug
Input components with Hide Label (Text Field, Text Area etc.) fail accessibility tests as the related element is not rendered.

Version/Branch
@fomio/js: 5.2.2
@formio/react: 6.1.0

To Reproduce
Steps to reproduce the behavior:

  1. Create form
  2. Add input components — any that have "Hide Label" option
  3. View form and run accessibility evaluation (tested with Evince.com)

Accessibility scan flags these components as missing "Accessible name"

Suggested solution: if the "Hide Label" option is enabled, apply the label text to an "aria-label" attribute of the input component.

Similar problems observed with Radio, Checkbox and Select input components

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions