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相关的一些学习心得的更多相关文章

  1. 我的MYSQL学习心得(四) 数据类型

    我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(五) 运 ...

  2. 我的MYSQL学习心得(六) 函数

    我的MYSQL学习心得(六) 函数 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...

  3. 我的MYSQL学习心得(九) 索引

    我的MYSQL学习心得(九) 索引 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...

  4. 我的MYSQL学习心得(十二) 触发器

    我的MYSQL学习心得(十二) 触发器 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数 ...

  5. 我的MYSQL学习心得(十五) 日志

    我的MYSQL学习心得(十五) 日志 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...

  6. 我的MYSQL学习心得(十六) 优化

    我的MYSQL学习心得(十六) 优化 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...

  7. 我的MYSQL学习心得(十七) 复制

    我的MYSQL学习心得(十七) 复制 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...

  8. effective java 学习心得

    目的 记录一下最主要学习心得,不然凭我这种辣鸡记忆力分分钟就忘记白看了... 用静态工厂方法代替构造器的最主要好处 1.不必每次都创建新的对象 Boolean.valueOf Long.valueOf ...

  9. Linux学习心得之 Linux下命令行Android开发环境的搭建

    作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 Linux学习心得之 Linux下命令行Android开发环境的搭建 1. 前言2. Jav ...

随机推荐

  1. ftp 上传和下载

    ftp 下载 #!/bin/bash #auth liwei #date DATE=$(date -d today +%Y%m%d) #data files path SRCDIR=/home/web ...

  2. java 命令查字节码文件, 查.class文件内容

    1. 需要用javac,javap命令,所以先配下环境变量 2.配置环境变量 单击“计算机-属性-高级系统设置”,单击“环境变量”.在“系统变量”栏下单击“新建”,创建新的系统环境变量. 3.写需要用 ...

  3. Node.js 搭建 https 协议 服务器

    var https = require('https'); //创建服务器 https var fs = require('fs'); //文件系统的模块 const hostname = '127. ...

  4. 【源码】HashMap源码及线程非安全分析

    最近工作不是太忙,准备再读读一些源码,想来想去,还是先从JDK的源码读起吧,毕竟很久不去读了,很多东西都生疏了.当然,还是先从炙手可热的HashMap,每次读都会有一些收获.当然,JDK8对HashM ...

  5. for 循环,如果判断那里用到了一个函数,每次循环一次都会调用一次函数,如图

    但用高级for,可以不用每次都调用方法

  6. 第一章 Python程序语言简介

    第一节 Python概述 1. 什么是Python Python是一种 解释型.面向对象.动态数据类型 的高级程序设计语言.由Guido van Rossum与1989年发明,第一个公开发行版本发行于 ...

  7. op 和 oo 的区别

    本是之前一位前辈留下的问题,因为我不是程序出身,略懂一些代码,后又查了很多人的博客,问了周围搞开发的朋友,得出以下结论: 有人这么形容OP和OO的不同:用面向过程的方法写出来的程序是一份蛋炒饭,而用面 ...

  8. Angular ( 一 ) angular的安装

    1. 全局安装angular 脚手架工具 npm install -g @angular/cli 2. 打开到创建目录: 3. 创建项目 ng new my-app 4. 打开项目 5. 安装依赖 n ...

  9. spring-petclinic性能调优实战(转)

    1.spring-petclinic介绍 spring-petclinic是spring官方做的一个宠物商店,结合了spring和其他一些框架的最佳实践. 架构如下: 1)前端 Thymeleaf做H ...

  10. Raphael.js--基础1

    Raphael.js 特点: 1.兼容VML和SVG 2.扩展功能——动画 用法: //1.创建画布 let paper=Raphael(x,y,width,height); //2.创建形状 let ...