CODEWITHSUNDEEP
htmlaccessibilitywai-aria
ehdv
ehdv

Reputation: 4593

Using aria-invalid on divs representing input

I am working on a site which asks users to upload items for validation. I would like to make the output of this upload accessible, but I am unclear whether or not it is acceptable to set aria-invalid on a div when the div represents user input (as opposed to only being valid on input elements).

Upvotes: 0

Views: 1932

Answers (1)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201896

Yes, it is correct to use aria-invalid for an element that contains user input if the value of that element has been or will be checked for correctness. The value of the attribute, as defined in the ARIA spec, should then be set according to the result of the check, specifically aria-invalid=true if the test fails.

The use of this attribute is not limited to form fields. In fact, in them, it is often unnecessary at least in principle if HTML5 checks are performed, since assistive software can have access to its results (though this does not necessarily happen), whereas checks performed with client-side JavaScript only are invisible to assistive software unless you signal their results with ARIA attributes.

A typical scenario is that a div element has the contenteditable=true attribute and it acts as an advanced user input area, with some checks on its content.

If the div element merely echoes user input (e.g., user input has been taken via a normal form and a server-side form handler has checked it and sent back a page containing error messages and some copies of user input), then it’s somewhat debatable. It seems that this is a case where ARIA attributes are not meant to be used. Instead, the error messages should clearly indicate the errors and relate them to the user input. There is then no need for aria-invalid—unless the div element is user-editable and thus acts as an input area, too.

Upvotes: 1

Related Questions