<address id="nzfpj"></address>
<noframes id="nzfpj">

    <form id="nzfpj"><th id="nzfpj"><progress id="nzfpj"></progress></th></form><noframes id="nzfpj"><address id="nzfpj"></address>
      北京物流信息聯盟

      增強網站無障礙功能的十條準則

      京程一燈 2021-10-26 14:02:53

      我們列出了十條關于網站無障礙功能的準則,它們能保證你的網站對任何人(包括殘疾人)都是可用的。

      W3C的主席蒂姆·伯納斯-李說過一句話:“網絡的力量在其普遍性”。作為以制作網站為生的人來說,我們的責任就是要使每個人都能夠訪問它們。網絡無障礙功能看起來好像是論文里的一個艱巨任務,但實際上它比聽上去的容易的多。

      我們設計的這十條準則,就是為了保證所有的網站都是普世的。

      這些準則不僅能幫助讀屏的用戶,也能改善在連接較慢時的瀏覽用戶體驗。我們把這些準則根據實現的先后順序排了序,幫助你了解在這個過程中可能花費的時間和精力。在你感到收獲頗豐之前,相信我們的話:本文干貨滿滿,值得一看!

      首先談第一件事:

      Web Accessibility是什么?

      根據W3C的標準,網絡無障礙功能就是所有人都可以感知、理解、瀏覽網絡,并與其交互,或者向網絡作出貢獻。也就是說,網絡無障礙功能包括影響網絡訪問的所有條件,包括人的視覺,聽覺,身體,言語,認知以及神經功能障礙等等。

      關于這個主題,你在網上可以找到非常多的內容,而且如果感興趣的話, 你真的應該深入看看網絡無障礙計劃Web Accessibility Initiative(WAI)。

      言歸正傳,下面是就是這十項準則。

      1.不依賴顏色值(約45分鐘)

      顏色是個很有力的工具,我們常常用各種顏色來表達或交流情感。但是,我們不能過于相信顏色能夠傳遞給用戶的信息。為什么呢?比如,絕大多數人都知道綠色表示正確,紅色代表錯誤,但如果我們只使用顏色來表示這一信息會怎樣呢?

      色盲是一種非常常見的視覺障礙。它影響了大約全世界4.5%的人口(甚至比IE11的用戶還多,你懂的...)。

      如果我們只通過顏色告訴用戶輸入正確與否,那么這4.5%的色盲癥的人群就無法得知這一信息了。

      顏色可以輔助錯誤提示信息,但是我們絕不應當只用顏色。為了讓所有的用戶都能正確獲得提示信息,我們應該增加對應的標簽或者圖標來提示輸入的信息正確與否。

      caniuse.com提供了一個有趣的解決方案,他們提供了一個調色板的方式來顯示對應的兼容性列表。

      最理想的是在設計的時候就檢查顏色對比度是否能滿足符合要求,因此一定要讓你和設計團隊有正確的工具進行檢查。我們推薦Sketch的插件Stark plugin,來檢查你的設計是否能滿足無障礙的需求。

      2.不要禁止縮放行為(約五分鐘)

      在這個自適應設計遍布的時代,我們總會犯一些違反自適應性的錯誤。

      一個常見的錯誤就是使用 maximum-scale=1.0,因為它禁止了在移動設備上網頁的縮放功能。

      散光影響歐洲、亞洲約30%~60%的成年人,但模糊的內容會影響到所有年齡和國籍的人(嗨,媽媽,說的就是你?。?。

      允許網頁放大不僅是WCAG的另一個準則,也是簡化這些人日常生活的工具。所以下一次你建站時,不妨想一想像我媽這樣視力下降看東西模糊不清的用戶。

      除了可以讓用戶在移動設備上自由放大,還要注意,在桌面瀏覽器放大200%的時候,你的頁面布局仍然還能看么?

      3.重新了解alt屬性(約45分鐘)

      不管你開發網站有多久,當你知道這些關于alt屬性這些有名卻又神秘的提示后,你可能還是會感到驚訝。

      1. alt是每個img標簽強制要求的屬性,但空的alt屬性是依然有效。如果一張圖片是裝飾性的或者不需要了解其內容,你只要使用?alt=""就可以了。

      2. 屏幕閱讀器會告訴用戶這個標簽是一個圖像,所以alt不需要多余的信息,比如說“Picture of”,直接說圖片的內容即可。

      3. 圖像的功能與其意義一樣重要:如果你的logo圖像直接鏈接到網站主頁,那么它的alt文本應該是“Home Page”而不是“Logo”。

      4. alt的替代文本不僅是為了增加可訪問性。有時,數據連接緩慢的用戶會禁用圖像,從而實現更快的瀏覽體驗。因此,每次寫圖像的alt屬性時,都要記住還有這樣的用戶存在!

      然而你的網站并不是每一幅圖像都是用img標簽寫的,對吧?你還可能用到一兩個SVG做圖片,或者全部的圖標都是SVG。

      我們怎樣讓SVG變得無障礙呢?幸運的是,可擴展矢量圖形標準已經把這些內容包括進來了。為了描述這個矢量,既有短描述的標簽 <title>,也有較長描述的標簽 <desc>。

      1. <symbol id="langIcon">

      2. ? ?<title>Language Icon</title>

      3. ? ?<desc>Longer description</desc>

      4. ? ?<path d="M0 2C6.47 2 2 6.48 2 12s4.47 10 9.99 0h24v24H0z" />

      5. </symbol>

      4.給視頻加副標題和說明

      這可能是WCAG最難實現的標準之一,不是說技術實現很難,而是說這件事很耗時。要完成這一點,有下面幾種方法:

      1. 以YouTube為例。你在上傳視頻的時候,你可以選擇關閉說明。這些內容會自動生成,但在某些情況下可能并不準確,語言、背景噪音、演講者的口音都可能影響內容的準確性。不過總得來說,大部分還是容易實現的,而且在大部分英語視頻的摘要抽取也能正常工作。

      2. 如果我們追求100%的準確性說明,YouTube就不那么可靠了,所以我們要么自己寫視頻摘要,或者找第三方來做。YouTube可能會使用最常見的字幕格式,(.srt, .sub, .sbv),也允許我們在平臺上填寫字幕;如果你不懂得如何使用字幕軟件,這項功能其實非常方便,當然我們也可以在不用授權賬戶權限的情況下請求社區的力量幫助翻譯內容。

      3. 不過也許你并不想用YouTube當平臺。也許你只要使用在自己的服務器上的HTML5視頻。不用擔心!HTML5也有tag,你就可以輕松的增加若干的文字說明和字幕文件,和你常用的WebVTT格式非常相似。

      1. <video controls>

      2. ? ?<source src="movie.mp4" ?type="video/mp4">

      3. ? ?<track label="English Captions" ?kind="captions" ?srclang="eN" ?src="captions.vtt" ?default>

      4. ? ?<track label="Subtitulos en espa?ol" ?kind="captions" ?srclang="es" ?src="subs.vtt">

      5. </video>

      5.語義=無障礙功能(約45分鐘)

      你還記得font標簽么?我希望你不記得,畢竟那是一段黑暗的年代。

      雖然現在大家都已經有了共識,但是語義支持并不是HTML5與生俱來的。從第一個HTML頁面開始,語義支持就存在了,而且之后有了長足的改進。HTML5標準引入了新的語義標簽,以便日常使用。

      這是很好,不過語義難道不是只給SEO用的么?

      并不盡然。當你有意識的選擇一個標簽而不是一個鏈接的時候,你就已經刻意改變了元素的含義,提供了不同層次,并且建立了頁面的樹狀信息結構。

      讀屏軟件不會放過這一點。實際上,語義信息是非常有用的工具之一。

      要記住,能力越大責任越大,所以,一定要為每個元素使用正確的語義標簽,從h1到全新的main標簽都是。

      6.使用正確的標記(約30分鐘)

      另外還有一些,是我想和大家討論的,容易出錯的和略有爭議的部分。

      Time vs. Datetime

      時間元素通??梢杂泻芏喔袷?,比如用ISO8601的標準顯示的時區格式,或者時長。 Datetime是幫助顯示時間代表內容的可選屬性之一。我們看一下例子:

      1. <time>14:54</time> Hours and minutes

      2. <time>2018-06</time> Year and month

      3. <time>-03:00</time> Time zones

      4. <time>2h 32m</time> Harry Potter 2 Duration

      5. <p>CSSConf Argentina took place on <time datetime=”2016-08-07”>August 7th</time></p>

      Del 和 Ins

      網絡變化很快,但不要因為擔心變化過多而不注意細節。我們可以使用同時ins和del和datetime屬性來標記內容。

      ins元素表示文檔里額外增加的內容:

      1. <ul>

      2. ? ?<li><ins datetime="2017-08-02">Icecream</ins></li>

      3. ? ?<li>Candy</li>

      4. ? ?<li>Pasta</li>

      5. </ul>

      del表示刪除的內容:

      1. <ul>

      2. ? ?<li><del datetime="2017-06-05">Rewatch Harry Potter 8</del></li>

      3. ? ?<li><del datetime="2017-06-05">Cry because ____ dies.</del></li>

      4. ? ?<li><del datetime="2017-06-06">Write article</del></li>

      5. ? ?<li>Order room</li>

      6. </ul>

      Button vs.?標簽

      拿點爆米花吃吧,下面這段很棒。我們應該用哪一個? 一起來看一下:標簽通常表示鏈接,指向另一個在當前窗口或者打開新窗口的頁面。但,這個標簽在會觸發一些行為比如收放菜單或者圖片庫的時候,就不適用了。而 button元素則是這些情況的正確選擇,通常和JavaScript一起使用。

      同樣 button標簽也常常和 input type="button"混淆,但這二者的不同,通常依賴上下文,(文字、圖片文字、或者僅僅只有文字等)。

      使用 button標簽的時候,一般需要考慮兩件事:

      第一,就是這個按鈕的上下文是否足夠清晰,(以一個關閉“X”按鈕為例),我們一定要給它增加額外的aria-label屬性來幫助用戶理解其作用。

      1. <button aria-label="Close">X</button>

      其次,如果有需要使用a標簽(比如一個搜索框或者一個燈箱效果的圖片集),那么這時候更應該使用a標簽以及javascript控制效果,而不應該單獨使用a標簽。圖片庫常常就是使用a標簽以及href鏈接,這樣如果禁用了js那么瀏覽器也能正常處理點擊事件。

      但是...

      7.必要時使用role屬性(約1小時)

      為了告訴讀屏器用戶我們的鏈接會觸發一個動作,并不是普通標簽,我們必須添加一個值為“button”的role屬性。

      但要注意!

      在寫JavaScript的時候,你不僅應當在用戶點擊的時候調用函數,也要給用戶按下空格鍵的時候也要調用。要這樣做是因為用戶在使用鍵盤瀏覽的時候和使用鼠標點擊鏈接的行為是不同的,這兩種方式都應該能夠正確的觸發事件.

      1. <a href="img/kitten.jpg" role="button" onclick="handleBtnClick(event)" onKeyPress="handleBtnKeyPress(event)">

      2. ? ?Button

      3. </a>

      4. function handleBtnClick(event) { ? ? ? ?

      5. ? ?// Do something

      6. }

      7. function handleBtnKeyPress(event) {

      8. ? ?// Check to see if space or enter were pressed

      9. ? ?if (event.keyCode === 32 || event.keyCode === 13) {

      10. ? ? ? ?// Prevent the default action to stop scrolling when space is pressed

      11. ? ? ? ?event.preventDefault();

      12. ? ? ? ?// Do something

      13. ? ?}

      14. }

      在MDN上有更多的相關內容。

      要記住,aria屬性并不都是必要的,除非像上面的例子這樣,你就不必要遵守這個規則。HTML語義元素都有一個默認的role,比如,導航是“navigation”,鏈接是“link”,等等。也就是說,只在需要改變默認值時,才需要使用角色屬性。

      8.隱藏元素(約1小時)

      HTML和CSS里是有一些方法是用來隱藏元素的。下面這個表應該能幫你找到需要使用的對應方法。

      方法作用效果讀屏軟件兼容性
      CSS: visibility: hidden;把元素從視圖中隱藏,但其占據的位置依然存在(效果類似opacity: 0)不可讀各處通用
      CSS: display: none;把元素從視圖和空間流中都隱藏掉,下一個元素會替代這個元素的位置不可讀各處通用
      HTML5: hidden attribute和display: none;一樣不可讀IE11+
      Aria-hidden = “true”內容可見,但在輔助工具中會被忽略不可讀IE11+
      CSS: .visuallyHidden class元素在視圖和流中都隱藏起來可讀各處通用

      如果你希望在視圖中隱藏元素,但是讀屏軟件依然能找到這個元素,那就適合用最后一種方法。

      這種方法很適合一些標簽或者需要調過內容的鏈接。 visuallyHidden偽類就屬于那種方便你收藏起來以便各種項目都能用的CSS。如果你想,也可以改個名字,比如.pottersCloak,FYI.

      9.遵循網站無障礙功能標準(大約每周花30分鐘)

      網絡無障礙是很難達到,所以就有了標準和一些規范作為指導。

      讀到這里,你可能會問:前面這些規范都是怎樣起作用的呢我們應該何時使用?CSS的規則 display:none 和visibility:hidden 這兩者有什么區別呢?

      W3C標準和WCAG的規范起初讀起來可能會很枯燥,但其實非??煽恳埠苡薪逃饬x。你應該趕緊去看看,沉浸在信息的汪洋大海中。我想你也一定會發現很多你從來沒有用過的的代碼實踐。

      10.審計和復查(約3小時)

      如果你掌握了這些知識,那么來測試一下吧。下面是審查網絡無障礙功能的一些很好的工具。

      • ChromeVox:(http://www.chromevox.com/) Mac和Windows用戶通用,你可以用這款Chrome插件來測試你的網站。

      • Accessibility Developer Tools for Chrome:(https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en) 另一個你可以每天都來測試無障礙功能的瀏覽器插件。

      • Color Filter:(https://www.toptal.com/designers/colorfilter) 用來測試你的網站配色是否對色盲、色弱人群有影響。

      • W3C Validator:(http://validator.w3.org/) W3C的官方測試工具,確保你的HTML符合網絡無障礙功能的各項條件。

      • A11Y Compliance Platform:(http://www.boia.org/?wc3) 互聯網無障礙審查局(BOIA)提供了一個分級報告,報告概述了根據WCAG A/AA 的一些關鍵點測試時,你的網站的評分。

      • WAVE:(http://wave.webaim.org/) 由WebAIM做的一款網絡無障礙功能評估的工具。

      Aerolab在網絡無障礙功能方面的經驗

      我們一直在努力把測試變成日常工作習慣。我們的下一個產品應該永遠以超過上一個為目標。我們確實也會犯錯,但是我們一直在改變進化,而且我們一直從挑戰中學習。

      我們希望自己的產品能一直為用戶帶來最好的體驗,因此我們從最開始就一點點的使我們的產品符合無障礙的標準。

      “路漫漫其修遠兮,吾將上下而求索”,但我們很高興選擇了走這條路,。

      下面這個首頁是我們為Xapo做的一個例子,你可以檢查一下,我們是如何按照無障礙功能的標準來做的。

      Xapo的首頁和商店頁符合前面提到1、3、5、6、7、9 的準則。雖然還沒有100% 的達到2、7 的要求,不過我們一直在朝這個方向努力

      結語

      網絡無障礙并不那么簡單,但如果你把它當成日常工作的一部分(而不是最后一分鐘的檢查清單),那么實現和測試工作都會容易很多。




      往期精選文章
      使用虛擬dom和JavaScript構建完全響應式的UI框架
      擴展 Vue 組件
      使用Three.js制作酷炫無比的無窮隧道特效

      一個治愈JavaScript疲勞的學習計劃

      全棧工程師技能大全

      WEB前端性能優化常見方法

      一小時內搭建一個全棧Web應用框架

      干貨:CSS 專業技巧

      四步實現React頁面過渡動畫效果

      讓你分分鐘理解 JavaScript 閉包


      小手一抖,資料全有。長按二維碼關注京程一燈,閱讀更多技術文章和業界動態。


      AV一本大道香蕉大在线

      <address id="nzfpj"></address>
      <noframes id="nzfpj">

        <form id="nzfpj"><th id="nzfpj"><progress id="nzfpj"></progress></th></form><noframes id="nzfpj"><address id="nzfpj"></address>