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

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

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

• WAI-ARIA Overview
• Contribute to w3c/wai-tutorials
• The WAI Forward
• ARIA 簡介
• 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)的知識的話，你應(yīng)該知道。愛掏網(wǎng) - it200.com針對于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來進行開發(fā)。愛掏網(wǎng) - it200.comHTML是構(gòu)建Web應(yīng)用最基本的部分之一，但對于可訪問的Web應(yīng)用而言，在原有的DOM基礎(chǔ)上會有另一個解析樹，即 AOM樹（可訪問性樹）。愛掏網(wǎng) - it200.com粗略地說，AOM是DOM樹的一個子集。愛掏網(wǎng) - it200.com我們可以用下圖來描述AOM和DOM之間的關(guān)系：

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

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

因此，雖然虛擬DOM本質(zhì)上只是DOM的克隆，但它沒有修改用戶所看到的內(nèi)容的能力。愛掏網(wǎng) - it200.com這實際上使整個過程更快，因為可以“批處理”對虛擬DOM的更改，并且可以在事件循環(huán)結(jié)束時進行差異（diff）操作

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

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

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

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

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

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

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

HTML屬性和保留字

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

JSX是JavaScript中的一種擴展語法，而JavaScript中還有一些特定HTML屬性名匹配的保留字。愛掏網(wǎng) - it200.com這些不能以你期望的方式來書寫。愛掏網(wǎng) - it200.com比如for就是JavaScript中的一個保留字，在JavaScript中它用于循環(huán)遍歷，而在React中元素時，可以使用for屬性與相應(yīng)的表單控件綁定在一起，那么這個時候，在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標簽，它使用針對其目的而全名的元素。愛掏網(wǎng) - it200.com語義化的HTML也是構(gòu)建可訪問Web應(yīng)用的基礎(chǔ)，利用多種HTML元素來強化你的Web應(yīng)用中的信息通?？梢允褂媚阒苯訕?gòu)建更具可訪問性的Web應(yīng)用。愛掏網(wǎng) - it200.com但正如前面 @BrittanyIRL提到的，如今天很多使用React（或類似于React框架，比如Vue）的開發(fā)者過度的依賴于和這種無語義化的HTML標簽，甚至很多開發(fā)者都不知道如何在開發(fā)中使用有語義化的標簽。愛掏網(wǎng) - it200.com

正因為，使用類似React框架開發(fā)的Web應(yīng)用可能只能看到和標簽，也讓眾多開發(fā)者造成一種誤解：

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

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