通用網頁設計中的流行錯誤

憑藉當今的當今競爭和競爭性的“ Web 2.0”和社交媒體世界，通用設計 很多次被遺忘。關於為什麼有許多社會，技術，財務和法律原因支持普遍設計實踐，這令人困惑。讓我們討論當今網站中一些更普遍的問題，以及它們與主要通用設計原則的關係。

鑰匙要點

儘管具有社會，技術，財務和法律利益，但通用網絡設計經常被忽略。常見錯誤包括難以閱讀的文本，不清楚的文本鏈接，過多的視覺噪音，缺乏鍵盤訪問以及圖像缺少替代文本。
>文本可讀性對於通用設計至關重要。小型文本和低色對比可能使網絡版式難以閱讀。在CSS而不是固定尺寸中使用相對尺寸可以幫助確保用戶能夠根據需要調整文本大小。
鍵盤訪問對於通用設計至關重要。許多網站無法提供此信息，為用戶造成障礙。良好的實踐包括提供a：CSS中的焦點狀態，如果使用：懸停偽類類，並確保如果設計了鼠標事件，則提供了鍵盤的平等訪問。 為圖像提供替代文本是通用設計的另一個關鍵方面。如果圖像提供相關內容，則必須伴隨替代文本，以確保所有用戶的可訪問性，包括視覺障礙或速度緩慢的Internet連接。
原理
首先，讓我們回顧一下包括一些與Web相關的示例，包括一些通用設計原則。請記住，這些原則當然可以應用於計算機和網絡以外的許多行業，例如土木工程（建築物，人行道），娛樂（電影院，主題公園）和交通運輸（公共汽車，火車）。

1. 公平用途：對具有不同能力的人有用且可銷售。
   示例：當地政府的網站的設計，以便使用輔助技術（例如屏幕閱讀器）的人可以訪問它。
2. 使用的靈活性：可容納廣泛的個人偏好和能力。
   示例：航空公司網站的設計在各種計算機顯示尺寸中維護視覺美學。
>簡單而直觀：無論用戶的經驗，知識，語言技能或當前集中度如何，易於理解。
3. 示例：Web應用程序的主要控件標記為文本和符號。
   >
可感知的信息：無論環境條件或用戶的感覺能力如何，都可以有效地與用戶傳達必要的信息。
4. 示例：帶有字幕的教學視頻提供了讀取對話的選項。
   錯誤的耐受性：最大程度地減少偶然或意外行動的危害和不利後果。
示例：提交表單時的技術錯誤提供了一個清晰的解釋和選擇。
5. 身體上的努力低：可以有效，舒適地使用，並且最少的疲勞。
   示例：網站設計具有足夠的顏色對比度和文本大小，可最大程度地減少眼睛應變。
用於接近和使用的尺寸和空間：無論用戶的身體尺寸，姿勢或移動性如何，都提供適當的尺寸和空間，用於接近，觸及，操縱和使用。
6. 示例：設計網站，以便無法使用鼠標的物理受損的用戶仍然可以使用鍵盤訪問所有內容（或屏幕上的鍵盤！）。
   

現在我們已經熟悉了這些原則，讓我們研究一些相關的網絡設計問題。

難以閱讀

通用設計中的第一個流行錯誤是文本內容，由於其設計，許多人很難閱讀。這與原則1有關，公平使用；和6的體力低下，特別是眼睛勞累。請注意，>認知閱讀難度不是本文範圍內的一個單獨的問題。良好的可讀性使網站更加可用和美觀。順便說一句，請查看Readability.com Web應用程序以進行超級閱讀。 那麼有什麼問題？小型文本和低色對比是兩個關鍵問題，使網絡版式難以閱讀。在下面的示例中，主要文本內容是在黑色背景上灰色的，該黑色背景在亮度>和顏色測試的差異中失敗了。文本大小設置為12個像素，對於包括我自己在內的許多用戶而言，這很小。從CSS刪除文本大小時，瀏覽器會顯示默認大小，該大小稍大，並且更可讀！因此，不要將默認文本設置為12px或.75EM，而是嘗試更高一些16px或.95em。 與文本有關的另一個最佳實踐是在CSS中使用相對尺寸 （EMS或百分比）而不是固定尺寸（像素或點），以幫助確保用戶能夠根據需要在瀏覽器中調整文本大小，並在文本中進行佈局比例。其他好的指南，包括提供用戶友好的標題和足夠的線路間距。

難以確定文本鏈接

默認情況下，超鏈接的文本用下劃線呈現。這是網絡瀏覽中的長期慣例。刪除該約定不僅會打破用戶的期望，而且可能使鏈接無法獲得色盲或低視力的人無法訪問。很多時候將這個問題複雜化是在黑色文本中用深色定義鏈接時。與上述問題類似，這與原則1和6有關。 我的驗光師告訴我，從40歲左右開始，男人的視力開始失去區分顏色的能力。男孩是對的！許多網站都有深藍色的鏈接，沒有下劃線，我肯定必須緊張我的眼睛才能確定文本鏈接。下面的示例來自新聞報導。您可以看到文本鏈接嗎？對我來說非常困難。

新聞網站似乎臭名昭著，即使在傑出的英國網站上使用藍色鏈接以及刪除的下劃線也是如此。要解決，只需通過返回下劃線去除屏障。 Nomensa博客是一個很好的例子。可選地，將大膽的文本或其他視覺表示用於文本鏈接，例如彩色背景。 視覺噪聲

分散的佈局和內容過載不僅在視覺上沒有吸引力，而且不是非常可用，也不是可訪問的。這直接與原理3有關，簡單而直觀。在下面顯示的加利福尼亞地方政府網頁中，有許多導航區域，兩個大型小節橫幅圖像以及無組織的，分散的外觀。結果，直到頁面的“折疊”之後，主要內容才開始，這顯然不是理想的。另外，沒有焦點，沒有視覺層次結構，導致用戶更有可能瘋狂地搜索用戶所需的內容。

相比之下，請查看澳大利亞政府和美國網站；更寬敞和有條理，創造了更可用的體驗。 創建“視覺噪音”的更多示例是：

• 導航：頁面上的導航段太多（如上所述），導航級別太多可能會造成混淆，以及設計的噩夢。
>
• 冗餘工具提示：文本鏈接上的標題屬性，其內容與鏈接本身相同的內容創建了一個刻薄且不需要的工具提示。
>
• 毫無意義的圖像：僅在具有值的內容時使用圖像；它應該傳達對文本內容重要的意義。
>

>無鍵盤訪問

鍵盤訪問，可以單獨使用鍵盤進行導航屏幕並與聚焦對象進行交互的能力。不幸的是，許多網站沒有提供此信息。更準確地說，許多網站為鍵盤用戶創建障礙，因為HTML固有地是鍵盤可訪問的。如果您為鼠標活動設計，請確保為鍵盤提供平等的訪問權限。這會創建與設備無關的；那是一件好事！這個問題涉及原則1，公平使用；和2，使用的靈活性。 在編碼網站時，有幾種好的做法需要考慮。在CSS中，如果使用：懸停偽類類，請確保還提供了焦點狀態。另外，切勿刪除錨元素上的輪廓，即a {atline：0} （要警惕：大多數CSS重置樣式表刪除錨式輪廓 - 請務必稍後將它們添加到您自己的CSS 中！）。如果是絕對必要的，那麼某種視覺效果必須替換。 在JavaScript中，請勿使用雙擊處理程序（ONDBLICK），因為鍵槃無法執行此行為。如果使用了onmouseover和onMouseOut javaScript處理程序，則還必須實現onfocus和onblur事件以允許鍵盤訪問。

缺少圖像的替代文本

如果圖像提供相關內容，則必須伴隨替代文本。當看不見圖像時，盲人用戶，低頻用戶和損壞的圖像鏈接將是這種情況，則仍然需要訪問圖像的“內容”。如上所述，此問題與原理1和2有關。提供替代文本的最流行方法是在Image Element的Alt屬性中輸入文本。 許多圖像，例如Web上的圖形圖，漫畫和信息圖表都沒有在Alt文本中提供“長描述”，因此阻止了其內容的許多用戶。 Web Ax博客在其係列“ Fixing Alt”中糾正了一些示例。有關長時間描述的更多信息，請查看我的兩部分文章Longdesc和其他長圖像說明解決方案。

以下是一些替代文本的指南：

• 如果文本嵌入了圖像中，請將其添加到alt屬性中。
如果圖像僅裝飾，則應包含一個空的alt屬性。 （例如）。
• >
對於某些圖像，例如圖表和藝術品，需要更長的描述。
• >
如果帶有鏈接的圖像包含內容，則替代文本應描述鏈接的功能，而不是圖像本身。
外賣

設計網站以及其他產品時，七個通用設計原理是一個很好的資源。人們以不同的方式使用計算機，並以不同的方式訪問網絡。通過保持這種思維，網頁設計師將在創建吸引人，用戶友好且可訪問的網站方面更加成功。

進一步閱讀

Web Applications（O’Reilly Media）的通用設計Wendy Chisholm，Matt May。

普遍的可用性，莎拉·霍頓（Sarah Horton）的在線書。

華盛頓大學DO-IT計劃的通用教學設計。 >
• >北卡羅來納州立大學設計學院通用設計原則。
>通用設計文件：為各個年齡段和能力的人設計（日記），莫莉·斯托爾（James Mueller），詹姆斯·穆勒（James Mueller），羅恩·梅斯
>通用網絡設計的常見問題
什麼是通用的Web設計，為什麼重要？
• 通用Web Design（UWD）是一種設計方法，旨在創建網站和Web內容，無論其能力或使用的設備如何，都可以訪問和使用盡可能多的人。這很重要，因為它可以確保每個人，包括殘疾人，都可以有效訪問和使用Web內容。它還改善了整體用戶體驗，使網站更加用戶友好，更易於導航。

>通用網絡設計與傳統的Web設計有何不同？

傳統的網絡設計通常集中在一般受眾的美學和功能上。另一方面，通用網絡設計考慮了所有用戶（包括殘疾人）的各種需求。 It emphasizes accessibility, usability, and inclusivity, ensuring that web content is accessible and usable by everyone, regardless of their abilities or the devices they use.

What are some common mistakes in Universal Web Design?

Some common mistakes in Universal Web Design include not considering the needs of all users, not making web content accessible to people with disabilities, not testing the website on different devices and browsers, and not following web可訪問性指南和標準。這些錯誤可能導致用戶體驗差，並限製網站的可訪問性和可用性。

>如何使我的網站更容易訪問和用戶友好？其中包括使用清晰而簡單的語言，為圖像提供替代文本，確保網站可以使用鍵盤導航，使用邏輯且一致的佈局以及為視頻提供標題。在不同的設備和瀏覽器上測試您的網站也很重要，以確保它對所有用戶都效果很好。

>

什麼是Web瀏覽器，它如何影響通用Web Design？

> Web瀏覽器是一個軟件應用程序，它用於人們用於訪問Internet和網頁的軟件應用程序。它會影響通用Web設計，因為不同的瀏覽器可能以不同的方式解釋和顯示Web內容。因此，重要的是要在不同的瀏覽器上測試您的網站，以確保其效果很好，並且對所有瀏覽器看起來都很好。

>通用網絡設計的一些示例是什麼？

>

>

示例包括易於導航的網站，易於瀏覽鑰匙板，使用鍵盤和簡單的語言，為圖像提供替代文本的網站，可用於圖像和網站的替代網站，並為您提供圖像和網站。這些功能使網站更容易訪問和適用於所有用戶，包括殘疾人。

>

>通用的Web設計如何使業務受益？

通用Web Design通過提高用戶體驗，提高客戶滿意度並擴大潛在客戶群來使業務受益。通過使其網站更容易訪問和用戶友好，企業可以吸引更多的受眾，包括殘疾人。這可能會導致流量增加，更高的轉換率和提高客戶忠誠度。

>有什麼資源可以更多地了解通用Web設計？

>

有很多可用於了解通用Web Design的資源。其中包括在線教程，網絡研討會，書籍和課程。一些在通用網絡設計上提供資源的知名組織包括萬維網聯盟（W3C），Web可訪問性計劃（WAI）和國家殘疾與教育訪問中心（NCDAE）。

>如何在現有網站中實現通用的網站？在現有網站上實現通用網站？這可能包括添加圖像的替代文本，使網站使用鍵盤導航，使用邏輯和一致的佈局以及為視頻提供字幕。在不同的設備和瀏覽器上測試網站也很重要，以確保更改改善了用戶體驗。

>通用網絡設計的未來是什麼？

通用網絡設計的未來可能會更加重視可訪問性和包容性，因為越來越多的企業認識到使所有用戶都可以訪問其網站的重要性。人工智能和機器學習等技術的進步也可能在使網站更容易訪問和用戶友好方面發揮作用。此外，可能還有更多的法規和標準，以確保每個人都可以訪問和使用網站。

以上是通用網頁設計中的流行錯誤的詳細內容。更多資訊請關注PHP中文網其他相關文章！