AJAX和輔助功能：活動元素上的焦點或制表符索引

Question

我目前正在開發一個必須可訪問的AJAX應用程序（WGAG 2.0，AA）。

我正在使用屏幕閱讀器測試我的應用程序（目前，在Mac Os X上使用Voice Over）。

導航由一系列按鈕組成。 當用戶單擊按鈕時，javascript檢查內容是否已添加到頁面中，如果沒有，則執行AJAX調用，向頁面添加新div，隱藏以前的元素並顯示新內容，哪個工作正常。

我的問題是我希望用戶在按下按鈕時直接轉到內容，這樣人就可以直接讀取內容而不是將光標留在按鈕上（所以現在，當客戶端按下按鈕時，光標停留在按鈕上，而不是讀取已加載的內容）。

我試過了：

$(id).attr("tabindex",-1).focus();

和

$(id).focus();

其中id是包含id值的變量（使用右選擇器'＃'）。

它不能很好地工作，我認為這是因為在第二次單擊按鈕時，兩個元素的tabindex設置為-1，但我不確定。

我想知道是否有人知道我應該使用哪種方法？

更新**

在我需要該功能的同一頁面（AJAX應用程序）中有2個位置，第一部分是將tabindex設置為-1的小部件可以正常工作：

地點我

HTML

<div id="audience-list" class="with-shadow">
    <div id="group-links">
        <div id="confirm-dialog" class="toolBar">
            <button id="cancelBtn">
                Cancel
            </button>
            <button value="group-1" class="highlighted" id="confirmBtn">
                Confirm
            </button>
        </div>
        <div class="d4p-no-ajax group-link selected">
            <div class="span-4 prepend-top">
                <div class="box square with-outset with-large-radius">
                    <div id="apuo" role="button" class="choose-group-button">
                        <h2>My group</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

javascript（從我昨天學到的東西，我應該用on替換點擊功能，會做到這一點，但現在這個工作正常）。 當用戶點擊按鈕時，他被發送到保持按鈕取消和確認的div。 這很好用！

$(".choose-group-button").click(function(e){

    $('#confirm-dialog').addClass('enabled').attr("tabindex",-1).focus();

});

PLACE II，只是不工作

HTML：我嘗試了不同的方案，鏈接和按鈕沒有更多的機會。 當您單擊鏈接或按鈕時，您應該tabindex到href中引用的div（這里是dom內容，修改了錨點#avantages - >＃/ avantages已被修改）或者ID為div的div-容器

<div>

    <div id="ico-avantages" class="box box-ico square">
        <span class="ico"></span>
        <a id="d4p-link15" href="#/avantages">
            Avantages sociaux 
        </a>
    </div>

    ...

    <div class="clear">
    </div>
</div>
<div id="content-container">
    <div id="avantages">
    ...
    </div>
    ...
</div>

JAVASCRIPT

$('.box-ico a').each(function(){
    $(this).click(function(){
        $('#content-container').attr('tabindex', -1).focus();     
    });
});

tabindex設置為-1，屏幕滾動到div，但是在這種情況下屏幕閱讀器保持在鏈接級別，而在同一頁面上的位置1，它工作得很好。 我現在想知道是否有一些更具體的條件必須適用於div以獲得焦點。

Answer 1

Tabindex 0和-1具有與正整數不同的行為。 Snook關於tabindex的帖子可能有所幫助。 頁面上的多個元素可以包含tabindex="-1" 。 我不是<buttons>的專家，但通常它們用於表單提交和導航，因此我的第一個建議是將按鈕設置為普通鏈接。

<a href="#myID">Jump to Section name</a>
...
<div id="myID" tabindex="-1">
...
</div>

你可能需要做另一個技巧

<a href="#myID">Jump to Section name</a>
...
<div>
 <a name="myID" id="myID" tabindex="-1"></a>
...
</div>