构建更具包容性的应用程序：从可访问性表单开始
在软件开发中，我们常常专注于功能交付，而忽略了可访问性和测试等重要方面（测试将在另一篇文章中详细讨论）。本文将重点探讨可访问性，它不仅仅关乎残障人士，更能提升所有用户的体验。
我最近深入学习了可访问性，并强烈推荐以下免费课程：
学习可访问性：https://www.php.cn/link/25dd30ae03e63faa6b82d5a6a8dadff4构建更易于访问的 Angular 应用程序：https://www.php.cn/link/fbffdd7e918c7968f26dfa4088cc84ce
为了实践所学，我构建了一个简单的“给圣诞老人的信”表单，它从设计之初就考虑了可访问性，包括清晰的验证和提交成功反馈。
最终成果如下：
构建可访问表单的重要性在于，它能惠及更多用户，包括视障、肢体障碍、或暂时受限的用户。
我首先使用了语义化的 HTML 元素（如
、 和
），并通过标题层级（
到
）组织内容。这有助于屏幕阅读器正确解析页面，并提升 SEO。
示例代码片段：
写信给圣诞老人
填写表单
表单不仅仅是输入框和标签的堆砌，更需要恰当的验证和错误消息提示。 我使用了 aria-live 属性来确保屏幕阅读器能及时获取通知，同时为视觉用户提供清晰的视觉反馈，避免不必要的打扰。
role="alert" 用于关键错误消息，role="status" 用于非关键更新。
示例代码片段：
姓名为必填项。
aria-live="polite" 则会在屏幕阅读器空闲时宣布内容，适合用于提交成功等通知：
@if (messagesent) { {{ message }}
DM建站系统汽车保养维修HTML5网站模板1.5 DM建站系统汽车保养维修HTML5网站模板,DM企业建站系统。是由php+mysql开发的一套专门用于中小企业网站建设的开源cms。DM系统的理念就是组装，把模板和区块组装起来，产生不同的网站效果。可以用来快速建设一个响应式的企业网站( PC，手机，微信都可以访问)。后台操作简单，维护方便。DM企业建站系统安装步骤：第一步，先用phpmyadmin导入sql文件。 第二步：把文件放到你的本地服务器
1 查看详情 
}
对于仅供屏幕阅读器访问的内容，可以使用 .visually-hidden 类隐藏其视觉显示：
.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;}
示例代码片段：
错误：姓名为必填项。
此外，确保足够的颜色对比度至关重要。可以使用颜色对比度检查器扩展来辅助。
示例代码片段：
input.ng-invalid.ng-touched { border-color: #e74c3c; background-color: #fdecea;}
为了保证代码的可访问性，我使用了 ESLint，并添加了可访问性规则，例如 accessibility-label-has-linked-control 和 accessibility-table-scope。
安装 ESLint：
ng add @angular-eslint/schematics
ESLint 配置文件 (.eslintrc.json) 中添加可访问性规则：
{ "overrides": [ { "files": ["*.component.html"], "extends": ["plugin:@angular-eslint/template/recommended"], "rules": { "@angular-eslint/template/accessibility-elements-content": "error", "@angular-eslint/template/accessibility-valid-aria": "error", "@angular-eslint/template/accessibility-label-has-associated-control": "warn", "@angular-eslint/template/accessibility-table-scope": "error", "@angular-eslint/template/accessibility-role-supports-aria": "warn", "@angular-eslint/template/accessibility-click-events-have-key-events": "warn", "@angular-eslint/template/accessibility-no-positive-tabindex": "error", "@angular-eslint/template/accessibility-media-has-caption": "warn", "@angular-eslint/template/accessibility-valid-tabindex": "error", "@angular-eslint/template/accessibility-input-label": "warn", "@angular-eslint/template/accessibility-role-has-required-aria": "error" } } ]}
运行 npm run lint 进行代码检查。
总结
在构建应用程序时，请务必记住这些可访问性技巧，从而创建更包容、更易于使用的产品，让所有用户都能获得良好的体验。
以上就是确保 Angular 项目的可访问性的简单步骤的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1499777.html
微信扫一扫 
支付宝扫一扫 
