<xmp id="eaccc"><table id="eaccc"></table>
  • <bdo id="eaccc"><center id="eaccc"></center></bdo>
  • <menu id="eaccc"><table id="eaccc"></table></menu>
  • 如何開發Web可訪問性

    2019.07.18 mf_web

    196

    develop2用于Web可訪問性

    使殘疾人可以訪問Web內容的國際標準稱為Web內容可訪問性指南,簡稱WCAG。這些要求被稱為“成功標準”。在這里,您將找到一些最基本的考慮因素,這些因素將幫助您開始開發殘障人士可以訪問的內容。

    識別頁面語言和語言更改

    您應該通過使用html標記中的lang屬性來指示每個頁面的主要語言,例如<html lang =“en”>,并且當元素的語言不相同時,將此lang屬性用于特定元素。頁面的其余部分。

    成功遵守此規定將確保內容開發人員在網頁中提供用戶代理所需的信息,以便正確顯示文本和語言內容。當識別出頁面的語言時,傳統的用戶代理和輔助技術將能夠更準確地呈現文本。屏幕閱讀器將能夠加載發音規則,可視瀏覽器將正確呈現腳本和字符。當網頁中使用多種語言時,默認的文本處理語言將是最常用的語言。

    如果操作正確,這將有助于那些使用屏幕閱讀器等技術將文本轉換為合成語音的人。它還將幫助那些由于語言,學習或認知障礙而難以流利準確地閱讀書面材料的人。此外,那些依靠字幕來解釋同步媒體的人將獲得清晰語言識別的好處。

    在每種控制形式上關聯標簽

    您應該在<label>元素上使用“for”屬性,該元素鏈接到表單元素中的id屬性,或者您可以使用WAI-ARIA屬性。在某些情況下,有必要在視覺上隱藏<label>元素,但在大多數情況下,確實需要案例標簽來幫助讀者理解所有必需的輸入。

    成功完成后,內容作者將在表單中放置表示控件的標簽或說明,以便用戶準確了解所需的輸入數據。這些標簽還將指示字段的數據格式,特別是當它們不是正常格式或表格的特定規則集時。當指令長于正常且乏味時,內容作者也可以向殘疾人提供一組指令。目的不是在頁面上混雜不需要的信息,而是提供對殘疾人有益的重要線索和指示。太少的指令可能會像過多的指令一樣受阻。

    清晰的標簽和說明在許多方面都是有益的。當與輸入元素相關聯時,當該字段處于焦點時,屏幕閱讀器可以說出它們,并且具有受損的運動技能的用戶受益于更大的可點擊區域,因為標簽將激活控件。當給出預期數據格式的示例時,具有語言,認知和學習障礙的用戶能夠以正確的方式提供信息。當明確標識必填字段時,僅使用鍵盤的人將能夠瀏覽表單并提供所需的所有信息。

    利用圖像的ALT文本

    您應確保將用于圖像的替代文本添加到每個功能和信息圖像中。對于裝飾性圖像,您可以使用空的替代文本標簽,例如alt =“”,或者您可以選擇將它們包含在CSS中。文本替代方案通常由負責書面內容的人員提供。

    成功完成后的目的是允許通過使用文本替代方式訪問非文本內容傳達的信息。首先,文本替代品用于使信息可訪問,因為它們可以通過其他感官方式提供,如聽覺,視覺或觸覺,以滿足個人的需要。

    以更具體的方式思考這種成功,文本替代方案對于那些努力感知視覺內容的人來說是有益的 - 他們可以使用輔助技術大聲朗讀文本,將其轉換為盲文,或者將其呈現在視覺上。這些替代方案也可以幫助那些難以解釋媒體含義的人,如圖像,繪圖或照片。文本演示可以幫助那些聽力困難或難以理解音頻信息的人。

    避免和糾正用戶錯誤

    旨在提供明確的說明,通知和錯誤消息,以幫助用戶填寫您網站上的表單。當發生錯誤時,您應該能夠提供可理解的解釋,建議更正,并幫助用戶找出問題所在。在處理輸入時,格式應盡可能寬容,例如,目標是接受包含空格的電話號碼,但在需要時刪除空格。

    理想情況下,這將確保用戶意識到發生了錯誤,并且他們將能夠分辨出錯誤,以便他們可以糾正錯誤。錯誤消息需要盡可能具體,無論是表示不成功的表單提交,還是任何具有此類性質的消息。您應該以用戶可以感知到的方式指示發生錯誤的字段。使用屏幕閱讀器的人將無法看到屏幕閱讀器遇到指示符之前出現錯誤。如果他們認為表單根本不起作用,他們可能會放棄頁面。錯誤的識別和描述可以與用戶代理或輔助技術將用于識別錯誤然后向用戶提供必要信息的程序信息組合。

    成功使用后,它將幫助那些有學習,認知和語言障礙的人理解圖標和其他視覺效果的含義。它還將提供有關文本內輸入錯誤的信息,允許盲目(或色盲)用戶觀察錯誤的反應。

    代碼順序應反映閱讀順序

    確保代碼中元素的順序與所顯示信息的邏輯順序匹配。您可以通過刪除CSS樣式來檢查這一點,然后檢查內容的順序是否有意義。

    該標準的意圖是能夠向用戶代理提供內容的替代表示,同時仍然保留所需的閱讀順序以便理解含義。重要的是確保編程至少一個對內容有意義的序列的可能性。

    如果操作正確,這將有助于依賴輔助技術的用戶大聲讀取內容。當內容以口頭形式呈現時,默認呈現中的內容的含義必須相同。

    用標記傳達意義和結構

    對所有標題,表格,列表和這樣的元素使用適當的標記。HTML5將提供更多元素,如<aside>和<nav>,以便以更好的方式構建內容。WAI_ARIA角色將能夠提供額外的含義,例如可識別搜索功能的role =“search”。如果您不熟悉這方面,則應與內容編寫者和設計人員合作,以便在整個內容中具有一致的含義。

    這些指南的原因是為了確保在演示文稿的格式發生變化時保存聽覺或視覺格式隱含的信息以及關系。有視力的用戶能夠通過視覺提示理解結構和關系 - 標題大而粗,列表項是項目符號或編號,表單字段是組,等等。當這些結構和關系通過編程確定或在文本中可用時斷言,所有人都能理解對于理解數據很重要的信息。聽覺提示也可以實現 - 語音音調或語速的變化可以強調重要的文本,以及類似的事情。

    成功實施后,具有各種殘疾的用戶將能夠根據自己的需求調整內容,并獲得有價值的信息。

    應該賦予非標準交互元素意義

    使用WAI-ARIA以提供有關自定義窗口小部件的功能和狀態的信息,例如自定義按鈕。例如,role =“navigation”和aria-expanded =“true”。需要更多代碼來應用這些類型的小部件的行為,例如擴展或折疊內容,或者鍵盤如何控制小部件。

    應為所有接口組件提供狀態,角色和值信息,以便它們與所有輔助技術兼容。

    盡可能避免使用CAPTCHA

    有趣的是,CAPTCHAs為大量個人帶來了問題。還有一些其他方法可以驗證用戶輸入的用戶輸入,這些用戶輸入更易于使用,如自動檢測和界面交互。如果使用CAPTCHA是絕對必要的,請確保理解起來相當簡單并且確實包含殘疾人的替代方案。這可以通過不要求授權用戶使用CAPTCHA來完成,提供對能夠繞過CAPTCHA的客戶服務中的實際人員的訪問,或者提供不僅僅兩種方式來解決CAPTCHA。

    交互式元素應該是鍵盤可訪問的

    在設計媒體播放器,菜單,可折疊元素和鼠標懸停信息等交互元素時,確定鍵盤可訪問性。您將使用tabindex =“0”,以便在用于交互時將通常不會獲得焦點的元素(如<span>或<div>)添加到導航順序中。您應該使用腳本來捕獲和響應鍵盤觸發的事件。

    這將確??梢酝ㄟ^使用鍵盤或鍵盤界面來操作內容,這允許內容由沒有視力的人或使用備用鍵盤的人操作。使用指點設備執行的許多動作也可以用鍵盤完成,但是只有指點設備才能完成一小部分動作。應當注意,用戶輸入的設計者應該考慮到一些用戶將依賴具有鍵盤可訪問性特征的網站

    如果操作正確,那些視力低下,盲人或使用鼠標有困難的人將能夠成功瀏覽網站并使用其中包含的內容。內容仍應以可訪問環境中的方式運行,并且在顯示內容時不會干擾任何輔助功能。例如,繪圖程序仍應允許用戶使用鍵盤調整大小,旋轉,定位和繪制對象。

    應編寫代碼以適應用戶的技術

    利用響應式設計,有助于顯示器適應不同的縮放狀態以及視口大小 - 如移動設備和平板電腦。當字體大小增加超過200%時,請勿使用水平滾動并防止內容被剪裁。采用漸進式增強功能,有助于確保無論使用何種技術訪問核心功能和內容,都可以訪問它們。

    簡而言之,這可以確保文本可以向上或向下縮放,以便能夠被視覺障礙者閱讀,而無需使用輔助技術。頁面上的所有內容都應該能夠擴展,但文本是最重要的。成功使用此功能可以將內容擴展到200%,但超出此范圍也是可以接受的。

    關鍵詞

    最新案例

    聯系電話 400-6065-301

    留言

    日本综合久久888,女人下面毛茸茸做性视频,俄罗斯破女处视频免费观看
    <xmp id="eaccc"><table id="eaccc"></table>
  • <bdo id="eaccc"><center id="eaccc"></center></bdo>
  • <menu id="eaccc"><table id="eaccc"></table></menu>