Accessibility

A11Y 101:构建可访问性应用的2W1H

首先要说的是A11Y 101是一个系列性的科普教程,主要是围绕着Web网站或Web应用程序有关于可访问性展开的。该系列会围绕着2W1HHTMLCSSJavaScriptWAI-ARIAAOM工具设计等几个主题展开,希望通过这几个主题展开之后,大家能很快的构建一个可访问性的Web网站或Web应用。让大家真正的体会到构建可访问性应用并没有你想象的那么难。今天先从构建可访问性应用的2W+1H开始。这里所说的2W即是Why(为什么要构建可访问性应用)、What(什么是可访问性应用),而1H是指How(如何构建可访问性应用)。

创建可访问性网站并不是想得那么难

最近@Robin Rendle和@stefanjudis先后写了篇文章,从同一个角度抛出两个话题:“为什么创建无障碍网站这么难”?和“应该通过增强浏览器开发者工具实时提供开发者开发无障碍网站存在的问题”!那么我想问的是,开发无障碍网站为什么会令大家感觉难以及工具上的实时提示就能让开发变得更容易了吗?如果不是,怎么样来开发一个网站才能符合无障碍规范相关的要求,即具有高可访问性。更直接一点,怎么才能让开发者创建无障碍网站是件轻易而不再觉得是件困难的事情。在接下来的内容,将作为前端开发者的角度来和大家一起探讨这方面的话题。如果你感兴趣的话,请继续往下阅读。

使用tabindex的正确姿势

首先要告诉大家的是tabindex并不是一个新属性(或者说新特性),但了解tabindex的真正作用或者说正确使用的人还是不多。最近在项目中就碰到一个问题,在部分安卓机上显式给div元素设置了tabindex='-8'这样的值,结果开启“旁白”的设备无法获得所需要的焦点。这到底是什么呢?我也一脸蒙逼,因为在我的理解范围中,tabindex的使用只有不显式设置值显式设置其值为0显式设置其值为负正整数或者显式设置其值为正整数。那么问题来了,如果要增强Web的可访问性,我们在实际的操作中应该怎么来设置(或者说正确使用)HTML的tabindex属性。今天和大家一起聊聊tabindex,如果感兴趣的话,请继续往下阅读。

返回顶部