現代營銷人員的數字可訪問性的10條原則


當我們談論數字可訪問性作為營銷人員時,我們談論的是有意創造一種可以被盡可能多的人訪問的體驗。

設計數字可訪問性意味著許多事情。這意味著為有感覺或認知障礙的人設計。這意味著為有身體限制的人設計。這意味著為依賴自適應和輔助技術(如屏幕閱讀器或放大鏡)來查看數字內容的個人進行設計。

關鍵是從一開始就建立對數字體驗的可訪問性,而不是像事後的想法那樣將其固定在一起。下面,我概述了創建數字營銷材料時需要考慮的一些關鍵可訪問性原則。

開發人員的原則

1.應用標準HTML語義

可訪問設計從標準HTML語義開始。標準HTML使屏幕閱讀器能夠在頁面上公佈元素,以便用戶知道如何與內容進行交互。當使用沒有語義信息的HTML標籤時 – 例如

對於視覺樣式 – 瀏覽器將按照開發人員的意圖顯示元素,遺憾的是,這可能對用戶沒有多大幫助。

請記住,用戶使用屏幕閱讀器的體驗可能會有很大差異。例如,使用

語義簡介

或自定義編碼以覆蓋默認瀏覽器樣式將產生類似於標題的東西。但是,屏幕閱讀器不會理解或宣布該元素為標題。

關鍵要點

盡可能使用標準HTML,以便屏幕閱讀器在朗讀時保持結構和內容。使用結構元素對元素進行分組並在頁面上創建單獨的區域,例如標題,導航,主頁和頁腳。屏幕閱讀器識別這些結構元素並將其通知給用戶並允許元素之間的額外導航。

2.啟用鍵盤導航

所有網站都應該是鍵盤可訪問的,因為並非所有消費者都可以使用鼠標或查看屏幕。事實上,根據WebAIM Low Vision,60.4%的受訪者總是或經常使用鍵盤進行網頁導航。另外,具有永久或暫時失去雙手或精細肌肉控制的個體也可以使用鍵盤或修改的鍵盤進行導航。

要使鍵盤導航起作用,用戶必須能夠通過從焦點項目移動到焦點項目來瀏覽頁面。用戶通常遵循視覺流程,從左到右,從上到下,從標題到主導航,到頁面導航,最後到頁腳。使用鍵盤進行導航時 輸入 激活一個有針對性的鏈接,並且 空格鍵 激活一個有重點的表單元素。 標籤 促進元素之間的導航。 Ë花莖 允許用戶關閉元素。

了解這一點,考慮用戶可能採取的行動很重要。經驗法則是,如果您可以使用鼠標與可聚焦元素進行交互,請確保您可以使用鍵盤進行交互。這些元素可能包括鏈接,按鈕,表單字段或日曆日期選擇器。

關鍵要點

確保用戶可以使用鍵盤導航到網站的所有交互組件。列出所有站點的可聚焦元素並創建易於使用的焦點指示器。構建基礎源代碼以正確排序內容和導航。使用CSS來控制元素的可視方面。如果下拉列表中的鏈接太多,則允許用戶繞過導航窗口。

3.使用屬性

在鏈接文本和URL描述時,屏幕閱讀器可以跳過文章中的鏈接到鏈接。如果使用“點擊此處”或“閱讀更多”等模糊鏈接文本,則它為某人在屏幕閱讀器上進行解釋提供的背景或意義非常小。

對鏈接文本具有特定性和描述性,並包含描述鏈接所連接內容的有意義的短語。而不是“聯繫我們”使用更具體的語言,如“聯繫我們的銷售團隊。”對於圖像和視頻,分配ALT屬性並使用描述性文件名。

關鍵要點

在鏈接中消除無關和非描述性詞語,如“單擊此處”,“此處”和“閱讀更多”。 “10個可訪問性原則”的讀取優於“單擊此處以閱讀可訪問性的10個原則”。優化文件名和URL名稱,並使用視頻內容的開放和隱藏字幕。考慮添加準確的視頻記錄。

4.使用ARIA標籤屬性

在某些情況下,您網站上的按鈕或其他互動元素可能不包含輔助技術所需的所有信息。 ARIA標籤屬性使輔助技術能夠覆蓋HTML標籤,以允許網站所有者為頁面上的元素提供額外的上下文。

在以下鏈接示例中,屏幕閱讀器將宣布“Bing Ads”。鏈接。 ”

Bing Ads

但是,如果按鈕本身是號召性用語按鈕,則網站所有者可以使用ARIA標籤允許屏幕閱讀器說出按鈕上可見的號召性用語。在此示例中,屏幕閱讀器將宣布“註冊Bing廣告帳戶”。鏈接。 ”

Bing Ads

重點外賣

在表單和號召性用語按鈕等元素中使用ARIA標籤屬性來定義屏幕閱讀器應該大聲朗讀的可見文本。

5.正確標記和格式化表格

確保表格直觀且邏輯有序,並帶有明確的說明和標籤。要確保用戶為所有表單加載正確的鍵盤格式,請使用始終可見的標籤,並避免將佔位符文本放在表單提示中。

從格式化角度來看,利用文本字段和下拉菜單的邊框,並以單列格式放置表單。此外,使用HTML輸入類型,因此用戶無需切換各種類型的虛擬鍵盤。例如,電話號碼的字段應該拉出數字鍵盤而不是常規鍵盤格式。

關鍵要點

在表單中使用JavaScript時要小心,這可能會使用鍵盤難以完成表單。

6.使用表格進行數據處理

在線表有兩種基本用途:帶有行和列標題的數據表,用於顯示表格數據和用於頁面佈局的表格。 HTML表的預期用途是表格數據。佈局表通常沒有可以映射到表中單元格的邏輯標題或信息,因此屏幕閱讀器必須猜測表的用途。因此,將CSS用於數據的佈局和保留表非常重要。使用CSS可以生成更簡潔,更簡化的HTML代碼。

關鍵要點

使用適當的 標記數據表並始終包含表頭。始終為表格佈局選擇CSS而不是表格。作家和圖形設計師的原則

7.以結構化的方式撰寫內容

您的內容的結構和流程對於有視力障礙並依賴屏幕閱讀器的個人尤其重要。對於有認知和學習障礙的人,以及在移動屏幕上掃描內容的任何人,這一點也很重要。在為可訪問性寫作時,召喚您的內部高中英語教師,並使用每個部分的描述性標題清楚地組織內容。

關鍵要點

使文本易於閱讀和邏輯結構化。請務必對標題段落,列表和引號使用語義標記。

8.左對齊

根據UX Movement,文本對齊會影響可讀性。居中文本使觀察者更加努力,因為沒有左直邊,在繼續下一行文本時,眼睛沒有一致的路徑。使用左對齊文本作為直邊,使眼睛更容易掃描內容並在書寫結構中找到中斷。

關鍵要點

僅使用居中的文本標題和短文本行(如引號和標註)。避免混合文本對齊。

9.明智地選擇字體

我喜歡漂亮的藝術字體。但事實是有些字體比其他字體更容易閱讀。這就是為什麼使用基本字體很重要的原因。對於有視覺或認知障礙的人來說,Sans-serif字體更容易閱讀 – 即使是在明亮的陽光下閱讀屏幕等臨時的視覺障礙。

尺寸也很重要。避免使用小於12的字體大小,並選擇絕對單位(像素或點)與相對單位(%)來定義字體大小。限製字體數量以使內容更易於閱讀。不要依賴字體(顏色,形狀或位置)的外觀來傳達文本的含義。最後,避免閃爍或移動文本 – 沒有用戶想要在屏幕上追逐消息。

關鍵要點

選擇帶有簡單無襯線結尾的簡單字體,使眼睛更容易識別字母。限製字體變化和大小的使用。

10.把顏色上班

顏色的應用也會影響可訪問性。根據2018年WebAIM對低視力用戶的調查,75%的受訪者報告了多種類型的視力損害,其中61%具有光或眩光敏感度,46%具有對比敏感度。

考慮一下您的配色方案和顏色​​對比,以確保文本可以從背景顏色中輕鬆辨別。 Web內容可訪問性指南(WCAG)建議對正常文本使用4.5:1對比率。從透視角度來看,白色背景上的黑色文本是21:1,而白色背景上的灰色文本是4.5:1。

視覺障礙者可能無法使用單獨使用顏色來傳達信息。例如,網站通常使用綠色來表示正面信號,紅色表示負面信號,這對於有視覺障礙的人來說很難辨別。相反,考慮將形狀或圖標與顏色組合。

關鍵要點

確保您的顏色具有充足的對比度,並將顏色與圖形或符號相結合,以幫助傳達意義。

設計可訪問性不需要復雜或昂貴。它只需要規劃和有意應用可訪問性原則,以確保為每個人提供更具包容性的體驗。

本文中表達的觀點是客座作者的觀點,不一定是搜索引擎土地。工作人員作者列於此處。

發表迴響