2013-11-22 30 views
1

我需要修改一個網站,以使屏幕閱讀器的用戶更易於訪問。我遇到的最大問題是我們在表格中顯示的數據。說表是這樣的:使屏幕閱讀器可以訪問數據表

A | B | C 
--------- 
1 | 2 | 3 
4 | 5 | 6 

你希望它被解讀爲 「A1,B2,C3,A4,B5,C6」。相反,我下載的免費閱讀器(迅雷)會將其讀爲「A,B,C,1,2,3,4,5,6」,這對於實際試圖瞭解所提供信息的人沒有意義。

是否有任何標記可以使屏幕閱讀器正確地讀取表格? Web開發人員應該在這裏做什麼?

+0

發現此問題:http://www.freedomscientific.com/Training/CommonHTMLAttributes.asp – Drahcir

+0

您應該在您的問題中包含HTML。你想使用哪個版本的HTML? – unor

回答

1

我在表格中看到的第一件事是它的標題單元格,然後是與這些標題單元格相關的值。如果我是盲人,我可能還需要先聽取/盲文閱讀這些標題單元格的內容。
儘管如此,在一張長長的桌子裏,我可以很容易地忘記哪個列與什麼有關(是Age列的第三還是第四個?),所以這個機制可以告訴/提醒我 - 對於任何數據單元格 - 哪個標題單元格s)與它相關將是有用的。
作爲一個有見識的用戶,我只需要查看或離開。如果我是盲人,我會依靠屏幕閱讀器來做到這一點:用你的例子,我可以聽到「A,B,C,A1,B2,C3,A4,B5,C6」或「A, B,C,1,2,3,4,5,6「取決於我的喜好(」這是我第一次訪問這個網站,或者我是一個普通用戶,知道如何構建其網頁和內容,不希望/需要太多冗長「)

屏幕閱讀器
我建議測試與下列組合中的至少一個:

  • 的Windows /火狐/ NVDA
  • OS X或iOS /畫外音(已安裝)

即使NVDA正在積極爲現代網絡技術開發的開源,JAWS仍然是最瞭解和使用scren讀者。但這是一個昂貴的商業軟件,許可證不允許您將其用於測試目的,即使「在需要重新啓動/重新啓動之前運行40分鐘」,如此複雜或致富或讓您的公司購買它。

從來沒有聽說過Thunder,只有Window Eye(s)(除非它在2013年發生了變化,它對HTML5等「現代」功能的支持有所欠缺)和ORCA在圖形環境中的GNU/Linux也篩選的命令行,這將是罰款盲目愛好者,除了現代的瀏覽器並不在命令行工作...)

殘疾人專用HTML代碼

<table> 
    <caption>Caption always useful</caption> 
    <thead> 
     <tr> 
      <th scope="col">A</th> 
      <th scope="col">B</th> 
      <th scope="col">C</th> 
     </tr> 
    </thead> 
    <!-- if there's a tfoot element, it goes here --> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
     </tr> 
     <tr> 
      <td>4</td> 
      <td>5</td> 
      <td>6</td> 
     </tr> 
    </tbody> 
</table> 

相關WCAG 2讀者。0技術在這個簡單的實施例中使用:

最後一個是用於簡單的表格:在頂部和/或一個頭單元的單列左側的標題單元格列。避免使用更復雜的表格,例如在標題或數據單元上具有colspanrowspan和/或標題單元的許多行/列。例如,您可以通過簡單分割表格來避免這種情況,但這並不容易,或者您的客戶/老闆不允許這樣做,所以如果您需要爲這些複雜表格編碼標記,請首先不要使用scope屬性,因爲它不再是整個行/列的標題單元格(某處存在colspan/rowspan-ed單元格),然後應通過id/headers機制將標題單元格與其數據單元相關聯。同樣相關的WCAG 2.0技術是:

這是一個複雜的任務,在你的HTML代碼,時間+預算和訓練有素內容的作家,如果他們必須自己這些細胞聯繫起來,需要完善的控制!堅持簡單的表格會更好。

+0

根據數據的不同,將每行中的起始列標記爲行標題可能是合適的 - 例如, 1 - 即使它的外觀看起來不像標題,第一個 – BrendanMcK

相關問題