A11Y 101: 構(gòu)建可訪問性React應(yīng)用的技巧

用一句話來概括的話，就是：

如果要僅基于div或span進(jìn)行開發(fā)，要開發(fā)具有Web可訪問性的Web應(yīng)用或Web頁面就需要強(qiáng)度的依賴于WAI-ARIA相關(guān)的技術(shù)。愛掏網(wǎng) - it200.com

有關(guān)于WAI-ARIA更詳細(xì)的介紹可以閱讀《A11Y 101：WAI-ARIA初探》一文，或者閱讀下面相關(guān)教程：

• WAI-ARIA Overview
• Contribute to w3c/wai-tutorials
• The WAI Forward
• ARIA 簡(jiǎn)介
• Demystifying WAI-ARIA
• WAI-ARIA basics
• WAI-ARIA in 5 steps
• POURing ARIA into the HTML element specs
• Using ARIA for Web Applications
• The Dangers of Using WAI-ARIA Incorrectly
• ARIA Has Perfect Support
• ARIA: poison or antidote?
• Accessible Charts with ARIA
• POURing ARIA into the HTML element specs
• Beginning to Demystify ARIA
• Complete List of WAI ARIA Roles and Their Uses
• Introduction to ARIA - Accessible Rich Internet Applications

如果你曾經(jīng)接觸過Web可訪問性相關(guān)的知識(shí)的話，你應(yīng)該知道。愛掏網(wǎng) - it200.com針對(duì)于Web開發(fā)而言，構(gòu)建可訪問性的Web應(yīng)用可以根據(jù)相關(guān)的規(guī)范（即 網(wǎng)絡(luò)內(nèi)容無障礙指南，也就是大家所說的WCAG指南）來做開發(fā)。愛掏網(wǎng) - it200.com另外和WCAG相關(guān)的規(guī)范還有：

• Wuhcag提供的WCAG檢查表（WCAG Checklist From Wuhcag）
• WebAIM提供的WCAG檢查表（WCAG Checklist From WebAIM）
• A11Y Project提供的檢查表（Checklist Frome The A11Y Project）

React框架還沒有出現(xiàn)之前（或者說不基于任何JavaScript框架開發(fā)Web應(yīng)用），都是基于HTML來進(jìn)行開發(fā)。愛掏網(wǎng) - it200.comHTML是構(gòu)建Web應(yīng)用最基本的部分之一，但對(duì)于可訪問的Web應(yīng)用而言，在原有的DOM基礎(chǔ)上會(huì)有另一個(gè)解析樹，即 AOM樹（可訪問性樹）。愛掏網(wǎng) - it200.com粗略地說，AOM是DOM樹的一個(gè)子集。愛掏網(wǎng) - it200.com我們可以用下圖來描述AOM和DOM之間的關(guān)系：

對(duì)于用戶界面和輔助技術(shù)，也可以用AOM和DOM來描述它們之間的關(guān)系：

但是，基于React框架開發(fā)的Web應(yīng)用和我們平時(shí)使用HTML開發(fā)的Web應(yīng)用還是有很大區(qū)別的。愛掏網(wǎng) - it200.com在React中，它通過構(gòu)建一個(gè)“虛擬DOM”來替代DOM，執(zhí)行DOM更新的替代方法（直接更新DOM的開銷可能相當(dāng)大）。愛掏網(wǎng) - it200.com對(duì)于每個(gè)DOM對(duì)象，虛擬DOM中將有一個(gè)對(duì)應(yīng)的對(duì)象。愛掏網(wǎng) - it200.com

因此，雖然虛擬DOM本質(zhì)上只是DOM的克隆，但它沒有修改用戶所看到的內(nèi)容的能力。愛掏網(wǎng) - it200.com這實(shí)際上使整個(gè)過程更快，因?yàn)榭梢浴芭幚怼睂?duì)虛擬DOM的更改，并且可以在事件循環(huán)結(jié)束時(shí)進(jìn)行差異（diff）操作

當(dāng)你渲染一個(gè)JSX元素時(shí)，每個(gè)虛擬DOM節(jié)點(diǎn)將被更新，然后在更新之前的虛擬DOM和更新之后的現(xiàn)在的虛擬DOM之間執(zhí)行一個(gè)“差異操作”，并能夠理解哪些對(duì)象被更改了。愛掏網(wǎng) - it200.com

虛擬DOM是一個(gè)非常重要也是非常復(fù)雜的概念，如果你想了解有關(guān)于虛擬DOM更多的知識(shí)，可以閱讀：

• Understanding the Virtual DOM
• JSX and the Virtual DOM
• React 中的虛擬 DOM 和 diff 算法
• 圖解 React Virtual DOM

先拋開虛擬DOM不聊，根據(jù)AOM和DOM之間的關(guān)系，我們可以把虛擬DOM結(jié)合進(jìn)來，那么用下圖來描述：

換句話說，即使你對(duì)虛擬DOM不太了解也不過于太擔(dān)心，因?yàn)榛赗eact構(gòu)建可訪問的Web應(yīng)用和以往構(gòu)建可訪問的Web應(yīng)用相同，采用的也是相同的規(guī)范，只不過在寫模板（Template）時(shí)有所差異。愛掏網(wǎng) - it200.com即JSX語法編寫模板。愛掏網(wǎng) - it200.com如果你不熟悉它，建議你花點(diǎn)時(shí)間閱讀以下資源：

• 閱讀React文檔，根據(jù)其官方文檔提供的教程使用React
• 了解React的鉤子函數(shù)的使用，特別是useState和useEffect的基本使用
• 理解React組件中spread操作符的使用
• 了解React中children的使用
• 理解JavaScript數(shù)組中的map()函數(shù)的使用
• 對(duì)npm的使用有基本的了解

有了這些基礎(chǔ)，我們就來開始看看如何在React環(huán)境下構(gòu)建更具可訪問性的Web應(yīng)用。愛掏網(wǎng) - it200.com

HTML屬性和保留字

熟悉JSX或了解React開發(fā)的同學(xué)都知道，在React中編寫HTML時(shí)要記住的一件事是，HTML屬性需要用camelCase（駝峰）編寫。愛掏網(wǎng) - it200.com例如，tabindex需要寫成tabIndex。愛掏網(wǎng) - it200.com這個(gè)規(guī)則的例外是，任何data-*或aria-*（aria-*是ARIA中的屬性集，比如aria-label，aria-hidden等）屬性仍然按照以往的寫法，不需要換成駝峰寫法。愛掏網(wǎng) - it200.com

JSX是JavaScript中的一種擴(kuò)展語法，而JavaScript中還有一些特定HTML屬性名匹配的保留字。愛掏網(wǎng) - it200.com這些不能以你期望的方式來書寫。愛掏網(wǎng) - it200.com比如for就是JavaScript中的一個(gè)保留字，在JavaScript中它用于循環(huán)遍歷，而在React中元素時(shí)，可以使用for屬性與相應(yīng)的表單控件綁定在一起，那么這個(gè)時(shí)候，在JSX中就需要把for換成htmlFor屬性。愛掏網(wǎng) - it200.com另外，class也是JavaScript中的保留字，它在HTML中是用來給元素聲明類名，那么在React中它就得換成className。愛掏網(wǎng) - it200.com除此之外，可能還有更多屬性需要關(guān)注，但到目前為止，我發(fā)現(xiàn)JavaScript中保留字和HTML屬性之間只有這些沖突。愛掏網(wǎng) - it200.com

    
        用戶名：
        

語義化的HTML

語義化的HTML指的是具有語義的HTML標(biāo)簽，它使用針對(duì)其目的而全名的元素。愛掏網(wǎng) - it200.com語義化的HTML也是構(gòu)建可訪問Web應(yīng)用的基礎(chǔ)，利用多種HTML元素來強(qiáng)化你的Web應(yīng)用中的信息通常可以使用你直接構(gòu)建更具可訪問性的Web應(yīng)用。愛掏網(wǎng) - it200.com但正如前面 @BrittanyIRL提到的，如今天很多使用React（或類似于React框架，比如Vue）的開發(fā)者過度的依賴于和這種無語義化的HTML標(biāo)簽，甚至很多開發(fā)者都不知道如何在開發(fā)中使用有語義化的標(biāo)簽。愛掏網(wǎng) - it200.com

正因?yàn)椋褂妙愃芌eact框架開發(fā)的Web應(yīng)用可能只能看到和標(biāo)簽，也讓眾多開發(fā)者造成一種誤解：

這也讓React背上了不可構(gòu)建可訪問性Web應(yīng)用的鍋。愛掏網(wǎng) - it200.com換句話說，我們使用React框架來開發(fā)Web應(yīng)該，不應(yīng)該只使用這兩個(gè)無語義的HTML標(biāo)簽，我們更應(yīng)該在寫模板（JSX模板）時(shí)考慮有語義的HTML。愛掏網(wǎng) - it200.com這樣做有幾個(gè)原因：

相關(guān)內(nèi)容