可訪問性

在HTML中發現可訪問性的基礎知識。 設計HTML時要考慮到可訪問性非常重要。 具有可訪問性的HTML意味著殘障人士可以使用互聯網。完全失明或視力受損的用戶，聽力受損的人以及其他許多不同殘障人士都在使用互聯網。 不幸的是，這個話題沒有得到應有的重視，而且似乎不像其他話題那麼酷。 如果一個人不能“看見”您的頁面，但仍然希望閱讀其中的內容，怎麼辦？他們如何做到這一點呢？他們不能使用滑鼠，而是使用一種被稱為“螢幕閱讀器”的工具。您可以試試：Google提供免費的ChromeVox Chrome 擴展。可訪問性也應該確保工具能夠輕鬆選擇元素或通過頁面進行導航。 網頁和Web應用程序並不總是以可訪問性作為其首要目標來構建，也許版本1發布時它們並不可訪問，但是在事後仍然可以使網頁可訪問。越早越好，但永遠不算晚。 這對於我的國家非常重要，政府或其他公共組織建立的網站必須具備可訪問性。 那麼，使HTML可訪問意味著什麼？讓我舉個例子來說明您需要考慮的主要事項。 注意：還有其他一些事項需要注意，這些事項可能屬於CSS主題，例如顏色、對比和字型。或者如何使SVG圖像可訪問。我不在這裡談論這些。 使用語義化HTML 語義化的HTML非常重要，這是您需要注意的主要事項之一。讓我舉幾個常見的情境來說明。 對於標題標籤，使用正確的結構非常重要。最重要的是h1，次要的使用更高的數字，但是同級標題的含義應該相同（將其想像為樹狀結構） <h1> <h2> <h3> <h2> <h2> <h3> <h4> </h1> 使用strong和em代替b和i。在外觀上看起來是一樣的，但前兩個具有更多相關含義。b和i更多地用於視覺元素。 列表很重要。屏幕閱讀器可以檢測到列表並提供概覽，然後讓用戶選擇是否進入列表。 表格應該有一個描述其內容的caption標籤： <table> <caption>狗的年齡</caption> <tr> <th>狗</th> <th>年齡</th> </tr> <tr> <td>羅傑</td> <td>7</td> </tr> </table> 為圖像使用alt屬性 所有圖像都必須有一個alt標籤來描述圖像內容。這不僅是一種良好的實踐，而且是HTML標準所要求的，沒有alt屬性的HTML無法通過驗證。 <img src="dog.png" alt="我的狗的照片"> 這對於搜索引擎也很好，如果這對您來說是一個激勵。 使用role屬性 role屬性可讓您為頁面中的各個元素分配特定角色。 您可以分配很多不同的角色：補充、列表、列表項目、主要、導航、區域、標籤、警報、應用程序、文章、橫幅、按鈕、單元格、複選框、內容信息、對話框、文檔、饋源、圖片、列表框、行、行組、搜索、切換、表格、選項卡面板、文本框、計時器等等。 有很多角色，對於每個角色的完整參考，我給您提供此MDN鏈接。但您不需要為頁面中的每個元素都分配一個角色。大多數情況下，屏幕閱讀器可以根據HTML標籤推斷出元素的角色。例如，您不需要為像nav、button、form這樣的語義標籤添加角色標籤。 讓我們以nav標籤為例。您可以使用它來定義頁面的導航，就像這樣： <nav> <ul> <li><a href="/">首頁</a></li> <li><a href="/blog">博客</a></li> </ul> </nav> 如果您不得不使用div標籤而不是nav，則可以使用navigation角色： <div role="navigation"> <ul> <li><a href="/">首頁</a></li> <li><a href="/blog">博客</a></li> </ul> </div> 在這裡，我們給出了一個實際的例子：當標籤本身沒有傳達含義時，使用role來賦予其有意義的值。 使用tabindex屬性 tabindex 屬性允許您改變按 Tab 鍵時選擇“可選”元素的順序。默認情況下，只有鏈接和表單元素可以通過使用 Tab 鍵進行選擇（您不需要在它們上設置tabindex）。...