Handling common accessibility problems

什么是輔助功能？

當(dāng)我們?cè)赪eb技術(shù)的上下文中描述輔助功能時(shí)，大多數(shù)人立即想到確保網(wǎng)站/應(yīng)用程序可供殘疾人使用，例如:

• Visually impaired people using screen readers or magnification/zoom to access text
• People with motor function impairments using the keyboard (or other non-mouse features) to activate website functionality.
• People with hearing impairments relying on captions/subtitles or other text alternatives for audio/video content.

然而，說可及性只是關(guān)于殘疾是錯(cuò)誤的。 真正的，無障礙的目的是使您的網(wǎng)站/應(yīng)用程序可以盡可能多的人在盡可能多的情況下使用，而不只是那些用戶使用大功率的臺(tái)式電腦。 極端的例子可能包括:

• Users on mobile devices.
• Users on alternative browsing devices such as TVs, watches, etc.
• Users of older devices that might not have the latest browsers.
• Users of lower spec devices that might have slow processors.

在某種程度上，這個(gè)整個(gè)模塊是關(guān)于輔助功能 - 跨瀏覽器測(cè)試確保您的網(wǎng)站可以盡可能多的人使用。 什么是輔助功能？定義的輔助功能比本文更完整和全面。

也就是說，本文將介紹關(guān)于殘疾人的跨瀏覽器和測(cè)試問題，以及他們?nèi)绾问褂肳eb。 我們已經(jīng)討論過其他領(lǐng)域，例如自適應(yīng)設(shè)計(jì)和性能 a>在模塊中的其他地方。

常見的輔助功能問題

在本節(jié)中，我們將詳細(xì)介紹與網(wǎng)絡(luò)可訪問性相關(guān)的一些主要問題，以及與特定技術(shù)相關(guān)的最佳做法，以及一些快速測(cè)試，以了解您的網(wǎng)站是否朝著正確的方向進(jìn)行。

HTML

語義HTML(其中元素用于它們的正確目的)可以直接訪問 - 這樣的內(nèi)容是可見的觀看者可讀的(只要你不做任何愚蠢的使文本方式太小或使用CSS隱藏它) ，但也可以通過諸如屏幕閱讀器(向用戶逐字地讀出網(wǎng)頁(yè)的應(yīng)用)等輔助技術(shù)使用，并且還具有其他優(yōu)點(diǎn)。

Semantic structure

語義HTML中最重要的快速勝利是為您的內(nèi)容使用標(biāo)題和段落的結(jié)構(gòu); 這是因?yàn)槠聊婚喿x器用戶傾向于使用文檔的標(biāo)題作為路標(biāo)來更快地找到他們需要的內(nèi)容。 如果你的內(nèi)容沒有標(biāo)題，他們會(huì)得到一個(gè)巨大的文本墻，沒有路標(biāo)找到任何東西。 壞的和好的HTML的示例:

<font size="7">My heading</font>
<br><br>
This is the first section of my document.
<br><br>
I'll add another paragraph here too.
<br><br>
<font size="5">My subheading</font>
<br><br>
This is the first subsection of my document. I'd love people to be able to find this content!
<br><br>
<font size="5">My 2nd subheading</font>
<br><br>
This is the second subsection of my content. I think is more interesting than the last one.

<h1>My heading</h1>

<p>This is the first section of my document.</p>

<p>I'll add another paragraph here too.</p>

<h2>My subheading</h2>

<p>This is the first subsection of my document. I'd love people to be able to find this content!</p>

<h2>My 2nd subheading</h2>

<p>This is the second subsection of my content. I think is more interesting than the last one.</p>

此外，你的內(nèi)容應(yīng)該在源順序上有邏輯意義 - 你總是可以把它放在你希望使用CSS的地方，但你應(yīng)該得到開始的源順序。

作為一個(gè)測(cè)試，你可以關(guān)閉一個(gè)網(wǎng)站的CSS，看看它是如何可以沒有它。 您可以通過從代碼中刪除CSS手動(dòng)執(zhí)行此操作，但最簡(jiǎn)單的方法是使用瀏覽器功能，例如:

• Firefox: Select View > Page Style > No Style from the main menu.
• Safari: Select Develop > Disable Styles from the main menu (to enable the Develop menu, choose Safari?> Preferences > Advanced > Show Develop menu in menu bar).
• Chrome: Install the Web Developer Toolbar extension, then restart the browser. Click the gear icon that will appear, then select CSS > Disable All Styles.
• Edge: Select?View > Style > No Style from the main menu.

Using native keyboard accessibility

某些HTML功能只能使用鍵盤來選擇 - 這是默認(rèn)行為，從網(wǎng)絡(luò)的早期可用。 具有此功能的元素是允許用戶與網(wǎng)頁(yè)互動(dòng)的常見元素，即鏈接， "title ="HTML按鈕元素表示一個(gè)可點(diǎn)擊的按鈕。>> < button> ，并且形成 / zh-CN / docs / Web / HTML / Element / input"title ="HTML輸入元素用于為基于Web的表單創(chuàng)建交互式控件，以便接受來自用戶的數(shù)據(jù)。 其type屬性的值"> < input> 。

您可以使用我們的 "> native-keyboard-accessibility.html 示例(請(qǐng)參閱 accessibility / native-keyboard-accessibility.html"class ="external">源代碼) - 在新標(biāo)簽頁(yè)中打開，然后嘗試按Tab鍵; 幾個(gè)按下后，你應(yīng)該看到標(biāo)簽焦點(diǎn)開始移動(dòng)通過不同的可聚焦元素; 焦點(diǎn)元素在每個(gè)瀏覽器中都有一個(gè)突出顯示的默認(rèn)樣式(它在不同瀏覽器之間略有不同)，以便您可以知道所關(guān)注的元素。

height:39px; margin:0px auto; width:288px;">

然后，您可以按Enter / Return鍵以關(guān)注焦點(diǎn)鏈接或按下按鈕(我們已包含一些JavaScript以使按鈕發(fā)出警告消息)，或開始輸入以在文本輸入中輸入文本(其他表單元素具有不同的控件， 例如 > < select> 元素可以使用向上和向下箭頭鍵顯示和循環(huán)選項(xiàng))。

請(qǐng)注意，不同的瀏覽器可能有不同的鍵盤控制選項(xiàng)。 大多數(shù)現(xiàn)代瀏覽器都遵循上述的選項(xiàng)卡模式(您也可以通過Shift + Tab向后移動(dòng)可聚焦元素)，但某些瀏覽器具有自己的特性:

• Firefox for the Mac doesn't do tabbing by default. To turn it on, you have to go to Preferences > Advanced > General, then uncheck "Always use the cursor keys to navigate within pages". Next, you have to open your Mac's System Preferences app, then go to Keyboard > Shortcuts, then select the All Controls radio button.
• Safari doesn't allow you to tab through links by default; to enable this, you need to open Safari's Preferences, go to Advanced, and check the Press Tab to highlight each item on a webpage checkbox.

此示例強(qiáng)調(diào)了為正確的作業(yè)使用正確的語義元素的重要性。 可以將任何元素設(shè)置為類似于具有CSS的鏈接或按鈕，并且表現(xiàn)得像帶有JavaScript的鏈接或按鈕，但它們實(shí)際上不是鏈接或按鈕， 失去了很多的可訪問性這些元素給你免費(fèi)。 所以，不要這樣做，如果你可以避免它。

另一個(gè)提示 - 如我們的示例所示，您可以使用 >:focus 偽類。 這是一個(gè)好主意，加倍的焦點(diǎn)和懸停樣式，所以你的用戶得到的視覺線索，控件將做什么時(shí)激活，無論他們是使用鼠標(biāo)或鍵盤:

a:hover, input:hover, button:hover, select:hover,
a:focus, input:focus, button:focus, select:focus {
  font-weight: bold;
}

Building in keyboard accessibility

有時(shí)，不可能避免失去鍵盤輔助功能。 你可能已經(jīng)繼承了一個(gè)語義不是很好的網(wǎng)站(也許你最終會(huì)遇到一個(gè)可怕的CMS，它產(chǎn)生用< div> s制作的按鈕)，或者你使用一個(gè)復(fù)雜的控件 其中沒有內(nèi)置鍵盤輔助功能，例如HTML5 將視頻內(nèi)容嵌入到文檔中。"> < video> 元素(令人驚訝的是，Opera是唯一允許您通過< video> >元素的默認(rèn)瀏覽器控件)。 這里有幾個(gè)選項(xiàng):

1. Create custom controls using <button> elements (which we can tab to by default!) and JavaScript to wire up their functionality. See Creating a cross-browser video player for some good examples of this.
2. Create keyboard shortcuts via JavaScript, so functionality is activated when you press certain keys on the keyboard. See Desktop mouse and keyboard controls for some game-related examples that can be adapted for any purpose.
3. Use some interesting tactics to fake button behaviour. Take for example our fake-div-buttons.html example (see source code). Here we've given our fake <div> buttons the ability to be focused (including via tab) by giving each one the attribute tabindex="0" (see WebAIM's tabindex article for more really useful details). This allows us to tab to the buttons, but not to activate them via the Enter/Return key. To do that, we had to add the following bit of JavaScript trickery:

   document.onkeydown = function(e) {
     if(e.keyCode === 13) { // The Enter/Return key
       document.activeElement.onclick(e);
     }
   };

   Here we add a listener to the document object to detect when a button has been pressed on the keyboard. We check what button was pressed via the event object's keyCode property; if it is the keycode that matches Return/Enter, we run the function stored in the button's onclick handler using document.activeElement.onclick(). activeElement gives us the element that is currently focused on the page.

Text alternatives

文本替代對(duì)于可訪問性是非常重要的 - 如果一個(gè)人有視覺或聽力障礙，阻止他們能夠看到或聽到一些內(nèi)容，那么這是一個(gè)問題。 最簡(jiǎn)單的文本替代方法是謙遜的 alt 屬性，我們應(yīng)該在包含相關(guān)內(nèi)容的所有圖片上添加。 這應(yīng)該包含成功傳達(dá)其在頁(yè)面上的含義和內(nèi)容的圖像的描述，由屏幕讀取器拾取并讀出給用戶。

缺少替代文字可以通過多種方式測(cè)試，例如使用輔助功能審核工具。

缺少替代文字可以通過多種方式測(cè)試，例如使用輔助功能審核工具。...

Element relationships and context

在HTML中有一些特性和最佳實(shí)踐，旨在提供上下文以及其他不存在的元素之間的關(guān)系。 三個(gè)最常見的示例是鏈接，表單標(biāo)簽和數(shù)據(jù)表。

可訪問鏈接文本的關(guān)鍵是，使用屏幕閱讀器的人通常會(huì)使用一個(gè)共同的功能，他們拉起頁(yè)面上的所有鏈接的列表。 在這種情況下，鏈接文本需要使文本超出內(nèi)容。 例如，標(biāo)記為"點(diǎn)擊這里"，"點(diǎn)擊這里"等的鏈接的列表對(duì)于可訪問性是非常糟糕的。 鏈接文本在上下文和上下文中更有意義。

接下來，我們的列表中顯示 用戶界面。"> < label> 元素是允許我們使表單可訪問的核心功能之一。 表單的麻煩是你需要標(biāo)簽來說明應(yīng)該在每個(gè)表單輸入中輸入什么數(shù)據(jù)。 每個(gè)標(biāo)簽都需要包含在 "> < label> 將其明確鏈接到其合作伙伴表單輸入(每個(gè)< label> 代碼>屬性值需要匹配表單元素 id 值)，即使源順序不完全合乎邏輯(這是公平的)應(yīng)該是有意義的。

最后，一個(gè)關(guān)于數(shù)據(jù)表的快速詞。 基本數(shù)據(jù)表可以用非常簡(jiǎn)單的標(biāo)記來編寫(參見 bad-table.html table.html"class ="external"> live 和 class ="external"> source )，但這有問題 - 屏幕閱讀器用戶沒有辦法將行或列組合在一起作為數(shù)據(jù)分組 - 為此，您需要知道標(biāo)題行是什么 ，并且如果它們向上行，列等。這只能對(duì)于這樣的表可視地進(jìn)行。

如果您改為查看我們的 external"> punk bands table example ，您可以在這里看到一些輔助工具，例如表頭( / HTML / Element / th"title ="HTML元素將一個(gè)單元格定義為一組表格單元格的標(biāo)題，這個(gè)組合的屬性由范圍和標(biāo)題屬性定義。"> < th> 和 scope 屬性)， "HTML caption元素表示表的標(biāo)題，雖然它始終是表的第一個(gè)后代，但它的樣式，使用CSS，可以放置在相對(duì)于表的其他地方。"> < caption> 代碼> 元素等。

CSS

CSS傾向于提供比HTML更少的基本可訪問性功能，但是如果使用不正確，它仍然可以對(duì)可訪問性造成同樣多的損害。 我們已經(jīng)提到了幾個(gè)涉及CSS的無障礙提示:

• Use the correct semantic elements to mark up different content in HTML; if you want to create a different visual effect, use CSS — don't abuse an HTML element to get the look you want. For example, if you want bigger text, use font-size, not an <h1> element.
• Make sure your source order makes sense without CSS; you can always use CSS to style the page any way you want afterward.
• You should make sure interactive elements like buttons and links have appropriate focus/hover/active states set, to give the user visual clues as to their function. If you remove the defaults for stylistic reasons, make sure you include some replacement styles.

還有一些其他注意事項(xiàng)，你應(yīng)該考慮。

Color and color contrast

當(dāng)為您的網(wǎng)站選擇配色方案時(shí)，應(yīng)確保文本(前景)顏色與背景顏色形成良好對(duì)比。 你的設(shè)計(jì)可能看起來很酷，但如果有視覺障礙(如色盲)的人無法讀取你的內(nèi)容，那就不好了。 使用WebAIM的顏色對(duì)比檢查器等工具檢查您的方案是否足夠?qū)Ρ取?/span>

另一個(gè)提示是不僅僅依賴于顏色單獨(dú)用于路標(biāo)/信息，因?yàn)檫@對(duì)于不能看到顏色的人來說是沒有好處的。 而不是將所需的表單字段標(biāo)記為紅色，例如，用星號(hào)和紅色標(biāo)記。

Hiding content

在許多情況下，視覺設(shè)計(jì)將要求不是一次顯示所有內(nèi)容。 例如，在我們的標(biāo)簽信息 框示例(請(qǐng)參閱 ="external">源代碼)，我們有三個(gè)面板的信息，但我們定位它們之間的頂部，并提供選項(xiàng)卡 可以點(diǎn)擊顯示每一個(gè)(它也可以鍵盤訪問 - 您也可以使用Tab和Enter / Return選擇它們)。

;">

屏幕閱讀器用戶不關(guān)心任何這些 - 他們對(duì)內(nèi)容感到滿意，只要源順序有意義，他們可以得到所有。 絕對(duì)定位(如本示例中所使用的)通常被視為隱藏視覺效果的內(nèi)容的最佳機(jī)制之一，因?yàn)樗粫?huì)阻止屏幕閱讀器到達(dá)它。

另一方面，您不應(yīng)使用 "> visibility :hidden 或 https://developer.mozilla.org/zh-CN/docs/Web/CSS/display"title ="display CSS屬性指定用于元素的呈現(xiàn)框的類型。在HTML中，默認(rèn)顯示屬性值取自 在HTML規(guī)范或?yàn)g覽器/用戶默認(rèn)樣式表中描述的行為。XML中的默認(rèn)值是內(nèi)聯(lián)。"> display :none 隱藏屏幕閱讀器的內(nèi)容。 除非當(dāng)然，有一個(gè)很好的理由，你希望這個(gè)內(nèi)容從屏幕閱讀器中隱藏。

JavaScript

JavaScript在可訪問性方面與CSS有相同的問題 - 如果使用不當(dāng)或過度使用，可能會(huì)使災(zāi)難性的可訪問性。 我們已經(jīng)暗示了與JavaScript相關(guān)的一些輔助功能問題，主要是在語義HTML領(lǐng)域 - 您應(yīng)該始終使用適當(dāng)?shù)恼Z義HTML來實(shí)現(xiàn)功能，無論它在哪里可用，例如使用鏈接和按鈕適當(dāng)。 不要使用具有JavaScript代碼的< div> 元素來偽造功能，如果可能的話 - 它是容易出錯(cuò)，比使用免費(fèi)功能HTML給你更多的工作。

Simple functionality

通常，簡(jiǎn)單的功能應(yīng)該僅僅使用HTML - JavaScript只應(yīng)該用于增強(qiáng)功能，而不是完全建立。 JavaScript的良好用途包括:

• Providing client-side form validation, which alerts users to problems with their form entries quickly, without having to wait for the server to check the data. If it isn't available, the form will still work, but validation might be slower.
• Providing custom controls for HTML5 <video>s that are accessible to keyboard-only users (as we said earlier, the default browser controls aren't keyboard-accessible in most browsers).

更復(fù)雜的JavaScript實(shí)現(xiàn)可以提供可訪問性的問題 - 你需要做你能做的。 例如，期望您制作使用 WebGL 100撰寫的復(fù)雜3D游戲是不合理的 盲人可訪問的百分比，但您可以實(shí)施鍵盤控制，以便 可由非鼠標(biāo)用戶使用，并且使得顏色方案足夠?qū)Ρ纫员阌删哂蓄伾毕莸念伾桨缚捎谩?/span>

Complex functionality

可訪問性的主要問題之一是復(fù)雜的應(yīng)用程序，其涉及復(fù)雜的表單控件(例如日期選擇器)和經(jīng)常和增量更新的動(dòng)態(tài)內(nèi)容。

非本地復(fù)雜的表單控件是有問題的，因?yàn)樗鼈儍A向于涉及大量嵌套的< div> ，并且瀏覽器默認(rèn)不知道如何處理它們。 如果你自己發(fā)明它們，你需要確保它們是鍵盤可訪問的; 如果您使用某種第三方框架，請(qǐng)仔細(xì)查看可用的選項(xiàng)，以了解他們?cè)谶M(jìn)入之前的可訪問性。 Bootstrap a>看起來對(duì)于輔助功能來說相當(dāng)不錯(cuò)，例如，雖然 /"class ="external">使Bootstrap更容易訪問 Rhiana Heath探討了它的一些問題(主要與顏色對(duì)比有關(guān))，并查看一些解決方案。

定期更新的動(dòng)態(tài)內(nèi)容可能是一個(gè)問題，因?yàn)閟creenreader用戶可能會(huì)錯(cuò)過它，特別是如果它意外更新。 如果您的單頁(yè)應(yīng)用具有主內(nèi)容面板，并且使用 XMLHttpRequest >或提取，屏幕閱讀器用戶可能會(huì)錯(cuò)過這些更新。

WAI-ARIA

你需要使用這樣復(fù)雜的功能，還是普通的舊語義HTML？ 如果您確實(shí)需要復(fù)雜性，則應(yīng)考慮使用 WAI-ARIA (可訪問富 互聯(lián)網(wǎng)應(yīng)用程序)，一種為諸如復(fù)雜表單控件和更新面板之類的項(xiàng)目提供語義(以新HTML屬性的形式)的規(guī)范，大多數(shù)瀏覽器和屏幕閱讀器都可以理解。

要處理復(fù)雜的窗體小部件，您需要使用ARIA屬性，如 roles 來說明不同元素在窗口小部件中具有什么樣的作用(例如，它們是一個(gè)制表符還是制表符面板？)， > aria-disabled 來說明控件是否被禁用等。

要處理復(fù)雜的窗體小部件，您需要使用ARIA屬性，如 roles 來說明不同元素在窗口小部件中具有什么樣的作用(例如，它們是一個(gè)制表符還是制表符面板？)， > aria-disabled 來說明控件是否被禁用等。...

• off: The default. Updates should not be announced.
• polite: Updates should be announced only if the user is idle.
• assertive: Updates should be announced to the user as soon as possible.
• rude: Updates should be announced straight away, even if this interrupts the user.

這里有一個(gè)例子:

<p><span id="LiveRegion1" aria-live="polite" aria-atomic="false"></span></p>

您可以在Freedom Scientific的 ARIA(可訪問的富互聯(lián)網(wǎng)應(yīng)用)直播區(qū)域 示例 - 突出顯示的段落應(yīng)該每10秒更新一次內(nèi)容，屏幕閱讀器應(yīng)該向用戶顯示此內(nèi)容。 ARIA Live Regions - Atomic 提供了另一個(gè)有用的示例。

我們?cè)谶@里沒有詳細(xì)討論WAI-ARIA的空間，您可以在 WAI-ARIA基礎(chǔ)知識(shí)中了解更多內(nèi)容。

輔助工具

現(xiàn)在我們已經(jīng)介紹了不同Web技術(shù)的輔助功能考慮，包括一些測(cè)試技術(shù)(例如鍵盤導(dǎo)航和顏色對(duì)比檢查器)，讓我們來看看其他可以在進(jìn)行輔助功能測(cè)試時(shí)使用的工具。

審計(jì)工具

有許多可用的審核工具，您可以指向您的網(wǎng)頁(yè)，它們將查看它們，并返回頁(yè)面上存在的輔助功能問題列表。 示例包括:

• Tenon: A rather nice online app that goes through the code at a provided URL and returns results on accessibility errors including metrics, specific errors along with the WCAG criteria they affect, and suggested fixes.
• tota11y: An accessibility tool from the Khan Academy that takes the form of a JavaScript library that you attach to your page to provide a number of accessibility tools.
• Wave: Another online accessibility testing tool that accepts a web address and returns a useful annotated view of that page with accessibility problems highlighted.

讓我們看一個(gè)例子，使用Tenon。

1. Go to the Tenon homepage.
2. Enter the URL of our bad-semantics.html example into the text input at the top of the page (or the URL of another webpage you'd like to analyze) and press Analyse Your Webpage.
3. Scroll down until you find the error/description section, as shown below.

593px; margin:0px auto; width:870px;">

您還可以瀏覽一些選項(xiàng)(請(qǐng)參閱頁(yè)面頂部附近的顯示選項(xiàng)鏈接)，以及使用Tenon以編程方式使用的API。

自動(dòng)化工具

Deque的斧頭工具比我們上面提到的審核工具更進(jìn)一步。 像其他人一樣，它檢查頁(yè)面并返回可訪問性錯(cuò)誤。 它最直接有用的形式可能是瀏覽器擴(kuò)展:

• aXe for Chrome
• aXe for Firefox

這些向?yàn)g覽器開發(fā)人員工具添加了一個(gè)無障礙選項(xiàng)卡。 例如，我們安裝了Firefox版本，然后用它來審核我們的 bad-table.html 示例。 我們得到以下結(jié)果:

>

ax也可以使用 npm 安裝，并且可以與任務(wù)運(yùn)行器(如 Grunt 和 class ="external"> Gulp ，自動(dòng)化框架如 Selenium 和 Cucumber ，單元測(cè)試框架如 Jasmin ，以及更多其他內(nèi)容(同樣，請(qǐng)參閱主軸頁(yè)面 了解詳情)。

編輯

這絕對(duì)值得用屏幕閱讀器來測(cè)試，以習(xí)慣視障人士使用網(wǎng)絡(luò)的嚴(yán)重程度。 有許多屏幕閱讀器可用:

• Some are paid-for commercial products, like JAWS (Windows) and Window Eyes (Windows).
• Some are free products, like NVDA (Windows), ChromeVox (Chrome, Windows, and Mac OS X), and Orca (Linux).
• Some are built into the operating system, like VoiceOver (Mac OS X and iOS), ChromeVox (on Chromebooks), and TalkBack (Android).

通常，屏幕閱讀器是在主機(jī)操作系統(tǒng)上運(yùn)行的單獨(dú)應(yīng)用，并且不僅可以讀取網(wǎng)頁(yè)，而且可以讀取其他應(yīng)用中的文本。 這并不總是這樣(ChromeVox是一個(gè)瀏覽器擴(kuò)展)，但通常。 屏幕閱讀器傾向于以稍微不同的方式操作并具有不同的控件，因此您必須查閱所選屏幕閱讀器的文檔以獲取所有詳細(xì)信息 - 說它們都以基本相同的方式工作。

讓我們通過幾個(gè)不同的屏幕閱讀器進(jìn)行一些測(cè)試，給你一個(gè)大致的想法，他們?nèi)绾喂ぷ?，如何與他們測(cè)試。

VoiceOver

VoiceOver(VO)隨您的Mac / iPhone / iPad免費(fèi)，所以如果你使用蘋果產(chǎn)品，它是有用的測(cè)試桌面/移動(dòng)。 我們將在Mac OS X的Mac OS X上測(cè)試它。

要打開它，請(qǐng)按Cmd + Fn + F5。 如果你以前沒有使用過VO，你會(huì)得到一個(gè)歡迎屏幕，在那里你可以選擇啟動(dòng)VO或不，并運(yùn)行一個(gè)相當(dāng)有用的教程，以了解如何使用它。 要再次關(guān)閉它，請(qǐng)?jiān)俅伟碈md + Fn + F5。

當(dāng)VO打開時(shí)，顯示器將看起來大體相同，但是您將在屏幕的左下方看到一個(gè)黑色框，其中包含有關(guān)當(dāng)前所選擇的VO的信息。 當(dāng)前選擇也將突出顯示，帶有黑色邊框 - 此突出顯示稱為 VO光標(biāo)。

margin:0px auto; width:800px;">

要使用VO，你將大量使用"VO修改器" - 這是一個(gè)鍵或鍵組合，你需要按除了實(shí)際的VO鍵盤快捷鍵，讓他們工作。 使用這樣的修飾符對(duì)于screenreaders是常見的，以使它們能夠保持其命令不與其他命令沖突。 在VO的情況下，修飾符可以是CapsLock或Ctrl + Option。

VO有很多鍵盤命令，我們不會(huì)在這里列出。 網(wǎng)頁(yè)測(cè)試所需的基本功能如下表所示。 在鍵盤快捷鍵中，"VO"表示"VoiceOver修改器"。

這似乎很多命令，但它并沒有那么糟糕，當(dāng)你習(xí)慣它，和VO定期給你提醒什么命令在某些地方使用。 現(xiàn)在有一個(gè)玩VO！ 您可以在屏幕閱讀器測(cè)試部分中繼續(xù)使用我們的一些示例。

NVDA

NVDA僅限Windows，您需要安裝它。

1. Download it from nvaccess.org. You can choose whether to make a donation or download it for free; you'll also need to give them your e-mail address before you can download it.
2. Once downloaded, install it — you double click the installer, accept the license and follow the prompts.
3. To start NVDA, double click on the program file/shortcut, or use the keyboard shortcut Ctrl + Alt + N. You'll see the NVDA welcome dialog when you start it. Here you can choose from a couple of options, then press the OK button to get going.

NVDA現(xiàn)在將在您的計(jì)算機(jī)上處于活動(dòng)狀態(tài)。

要使用NVDA，您將大量使用"NVDA修改器" - 這是一個(gè)鍵，除了實(shí)際的NVDA鍵盤快捷鍵，您需要按下，以使他們工作。 使用這樣的修飾符對(duì)于screenreaders是常見的，以使它們能夠保持其命令不與其他命令沖突。 在NVDA的情況下，修飾符可以是Insert(默認(rèn))或CapsLock(可以通過選中NVDA歡迎對(duì)話框中的第一個(gè)復(fù)選框，然后按確定選擇)。

NVDA有很多鍵盤命令，我們不會(huì)在這里列出。 網(wǎng)頁(yè)測(cè)試所需的基本功能如下表所示。 在鍵盤快捷鍵中，"NVDA"表示"NVDA修改器"。

Screenreader testing

現(xiàn)在你已經(jīng)習(xí)慣了使用屏幕閱讀器，我們希望你使用它來做一些快速的輔助功能測(cè)試，以了解屏幕閱讀器如何處理好的和壞的網(wǎng)頁(yè)功能:

• Look at good-semantics.html, and note how the headers are found by the screenreader and available to use for navigation. Now look at bad-semantics.html, and note how the screenreader gets none of this information. Imagine how annoying this would when trying to navigate a really long page of text.
• Look at good-links.html, and note how they make sense when viewed out of context. This is not the case with bad-links.html — they are all just "click here".
• Look at good-form.html, and note how the form inputs are descirbed using their labels because we've used <label> elements properly. In bad-form.html, they get an unhelpful label along the lines of "blank".
• Look at our punk-bands-complete.html example, and see how the screenreader is able to associate columns and rows of content and read them out all together because we've defined headers properly. In bad-table.html, none of the cells can be associated at all. Note that NVDA seems to behave slightly stragely when you've only got a single table on a page; you could try WebAIM's table test page instead.
• Have a look at the WAI-ARIA live regions example we saw earlier, and note how the screen reader will keep reading out the constantly updating section as it updates.

用戶測(cè)試

如上所述，您不能僅依靠自動(dòng)化工具來確定您網(wǎng)站上的輔助功能問題。 建議您在制定測(cè)試計(jì)劃時(shí)，應(yīng)盡可能包含一些輔助功能用戶組(請(qǐng)參閱我們的用戶測(cè)試部分) 在一些更多的上下文中)。 嘗試讓一些screenreader用戶參與，一些僅鍵盤用戶，一些非聽覺用戶，也可能是其他組，以滿足您的要求。

輔助功能測(cè)試清單

以下列表提供了一個(gè)清單，您可以按照此清單來確保您已為項(xiàng)目執(zhí)行了建議的輔助功能測(cè)試:

1. Make sure your HTML is as semantically correct as possible. Validating it is a good start, as is using an Auditing tool.
2. Check that your content makes sense when the CSS is turned off.
3. Make sure your functionality is keyboard accessible. Test using Tab, Return/Enter, etc.
4. Make sure your non-text content has text alternatives. an?Auditing tool is good for catching such problems.
5. Make sure your site's color contrast is acceptable, using a suitable checking tool.
6. Make sure hidden content is visible by screenreaders.
7. Make sure that functionality is usable without JavaScript whever possible.
8. Use ARIA to improve accessibility where appropriate.
9. Run your site through an Auditing tool.
10. Test it with a screenreader.
11. Include an accessibility policy/statement somewhere findable on your site to say what you did.

尋找?guī)椭?/span>

還有許多其他問題，你會(huì)遇到無障礙; 最重要的事情，知道真正是如何在網(wǎng)上找到答案。 有關(guān)一些好的指標(biāo)，請(qǐng)參閱HTML和CSS文章的查找?guī)椭糠?/a>。