Search code examples
javascripthtmlwai-ariascreen-readersjaws-screen-reader

ARIA Landmarks not working in textarea / input

When I put role="main" in the textarea element:

<textarea role="main" aria-label="text area"></textarea>

The screen reader (JAWS) not read for me this region when I click on 'r' or 'q' as it should.

When I set the landmarks attributes to the parent div - it's working.

Isn't landmarks supported in inputs?

Solution

  • ARIA roles and aria-* attributes can be applied to HTML elements as long as they don't conflict with the HTML element's strong native semantics. This is by design and the reason is to prevent authors to convey wrong/misleading information to assistive technologies.

    The WAI-ARIA section of HTML 5.1 spec gives the strong native semantics of the textarea element as follows:

    textbox role, with the aria-multiline property set to "true", and the aria-readonly property set to "true" if the element has a readonly attribute

    Applying role="main" on a textarea would conflict with textbox role, therefore it is ignored.