使用 HTML5 设计辅助功能

Rajesh Lal

下载代码示例

当前，这意味着使用 HTML5。

而且，它应覆盖最广泛的人群，包括残障人士、老年人、文化水平不高或暂时患病的人以及喜欢只使用键盘或鼠标的人。

残障人士辅助功能旨在提供以下四个主要方面的解决方案：

  • 听力
  • 移动性
  • 认知能力
  • 视觉

这包括改写成文字的言语和符号语言（如果可能）。

不允许对页面进行任何自动刷新操作。

使用多个视觉提示和标准图标使内容易于理解。

在适用时使用 lang 属性和 abbr 标记。

这些属性一起构成了万维网联盟 (W3C) POUR 模型，它规定：显示给用户的信息和 UI 元素必须可被用户的感官感知；必须为用户提供操作 UI 的方式；用户必须可以理解信息和知道如何使用界面元素；内容必须足够稳健以便可以使用各种用户代理（包括辅助技术 (AT)）来访问它。

既然您了解了辅助功能的基本知识，让我们看一下与易访问的 Web 设计有关的两个非常重要的概念： 逐渐增强和易访问的丰富 Internet 应用程序 (ARIA)。

逐渐增强和 ARIA

修改视觉效果内容（如黑体或斜体）的所有表示元素放入外部样式表。

如果忽略 CSS 文件（例如，通过屏幕阅读器），HTML 页面仍包含所有内容。

这类设备使用辅助功能 API 来访问网页。

使用 HTML5 设计辅助功能 
图 1 用户如何使用辅助技术访问网页

bit.ly/b89BEJ。

让我们进一步了解 ARIA。

ARIA 角色

屏幕阅读器将知道此 HTML 元素用于导航，用户将能直接使用导航功能而非通过所有链接选择标签。

将 ARIA 角色属性应用到类似以下的 HTML 元素：

  1.  
  2.           <div role="XXX"> </div>
  3.         

角色有以下三种类型：

  • 作为导航界标的界标角色。
  • 结构性角色定义文档的结构并帮助组织内容。
  • 小组件角色由独立的 UI 小组件和复合小组件构成，其中复合小组件是两个或多个独立小组件的容器。

bit.ly/S0HUvi 中查看更多信息。

图 2 ARIA 角色值

界标角色 结构性角色 小组件角色
      独立小组件 复合小组件
application article region alert progressbar combobox
banner columnheader row alertdialog radio grid
complementary definition rowheader button scrollbar listbox
contentinfo directory separator checkbox slider menu
form document toolbar dialog spinbutton menubar
main group   gridcell status radiogroup
navigation heading   link tab tablist
search img   log tabpanel tree
  list   marquee textbox treegrid
  listitem   menuitem timer  
  math   menuitemcheckbox tooltip  
  note   menuitemradio treeitem  
  presentation   option    

与角色不同，ARIA 状态和属性是可为每个 HTML 元素设置的特性。

ARIA 状态

小组件状态是需要用户交互的 UI 小组件的属性。

以下显示了属性 aria-hidden：

  1.  
  2.           <div aria-hidden="true">
  3.   <p>Paragraph text here </p>
  4. </div>
  5.         

此代码将对屏幕阅读器隐藏该段落。

ARIA 属性

有 11 个全局属性和 14 个小组件属性（请参阅图 3）。

图 3 ARIA 状态和属性

属性类型 全局 小组件
ARIA 状态

aria-busy

aria-disabled

aria-grabbed

aria-hidden

aria-invalid

listitem

math

note

presentation

region

row

rowheader

separator

toolbar
ARIA 属性

aria-atomic

aria-controls

aria-describedby

aria-dropeffect

aria-flowto

aria-haspopup

aria-label

aria-labelledby

aria-live

aria-owns

aria-relevant

aria-autocomplete

aria-haspopup

aria-label

aria-level

aria-multiline

aria-multiselectable

aria-orientation

aria-readonly

aria-required

aria-sort

aria-valuemax

aria-valuemin

aria-valuenow

aria-valuetext

以下是小组件属性 aria-required 的一个示例：

  1.  
  2.           <label for="username">User name:</label>
  3. <input id="username" type="text" aria-required="true">
  4.         

这使表格的输入字段成为必填字段。

bit.ly/OlbLeh。

您了解一些 ARIA 及其角色、状态和属性后，就可以使用它来创建逐渐增强的易访问网站。

创建易访问的网站

让我们了解一下如何使用 HTML5 和 ARIA 创建以下每个组件，不要忘记实现辅助功能：

  1. 主页
  2. 带徽标的页眉区域
    • 导航菜单
    • 主图形
    • 主内容
    • 信息块
    • 联系信息表
  3. “常见问题”页
  4. 带视频的“关于”页

图 4 显示我将创建的网站的基本结构。

使用 HTML5 设计辅助功能 
图 4 网站示例的站点地图

为了创建它，我首先将 HTML5 用于实现逐渐增强，然后使网站可供 AT 设备访问。

使用 HTML5 设计辅助功能 
图 5 主页的标准布局

正如您所看到的，我在页面上标识了很多元素： 页眉、导航、对操作的调用、主图形、包含简短内容的欢迎消息、信息块和页脚。

按照逐渐增强原则，我创建了一个按顺序的 HTML5 页来包含这些元素，使用了元素 <header>、<nav>、<figure>、<article>、<section>、<aside> 和 <footer>，如图 6 中所示。

图 6 HTML5 主页

  1.  
  2.           <!doctype html>
  3. <html lang="en">
  4. <head><title>HTML5 Home Page</title></head>
  5. <body>
  6.   <header><!-- header -->
  7.   <a href="/"><img src="images/logo.png"></a>
  8.   </header>
  9. <nav><!-- navigation -->
  10. <ul>
  11.   <li><a href="/">Home</a></li>
  12.   <li><a href="/contact">Contact</a></li>
  13.   <li><a href="/faq">FAQ</a></li>
  14.   <li><a href="/about">About</a></li>
  15. </ul>
  16. </nav>
  17. <div><!-- main content -->
  18. <section>
  19.   <figure><img src="images/maingraphics.png">
  20.   <figcaption>Welcome image.
  21.           More help on image<a href="#/">Help</a></figcaption>
  22.   </figure>
  23. </section>
  24. <section>
  25.   <h2><a href="Action" target="_blank">Subscribe</a></h2>
  26.   <article>
  27.   <h2>Welcome!</h2>
  28.   <p><strong>Lorem Ipsum </strong>is simply dummy text of the printing and … </p>
  29.   </article>
  30. </section>
  31. </div>
  32. <aside><!-- info blocks -->
  33.   <h4>Promotion</h4><ul><li>items</li></ul>
  34.   <h4>Awards</h4><ul><li>items</li></ul>
  35.   <h4>News</h4><ul><li>items</li></ul>
  36. </aside>
  37. <footer><!-- footer -->
  38.   <div>Copyright © 2012</div>
  39.   <div><a href="">Privacy Policy</div>
  40. </footer>
  41. </body>
  42. </html>
  43.         

例如，如果不支持 <header> 元素，浏览器将它替换为 <div>，如下所示：

  1.  
  2.           <header><!-- header -->
  3. <a href="/"><img src="images/logo.png"></a>
  4. </header>
  5. <div><!-- header -->
  6. <a href="/"><img src="images/logo.png"></a>
  7. </div>
  8.         

为了使 AT 工具识别文档的导航界标和结构性部分，我为每个元素添加了以下角色，如图 7 中所示：

  • header role=banner
  • nav role=navigation
  • maincontent role=main
  • section role=region
  • article role=article
  • aside role=complementary
  • footer role=contentinfo

图 7 添加角色

  1.  
  2.           <!doctype html>
  3. <html lang="en">
  4. <head><title> Accessible HTML5 Home Page</title></head>
  5. <body>
  6.   <header role="banner"><!-- header -->
  7.   <a href="/"><img src="images/logo.png"></a>
  8.   </header>
  9. <nav role="navigation"><!-- navigation -->
  10. <ul>
  11.   <li><a href="/">Home</a></li>
  12.   <li><a href="/contact">Contact</a></li>
  13.   <li><a href="/faq">FAQ</a></li>
  14.   <li><a href="/about">About</a></li>
  15.  </ul>
  16. </nav>
  17. <div id="maincontent" role="main"><!-- main content -->
  18. <section>
  19.  <figure><img src="images/maingraphics.png">
  20.  <figcaption>Welcome image.
  21.           More help on image<a href="#/">Help</a></figcaption>
  22.  </figure>
  23. </section>
  24. <section role="region">
  25.   <h2><a href="Action" target="_blank">Subscribe</a></h2>
  26.   <article role="article">
  27.   <h2>Welcome!</h2>
  28.   <p><strong>Lorem Ipsum </strong>is simply dummy text of the printing and … </p>
  29.   </article>
  30. </section>
  31. </div>
  32. <aside role="complementary"><!-- info blocks -->
  33.   <h4>Promotion</h4><ul><li>items</li></ul>
  34.   <h4>Awards</h4><ul><li>items</li></ul>
  35.   <h4>News</h4><ul><li>items</li></ul>
  36. </aside>
  37. <footer role="contentinfo"><!-- footer -->
  38.   <div>Copyright © 2012</div>
  39.   <div><a href="">Privacy Policy</div>
  40. </footer>
  41. </body>
  42. </html>
  43.         

为了对所有浏览器应用样式，首先要将所有 HTML5 元素的块级元素放入样式表，如下所示：

  1.  
  2.           <style>
  3. header,footer,nav,article,aside,section,figure,figcaption{display:block;}
  4. </style>
  5.         

我包含了 ARIA 角色以便为每个特定元素应用样式：

  1.  
  2.           <style>
  3.   header[role="banner"]{/* Styles for banner */}
  4.   header{/* Styles for other headers */}
  5.   #maincontent[role="main"]{ /* Styles for main content */}
  6.   nav[role="navigation"]{/* Styles for navigation */}
  7.   section[role="group"]{/* Styles for section */}
  8.   article[role="article"]{/* Styles for article */}
  9.   aside[role="complementary"]{/* Styles for info blocks */}
  10.   footer[role="contentinfo"]{/* Styles */}
  11. </style>
  12.         

以下代码显示在我的示例中插入的脚本文件：

  <div>Copyright © 2012</div>

</footer>

</body>

</html>

创建易访问的联系信息表

图 8列出与 HTML5 表格有关的输入类型和属性。

图 8 表格输入类型和属性

输入类型

input type=datetime

input type=datetime-local

input type=date

input type=month

input type=time

input type=week

input type=number

input type=range

input type=email

input type=url

input type=search

input type=tel

input type=color
属性

autocomplete

autofocus

form

formaction

formenctype

formmethod

formnovalidate

formtarget

list

multiple

pattern

placeholder

required

step

这使得使用 AT 设备的人更易于访问它。

例如，input type=number 可以显示移动设备的数字键区，而 input type=url 则显示很多智能手机的虚拟键盘中的特殊“.com”按钮。

您将标签中的 for 属性与输入元素中的 id 属性一起使用，如下所示：

  1.  
  2.           <label for="useremail">Your E-mail:</label>
  3. <input id="useremail" name="useremail" type="email" value=""/>
  4.         

例如，如果您有每个输入字段的一些帮助文本，可以将它与输入文本关联：

  1.  
  2.           <label for="useremail">Your E-mail:</label>
  3. <input id="useremail" type="email" value="" aria-describedby="helpemail"/>
  4. <p id="helpemail">Your email address will be used for further communication</p>
  5.         

placeholder 属性允许您显示有效输入是什么样子，必需的属性则使输入框为必填字段：

  1.  
  2.           <label for="useremail">Your E-mail:</label>
  3. <input id="useremail" type="email" placeholder="john@msn.com" required
  4. aria-required="true" value="" aria-describedby="helpemail"/>
  5. <p id="helpemail">Your email address will be used for further communication</p>
  6.         

请改用 aria-required 字段属性，它将告知 AT 设备该字段是必填字段并使用背景色或图像（而非星号）将这点告知用户。

您还可以添加 autofocus 属性，它帮助将焦点设置为表格的第一个元素。

图 9 显示用于创建一个易访问的 HTML5 联系信息表的代码，图 10 则显示联系信息表。

图 9 创建一个 HTML5 联系信息表

  1.  
  2.           <div id="contact" role="main"><!-- main content -->
  3.   <!-- content -->
  4.     <section id="content">
  5.       <article>
  6.         <h2>Contact <span>Form</span></h2>
  7.         <form id="contacts-form" action="" method="post">
  8.           <fieldset>
  9.             <div class="field">
  10.               <label for="name" >Name </label>
  11.               <input id="name" placeholder="John Smith" autofocus required
  12.                 aria-required="true" type="text" value="" />
  13.             </div>
  14.             <div class="field">
  15.               <label for="email">E-mail</label>
  16.               <input id="email" placeholder="john@msn.com" type="email" required
  17.                 aria-required="true" value=""/>
  18.             </div>
  19.             <div class="field">
  20.               <label for="website">Website</label>
  21.               <input id="website" placeholder="http://website.com"
  22.                 type="url" />
  23.             </div>
  24.             <div class="field">
  25.               <label for="message">Message</label>
  26.               <textarea id="message"
  27.                 placeholder="Write your message Here!" required
  28.                 aria-required="true" ></textarea>
  29.             </div>
  30.             <div><a href="#" onclick="submit()">Send Your Message!</a></div>
  31.           </fieldset>
  32.         </form>
  33.       </article>
  34.     </section>
  35. </div>
  36.         

使用 HTML5 设计辅助功能 
图 10 浏览器中的“联系信息表”页

执行更新可能对残障人士有一定困难，但是当您将 aria-live 属性与 status、log 和 alert 的角色属性一起使用时，活动区域可使辅助设备识别更新：

  • aria-live=“off”： 未公布更新（区域为非活动的）
  • aria-live=“polite”： 用户空闲时公布更新
  • aria-live=“assertive”： 优先级更高，但是更新不一定立即公布
  • 用于不同消息类型的 role=“log”、role=“status” 和 role=“alert”

以下是将此集成到 HTML 代码的一个简单方法：

  1.  
  2.           <div id="liveregion" role="log" aria-live="polite">
  3.         

现在我们来看具有易访问内容的“常见问题”页。

使用图像创建易访问的“常见问题”页

因此，不采用：

  1.  
  2.           <i>italics</i>
  3.         

您使用：

  1.  
  2.           <em>emphasized</em>
  3.   <cite>citation</cite>
  4.         

不采用：

  1.  
  2.           <b>bold</b>
  3.         

您使用：

  1.  
  2.           <strong>strong</strong>
  3.         

例如，一些屏幕阅读器将更改 <strong> 元素的音调但不更改 <b> 元素的音调。

图 11 给出了一个示例。

图 11“常见问题”页的标记

  1.  
  2.           <h1>FAQ</h1>
  3.   <h2>List of frequently asked questions</h2>
  4.     <ul>
  5.     <li><a href="#q1">Accessible Text</a></li>
  6.     <li><a href="#q2">Accessible Tables</a></li>
  7.     <li><a href="#q3">Accessible Links</a></li>
  8.     <li><a href="#q4">Accessible Images</a></li>
  9.     <li><a href="#q5">Accessible Titles</a></li>
  10.     </ul>
  11.   <h2 id="q1">Accessible Text</h2>
  12.     <h3>Semantic HTML</h3>
  13.     <h3>Proper hierarchy</h3>
  14.     <h3>Localized content</h3>
  15.     <h3>Acronym</h3>
  16.     <h3>Font-size</h3>
  17.     <h3>Color</h3>
  18.   <h2 id="q2">Accessible Table</h2>
  19.   <h2 id="q3">Accessible Links</h2>
  20.   <h2 id="q4">Accessible Images</h2>
  21.   <h2 id="q5">Accessible Titles</h2>
  22.         

要创建本地化的内容，您使用全局 <html> 元素中的 lang 属性设置页面的语言：

  1.  
  2.           <html lang="en">
  3.         

对于采用不同语言的内容，请在 <p> 或 <span> 元素中使用 lang，如下所示：

  1.  
  2.           <p><span lang="la">Carpe diem </span>(seize the day)</p>
  3.         

并对缩写形式使用 abbr 标记：

  1.  
  2.           <p>The <abbr title="World Wide Web Consortium">W3C</abbr> was founded in 1994.</p>
  3.         

使用以下值之一来增加或减小浏览器默认的字体大小：

  • 百分比 (%)
  • em（相对于大写字母 M 的大小）
  • ex（相对于大写字母 X 的大小） 
  • 关键字（小、中、大、更小、更大等） 

例如：

  1.  
  2.           font-size:100%;
  3.   line-height:1.125em;
  4.         

W3C 建议普通文本的对比率为 4.5 比 1，更大文本的对比率为 3 比 1。

确保您对同一信息有多个提示，如用标签指示错误。

例如：

  1.  
  2.           body {
  3.   font-family:Arial, Helvetica, sans-serif;
  4.   font-size:100%;
  5.   line-height:1.125em;
  6.   background-color:#212222;
  7.   color:#242424;
  8. }
  9.         

不过 HTML5 提供了很多有用的新标记：

  • <caption> 是表的标题
  • <details> 显示用户可以按需查看或隐藏的其他详细信息
  • <summary> 在屏幕阅读器读取真实表数据前公布
  • <thead> 指示表头行
  • <tfoot> 指示表尾行

图 12 显示易于 AT 设备访问的示例 HTML 表的代码。

图 12 易访问的表

  1.  
  2.           <h4>Table with Caption, Summary and Details</h4>
  3. <table>
  4.   <caption>
  5.     <strong>Lorem Ipsum.</strong>
  6.     <details>
  7.       <summary>Help</summary>
  8.       <p><strong>Lorem Ipsum </strong>is simply dummy text of the printing and </p>
  9.      </details>
  10.   </caption>
  11.   <thead>
  12.     <tr>
  13.       <th>Table header column 1</th>
  14.       <th>Table header column 2</th>
  15.       <th>Table header column 3</th>
  16.     </tr>
  17.   </thead>
  18.   <tfoot>
  19.     <tr>
  20.       <td>Table footer column 1</td>
  21.       <td>Table footer column 2</td>
  22.       <td>Table footer column 3</td>
  23.     </tr>
  24.   </tfoot>
  25.   <tbody>
  26.     <tr>
  27.       <td>Table data column 1</td>
  28.       <td>Table data column 2</td>
  29.       <td>Table data column 3</td>
  30.     </tr>
  31.   </tbody>
  32. </table>
  33.         

下面是添加链接的正确方式：

  1.  
  2.           <p>Designandmethod.com has an article on accessibility.
  3.           See the <a title="click for more information at the Design & Method Web site" href="http://designandmethod.com">Big picture at Design and Method</a></p>
  4.         

如果您的设计需要“>”，请使用 CSS 背景图像。

您可以在样式表中使用修饰做到这点：

  1.  
  2.           {
  3.   text-decoration: underline;
  4.   display:block;
  5.   border-bottom:1px solid #000;
  6. }
  7.         

如果 alt 和 title 属性均未找到，AT 设备将公布图像的名称，因此请确保为图像指定有意义的名称。

使带动画的图像最小化；它们可能导致癫痫病人发病。

以下示例显示如何使图像易访问：

  1.  
  2.           <figure><img src="images/maingraphics.png" alt="Example screen shot" title="main graphics showing screenshot example"><figcaption>Image with caption.</figcaption></figure>
  3.         

以下是用于图像映射的代码：

  1.  
  2.           <area shape=rect coords=0,0,10,10 href="example.htm" alt="example">
  3.         

在开头具有简明的标题和相关关键字可以帮助视力受损的用户更快地浏览它们。

在标题开头使用精确、相关的关键字可提高内容的易访问性：

  1.  
  2.           <a href="#q1"><!--How to make content Accessible-->Accessible Content</a>
  3. <a href="#q2"><!--How to make links Accessible-->Accessible Links</a>
  4. <a href="#q3"><!--How to make images Accessible-->Accessible Image</a>
  5. <a href="#q4"><!--How to make titles Accessible-->Accessible Titles</a>
  6.         

我们先了解如何使音频和视频元素易访问。

具有音频和视频的易访问“关于”页

以下是一些使音频和视频内容易访问的方法：

  • 以 HTML 格式提供音频或视频的文字记录。
  • 对于不支持 media 标记的浏览器提供替代内容。
  • 控件至少要有“开”/“关”按钮。
  • 媒体不应是自动启动而是用户启动的。
  • 提供下载媒体文件的链接。
  • 使用视频/音频磁迹提供字幕（隐藏字幕或字幕）。

对于耳聋用户，字幕是更好的解决方案，因为它们不包含伴随所说话语的噪声、音响效果、音乐等。

现在我们可以使用 track 元素和以下格式提供字幕支持： 

  • WebVTT 用于为视频内容加字幕
  • SMPTE-TT（计时的文本格式）用于加字幕
  • SRT 用于字幕文件

请注意对视频的辅助功能支持仍在继续改进，但是以下提供了一个示例：

  1.  
  2.           <video controls>
  3. <source src="video-file.mp4" type="video/mp4"/>
  4. <track src="en.vtt" kind="subtitles" srclang="en"
  5. label="English p subtitles" default/>
  6. <track src="en.ttml" kind="captions" srclang="en"
  7. label="English p captions" default/>
  8. </video>
  9.         

这些控件可通过键盘访问：

  • 空格键用于切换播放和暂停。
  • 左箭头和右箭头分别用于将视频前进和后退 5 秒。
  • CTRL+左箭头或右箭头分别用于将视频前进或后退 60 秒。
  • HOME+左箭头或右箭头用于跳到视频的开头或结尾。
  • 如果音量按钮有焦点，则上箭头和下箭头可以增加和减小音量。

Visual Studio 2012 中的辅助功能支持

现在提供 HTML 元素中 ARIA 角色、特性和属性的 IntelliSense，如图 13 和图 14 中所示。

使用 HTML5 设计辅助功能 
图 13 Visual Studio 2012 中对 ARIA 角色的 IntelliSense 支持

使用 HTML5 设计辅助功能 
图 14 IntelliSense 中支持 ARIA 属性

使用 Visual Studio 2012，您可以轻松通过右键单击某个页面并选择“检查辅助功能”这样做，如图 15 中所示。

使用 HTML5 设计辅助功能 
图 15 您可以在 Visual Studio 2012 中检查网页的辅助功能

您选择了准则后，Visual Studio 2012 将检查所有 HTML 元素并显示有关页面中任何错误或警告的详细报告，如图 16 中所示。

使用 HTML5 设计辅助功能 
图 16 Visual Studio 2012 中的 Web 内容辅助功能报告

当您浏览易访问的 Web 内容时这些应是工具箱中的有用附加工具。

 

iRajLal.com。

Chava 和 Dennis Lembrée

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode