Bootstrap学习遇到的role属性--- 无障碍网页应用属性

以前接触过Bootstrap，但也只是仅仅接触，现在重新学习下，今天看到一个例子中的属性有一个role，查阅资料发现这个是--WAI-ARIA无障碍设计属性；

通俗说是该设计为了一些盲人，失聪，残疾人士而设计的；

深入了解: http://www.zhangxinxu.com/wordpress/?p=2277

--感慨：大神整理出来的东西好全.....

Ps:

https://w3c.github.io/html/

w3c html --> 3.2.7.4. Allowed ARIA roles, states and properties

Allowed ARIA roles, states and properties list:

http://w3c.github.io/html/dom.html#allowed-aria-roles-states-and-properties

时间： 2024-08-28 00:27:31

Bootstrap学习遇到的role属性--- 无障碍网页应用属性的相关文章

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

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

BootStrap学习之先导篇——响应式网页

Bootstrap学习之前,要知道响应式网页的原理. 1.什么是响应式网页? 一个页面,可以根据浏览设备的不同,以及特性的不同,而自动改变布局.大小等.使得在不同的设备上上都可以呈现优秀的界面. 优点:可以自动适配PC.PAD.PHONE浏览器屏幕不足:代码变复杂,需要考虑更多兼容性,并不适合内容非常多网页 2.需要掌握的是viewport的概念早期的网页都是比较大,用于在手机屏幕中浏览,只能进行缩小,导致用户的浏览体验不好.iOS中提出了Viewport(视口)的概念,可以任意的指定大小,

HTML5+Bootstrap 学习笔记 3

HTML5 aria-* and role aria是指Accessible Rich Internet Application.role的作用是描述一个非标准的tag的实际作用,而aria-*的作用就是描述这个tag在可视化的情境中的具体信息.比如 1 <div role="checkbox" aria-checked="checked"></div> 什么是ARIA: WAI-ARIA指无障碍网页应用.主要针对的是视觉缺陷,失聪,行动不便

无障碍网页应用技术了解

一.概述引自下百度百科的定义: WAI-ARIA, 是Web Accessibility Initiative - Accessible Rich Internet Applications 的缩写,指无障碍网页应用技术.她主要解决的一个问题:让残障人士能无障碍地访问网页上的动态内容. 概括性的描述下就是 ARIA是W3C的一个独立规范,帮助Web应用程序和Web页面变得更具可访问性 ARIA主要是为了提升网页的可用性,网页对残疾人士的无障碍化 HTML5已经开始使用ARIA,并且W3C发布的

Bootstrap学习笔记(二) 表单

在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名"form-control",将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果

无障碍网页设计（WCAG2.0）

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

bootstrap学习笔记一： bootstrap初认识，hello bootstrap（下）

这一篇主要是补上源码,开始之前请先回顾:bootstrap学习笔记一: bootstrap初认识,hello bootstrap(上) 首先,我们的页面要求, lang,charset等就不用说了,老html属性, viewport是h5的属性,目的是 width=device-width 铺满设备宽度, initial-scale=1正常比较 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

译文对无障碍网页应用（ARIA）的选择

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

Bootstrap学习：Bootstrap CSS 概览

这一章是Bootstrap 底层结构的关键部分,这个可以我们让 web 开发变得更好.更快.更强壮的最佳实践. 接下来,开始我们的bootstrap学习了. HTML 5 文档类型(Doctype) 由于Bootstrap 使用了一些 HTML5 元素和 CSS 属性.所以为了让这些正常工作,需要使用 HTML5 文档类型(Doctype). 因此,在使用 Bootstrap 项目的开头包含下面的代码段. <!DOCTYPE html> <html> .... </html&