我在研究 Vue.js 可访问性时获得的三个见解
快速总结↬ Web 应用程序的可访问性似乎很困难，因为似乎在线上关于该主题的信息很少。但是在研究我的电子书时，我发现情况比看起来要好。以下是关于框架功能的可访问性使用、可用于包容性事业的具体 Vue.js 特征以及社区倡议和审查模式（以及在哪里找到它们）的三个见解。
在 Web 可访问性方面，像 React、Angular 和 Vue 这样的 JavaScript 框架的名声很差。但这是否是由于这些工具固有的技术限制或无法克服的问题？我想不是。在我的书“
洞察 1：JavaScript 框架的可访问性功能未被充分利用
由现代 JavaScript 框架支持和执行的基于组件的设计不仅在以智能方式使用时提供了出色的开发人员体验和项目人体工程学，而且还可以提供可访问性的优势。第一个是可重用性因素，即当您的组件在应用程序中的多个位置（可能以不同的形式或形状）使用时，它只需要被访问一次。在这种情况下，增加的开发人员体验实际上可以帮助用户，并且“将可访问性融入组件”（
基于组件的设计带来的第二个方面是props——即一个组件可以从其父环境继承或获取上下文的形式。这种“环境数据”的转发也可以服务于可访问性。
以头条新闻为例。扎实且易于理解的标题结构不仅有利于 SEO，而且特别适合使用屏幕阅读器的人。当他们遇到一个健全的文档大纲时，由构建网页或应用程序的标题构成，屏幕阅读器用户可以快速了解他们所在的网页。就像有视觉能力的用户不会阅读页面上的每个单词而是扫描有趣的东西一样，盲人屏幕阅读器用户不会让他们的软件阅读每个单词。相反，他们正在检查文档中他们感兴趣的内容和功能。就此而言，标题将内容片段保持在一起，同时提供文档的结构框架（
使头条新闻提供结构的不仅仅是它们的存在。也是它们的嵌套在用户的脑海中创造了一个图像。为此，Web 开发人员的标题工具箱包含六个级别 ( <h1>to <h6>)。通过应用这些级别，编辑人员和开发人员都可以创建用户可以在文档中期望的内容大纲和可靠功能。
例如，让我们从
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 :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 的原生
如果你碰巧有兴趣学习如何使用 React 完成完全相同的概念
见解 2：解决 Web 应用程序可访问性问题的既定策略
当您第一次遇到该主题时，Web 应用程序的可访问性可能看起来令人生畏，但无需绝望：解决典型 Web 应用程序特征的既定可访问性模式确实存在。在接下来的 Insight 中，我将向您介绍提供可访问通知的策略，包括在 Vue.js 中的简单实现（
