在快節奏的Web開發世界中，很容易被最新的框架，庫和尖端技術所吸引。但有時最有影響力的改進來自於重新審視基本面。
在本篇博文中，我將向您介紹五種 HTML 屬性，它們不僅能提高可訪問性，還能增強整體使用者體驗。無論您是經驗豐富的開發人員還是剛剛起步，讓我們一起探索這些元素的潛力，創造更具包容性的web體驗。
1. hreflang
hreflang屬性指定<a>或<link>元素上鍊接資源的語言。它的工作原理類似於lang屬性，但專門用於連結。
為什麼使用 hreflang?
您可以透過在內部和外部網站連結中使用hreflang來改善使用者體驗和SEO。
在內部網站連結上使用hreflang提供了一種方法，可以告訴搜尋引擎其他語言或地區的頁面的不同變化。這意味著講英語的人將收到該網站的英文版，而講瑞典語的人將收到瑞典文版。使用者端無需手動切換，體驗更加流暢。
如何使用 hreflang
將帶有所需ISO語言程式碼的hreflang屬性新增到<a>元素中。對於英文網站則是en。
<a href="https://example.com" hreflang="en">English Website</a>您也可以使用更具體的語言程式碼，並使用區域變化。例如我們可以為英式英語新增en-GB。
<a href="https://example.at" hreflang="en-GB">English Website</a>如果您的網站提供多種語言版本，您可以使用hreflang指定與特定URL關聯的文件的語言和區域。新增該屬性將有助於搜尋引擎瞭解不同網頁版本的語言和區域定位。
在每個連結中新增帶有所需語言程式碼的hreflang。一個連結應該作為預設的後備版本，透過新增hreflang="x-default"而不是語言程式碼來識別。最後對於語言切換器中的每個連結，將rel屬性的值設定為"alternate"，以指示所連結的頁面是當前頁面的替代頁面。
<link href="https://example.com" rel="alternate" hreflang="x-default" /> <link href="https://example.com/de" rel="alternate" hreflang="de" />您也可以在語言切換器中使用hreflang。
<a href="https://example.com" hreflang="x-default">English</a> <a href="https://example.com/de" hreflang="de">German</a>有時語言切換者使用他們切換到的語言中的連結文字。您可以透過額外使用lang屬性來指示這一點。
<a href="https://example.com" hreflang="x-default">English</a> <a href="https://example.com/de" hreflang="de" lang="de">Deutsch</a>注意：新增lang屬性對於輔助技術使用者尤其重要。例如螢幕閱讀器會根據語言屬性更改其聲音和發音。
增強可訪問性的另一種方法是將aria-current="true"包含到當前活動的連結中。
<a href="https://example.com" hreflang="x-default" aria-current="true">English</a> <a href="https://example.com/de" hreflang="de" lang="de">Deutsch</a>2. translate
translate屬性用於指示元素是否應該被翻譯。
為什麼使用 translate?
預設情況下，大多數網站文字都是可翻譯的（除了一些例外，例如影像上或SVG中的文字）。如果網站的定義語言與瀏覽器的預設語言不同，翻譯工具（如Google翻譯）可能會建議翻譯頁面內容。
但可能存在這種行為是不需要的情況。公司名稱、電子郵件地址或程式碼示例等特定術語通常不應翻譯，以避免混淆。自動翻譯並不總是完全準確的，特別是對於小眾詞彙或技術詞彙。
如何使用 translate
您可以在任何HTML元素上使用translate。指定一個空字串（""）或yes用於翻譯，而no用於避免翻譯。
<!-- 德語原文 --> <p> <span>Wien<span> ist (wieder) die lebenswerteste Stadt der Welt! </p> <p> <span translate="no">Wien<span> ist (wieder) die lebenswerteste Stadt der Welt! </p> <!-- 翻譯後 --> <p> <span>Vienna<span> named world's most liveable city (again)! </p> <p> <span translate="no">Wien<span> named world's most liveable city (again)! </p>3. reversed
reversed屬性用於以相反的順序顛倒有序列表（<ol>）。
為什麼使用 reversed?
使用reversed屬性可以保持視覺和語義列表項的順序相同，但它們從最高到最低編號。這意味著將此屬性新增到您的有序列表（<ol>）不會反轉列表項，而只是反轉列表編號。例如你想倒數你最喜歡的五種甜點，這種行為是很有幫助的。但是reversed屬性不影響無序列表（<ul>）。
如何使用 reversed
將reversed屬性新增到列表元素中。
<ol reversed> <li>Cookies</li> <li>Crema Catalana</li> <li>Tiramisu</li> <li>Pastel de Nata</li> <li>Sacher cake</li> </ol>這將導致以下反轉列表：
-
- Cookies
-
- Crema Catalana
-
- Tiramisu
-
- Pastel de Nata
-
- Sacher cake
4. controls
controls屬性指示瀏覽器顯示標準的影片或音訊控制元件。
為什麼使用 controls?
在您的影片和音訊內容中包含播放控制對於最佳化使用者體驗、可訪問性和可用性至關重要。這些控制元件使使用者能夠停止或調整影片/聲音播放，並幫助那些在瀏覽您的網站時可能會出現暈動病或分心的人。
預設控制元件包括播放、暫停、搜尋（移動位置）和音量等播放要素，以及僅用於影片內容的全屏切換、字幕/字幕和跟蹤。
注意：應謹慎使用作為預設值提供的瀏覽器控制元件。有時基於鍵盤的導航可能會導致問題，例如失去焦點，迫使使用者重新定位自己。考慮實現自定義控制元件或整合配備輔助功能的外部媒體播放器。不過，有控制比沒有控制更好。
如何使用 controls
您可以將controls屬性新增到<video>或<audio>元素。
<video controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <track kind="captions" src="sampleCaptions.vtt" srclang="en" /> <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en" /> <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de" /> Your browser does not support the video tag. </video>注意：預設控制元件不能使用CSS樣式化。
5. autocomplete
autocomplete屬性使瀏覽器能夠自動完成表單值，並可應用於<form>、<input>、<select>和<textarea>元素。
為什麼使用 autocomplete?
有了autocomplete屬性，瀏覽器可以建議以前使用者輸入表單欄位的值，這意味著使用者不必記住或手動輸入個人資訊。這對有認知障礙、行動不便、注意力缺陷、視力低下或失明的人有顯著的好處。有些人可能會發現減少表單中的手動輸入特別有益，因為它減少了大量打字的需要。
autocomplete屬性透過通知瀏覽器和輔助技術有關特定表單欄位的預期用途，為使用者提高HTML表單的可用性和效率。螢幕閱讀器使用這些自動完成值來了解輸入欄位的性質，並幫助使用者更有效地輸入資訊。例如使用者的瀏覽器已經儲存了特定欄位的資訊（例如他們的姓名或電子郵件），螢幕閱讀器將提示他們自動填寫該資訊。
如何使用 autocomplete
您可以為autocomplete指定不同的值。
如果選擇off，瀏覽器將無法自動輸入或選擇此欄位的值。
<label for="email">E-Mail</label> <input name="email" id="email" type="email" autocomplete="off" />如果選擇on，瀏覽器將自動完成輸入。不過由於沒有提供有關預期資料的進一步資訊，瀏覽器可能會自行判斷。
<form action="/" autocomplete="on"> <label for="firstname">First Name</label> <input type="text" name="firstname" id="firstname" /> <label for="lastname">Last Name</label> <input type="text" name="lastname" id="lastname" /> <label for="email">Email</label> <input type="email" name="email" id="email" /> </form>最佳解決方案是透過從可用輸入目的列表中選擇相應的值來為所需資料指定不同的值。
您的表單可能看起來像這樣：
<form action="/" autocomplete="on"> <label for="firstName">First Name</label> <input autocomplete="given-name" name="firstName" id="firstName" type="text" /> <label for="lastName">Last Name</label> <input autocomplete="family-name" name="lastName" id="lastName" type="text" /> <label for="email">Email</label> <input autocomplete="email" name="email" id="email" type="email" /> </form>注意：在輸入欄位中缺少或不正確使用autocomplete屬性可能會給使用者帶來不便，特別是那些有認知障礙的使用者。瀏覽器無法提供準確的值，這使得個人難以提供預期的輸入。請確保您選擇了正確的值。
總結
希望對這些特性的探討能激發你的興趣。當你開始下一個專案時，請記住優先考慮可用性、可訪問性和簡潔性的重要性。
英文原文：Back to Basics: 5 HTML attributes for improved accessibility and user experience