A11Y 101: 構建可訪問性React應用的技巧

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

如果要僅基于div或span進行開發，要開發具有Web可訪問性的Web應用或Web頁面就需要強度的依賴于WAI-ARIA相關的技術。愛掏網 - it200.com

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

• 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

如果你曾經接觸過Web可訪問性相關的知識的話，你應該知道。愛掏網 - it200.com針對于Web開發而言，構建可訪問性的Web應用可以根據相關的規范（即 網絡內容無障礙指南，也就是大家所說的WCAG指南）來做開發。愛掏網 - it200.com另外和WCAG相關的規范還有：

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

React框架還沒有出現之前（或者說不基于任何JavaScript框架開發Web應用），都是基于HTML來進行開發。愛掏網 - it200.comHTML是構建Web應用最基本的部分之一，但對于可訪問的Web應用而言，在原有的DOM基礎上會有另一個解析樹，即 AOM樹（可訪問性樹）。愛掏網 - it200.com粗略地說，AOM是DOM樹的一個子集。愛掏網 - it200.com我們可以用下圖來描述AOM和DOM之間的關系：

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

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

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

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

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

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

先拋開虛擬DOM不聊，根據AOM和DOM之間的關系，我們可以把虛擬DOM結合進來，那么用下圖來描述：

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

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

有了這些基礎，我們就來開始看看如何在React環境下構建更具可訪問性的Web應用。愛掏網 - it200.com

HTML屬性和保留字

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

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

    
        用戶名：
        

語義化的HTML

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

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

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

相關內容