"元素不应该使tabindex大于零" - 非零Tabindex打破验证和508合规性
gen*_* b. 2 html css accessibility section508
我们正在运行一个名为Ax的工具来检查HTML页面的有效性和508兼容性/可访问性.
此错误是违规行为:
元素的tabindex不应大于零
该应用程序由顶部链接和导航栏组成.如果我们没有放入tabindex,则标签从这些元素开始.我们的想法是在进入页面时直接点击表单输入.当然这是有道理的,应该被允许(即使对于残疾用户)？那么为什么合法的用例会被标记？
<input id="phone" name="phone" tabindex="5" placeholder="" class="input-block-level" type="text" value="222">
尽管AX说的是HTML中允许使用大于零的tabindex.
但是,您使用tabindex的方式是向有视力的用户提供信息,这些信息基本上对于没有视力的用户不可用,因为他们无法对其进行制表.
更好的方法是使用隐藏的" 跳过链接 ".
这个想法很简单:在页面顶部提供一个链接,用于将用户跳转到主要内容开头的锚点或目标.
https://webaim.org/techniques/skipnav/
对于有视力的用户,最好关注第一个可操作元素,例如amazon.com上的搜索字段(尽管他们不这样做).但是有视力的用户可以快速浏览整个页面.他们可以看到相对于页面其余部分的焦点位置(假设你有一个焦点指示器,2.4.7),并且会立即知道焦点位置之前有导航元素,并且在焦点位置之后有更多东西要与之交互.
对于使用放大镜的低视力用户,他们的视口将被移动以包括具有焦点的元素.通常在页面加载时,焦点会转到DOM中可以获得焦点的第一个元素.这通常是左上角的"家"徽标(对于LTR语言).由于视口位于左上角,因此低视力用户将知道他们可以将视口向右或向下拖动以探索更多页面.但如果最初的焦点位于页面中间某处,那可能会让人迷失方向.用户可能不知道在那里他们在页面上.视口左移了多远？他们可以向上或向下,向左或向右探索多远？
对于极低视力或视力受损或盲人用户,使用屏幕阅读器的用户,迷失方向甚至更具戏剧性.屏幕阅读软件具有很好的导航工具,因此只要使用语义html元素(如<h2>或<table>或<ul>),就可以轻松浏览页面的各个元素.您可以使用"H"键导航到标题,通过"T"键导航到表格,并通过"L"键导航.但同样,屏幕阅读器用户希望最初的焦点位于左上方.他们当然可以定位自己并找出他们在页面上的位置,但它确实需要一些认知努力,类似于屏幕放大镜用户.
那么,如何为所有这些类型的用户(以及许多其他类型的用户)提供愉快的体验？
正如一个答案所指出的," 跳过链接 "非常方便.在可访问性方面,这些被称为" 旁路块 "(2.4.1).它们允许默认焦点位于左上方(或默认焦点所在的位置),当您tab,焦点移动到"跳过链接"时,这是一个页内链接,可让您跳转到主要部分页.这对于仅限键盘的用户(可能是视力正常或视力不佳的用户),屏幕放大镜用户和屏幕阅读器用户来说非常有用.
但是,如果您确实希望焦点位于特定元素上,则如果元素是<input>或<button>元素,则可以使用该autofocus属性.对于其他本机可聚焦元素,例如<a>,您可以使用在加载时运行的javascript来调用元素上的focus().
除了第一个元素之外,在页面上的某个位置初始关注不是WCAG violoation,所以你可以把它放在你的表单上,只是这样做可以减少对视力有限或不能用户的混淆.用一只老鼠
有关详细信息tabindex,请参阅" 5.5组件之间的键盘导航(选项卡顺序) ".请注意,对于大于0的tabindex值,它表示:
"强烈建议作者不要使用这些值."