Skip to content

How to add wai-aria property for file picker?

I am currently following this tutorial to have a file picker functionality.

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?

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



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.

User contributions licensed under: CC BY-SA
4 People found this is helpful