哪些 HTML 功能可以提高可訪問性？
以下內容描述了 HTML 的具體功能，這些功能應被用來使網頁更容易被不同殘障人士訪問。
連結文字
如果您的連結不是自描述性的，或者連結目標可以透過更詳細的說明來改進，您可以使用 aria-label 或 aria-labelledby 屬性為連結新增資訊。
<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>
請注意，大多數情況下，最好還是編寫有用的連結文字。
<p>
I wrote a
<a href="capable.html">blog post about how good I am at writing link text</a>.
</p>
跳過連結
為了方便鍵盤標籤頁導航，您可以提供一個 跳過連結，讓使用者可以跳過網頁中的某些內容塊。您可能希望允許使用者跳過頁面上重複出現的導航連結。這使得鍵盤使用者能夠快速跳過重複內容，直接轉到頁面的主內容。
<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 屬性值包含的資訊。
<!-- 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> 元素。
<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 影像。
<img src="mdn.svg" alt="MDN logo" role="img" />