Apache Echarts 5 线上发布会

HTML5

技术有温,代码有爱: 如何让互动能说话?

在互动团队的同学都知道,我们团队有一个明确的愿景: 人人可开发,处处有互动  。其实我想说,除了 人人可开发,处处有互动 还应该让 互动有温度,让互动能说话 。去年双11的 PK盖楼 上过头条,火爆全网,我想今年双11主互动项目: 超级星秀猫 也将会再次燃爆全网。记得去年我和大家一起聊了聊如何构建 有温度的互动 ,让30万视障人士可以很好的在天猫双11“剁手”“盖楼”分红包。说实话,看到这样的消息,作为主导互动无障碍优化的我来说, 无比的自豪,无比的幸福 !今年我将和我们团队的 @光驰 同学和大家一起聊聊:“ 如何通过技术,让互动能说话 ”。

写给Web开发者使用的无障碍设计指南

这一年多来一直在探讨Web可访问性相关的知识,在小站上也陆续输出了一些有关于Web可访问性相关的技术文章。构建Web可访问性应用或页面涉及到的知识领域绝不仅是某个方面,从设计开始,到Web开发中的HTMLCSS、JavaScript各方面都有,甚至领域还可以更小,比如颜色工具ARIA以及一些属性的使用。但是对于很多从未接触过Web可访问性开发的同学来说,他还是会感到困惑。那么今天这篇访问就是来帮助开发者解惑的。因为文章主要就是和大家一起探讨,Web开发者可以根据下面提到的内容或者说手段来对Web可访问性进行优化。如果你对这方面感兴趣的话,请继续往下阅读。

A11Y:如何使用WAI-ARIA增强Web可访问性

很多Web开发者一直都认为使用WAI-ARIA是增强Web可访问性的最佳方式,但是对于了解或者说经常构建可访问性Web应用的开发同学来说,WAI-ARIA其实对于Web可访问性来说是一种“毒药”。这么说是有一定道理的,即:“滥用WAI-ARIA还不如不使用”。这句话的意思是说,如果你对WAI-ARIA不了解,随意使用的话不但不能给Web可访问性带来好处,反而会让Web可访问性更差。你可能会为这种观点感到困惑,如果真是如此,那么接下来的内容你很有必要阅读。

聊聊aria-label、aria-labelledby和aria-describedby

近一年来一直以来都在致力让手淘互动项目更有温度,虽然借助自己所掌握的有关于A11Y(Web可访问性)相关的理论知识,让互动项目更具可访问性,但其中有很多细节还是有待于完善,特别是焦点冗余部分,更是令我感到头痛。为了优化这方面的细节,我尝试着通过 WAI-ARIAaria-labelaria-labelledbyaria-describedby 属性来进行优化,却事与愿违,而且这几个属性一直令我感到困惑。为了彻底的能搞清楚这几个属性,我打算花一些时间来和大家一起探讨它们。如果你对这几个属性感兴趣的话,请继续往下阅读。

如何构建有温度的互动项目

最近一直在思考一个问题:“在互动团队这么多年了,什么样的互动项目是有温度的呢?又应该如何构建有温度的互动项目呢”?想了很久,接下来以我自己角度的理解来尝试着回答,如果回答不对之处,还请路过的大婶拍砖指正。一直以来,自己都在探索Web可访问性相关的技术,不过大部分经验都是停留在PC端,而如今天是移动端的天下,所以想看看在移动端上如何来做Web可访问性。特别是在这样的互动项目(带有游戏化)又应该如何做Web可访问性?带着这样的问题,开始征程。但在2019年双11的时候,主互动多人PK项目上线了,公关部的同学看到支付宝的有无障碍方面的能力,希望我们的项目也能具备无障碍方面的能力。

聊一点你可能不知道的HTML

HTML(HyperText Markup Language)是构建Web的最基础部分之一,也可以说是构建Web世界的一砖一瓦。它定义了Web页面或应用的内容的含义结构。HTML中包含了很多种不同的标签元素,用来更好的帮助你构建Web能让客户端更好的理解,更正确的显示,也能更好的帮助搜索引擎理解页面,还可以更好的利于屏幕阅读技术。但不幸的是,很多开发者都认为HTML仅是一种由元素标签构建成的标签性语言,太过于简单,没有什么可以值得去研究和思考的。如果你也是这么想的,那么接下来的内容可能对你会没有任何的意义;如果不是的话,那么你可以继续往下阅读。

聊聊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等。

页面

返回顶部