确保 Angular 项目的可访问性的简单步骤
当我们构建应用程序时,我们通常专注于交付,而不是涵盖其他方面,例如可访问性和测试(但测试将在另一篇文章中介绍)。今天,我想谈谈辅助功能。大多数时候,我们认为辅助功能只是帮助残障人士使用我们的产品,但它实际上改善了所有用户的体验。
12 月,我花了一些时间学习辅助功能,我强烈建议参加这些免费课程。
学习辅助功能:https://web.dev/learn/accessibility
构建更易于访问的 Angular 应用 https://codelabs.developers.google.com/angular-a11y#3
这个周末,我花时间测试了我通过构建一个小型表单所学到的技能,该表单从一开始就包含可访问性,包括表单设置和验证。让我们开始吧!
我想创建“给圣诞老人的信”表单,我的儿子可以在其中向圣诞老人发送他的姓名、电子邮件和消息,但我想构建一个可访问的表单,其中包含清晰且可访问的验证以及消息发送时的通知已成功发送。
最后,我得到了这样的表格:
表单的主要目标是收集用户信息。如果表格无法访问,我们会排除很大一部分人,例如有视觉或运动障碍的用户,或者受到临时事故影响或双手忙碌的用户。
我开始通过使用语义 HTML 元素(如
<header> <h1>Write Your Letter to Santa</h1> </header> <main> <h2>Fill Out the Form</h2> </main> <footer> </footer>
表单的主要目标是收集用户信息。如果表格无法访问,我们会排除很大一部分人,例如有视觉或运动障碍的用户,或者受到临时事故影响或双手忙碌的用户。
我开始通过使用语义 HTML 元素(如
<label for="name">Name</label> <input> <p>But forms are more than just input and label; they need validations or error messages that should only appear when relevant, such as after a field has been interacted with (touched) or when the form is submitted. But how do I notify the user with a message?</p> <p>First, the notifications should be announced by screen readers using aria-live with a visually clear design for users who do not use assistive technologies and avoid unnecessarily interrupting the user.</p> <blockquote> <p>Learn more about aria-live and roles</p> </blockquote> <p>There are different ARIA roles to use with the notifications for specific scenarios, using role="alert" for critical or high-priority messages, such as errors. It automatically interrupts the user and announces the content immediately, or role="status" for non-critical updates, such as confirmations or status changes.<br> </p> <pre class="brush:php;toolbar:false"> <div> <p>But how are those messages announced? You have assertive, which stops the current message, or polite, which waits to announce by screen readers without interruption.<br> </p> <pre class="brush:php;toolbar:false">@if ((nameCtrl.invalid && nameCtrl.touched) || (nameCtrl.invalid && isSubmitted)) { <div> <p>For example, aria-live="polite" waits to announce the content after completing its current task. It is perfect for notifications like when a message has been sent:<br> </p> <pre class="brush:php;toolbar:false"> @if (messageSent) { <div> <p>But what happens when I want content only for screen readers? We can create a utility class like .visually-hidden for content that is only meant to be accessible to screen readers and not visible to sighted users.<br> </p> <pre class="brush:php;toolbar:false">.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
它有助于确保在不影响视觉布局的情况下向依赖屏幕阅读器的用户传达重要信息。
<span> <p>Another key point is also is the color, with adequate contrast, the text should have sufficient contrast with its background according but most easy way is using the color-contrast-checker extension.<br> </p> <pre class="brush:php;toolbar:false">input.ng-invalid.ng-touched { border-color: #e74c3c; background-color: #fdecea; }
完美,我们可以准备好可访问的表单!!嘿,等一下?如果明天@Jörgen de Groot 添加一个新功能会发生什么,我如何控制他不破坏可访问性?
es-lint 是你的朋友,首先使用原理图添加:
<header> <h1>Write Your Letter to Santa</h1> </header> <main> <h2>Fill Out the Form</h2> </main> <footer> </footer>
es-lint 提供了一组可访问性规则,例如accessibility-label-has-linked-control,以确保每个标签元素都有关联的表单控件(类似于accessibility-label-for,但更严格)。
<label for="name">Name</label> <input> <p>But forms are more than just input and label; they need validations or error messages that should only appear when relevant, such as after a field has been interacted with (touched) or when the form is submitted. But how do I notify the user with a message?</p> <p>First, the notifications should be announced by screen readers using aria-live with a visually clear design for users who do not use assistive technologies and avoid unnecessarily interrupting the user.</p> <blockquote> <p>Learn more about aria-live and roles</p> </blockquote> <p>There are different ARIA roles to use with the notifications for specific scenarios, using role="alert" for critical or high-priority messages, such as errors. It automatically interrupts the user and announces the content immediately, or role="status" for non-critical updates, such as confirmations or status changes.<br> </p> <pre class="brush:php;toolbar:false"> <div> <p>But how are those messages announced? You have assertive, which stops the current message, or polite, which waits to announce by screen readers without interruption.<br> </p> <pre class="brush:php;toolbar:false">@if ((nameCtrl.invalid && nameCtrl.touched) || (nameCtrl.invalid && isSubmitted)) { <div> <p>For example, aria-live="polite" waits to announce the content after completing its current task. It is perfect for notifications like when a message has been sent:<br> </p> <pre class="brush:php;toolbar:false"> @if (messageSent) { <div> <p>But what happens when I want content only for screen readers? We can create a utility class like .visually-hidden for content that is only meant to be accessible to screen readers and not visible to sighted users.<br> </p> <pre class="brush:php;toolbar:false">.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
请随意阅读有关 es-lint 辅助功能的更多信息,将这些规则添加到文件 (.eslintrc.json),根据需要调整严重性(“警告”、“错误”等):
<span> <p>Another key point is also is the color, with adequate contrast, the text should have sufficient contrast with its background according but most easy way is using the color-contrast-checker extension.<br> </p> <pre class="brush:php;toolbar:false">input.ng-invalid.ng-touched { border-color: #e74c3c; background-color: #fdecea; }
运行 npm run lint tada 后!!我们的代码有一个 linter!
回顾
我希望当您开始创建下一个项目时,请记住这些提示,以简化您的可访问性,并注意为所有用户改进我们的应用程序。
以上是确保 Angular 项目的可访问性的简单步骤的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

不同JavaScript引擎在解析和执行JavaScript代码时,效果会有所不同,因为每个引擎的实现原理和优化策略各有差异。1.词法分析:将源码转换为词法单元。2.语法分析:生成抽象语法树。3.优化和编译:通过JIT编译器生成机器码。4.执行:运行机器码。V8引擎通过即时编译和隐藏类优化,SpiderMonkey使用类型推断系统,导致在相同代码上的性能表现不同。

Python更适合初学者,学习曲线平缓,语法简洁;JavaScript适合前端开发,学习曲线较陡,语法灵活。1.Python语法直观,适用于数据科学和后端开发。2.JavaScript灵活,广泛用于前端和服务器端编程。

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1)C/C 是静态类型语言,需手动管理内存,而JavaScript是动态类型,垃圾回收自动处理。2)C/C 需编译成机器码,JavaScript则为解释型语言。3)JavaScript引入闭包、原型链和Promise等概念,增强了灵活性和异步编程能力。

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互;2)在用户提交数据前进行客户端验证,提高用户体验;3)通过AJAX技术实现与服务器的无刷新通信。

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

理解JavaScript引擎内部工作原理对开发者重要,因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段;2)执行过程中,引擎会进行动态优化,如内联缓存和隐藏类;3)最佳实践包括避免全局变量、优化循环、使用const和let,以及避免过度使用闭包。

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好,适合初学者,但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大,JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富,但Python适合从官方文档开始,JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda,适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack,适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。
