使用像 angularjs 这样的框架对可访问性有什么影响? [英] What are the accessibility implications of using a framework like angularjs?

问题描述

我们正在推动网络可访问性，以符合管理公共/教育机构的某些法律.到目前为止，我们一直在确保:

We are under a push for web accessibility in order to conform to certain laws governing public/educational institutions. Until now we've been getting by just making sure:

1. 我们的布局按逻辑顺序排列；
2. 图像具有 alt="" 标签.但我们很快意识到我们需要做好准备并认真考虑这个问题.

1. our layouts were logically ordered ;
2. images had alt="" tags. but are quickly learning that we need to get in gear and really think about this.

我们正在考虑什么

我们一直将 AngularJS 视为动态 Web 应用程序的框架，但担心它对我们的可访问性地位可能意味着什么.

What we are considering

We've been looking at AngularJS as a framework for dynamic web applications, but are concerned about what it may mean for our accessibility standing.

我知道没有 JavaScript 的浏览器可能会破坏高度动态的 Angular 应用程序(例如，使用 ng-repeat 嵌入标记中的诸如 {{ item.something }} 从单个

构建列表，客户端部分视图作为空标签等).

I understand that a browser with no JavaScript will likely break a highly dynamic Angular app (e.g. expressions such as {{ item.something }} embedded in the markup, using ng-repeat to build lists from a single <li>, client-side partial views as empty tags, etc.).

我想知道对于这些严重依赖动态标记和内联标记的框架是否有一个很好理解的最佳实践或信息资源，这些框架可能被认为是胡言乱语比如屏幕阅读器，甚至是关闭了​​ JavaScript 和 CSS 的浏览器.

I'm wondering if there is a well-understood best-practices or information resources for these kinds of frameworks that rely heavily on dynamic markup and inline-tagging that could be perceived as gibberish to something like a screen-reader or even a browser with JavaScript and CSS turned off.

推荐答案

所有相同的原则都适用，例如对图像使用替代文本、正确使用标题、对内容使用适当的 HTML(5) 结构.

All the same principles apply, such as using alt text for images, good use of headings, use the appropriate HTML(5) structures for content.

您可能是通过 JavaScript 创建的，但过去大约 5 年的屏幕阅读器理解这一点，并使用浏览器的辅助功能 API 来访问 DOM.非 JavaScript 方面是完全不是可访问性问题.不使用 JavaScript 的屏幕阅读器用户数量与一般人群相同，因此它是完全形成的 HTML，而不是您在开发中看到的原始标记.

You might be creating it via JavaScript, but screen readers of the last ~5 years understand that, and use the browser's accessibility API to access the DOM. The non-JavaScript aspect is simply not an accessibility issue. The number of screen reader users without JavaScript is the same as the general population, therefore it comes across as fully formed HTML rather than the raw markup you see in development.

注意:我认为渐进增强是一种很好的方法，但是对于 Angular.js，您预先决定不采用这种方法.如果你想了解性能和渐进增强，我认为 这就回答了.

NB: I consider progressive enhancement a good approach, but with Angular.js you are deciding up-front not to take that approach. If you want to know about performance and progressive enhancement, I think this answered it.

当然，您不会仅仅使用 Angular.js 来创建标准内容页面，因此您需要跟上 WAI-ARIA 规范 和 如何在 HTML 中使用 ARIA.指定如何动态标记传统 HTML 实践未涵盖的内容，例如选项卡、树、网格等.

Of course, you don't use Angular.js just to create standard content pages, so you need to get up to speed with the WAI-ARIA specification, and how to use ARIA in HTML. The specifies how to dynamically markup things that are not covered by traditional HTML practices, such as tabs, trees, grids etc.

有关 WAI ARIA 技术在实践中的实际示例，我会查看 Whatsock 技术风格指南.

For a practical example of WAI ARIA techniques in practice, I would have a look at the Whatsock technical style guide.

与传统网站相比的一个区别是您如何管理页面更新，因为您管理键盘焦点而不是刷新页面.但除此之外，WAI-ARIA 值得一读.

One difference compared to traditional websites are how you manage page updates, as you manage the keyboard focus rather than refresh the page. But apart from that, WAI-ARIA is the thing to read up on.

这篇关于使用像 angularjs 这样的框架对可访问性有什么影响?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！