人人必知10个网站易用性技能

日期:2021-03-20 类型:科技新闻 

关键词:通道抠图,怎么在图片上编辑文字,创客贴作图神器,免费图片设计制作在线,背景透明图制作

空话很少了说了,直奔主题了。

1. 给logo加上取代文字

这样有两个益处:显示屏阅读文章器能鉴别logo照片意味着的含意,照片未载入到时,也能告知非视障客户那里是你的logo。

几种方式:


拷贝编码
编码以下:

<img src="logo.png" alt="前端开发界">

或,你用情况图来完成logo的话,还可以加上title特性来完成:

<span title="前端开发界"></span>
</code>

自然,连接+情况图的方法是最好是的,但最好是也再加title特性:


拷贝编码
编码以下:

<a title="前端开发界">前端开发界</a>

2.加上基础的Landmarks

ARIA Landmark是W3C界定的1套网站能用性标准,针对网站不一样的控制模块加上叙述性的Landmark——或立即叫role,有益于读屏手机软件更好的了解你的网页页面,从而让视障客户更好的应用你的网站。


拷贝编码
编码以下:

<nav role="navigation">
<div id="maincontent" role="main">
<form action="search.php" role="search">

这些,实际的标准请查询W3C的提议。

3.提高focus界定

实际上许多网站会耗尽1切方法去掉访问器的:focus款式,非常是针对IE访问器,实际上,访问器默认设置带上:focus款式是有道理的,它能标示客户当今的电脑鼠标聚焦点部位是在哪儿里。这个针对电脑键盘流非常关键。

因此请不必去掉:focus款式,乃至,你感觉默认设置的款式不太好看或不统1(IE是虚线框,Webkit是高亮度的实线框,而且,Safari是蓝色,Chrome是橙色)还可以自身给界定1个高亮度色:


拷贝编码
编码以下:

a:focus{
outline:1px solid red;
background:yellow;
}

假如你的商品主管或视觉效果设计方案师坚持不懈要去掉focus情况的话,把TA的电脑鼠标拿走1天并告知TA只能用Tab切换连接就行了……

4.界定必填表单项

用aria-required特性能够界定表单中的必填项——嗯,关键還是告知读屏手机软件:


拷贝编码
编码以下:

<input type="text" name="username" aria-required="true">

5.给网页页面加上1个h1

缘故很简易,不只是有益于SEO,对网站总体的能用性和可读性都很有协助。此外,你沒有编码洁癖么?

6.界定报表的表头

一般许多人习惯性报表所有应用td标识,实际上,报表不止有hd标识,也有th、col、scope等。

因此简易来讲,表头换为th标识吧:


拷贝编码
编码以下:

<th scope="col">Date</th>

7.界定报表叙述

不必简易的在报表前面/后边加个p了事了,报表有专用的caption标识能用,就像照片1样。


拷贝编码
编码以下:

<table>
<caption>Class Schedule</caption>
<tr>
……

有关报表一部分,明显强烈推荐再次发现HTML报表

8.防止“点一下此处”

尽管这样的连接叙述对一般人都没有谓,可是对读屏手机软件来讲,是非常不尽人意的,它实际上是对视障客户的1种影响。

因此,立即把连接用到正地区吧。

9.去掉tabindex

以前,许多人用tabindex来“提高”客户体验,可是这个特性却会打乱网页页面的一切正常阅读文章次序,对视障客户是灾祸性的,对一般客户也不一定是友好的。

因此干万不必乱用tabindex特性。

10.线上检验1下

呃,看到这里发现实际上是个广告宣传,可是假如能检验出来网站能用性难题,也是件好事儿情,WebAIM开发设计的1个网页页面专用工具,键入URL就会全自动检验。

以上內容根据脚本制作之家服务平台给大伙儿共享了人人必知10个网站易用性技能 ,期待大伙儿喜爱。