10条网站易用性技巧
1. 给你的logo添加替代文本
这样有两个好处:屏幕阅读器能识别logo图片代表的含义,图片未加载到时,也能告诉非视障用户那里是你的logo。
几种方法:
1 |
|
或者,你用背景图来实现logo的话,也可以添加title属性来实现:
1 2 |
|
当然,链接+背景图的方式是最好的,但最好也加上title属性:
1 |
|
2.添加基本的Landmarks
ARIA Landmark是W3C定义的一套网站可用性规则,对于网站不同的模块添加描述性的Landmark——或者直接叫role,有利于读屏软件更好的理解你的网页,从而让视障用户更好的使用你的网站。
1 2 3 |
|
等等,具体的规则请查看W3C的建议。
3.增强focus定义
其实很多网站会用尽一切办法去掉浏览器的:focus样式,特别是对于IE浏览器,其实,浏览器默认带上:focus样式是有道理的,它能指示用户当前的鼠标焦点位置是在哪里。这个对于键盘流特别重要。
所以请不要去掉:focus样式,甚至,你觉得默认的样式不好看或者不统一(IE是虚线框,Webkit是高亮的实线框,并且,Safari是蓝色,Chrome是橙色)也可以自己给定义一个高亮色:
1 2 3 4 |
|
如果你的产品经理或者视觉设计师坚持要去掉focus状态的话,把TA的鼠标拿走一天并告诉TA只能用Tab切换链接就好了。。。
4.定义必填表单项
用aria-required
属性可以定义表单中的必填项——嗯,主要还是告诉读屏软件:
1 |
|
5.给你的页面添加一个h1
原因很简单,不只是有利于SEO,对网站整体的可用性和可读性都很有帮助。另外,你没有代码洁癖么?
6.定义表格的表头
通常很多人习惯表格全部使用td
标签,其实,表格不止有hd标签,还有th
、col
、scope
等。
所以简单来说,表头换成th
标签吧:
1 |
|
7.定义表格描述
不要简单的在表格前面/后面加个p了事了,表格有专用的caption标签可用,就像图片一样。
1 2 3 4 |
|
关于表格部分,强烈推荐重新发现HTML表格
8.避免“点击此处”
虽然这样的链接描述对普通人都无所谓,但是对读屏软件来说,是相当糟糕的,它其实是对视障用户的一种干扰。
所以,直接把链接用到正地方吧。
9.去掉tabindex
曾经,很多人用tabindex
来“增强”用户体验,但是这个属性却会打乱页面的正常阅读顺序,对视障用户是灾难性的,对普通用户也未必是友善的。
所以千万不要滥用tabindex
属性。
10.在线检测一下
呃,看到这里发现其实是个广告,但是如果能检测出来网站可用性问题,也是件好事情,WebAIM开发的一个网页工具,输入URL就会自动检测。测试了一下还不错,http://wave.webaim.org/
译自:http://webaim.org/blog/10-easy-accessibility-tips/,请尊重版权,转载请注明来源。
转载于:https://www.cnblogs.com/zhanghebook/p/3243295.html
10条网站易用性技巧相关推荐
- 人人都能用的10条网站易用性技巧
嗯,WebAIM团队博客的一篇关于网站易用性的文章,比较基础,简单翻译一下: 1. 给你的logo添加替代文本 这样有两个好处:屏幕阅读器能识别logo图片代表的含义,图片未加载到时,也能告诉非视障用 ...
- 10条网站易用性设计改进技巧
伴随着对网站用户体验的关注度普遍上升,网站易用性建设(usability)已经不是一个新鲜的话题.欧美电子商务网站普遍重视网站易用性建设,已开始系统研究易用性思想.而国内领先.成功的网站也均重视网站用 ...
- 偏执却管用的 10 条 Java 编程技巧
经过一段时间的编码(咦,我已经经历了将近20年的编程生涯,快乐的日子总是过得很快),我们开始感谢那些好习惯.因为,你知道- "任何可能出错的事情,最后都会出错." 这就是人们为什么 ...
- 10条Python代码优化技巧
Python是一种功能强大的解释型编程语言.我们可以通过下面的10条优化技巧来减少代码量并提高代码的运行效率. 善用列表(list)推导式 问题:输出1万内每个数的平方. 发现用列表推导式所用时间更少 ...
- 偏执却管用的10条Java编程技巧
转载请注明出处: http://blog.csdn.net/gane_cheng/article/details/52313668 http://www.ganecheng.tech/blog/523 ...
- 【Python基础】Pandas笔记---通过比赛整理出的10条Pandas实用技巧
点击上方"潜心的Python小屋"关注我们,第一时间推送优质文章. 前言 大家好,我是潜心.最近还在参加某比赛,将pandas对数据预处理的方法进行了总结,以下列出的10条是我觉得 ...
- 动力电池编码追溯系统_学习编码时如何保持动力(10条可行的技巧!)
动力电池编码追溯系统 This post was originally published on Coder-Coder.com. 该帖子最初发布在Coder-Coder.com上 . Does th ...
- Linux学习中我的10条建议和技巧
很多技术,没有所谓简单与复杂,只有知道与不知道,就像一层纸,捅透了就能看到后面的世界.任何看上去复杂的事物,拆解到最后就会发现都是由最简单的原理一层一层构成,每一层都会向上一层提供API,所有的事物都 ...
- exists的用法 python_5 年 Python ,总结的 10 条 Python 使用技巧
今天给大家分享 10 个我平时整理非常实用的 Python 开发小技巧,内容目录如下: 值得一提的是,这 10 个技巧全部收录在我自己写的 <Python黑魔法指南>里. 1. 如何在运行 ...
最新文章
- 芝加哥大学24岁华人学霸遇害后,父母赶赴美国,妈妈发表讲话让人泪目...
- C++ CORE DUMP gdb 调试
- ios滚动条影响父页面 vue_父元素设置overflow:scroll时vuedraggable组件出现奇怪效果的解决方案...
- lock_sga and pre_page_sga设置
- maven打包pom.xml备忘
- java logout session_会话跟踪技术--session的使用
- Jartto: 如何成为一名合格的技术面试官?
- vs2008 sp1补丁安装到最后一点点的时候,就无法安装下去了 解决方法
- python权重初始值设置_如何查看初始权重(即训练前)?
- 《我在谷歌大脑见习机器学习的一年:Node.js创始人的尝试笔记》阅读笔记
- Hadoop-Streaming实战经验及问题解决方法总结
- 人脸识别最全知识图谱—清华大学出品
- Listen1 - 让你畅享全网音乐!你值得拥有!
- 酷狗与鸿蒙系统,酷狗音乐2020最新版|酷狗音乐鸿蒙版安卓版下载 v10.2.7 - 跑跑车安卓网...
- Ubuntu安装NS3出现./build.py失败解决
- AriaNg 无法连接 aria
- python实现屏幕截图
- CoreData 的使用
- 关于Synergy无法启动
- 生日礼物codeGift
热门文章
- 浅谈Vue渐进式的理解
- 用js:字符串数组中每一项的长度。将字符串数组用 | 符号分割。有序数组插入排序插入数组。猴子选大王
- 整体大于部分_Redis典型应用场景实战之抢红包系统整体业务流程分析赠书
- VS2010制作安装程序
- 里氏代换原则——及之我见
- ecshop mysql 报错_修复ecshop数据库ecs_sessions.MYI报错
- 从零手写pm-cli脚手架,统一阿里拍卖源码架构
- 浏览器利用Webcam+Flash启用摄像头,并完成拍照
- MapGuide源码分析----MapGuide服务器源码分析
- B0505S-1WR3 隔离模块DC/DC