无障碍开发(一)之初认识

ARIA是什么?

WAI-ARIA是Web Accessibility Initiative - Accessible Rich Internet Applications 的缩写,WAI-ARIA是指无障碍的网页应用技术。

主要针对的是视觉缺陷,失聪,行动不便的残疾人以及假装残疾的测试人员。尤其像盲人,眼睛看不到,其浏览网页则需要借助辅助设备,如屏幕阅读器,屏幕阅读机可以大声朗读或者输出盲文。

而ARIA就是可以让屏幕阅读器准确识别网页中的内容,变化,状态的技术规范,可以让盲人这类用户也能无障碍阅读!

为什么需要ARIA?

回答标题问题前我先问其他几个问题?

  • 如何让盲人用户知道当前浏览区域就是网站主导航?
  • 如果让盲人用户知道点击某个按钮后出来的是弹框?
  • 如何让盲人用户知道点击某个按钮后页面另外一个区域的文字发生了变化?
  • 如何让盲人用户知道您使用了li标签是用来模拟标准select控件呢?
  • 如何让盲人用户知道您模拟的select控件是单选呢还是可以多选呢?

在你现有的知识范围内,您有办法解决上面的问题吗?有人会说,我使用HTML5, 恩,确实,HTML5的出现大大增强了网页的可访问性和无障碍阅读,但是,其不是万能的,例如无法让盲人知道模拟控件的类型等。

因此,才需要ARIA.

ARIA是个是非主流?

ARIA是非主流吗?ARIA规范一直在更新维护,浏览器方面IE8+以及其他所有现代浏览器都都已支持ARIA, 几乎可以说是全方位支持。流行的JavaScript库jQuery, 以及衍生的jQuery Mobile早早支持了ARIA

京东首页

淘宝首页

案例一:

案例二:

这可是标准的选项卡ARIA属性应用(该用的属性都有),OK,对于常用的选项卡,就套用淘宝网这里的结构吧,很标准的。就是增加几个role属性,增加几个aria-属性就可以了

原文地址:https://www.cnblogs.com/kunmomo/p/11557553.html

时间: 2024-07-31 09:10:34

无障碍开发(一)之初认识的相关文章

使用Kotlin开发Android应用初体验

使用Kotlin开发Android应用初体验 昨晚,最近一届的谷歌IO大会正式将Kotlin确定为了官方开发语言,作为一名Android开发鸟,怎么能不及时尝尝鲜呢? Kotlin的简要介绍 在开发之前,很多同学一定有很多疑问,Kotlin到底有啥好处,怎么和现有的项目共存呢?Java那么些特性Kotlin都有吗?嗯,让我们一一来看. 以下内容摘自:Kotlin的官方网站:https://www.kotlincn.net/docs/reference/android-overview.html

无障碍开发(十五)之好心办坏事

误区一 障碍用户与常规用户的需求不一致,为百分百贴合障碍用户需求,需要给他们单独开发一个无障碍版本(e.g.阿里旺旺) 误区二 障碍用户获取信息的难度大,因此在考虑障碍用户需求的设计中应该尽可能提供详细的控件描述,以保证他们充分的获取信息(e.g.虾米音乐) 误区三 为了帮助障碍用户理解该如何操作自定义控件,应该在该控件的描述中加上一个映射的控件类型(e.g.手机QQ) 误区四 为保证产品在各操作系统平台上的体验一致,采用与当前操作系统平台不一致的提示语来描述控件(e.g.手机QQ) 原文地址:

无障碍开发(十二)之怎样做好信息无障碍?

一.提供等效替代(文字或者语音来替代) 1.1图像的等效替代 移动端或Web端开发,都是用相应的文本信息等效替代图像.(为图像添加描述性信息,并不是文本越长越好) (1) 避免添加额外的.无意义.无价值信息的图像 (2) 避免使用图像来表现文本(也就是文字图片) (3) 为图像提供替代文本 (4) 装饰性图像应该可以被辅助技术忽略(非文字图片) 1.2验证码的等效替代 验证码不仅有图形和声音,也有手机验证码.数学计算验证码等其他类型.部署验证码时,需要至少考虑两种验证码,以帮助感官功能缺失的障碍

SAMSUNG S3C2440 ARM LINUX 开发板 上手初体验 --开发环境搭建

1,linux开发环境搭建 2,程序测试 easyOpentag驱动安装,打开连接,选择ARM-linux 链接:http://pan.baidu.com/s/1pJKK4w7 密码:a0re 1,环境搭建 我的系统版本 [email protected]:~# lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 14.04.3 LTS Release: 14.04 Cod

Android 开发笔记___初级控件之实战__计算器

功能简单,实现并不难,对于初学者可以总和了解初级控件的基本使用. 用到的知识点如下: 线性布局 LinearLayout:整体界面是从上往下的,因此需要垂直方向的linearlayout:下面每行四个按钮,需要水平的linearlayout. 滚动视图 ScrollView    :虽然界面不宽也不高,以防万一,有可能会遇到屏幕特别小的手机,因此用一个垂直方向的scrollview. 文本视图 TextView      :上面标题就是一个textview,结果显示也是textview,但是更高

打造Python开发环境之初篇

古语有云: 工欲善其事,必先利其器 拥有自己的一套得心应手的Python开发环境,开发起来,简直如丝般顺滑.以我工作中使用到的Python开发环境(主要是Web应用),先做个总体介绍 Python环境相关:戳这里 Python # 用的就是它 PIP  # python下超豪华包管理工具 VirtualEnv  # Python的虚拟环境沙盒 Web框架  # web开发为主 如:Flask.Django.Tornado... 服务环境相关: Nginx  # 果断舍弃apache Mysql

Flask开发系列之初体验

Flask开发初探 介绍 在日常开发中,如果需要开发一个小型应用或者Web接口,一般我是极力推崇Flask的,主要是因为其简洁.扩展性高. 从这篇文章开始,我会写一个关于Flask的系列文章,通过多个实例,由浅入深,融入自己使用Flask的心得,希望能帮助更多朋友学习Flask. 在此之前,建议你了解常见理论(包括视图.模板等),阅读Flask的官方文档,了解sqlalchemy,有一定的前端基础. 开发环境:ubuntu + Python2.7X + mysql 本系列文章代码将持续更新于my

无障碍开发(十四)之Android /iOS平台无障碍功能

本页主要罗列了双端的各种无障碍功能,其中TALKBACK和旁白被高亮显示,表达接下来只重点涉及读屏 Android平台无障碍功能 iOS平台无障碍功能 原文地址:https://www.cnblogs.com/kunmomo/p/12194538.html

无障碍开发(十六)之常见的信息无障碍缺陷分类统计

最常见的无障碍缺陷是替代文本(标签)问题和焦点问题,其中焦点问题又大量集中在焦点冗余与焦点缺失上. 只要解决好标签问题和焦点冗余.缺失,互联网产品的无障碍化就成功了一大半. 原文地址:https://www.cnblogs.com/kunmomo/p/12194573.html