Skip to content

Hide the visually hidden file input from assistive technologies #185

@afercia

Description

@afercia

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 2019-12-11 at 10 17 54

Screenshot using Safari + VoiceOver and Control Option Arrow keys to navigate content:

Screenshot 2019-12-11 at 10 29 30

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