哪些 HTML 功能可以提高網頁可訪問性？

以下內容描述了 HTML 的一些特定功能，這些功能應該用於使網頁更容易被不同殘疾人訪問。

連結文字

如果你的連結不是自描述的，或者連結目標需要更詳細的解釋，你可以使用 aria-label 或 aria-labelledby 屬性為連結新增資訊。

html
<p>
  I'm really bad at writing link text.
  <a
    href="inept.html"
    aria-label="Why I'm rubbish at writing link text: An explanation and an apology."
    >Click here</a
  >
  to find out more.
</p>
<p>
  I'm really <span id="incompetence">bad at writing link text</span>.
  <a href="inept.html" aria-labelledby="incompetence">Click here</a> to find out
  more.
</p>

請注意，大多數情況下，最好編寫有用的連結文字

html
<p>
  I wrote a
  <a href="capable.html">blog post about how good I am at writing link text</a>.
</p>

為了幫助使用者使用 Tab 鍵導航，你可以提供 跳過連結，允許使用者跳過網頁上的某些部分。你可能希望允許使用者跳過在每個頁面上都出現的眾多導航連結。這使鍵盤使用者能夠快速跳過重複的內容，直接跳轉到頁面的主要內容。

html
<header>
  <h1>The Heading</h1>
  <a href="#content">Skip to content</a>
</header>

<nav>
  <!-- navigation stuff -->
</nav>

<section id="content">
  <!--your content -->
</section>

影像的 alt 屬性

每個影像都應該有一個 alt 屬性。如果影像純粹是裝飾性的，並且不向文件的內容或上下文新增任何意義，則 alt 屬性應該存在，但為空。你也可以選擇新增 role="presentation"。所有其他影像都應該包含一個 alt 屬性，該屬性提供 描述影像的替代文字，以便能夠閱讀其他內容但無法看到影像的使用者能夠理解。想想你會如何向無法載入影像的人描述影像：你應該將這些資訊作為 alt 屬性的值包含在內。

html
<!-- decorative image -->
<img alt="" src="blueswish.png" role="presentation" />
<img
  alt="The Open Web Docs logo: Carle the book worm smiling"
  src="carle.svg"
  role="img" />

同一內容的 alt 屬性可能因上下文而異。在以下示例中，使用動畫 GIF 而不是進度條來顯示文件載入進度的動畫，該文件教開發人員如何使用 HTML <progress> 元素。

html
<img alt="20% complete" src="load-progress.gif" />
<img
  alt="The progress bar is a thick green square to the left of the thumb and a thin grey line to the right. The thumb is a circle with a diameter the height of the green area."
  src="screenshot-progressbar.png" />

ARIA role 屬性

預設情況下，HTML 中的所有語義元素都具有 role；例如，<input type="radio"> 具有 radio 角色。HTML 中的非語義元素沒有角色。ARIA 角色可用於描述 HTML 中不存在的元素，例如 tablist 小部件。角色對於那些存在但尚未得到所有瀏覽器完全支援的新元素也很有用。例如，在使用 SVG 影像時，在開始標籤中新增 role="img"，因為存在 SVG VoiceOver 漏洞，導致 VoiceOver 無法正確宣佈 SVG 影像。

html
<img src="mdn.svg" alt="MDN logo" role="img" />