WebAIM -考虑网页的可访问性

万博体育官网网址可访问的JavaScript
JavaScript事件处理程序

概要

事件处理程序由浏览器或用户事件触发——例如页面加载时、用户单击鼠标时或时间为上午8点时。有些事件处理程序依赖于鼠标(或触摸)或键盘的使用。这些被称为设备相关事件处理程序。其他事件处理程序有设备独立并由鼠标/触摸和键盘或其他方式触发。

重要的

为了确保可访问性,可以使用与设备无关的事件处理程序(同时使用鼠标和键盘的事件处理程序),也可以同时使用与鼠标相关的事件处理程序依赖键盘的事件处理程序。

鼠标移到目标上这个很

鼠标移到目标上事件处理程序(和相关鼠标移至mouseenter当鼠标光标放在项目上时,会触发事件。随着名称意味着,鼠标移到目标上需要使用鼠标,因此它是一个依赖于设备的事件处理程序,可能会引入可访问性问题。鼠标移到目标上和它的同伴,这个很(以及相关的mouseout鼠髓酱可以使用事件),只要在不使用鼠标的情况下也可用任何重要内容或功能即可。如果鼠标交互纯粹是化妆品(例如添加发光或丢弃阴影),可能没有任何可访问性问题,只要样式变化不指示一些函数(例如表示元素可点击)。

如果鼠标交互显示额外的信息或内容,如工具提示、导航菜单等,那么不使用鼠标的人将无法访问这些内容。万博体育官网网址对于屏幕阅读器用户(他们经常使用键盘进行导航),可以直接以可访问的方式提供附加内容,比如via万博体育官网网址替代文本,通过aria标签或描述,或者通过屏幕外文。但是,对于仅视力键盘用户,必须有一个机制来访问和查看新揭示的内容或功能。

有时脚本用于呈现复杂的鼠标交互,例如下拉或飞出菜单。虽然这些可以在技术上进行键盘,但有时可访问的替代方法可能更友好。万博体育官网网址例如,而不是强制使用用户浏览复杂和冗长的导航菜单,而是可以确保子菜单项不是直接键盘访问(屏幕阅读器也不读取)。万博体育官网网址相反,标准链接将在顶级菜单项上提供功能(例如,“产品”)。这些链接将用户带到辅助页面,其提供通过复杂菜单提供的附加页面的链接(例如,具有与各种产品类别的链接的产品着陆页)。虽然没有完全相同的鼠标用户可以选择的相互作用,但这些替代方案通常更直观和友好。

得到焦点元素失去焦点时

一个可以使用得到焦点(或焦点要么focusin事件),元素失去焦点时(或模糊要么focusout当使用键盘导航到或从一个元素导航时。这些事件处理程序通常与表单输入一起使用,比如文本字段、单选按钮和提交按钮,但也可以与链接一起使用咏叹调的小部件得到焦点当光标放在特定形式元素上或在特定形式元素内或当用户的标签使用键盘时,被触发。元素失去焦点时当光标离开表单元素或用户的标签远离它时,被触发。

这两个事件处理程序都是独立于设备的,这意味着它们可以通过鼠标、触摸、键盘或其他辅助技术来执行。必须分析由这些事件处理程序执行的操作,以确定它们是否会导致可访问性问题,特别是当它们修改web浏览器的默认行为或干扰web页面内的键盘导航时。此类问题的示例包括之后自动将焦点设置到其他页面区域得到焦点元素失去焦点时触发,将用户困在一个表单控件中,在用户离开表单输入时立即动态显示表单控件(模糊),等等。

onclickondblclick

onclick事件处理程序(和点击事件),当鼠标在页面元素上按下并释放时触发输入当键盘导航元素有焦点时按键被按下。在这些情况下,onclick是一个与设备无关的事件处理程序。

然而,输入钥匙并不总是触发onclick如果它与非链接和非控制元素一起使用,例如纯文本、表格单元格或< div >元素,即使它们使键盘可导航使用tabindex或者专注于使用脚本。在这些情况下,将有必要检测输入空间关键按压,同时放在焦点上。使用标准HTML控件通常会避免脚本和潜在可访问性问题的必要性。

ondblclick事件处理程序(和DBLCLICK.事件)与在选定元素上双击指向设备(通常是鼠标或触控板)相关联。同样的,mouseupmousedown事件只能通过指向设备可用。这些通常应该避免。

onchangeonselect

onchange事件处理程序(和改变事件)被触发时,输入形式值被改变,例如,当选择了单选按钮,当文本的文本框或文本区域内改变时,或者当在选择菜单改变活动项。虽然这些事件是设备独立的,但可以使用鼠标,键盘或其他设备激活,但必须分析由于这些事件而执行的操作以确定它们是否导致可访问性问题。

的常用用法onchange在选择菜单上当菜单中的活动选项被改变时触发导航。在某些浏览器中,这些菜单可能导致键盘辅助功能问题,因为用户无法使用键盘滚动列表,而无需选择其中一个选项(因此触发改变事件)。删除onchange而提供一个独立于激活当前选择项的选项列表的提交按钮,则提供了一个更易于访问和用户友好的选择。万博体育官网网址

使用设备独立事件处理程序

一些事件处理程序是独立于设备的,包括得到焦点,元素失去焦点时,onselect,onchange,和onclick(当onclick与键盘可聚焦元件一起使用)。如果可能的话,使用与设备无关的事件处理程序。其他事件处理程序依赖于设备,这意味着它们完全依赖于某种类型的输入。例如,鼠标移到目标上,这个很,和ondblclick依赖于指针设备的使用。还有一些事件处理程序依赖于键盘的使用(onkeydown,onkeyup等)。

多个设备相关的事件处理程序可以一起使用,以允许JavaScript的鼠标,触摸和键盘激活,但这需要在不同的浏览器和辅助技术上进行测试,以确保可访问性不受任何方式受到限制。