自我禁用按鈕，輔助功能

有沒有辦法在自我禁用按鈕中不讀取'不可用'或'變暗'？自我禁用按鈕，輔助功能

見的例子Example

var saveBtn = document.getElementById("saveBtn"); 
var helper = document.getElementById("helper"); 
var content = document.getElementById("content"); 
saveBtn.onclick = function(e) { 
    saveBtn.setAttribute("disabled", "disabled"); 
    saveBtn.setAttribute("aria-disabled", true); 
    content.innerHTML = 'Lorem input a lot of stuffs'; 
    helper.innerHTML = "Content added, please read it"; 
    setTimeout(function(){ 
    helper.innerHTML = ""; 
    saveBtn.removeAttribute("disabled"); 
    saveBtn.setAttribute("aria-disabled", false); 
    }, 5000); 
};

語音只是說： '內容補充，請閱讀'
NVDA說：「內容補充，請閱讀。 不可用'

我知道這是因爲按鈕仍然有焦點。但是，我需要找到一個解決方案，因爲我無法修改我的頁面的當前行爲。

我使用html助手來通知轉換，你可以看到https://stackoverflow.com/a/38137593/3438124。

對不起，難看的代碼，這只是爲了模擬我的真實行爲。

謝謝你們！

來源

2016-08-30 Cesar Santos

有完整的例子：https://jsfiddle.net/yz29fxnv/5/ –

您需要將焦點移至新元素。給它tabindex=0然後用focus()。

aria-live適用於當您希望屏幕閱讀器講述內容區域的變化時使用aria-live屬性。既然你在兄弟分區上使用它，你就錯過了做它的機會。或者，您可以跳過tabindex/focus()方法，只需將aria-live放在容器中以供新內容使用。

此外，你可以溝aria-disabled，只是依靠disabled爲按鈕。 aria-disabled適用於不支持disabled的元素。

來源

2016-09-01 01:37:43 aardrian

嗨@aardian，謝謝你的回答。我更新了我的'jsfiddle'示例以在父容器中添加'aria-live'，但結果是相同的。 NVDA寫道：「這是我的另一個大部分。不可用」。請看看我的更新示例：https：//jsfiddle.net/yz29fxnv/6/ –

您沒有將焦點移到新元素上，所以焦點停留在'

當你說「我知道它發生是因爲按鈕仍然有焦點」，然後阿德里安先生說他「你需要將焦點移到新元素」時，你明確地指出了它。

請記住，焦點是否停留在禁用的對象上完全取決於用戶代理（瀏覽器）。一些瀏覽器將焦點留在禁用的對象上，其他瀏覽器將其移動到父項。

aardrian關於使用tabindex的評論是，如果您想將焦點移動到通常不可對焦的對象（即，如果它是您通常無法選擇的元素）。所以如果你想把焦點轉移到一些簡單的文本（只是爲了讓它離開按鈕），那麼我會調整aardrian的建議，並使用tabindex='-1'而不是tabindex='0'。這將允許你在該元素上調用focus（），但不允許用戶TAB。

如果你想將焦點移動到頁面上的另一個按鈕，或其他可以自然獲得焦點的元素（複選框，輸入字段等），那麼你不需要tabindex。

如果您最終將焦點移動到剛剛添加的文本中，那麼您並不需要aria-live，因爲屏幕閱讀器將讀取您剛纔關注的文本。但這只是相對於你發佈的例子而言的，我知道這只是一個示例來展示問題。您的真實應用可能不會添加文本。

而且我想第二次阿德里安人的建議而不是設置aria-disabled當您已經使用disabled屬性。這是多餘的。 aria-disabled屬性用於模擬禁用的對象。

來源

2016-09-06 12:39:37 slugolicious

我同意你們兩個。我感謝您的意見和建議。但我真正的問題是爲什麼配音不讀取'不可用'？哪一個是錯的？ –

在這種情況下，「錯」是一個主觀詞。用戶代理決定如何處理自我禁用的對象。你必須與蘋果討論這個問題，看看他們爲什麼選擇按照他們的方式來實現它。 – slugolicious

閱讀文本的方式因閱讀器而異。沒有是對還是錯。如果您希望讀取的文本在讀者中保持一致且一致，請稍微解決。將aria-label =「所需文字」添加到您的按鈕中。這將覆蓋按鈕標籤內存在的任何內容。

例如

<button aria-label="desired text button">This text will be ignored</button>

NVDA將讀取按鈕「期望文本按鈕」。按鈕內的文本被忽略。現在你可以使用JS處理（添加/刪除）disabled和aria-label屬性。

在你的問題的情況下，你可以嘗試：

相反的：

helper.innerHTML = "Content added, please read it";

嘗試使用：

saveBtn.setAttribute("aria-label", "Content added, please read it."); 
setTimeout(function(){ 
saveBtn.removeAttribute("aria-label");}, 5000);

然後文本將橫跨讀者一樣。

來源

2016-09-07 06:54:44 UIPassion

自我禁用按鈕，輔助功能

回答

相關問題