无障碍网页应用技术了解

一、概述

引自下百度百科的定义:

WAI-ARIA, 是Web Accessibility Initiative - Accessible Rich Internet Applications 的缩写,指无障碍网页应用技术。她主要解决的一个问题:让残障人士能无障碍地访问网页上的动态内容。

概括性的描述下就是

  • ARIA是W3C的一个独立规范,帮助Web应用程序和Web页面变得更具可访问性
  • ARIA主要是为了提升网页的可用性,网页对残疾人士的无障碍化
  • HTML5已经开始使用ARIA,并且W3C发布的很多其他标准也开始使用ARIA
  • ARIA 是对 HTML 语义化的补充。它具备比现有的HTML元素和属性更完善的表达能力,并让你页面中元素的关系和含义更明确
  • ARIA 规范为浏览器和解析HTML文档的辅助性技术提供了一种可以让人们以多种方式访问和使用Web的标准方法

二、如何使用

ARIA主要由两部分组成,分别是:

  1. role(角色),标示这个dom元素是做什么用的
  2. aria-属性描述了与之有关的事物(特征)及其是什么样的(状态)

例子:

<a class="btn btn-default dropdown-toggle" role="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown</a>

在这里面我们就能看到aira在里面的应用,例如role="button"代表这个a标签是个按钮,不能当做链接来解读。aria-haspopup="true"这个表示点击这个dom元素后,会出现菜单或者是浮动元素。aria-expanded="true"表示当前元素是展开的。

参考文章:

1.无障碍开发系列之WAI-ARIA

2.WAI-ARIA无障碍网页应用属性完全展示

原文地址:https://www.cnblogs.com/tianheitianyu/p/10328159.html

时间: 2024-08-28 11:21:09

无障碍网页应用技术了解的相关文章

无障碍网页设计(WCAG2.0)

无障碍化是指无论健全人还是残疾人,年轻人还是老年人都可以平等地获取互联网上的信息和服务.无障碍化网站建设不单可以增加网站的受益群体,更是一个有情怀.有担当的互联网企业的责任,也是一个互联网从业人员应该关注到的一个方面. 无障碍化受益人群: 普通人 普通网站用户:文化背景和习惯与主流用户不同的用户:老年人或儿童等用户:无障碍化可使得用户更轻松地使用网站服务,降低使用.学习和理解的成本. 视力障碍用户 主要包括盲人.低视力.色盲.色弱等用户.针对这部分用户所做的信息无障碍化是最通用和最具有代表性的,

译文 对无障碍网页应用(ARIA)的选择

//本文编辑格式为Markdown,译文同时发布在众成翻译 对无障碍网页应用(ARIA)的选择 让网站对每个人都能访问是一件相当艰难的工作,尤其是在我们使用自定义标记解决方案(custom markup solutions)的那些日子.我很高兴#a11y(可访问性的简称)的话题最近获得了越来越多的关注,因为#a11y没有什么好的,但是正如James Williamson今天发布的twitter: 我们对提高可访问性最大的误解是认为那是在帮别人,但是你错了,这是你的职责.(The biggest

WAI-ARIA无障碍网页应用属性完全展示

一.你至少应该知道ARIA是什么东西! WAI-ARIA指无障碍网页应用.主要针对的是视觉缺陷,失聪,行动不便的残疾人以及假装残疾的测试人员.尤其像盲人,眼睛看不到,其浏览网页则需要借助辅助设备,如屏幕阅读器,屏幕阅读机可以大声朗读或者输出盲文. 而ARIA就是可以让屏幕阅读器准确识别网页中的内容,变化,状态的技术规范,可以让盲人这类用户也能无障碍阅读! 二.为什么需要ARIA? 回答标题问题前我先问其他几个问题? 如何让盲人用户知道当前浏览区域就是网站主导航? 如果让盲人用户知道点击某个按钮后

WAI-ARIA无障碍网页资料

一.ARIA是啥? WAI-ARIA指无障碍网页应用.主要针对的是视觉缺陷,失聪,行动不便的残疾人以及假装残疾的测试人员.尤其像盲人,眼睛看不到,其浏览网页则需要借助辅助设备,如屏幕阅读器,屏幕阅读机可以大声朗读或者输出盲文.而ARIA就是可以让屏幕阅读器准确识别网页中的内容,变化,状态的技术规范,可以让盲人这类用户也能无障碍阅读! 虽然HTML5的出现大大增强了网页的可访问性和无障碍阅读,但是,其不是万能的,例如无法让盲人知道模拟控件的类型等.所以ARIA才显得更加重要. 其次,ARIA规范一

静态网页开发技术-HTML

今天我重新复习了一下静态网页开发技术,概括如下. 一 .HTML文档结构与基本语法 :放置了标签的文本文档,可供浏览器解释执行的网页文件 1.注释标记 2.标记 3.属性 二.基本标记与使用 1.网页基本结构与标记 2.文本与段落标记 3.列表标签 4.超链接标签 5.图片标记 6.定时刷新或跳转 7.表格 三 HTML表单标签与表单设计 1.<FORM>标记及其属性 2  <INPUT>标记及其属性 3 <下拉列表框<SELECT>,<OPTION>

对网页分享技术的思考

提高网页浏览量是提高网站信息影响的前提,提高网页浏览量的方式是多种多样的,其中向特定页面添加网页分享是一个很好的主意,网页分享实现方式很多,这里介绍一下百度分享的应用: 一.百度分享相关网址: 获取代码:http://share.baidu.com/code 帮助文档:http://share.baidu.com/help 二.百度分享之图标式: <%@ page language="java" contentType="text/html; charset=UTF-8

如何以Java实现网页截图技术

今天看到某网友关于"如何以Java实现网页截图技术"的咨询帖,由于出现该咨询的地点非常不适合较长回复,故以博文形式回答. 事实上,如果您想以Java实现网页截图,也就是"输入一段网址,几秒钟过后就能截取一张网页缩略图"的效果.那么,您至少有3种方式可以选择. 1.最直接的方式--使用Robot 方法详解:该方法利用Robat提供的强大桌面操作能力,硬性调用浏览器打开指定网页,并将网页信息保存到本地. 优势:简单易用,不需要任何第三方插件. 缺点:不能同时处理大量数据

静态网页开发技术

静态网页是指可以由浏览器解释执行而生成的网页,其开发技术主要有HTML.JavaScript.和CSS.HTML是一组标签,负责网页的基本表现形式:JavaScript是在客户端浏览器运行的语言,负责在客户端与用户的互动:CSS是一个样式表,起到美化整个页面的功能. HTML(Hyper Text Markup Language)即超文本标记语言,是用来编写网页文件的标准,定义了一组标记(tag,也称标签)用来描述Web文档数据. 用HTML编写的超文本文档称为HTML文档(文件),是一个放置了

16-11-12 网页前端技术学习总结

学习了将近一个月的前端知识,也学到了不少之前仅有概念的东西,整个网页的制作目前也只是学了一些浅显的东西.网页分为HTML,CSS,JS(JQ).这三类应用技术时目前所学到的前端应用技术,最底层的HTML代码负责整个页面的内容注入,虽然也有样式语句,但是样式的语句都是由CSS来负责完成,而一些其他的页面的演示效果由JS(JQ)来完成.HTML语句中最重要的框架标签<html></html>用于声明页面格式,<meta charset="">用于设置代码