站长应注意提高网站可用性的9种代码优化技术
1。添加替代文本到LO
这有两个优点:屏幕阅读器可以识别LO图片的含义。当图片没有加载时,它也可以告诉非视觉受损的用户它是你的。
的几种方法:
复制代码代码如下所示:
或者,如果使用后台映射来实现LO,还可以将title属性添加到实现中:
复制代码代码如下所示:
当然,链接+背景图是最好的方式,但最好还是添加title属性。
复制代码如下:前端
2。添加基本地标
咏叹调的地标是一套网站可用性规则由W3C定义的。它描述landmarkmdash添加到网站的不同的模块,也或直接作用,这有助于屏幕阅读器更好地了解您的网页,让视障用户可以更好的使用你的网站。
复制代码代码如下所示:
等等,具体的规则请检查W3C的建议。
三.聚焦清晰度的增强
事实上,很多网站都会尽一切可能摆脱浏览器:聚焦风格,尤其是IE浏览器,实际上浏览器默认:焦点样式是合理的,它可以指示用户当前鼠标焦点在哪里。这对于键盘流尤为重要。
所以请不要删除:焦点的风格,甚至你认为默认样式不好或不均匀(即是虚线框,WebKit是突出实线,和Safari是蓝色的,铬是橙色的),或者可以自己定义一个高亮度彩色。
复制代码代码如下:a:焦点{
概述:1px solid红;
背景:黄色;
}
如果你的产品经理或视觉设计师坚持摆脱焦点状态,你可以把TA鼠标离开一天,告诉他,你只能开关与Tab,&hellip。
4。填写单个项目的定义
用咏叹调所需的属性可以在需要在形式定义;mdash;嗯,主要是屏幕阅读软件:
复制代码代码如下所示:
5。向页面添加H1
原因很简单,不仅有利于SEO,而且有助于网站的整体可用性和可读性。此外,你没有代码的清洁度吗
6。定义表的头部
大多数人通常使用TD标记来获得所有表单。事实上,有更多的高清标签,以及TH,山口,范围等。
简单地说,把头换到TH标签上。
复制代码代码如下所示:
日期
7。定义表的描述
不要简单地在表格的前面/后面加上一个p,加上一个特殊的标题标签,比如图片。
复制代码代码如下所示:
课程表
hellip;hellip;
8。避免点击这里;
虽然这样的链接描述对普通人来说并不重要,但对于屏幕阅读器软件来说却是相当糟糕的。它实际上是对视力受损的用户的干扰。
因此,直接使用链接到正确的位置。
9。去除作用
很多人使用TabIndex来提高,和用户体验,但是这个属性会影响页面的正常阅读顺序,这是灾难性的视障用户和普通用户不友好。
所以不要滥用tabindex属性。