在现代社会，我们的生活几乎离不开电脑和网络。而对于身体有残障的人来说，使用电脑和网络可能会面临许多挑战。如何在设计中考虑无障碍性成为了一个十分重要的话题。在本文中，我们将会探讨如何确保网站和应用程序的可用性和易用性，以满足尽可能多的人群需求。
确保正确的 HTML 标记和属性
为了确保网站和应用程序的可用性，我们需要确保文档结构指定清楚。这一点体现在使用正确的HTML标记和属性上。例如，使用semantic HTML标记会很好的定义选项卡菜单、按钮和页面结构。 通过定义角色、状态和属性，可以为读屏软件和其他辅助技术提供足够的信息，以便在必要时向残障人士传达重要信息。
<button role="button" aria-pressed="false">听音乐</button>
在先前代码片段中，使用了 role 属性对按钮进行定义，同时将状态 aria-pressed 传达给屏幕阅读器和其他辅助技术，以便把按键状态正确传达给用户。
提供良好的可访问性
我们还应该为无障碍设计而构思用户体验。应该考虑到触摸屏、键盘、鼠标和屏幕阅读器等不同的交互方式。如何在这些设备上提供友好的交互体验可能需要我们重新考虑我们普通的设计习惯。我们以逐步改善用户交互体验为目的。 以下是一个简单的交互体验改进建议:
- 点击、焦点和按下状态Indicateto提供视觉反馈。例如为按钮状态添加 outline 等;
- 考虑将简短说明文本放在具有不同交互状态的控件中，以便屏幕阅读器或其他辅助技术能够向残障人士准确传达信息;
- 为残障人士提供常见的帮助和提示功能。例如，缩放、语音阅读以及自定义风格和字体等。
button:focus {
outline: 2px solid #007fff;
}无障碍焦点控制
在遵循网站或应用程序导航时，残障人士经常会使用键盘，鼠标或其他交互设备。 焦点控制应该符合预期的顺序。 辅助设备激活操作的顺序是通过 tabindex 属性进行定义， 为此 tabindex 最好用作最后的矫理手段，让不一致的上下文中的元素正常工作。 如果可以，请考虑重新设计网站布局。 如果用户需要为特定元素提供 tabindex 属性，请考虑将其设置为 0 most。
<a href="#" tabindex="0">联系我们</a>
良好的对比度
对比度越高，意味着文字越容易理解，无论用户的视力是否受损。 因此，良好的对比度设计可以使网站和应用程序更易于阅读和使用。 但是，需要注意的是，过高的对比度可能会让长时间使用计算机的人感到眼部疲劳。WAIR / W3C hat ein eigenes Tool iterreicht，mit在与设计一起 显示颜色的前提下检查Luminanz值的工具. WebAIM 颜色对比度工具 是一个免费的在线工具，可帮助您检查背景和前景颜色的对比度是否充足。
-- -------------------- ---- ------- -- ---- -- ---- - ------ ----- ----------------- ----- - -- ---- -- ---- - ------ ----- ----------------- ----- -
结论
无障碍性被设计者当作一种基本原则，这不能被忽略。为了确保网站和应用程序与残障或视力受损的人使用无痛苦，我们需要考虑到网站和应用程序的文档结构、属性、设计、可访问性、焦点控制和对比度。本文仅仅是一部分讨论本主题的冰山。如果您想深入研究无障碍性方面的内容，请参阅WCAG 2.0 文档。应该对我们来说永不追求完美；但是，我们努力工作，使更多人能够访问并享受他们所需要的任何资源和信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6751474a8bd460d3ad880503