认识达内从这里开始

认真做教育专心促就业

开箱即用的网站可访问性提升指南（1）

发布：互联网
来源：互联网
时间：2017-06-17 14:18

本文青岛IT培训小编首先介绍什么是网站可访问性、残障人士如何访问网站;然后提供一些开箱即用的建设无障碍网站的操作指南,让你能够立即在项目中使用;最后介绍了如何检测网站的可访问性.

青岛IT培训

    一、什么是网站可访问性

    网站可访问性指的是残障人士 (包括全盲和低视力、失聪和听力衰退、学习障碍、精神局限、行动受限、语言障碍、光敏性以及多重残障) 在使用网站时不会遇到障碍,也就是说他们可以认知、理解网站、在网站上导航以及与网站组件进行交互.

    二、残障人士如何访问网站

    残障人士大概可以分为视觉障碍、听觉障碍、肢体障碍和认知障碍四大类.每类群体都有特定的访问网站的方式和页面要求.

    1.视觉障碍

    主要包括色盲、色弱和全盲和视力衰退等.全盲用户主要靠读屏软件来接收页面信息;色盲和色弱的用户对页面色彩要求比较高,包括颜色的选择和对比度的使用;视力衰退的用户有时需要放大页面上的文字和图片来阅读.

    2.听觉障碍

    主要包括耳聋或者听力衰退等.这类用户对页面上的一些音频信息有一定的要求,包括音频内容的可暂停、音量的调节、音频字幕等.

    3.肢体障碍

    主要是肢体残缺.这类用户主要借助一些软件或者硬件来访问网站,比如手臂残疾者借助一些物体敲击键盘来访问我们的网站.这就对我们网站的键盘可访问性有很高的要求,其中包括能通过键盘聚焦页面的交互组件、触发相应的键盘事件来进行交互、快速导航到主要内容区域等.

    4.认知障碍

    主要包括学习障碍和聚焦障碍、语言障碍、精神局限等.这类用户需要页面内容清晰易懂、能够重复多次阅读、内容可以灵活调节,这就要求我们页面上一些滚动区域的内容可以随时停止和重启、一些复杂的内容的能够配以简单易懂的说明文字、相同的链接使用相同的文字、页面上动画的设计不会引起用户不适等.

    三、让你的网站无障碍

    1.清晰的网站结构

    (1)通过 ARIA 中的 role 或者 HTML5 中语义化的标签 <main> 、<header> 等来为页面提供 Landmark,常见的有 Landmark 有 navigation、search、banner、contentinfo、complementary;

    (2)使用 H1 ~ H6 表示标题文字,用 H 元素组织页面区块;青岛IT培训是以实战项目为主要教学方法的Java职业技术培训,能够而有效地缩短同公司具体要工需求之间的差别.

    2.网站样式和内容

    (1)确保你的设计有足够的颜色对比(字体颜色和背景色),这对低视力和色盲用户有益.WCAG 2.0 AAA 级要求正常文本最小对比度为 7:1,大号文本为 4.5:1,AA 级的建议是正常文本最小对比度为 4.5:1,大号字体为 3:1;

    (2)颜色不作为传递信息的唯一渠道,比如必填项、错误提示等信息的传递;

    (3)为 <html> 标签提供 lang 属性;

    (4)当页面内容的语言与 <html> 标签语言不同时,使用 lang 属性为内容标明语言;

    (5)尽量保证 DOM 顺序和视觉顺序一致;

    (6)页面缩放时能保证内容排版的正常阅读;

    (7)页面中必须包含一个 <title> 元素,并且不能为空;

    (8)移除页面上的 i 和 b 标签,用 css 实现加粗等样式.要强调的词、短语和句子,请用 em,strong 实现;

    (9)最大化兼容当前和未来的用户代理(包括辅助技术);

    (10)为页面提供一个无障碍帮助文档的链接,用于说明页面无障碍使用方法;

    (11)为页面上的非文字内容提供替换文本,如图片,ASCII,SVG, Charts,Graphs 等;

    3.Form

    (1)form 表单里面的表单元素必须有一个独一无二的 label.一般通过 label 配合 for,id 使用或者aria-label,aria-labelledby 实现;

    (2)如果页面上有多个表单,submit 和 reset button 必须是独一无二的;

    (3)Invalid 的表单输入值使用 aira-invalid 属性标识非法性;

    (4)必填元素使用 required 或 aria-required 来标识;

    (5)错误信息提示:为关联的表单输入项添加 aria-describedby 链接到错误提示或者使用 ARIA 中的 role = alert 或 Live Region;

    (6)input = images 必须有 alt 或者 titile 属性,且不为空;

    (7)输入框的描述文字或者错误提醒里面应提供正确例子和格式说明;

    (8)使用 fieldset 和 legend 为表单内容提供说明文字;

    4.Table

    (1)使用 th 来定义 row 或者 column 中数据的标题;

    (2)数据表格必须有 name 和 descption 且不能相同.使用 caption、summary、title、aria-label、aria-labelledby 等属性实现;

    (3)尽量不要使用 table 布局,仅用于数据展示;

更多青岛IT培训相关资讯,请扫描下方二维码

青岛IT培训