如何為文件選擇器添加 wai-aria 屬性？

Question

我目前正在關注本教程以獲得文件選擇器功能。 http://www.alecjacobson.com/weblog/?p=1645

我想為“選擇文件”部分添加 wai-aria 屬性以使其可讀。 我曾嘗試使用 aria-controls 和 tabindex 但當我模擬一些驗證器時無法得到任何積極的回應..知道嗎？

<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>

Answer 1

我想為“選擇文件”部分添加 wai-aria 屬性以使其可讀

你能解釋一下嗎？

使用原生 html（例如<input type="file"> ）時，您會獲得很多內置的輔助功能。瀏覽器知道如何通過輔助功能 API 顯示原生 html 元素，從而允許屏幕閱讀器正確地讀出名稱、角色和元素的值。 所以默認情況下它將是“可讀的”。

但是，如果您正在談論進度指示器並希望在文件加載時傳達文件上傳的進度，則必須使用aria-live來做到這一點。 帶有 ARIA Live Regions 的 Progress Bar有一個很好的例子

Answer 2

現代瀏覽器將input控件的file類型識別為幾種不同的“類型”（標簽、輸入或通用對象）之一，並帶有一個按鈕作為附加的偽元素。 但出於可訪問性目的，我認為將其標識為屏幕閱讀器的按鈕是安全的，因為它是交互式使用的。

因此，我會將以下WAI-ARIA屬性添加到您的input控件file類型中：

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

如果您的屏幕閱讀器社區對此感到困惑，那么“role=textbox”將是我的第二個選擇。

如何為文件選擇器添加 wai-aria 屬性？

問題描述

2 個解決方案

解決方案1
2 2019-03-05 17:15:47

解決方案2
1 已采納 2021-01-30 17:36:54

如何為文件選擇器添加 wai-aria 屬性？

問題描述

2 個解決方案

解決方案1 2 2019-03-05 17:15:47

解決方案2 1 已采納 2021-01-30 17:36:54

解決方案1
2 2019-03-05 17:15:47

解決方案2
1 已采納 2021-01-30 17:36:54