Hide the visually hidden file input from assistive technologies
afercia opened this issue · 0 comments
On a related issue on the WordPress Trac, it was pointed out that the visually hidden input of type=file FileInput is still perceived by assistive technologies e.g. screen readers. See https://core.trac.wordpress.org/ticket/47611
This input is visually hidden (positioned off screen) thus it's meant to be not available to sighted users.
A while ago, it was also made not available to keyboard users by adding a tabindex="-1" attribute to it, see d2e3bfd
However, when using a screen reader this input is still perceived and can be navigated to, for example:
- by using arrow keys (which is the most commonly navigation mechanism used by screen reader users)
- by using one of the several navigation tools screen readers provide, for example: the list of form controls in a page (see screenshot below)
In order to make this input non perceivable by assistive technology users too, it would be great to consider to add an aria-hidden="true" attribute to it. This should be enough to effectively hide it from assistive technologies (pending testing with various browsers / screen readers / other assistive technologies).
Screenshot using Safari + VoiceOver and the list of form controls provided by the VoiceOver "rotor" in WordPress:
Screenshot using Safari + VoiceOver and Control Option Arrow keys to navigate content:
