本月提示:網路和電子郵件可訪問性

網路時代意味著資訊隨時可用。但僅僅因為這些資訊可用並不意味著每個人都可以輕鬆訪問它。如果您依靠螢幕閱讀器來查看電子郵件怎麼辦?如果您無法操作滑鼠而僅需要使用鍵盤來導航網頁怎麼辦?或者,也許您是 3 億人患有某種色覺缺陷的人之一。如果顏色對比太低,如何閱讀文字?

網路內容可訪問性指南( WCAG) 由W3C創建,其目標是「為網路內容可訪問性提供單一共享標準,以滿足國際上個人、組織和政府的需求」。該標準確保所有網路使用者都可以參與內容,無論他們的能力或使用哪種類型的設備。本月,我們將向您展示如何實施一些最有用的輔助功能指南,以便您的訂閱者可以更好地與您的行銷活動互動。

聚焦

當使用者透過按鍵點擊或選擇某個元素時,該元素具有 CSS 偽類 :focus。所有瀏覽器都有預設的焦點元素外觀樣式(通常是粗體藍色
相反,請確保保留輪廓或邊框來指示重點關注哪個元素。這種樣式可以是不同的顏色 秘魯電子郵件列表 例如亮藍色或綠色來突出顯示元素,但請記住,有些使用者可能有顏色缺陷。如果顏色對比度是一個問題 子郵件可訪問性 為邊框提供獨特的樣式(例如點線或粗體實線)可以幫助提供視覺提示使用者專注於哪個元素。建立您自己的焦點樣式可確保讀者無論使用哪種網頁郵件用戶端或瀏覽器來查看電子郵件,都將獲得一致的視覺體驗。您也可以為每個元素(例如連結、按鈕或表單欄位)設計不同的焦點樣式。

使用語意標記
對電子郵件的不同部分使用適當的 HTML 標籤可以為使用螢幕閱讀器的使用者提供更好的上下文線索。設定電子郵件的<標題>以方便訪問,這也將顯示在瀏覽器標籤中。不要只使用通用 <div> 標籤,而是使用標題、段落、按鈕和輸入等標籤來指定電子郵件的不同部分。在表單上使用標籤還可以幫助使用螢幕閱讀器的使用者更好地導航頁面。

秘魯電子郵件列表

佈置桌面

網頁設計中經常使用兩種類型的表格:資料表和版面表。對於螢幕閱讀器來說,表格非常笨重,如果您的內容不是以從左到右的線性方式組織的,那麼它可能會以錯誤的順序向用戶讀取資訊。

資料表用於呈現訊息,通常按帶標籤的列和行進行組織。如果您有資料表,請務必保留正確的標記以區分錶的不同部分。使用 <tr> 表示表格行,使用 <th> 表示表格標題(通常是列標題),使用 <td> 表示資料儲存格。也要保持資料表簡單 – 避免複雜的結構,例如巢狀表或行。

對於版面配置表,您不希望大聲讀取行和標題等語意標籤。若要從元素及其任何相關子元素中刪除語義 子郵件可訪問性 請使用presentation 角色;僅在您的佈局表上執行此操作。這是使用WAI-ARIA (Web 可訪問性倡議 – 可訪問的富互聯網應用程式)的多個角色之一。 ARIA 有幾個屬性可以幫助補充 HTML,以便輔助技術可以更好地解釋它。然而 極致義大利設計| podcast 沒有像本機語義 HTML 元素那樣得到廣泛的支持,而且它的作用可能會被各種 Web 郵件用戶端誤解或不支持。某些電子郵件提供者可能會為您的元素指派與您指定的角色完全不同的角色。佈局表很好地支援使用 role=”presentation”,但在電子郵件中使用 ARIA 角色或其其他屬性之前,請先進行更多研究。

在字體線上

為眼科醫師圖表保留微小且難以辨識的字體。沒有人喜歡瞇著眼睛看螢幕,因此請保持最小字體大小為 14 像素。如果這在較小的行動裝置上看起來很糟糕,請嘗試縮小不超過 12 像素。選擇既能反映您的品牌又清晰易讀的字體。一旦你做出了這些選擇 資料庫到數據 顏色就是下一個。 WCAG 2.0 AA 等級要求普通文本的對比至少為 4.5:1,大文本的對比至少為 3:1。大文字定義為 14 點(通常為 18.66 像素)且粗體或更大,或 18 點(通常為 24 像素)或更大。檢查字體顏色和背景顏色對比度是否足夠的簡單方法是使用WebAIM 中的顏色工具,或使用大多數瀏覽器的 Web 開發人員工具中包含的 Web 輔助功能。

連結到輔助使用
與焦點類似,您希望在讀者懸停 子郵件可訪問性 聚焦或點擊(:活動)連結時向他們提供視覺提示。再次小心,僅依靠顏色來表示這些操作 – 使用下劃線、粗體字體或符號等視覺提示。為了讓使用螢幕閱讀器的使用者獲得流暢的體驗,請勿在連結中設定標題屬性。將所需資訊保留在連結周圍的文字或實際連結文字中。避免使用諸如“單擊此處”或“閱讀更多”之類的模糊語言,除非指向這些鏈接的文本清楚地表明了鏈接將您帶到哪裡。這篇文章充滿了可訪問的連結範例,但它們在 html 中的樣子如下。

 

Scroll to Top