中文字字幕码一二三区

中文字字幕码一二三区

      在線咨詢 - 聯系我們 - 網站地圖收藏本站手機版 您好,客人!歡迎來到三息建站平台!
      logo
      品牌創新設計
      XXX
      網站建設
      簡單有效!10步大幅提升網站可訪問性
      來源:三息網絡  發表日期:2015-04-08

      注:網站越來越重視用戶體驗,對于做網站的人員來說是否了解過一些可以增加網站可讀性的Tips? 今天騰訊ISUX的溫總向大家分享可提升網站訪問性的10個步驟,每一步都可以在20分鐘内完成,這篇文章也可以在20分鐘内看完。


      第一步,檢查Title,不允許空,不允許過長,簡潔明了。

      Title是第一個可以訪問到内容的元素,所以一定要非常重視。當用戶切換浏覽器Tab标簽的時候,一定最先聽到Title标記的内容。Title一定要能代表當前頁面的主題。這裡的要求和SEO最佳實踐幾乎一緻。


      第二步,提供文字替代方案。

      走查網頁上所有的圖片、iframe、object,檢查這些元素是否填寫了适當的alt屬性或者title屬性的值,看看這些值是否可以描述這些元素的内容或者目的;heading元素是否标記了内容,而不僅僅是圖片或者背景圖片。比如,下圖可以标記為“騰訊ISUX公共帳号二維碼”。


      第三步,檢查表單。

      是否有label标簽,這些label的for屬性是否通過填寫相應表單元素的id來彼此綁定;label的标簽包裹的範圍是否足夠大,一緻鼠标很容易的就能操作到;表單元素在被聚焦的時候是否有清晰的視覺反饋;提交和重置按鈕以及圖片按鈕是否标記了文字或者在title中寫明了該按鈕的作用。強調一下,比如一個按鈕的樣式是一個放大鏡,那麼替代文字的内容一定不是“放大鏡”,而是“搜索”。


      第四步,使用heading做信息架構。

      輔助技術,特别是讀屏軟件,一般都會提供一個快捷鍵h,按h按鍵,焦點即可在heading之間切換,從而提高浏覽效率。減輕讀屏軟件用戶了解當前頁面内容的障礙。雖然HTML5允許heading之間的嵌套,但是我絕對不推薦。


      第五步,是否有blur()

      輔助技術一般都是依靠焦點來獲取内容,所以這個事件從本質上就使得輔助内容無法獲得應用了此方法的元素。this.onfocus=this.blur()這個是最傻的一句代碼了。


      第六步,按Ctrl+或者command+查看頁面是否可以被縮放。

      也許你因為某個效果使用了font-size-adjust:none,或者在viewport中設置了禁止用戶縮放,從而使得頁面無法縮放。老年人和使用11寸高檔筆記本的老闆可是非常喜歡使用放大頁面的功能的。


      第七步,添加landmark角色。

      這個是成本最低的方法了,添加的方法就是給相應功能的元素添加role這個屬性,并賦予響應的landmark值。一共有8個值,一般你隻能用到6個:banner(banner)、complementary(輔助内容區)、contentinfo(網站信息和版權)、form(表單)、main(主内容區)、navigation(導航區)、search(搜索區)。如果一個表單,他僅僅是提供搜索功能,那麼就将role設置為search,而不是form。


      第八步,設置快捷鍵。

      1是指向首頁的那個鍊接。Esc是停止播放音視頻,是停止,不是暫停。這兩個按鍵是迄今為止最能達成共識的快捷鍵了。另外,挖掘當前頁面的最重要的一個功能,是最重要的。然後在這個功能開始的元素或者包裝元素上設置一個快捷鍵,按照順序的話,就是2吧!accesskey=2。不要将同一個值設置給多個元素,也不要使用字母作為快捷鍵。另外聚焦的事件不要單單依賴浏覽器本身,請使用js或者相應的鍵盤事件,然後聚焦給相應的元素。


      第九步,觸發界面轉換需設置焦點。

      比如,點擊一個按鈕,彈出了一個模态或者非模态的彈窗(不是浏覽器彈窗),利用js把焦點移動到這個窗口的第一個有内容的DOM上;再比如,點擊“返回首頁”按鈕,如果僅僅是鍊接的是#或者改變類似scrollTop的值,那麼也一定利用js将焦點移動到這個頁面的第一個有内容的DOM上。如果你通過一個按鈕觸發了一個組件窗口,在關閉這個組件窗口的時候,請把焦點重新移動回到觸發這個窗口的按鈕上。


      第十步,填寫一個簡單的鍊接到之後,作為第一個内容元素。


      标記的内容是簡要的說明,說明你在這個頁面上提供的快捷鍵。然後這個鍊接可以指向一個更加豐富的無障礙幫助頁面,并且給這個鍊接設置accesskey=0。


      更多互聯網相關知識交流可咨詢三息網站(www.sanxiw.com)(專注于成都網站建設,成都網站設計,成都網頁設計,互聯網傳播策略建議)。

      分享到:

      中文字事不卡一二三区 Copyright 2020ALL Rights Reserved. 成都XXX網絡科技有限公司 版權所有 滬ICP備14039207号