CSS and JavaScript accessibility best practices

CSS和JavaScript是可訪問的？

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

CSS

讓我們先看看CSS。

正確的語義和用戶期望

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

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

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

"Standard" text content structure

標(biāo)題，段落，列表 - 您的網(wǎng)頁的核心文字內(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)詳情，請參見 HTML文本基礎(chǔ)知識和樣式文本。

Emphasised text

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

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

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

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

strong, em {
  color: #a60000;
}

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

Abbreviations

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

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

再次，你可能想要以一些簡單的方式來樣式:

abbr {
  color: #a60000;
}

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

Links

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

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

一些非常簡單的鏈接樣式如下所示:

a {
  color: #ff0000;
}

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

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

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

alt ="">

alt ="">

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

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ù)CSS將用于調(diào)整元素大小，排列標(biāo)簽和輸入，并使它們看起來整潔。

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

Tables     

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

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

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

顏色和顏色對比

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

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

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

隱藏的東西

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

alt ="">

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

另一方面，您不應(yīng)使用 "> visibility :hidden 或 https://developer.mozilla.org/zh-CN/docs/Web/CSS/display"title ="display CSS屬性指定用于元素的呈現(xiàn)框的類型。在HTML中，默認顯示屬性值取自 在HTML規(guī)范或瀏覽器/用戶默認樣式表中描述的行為。XML中的默認值是內(nèi)聯(lián)。"> display :none 隱藏屏幕閱讀器的內(nèi)容。 除非當(dāng)然，有一個很好的理由，你希望這個內(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í)行此操作。 視力受損的用戶可能希望在他們訪問的所有網(wǎng)站上使文本更大，或者具有嚴重色彩缺陷的用戶可能想將所有網(wǎng)站以高對比度的顏色容易看到。 無論什么需要，你應(yīng)該是舒適的，使你的設(shè)計靈活，以便這樣的變化將在您的設(shè)計中工作。 例如，你可能想要確保主內(nèi)容區(qū)域可以處理更大的文本(也許它會開始滾動，以允許它所有被看到)，而不是只是隱藏它，或完全打破。

JavaScript

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

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

簡單的內(nèi)容和功能可以容易地被訪問 - 例如文本，圖像，表格，窗體和按鈕激活功能。 當(dāng)我們在 HTML:良好的輔助功能基礎(chǔ)上查看時，關(guān)鍵的注意事項是:

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

WebGL\">復(fù)雜的功能(如3D游戲)不容易訪問 - 使用 WebGL 創(chuàng)建的復(fù)雜3D游戲 will be rendered on a a>將顯示在腳本(通常是JavaScript)，例如，它可以用來繪制圖形，做照片組合甚至執(zhí)行動畫。你可以(并且應(yīng)該)在畫布塊中提供替代內(nèi)容。<canvas> element, which has no facility at this time to provide text alternatives or other information for severely visually impaired users to\">不支持畫布和禁用JavaScript的瀏覽器"> < canvas> 元素，它目前沒有為嚴重視力受損的用戶提供文本替代或其他信息的功能利用?？梢誀幷摰氖?，這樣的游戲并不真正讓這群人作為其主要目標(biāo)受眾的一部分，期望你讓盲人百分百訪問是不合理的，但你可以實現(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)用戶可以使用，并使顏色方案對比足夠以供具有色彩缺陷的人使用。

JavaScript太多的問題

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

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

保持它不引人注目

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

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

這種表單驗證是不顯眼的 - 你仍然可以使用形式絕對精細，沒有JavaScript可用，任何明智的形式實現(xiàn)將有服務(wù)器端驗證活躍，因為它是太容易惡意用戶繞過客戶端 驗證(例如，通過在瀏覽器中關(guān)閉JavaScript)。 客戶端驗證對報告錯誤仍然非常有用，用戶可以立即知道他們犯的錯誤，而不必等待服務(wù)器的往返和頁面重新加載。 這是一個明確的可用性優(yōu)勢。

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

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

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

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();
  }
}

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

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

對于在表單提交時沒有填寫值的每個輸入，我們創(chuà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);
}

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

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

最后，我們在演示中使用了一些WAI-ARIA屬性來幫助解決由內(nèi)容區(qū)域不斷更新而無需重新加載頁面導(dǎo)致的輔助功能問題(屏幕閱讀器不會選擇此選項或默認情況下提醒用戶):

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

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

其他JavaScript可訪問性問題

在實現(xiàn)JavaScript和思考可訪問性時，還需要注意其他事情。 我們將添加更多，因為我們找到他們。

mouse-specific events

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

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

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

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

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

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

當(dāng)鼠標(biāo)指針懸停在縮略圖上并停止在縮略圖上時，前兩行將運行函數(shù)。 這將不允許我們通過鍵盤訪問縮放視圖 - 為了允許，我們已經(jīng)包括最后兩行，當(dāng)圖像聚焦和模糊(當(dāng)焦點停止時運行功能)。 這可以通過在圖像上標(biāo)簽，因為我們已經(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)頁上使用的輔助功能問題的詳細和了解。

接下來，WAI-ARIA！