如何將屏幕閱讀器功能添加到 select-2 組合框和引導程序的日期時間選擇器？

Question

我現有的網站有用於下拉列表的 select-2 組合框，我還有一個 Bootstrap 日歷小部件。 這些功能很好，但可能有殘障的人無法使用。 我正在嘗試添加屏幕閱讀器功能，以便網站和這些小部件可能對每個人都有用。

我對嘗試找到解決方案進行了廣泛的研究，通過檢查器添加了 aria-label 代碼，並查看了各種站點上下拉列表和日歷小部件的各種示例。 我想包括我的各個頁面的一些代碼和我的檢查員的屏幕截圖，以防它們提供有用的信息。 如果需要/想要任何其他信息，請告訴我。 預先感謝您抽出時間幫助我。

CSHTML頁面

<div>
    @Html.CustomEditorFor(model => model.HouseDetails.HouseTypeID, CachedTableTypes.CUSTOM_HouseTypes)
</div>
        
<div>
    @Html.CustomEditorFor(model => model.DateStart)
</div>

擴展.cs頁面

public static MvcHtmlString CustomEditorFor<TModel, TValue>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>> expression, CachedTableTypes cacheTableName, object htmlAttributes = null, bool excludeLabel = false, string appendedText = null)
        {
            var selectedValue = GetValue(htmlHelper, expression);

            string editor = SelectExtensions.DropDownListFor(htmlHelper, expression, WebHelper.GetSelectListFromCache(cacheTableName, (string)htmlHelper.ViewData["CurrentCulture"], selectedValue)).ToString();

            return htmlHelper.InputWrapper(editor, expression, htmlAttributes, excludeLabel, appendedText);
        }

日歷檢查器頁面下拉檢查器頁面

Answer 1

通過其 API 將 ARIA 角色和狀態添加到第三方庫不是一個可行的選擇。

API 很少足夠靈活，無法掛接到組件的生命周期中以添加這些高度依賴於狀態的部分。 即使在可能的極少數情況下，它也需要大量代碼，這是一個性能問題，並且會影響維護。

當使用 3rd 方組件庫時，在選擇時未考慮其可訪問性，如我所見，您有兩個選擇。

選項 1：參與圖書館的發展

如果您有預算來改進您使用的來自開源庫（如select2 ）的組件的可訪問性，您應該直接為項目貢獻改進。 是時候回饋開源社區了。

進行屏幕閱讀器測試，在 Github 項目上提交問題，分叉源代碼，進行改進並創建拉取請求。

在 PR 被接受之前，您可以為您的項目使用和維護自己的分支。

選項 2：替換為可訪問的圖書館

根據您的依賴性有多強，您可以用更易於訪問的組件庫替換某些組件庫。

選擇圖書館時，您應該清楚地了解您的質量標准，以便能夠進行比較。