HTML: A good basis for accessibility

HTML和輔助功能

當(dāng)你了解更多的HTML - 閱讀更多的資源，看看更多的例子，等等 - 你會看到一個共同的主題，使用語義HTML(有時稱為POSH或簡單的語義HTML)的重要性。 這意味著盡可能使用正確的HTML元素用于正確的目的。

你可能想知道為什么這么重要。 畢竟，你可以使用CSS和JavaScript的組合，使任何HTML元素以任何你想要的方式行為。 例如，在您的網(wǎng)站上播放視頻的控制按鈕可以標(biāo)記為:

<div>Play video</div>

但是，正如你稍后將更詳細(xì)地看到的，使用正確的元素為作業(yè)是很有意義的:

<button>Play video</button>

不僅HTML < button> 在默認(rèn)情況下應(yīng)用了一些合適的樣式(您可能想要覆蓋)，它們還具有內(nèi)置的鍵盤輔助功能 - 它們可以在選項卡之間 使用Return / Enter。

語義HTML比非語義(壞)標(biāo)記花費的時間更長，如果你從項目開始就一直這樣做，并且它還具有超出可訪問性的其他好處:

1. Easier to develop with — as mentioned above, you get some functionality for free, plus it is arguably easier to understand.
2. Better on mobile — semantic HTML is arguably lighter in file size than non-semantic spaghetti code, and easier to make responsive.
3. Good for SEO — search engines give more importance to keywords inside headings, links, etc., than keywords included in non-semantic <div>s, etc., so your documents will be more findable by customers.

讓我們更加詳細(xì)地看看可訪問的HTML。

良好的語義

我們已經(jīng)談到了良好語義的重要性，以及為什么我們應(yīng)該使用正確的HTML元素為正確的工作。 這不能被忽略，因為它是主要的地方之一，如果沒有正確處理可訪問性嚴(yán)重破壞。

在網(wǎng)絡(luò)上，事實是，人們做一些很奇怪的事情與HTML標(biāo)記。 一些HTML的濫用是由于遺留的做法，沒有被完全忘記，有些只是純粹的無知。 無論如何，你應(yīng)該在任何你看到它，無論什么時候替換這樣的壞代碼。

有時，您并不總是能夠擺脫不良的標(biāo)記 - 您的網(wǎng)頁可能是由您無法完全控制的某種服務(wù)器端框架生成的，或者您的網(wǎng)頁上可能包含第三方內(nèi)容(例如 作為廣告橫幅)，你不能控制。

目標(biāo)不是"全有或全無"，但是 - 你能夠做的每一個改進將有助于無障礙的原因。

文本內(nèi)容

屏幕閱讀器用戶可以擁有的最佳輔助輔助工具之一是標(biāo)題，段落，列表等的良好的內(nèi)容結(jié)構(gòu)。一個好的語義示例可能如下所示:

<h1>My heading</h1>

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

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

<ol>
  <li>Here is</li>
  <li>a list for</li>
  <li>you to read</li>
</ol>

<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>

我們準(zhǔn)備了一個更長的文本版本供您使用屏幕閱讀器進行試用(請參閱 "external"> good-semantics.html )。 如果您嘗試通過此導(dǎo)航，您會看到這是很容易導(dǎo)航:

1. The screenreader reads each header out as you progress through the content, notifying you what is a heading, what is a paragraph, etc.
2. It stops after each element, letting you go at whatever pace is comfortable for you.
3. You can jump to next/previous heading in many secreenreaders.
4. You can also bring up a list of all headings in many screenreaders, allowing you to use them like a handy table of contents to find specific content.

人們有時使用演示HTML和換行符來編寫標(biāo)題，段落等，如下所示:

<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>
1. Here is
<br><br>
2. a list for
<br><br>
3. you to read
<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.

如果您使用屏幕閱讀器嘗試我們的較長版本(請參閱錯誤語義 .html )，你不會有一個很好的經(jīng)驗 - screenreader沒有任何東西用作路標(biāo)，所以你不能檢索一個有用的目錄，而整個頁面被視為一個 單個巨型塊，所以它只是一次讀出，一次。

除了可訪問性之外還有其他問題 - 使用CSS對內(nèi)容進行風(fēng)格化或使用JavaScript進行操作更加困難，因為沒有元素可以用作選擇器。

Using clear language

您使用的語言也會影響輔助功能。 一般來說，你應(yīng)該使用清晰的語言，不要過于復(fù)雜，不要使用不必要的行話或俚語。 這不僅有益于認(rèn)知或其他殘疾的人; 它有利于讀者，他們的文本不是用他們的第一語言寫的，年輕的人...事實上每個人！ 除此之外，你應(yīng)該盡量避免使用不能被屏幕閱讀器清楚地讀出的語言和字符。 例如:

• Don't use dashes if you can avoid it. Instead of writing 5–7, write 5 to 7.
• Expand abbreviations — instead of writing Jan, write January.
• Expand acronyms, at least once or twice. Instead of writing HTML in the first instance, write Hypertext Markup Language, or HTML.

頁面布局

在糟糕的舊時代，人們習(xí)慣于使用HTML表格創(chuàng)建頁面布局 - 使用不同的表格單元格來包含頁眉，頁腳，邊欄，主要內(nèi)容列等。這不是一個好主意，因為屏幕閱讀器可能會讓人困惑 讀取，特別是如果布局是復(fù)雜的并且有很多嵌套表。

嘗試我們的示例 table-layout.html 示例，其中 看起來像這樣:

<table width="1200">
      <!-- main heading row -->
      <tr id="heading">
        <td colspan="6">

          <h1 align="center">Header</h1>

        </td>
      </tr>
      <!-- nav menu row  -->
      <tr id="nav" bgcolor="#ffffff">
        <td width="200">
          <a href="#" align="center">Home</a>
        </td>
        <td width="200">
          <a href="#" align="center">Our team</a>
        </td>
        <td width="200">
          <a href="#" align="center">Projects</a>
        </td>
        <td width="200">
          <a href="#" align="center">Contact</a>
        </td>
        <td width="300">
          <form width="300">
            <input type="search" name="q" placeholder="Search query" width="300">
          </form>
        </td>
        <td width="100">
          <button width="100">Go!</button>
        </td>
      </tr>
      <!-- spacer row -->
      <tr id="spacer" height="10">
        <td>

        </td>
      </tr>
      <!-- main content and aside row -->
      <tr id="main">
        <td id="content" colspan="4" bgcolor="#ffffff">

          <!-- main content goes here -->
        </td>
        <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top">
          <h2>Related</h2>

          <!-- aside content goes here -->

        </td>
      </tr>
      <!-- spacer row -->
      <tr id="spacer" height="10">
        <td>

        </td>
      </tr>
      <!-- footer row -->
      <tr id="footer" bgcolor="#ffffff">
        <td colspan="6">
          <p>?Copyright 2050 by nobody. All rights reversed.</p>
        </td>
      </tr>
    </table>

如果你試圖使用屏幕閱讀器進行導(dǎo)航，它可能會告訴你有一個表要查看(雖然一些屏幕閱讀器可以猜測表布局和數(shù)據(jù)表之間的區(qū)別)。 然后，你可能(取決于你使用的是什么屏幕閱讀器)必須作為一個對象進入表格，并分別查看其功能，然后再次離開表格，繼續(xù)導(dǎo)航內(nèi)容。

表格布局是過去的遺跡 - 當(dāng)CSS支持在瀏覽器中不普遍時，它們有意義，但是它們對screenreader用戶造成混亂，以及由于許多其他原因(濫用表，可能需要更多的標(biāo)記，make 設(shè)計更不靈活)。 不要這樣做！

您可以通過將您以前的體驗與更現(xiàn)代的 網(wǎng)站結(jié)構(gòu)示例，它可能看起來像這樣:

<header>
  <h1>Header</h1>
</header>

<nav>
  <!-- main navigation in here -->
</nav>

<!-- Here is our page's main content -->
<main>

  <!-- It contains an article -->
  <article>
    <h2>Article heading</h2>

    <!-- article content in here -->
  </article>

  <aside>
    <h2>Related</h2>

    <!-- aside content in here -->
  </aside>

</main>

<!-- And here is our main footer that is used across all the pages of our website -->

<footer>
  <!-- footer content in here -->
</footer>

如果你使用屏幕閱讀器嘗試我們更現(xiàn)代的結(jié)構(gòu)示例，你會看到布局標(biāo)記不再妨礙和混淆內(nèi)容讀出。 它在代碼大小方面也更精簡和更小，這意味著更容易維護代碼，并且用戶下載的帶寬更小(對于緩慢連接上的那些特別普遍)。

content sectioning\">創(chuàng)建布局時的另一個考慮因素是使用HTML5語義元素，如上例所示(請參閱內(nèi)容分段) — you can create a layout using only nested <div&gt\">) - 您只能使用嵌套的 < div> elements, but it is better to use appropriate sectioning elements to wrap your main navigation (; 元素，但最好使用適當(dāng)?shù)膕ectioning元素來包裝您的主導(dǎo)航(<nav>), footer (/ Element / nav"> < nav> )，頁腳(<footer>), repeating content units (元素/頁腳"> < footer> )，重復(fù)內(nèi)容單元(<article>), etc. These provide extra semantics for screenreaders (and other tools) to give user extra clues about the content they are navigating (see / element / article"> < article> )等。這些為屏幕閱讀器(和其他工具)提供了額外的語義以向用戶提供關(guān)于他們正在瀏覽的內(nèi)容的額外線索Screen Reader Support for new\">a class ="external">屏幕閱讀器支持新的 for an idea of what screen reader support is like).\">HTML5部分元素，了解什么是屏幕閱讀器支持)。

UI控件

通過UI控件，我們指的是用戶交互的Web文檔的主要部分 - 最常見的是按鈕，鏈接和表單控件。 在本節(jié)中，我們將介紹創(chuàng)建此類控件時需要注意的基本輔助功能問題。 后來關(guān)于WAI-ARIA和多媒體的文章將討論UI可訪問性的其他方面。

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

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

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

您基本上可以免費獲得此行為，只需使用適當(dāng)?shù)脑丶纯伞?/p>

<h1>Links</h1>

<p>This is a link to <a  rel="external nofollow" target="_blank" >Mozilla</a>.</p>

<p>Another link, to the <a  rel="external nofollow" target="_blank" >Mozilla Developer Network</a>.</p>

<h2>Buttons</h2>

<p>
  <button data-message="This is from the first button">Click me!</button>
  <button data-message="This is from the second button">Click me too!</button>
  <button data-message="This is from the third button">And me!</button>
</p>

<h2>Form</h2>

<form>
? <div>
??? <label for="name">Fill in your name:</label>
 ?? <input type="text" id="name" name="name">
? </div>
? <div>
??? <label for="age">Enter your age:</label>
??? <input type="text" id="age" name="age">
? </div>
? <div>
??? <label for="mood">Choose your mood:</label>
??? <select id="mood" name="mood">
????? <option>Happy</option>
????? <option>Sad</option>
????? <option>Angry</option>
????? <option>Worried</option>
??? </select>
? </div>
</form>

然而，再次的情況是，人們有時用HTML做奇怪的事情。 例如，有時您會看到使用 < div> > ，例如:

<div data-message="This is from the first button">Click me!</div>
<div data-message="This is from the second button">Click me too!</div>
<div data-message="This is from the third button">And me!</div>

但不建議使用此類代碼 - 如果您剛剛使用 元素/按鈕"> < button> 元素，此外，您沒有獲得任何默認(rèn)的CSS樣式的按鈕。

Building keyboard accessibility back in

將這些優(yōu)點添加回來需要一些工作(您可以在我們的 -div-buttons.html"class ="external-icon external"> fake-div-buttons.html 示例 - 也可以查看 /blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html"class ="external-icon external">源代碼)。 在這里，我們通過給每個屬性 tabindex ="0"賦予我們假的< div>

<div data-message="This is from the first button" tabindex="0">Click me!</div>
<div data-message="This is from the second button" tabindex="0">Click me too!</div>
<div data-message="This is from the third button" tabindex="0">And me!</div>

基本上， tabindex 屬性主要 旨在允許可重繪元素具有自定義的Tab順序(以正數(shù)字順序指定)，而不僅僅是以默認(rèn)源順序標(biāo)簽。 這幾乎總是一個壞主意，因為它可能造成嚴(yán)重的混亂。 只有當(dāng)你真的需要時才使用它，例如如果布局以與源代碼非常不同的視覺順序顯示事物，并且希望使事情在邏輯上更加工作。 tabindex 有兩個其他選項:

• tabindex="0" — as indicated above, this value allows elements that are not normally tabbable to become tabbable. This is the most useful value of tabindex.
• tabindex="-1" — this allows not normally tabbable elements to receive focus programmatically, e.g. via JavaScript, or as the target of links.?

雖然上面的添加允許我們標(biāo)簽到按鈕，它不允許我們通過Enter / Return鍵激活它們。 要做到這一點，我們不得不添加以下位的JavaScript詭計:

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

這里我們向 document 對象添加一個監(jiān)聽器來檢測在鍵盤上按下按鈕的時間。 我們通過事件對象的 keyCode 代碼>屬性; 如果它是匹配Return / Enter的鍵碼，我們使用 document.activeElement.onclick()運行存儲在按鈕的 onclick activeElement 為我們提供了當(dāng)前關(guān)注的元素 在頁面上。

這是一個很多額外的麻煩，建立的功能回來。有一定的其他問題。 最好只是在正確的工作中使用正確的元素。

Meaningful text labels

UI控件文本標(biāo)簽對所有用戶都非常有用，但讓他們正確對于殘疾用戶尤其重要。

您應(yīng)該確保您的按鈕和鏈接文字標(biāo)簽是可理解和獨特的。 不要只是使用"點擊這里"為您的標(biāo)簽，作為screenreader用戶有時拿起一個按鈕和表單控件的列表。 以下屏幕截圖顯示了Mac上的VoiceOver列出了我們的控件。

>

確保你的標(biāo)簽在上下文中是有意義的，自己閱讀，以及在它們所在的段落的上下文中。例如，下面顯示了一個好的鏈接文本的例子:

<p>Whales are really awesome creatures. <a href="whales.html">Find out more about Whales</a>.</p>

但這是壞鏈接文本:

<p>Whales are really awesome creatures. To find more out about Whales, <a href="whales.html">click here</a>.</p>

表單標(biāo)簽也很重要，給你一個線索你需要輸入到每個表單輸入。 以下似乎是一個足夠合理的例子:

Fill in your name: <input type="text" id="name" name="name">

但是，這對殘疾用戶不那么有用。 上述示例中沒有任何內(nèi)容可以將標(biāo)簽明確地與表單輸入關(guān)聯(lián)，并清楚地說明如果您看不到它，如何填寫它。 如果您通過某些屏幕閱讀器訪問此類廣告，則系統(tǒng)只會向您提供"編輯文字"一行的說明。

下面是一個更好的例子:

<div>
  <label for="name">Fill in your name:</label>
  <input type="text" id="name" name="name">
</div>

使用這樣的代碼，標(biāo)簽將清楚地與輸入相關(guān)聯(lián); 該描述將更像"填寫您的姓名:編輯文本"。

作為一個額外的好處，在大多數(shù)瀏覽器中，將標(biāo)簽與表單輸入相關(guān)聯(lián)意味著您可以單擊標(biāo)簽來選擇/激活表單元素。 這為輸入提供了更大的命中區(qū)域，使其更容易選擇。

可訪問的數(shù)據(jù)表

基本數(shù)據(jù)表可以用非常簡單的標(biāo)記來編寫，例如:

<table>
  <tr>
    <td>Name</td>
    <td>Age</td>
    <td>Gender</td>
  </tr>
  <tr>
    <td>Gabriel</td>
    <td>13</td>
    <td>Male</td>
  </tr>
  <tr>
    <td>Elva</td>
    <td>8</td>
    <td>Female</td>
  </tr>
  <tr>
    <td>Freida</td>
    <td>5</td>
    <td>Female</td>
  </tr>
</table>

但這有問題 - 屏幕閱讀器用戶沒有辦法將行或列聯(lián)合在一起作為數(shù)據(jù)分組 - 要做到這一點，你需要知道標(biāo)題行是什么，如果他們是向上的行，列等。 這只能在上表中直觀顯示(請參見壞表 .html ，然后自己嘗試一下例子)。

現(xiàn)在，請查看我們的 外部">朋克表表示例 - 您可以在這里看到幾個輔助工具:

• Table headers are defined using <th> elements — you can also specify if they are headers for rows or columns using the scope attribute. This gives you complete groups of data that can be consumed by screen readers as single units.
• The <caption> element and <table> summary attribute both do similar jobs — they act as alt text for a table, giving a screen reader user a useful quick summary of the table's contents. <caption> is generally preferred as it makes it's content accessible to sighted users too, who might also find it useful. You don't really need both.

文本替代

雖然文本內(nèi)容是固有地可訪問的，但是對于多媒體內(nèi)容來說同樣沒有必要說明 - 視覺障礙的人不能看到圖像/視頻內(nèi)容，并且聽覺受損的人不能聽到音頻內(nèi)容。 我們稍后將在"無障礙"多媒體文章中詳細(xì)介紹視頻和音頻內(nèi)容，但對于本文，我們將介紹無障礙的 / Web / HTML / Element / img"> < img> 元素。

我們寫了一個簡單的例子， accessible-image.html a>，其中包含同一圖像的四個副本:

<img src="dinosaur.png">

<img src="dinosaur.png"
     >

<img src="dinosaur.png"
     
     title="The Mozilla red dinosaur">


<img src="dinosaur.png" aria-labelledby="dino-label">

<p id="dino-label">The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p>

第一個圖像，當(dāng)由屏幕閱讀器查看時，并不真正提供用戶很多幫助 - VoiceOver例如讀出"/dinosaur.png，image"。 它讀出文件名嘗試提供一些幫助，所以用戶至少知道它是某種恐龍，但他們可能想要一些更多的細(xì)節(jié)。

當(dāng)一個屏幕閱讀器遇到第二個圖像，它讀出了完整的alt屬性 - "一個紅色的暴龍雷克斯:一個兩腿的恐龍直立像一個人，小臂，一個大頭，有很多的鋒利的牙齒。

這突出顯示了不僅在所謂的替換文本不可用時使用有意義的文件名，而且盡可能確保在 alt 屬性中提供替代文本的重要性 。 請注意， alt 屬性的內(nèi)容應(yīng)該始終提供圖像的直接表示以及它在視覺上傳達(dá)的內(nèi)容。 任何個人知識或額外的描述不應(yīng)該包括在這里，因為它對沒有碰到過的形象的人沒有用。

有一件事要考慮的是你的圖像在你的內(nèi)容中有意義，還是他們純粹是視覺裝飾，所以沒有意義。 如果他們是裝飾的，最好只是將它們包括在頁面中作為CSS背景圖像。

如果你想提供額外的上下文信息，你應(yīng)該將它放在圖像周圍的文本中，或者放在一個 title 屬性中，如上所示。 在這種情況下，大多數(shù)屏幕閱讀器將讀出alt文本，title屬性和文件名。 此外，瀏覽器在鼠標(biāo)懸停時顯示標(biāo)題文本作為工具提示。

讓我們再看一下第四種方法:

<img src="dinosaur.png" aria-labelledby="dino-label">

<p id="dino-label">The Mozilla red Tyrannosaurus ... </p>

在這種情況下，我們不使用 alt 屬性 - 而是，我們已經(jīng)將圖像的描述呈現(xiàn)為常規(guī)文本段落，給定一個 id 然后使用 aria-labelledby 屬性引用 id ，這會導(dǎo)致屏幕閱讀器使用該段落作為該圖像的替代文本/標(biāo)簽。 如果您想要使用與多個圖片的標(biāo)簽相同的文字，這是非常有用的 - 這是使用 alt 是不可能的。

其他文本替代機制

圖像還具有可用于提供描述性文本的另一機制。 例如，有一個 longdesc 屬性，用于指向包含圖像的擴展描述的單獨的Web文檔，例如:

<img src="dinosaur.png" longdesc="dino-info.html">

這聽起來像一個好主意，特別是對于信息圖表，大圖表有很多信息可能被表示為一個可訪問的數(shù)據(jù)表(見上一節(jié))。 但是，screenreaders不支持 longdesc ，并且非屏幕閱讀器用戶完全無法訪問該內(nèi)容。 可以說更好的方法是將長描述包含在與圖像相同的頁面上，或者使用常規(guī)鏈接鏈接到該圖像。

HTML5包含兩個新元素: < figure> >和 < figcaption> - 這是 應(yīng)該將某種形式的圖形(它可以是任何東西，不一定是圖像)與圖形標(biāo)題相關(guān)聯(lián):

<figure>
  <img src="dinosaur.png">
  <figcaption>A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</figcaption>
</figure>

不幸的是，大多數(shù)屏幕閱讀器似乎并沒有將圖形字幕與它們的數(shù)字相關(guān)聯(lián)，但是元素結(jié)構(gòu)對于CSS樣式很有用，此外它還提供了一種在源中對圖像進行描述的方法。

概要

你現(xiàn)在應(yīng)該精通在大多數(shù)情況下編寫可訪問的HTML。 我們的WAI-ARIA基礎(chǔ)文章也將填補這方面的一些空白，但這篇文章已經(jīng)照顧了基礎(chǔ)。 接下來，我們將探討CSS和JavaScript，以及無障礙如何影響他們的好或壞的使用。