前言
在过去的几年中，随着无障碍 UI 设计的重要性的日益凸显，越来越多的网站和应用程序开始关注它们的无障碍性能。然而，无障碍性设计的一些限制可能会削弱移动设备上的用户体验。本文将探讨一些移动端插件技巧，以提高无障碍 UI 的功能和用户体验。
使用移动端插件以增强无障碍 UI
移动端插件是为了提高用户体验而设计的小型程序，其功能包括辅助性工具、命令快捷键、可视辅助、资源共享等。下面是一些使用移动端插件来增强无障碍 UI 的技巧。
1. 使用超链接插件改善导航
在无障碍 UI 设计中，超链接是最重要的导航工具之一。然而，由于移动设备的触摸屏幕大小及其限制，使得网页上超链接的体验并不完善。通过使用超链接插件，可以克服这些问题，从而提高用户的无障碍体验。下面是一个示例：
<a href="#" class="btn btn-default" role="button">更多信息</a>
<script>
$(document).on('click', '.btn', function(e){
window.location.href = $(this).attr('href');
});
</script>该示例使用了一个简单的 Javascript 函数，该函数通过提取 href 属性并在点击事件触发后将其应用于当前窗口以模拟超链接行为。此技巧允许使用自定义样式来设计超链接，以及使导航更易于使用。
2. 使用键盘导航插件提高可访问性
在无障碍 UI 设计中，键盘的可访问性是重要的一环，因为它为那些无法使用鼠标的用户提供了一个简单的、直接的方式来进行导航、操作页面。然而，由于移动设备的触摸屏幕的限制，使用键盘导航也并不总是方便。通过使用键盘导航插件，可以解决这些问题，从而提高无障碍性和用户的可操作性。下面是一个示例：
-- -------------------- ---- -------
---- ---------------------
-- -------- ---------- --------------------------
-- -------- ---------- --------------------------
------
--------
-----------------------------
---------------- --------------- ------------
--- --------- - ------------------------------------- - -- - --
------
------ ------
---
---
---------该示例允许用户使用键盘上的箭头来对网页上的内容进行导航，在点击事件触发后，将其应用于相关的脚本中。
3. 使用 UI 插件提高用户体验
UI 插件具有多种形式，例如模态、弹出、下拉选择器等等。这些插件以其功能特性和用户体验效果，为开发人员提供了改善网站和应用程序用户体验的简单易行的方法。例如，使用可操作的下拉菜单插件，可以允许使用移动设备的触摸屏幕执行下拉菜单的任何操作。下面是一个示例：
-- -------------------- ---- -------
---- -----------------
-- -------- ----------------------- -----------------------
----
----
--- --------------------- ------------
------ ----------- ----------
------ ----------- ----------
------ ----------- ----------
-----
------此插件允许用户使用移动设备上的单击事件来弹出下拉菜单、选择选项并进行相关操作。
结论
随着无障碍 UI 设计的引入，用户体验的监控和改进将成为项目中一个重要的维度。在无障碍 UI 设计限制之后，移动端插件技巧是实现可访问性、可操作性和用户体验的关键因素之一。在本文中，我们讨论了使用超链接、键盘导航和 UI 插件来增强网站和应用程序的无障碍特性的一些技巧。
顺带一提，使用 HTML 语义化、ARIA 属性或应用程序特定的技术，同样能提高无障碍性。无障碍设计并不仅仅要求符合WCAG标准，而是要考虑到 用户的需求及状况，从而设计用户喜欢、易于理解的界面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67315ab10bc820c582387e31