您的網站可以訪問嗎？

越來越多的企業正在轉向在線，這很好，但如果整個部分人口無法使用該網站，則不會。 可訪問性問題在許多網站中都很常見，導致許多問題可以相對容易地解決 - 這並不意味著您需要一個全新的網站！

根據世界衛生組織 2011 年關於殘疾的報告，世界上有超過 10 億人患有某種形式的殘疾。 這相當於世界人口的約 15%。 這個數字只會隨著人口老齡化而增長，而老年人的殘疾風險/比例更高。

2018 年，英國政府將中央政府、地方政府組織、一些慈善機構和其他非政府組織網站制定為法律，以符合 WCAG2.1 準則。

然後在 2019 年，形成了歐洲無障礙法案。 甚至早在 1990 年，美國殘疾人法案就涵蓋了現在正在網站上解決的問題。 在某些情況下，公司現在會被告上法庭並敗訴，例如 Domino's Pizza 案。

人們會毫不猶豫地確保一個場所在物理上是可訪問的，那麼為什麼讓您的網站可訪問有什麼不同呢？ 隨著越來越多的企業主要轉向在線業務，這一點從未像現在這樣重要。

目的

我們的目標是創建包容性網站，因為可訪問性是一項人權。

該網站不僅對每個人都更易於使用，而且我們可能會為客戶帶來更多潛在客戶。 Click away pound 表示“未能提供可訪問的消費者網站在 2016 年給英國零售商造成了 117.5 億英鎊的損失。”

問題

主要問題是我們如何看待包容性甚至殘疾本身。 我是 Adrian Roselli 和他通過自私的可訪問性方法來解決這個問題的忠實粉絲。 這是 Adrian 在最近一次會議上的視頻，我強烈建議您從不同的角度觀看它，以了解人們可能面臨的殘疾和常見問題。

從本質上講，他將常見的網站可訪問性問題與每個人都經歷過的日常情況聯繫起來，而不僅僅是殘疾人。 例如對比度問題，他只是解釋說，如果這個人在陽光下或明亮的地方使用筆記本電腦，這也是一個問題。 所以我們可以看到，確保我們的網站也可供更廣泛的人群訪問符合我們的最大利益。

正如您從他的視頻和統計數據中看到的，有可訪問性問題的人比您想像的要普遍得多。

常見的無障礙問題

所以我們決定讓我們的網站具有包容性對每個人都有好處（我希望！）。 在解決可訪問性問題時，人們首先想到的是，我們需要構建額外的特性或功能，這些特性或功能的實施成本高且及時，或者會限制設計。

實際上，情況並非如此，很多問題都可以通過稍加思考、計劃和使用 Adrian Roselli 自私的可訪問性方法來非常簡單地解決。

顏色和對比度

世界上大約有 8%（十分之一）的男性是色盲，所以讓我們選擇滿足這些要求的調色板。
如果客戶的網站使用了無法訪問的顏色，那麼詢問他們是否願意失去 8% 的潛在客戶。 我敢肯定，如果你告訴他們這些，他們可能會重新考慮顏色。

在選擇這些顏色的同時，還要確保在它們之間使用良好的對比度，如果鏈接位於低對比度背景（陽光下的筆記本電腦……），您不希望它們被隱藏。 這是使用在線對比度檢查工具之類的 5 分鐘工作，或者如果您想特定於您的鏈接，請使用鏈接檢查工具。

字體大小和選擇

您的網站是否包含您希望人們理解的信息？ 我會懷疑是的。 因此，在他們按下返回按鈕之前，讓我們確保您網站中最重要的成分之一對眼睛來說是可消化的。

幾乎每 10 名瀏覽您網站的人中就有 1 人的眼睛會出現某種問題（不包括色盲）。 在 40 歲時，只有一半的光線像 20 歲時一樣通過視網膜。對於 60 歲以上的人，這一比例下降到 20%。

默認瀏覽器正文字體大小通常為 16px 或 1rem，這也是裸露的“最小”建議字體大小，但讓我們面對現實吧，這太小了！ 這裡最常見的論點是“如果人們想要更大的文本，就可以放大”。 問題在於，大多數受此問題影響的人可能不知道如何縮放，因此我們不應假設這是他們的選擇。

沒有“最佳”大小或字體，但我建議正文字體大小接近 18px 或 1.125rem，具有適當的行高、符合條件的字體和最少的字體庫。 Webaim 有一篇關於字體的好文章，並指出“每次遇到新的字體、字體或字體變體時，您的大腦都必須構建字符和圖案的地圖或模型，以便更快地解析單詞和處理含義。 這需要認知努力和時間。 如果字體已經很熟悉，這種開銷就會減少。”

Gill Andrews 有一篇關於排版錯誤的更全面的文章，如果您處理大量排版，非常值得一讀。

圖片

這裡不多提，但要確保您的圖像上有 alt 標籤。 大多數 CMS 現在可以選擇在您上傳圖片時添加圖片 alt 標籤。 如果圖片很重要，請確保您確實對其進行了描述。 這篇 hubspot 文章很好地描述了 alt 標籤使用的好壞。

如果圖像不重要並且純粹是裝飾性的，例如背景圖案，則將標籤留空。 只要確保它在標記中實際上是空的，就像這樣：alt=””，否則它會被標記為缺少 alt 標籤。

要記住的一件重要事情是，您不應將圖像用於重要文本（如標題），因為屏幕閱讀器和 Google 無法讀取它們。 將文本放在圖像上也要小心，因為它可能會因背景而變得不可讀。

結構

即使您遵循了上述基礎知識，通常也會被忽視的一件事是頁面的實際語義結構。 許多人被字體或標題的大小所困擾，並將它們用於樣式目的，而不是定義頁面信息層次結構。

這不僅會影響 Google 對您的內容的解釋方式，而且使用屏幕閱讀器的人會使用您的結構標記作為導航。 Yoast 有一篇關於標題的精彩文章，您應該花一些時間閱讀。 一些簡單的建議是在你的頁面上有一個 <h1> 元素，然後在你的下一個重要部分有一個 <h2> 元素。 如果您有子部分的子項，則使用 <h3> 等：

<h1>通常是您的頁面標題</h1>

<p>這裡有一些段落文本</p>

<h2>頁面的下一個重要部分</h2>

<p>這裡有一些段落文本</p>

<h3>一些不那麼重要但與上面的 h2 相關的東西</h3>

<p>這裡有一些段落文本</p>

<h2>頁面的下一個重要部分</h2>

圍捕

我希望您能看到，通過遵循上面這些簡單的規則，您將使您的網站易於訪問，並為每個訪問它的人帶來更愉快的體驗。 不僅如此，您還提高了您在 Google 的地位，因此這對每個人都是雙贏的。

如果您不確定您的網站是否符合這些標準，或者只是想幫助提高您網站的可訪問性，請與我們聯繫。