浅尝辄止 Accessibility

呦_安徒生
276 阅读6分钟

Page Content Structure

page Region

使用html5语义化的标签 和 WAI-ARIA roles 来标记页面区域

page Header

大部分的页面都有一个 header。 这个header 包含 logo、 search function、navigation

<header>
	<img src="/images/logo.png" alt="logo"/>
  <nav></nav>
  <form  class="searchFunction">
    	
  </form>
</header>

page Footer

和 header 类似 ，大部分页面也包含一个footer 。这个footer包含 copyright information、privacy statements、disclaimers

<footer>
  …
  <p>&copy; 2014 SpaceBears Inc.</p>
  …
</footer>

navigation

一个网站 可以有任意数量的导航菜单，使用nav 标签 明确一个menu，并用 labels 去声明每一个导航

<nav aria-label="Main Navigation">
  …
</nav>
…
<nav aria-labelledby="quicknav-heading">
  <h5 id="quicknav-heading">Quick Navigation</h5>
  …
</nav>

main content

使用 html5 标签 <main> element 明确页面 应用主题内容

<main>
  <h1>Stellar launch weekend for the SpaceBear 7!</h1>
  …
</main>

Complementary content

使用 html5 标签 <aside> element 辅助解释页面主体内容，然而，他们也是一个独立意义的部分。

<aside>
  <h3>Related Articles</h3>
  …
</aside>

labeling Region

这个可以理解为 对语义化标签的一种加强

  1. 用来区分相同的页面区域，例如 “main navigation” 和 “sub-navigation” 都是用<nav> element 标记，这个时候就可以用label 来却别他们
  2. Label 也可以用来修改 默认的html5语义化的标签的含义 例如 给<aside> 区域 标记为 advertisement
  3. 但是像 <main> 这种页面中只有一个的 标签 是不需要 添加 label 的

Usage : aria-labelledby

通过element id 来指定一个region 的label

<nav aria-labelledby="regionheading">
  <h3 id="regionheading">On this Page</h3>
    …
</nav>

Usage : aria-label

如果 这个region 没有label 元素，使用 aria-label attribute 来明确一个region 的label。

<nav aria-label="Main Navigation">
  …
</nav>

Headings

尽可能的让页面 可以用 headings 结构化

⚠️ 注意一点。 不要 在<h4> 里面 套 <h1>

Content Structure

尽可能的页面的内容语义化，标记出 大的模块地方 都是什么

Articles

<article> element 用来表示一个有独立意义的模块,例如 cart里面的 一个item

<article>
  <h2>Space Bear Classic</h2>
  …
</article>
<article>
  <h2>Space Bear Extreme</h2>
  …
</article>

Sections

<section> 可以理解为是 <article> 的一个合集。 代表一个主题的页面region

<section>
  <h2>Chapter 2</h2>
  …
</section>

Paragraphs

<p> element 是一个有意义的标签。无意义标签 请用<div> 代替 。

Lists

分为有序列表 以及无序列表，也就是 <ol> <ul> 这个和我们正常使用的一样 尽可能的让我们的html 具有意义

Description Lists

<dl> 表示一组描述的list, 可以包含 任意个 <dt> 术语标题 和 任意个<dd> 解释性内容

Example 1: One term, multiple descriptions
Authors
John
Luke
Editor
Frank
<dl>
  <dt>Authors</dt>
  <dd>John</dd>
  <dd>Luke</dd>
  <dt>Editor</dt>
  <dd>Frank</dd>
</dl>
Example 2: Multiple terms, one description
color
colour
A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three differently filtered analyses of a view.
<dl>
   <dt lang="en-US"><dfn>color</dfn></dt>
   <dt lang="en-GB"><dfn>colour</dfn></dt>
   <dd>A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three differently filtered analyses of a view.</dd>
</dl>
Example 3: Multiple terms, multiple descriptions
Authors
Editors
John
Luke
<dl>
  <dt>Authors</dt>
  <dt>Editors</dt>
  <dd>John</dd>
  <dd>Luke</dd>
</dl>

Quotes

明确一个段 引用有利于用户更清楚内容，关于这个我们基本不会用到

Example 1: Blockquote

使用<blockquote> 的元素来描述 更多更复杂的引用，并使用<cite> 元素来标记引用的内容

The following is an excerpt from the The Story of my Life by Helen Keller

Even in the days before my teacher came, I used to feel along the square stiff boxwood hedges, and, guided by the sense of smell, would find the first violets and lilies. There, too, after a fit of temper, I went to find comfort and to hide my hot face in the cool leaves and grass.

<p>The following is an excerpt from the <cite>The Story of my Life</cite> by Helen Keller</p>
<blockquote>
    <p>Even in the days before my teacher came, I used to feel along the square stiff boxwood hedges, and, guided by the sense of smell, would find the first violets and lilies. There, too, after a fit of temper, I went to find comfort and to hide my hot face in the cool leaves and grass.</p>
</blockquote>
Example 2: Inline quote

对于一些短的引用，一般被嵌入到句子中，使用<q> 元素

Helen Keller said, Self-pity is our worst enemy and if we yield to it, we can never do anything good in the world.

<p>Helen Keller said, <q>Self-pity is our worst enemy and if we yield to it, we can never do anything good in the world.</q></p>

Figures

<figure> 元素代表一段独立的内容, 经常与说明（caption） <figcaption>配合使用, 并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。

我理解 这个 就像 word 文档中 插入一个图片 的意思，不影响主题内容，基本用不到

Menu

Structure

  1. 使用ul 或者<ol> 描述一个menu 的所有菜单
  2. 明确菜单 意义。理想状态是使用 <nav> 表示menu
  3. 规定 menu label 使用 aria-label aria-labelledby
  4. 指示出 当前菜单
    1. 使用一个 隐藏的 <span class="visuallyhidden"> Current Page: </span>
    2. aria-current="page"

Styling

ui设计稿的事情 不用考虑

Fly-out Menus

动态显示隐藏的 menus用法

Indicate submenus

  1. aria-haspopup="true" 声明一个菜单有子菜单
  2. aria-expanded="false" 声明子菜单隐藏
<nav aria-label="Main Navigation">
		<ul>
				<li><a href="…">Home</a></li>
				<li><a href="…">Shop</a></li>
				<li class="has-submenu">
						<a href="…" aria-haspopup="true" aria-expanded="false">
							Space Bears
						</a>
						<ul>
								<li><a href="…">Space Bear 6</a></li>
								<li><a href="…">Space Bear 6 Plus</a></li>
						</ul>
				</li>
				<li><a href="…">Mars Cars</a></li>
				<li><a href="…">Contact</a></li>
		</ul>
</nav>

Fly-out functionality

  1. mouse users 这个简单 css hover 显示隐藏解决
  2. Keyboard users 重点 参考链接
    1. 当用户使用tab 键打到 指定的 navigate 时 subMenus 不应该打开，并且使用tab键可以打到所有的 menu item
    2. use parent as a toggle. 这个时候 parent 的 enter 事件 将被只用来展开或者收起子菜单
    3. Use a button as a toggle。要保证 tab 键 能够打到 这个 toggle ，用来展开或者收起子菜单

Application Menus

这个 可以理解。上面的总结 一个完整的 application menus 需要保证上面的同时 还需要额外加一些 属性

Additional markup

  1. aria-expanded aria-haspopup 属性 这个必须的 necessary

  2. application menus

    • menubar 代表一个 menu bar 通常是水平的
    • menu 代表一组 links 或者 commands 在一个 menu bar 里面，通常被用在fly-out 菜单 显示隐藏的那种菜单
    • menuitem 代表一个单独的 menu 菜单
    • separator 分割 menu 的两组 menu items
    <ul role="menubar" id="appmenu">
	…
	<li role="menuitem" aria-haspopup="true">
		Edit
		<ul role="menu">
			<li role="menuitem">Undo</li>
			<li role="menuitem">Redo</li>
			<li role="separator"></li>
			<li role="menuitem">Cut</li>
			<li role="menuitem">Copy</li>
			<li role="menuitem">Paste</li>
			</ul>
		</li>
	…
</ul>

Functionality

添加 上面的 WAR-ARIA roles 并不能自动的 开启菜单的 functionality 和键盘事件 需要自己写 脚本

keyboard betavior
  1. 一级菜单设置 tabindex 属性为0。menu items 设置**tabindex** 为-1；
Array.prototype.forEach.call(appsMenuItems, function(el, i){
		if (0 == i) {
			el.setAttribute('tabindex', '0');
			el.addEventListener("focus", function() {
				currentIndex = 0;
			});
		} else {
			el.setAttribute('tabindex', '-1');
		}
});

Array.prototype.forEach.call(subMenuItems, function(el, i){
	el.setAttribute('tabindex', '-1');
});
  1. Top-level menu Item 键盘行为
KeyAction
tab ⇥选择到下一个可获取焦点的元素
shift ⇧ + tab ⇥选择到上一个可获取焦点的元素
right →选择到下个top-level 元素
left ←选择到上个top-level 元素
return/enter ↵
space打开子菜单，选中子菜单的第一个item
down ↓
up ↑打开子菜单，选中子菜单最后一个item
esc关闭菜单
  1. Submenu Items 的键盘行为
KeyAction
tab ⇥关闭submenu ,选择下一个在这个menu 之外可获取焦点的元素
shift ⇧ + tab ⇥关闭submenu ,选择上一个在这个menu 之外可获取焦点的元素
right →关闭submenu, 选择 下一个 top-level menu 的第一个元素
left ←关闭submenu, 选择 上一个 top-level menu 的第一个元素
return/enter ↵执行该item 的function
space执行该item 的function
down ↓选择下一个submenu item
up ↑选择上一个submenu item
esc关闭submenu, 选择当前 top-level menu item
  1. 参考案例

Images

图片必须可代替的文字描述。

  1. alt 大多数情况下 是不可避免的
  2. 如果是装饰性的图片 没有意义。可以用role="presentation"

Alt 也不是瞎写的 需要 看图片的类型。具体参考 文档

全文参考 w3c web Accessibility Tutorials

avatar
文章
阅读
粉丝