構建站點時,tota11y可幫助你實現可視化,屬于一個輔助技術。詳情參見6月8日的發布日志。初的目的是為了減少a11y測試時的缺陷。
Accessibility (a11y) 的測試進程往往是冗長和混亂不清的,在許多的案例中,開發者必須有一定的Accessibility知識才能弄懂結果。
Accessibility(a11y),指的是軟件產品的可訪問性、易用性,特別是指對于視力低下等殘障人士的使用上的無障礙性。2008年,致力于開發Web標準的國際組織萬維網聯盟(World Wide Web Consortium,W3C)發布了Web Content Accessibility Guideline (WCAG) 2.0。WCAG 2.0文檔定義了一系列指導方針,以提高Web內容對于殘疾人的可訪問性。
當前,越來越多的軟件開發人員意識到可訪問性 (Accessibility) 的重要性,發布的網頁或應用程序必須能夠被多種用戶特別是殘疾人群無障礙使用,Web站點如何做到用戶使用的無障礙性,是值得Web開發人員重視及思考的問題,頁面需要在任何解釋環境下都具有良好的易讀性不容忽視。
靈感
Accessibility的難解決有很多原因,盡管當前的工作提供一種檢查許多Accessibility violations的機制,但仍然有大量的問題,尤其是開發者對于所困惑的問題依舊無解——許多這些錯誤無法實實在在看見,事情對我們正常人沒多大的影響,另一方面也無完美的修復方案。
tota11y的目標是解決這些問題,并通過一種有趣和交互的方式來看見可視化后的問題。不僅是實現Web端很好地訪問,而且開發者也應獲得一定的能力來修復和預防accessibility violations的發生。
背景故事
在1月,我們就著手提供提高Khan Academy的無障礙訪問性,在這段時間,我們提升了很多,獲得了每一個頁面bug的手信息,也想出了很多的辦法來修復。John和我對這些新發現做了細心的研究,寫了一個測試和檢測violations的工具——Chrome’s Accessibility Developer Tools,并應用于工作中。
幾周后,我們已經修復了我們網站上的一些重大的accessibility錯誤,并且學習到了大量關于輔助技術的知識。
困難的階段來了!
我們覺得有能力修復我們網站上的大多數accessibility violations,但是我們無法有效地傳播這些經驗給其它的團隊。我們不能讓每一位Khan Academy employee參與進來,他們不愿報告和修復accessibility violations。
我們開啟談話、寫文檔和發送郵件,但是效果甚微,此外我們也沒獲得與我們所做工作想對應的尊重。 ̄へ ̄
簡單來說,我們的開發團隊一直無法完全理解正遭受困擾人的問題所在,也就無法找出修復的方法。
遇見tota11y
大約一月前,我們開始開發tota11y,一個Khan Academy的”Web Frontend” 團隊的內部項目。
目標是讓開發者盡可能簡單地實現手工accessibility測試,且作為他們日常工作的一部分。而不再需要開發團隊針對不理解的violations去做冗長復雜的審核報高,我們想要提供簡單的可視化,在他們眼前的瀏覽器上就好。
接著,我們有了”annotations”的想法,高亮出當前文件部分就好,以及指出錯誤、成功或者僅僅標注出重要的tags,如headings或ARIA landmarks。
tota11y早期的證明型概念。
后來,我們進一步加強和擴展”annotations”的想法,所以你將看到更詳細的錯誤信息、修復建議,以及更多。
tota11y的實現
tota11y是一個single JavaScript file,你可以在的文檔中看到包含如下的內容:
<script src="tota11y.min.js"></script>一旦你看到窗口底部的這個眼睛,即刻開啟:
tota11y目前包括以下的插件:
detecting images with/without alt text (and presentation images)
labeling text with contrast violations (and suggesting appropriate color combinations)
outlining a document’s heading structure and pointing out any errors with it
highlighting input fields without appropriate labels (and suggesting fixes based on context)
labeling all ARIA landmarks on the page
detecting unclear link text such as “Click here” and “More”
更多細節參見:Google Chrome’s Accessibility Developer Tools
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點, 并不代表本站贊同其觀點和對其真實性負責,本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺,網站上部分文章為轉載,并不用于任何商業目的,我們已經盡可能的對作者和來源進行了通告,但是能力有限或疏忽,造成漏登,請及時聯系我們,我們將根據著作權人的要求,立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。