CSS and JavaScript accessibility best practices

CSS和JavaScript是可訪問(wèn)的？

CSS和JavaScript對(duì)HTML的可訪問(wèn)性沒(méi)有同樣的重要性，但是它們?nèi)匀荒軌驇椭蚱茐目稍L問(wèn)性，這取決于它們的使用方式。 換句話說(shuō)，重要的是，您應(yīng)考慮一些最佳實(shí)踐建議，以確保您的CSS和JavaScript的使用不會(huì)破壞您的文檔的輔助功能。

CSS

讓我們先看看CSS。

正確的語(yǔ)義和用戶期望

可以使用CSS讓任何HTML元素看起來(lái)像任何，但這并不意味著你應(yīng)該。 正如我們?cè)?a href="/webstart/HTML"> HTML:良好的無(wú)障礙基礎(chǔ)文章中提到的，您應(yīng)該盡可能使用正確的語(yǔ)義元素為正確的工作。 如果不這樣做，它可能導(dǎo)致每個(gè)人的混亂和可用性問(wèn)題，但特別是殘疾用戶。 使用正確的語(yǔ)義與用戶期望有很大關(guān)系 - 元素根據(jù)其功能以某種方式看起來(lái)和行為，并且這些常見(jiàn)的約定是用戶期望的。

作為示例，如果開(kāi)發(fā)者沒(méi)有使用標(biāo)題元素來(lái)標(biāo)記內(nèi)容，則屏幕閱讀器用戶不能使用標(biāo)題作為用于導(dǎo)航頁(yè)面的路標(biāo)。 同樣的道理，如果你設(shè)計(jì)一個(gè)標(biāo)題，它看起來(lái)不像一個(gè)標(biāo)題，它失去了它的視覺(jué)目的。

經(jīng)驗(yàn)法則是，您可以更新頁(yè)面特征的樣式以適合您的設(shè)計(jì)，但不要將其更改太多，使其不再像預(yù)期的那樣看起來(lái)或表現(xiàn)。 以下部分總結(jié)了要考慮的主要HTML功能。

"Standard" text content structure

標(biāo)題，段落，列表 - 您的網(wǎng)頁(yè)的核心文字內(nèi)容:

<h1>Heading</h1>

<p>Paragraph</p>

<ul>
  <li>My list</li>
  <li>has two items.</li>
</ul>

一些典型的CSS可能如下所示:

h1 {
  font-size: 5rem;
}

p, li {
  line-height: 1.5;
  font-size: 1.6rem;
}

你應(yīng)該:

• Select sensible font sizes, line heights, letter spacing, etc. to make your text logical, legible, and comfortable to read.
• Make sure your headings stand out from your body text, typically big and bold like the default styling. Your lists should look like lists.
• Your text color should contrast well with your background color.

有關(guān)詳情，請(qǐng)參見(jiàn) HTML文本基礎(chǔ)知識(shí)和樣式文本。

Emphasised text

內(nèi)聯(lián)標(biāo)記，它將特定的重點(diǎn)放在它包裝的文本:

<p>The water is <em>very hot</em>.</p>

<p>Water droplets collecting on surfaces is called <strong>condensation</strong>.</p>

你可能想為你強(qiáng)調(diào)的文本添加一些簡(jiǎn)單的著色:

strong, em {
  color: #a60000;
}

然而，您很少需要以任何重要的方式強(qiáng)調(diào)樣式的重點(diǎn)元素。 粗體和斜體文本的標(biāo)準(zhǔn)約定是非常易辨認(rèn)的，改變樣式可能會(huì)導(dǎo)致混亂。 有關(guān)重點(diǎn)的詳情，請(qǐng)參見(jiàn)重點(diǎn)和重要性。

Abbreviations

允許縮寫(xiě)，首字母縮寫(xiě)或初始化與其擴(kuò)展相關(guān)聯(lián)的元素:

<p>Web content is marked up using <abbr title="Hypertext Markup Language">HTML</abbr>.</p>

再次，你可能想要以一些簡(jiǎn)單的方式來(lái)樣式:

abbr {
  color: #a60000;
}

縮寫(xiě)的公認(rèn)的樣式約定是虛線下劃線，并且不明顯偏離這是不明智的。 有關(guān)縮寫(xiě)的詳情，請(qǐng)參見(jiàn)縮寫(xiě)。

Links

超鏈接 - 您在網(wǎng)上找到新地方的方式:

<p>Visit the <a  rel="external nofollow" target="_blank" >Mozilla homepage</a>.</p>

一些非常簡(jiǎn)單的鏈接樣式如下所示:

a {
  color: #ff0000;
}

a:hover, a:visited, a:focus {
  color: #a60000;
  text-decoration: none;
}

a:active {
  color: #000000;
  background-color: #a60000;
}

標(biāo)準(zhǔn)鏈接約定帶有下劃線，在標(biāo)準(zhǔn)狀態(tài)下有不同的顏色(默認(rèn):藍(lán)色)，以前訪問(wèn)鏈接時(shí)的另一種顏色變化(默認(rèn):紫色)，以及鏈接激活時(shí)的另一種顏色(默認(rèn):紅色) 。 此外，當(dāng)鏈接被鼠標(biāo)移動(dòng)時(shí)，鼠標(biāo)指針改變?yōu)橹羔槇D標(biāo)，并且當(dāng)聚焦(例如，經(jīng)由標(biāo)簽)或激活時(shí)，鏈接接收到突出顯示。 下圖顯示了Firefox(虛線輪廓)和Chrome(藍(lán)色輪廓)中的突出顯示:

alt ="">

alt ="">

您可以創(chuàng)造性地使用鏈接樣式，只要您在與鏈接互動(dòng)時(shí)不斷向用戶提供反饋即可。 當(dāng)狀態(tài)改變時(shí)，肯定會(huì)發(fā)生某些事情，你不應(yīng)該擺脫指針光標(biāo)或輪廓 - 對(duì)于使用鍵盤控制的那些都是非常重要的輔助功能。

Form elements

允許用戶將數(shù)據(jù)輸入網(wǎng)站的要素:

<div>
  <label for="name">Enter your name</label>
  <input type="text" id="name" name="name">
</div>

您可以在我們的表單中查看一些很好的示例CSS， css.html 示例(實(shí)時(shí)查看 >也)。

你為表單編寫(xiě)的大多數(shù)CSS將用于調(diào)整元素大小，排列標(biāo)簽和輸入，并使它們看起來(lái)整潔。

然而，你不應(yīng)該偏離預(yù)期的視覺(jué)反饋表單元素接收時(shí)，他們聚焦，這基本上與鏈接相同(見(jiàn)上文)。 你可以設(shè)置聚焦/懸停狀態(tài)的形式，使這個(gè)行為在不同瀏覽器之間更一致，或者與你的頁(yè)面設(shè)計(jì)更好的一致，但是不要完全擺脫它 - 再次，人們依靠這些線索來(lái)幫助他們知道發(fā)生了什么 。

Tables     

表格數(shù)據(jù)表。

您可以在我們的 "external"> table-css.html example( 看到它也活)。

表CSS通常用于使表適合您的設(shè)計(jì)更好，看起來(lái)不那么丑陋。 這是一個(gè)好主意，以確保表格標(biāo)題脫穎而出(通常使用粗體)，并使用斑馬條紋，使不同的行更容易解析。

顏色和顏色對(duì)比

為您的網(wǎng)站選擇配色方案時(shí)，請(qǐng)確保文本(前景)顏色與背景顏色對(duì)比度良好。 你的設(shè)計(jì)可能看起來(lái)很酷，但如果有視覺(jué)障礙(如色盲)的人無(wú)法讀取你的內(nèi)容，那就不好了。

有一個(gè)簡(jiǎn)單的方法來(lái)檢查你的對(duì)比度是否足夠大，不會(huì)導(dǎo)致問(wèn)題。 有許多在線對(duì)比檢查工具，您可以輸入您的前景和背景顏色，以檢查它們。 例如，WebAIM的顏色對(duì)比度檢查器易于使用，并提供了您需要符合的內(nèi)容的說(shuō)明 WCAG標(biāo)準(zhǔn)圍繞顏色對(duì)比。

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

隱藏的東西

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

alt ="">

屏幕閱讀器用戶不關(guān)心任何這些 - 他們對(duì)內(nèi)容感到滿意，只要源順序有意義，他們可以得到所有。 絕對(duì)定位(如本示例中所使用的)通常被視為隱藏視覺(jué)效果的內(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)容從屏幕閱讀器中隱藏。

接受用戶可以覆蓋樣式

Accept that users can override your styles

用戶可以使用自己的自定義樣式覆蓋樣式，例如:

• See Sarah Maddox's How to override CSS stylesheets in Firefox for a useful guide covering how to do this manually in Firefox, and How to use a custom style sheet (CSS) with Internet Explorer by Adrian Gordon for the equivalent IE instructions.
• It is probably easier to do it using an extension, for example the Stylish extension is available for Firefox, Safari, Opera, and Chrome.

用戶可能出于各種原因執(zhí)行此操作。 視力受損的用戶可能希望在他們?cè)L問(wèn)的所有網(wǎng)站上使文本更大，或者具有嚴(yán)重色彩缺陷的用戶可能想將所有網(wǎng)站以高對(duì)比度的顏色容易看到。 無(wú)論什么需要，你應(yīng)該是舒適的，使你的設(shè)計(jì)靈活，以便這樣的變化將在您的設(shè)計(jì)中工作。 例如，你可能想要確保主內(nèi)容區(qū)域可以處理更大的文本(也許它會(huì)開(kāi)始滾動(dòng)，以允許它所有被看到)，而不是只是隱藏它，或完全打破。

JavaScript

JavaScript也可以破壞輔助功能，具體取決于它的使用方式。

現(xiàn)代JavaScript是一個(gè)強(qiáng)大的語(yǔ)言，我們可以做這么多的這些天，從簡(jiǎn)單的內(nèi)容和UI更新到完全成熟的2D和3D游戲。 沒(méi)有規(guī)定所有內(nèi)容必須100％可供所有人訪問(wèn)的規(guī)則 - 您只需要盡可能做，并使您的應(yīng)用程序盡可能訪問(wèn)。

簡(jiǎn)單的內(nèi)容和功能可以容易地被訪問(wèn) - 例如文本，圖像，表格，窗體和按鈕激活功能。 當(dāng)我們?cè)?a href="/webstart/HTML"> HTML:良好的輔助功能基礎(chǔ)上查看時(shí)，關(guān)鍵的注意事項(xiàng)是:

• Good semantics: Using the right element for the right job. For example, making sure you use headings and paragraphs, and <button> and <a> elements
• Making sure content is available as text, either directly as text content, good text labels for from elements, or text alternatives, e.g. alt text for images.

我們還查看了如何使用JavaScript構(gòu)建缺少功能的示例 - 請(qǐng)參閱構(gòu)建鍵盤輔助功能。 這不是理想的 - 真的你應(yīng)該使用正確的元素為正確的工作 - 但它表明，這是可能的情況下，由于某些原因，你不能控制使用的標(biāo)記。 另一種提高非語(yǔ)義JavaScript供應(yīng)的小部件的可訪問(wèn)性的方法是使用WAI-ARIA為screenreader用戶提供額外的語(yǔ)義。 下一篇文章還將詳細(xì)介紹這一點(diǎn)。

WebGL\">復(fù)雜的功能(如3D游戲)不容易訪問(wèn) - 使用 WebGL 創(chuàng)建的復(fù)雜3D游戲 will be rendered on a a>將顯示在腳本(通常是JavaScript)，例如，它可以用來(lái)繪制圖形，做照片組合甚至執(zhí)行動(dòng)畫(huà)。你可以(并且應(yīng)該)在畫(huà)布?jí)K中提供替代內(nèi)容。<canvas> element, which has no facility at this time to provide text alternatives or other information for severely visually impaired users to\">不支持畫(huà)布和禁用JavaScript的瀏覽器"> < canvas> 元素，它目前沒(méi)有為嚴(yán)重視力受損的用戶提供文本替代或其他信息的功能利用?？梢誀?zhēng)論的是，這樣的游戲并不真正讓這群人作為其主要目標(biāo)受眾的一部分，期望你讓盲人百分百訪問(wèn)是不合理的，但你可以實(shí)現(xiàn)keyboard controls so it is usable by non-mouse users, and make the color scheme contrasting enough\">="https://developer.mozilla.org/zh-CN/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard">鍵盤控制，因此非鼠標(biāo)用戶可以使用，并使顏色方案對(duì)比足夠以供具有色彩缺陷的人使用。

JavaScript太多的問(wèn)題

當(dāng)人們依賴JavaScript太多時(shí)，問(wèn)題經(jīng)常出現(xiàn)。 有時(shí)你會(huì)看到一個(gè)網(wǎng)站，其中一切都已經(jīng)完成了JavaScript - HTML由JavaScript生成，CSS stlying由JavaScript生成等等。這有各種各樣的輔助功能和其他問(wèn)題相關(guān)聯(lián)，因此它是 不建議。

除了使用正確的元素為正確的工作，你還應(yīng)該確保你使用正確的技術(shù)正確的工作！ 仔細(xì)考慮你是否需要這個(gè)閃亮的JavaScript功能的3D信息框，或者是否是純舊的文本。 仔細(xì)考慮你是否需要一個(gè)復(fù)雜的非標(biāo)準(zhǔn)窗體小部件，或者一個(gè)文本輸入是否會(huì)做。 并且不要使用JavaScript生成所有的HTML內(nèi)容，如果可能的話。

保持它不引人注目

在創(chuàng)建您的內(nèi)容時(shí)，應(yīng)考慮不引人注目的JavaScript 。 不引人注意的JavaScript的想法是，應(yīng)該盡可能地使用它來(lái)增強(qiáng)功能，而不是在完全基本的函數(shù)中構(gòu)建它應(yīng)該理想地工作沒(méi)有JavaScript，雖然它是不是總是一個(gè)選項(xiàng)。 但同樣，它的大部分是在可能的情況下使用內(nèi)置的瀏覽器功能。

使用不引人注目的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, along with a direct link to the video that can be used to access it if JavaScript is not available (the default <video> browser controls aren't keyboard accessible in most browsers).

例如，我們編寫(xiě)了一個(gè)快速和臟的客戶端表單驗(yàn)證示例 - 請(qǐng)參閱 .html"class ="external"> form-validation.html (也 ="external">查看演示現(xiàn)場(chǎng))。 在這里你會(huì)看到一個(gè)簡(jiǎn)單的形式; 當(dāng)您嘗試提交一個(gè)或兩個(gè)字段為空的表單時(shí)，提交失敗，并顯示一個(gè)錯(cuò)誤消息框，告訴您有什么問(wèn)題。

這種表單驗(yàn)證是不顯眼的 - 你仍然可以使用形式絕對(duì)精細(xì)，沒(méi)有JavaScript可用，任何明智的形式實(shí)現(xiàn)將有服務(wù)器端驗(yàn)證活躍，因?yàn)樗翘菀讗阂庥脩衾@過(guò)客戶端 驗(yàn)證(例如，通過(guò)在瀏覽器中關(guān)閉JavaScript)。 客戶端驗(yàn)證對(duì)報(bào)告錯(cuò)誤仍然非常有用，用戶可以立即知道他們犯的錯(cuò)誤，而不必等待服務(wù)器的往返和頁(yè)面重新加載。 這是一個(gè)明確的可用性優(yōu)勢(shì)。

我們已經(jīng)使這種表單驗(yàn)證也很容易訪問(wèn)。 我們使用了 它可以通過(guò)將控制元素放置在標(biāo)簽元素內(nèi)部或通過(guò)使用for屬性與控件相關(guān)聯(lián)，這樣的控件稱為標(biāo)簽元素的標(biāo)記控件。一個(gè)輸入可以與多個(gè)標(biāo)簽相關(guān)聯(lián) 。"> < label> 元素，以確保表單標(biāo)簽明確鏈接到其輸入，以便屏幕閱讀器可以一起閱讀:

<label for="name">Enter your name:</label>
<input type="text" name="name" id="name">

我們只在提交表單時(shí)進(jìn)行驗(yàn)證 - 這是為了不過(guò)于頻繁地更新UI，并且可能會(huì)混淆屏幕閱讀器(以及可能的其他)用戶:

form.onsubmit = validate;

function validate(e) {
  errorList.innerHTML = '';
  for(var i = 0; i < formItems.length; i++) {
    var testItem = formItems[i];
    if(testItem.input.value === '') {
      errorField.style.left = '360px';
      createLink(testItem);
    }
  }

  if(errorList.innerHTML !== '') {
    e.preventDefault();
  }
}

真實(shí)表單驗(yàn)證將比這更復(fù)雜 - 你想檢查輸入的名稱實(shí)際上看起來(lái)像一個(gè)名稱，輸入的年齡實(shí)際上是一個(gè)數(shù)字，是現(xiàn)實(shí)的(例如，不是一個(gè)減號(hào)，或四位數(shù))。 這里我們剛剛實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的檢查，一個(gè)值已經(jīng)填充到每個(gè)輸入字段( if(testItem.input.value ===\'\'))。

當(dāng)驗(yàn)證已經(jīng)執(zhí)行時(shí)，如果測(cè)試通過(guò)，則表單被提交。 如果有錯(cuò)誤( if(errorList.innerHTML！==\'\'))，那么我們停止提交表單(使用 zh-CN / docs / Web / API / Event / preventDefault"> preventDefault() )，并顯示已創(chuàng)建的任何錯(cuò)誤消息(見(jiàn)下文)。 這種機(jī)制意味著只有在存在錯(cuò)誤時(shí)才顯示錯(cuò)誤，這對(duì)可用性更好。

對(duì)于在表單提交時(shí)沒(méi)有填寫(xiě)值的每個(gè)輸入，我們創(chuàng)建一個(gè)帶有鏈接的列表項(xiàng)，并將其插入到 errorList 中。

function createLink(testItem) {
  var listItem = document.createElement('li');
  var anchor = document.createElement('a');
  anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
  anchor.href = '#' + testItem.input.name;
  anchor.onclick = function() {
    testItem.input.focus();
  };
  listItem.appendChild(anchor);
  errorList.appendChild(listItem);
}

每個(gè)鏈接都有兩個(gè)目的 - 它告訴你錯(cuò)誤是什么，加上你可以點(diǎn)擊它/激活它直接跳到有問(wèn)題的輸入元素，并更正您的輸入。

此外， errorField 放置在源順序的頂部(盡管它在使用CSS的UI中的位置不同)，這意味著用戶可以準(zhǔn)確地找到他們提交的表單有什么問(wèn)題，并獲得 通過(guò)返回到頁(yè)面的開(kāi)始處的所討論的輸入元素。

最后，我們?cè)谘菔局惺褂昧艘恍￤AI-ARIA屬性來(lái)幫助解決由內(nèi)容區(qū)域不斷更新而無(wú)需重新加載頁(yè)面導(dǎo)致的輔助功能問(wèn)題(屏幕閱讀器不會(huì)選擇此選項(xiàng)或默認(rèn)情況下提醒用戶):

<div class="errors" role="alert" aria-relevant="all">
  <ul>
  </ul>
</div>

我們將在下一篇文章中解釋這些屬性，其中更詳細(xì)地介紹了 WAI-ARIA 。

其他JavaScript可訪問(wèn)性問(wèn)題

在實(shí)現(xiàn)JavaScript和思考可訪問(wèn)性時(shí)，還需要注意其他事情。 我們將添加更多，因?yàn)槲覀冋业剿麄儭?/p>

mouse-specific events

如你所知，大多數(shù)用戶交互是在客戶端JavaScript中使用事件處理程序?qū)崿F(xiàn)的，這允許我們響應(yīng)某些事件發(fā)生而運(yùn)行函數(shù)。 某些事件可能具有輔助功能問(wèn)題。 您遇到的主要示例是鼠標(biāo)特定事件，如鼠標(biāo)懸停， > mouseout ， / docs / Web / Events / dblclick"> dblclick 等。響應(yīng)這些事件運(yùn)行的功能將無(wú)法使用其他機(jī)制(如鍵盤控制)訪問(wèn)。

為了緩解這些問(wèn)題，您應(yīng)該將這些事件與可以通過(guò)其他方式激活的類似事件(所謂的設(shè)備無(wú)關(guān)事件處理程序)加倍 - / docs / Web / Events / focus">焦點(diǎn)和模糊 為鍵盤用戶提供可訪問(wèn)性。

讓我們看一個(gè)例子，突出這可能是有用的。 也許我們想要提供一個(gè)縮略圖，顯示一個(gè)較大版本的圖像，當(dāng)它被鼠標(biāo)懸?；蚣?像你會(huì)看到在電子商務(wù)產(chǎn)品目錄)。

我們提供了一個(gè)非常簡(jiǎn)單的示例，您可以在 external"> mouse-and-keyboard-events.html (另請(qǐng)參閱 -keyboard-events.html"class ="external">源代碼)。 該代碼具有兩個(gè)顯示和隱藏放大圖像的功能; 這些是由以下行將其設(shè)置為事件處理程序運(yùn)行:

imgThumb.onmouseover = showImg;
imgThumb.onmouseout = hideImg;

imgThumb.onfocus = showImg;
imgThumb.onblur = hideImg;

當(dāng)鼠標(biāo)指針懸停在縮略圖上并停止在縮略圖上時(shí)，前兩行將運(yùn)行函數(shù)。 這將不允許我們通過(guò)鍵盤訪問(wèn)縮放視圖 - 為了允許，我們已經(jīng)包括最后兩行，當(dāng)圖像聚焦和模糊(當(dāng)焦點(diǎn)停止時(shí)運(yùn)行功能)。 這可以通過(guò)在圖像上標(biāo)簽，因?yàn)槲覀円呀?jīng)包括 tabindex ="0"。

click event is interesting — it sounds mouse-dependant, but most browsers will activate onclick event handlers after Enter/Return is pressed on a link or form element that has focus, or when such an element is tapped on a touchscreen device. This doesn\'t work by default however when you allow a non-default-focusable event to have focus using tabindex — in such cases you need to detect specifically when that exact key is pressed (see Building keyboard accessibility back in).\">

概要

我們希望本文為您提供了有關(guān)CSS和JavaScript在網(wǎng)頁(yè)上使用的輔助功能問(wèn)題的詳細(xì)和了解。

接下來(lái)，WAI-ARIA！