整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
“Web 可訪問(wèn)性”一詞定義了一組開(kāi)發(fā)人員需要遵循的準(zhǔn)則，以使Web應(yīng)用程序的交互更加方便。任何網(wǎng)站的內(nèi)容、UI/UX 設(shè)計(jì)和布局都應(yīng)該是可訪問(wèn)的。在這篇文章中，我們研究了前端團(tuán)隊(duì)可以做些什么來(lái)輕松地將他們的網(wǎng)站提升到適合Web可訪問(wèn)性的標(biāo)準(zhǔn)。
保持標(biāo)記清潔
無(wú)論你使用什么標(biāo)記，都要正確整齊地構(gòu)建它，避免跳過(guò)關(guān)卡。例如，在HTML中使用 <button> 元素而不是 <span> 或 <div>。使用 <nav> 進(jìn)行導(dǎo)航，使用 <button> 進(jìn)行頁(yè)面操作。
將 <strong> 或 <em> 元素與 <bold> 或 <i> 區(qū)分開(kāi)來(lái)。前兩者用于對(duì)內(nèi)容的語(yǔ)義強(qiáng)調(diào)，后兩者用于視覺(jué)強(qiáng)調(diào)。
l 確保橫幅中的公司徽標(biāo)鏈接回網(wǎng)站的主頁(yè)。
l 使用 <lang> 屬性告訴瀏覽器在網(wǎng)站上使用哪種語(yǔ)言。
l 如果你想在視覺(jué)上和屏幕閱讀器中隱藏內(nèi)容，請(qǐng)使用 hidden 屬性。
l 為長(zhǎng)頁(yè)面添加錨鏈接(跳轉(zhuǎn)鏈接)，以便用戶可以跳過(guò)他們不需要的內(nèi)容并繼續(xù)相關(guān)部分。
注意頁(yè)面語(yǔ)義
用戶和機(jī)器(屏幕閱讀器、盲文顯示器)都應(yīng)該能夠識(shí)別頁(yè)面結(jié)構(gòu)。通過(guò)使用頁(yè)面上的分段(<header>、<footer>、<article>、<nav>)和標(biāo)題元素來(lái)創(chuàng)建語(yǔ)義布局。這有助于定義網(wǎng)頁(yè)的清晰層次輪廓，并區(qū)分主要(主要：<h1>、<h2>、<article>)和次要(不太重要：<h3> - <h6>、<footer>)內(nèi)容。
當(dāng)你在頁(yè)面中使用標(biāo)題時(shí)，不要使用格式(字體樣式和大小)偽造標(biāo)題屬性 (<h>) 的實(shí)際標(biāo)記，因?yàn)檫@不允許輔助技術(shù)識(shí)別這些是標(biāo)題。
在適當(dāng)?shù)那闆r下在網(wǎng)頁(yè)中使用 ARIA 地標(biāo)。ARIA(可訪問(wèn)的富 Internet 應(yīng)用程序)是一個(gè)綜合技術(shù)規(guī)范，用于將可訪問(wèn)性信息添加到本地不可訪問(wèn)的元素(特別是使用 JavaScript、AJAX 和 DHTML 開(kāi)發(fā)的元素)。使用 ARIA 地標(biāo)，開(kāi)發(fā)人員可以擴(kuò)展 HTML 功能并將適當(dāng)?shù)恼Z(yǔ)義(即屬性)應(yīng)用到 UI 和內(nèi)容元素，以便輔助技術(shù)理解這些。
這是一個(gè) HTML 語(yǔ)義元素(<header>、<nav>、<main>、<footer>)如何與 ARIA 角色屬性(“banner”、“navigation”、“main”、“contentinfo”)組合的示例使用戶更容易使用屏幕閱讀器進(jìn)行網(wǎng)站導(dǎo)航。
盡管大多數(shù) ARIA 功能最近都是在 HTML5 中實(shí)現(xiàn)的(你絕對(duì)應(yīng)該喜歡這些!)，但并非所有屏幕閱讀器和瀏覽器(例如 IE)都足夠復(fù)雜，僅依賴于 HTML 語(yǔ)義。適當(dāng)使用 ARIA 的一些示例是分配角色來(lái)描述某些類型的小部件(“菜單”、“樹(shù)項(xiàng)”、“滑塊”)，定義描述拖放源和放置目標(biāo)的拖放屬性，以及添加警報(bào)以通知有關(guān)動(dòng)態(tài)頁(yè)面更改的輔助技術(shù)。
支持標(biāo)簽導(dǎo)航
使元素的 Tab 順序(也稱為文檔對(duì)象模型或 DOM 順序)與視覺(jué)順序一致。從 Tab 順序中刪除不必要的元素，以免混淆使用 Tab 或輔助設(shè)備導(dǎo)航的用戶。
使導(dǎo)航元素的焦點(diǎn)可見(jiàn)。你可以為此使用第三方插件或 <outline> 屬性，該屬性為在選項(xiàng)卡式導(dǎo)航(或其替代方案)時(shí)具有焦點(diǎn)的頁(yè)面元素和鏈接提供視覺(jué)反饋。
使用 <tabindex> 屬性可以使鏈接、按鈕和表單字段等元素具有焦點(diǎn)，并且可以通過(guò) Enter 鍵和/或空格鍵進(jìn)行選擇。即使具有 <tabindex> 屬性和 0 整數(shù)值的不可聚焦元素也可以成為可聚焦元素，例如<h3 tabindex="0">一個(gè)可聚焦的標(biāo)題</h3>
如果頁(yè)面上有彈出窗口，導(dǎo)航優(yōu)先級(jí)應(yīng)該允許首先關(guān)閉它們。完成此操作后，理想情況下，焦點(diǎn)應(yīng)該跳回到用戶被打開(kāi)的模式窗口打斷的網(wǎng)頁(yè)元素。為此，請(qǐng)將最后一個(gè)焦點(diǎn)元素存儲(chǔ)在變量中。
為圖像添加替代文本
屏幕閱讀器幾乎可以訪問(wèn)頁(yè)面上的所有內(nèi)容——圖形信息除外。所以不要忘記為圖像和其他圖形添加替代文本(<img> alt 屬性)。這不僅可以幫助使用輔助技術(shù)“閱讀”屏幕的人，還可以幫助互聯(lián)網(wǎng)連接不佳的用戶。你的網(wǎng)站也將使用圖像替代文本進(jìn)行 SEO 優(yōu)化。在Web前端培訓(xùn)中，不僅有理論知識(shí)的課程，也會(huì)有實(shí)操項(xiàng)目的訓(xùn)練，讓你深入淺出地學(xué)習(xí)前端技術(shù)，彌補(bǔ)項(xiàng)目經(jīng)驗(yàn)的空缺。
圖像替代文本應(yīng)該精確、簡(jiǎn)潔，并反映添加圖像的主要目的。根據(jù)上下文，相同的圖像可能有不同的替代文本，例如 如果將公司徽標(biāo)放在標(biāo)題中并將用戶返回到主頁(yè)，則其準(zhǔn)確的替代文本可能是`<img alt="Company X logo - Home page.">`
l 在替代文本中，避免使用多余的“圖像”或“圖像”——無(wú)論哪種方式，輔助技術(shù)都會(huì)警告用戶有圖像。
l 以句點(diǎn)結(jié)束替代文本。這將使屏幕閱讀器在 alt 文本中的最后一個(gè)單詞之后暫停一點(diǎn)，從而為用戶提供更愉快的體驗(yàn)。
l 具有多個(gè)可點(diǎn)擊區(qū)域的圖像(例如圖像地圖)的替代文本應(yīng)提供這些鏈接的完整描述。此外，每個(gè)可點(diǎn)擊區(qū)域都應(yīng)該有相應(yīng)的替代文本來(lái)描述其目的或目的地。
l 避免使用文字圖片;如果你不能沒(méi)有它們，替代文本應(yīng)該包含與圖像中相同的單詞。
l 如果你有多個(gè)圖像傳達(dá)一條信息，則組中第一張圖像的替代文本應(yīng)包含整個(gè)組的信息。
l 要熟悉替代文本的普遍接受標(biāo)準(zhǔn)，你可以隨時(shí)查看此替代文本決策樹(shù)。
雖然必須為所有對(duì)理解內(nèi)容很重要的圖像添加替代文本，但對(duì)于與內(nèi)容沒(méi)有直接關(guān)系的菜單圖標(biāo)或裝飾性圖像(如封面)則無(wú)需這樣做。對(duì)于這樣的圖像，只需使用一個(gè)空的 <img alt> 屬性。
最后技巧
盡管這些提示肯定會(huì)增加你網(wǎng)站的包容性，但最好不要將 Web可訪問(wèn)性視為一套正式的指南。首先，它是一項(xiàng)全面的策略，可以關(guān)心所有用戶并使你的網(wǎng)站內(nèi)容可供他們使用——無(wú)論他們使用何種瀏覽器、互聯(lián)網(wǎng)提供商或輔助設(shè)備。
者：明明如月
審校：藍(lán)色漂流瓶
本文為你提供一篇HTML5基本布局模板示例。你可以直接拷貝，粘貼到你的HTML文件中并對(duì)其進(jìn)行修改。
好，說(shuō)實(shí)話，這個(gè)本是為我自己準(zhǔn)備的html5布局模板，但是你可以拿來(lái)用。
雖然本文比較簡(jiǎn)單（噴子止步），但是還是一個(gè)不錯(cuò)的模板，可以存起來(lái)，或者參考一下人家的結(jié)構(gòu)。
代碼如下：
圖片格式
圖片格式
英文源：http://www.codeshare.co.uk/blog/basic-html5-template-layout-example/
者有話要說(shuō)：此文是作者自己的學(xué)習(xí)總結(jié)，供大家參考，不足之處還請(qǐng)見(jiàn)諒和指正~
在學(xué)習(xí)完了基本的HTML+CSS標(biāo)簽之后，就可以嘗試寫(xiě)一些簡(jiǎn)單的靜態(tài)網(wǎng)頁(yè)啦~練習(xí)的過(guò)程是充滿成就感的，值得反復(fù)體會(huì)和思考！
網(wǎng)頁(yè)結(jié)構(gòu)
簡(jiǎn)單提一下常用于表示網(wǎng)頁(yè)機(jī)構(gòu)的標(biāo)簽：
header 整個(gè)頁(yè)面的標(biāo)題（也可表示一個(gè)內(nèi)容區(qū)塊）
main 頁(yè)面主體部分
footer 整個(gè)頁(yè)面的腳注（也可表示一個(gè)內(nèi)容區(qū)塊）
article 一塊與上下文無(wú)關(guān)的獨(dú)立內(nèi)容
section 表示一個(gè)內(nèi)容區(qū)塊，常嵌套于article中
aside 在article之外與其內(nèi)容相關(guān)的輔助信息
nav 頁(yè)面中的導(dǎo)航欄
figure 表示一段獨(dú)立的流內(nèi)容
基本網(wǎng)站結(jié)構(gòu)
三欄布局
一個(gè)網(wǎng)頁(yè)最少由header、main、footer三部分組成，那么從三欄布局開(kāi)始練習(xí)吧。無(wú)論是上-中-下結(jié)構(gòu)還是左-中-右結(jié)構(gòu)，關(guān)鍵都在于設(shè)置中間部分的寬高或位置。我們知道網(wǎng)頁(yè)的主體內(nèi)容（版心）是處于居中位置、隨網(wǎng)頁(yè)縮放而縮放的。那么左右（或上下）兩欄固定后，須使中間部分自適應(yīng)。以下總結(jié)了幾種三欄布局的方法，以左-中-右結(jié)構(gòu)為例：
先寫(xiě)左中右三個(gè)盒子。
body部分
1.使用float
利用float使左右脫離文檔流
需要注意的是，使用float方法需要在body部分改一下center盒子的位置，把center盒子放在right盒子之后（否則right盒子會(huì)跑到下一行右側(cè)）。以上代碼中，設(shè)置center盒子的左右外邊距來(lái)實(shí)現(xiàn)寬度自適應(yīng)，若父盒子layout無(wú)高度要求，可用min-height實(shí)現(xiàn)高度自適應(yīng)。不加高度自適應(yīng)也可，在未設(shè)置center盒子高度的情況下本身高度會(huì)隨文本內(nèi)容的擴(kuò)充而自動(dòng)增加。
2.使用position
利用絕對(duì)定位脫離文檔流
三個(gè)盒子都分別使用絕對(duì)定位，left、right分別距離窗口左右端為0，center距離窗口左端的間距為left盒子的寬度，距離窗口右端的間距為right盒子的寬度。
3.使用flex
利用彈性盒固有屬性
須給父盒子layout加上彈性盒屬性，給center盒子設(shè)置大于0的flex值，利用彈性盒自動(dòng)拉伸效果實(shí)現(xiàn)center盒子的寬度自適應(yīng)。
4.使用table
設(shè)置為表格
給父盒子layout設(shè)置為table，寬度為整個(gè)窗口，給三個(gè)子盒子都設(shè)置為table-cell，此時(shí)三個(gè)盒子就有了表格的屬性。固定left、right盒子的寬度，center盒子自動(dòng)占滿父盒子剩余寬度。需要注意的是，因?yàn)楦负凶泳哂斜砀駥傩裕?dāng)left、center、right三者中任意一個(gè)盒子高度改變時(shí)，其他兩個(gè)盒子會(huì)跟著改變。
5.使用grid
設(shè)置為網(wǎng)格
將父盒子layout設(shè)置為grid，寬度為整個(gè)窗口，用template-rows設(shè)置行高，用template-columns分別設(shè)置三個(gè)盒子的寬度，其中auto實(shí)現(xiàn)center盒子的寬度自適應(yīng)。需要注意的是，這里用template-rows設(shè)置了固定的行高，因此center的高度不會(huì)自適應(yīng)。
仿寫(xiě)練習(xí)
適合初學(xué)者練習(xí)的網(wǎng)頁(yè)有很多，可以打開(kāi)網(wǎng)址之家去里面挑一挑，以靜態(tài)頁(yè)面為主的網(wǎng)站。作者自己是以豆瓣首頁(yè)（局部）進(jìn)行練習(xí)的。練習(xí)過(guò)程中，千萬(wàn)不要去看網(wǎng)站源碼（此時(shí)你也有很多地方看不懂），先試著自己分析和思考，用所學(xué)的知識(shí)看看能做到哪一步。
筆者學(xué)習(xí)時(shí)的仿寫(xiě)
放上對(duì)比圖，還是有很多不一樣的地方，網(wǎng)頁(yè)也沒(méi)有功能，作為初學(xué)者這都是正常的。靜態(tài)網(wǎng)頁(yè)練習(xí)的主要目的是熟悉HTML+CSS布局，培養(yǎng)做網(wǎng)頁(yè)的思維。具體細(xì)節(jié)隨著學(xué)習(xí)的深入，可以讓網(wǎng)頁(yè)更還原、頁(yè)面更精美，網(wǎng)頁(yè)功能也能逐步完善起來(lái)，實(shí)現(xiàn)真正的網(wǎng)站開(kāi)發(fā)。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
