How to add wai-aria property for file picker?
Question
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>
2 answers
solution1
2 2019-03-05 17:15:47
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
solution2
1 ACCPTED 2021-01-30 17:36:54
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.