06
2014 01月
10条比较基础的网站易用性技巧
by DareWe
WebAIM人员搏客的篇内容介绍网页易用性的内容，相对比较基本知识，简单的当地翻译一次：
1. 给你的logo添加替代文本
这样一来有俩个的优势：频幕阅读理解器能识别系统logo图代表英语的代表的意思，图未打开到时，怎么才能问过非视障微信用户那儿是的logo。 多种方式：|
|
<img src="logo.png" alt="前端界"> |
|
|
<span title="前端界"></span> </code> |
|
|
<a title="前端界">前端界</a> |
2.添加基本的Landmarks
ARIA Landmark是W3C判定的一整套平台平台首页快速可用性规责，在平台平台首页不一样的控制模块移除分析性的Landmark——一些之间叫role，极为有利的于读屏免费软件最佳的正确理解你的我们的网页，最终得以让视障消费者最佳的采用你的平台平台首页。|
|
<nav role="navigation"> <div id="maincontent" role="main"> <form action="search.php" role="search"> |
3.增强focus定义
事实上有许多公众号会采用尽一起措施清掉观看器的:focus款式，独特是这对IE观看器，事实上，观看器初始带:focus款式是有原理的，它能标示微信用户当下的联想键盘对象地理位置是去哪有。此这对联想键盘流独特关键。 任何请最好不要消去:focus图样，竟然，你总觉初始的图样不很漂亮甚至不统一化（IE是虚线框，Webkit是高亮显示的实线框，如果，Safari是蓝色的，Chrome是橘色）也能够自身给表述一家高亮显示色：|
|
a:focus{ outline:1px solid red; background:yellow; }
|
4.定义必填表单项
用aria-required属性可以定义表单中的必填项——嗯，主要还是告诉读屏软件：
|
|
<input type="text" name="username" aria-required="true"> |
5.给你的页面添加一个h1
现象很容易，不只是优势于SEO，对网络整体布局的可以使用性和精确性都很有帮忙。其次，你不会有码洁癖症么？6.定义表格的表头
通常很多人习惯表格全部使用td标签，其实，表格不止有hd标签，还有th、col、scope等。
所以简单来说，表头换成th标签吧：
|
|
<th scope="col">Date</th> |
7.定义表格描述
不想十分简单的在申请表中前排/以后加个p了事了，申请表中有专业化的caption标签纸可作，比如视频不一样。|
|
<table> <caption>Class Schedule</caption> <tr> …… |
8.避免“点击此处”
而是这种的联接叙说对通常人都无可谓，并且对读屏工具来说就，是相当的更糟的，它本来是男女对视障普通用户的的一种干扰信号。 因此，之间把的链接使用正敌方吧。9.去掉tabindex
曾经，很多人用tabindex来“增强”用户体验，但是这个属性却会打乱页面的正常阅读顺序，对视障用户是灾难性的，对普通用户也未必是友善的。
所以千万不要滥用tabindex属性。