'How to add wai-aria property for file picker?

I am currently following this tutorial to have a file picker functionality. http://www.alecjacobson.com/weblog/?p=1645

I would like to add wai-aria attribute for "choose file" part to make it readable. I have tried to use aria-controls and tabindex but couldnt get any positive response when i simulate some validators.. Any idea?

<body>
    <input id="file" type="file" multiple onchange="startRead()">
    <h3>Progress:</h3>
    <div style="width:100%;height:20px;border:1px solid black;">
    <div id="bar" style="background-color:#45F;width:0px;height:20px;"></div>
    </div>
    <h3>File contents:</h3>
    <pre>
        <code id="output">
        </code>
    </pre>
</body>

javascripthtmlwai-ariafilepicker


Solution 1:[1]

Modern browsers identify the file type of input control as one of several different "types" (Label, Input, or a Generic Object) with a button as a pseudo-element attached. But for accessibility purposes I think it is safe to identify it as a button to screen readers as that is interactively how it is used.

So, I would add the following WAI-ARIA attributes to your file type of input controls:

    <input id="fileupload" type="file" role="button" aria-label="File Upload" />

If your screen reader community gets confused by that then "role=textbox" would be my second option.

Solution 2:[2]

I would like to add wai-aria attribute for "choose file" part to make it readable

Can you explain a little more about that?

When using native html (such as <input type="file">), you get a lot of accessibility built in. The browser knows how to surface native html elements through the accessibility API, thus allowing a screen reader to correctly announce the name, role, and value of the element. So it will be "readable" by default.

However, if you are talking about the progress indicator and want the progress of the file upload conveyed as the file is loading, you would have to do that with aria-live. There's a good example on Progress Bar with ARIA Live Regions

Solution 3:[3]

This worked for me, I'm not positive if it's 100% ARIA compliant since the screenreader will use a button in place of the file input. But, based on my testing, this works for both Mac's VoiceOver, and tab navigation.

<label
  tabindex="0"
  for="fileupload"
  role="button"
  onkeyup="if (event.keyCode === 13 || event.keyCode === 32) { this.click(); }"
  >
  Upload an Image
</label>
<input
  name="inputname"
  type="file"
  id="fileupload"
  accept="image/jpeg, image/png, image/gif"
  aria-hidden="true"
  tabindex="-1"
  />

Explanation

tabindex="0" Labels are not normally focusable by tab, this makes it tab-focusable.

role="button" Inform the screenreader to treat this label like a button. Label still works without role, but with role the screenreader can tell the user how to interact with the button.

for="fileupload" This is where the magic happens. If you tab to the button (label) and hit enter, or do the same in a screenreader, for sends that event over to the file input element.

onkeyup This is a convenience thing for tab navigation. By default pressing enter (13) or space (32) will not do anything.

aria-hidden="true" By default, screenreaders will try to focus both the label and the input, which is redundant for the user. Tell the screenreader to ignore the input. Why do this? It makes it easier to add CSS focus states to the label when the screenreader is focusing it. (vs the screenreader focusing the file input, and trying to update the label styling based on the focus state of another element)

tabindex="-1" Tell tab navigation to ignore the <input> as well.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Stokely
Solution 2 slugolicious
Solution 3

Related Questions