谷歌圖表表格通過鍵盤排序

我試圖在網站上使用Google圖表API，該網站必須符合100％符合第508條的規定，即殘疾人士可以訪問。谷歌圖表表格通過鍵盤排序

谷歌圖表表格具有「排序」功能，但在默認狀態下，鍵盤無法選擇列標題進行排序。

我可以使用一些Javascript輕鬆地將「tabindex = 0」屬性注入到列標題元素中，並且正如所料，這使列標題變得可以集中......但令人驚訝的是，單擊回車鍵卻什麼也不做。同樣的事情發生，如果我在列標題內的排序箭頭焦點 - 我可以使用選項卡專注於它，但我仍然無法選擇它。

有沒有人有解決方案？如果沒有簡單的方法來創建僅使用鍵盤進行排序的表格，是否有將焦點/按鍵轉換爲onclick的解決方法？

來源

2014-07-16 James T

我創建了一個使用jQuery來重畫上一個按鍵圖表小提琴：

http://jsfiddle.net/mVYeL/

下面是相關代碼：

google.load('visualization', '1.1', { 
    'packages': ['table'] 
}); 
google.setOnLoadCallback(drawStuff); 

var table; 
var data; 
var options = {sortAscending:true}; 

function sortTable(col) { 
    if (options.sortColumn == col) { 
     options.sortAscending = !options.sortAscending; 
    } else { 
     options.sortAscending = true; 
    } 
    options.sortColumn = col; 
    table.draw(data, options); 
} 

$(document).keydown(function(e){ 
    if (e.keyCode==49) { sortTable(0); } 
    if (e.keyCode==50) { sortTable(1); } 
    if (e.keyCode==51) { sortTable(2); } 
}); 

function drawStuff() { 
    data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Name'); 
     data.addColumn('number', 'Salary'); 
     data.addColumn('boolean', 'Full Time Employee'); 
     data.addRows([ 
      ['Mike', {v: 10000, f: '$10,000'}, true], 
      ['Jim', {v:8000, f: '$8,000'}, false], 
      ['Alice', {v: 12500, f: '$12,500'}, true], 
      ['Bob', {v: 7000, f: '$7,000'}, true] 
     ]); 

    // Instantiate and draw our chart, passing in some options. 
    table = new google.visualization.Table(document.getElementById('chart_div')); 
    table.draw(data, options); 
};

來源

2014-07-17 15:10:36

這是一個良好的開端。我會建議改變'keydown'聽輸入，找出表和列，設置一個標誌，對列的ASC進行排序。然後你可以取消設置DESC的標誌。此外，大多數輔助技術使用1-6導航H1-H6，所以要麼這不起作用，要麼將焦點移到其他地方 –

Ryan絕對是正確的 - 屏幕閱讀器已經分配了1-3個用戶和用戶將期望使用Enter按鈕來觸發一個焦點元素。儘管如此，傑里米的原始評論給了我一個粗略的草圖來解決這個問題，瑞恩提供了一個很好的路線圖來實現它，所以謝謝你們。一旦我有一個工作片段，我將添加它作爲未來參考的評論。 –

谷歌圖表表格通過鍵盤排序

回答

相關問題