现代 CSS

HTML5

聊聊input元素

在Web中通过HTML的表单和用户交互是最常见的方式之一,同时HTML的表单也是Web最为复杂的交互部分之一。正因为其复杂,Web中的表单开发也令开发较为头疼。另外,Web表单涵盖了很多部分,除了我们最为熟悉的的<input><button><select>等表单元素之外,还有其他新的表单元素,比如在HTML5新增的<datalist><output><progress><meter>等元素。简单地说,这些元素可以构建出人与机对话或交互用户界面,然而由于历史和技术上的原因,如何充分发挥它们的潜力并不总是显而易见的。就拿<input>来说吧,要想彻底了解和懂得用<input>并不是易。既然如此,我们在这篇文章中就来和大家聊聊<input>中的故事。

如何提高Web可访问性

A11Y 101系列构建可访问性应用的2W1H中和大家聊了构建Web可访问性的重要性。构建可访问的Web是Web开发的重要组成部分之一,构建出一个具有可访问性的Web页面或应用程序能确保有障碍的人士能够平等的访问Web,使他们能够享有访问Web的权力,也能让他们更好的融入于社会,使其生活变得更有意义。这也是Web开发者应该担当的责任。在这篇文章中,将和大家聊聊,构建Web可访问性的检查清单。希望能帮助更多的开发者能更容易开发出更具可访问性的Web页面或Web应用。

聊聊Web中的下拉选项的事情

在Web的开发中,对于下拉选项的称谓各有不同,比如下拉菜单,下拉选择框等等。不同的场景之下,采用的方式也有所不同,比如在表单中会使用<select>元素,在自动输入框时会使用HTML的<datalist><input>结合使用。而表单中的控件在Web中是件复杂的事情,特别是CSS样式方面更是如此。在这篇文章中,我们就一起来聊聊Web下拉选项相关的事情。

聊聊img元素

图像是Web中最常见的媒体属性之一,对于开发者而言,都知道使用HTML的<img>元素或CSS的background-image属性可以将图像放到Web上,但更多的时候都在聊,如何使用CSS相关的属性来处理Web中的图像,比如使用图像的适配、图像效果的处理等。事实上,HTML中的<img>元素也有很多属性对于我们在Web中使用图像起着重要的作用,特别是随着前端技术革新,<img>新增了一些新的属性,比如srcsetsizesloadingintrinsicsize等。

A11Y 101:如何检测和修复可访问性

如果你最近一直在跟踪A11Y系列的话,你可能知道作为一名开发者除了完成功能需求之外,还需要花一些时间去提高Web应用的可访问性,甚至你也知道了如何通过HTMLCSS以及WAI-ARIA等方面的知识来帮助自己构建一个具有高可访问性的应用,换句话说,开发者开发一个具有可访问性的应用并没有我们想象的那么难

A11Y 101:WAI-ARIA初探

随着互联网技术不断的革新,Web页面或应用不再局限于静态地向用户呈现文本或图片等内容。现在的Web页面或应用是一个 富应用,是一种具有近似于传统桌面应用软件系统功能和特性的网络应用系统。这也就是说,用户和Web应用的交互变得更丰富更复杂。实现这些带有富交互的Web应用仅依靠HTML和CSS是无法实现了,换句话说,我们很多时候会使用一些非语义的HTML和动态的JavaScript脚本来构建,更新复杂的UI控制。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,如果感兴趣的话,请继续往下阅读。

页面

返回顶部