与WCAG相关的一些学习心得
1.什么是 WCAG?
WCAG全称Web Content Accessibility Guidelines 网页内容无障碍浏览准则,简单的说就是为了方便残障人士(包括低视患者,盲人,聋人,学习障碍,行动不便,认知障碍....)访问Web内容而制定的相关标准,可以使网站更加人性化。
举个例子,在WCAG准则2.3.2中规定:网页不包含任何闪光超过3次/秒的内容。
即不要设计会导致癫痫发作的内容(每秒3次以上的闪烁可能会使癫痫发作)。
WCAG具体内容和条例请参考Web内容无障碍指南2.0版(WCAG2.0)中文授权翻译。
2.可访问性测试工具WAVE
wave在线版,进去以后直接输入你想测的页面link即可,缺点是当你想测的页面需要登录时,他只会测到登录界面(即访问的第一个页面);
推荐使用火狐浏览器,在菜单栏里面搜索wave并安装插件,成功后工具栏将会出现WAVE图标(下图右上角绿色图标)。正常访问你要测试的页面然后点击此图标,WAVE将会自动测试当前页面,左侧显示存在的Errors和Alerts等错误信息,点击错误信息自动导航到该行代码并在页面下方显示。
3.Fix the Error
以下仅列出我遇到过的Errors以及solution!!
- 第一类Error:
Missing alternative text add attribute alt=“” ;
Linked image missing alternative text ;
Missing alternative textMore information ;
Image button missing alternative textMore information ;
Linked image missing alternative textMore information ;
solution :
给元素添加 alt=“” 属性;alt属性的作用是当页面图片不能正常显示时,会在图片位置显示alt的值。
example :
<img src="Logo.png" alt="Picture cannot be displayed" />
- 第二类Error:
Empty form labelMore information ;
Empty buttonMore information ;
Empty linkMore information ;
Empty form label ;
Empty link ;
Empty button ;
solution :
根据WCAG标准某些元素不能为空,但是在我的页面这些元素就应该是空的,所以我给他们中间加了一个不为空的span然后隐藏起来就不报错了。
如果大家有更好的solution,告诉我吧~
example :
<label><span display:none>null</span></label>
- 第三类Error:
Missing form label ;
Missing form labelMore information ;
solution :
给元素添加 aria-labelledby="" 属性;
aria-labelledby属性的作用:读屏软件会读出aria-labelledby的内容,方便视力有障碍的用户使用。
注意aria-labelledby值应该和id值相同。
example :
<input type="text" name="txtSubject" id="Subject" aria-labelledby="Subject" />
- 第四类Error:
Missing or uninformative page title ;
solution :
给页面添加title标题标签。
example :
<title>Home</title>
- 第五类Error:
Broken ARIA reference;
Broken ARIA referenceMore information;
solution :
报这类错误是因为aria-labelledby属性值与id值不相同。改成相同值即可。
example :
<input type="text" name="txtSubject" id="Subject" aria-labelledby="Subject" />
都是自己总结的,未经博主同意禁止转载。欢迎大家指正,补充~
:) 持续更新 ...
与WCAG相关的一些学习心得的更多相关文章
- 我的MYSQL学习心得(四) 数据类型
我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(五) 运 ...
- 我的MYSQL学习心得(六) 函数
我的MYSQL学习心得(六) 函数 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...
- 我的MYSQL学习心得(九) 索引
我的MYSQL学习心得(九) 索引 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...
- 我的MYSQL学习心得(十二) 触发器
我的MYSQL学习心得(十二) 触发器 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数 ...
- 我的MYSQL学习心得(十五) 日志
我的MYSQL学习心得(十五) 日志 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...
- 我的MYSQL学习心得(十六) 优化
我的MYSQL学习心得(十六) 优化 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...
- 我的MYSQL学习心得(十七) 复制
我的MYSQL学习心得(十七) 复制 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...
- effective java 学习心得
目的 记录一下最主要学习心得,不然凭我这种辣鸡记忆力分分钟就忘记白看了... 用静态工厂方法代替构造器的最主要好处 1.不必每次都创建新的对象 Boolean.valueOf Long.valueOf ...
- Linux学习心得之 Linux下命令行Android开发环境的搭建
作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 Linux学习心得之 Linux下命令行Android开发环境的搭建 1. 前言2. Jav ...
随机推荐
- ftp 上传和下载
ftp 下载 #!/bin/bash #auth liwei #date DATE=$(date -d today +%Y%m%d) #data files path SRCDIR=/home/web ...
- java 命令查字节码文件, 查.class文件内容
1. 需要用javac,javap命令,所以先配下环境变量 2.配置环境变量 单击“计算机-属性-高级系统设置”,单击“环境变量”.在“系统变量”栏下单击“新建”,创建新的系统环境变量. 3.写需要用 ...
- Node.js 搭建 https 协议 服务器
var https = require('https'); //创建服务器 https var fs = require('fs'); //文件系统的模块 const hostname = '127. ...
- 【源码】HashMap源码及线程非安全分析
最近工作不是太忙,准备再读读一些源码,想来想去,还是先从JDK的源码读起吧,毕竟很久不去读了,很多东西都生疏了.当然,还是先从炙手可热的HashMap,每次读都会有一些收获.当然,JDK8对HashM ...
- for 循环,如果判断那里用到了一个函数,每次循环一次都会调用一次函数,如图
但用高级for,可以不用每次都调用方法
- 第一章 Python程序语言简介
第一节 Python概述 1. 什么是Python Python是一种 解释型.面向对象.动态数据类型 的高级程序设计语言.由Guido van Rossum与1989年发明,第一个公开发行版本发行于 ...
- op 和 oo 的区别
本是之前一位前辈留下的问题,因为我不是程序出身,略懂一些代码,后又查了很多人的博客,问了周围搞开发的朋友,得出以下结论: 有人这么形容OP和OO的不同:用面向过程的方法写出来的程序是一份蛋炒饭,而用面 ...
- Angular ( 一 ) angular的安装
1. 全局安装angular 脚手架工具 npm install -g @angular/cli 2. 打开到创建目录: 3. 创建项目 ng new my-app 4. 打开项目 5. 安装依赖 n ...
- spring-petclinic性能调优实战(转)
1.spring-petclinic介绍 spring-petclinic是spring官方做的一个宠物商店,结合了spring和其他一些框架的最佳实践. 架构如下: 1)前端 Thymeleaf做H ...
- Raphael.js--基础1
Raphael.js 特点: 1.兼容VML和SVG 2.扩展功能——动画 用法: //1.创建画布 let paper=Raphael(x,y,width,height); //2.创建形状 let ...