Accessibility

A11Y 101:WAI-ARIA初探

随着互联网技术不断的革新,Web页面或应用不再局限于静态地向用户呈现文本或图片等内容。现在的Web页面或应用是一个 富应用,是一种具有近似于传统桌面应用软件系统功能和特性的网络应用系统。这也就是说,用户和Web应用的交互变得更丰富更复杂。实现这些带有富交互的Web应用仅依靠HTML和CSS是无法实现了,换句话说,我们很多时候会使用一些非语义的HTML和动态的JavaScript脚本来构建,更新复杂的UI控制。Web应用变得更丰富的同时,可访问性的难度也就相应的更复杂了。

A11Y 101:编写CSS时要考虑可访问性

构建可访问性Web应用时,很多人都可能会认为这应该是HTML的事情,或者说是WAI-ARIA的事情。或许也会问,可访问性和CSS又有啥关系呢?虽然CSS有很多特性(特别是发展到今天)可以让我们美化Web页面或应用程序变得更简单和更灵活,但这些强大的特性也可能让我们的用户体验变得特别的糟糕。实际上,仅用一行代码*{outline:none 0}就可以使一个网站或Web应用的可访问性变得非常的糟糕。也就是说,编写CSS可以直接影响Web的可访问性。在这篇文章中,我收集了一些技术、注意事项和方法来帮助你在编写CSS时不会影响Web可访问性,反而提高Web的可访问性。

A11Y 101:编写HTML时要考虑可访问性

上一节中和大家一起探讨了为什么要构建可访问性和如何构建可访问性应用。文章中我们聊到了HTML中可访问性中的作用,事实上很多开发者都认为HTML对于构建可访问性是非常的重要,特别是用正确的HTML标签来表达正确的意图,可以提升Web应用的可访问性。这篇文章将会详细介绍如何从HTML方面来最大化地提升Web应用的可访问性。最近一直在阅读和学习构建可访问性方面的知。我花了一些时间去了解一些这方面的知识,但随着了解的越多,让我越来越觉得不应该只把可访问性当作一个检查清单,而应该当作一个起点。将这些技术合并到自己的工作流程中,即从构建Web应用的最开始,就应该把可访问性融入到应用中

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,如果感兴趣的话,请继续往下阅读。

返回顶部