​

快速總結↬ Web 應用程式的可訪問性似乎很困難，因為似乎在線上關於該主題的資訊很少。但是在研究我的電子書時，我發現情況比看起來要好。以下是關於框架功能的可訪問性使用、可用於包容性事業的具體 Vue.js 特徵以及社群倡議和審查模式（以及在哪裡找到它們）的三個見解。

在 Web 可訪問性方面，像 React、Angular 和 Vue 這樣的 JavaScript 框架的名聲很差。但這是否是由於這些工具固有的技術限制或無法克服的問題？我想不是。在我的書“ Accessible Vue ”的研究階段，我獲得了關於 Web 應用程式可訪問性的三個見解，特別是框架。考慮到這些，也許值得從另一個角度看待可訪問的 Vue 應用程式。

洞察 1：JavaScript 框架的可訪問性功能未被充分利用 

由現代 JavaScript 框架支援和執行的基於元件的設計不僅在以智慧方式使用時提供了出色的開發人員體驗和專案人體工程學，而且還可以提供可訪問性的優勢。第一個是可重用性因素，即當您的元件在應用程式中的多個位置（可能以不同的形式或形狀）使用時，它只需要被訪問一次。在這種情況下，增加的開發人員體驗實際上可以幫助使用者，並且“將可訪問性融入元件”（正如 Hidde de Vries 所說）為每個人創造了雙贏的局面。

基於元件的設計帶來的第二個方面是props——即一個元件可以從其父環境繼承或獲取上下文的形式。這種“環境資料”的轉發也可以服務於可訪問性。

以頭條新聞為例。紮實且易於理解的標題結構不僅有利於 SEO，而且特別適合使用螢幕閱讀器的人。當他們遇到一個健全的文件大綱時，由構建網頁或應用程式的標題構成，螢幕閱讀器使用者可以快速瞭解他們所在的網頁。就像有視覺能力的使用者不會閱讀頁面上的每個單詞而是掃描有趣的東西一樣，盲人螢幕閱讀器使用者不會讓他們的軟體閱讀每個單詞。相反，他們正在檢查文件中他們感興趣的內容和功能。就此而言，標題將內容片段保持在一起，同時提供文件的結構框架（想想木結構房屋）。

使頭條新聞提供結構的不僅僅是它們的存在。也是它們的巢狀在使用者的腦海中創造了一個影象。為此，Web 開發人員的標題工具箱包含六個級別 ( <h1>

例如，讓我們從GOV.UK 網站獲取（刪節的）標題樹：

1 — Welcome to GOV.UK
  2 — Popular on GOV.UK
  2 — Services and information
    3 — Benefits
    3 — Births, deaths, marriages and care
    3 — Business and self-employment
    // …etc
  2 — Departments and policy
    3 — Coronavirus (COVID 19)
    3 — Travel abroad: step by step
…etc

即使沒有訪問實際頁面，也沒有真正從視覺上感知它，這個標題樹建立了一個目錄，幫助您瞭解可以在首頁上預期哪些部分。創作者使用標題元素來預示其後的資料，並且沒有跳過標題級別。

到目前為止，如此熟悉（我猜至少與搜尋引擎相關）。然而，因為一個元件可以在你的應用程式的不同地方使用，它們內部的硬連線標題級別有時會建立一個總體上不理想的標題樹。標題之間的關係可能不像上面的例子那樣清楚地表達（“商業和個體經營”不是獨立的，而是與“服務和資訊”相關的）。

例如，想象一個商店的最新產品列表，它可以放置在主要內容和側邊欄中——這兩個部分很可能存在於不同的環境中。像這樣的標題<h1>Our latest arrivals</h1>在主要內容的產品列表上方是有意義的——因為它是整個文件或檢視的中心內容。

但是，相同的元件具有相同的<h1>功能但放置在另一個文件的側邊欄中，這表明最重要的內容位於側邊欄中並與<h1>主要內容中的內容競爭。雖然我上面描述的是基於元件的設計的一個特點，但這給了我們一個很好的機會把這兩個方面放在一起——需要一個健全的標題樹和我們對 props 的瞭解：

上下文通過props #

讓我們從理論考慮進入動手程式碼。在以下程式碼塊中，您會看到一個元件，其中列出了線上商店中的最新問題。它非常簡單，但重點在第 3 行，硬編碼<h1>：

<template>
    <div>
        <h1>Our latest arrivals</h1>
        <ol>
            <li>Product A</li>
            <li>Product B</li>
            <!-- etc -->
        </ol>
  </div>
</template>

為了在應用程式的不同位置使用此元件而不影響文件的標題樹，我們希望使標題級別動態化。為了實現這一點，我們將<h1>Vue 的動態元件名稱助手替換為，好吧，component：

<component :is="headlineElement">Our latest arrivals</component>

在我們元件的指令碼部分，我們現在必須新增兩件事：

• 一個元件道具，以字串形式接收確切的標題級別，headlineLevel;
• 一個計算屬性（headlineElement來自上面的程式碼示例），它根據字串h和headlineLevel.

所以我們的簡化指令碼塊如下所示：

<script>
export default {
    props: {
      headlineLevel: {
        type: String
    },
    computed: {
        headlineElement() {
          return "h" + this.headlineLevel;
        }
    }
}
</script>

就這樣！

當然，在 prop 級別上新增檢查和合理的預設值是必要的——例如，我們必須確保它headlineLevel只能是 1 到 6 之間的數字。Vue 的原生Prop Validation以及 TypeScript 都是您可以使用的工具這樣做，但我想把它排除在這個例子之外。

如果你碰巧有興趣學習如何使用 React 完成完全相同的概念，那麼顯示雜誌 Heydon Pickering 早在 2018 年就撰寫了有關該主題的文章，並提供了 React/JSX 示例程式碼。Tenon UI 的標題元件，也是為 React 編寫的，將這個概念更進一步，旨在通過使用所謂的“LevelBoundaries”和通用<Heading>元素來自動建立標題級別。看看吧！

見解 2：解決 Web 應用程式可訪問性問題的既定策略 #

當您第一次遇到該主題時，Web 應用程式的可訪問性可能看起來令人生畏，但無需絕望：解決典型 Web 應用程式特徵的既定可訪問性模式確實存在。在接下來的 Insight 中，我將向您介紹提供可訪問通知的策略，包括在 Vue.js 中的簡單實現（策略 1），然後向您指出推薦的模式及其 Vue 對應模式（策略 2）。最後，我建議看看 Vue 的新興（策略 3）和 React 已建立的可訪問性社群（策略 4）。

​