Using the Siteimprove extension v. 126 for Chrome the following HTML snippets are all reporting an issue "Input field has no description 1.3.1"
It seems like no description should be needed as the aria-hidden
attribute should completely remove the element as far as the accessibility API is concerned. Likewise the tabindex=-1
attribute value indicates this element is not intended for interaction nor presentation.
Moreover, the extension reports this as an issue even after adding role="none"
per the following doc, which is the first cross-referenced solution in the tool:
<input aria-hidden="true" tabindex="-1"
class="MuiSelect-nativeInput"
value="SORTING_OPTIONS_ENDDATE"
style="">
<input aria-hidden="true" tabindex="-1"
class="MuiSelect-nativeInput" role="none"
value="SORTING_OPTIONS_ENDDATE"
style="">
Note: this hidden input
element is generated as part of a <Select />
component via Material UI. It's used to hold the selected value
Yes, this is a false positive.
It likely flags this as an issue as it cannot know whether you intend to "unhide" the <select>
in the future, at which point it would be inaccessible due to the lack of label.
You can safely ignore this error as the input is never designed to be accessed so the tabindex
and aria-hidden
states will never change.
One thing I did notice though is they set the opacity
to 0 instead of hiding the input, not entirely sure why that is but it may be the other reason it complains as technically anything with 0 opacity
could still be accessed by some older screen readers that do not honour aria-hidden
. If you could change that to display: none
it would be more robust (this needs to be added by JS as otherwise if you set this in the CSS and the JS fails the whole input would be hidden).