可存取的輸入元素 |基礎知識

TL;DR:無論組件有多小，請務必確保在實現時考慮各種不同的使用者及其能力。乍一看，諸如複選框之類的輸入元素似乎是一個簡單的解決方案 - 但為了確保它們可訪問，仍然需要考慮一些事情。

本系列將解決不同類型的輸入元素以及如何使它們更易於訪問，從基礎知識開始：使用正確的輸入類型並關聯標籤。

我們來看看。

選擇正確的輸入類型

在 HTML 中使用輸入元素時，我們希望確保始終為對應元素設定正確的輸入類型。預設輸入類型是文本，可以在多種情況下使用，但盡可能具體可以幫助所有您的用戶 - 並且附帶一系列固有功能。 例如，定義一個數字輸入字段，打開手機上的數字鍵盤而不是鍵盤，您可以使用最小和最大數字來限制範圍。 封鎖對應的輸入，從而保護使用者的隱私。根據瀏覽器的不同，開啟日期選擇器，...等等。透過選擇正確的輸入類型，我們可以讓自己的生活變得更輕鬆，能夠使用 HTML 中的某些繼承功能，同時改善使用者體驗。

確保始終有一個與您的輸入元素關聯的標籤

無論您使用什麼類型的輸入，請確保將標籤與輸入欄位相關聯。通常，這可以透過 來完成。元素和 for 屬性。

<label for="firstname">First name:</label>
<input type="text" name="firstname">



<h3>
  
  
  aria-label vs. aria-labelledby
</h3>

<p>In a case in which a visual label is not an option or can't be associated with input element in the above mentioned way, aria-labels can also be used to identify form controls. If you are familiar with ARIA a little bit, you may be aware that the preferred option, if possible, is to work without aria whenever possible - however, in the real life of course, this isn't always feasible. </p>

<h4>
  
  
  aria-label
</h4>

<p>An aria-label can be used when no visible text label is present, for example, when an icon button is used without any text.<br>
</p>

<pre class="brush:php;toolbar:false"><button aria-label="Search"><img src="search-icon.svg" alt=""></button>

詠嘆調標籤

當另一個元素用作標記輸入的參考時，aria-labelledby 會派上用場。

<div role="dialog">



<p>只要有可能，請嘗試使用語意 HTML 為您的輸入元素提供可存取的名稱。只有當您確定在這種特定情況下不可能時，才恢復使用 aria 屬性。 </p>

<p>一旦我們掌握了這些基礎知識，例如使用語義結構、添加正確的輸入類型和關聯標籤，我們就可以仔細研究使輸入元素更易於訪問的其他方面，例如禁用的輸入元素，焦點樣式和顏色對比以及預期的鍵盤導航。 </p>

<p><strong>資源：</strong></p>

<ul>
<li>W3Schools：HTML 輸入類型</li>
<li>標籤控制項 - W3 </li>
<li>A11y Collective - Aria-label 與 aria-labelledby</li>
</ul>


          </div>

            
        

以上是可存取的輸入元素 |基礎知識的詳細內容。更多資訊請關注PHP中文網其他相關文章！