移动体验 / 方法解读

移动端网页中用户可移动内容遮挡焦点时如何判断

当用户界面组件接收键盘焦点时,如果被用户可移动的内容遮挡,需确认遮挡是否发生在初始加载位置。

确认遮挡元素是否为用户可移动内容

根据资料,如果界面内容可以由用户重新定位,则只考虑用户可移动内容的初始位置,以符合标准。检查页面中是否存在可拖拽的元素或用户可交互的内容覆盖在输入框上。如果这些元素在初始加载时没有遮挡输入框,但在用户交互后遮挡了输入框,可能需要调整这些元素的初始位置或 z-index。确保用户可以轻松移除遮挡,或者这些遮挡不会影响键盘输入。

如果页面包含可拖拽的悬浮按钮或工具栏,这些元素可能会在用户操作后遮挡输入框。检查这些元素的初始位置,确保它们不会遮挡输入框。如果这些元素可以由用户移动,则只考虑它们的初始位置。如果这些元素在初始加载时没有遮挡输入框,但在用户交互后遮挡了输入框,可能需要调整这些元素的初始位置或 z-index。确保用户可以轻松移除遮挡,或者这些遮挡不会影响键盘输入。

验证焦点组件是否可被用户主动揭示

资料指出,如果用户可以揭示被聚焦的组件而不改变键盘焦点,则该组件不被视为隐藏。检查输入框是否可以通过手势、点击或滑动操作从遮挡物下方移出。如果用户可以通过简单的交互将输入框从遮挡物中拉出,且焦点保持不变,则符合标准要求。测试时需模拟用户操作,确认是否存在无需改变焦点即可移除遮挡的方法。

如果输入框被全屏遮罩层覆盖,且遮罩层无法通过用户操作关闭,则可能违反标准。检查遮罩层是否提供了关闭按钮或手势支持。如果遮罩层是用户主动打开的,例如通过点击按钮触发的模态框,则可能不违反标准。但需确保用户可以通过键盘或手势关闭遮罩层,从而揭示被遮挡的输入框。

检查遮挡内容是否为用户主动打开

资料提到,用户打开的内容可能会遮挡接收焦点的组件。检查页面中是否有模态框、下拉菜单或弹窗等用户主动触发的元素。如果这些元素在用户操作后遮挡了输入框,需确认用户是否可以通过关闭操作移除遮挡。如果遮挡物是用户主动打开的,且用户可以关闭它,则可能不违反标准。但需确保关闭操作不会导致焦点丢失。

如果遮挡物是自动触发的,例如自动弹出的广告或通知,则可能违反标准。检查这些元素是否提供了关闭按钮或手势支持。如果用户无法关闭遮挡物,则可能违反标准。测试时需模拟用户操作,确认是否存在关闭遮挡物的方法。如果遮挡物无法关闭,则需调整布局或移除遮挡物。

复现检查步骤与结果判断方法

首先,在移动端浏览器中打开页面,并聚焦到输入框。然后,尝试拖拽或点击页面中的可移动元素,观察输入框是否被遮挡。如果输入框在初始加载时未被遮挡,但在用户交互后被遮挡,则需检查遮挡元素的初始位置。如果遮挡元素在初始加载时未被遮挡,则可能不违反标准。如果遮挡元素在初始加载时已被遮挡,则需调整布局或移除遮挡元素。

其次,尝试通过手势或点击操作移除遮挡物,观察输入框是否被揭示。如果输入框可以通过用户操作移除遮挡物,且焦点保持不变,则符合标准要求。如果输入框无法移除遮挡物,则可能违反标准。测试时需模拟用户操作,确认是否存在移除遮挡物的方法。如果遮挡物无法移除,则需调整布局或移除遮挡物。

资料与延伸阅读

你可以通过以下原始资料核对文中概念,并继续深入阅读。

  1. Operable - Accessibility | MDN ↗
← 更多移动体验文章返回顶部 ↑