当你看到网络内容和 AT interaction 的具体细节时，事情就复杂了。这一章让你对各种平台可访问性 API 之间发生的事情有一个大概的了解，并看看动态 DOM 更新和正确应用语义来描述定制控件。
正如我提到的，我至少花了两到三年的时间来掌握屏幕阅读器的实际工作方式，从研究用户交互模型和熟悉 JAWS 击键到理解幕后发生的事情。这只是从屏幕阅读器的角度来看——不要管数据是如何在各种 API 之间转换的！所以，如果你在海上感到有点失落，也不用担心。这一章是我试图用一种我希望几年前有人为我做的方式向你解释事情。
什么是 API？
一个 API 就是一个应用编程接口。这是一个框架或一组规则，提供用任何给定语言编程所需的代码、函数或词汇。API 可以被认为是一个代码库，你用它来告诉软件，比如浏览器或辅助技术，去做一些事情。
例如，浏览器将以 HTML5 编写的 web 内容转换为文档对象模型(DOM)。网页的这个 DOM 与浏览器使用的布局引擎相关联。然后，浏览器从布局引擎和 DOM 获取信息，以支持操作系统(OS)平台可访问性 API。该 API 允许辅助技术监控和查询浏览器向其公开的任何可访问性信息。
在我们更详细地研究 API 本身之前，我们需要后退一点，讨论第一个易访问性模型:离屏模型，或 OSM。它的开发是为了让早期的屏幕阅读器和盲文输出设备能够访问可视桌面和第一个图形用户界面(GUI)。对屏幕外模型的了解将有助于您更广泛地理解这些相关技术是如何交互和表现的。
早期的基于 DOS 的系统，或者命令行界面系统，因为是基于文本的，所以很容易使用。用户输入到系统中的信息，以及系统返回的信息，可以很容易地在内存缓冲区中捕获并合成为语音。这种语音输出是通过使用我在第二章“理解残疾和辅助技术”中谈到的共振峰合成来实现的。文本字符串和数据等字符存储在缓冲区(或内存存储区)中，屏幕阅读器可以轻松地直接访问这些缓冲区，然后以语音形式输出给最终用户。
注关于一段非常有趣的屏幕阅读器历史，我推荐 Richard Schwerdtfeger 的论文《让 GUI 说话》，他是 IBM 辅助功能软件组的 CTO，也是著名的辅助功能专家。Rich 还与杰出的 Jim Thatcher 博士一起工作，他开发了第一个 DOS 屏幕阅读器和第一个基于 GUI 的 PC 屏幕阅读器。你可以在ftp://service.boulder.ibm.com/sns/sr-os2/sr2doc/guitalk.txt拿到这篇论文。
对于基于 GUI 的系统，离屏模型的工作方式是捕获关于要在屏幕上可视化呈现的控件的信息，然后创建一个单独的页面版本(离屏模型——因此得名)。然后，屏幕阅读器与这个 OSM 交互，并使用其内容作为输出最终用户可以理解的语音的基础。
您可以将离屏模型想象成任何给定时间的屏幕快照。正在发生的是一种被称为屏幕抓取或挂钩图形调用的技术。如今，对于桌面系统，操作系统提供了公开和检索这些信息的工具，但是是应用及其用户界面组件通过 API 公开这些信息。
现代编程语言允许使用对象和元素的描述，屏幕阅读器可以通过可访问性 API 锁定这些描述。然后，当用户通过键盘获得焦点时，屏幕阅读器将这些名称和属性作为语音输出给用户。正如我提到的，对于桌面应用来说，维护 OSM 的需求已经减少，但并没有完全消失，在开发人员忽略了标记控件的语义的情况下，它仍然是有用的。因此，OSM 可能仍然会发挥支持作用，为屏幕阅读器提供尽可能多的信息，从而促进更完整的用户体验。
如今，并不是所有的屏幕阅读器都主要使用 OSM 来与网络交互。OSM 被视为过时的技术。此外，维护一个 OSM 在技术上很困难，对开发人员来说也是一个挑战。例如，当您第一次尝试自己测试网页时，您可能会发现很难理解屏幕阅读器是怎么回事。你会失去你在页面上的位置，或者发现在某些时候很难知道屏幕阅读器的焦点在哪里。(会发生的。)这有助于理解你首先不是直接与浏览器互动，而是与这个第三位互动。
注意在与 Web 交互时，实际上“第三位置”是 DOM 和可访问性 API 输出的组合——以及一些屏幕阅读器的 OSM。当你第一次接触这些东西时，最初认为它们代表着同样的东西会有所帮助。它们并不相同，但实际上结合起来创造了“第三个位置”所以它作为一个抽象概念是有用的——这样你的脑袋就不会爆炸。
前面我们讨论了像 JAWS 这样的屏幕阅读器在与 Web 交互时使用的各种光标。电脑虚拟光标是 JAWS 用来浏览网页的主要工具。该虚拟光标实际上指向虚拟缓冲区中的内容数据库——实际上是 osm 和 API 调用组合的可用内容的缓存。屏幕上可视化内容的缓冲允许 at 用户浏览屏幕内容。因此，虚拟光标代表屏幕阅读器用户的浏览点，当视力正常的用户浏览网页时，它可能与焦点不匹配。
您可能还记得我之前谈到过屏幕阅读器使用的表单模式。像 JAWS 这样的屏幕阅读器使用虚拟光标，这样用户可以通过按 H 键、G 键(对于图形)或 B 键(对于按钮)来导航标题，或者在页面上调出链接对话框。这是可能的，因为虚拟光标已经捕获了击键，将它们用作导航控件。那么当你想在网页上输入一些数据的时候呢？显然，您不能同时使用屏幕阅读器的这些导航功能。
记住这就是为什么有像 JAWS 这样的屏幕阅读器的表单模式。在窗体模式下，屏幕阅读器从使用 PC 虚拟光标切换到直接与浏览器交互。这将禁用虚拟光标，并允许屏幕阅读器用户直接在表单中输入数据。
这种表单模式也给 web 开发人员带来了一定的挑战，因为当开发人员在表单模式下工作时，通过 PC 虚拟光标可以获得的重要数据可能不可用。这些丢失的数据可能是关于如何填写表单的说明等等。在表单模式下，应该注意表单验证和更新屏幕内容，这样屏幕阅读器用户就不会错过您需要给他们的指示或反馈，比如丢失输入数据等等。
注在现实中，用户代理，可能是浏览器或某种辅助技术，在构建 web 文档的图片或模型时有几种选择。它可以直接与 DOM 交互，或者使用离屏模型，或者它可以通过平台可访问性 API 获得关于这些不同节点及其状态和属性的信息。我之前提到过一些可访问性 API，比如 MSAA、iAccessible2、苹果可访问性 API 等等。
可访问性 API 是如何工作的？
可访问性 API 充当浏览器、DOM 和 AT 之间的网关或桥梁。为了让辅助技术能够理解 DOM 的内容，需要将这些内容映射到可访问性 API 中的相应角色。API 就像一个过滤器，帮助在任何给定的时间了解 DOM 中发生的事情。实际的 API 做的不止这些，因为它不是完全静态的。它可以促进用户界面组件和辅助技术之间的动态交互。
注意 AJAX 开发人员将熟悉XMLHttpRequest或XHR对象，它们可以通过减少对服务器的调用来促进更多的客户端功能，并有助于创建更加动态和响应更快的 web 应用。
虽然客户端更新很棒，是一个真正的进步，但 AJAX 或 Web 2.0 应用中的动态内容更新对更注重可访问性的开发人员提出了挑战。开发人员如何让 AT 知道部分页面内容已经更新？如何以一种不引人注目的方式做到这一点？在 WAI-ARIA 出现之前，这非常棘手，因为虚拟缓冲区的更新必须是强制的，用户才能看到 DOM 中的任何变化。现在这已经不是什么大问题了，因为虚拟缓冲区每隔几毫秒就会自动更新一次，所以 DOM 的变化可以更可靠、更快速地传递给用户。
注意对于一些关于这个问题的屏幕阅读器历史，如果你喜欢放松一点，我推荐以下 Gez Lemon 和 Steve Faulkner 在[www.Juicystudio.com](http://www.Juicystudio.com)发表的文章。Gez 和我也写了关于这个主题的文章，并在英国利兹的一次技术会议上提交了一篇论文，会议由大约五个人组成，我们是其中的两个人。所以这个主题确实有广泛的吸引力，哈哈！
在本章中，您学习了可访问性 API、DOM、屏幕阅读器如何通过可访问性 API 从 DOM 接收信息，以及旧的但仍在使用的离屏模型。在未来的章节中，我们将更多地使用易访问性 API 而不是 OSM。如前所述，屏幕阅读器不是 AT 现有的唯一部分，但它是最复杂的部分之一。在接下来的章节中，当我们继续更详细地研究 HTML5 时，我们在这一章中所涉及的领域肯定会对你更好地理解 at 是如何处理代码有很大的帮助。此外，我希望你能更好地理解为什么你有时可能需要提供一些额外的东西来支持旧的，例如，不使用更高级的 API。
在这一章中，你将开始更详细地了解 HTML5 规范，尤其是与可访问接口的开发最相关的方面。有许多新的 API 进行后台客户端/服务器处理和数据存储，可以用于丰富、响应迅速的应用，但您将看到的主要是 HTML5 影响用户可访问性的方面。
您还将看到新的 HTML5 元素和用于定义文档轮廓和新的结构形式的语义。
HTML5:有什么新消息？
HTML 的早期版本是相对简单的文档标记语言。它们允许文档被链接和引用，并为构建内容提供语义以支持小范围的浏览器和平台。这种多样的内容范围很广，从数据表到通过简单链接提供交互的内容(这实际上是 Web 的核心),再到表单控件，以及一些非常简单的媒体——实现了嵌入式图形。
但是真的是这样。这些项目构成了早期 HTML 标记语言能力的基础。聪明的人随后想出了压缩音频和视频的方法，比如使用 Flash、Silverlight、Maccies 的 QuickTime 或 PC heads 的 RealPlayer 等插件(以及这些插件的真正乐趣)。这些技术使得 Web 能够被用作像动画内容和视频这样的富媒体的平台。
从可访问性的角度来看，最终结果是浏览器或辅助技术(at)供应商支持或不支持的内容似乎有点武断。例如，CSS2 在浏览器中得到广泛支持绝对需要几年时间。当它最终被支持时，它通常只得到部分支持，这导致了错误和故障(例如“盒子模型渲染不一致”)。在 AT 的世界里也有同样的特性。例如，< table>元素的<scope>属性使得在 HTML4 中创作更易访问的数据表比使用更受支持的<headers>和for/id方法要快得多。然而，对它的支持是如此之少，不幸的是，这种更简单的创作方法不能被依赖。
新的 HTML5 语义
HTML 是一种很大程度上与意义相关联的语言。有些您已经熟悉的控件具有固有的行为(如通过键盘可点击或激活的链接等)，但这些行为是由用户代理(如浏览器)处理的。底层代码提供了一个基本结构，允许核心内容(通常是文本)被广泛的设备消费。这一内容层为“一次创作，发布到多种设备”的模式提供了实用的基础，该模式为电子通信提供了巨大的优势，实现了互操作性，而无需在过多的设备之间进行大量定制。
注意html 5 规范对元素的使用非常严格。
当您想到语义对互操作性和可访问性的重要性时，前面的观察确实有意义。想想我们已经讨论过的关于结构化内容在支持可访问性架构和通过可访问性 API 向 at 传递可用信息方面的重要性。如果你的头还疼的话，我很抱歉，但这一切现在应该清楚一点了。
有些人自称了解可访问性，但实际上他们是规范狂热者，可能是验证吸血鬼。符合任何一种方法都不能保证可访问性、良好的可用性或积极的用户体验。所有这些开发工具真正能做的是表明开发人员在编写符合正式发布的语法的代码时知道她在做什么，但它们不一定在用户代理支持方面考虑用户体验，也不一定在浏览器或 at 上工作。唯一有助于开发人员理解实际情况的是用户测试或熟练使用屏幕阅读器的体验。在这一点上，开发人员自己的测试可能有助于发现什么时候工作或者不工作。这种知识非常重要，因为它基于用户体验的主观现实。
"下表定义了适用于 HTML 元素的强本机语义和相应的默认隐式 ARIA 语义。第一列中的每个 HTML 语言特性(元素或属性)暗示了同一行第二列的单元格中给出的 ARIA 语义(角色、状态和/或属性)。当多个行应用于一个元素时，必须应用定义角色的最后一行中的角色，并且必须组合所有行中的状态和属性。以下是这一工作方式的详细列表。”1
注意一般情况下，我描述的情况在没有@alt或者@title的地方会触发所谓的启发式评估。一个启发式是经验法则或评估方法。试探法是各种事物的核心，从学习计算机科学时可能学到的基本逻辑，到更高级的算法设计。不要被这个术语所困扰，只要想想“一套规则”有时，当启发式评估被触发时，屏幕阅读器也会查看网页中周围的 HTML 内容。
During the summer of 2011, Fiachra, Dara and I climbed the three highest mountains in Ireland. This was a stupendous day where the challenge of summiting the three peaks of Carrauntoohil, Beenkeragh & Caher was too much to resist!
The Coomloughra Horseshoe
The three peaks are ringed within in a large horseshoe shaped valley and present a very challenging climb even for experienced hill walkers. We also had fantastic views of the MacGillycuddy Reeks from Beenkeragh's high, exposed summit. The weather was also very beautiful and we totally lucked out as we couldn't have asked for a clearer day to see the spectacular views. We walked over Beenkeragh Ridge with its yawning drops and navigated the equally spectacular Caher Ridge, with the Black Valley far below, before descending from Caher into Coomloughra Glen.
Remember to bring water
It was a very hot day and after 4 hours or so we ran out of water! Fortunately we came across some fresh mountain streams in the Coomloughra Glen and could top up our water bottles […]
`
如果我想在第一段中包含图片，并且我想把这一段作为文本描述，我可以像清单 6-2 中所示的那样编码。
***清单 6-2。*在帖子中包含一张图片
`
My big climb this summer (2011)
Climbing the three highest mountains in Ireland
****During the summer of 2011, Fiachra, Dara and I climbed the three highest mountains in Ireland. This was a stupendous day where the challenge of summiting the three peaks of Carrauntoohil, Beenkeragh & Caher was too much to resist!
The Coomloughra Horseshoe
The three peaks are ringed within in a large horseshoe shaped valley and present a very challenging climb even for experienced hill walkers. We had fantastic views of the MacGillycuddy Reeks from Beenkeragh's high, exposed summit. The weather was also very beautiful and we totally lucked out as we couldn't have asked for a clearer day to see the spectacular views. We walked over Beenkeragh Ridge with its yawning drops and navigated the equally spectacular Caher Ridge, with the Black Valley far below, before descending from Caher into Coomloughra Glen.
Remember to bring water
It was a very hot day and after 4 hours or so we ran out of water! Fortunately we came across some fresh mountain streams in the Coomloughra Glen and could top up our water bottles […]
`
那么刚才显示的代码中发生了什么呢？我使用博客文章的内联文本来描述图像，通过它们的 id 指向 block 的内容。在本例中，我分别给了每个<p>元素一个 IDtext1、text2和text3。对于支持aria-describedby的用户代理(如前一章所述，许多新的屏幕阅读器都支持，那些不支持的只会忽略它)，在图像和描述之间创建一个编程连接意味着一旦图像获得焦点，描述就会被公布。此外，有一些方法可以增强这种基本行为——例如，通过向图像添加一个@alt文本描述，并将其与aria-describedby代码相结合。这看起来有点像清单 6-3 中的代码。(我省略了博文代码的第一部分和最后一部分。)
<img src="Ruairi.jpg alt=“Ruairi smiling and playing on the couch at home with his large purple Owl friend Minerva. There is a likeness in their big Moon heads!” />
Two friends together, Ruairi and Minerva
`
<figure><img src="josh_drawing_creation.png" alt="A large colourful pen and ink drawing with a cosmic theme of creation" aria-describedby="creation" /><figcaption>‘Creation by Joshue 0 Connor (1993)</figcaption></figure>
‘Creation’ by Joshue O Connor (1993)
In a past life Josh was far more interested in playing guitars, painting, and in general larking about than he was with computers.
Here is some more background about his artwork for those interested […]
This drawing illustrates the mystery of creation. It shows a large flaming triangle that holds a bright radiating sun at its apex, and a stylised smiling moon sits at its base in opposition. At the heart of the triangle there sits an exploding planet with the ancient Vedic symbol of creation the AUM at its heart. The image sits on a background framed of stars and small spaceships fly by randomly in the distance.
`
在 HTML 文档中找到的较长描述的例子稍微好一点。这种方法确实给了作者多一点呼吸的空间，也有希望还图像一个公道。是否是合适的描述，是否传达了图像同样的视觉丰富性？你是法官。可以说，图像功能越多，提供合适的替代文本就越容易，模糊性就越小。
如您所见，@longdesc是一种链接到当前页面或另一个页面上的更长描述的机制。说浏览器和 AT 对它的支持很差可能有点过了，但支持肯定不是很好。它在学术界之外也很少使用。对于那些认为它有用的人来说，它是有用的——如果一个元素很好地服务于一个用例，即使它的应用不是完全通用的，我对保留或改进元素功能或在规范中保留一个元素没有问题。但那是我。
然而，它确实有一些优势，尽管 ARIA 很棒，HTML5 也在许多领域取得了进步，但目前都没有提供对@longdesc的全功能替代。@longdesc有一张王牌，它可以用来引用离页 URI，还可以提供结构化内容作为文本描述。不幸的是，它在浏览器中的实现和最终的用户体验往往还有许多不足之处。然而，这可能与其实现有关，而不是不需要一个更长的描述机制。这是 HTML 工作组中的一个热门话题，您可能会发现它正在重新浮出水面。
<img src="disability_types.png" alt="Most user testing is done with blind and vision impaired people, and the least with Deaf users and people with Dyslexia" />
<img src="benefits_of_usertesting.png" alt="Graph outlining the benefits of user testing" aria-describedby="benefit_test" />
然后在 HTML 文件的更深处，我可以有一个段落提供更丰富的描述，以及一些注释:
<p id=“benefit_test”> From this research we can see that practitioners feel some of the main benefit of user testing with people with disabilities is discovering usability issues with the interface, navigation, structure, functionality and so on. User testing as an awareness raising exercise for developers in order to first hand experience the diverse needs of people with disabilities and therefore gaining a greater understanding of how things work from the users perspective, is also an outcome of the research"</p>
对于图 6-7 ，它着眼于用户测试的规模，更容易描述。
***图 6-7。*测试组规模
<img src="test_sizes"alt="The majority of test group sizes are between 8 12 users." />
<a><img src="buy_this_guitar.png" alt="Here is a nice graphic of a Gibson Guitar stylized with some creative Photoshop filters, and using a groovy font called Rosewood /></a>
不要。你只要说它的功能是什么——字面意思，“买这把吉他。”
<img src="buy_this_guitar.png"alt="Buy this Guitar" />
该插件是第三方解决方案。它不是浏览器自带的，而且是专有的。然而，它看起来并没有消失。HTML5 并不是进入游戏领域的唯一技术；Adobe 已经有了通过虚幻引擎(UE3)开发 Flash 的计划。现在，您可以在 Flash 环境中玩丰富的 3D 游戏。因此，焦点肯定会从视频平台转移到丰富的沉浸式游戏平台。
Flash 中的可访问性问题
如果您使用的是较新的屏幕阅读器，只需开发人员稍加努力，许多 Flash(尤其是 Flex 内容)都是可以访问的。然而，从可访问性的角度来看，Flash 存在一些实际问题(这可能是因为它不是“浏览器固有的”技术)。最明显的问题是无法使用键盘轻松地切换到 Flash 视频内容，还有一个相当反常的问题是无法切换出来(即使您设法进入了)。具有讽刺意味的是，这在 Internet Explorer 中并不是一个问题，但它确实会影响大多数其他浏览器。解决方法很复杂，因为您必须使用脚本来阻止用户返回。
var video = document.getElementById(‘access_video’); var play = document.getElementById(‘play’); var stop = document.getElementById(‘stop’); var mute = document.getElementById(‘mute’);
// Script needed to attach the onclick events with the functional buttons // Remember even though the event is called onclick it still works from // // the keyboard
var video = document.getElementById(‘access_video’); var play = document.getElementById(‘play’); var stop = document.getElementById(‘stop’); var mute = document.getElementById(‘mute’); var forward = document.getElementById(‘forward’); var back = document.getElementById(‘back’);
// Script needed to attach the onclick events with the functional buttons. // Remember even though the event is called onclick it still works from the // keyboard.
这个例子的 JavaScript 代码(实际上同时使用了 a #和 tabindexed <div>)非常简单，但是当它最终工作起来的时候，一切看起来都很简单！
看看你是否能弄清楚清单 6-11 中发生了什么。
***清单 6-11。*添加播放、停止、静音、前进和后退功能的代码
`window.οnlοad=function(){
var video = document.getElementById(‘access_video’); var play = document.getElementById(‘play’); var stop = document.getElementById(‘stop’); var mute = document.getElementById(‘mute’); var forward = document.getElementById(‘forward’); var back = document.getElementById(‘back’);
// Script needed to attach the onclick events with the functional buttons. // Remember even though the event is called onclick it still works from the // keyboard.
一个字体生成器和一个可能的 sIFR 替代品。在[cufon.shoqolate.com/generate/](http://cufon.shoqolate.com/generate/)可用。Roger Johannes 在[www.456bereastreet.com/archive/200905/cufon_and_screen_readers/](http://www.456bereastreet.com/archive/200905/cufon_and_screen_readers/)撰写了关于 Cufón 和屏幕阅读器的文章。
有一个很好的列表，列出了使用<canvas>开发的游戏、小工具等等，可以从[www.w3.org/html/wg/wiki/AddedElementCanvas](http://www.w3.org/html/wg/wiki/AddedElementCanvas)获得。在这里你还可以找到很多关于<canvas>的讨论链接，以及当试图让这个绘图 API 更容易使用时所面临的挑战。
注一个屏幕阅读器是一个线性输出设备。这意味着它一次向用户输出一部分信息。对于一个没有视力的用户来说，如果他对 HTML 内容有一个完形的看法，你需要使用适当的代码来帮助他。这通常是通过编写内容的文本概述并以编程方式将其与表格相关联来实现的，以便当表格获得焦点时会显示出来。在这一章的后面我会详细说明如何做到这一点。
An overview of upcoming animal sanctuary workshops in 2012
[…]
`
使用表格的<caption>元素或标题有助于帮助屏幕阅读器理解表格是什么。如果你考虑一个有五个或六个(甚至更多)数据表的网页，以这种方式添加<caption>真的很有用。一个有视力的人可以快速浏览网页，并找出所有这些表格是什么。如前所述，屏幕阅读器用户可以通过选择各种 HTML 元素——如标题和链接——使用 AT 来浏览网页。他们可以使用页面上的任何<table>元素做同样的事情。例如，在 JAWS 中按下 T 键会导致 AT 将用户从第一个表跳到最后一个表(然后再跳回来)。如果每个表格上没有合适的<caption>，屏幕阅读器只是宣布“table”、“table”，并让用户知道表格有多少行、列等等，但它不能告诉用户表格是做什么用的。添加<caption>填补了空白。带有合适的<caption>的数据表宣布焦点上的内容。因此，如果我建议的包含六个表的页面上的所有表都有<caption>元素，屏幕阅读器用户可以很容易地找到她要找的东西——因为当每个表获得焦点时，<caption>元素的内容就会被公布。整洁！
我们要看的第一种方法稍微费时一些，但我认为它更可靠。我们将在表格 HTML 的header和ID元素之间创建关联。这是一种将数据单元格的内容与其相应的标题相关联的方式。这样做将导致屏幕阅读器在向用户宣布单元格的内容之前宣布数据单元格在的哪一列。
要创建标题/ID 关联，首先要处理标题，然后处理表体。
从给每个标题一个唯一的 ID 开始；给标题一个与内容相同的 ID 是完全可以的。关于我的动物保护区即将举办的研讨会，我的标题标识如下:
Header #1 = “课程”
标题#2 = “开始”
标题#3 = “结束”
标题#4 = “成本”
Header #5 = "Extras "
在 HTML 代码中，标题如下所示:
`Course
Start Date End Date Cost`
Additional content included in 它可以是以下内容或类似内容:
`Course
Start Date End Date Cost Included Extras`
如果您对任何命名约定感到满意，您当然可以使用它。关键是标题 id 是唯一的，因为它们用于创建与表数据的编程关联(正如您将看到的)。对我来说，他们有关系似乎更自然，但这并不重要。现在您已经有了合适的标题 id，接下来您可以将表体中每一行的单元格内容映射到一个合适的标题，如清单 7-1 所示。
清单 7-1 。映射单元格内容
`Course
Start Date End Date Cost Included Extras How do you start an Animal Sanctuary June 10 June 16 650 Euros includes lunches, one dinner and extensive materials. Working with Dogs: A beginners workshop April 12 April 16 300 Euros includes lunches, and materials.
[…]`
使用标题/ID 组合的最终可访问表
通过查看清单 7-1 中的例子，你能看出标题和数据单元内容之间的关联是如何建立的吗？
图 7-1 是决赛桌的屏幕截图。
图 7-1 。可访问数据表示例
清单 7-2 显示了最终完全编码的样本(也有合适的<caption>元素)。
清单 7-2 。可访问表方法 1 的最终表代码
`
Animal Sanctuary workshops
An overview of upcoming Animal Sanctuary workshops in 2012
Course
Start Date
End Date
Cost
Included Extras
How do you start an Animal Sanctuary
June 10
June 16
650 Euros
includes lunches, one dinner and extensive materials.
Working with Dogs: A beginners workshop
April 12
April 16
300 Euros
includes lunches, and materials.
Massage for You & Your Animals
September 29
October 4
400 Euros. A Half day session is 220 Euros.
includes lunch, and book.
Yoga with Animals
May 18
May 21
300 Euros
includes lunch, dinner and book.
A Creative Artistic workshop and Retreat
June 18
June 23
500 Euros
includes lunch, dinner and art supplies.
Why Compassion for Animals matter: Philosophy and Animals
应该构建复杂的表吗？当然，你可以为跨越多列或多行的数据单元格设置标题，但是你真的需要确保在更复杂的表格中嵌入标题(见图 7-5 )并使用适当的 id 在这些标题和数据单元格之间创建编程关联。
尽管随着技术的进步，有更高级的 HTML 标记方法承诺更容易创作或只是“更好”，但在实践中，这里概述的简单方法是您应该坚持的。对于更复杂的表——使用@scope 是最理想的——记住它仍然没有得到很好的支持。因此，即使一个标记方法可能是“好的”(从纯编码的角度来看)，并且在语义上有意义，你仍然必须小心，并且测试，测试，测试。困难在于 at 供应商需要赶上作者正在做的事情和规范建议的事情。其实@scope里没什么新东西。它已经存在很多年了。
注意关于新的 HTML5 表格语法，我必须承认最初我对它有着复杂的感情。然而，当我编写前面的例子时，我发现更简洁的语法首先更容易编写，然后当我检查代码时也很好。我喜欢它在网格中思考的方式。您可以在您选择的编辑器中布置代码，就像您可视化地布置数据表中的表格单元格一样。当然，您也可以用 HTML 4 做到这一点，但是新的语法要简单得多，并且使得可视化解析代码变得更加容易。虽然一开始不太情愿，但发现自己惊喜万分。
In the next table the number of animals we have in care are given in the first column, Number in Care, the animal type is in the second column, Animal Type, and the third column shows the number that are available currently.
The number of animals in care that we have and that are available for immediate re- housing.
虽然在表的正上方有一个详细的描述是一个好主意(如果需要，屏幕阅读器的用户将能够更容易地发现它，因为它非常接近表)，但它仍然有缺陷。这是因为在代码中没有显式的编程关联。正如您现在所知道的，屏幕阅读器用户可以使用他们的 AT 浏览 web 内容，所以显式关联非常有帮助，因为一旦表获得焦点，它就会被宣布。清单 7-6 中的会发生这种情况。
In the next table the number of animals we have in care are given in the first column, Number in Care, the animal type is in the second column, Animal Type, and the third column shows the number that are available currently.
[…]`
The number of animals in care that we have and that are available for immediate re- housing.
Table outlining the number of animals we have in care are given in the first column, Number in Care, the animal type is in the second column, Animal Type, and the third column shows the number that are available currently.
The number of animals in care that we have and that are available for immediate re- housing. Help
the number of animals we have in care are given in the first column, Number in Care, the animal type is in the second column, Animal Type, and the third column shows the number that are available currently.
The number of animals in care that we have and that are available for immediate re-housing.
the number of animals we have in care are given in the first column, Number in Care, the animal type is in the second column, Animal Type, and the third column shows the number that are available currently.
注如前所述，虽然屏幕阅读器不是残障人士访问网络的唯一技术，但它们无疑是最复杂的。此外，技术可访问性支持需求可能是最广泛的。
注辅助技术可能非常非常昂贵，实际上是小众技术。这导致了一种创造性的、自己动手的朋克摇滚文化，这种文化将富有想象力的技术应用融合在通常有限的可用资源中，为残疾人提供解决方案。
注意还有其他可访问 API。例如，如果您正在编写一个 JAVA 应用，并且希望它是可访问的，那么您需要使用 JAVA 访问桥来提供可访问性映射。在 JAVA 中默认是不启用的。
注这种基本的语音输出被称为 TTS，或“文本到语音”合成。有各种各样的硬件和软件 TTS 引擎。
注关于一段非常有趣的屏幕阅读器历史，我推荐 Richard Schwerdtfeger 的论文《让 GUI 说话》，他是 IBM 辅助功能软件组的 CTO，也是著名的辅助功能专家。Rich 还与杰出的 Jim Thatcher 博士一起工作，他开发了第一个 DOS 屏幕阅读器和第一个基于 GUI 的 PC 屏幕阅读器。你可以在
注糊涂了？嗯，有点复杂，不用担心。简而言之，OSM 可以被认为是一个内部数据库，屏幕阅读器在内容呈现到屏幕之前访问它。作为一个有视力的人，你看着浏览器，得到一个页面内容和各种控件的图片，包括它们的功能等等。屏幕阅读器只是从与浏览器相同的来源获得这些信息，但它绕过了视觉呈现，使用代码来导航页面内容并将其输出为语音。
注意在与 Web 交互时，实际上“第三位置”是 DOM 和可访问性 API 输出的组合——以及一些屏幕阅读器的 OSM。当你第一次接触这些东西时，最初认为它们代表着同样的东西会有所帮助。它们并不相同，但实际上结合起来创造了“第三个位置”所以它作为一个抽象概念是有用的——这样你的脑袋就不会爆炸。
记住视力正常的用户在浏览器中看到的只是 DOM 内容的可视化呈现，由 CSS 样式化。注意，这不适用于插件，如 Flash 内容或 Java 小程序，或者实际上，HTML5 
记住这就是为什么有像 JAWS 这样的屏幕阅读器的表单模式。在窗体模式下，屏幕阅读器从使用 PC 虚拟光标切换到直接与浏览器交互。这将禁用虚拟光标，并允许屏幕阅读器用户直接在表单中输入数据。
提示记住有些屏幕阅读器根本不使用离屏模式。其中包括用于 Mac 的 VoiceOver 和用于 PC 的 NVDA，这是一款优秀的免费开源屏幕阅读器，可以与屏幕阅读器用户系统上现有的一些语音合成包一起使用，如 SAPI4 或 SAPI5。
注在现实中，用户代理，可能是浏览器或某种辅助技术，在构建 web 文档的图片或模型时有几种选择。它可以直接与 DOM 交互，或者使用离屏模型，或者它可以通过平台可访问性 API 获得关于这些不同节点及其状态和属性的信息。我之前提到过一些可访问性 API，比如 MSAA、iAccessible2、苹果可访问性 API 等等。
记住对于辅助技术来说，可访问性 API 就像是操作系统和网络之间的桥梁。
注意图 4-2 中的图表有点过于简化，但它的设计是为了概括核心 HTML 代码和屏幕阅读器输出的语音之间的交互。
注意术语“启发式”只是指“一套规则”
注意我不是指好警察/坏警察方式的“审问”，而是指严格意义上的用户与网页内容的互动。你可以把这种互动想象成如下的对话:
注意 AJAX 开发人员将熟悉
注意对于一些关于这个问题的屏幕阅读器历史，如果你喜欢放松一点，我推荐以下 Gez Lemon 和 Steve Faulkner 在
注意 MSAA 的功能相当有限，不允许更复杂或高级的用户界面控制，它只能向 at 提供相对少量的属性信息。
注意在 MSAA 的介绍中，我说“部分替代”是因为它仍然被广泛用作平台可访问性 API，作为向 AT 公开信息的一种方式。然而，新的 API 在支持新的标记语言如 HTML5 和 WAI-ARIA 方面有很大的潜力。两种 API 都可以访问和共享 Web 和 OS 信息。
记得你开始看到一种模式了吗？它完全是关于文档树，以及树上暴露给 AT 的各种叶子或节点，以及这些节点所具有的任何属性、状态等等。这是 API 可访问性的核心。
注意【UIAutomation 和 IAccessible2 都具有跨平台 API 的能力。例如，IAccessible2 也用于 Chrome 浏览器。
注苹果有开源的 Webkit，现在是 Chrome 浏览器背后的渲染引擎，还有 ion 和 Android 浏览器等。尽管 Webkit 已经外包，但这并不意味着 VoiceOver 在其他浏览器上的表现会特别好。并没有。它与 Safari 紧密相连，但 Safari 也是一个很棒的浏览器，所以这是一个双赢的局面。
注意UBUNTU 操作系统还具有屏幕放大功能、修饰键(有点像 Windows 中的粘滞键)、语音识别支持和一个名为 Dasher 的有趣应用，它既不需要键盘也不需要鼠标，而是使用停顿功能和眼球跟踪器。它是完全免费的，所以非常值得一试。要查看更多内容并下载副本，请前往
注意概述 HTML5/API 映射的完整文本和详细表格可在
提示如果你想找出任何 HTML5 或 ARIA 控件有什么样的作用，你可以使用几个工具来做到这一点，如 INSPECT32 (Win)或 ACC probe(Windows 上的 MSAA/IAccessible2)。当您关注浏览器中的小部件时，这些工具将让您看到它们如何映射到可访问性 API。
注意视频现在是真正的大生意，在美国网飞占所有网络流量的 22-35%(取决于你问的是谁)。因此，交付平台的性质非常重要。是的，网飞是首批采用 HTML5 向客户提供视频服务的公司之一。
警告对于任何新的或改变游戏规则的技术，你都必须小心谨慎，采用灵活的试错法。HTML5 的采用方式(至少在某种程度上)是该规范制定了解析规则，为浏览器制造商提供了一个构建浏览器的标准。浏览器内的支持通常是以零碎的方式提供的。随着规范的发展，浏览器供应商可能只实现其中的某些部分。
注意html 5 规范对元素的使用非常严格。
注意好吧，其实格式良好的代码很重要。良好的语义非常重要，但是现实世界的可访问性非常微妙——特别是对于新的内容和元素类型。然而，请记住，一个未编码的&符号(它将抛出一个验证错误)永远不会导致一个不可访问的网页。在网络文档上有一些标题结构，而不是没有，比仅仅确保标题以正确的方式排序要重要得多。
注意我不是在拿地毯的例子开玩笑！可以在
注前面的例子是一种新的文档布局方法的开始。这是一种更复杂的定义内容和轮廓的方式，在 HTML5 中使用了新的元素，比如
注意有了
注意前面标有星号的事件处理程序可能会改变含义，这取决于它们使用的上下文——在本例中，如果它们用在
注意在 ARIA 被添加到原生 HTML5 元素的情况下，一般来说，添加的 ARIA 语义将胜过 HTML 并覆盖默认语义。然而，在某些情况下，这不会发生，并且有一些限制适用。还要注意的是，任何元素都可以被赋予表现角色，不管表 5-2 中显示的限制。
注意属性可以有任何字符串值，包括空字符串。有一些限制，但这些一般规则适用。
注意当处理强语义和弱语义，或者在某些上下文中“什么胜过什么”的决定时，这可能会有点模糊，比如你可以在表 5-1 和表 5-2 中看到的那些。我提到了对元素进行分组的 HTML 内容的类别，下面是它们的列表:
注而
注意
注意 
注意当图像不可用或无法加载时，大多数浏览器会在图像应该出现的地方显示一个边框，同时还会显示替换文本。默认情况下，Lynx 等纯文本浏览器会读取替代文本。详见
注意一般情况下，我描述的情况在没有
记住一个好的默认行为是给你的图片起一个描述性的名字，即使你实际上是在应用替代文本描述。
注意
**During the summer of 2011, Fiachra, Dara and I climbed the three highest mountains in Ireland. This was a stupendous day where the challenge of summiting the three peaks of Carrauntoohil, Beenkeragh & Caher was too much to resist!
注意当一个屏幕阅读器用户厌倦了描述或者听够了描述，他可以离开被描述的条目，转到下一个，或者他可以使用他的屏幕阅读器的导航功能。所以用户不必听他不想听的东西——一旦用户移动到一个新的 HTML 元素，屏幕阅读器的输出就会结束。
这是一个简单的选择。
记住图形和图表是使用
注意像这样的大多数情况下，你只需在替换文本中镜像图像中的文本。下一个例子说明了为什么这种方法很重要。
注我在一些网站上看到过这类图片，实际上进入比赛的唯一途径就是点击链接。因此，如果链接有某种目的，你可以描述它的目的，而不是它看起来像什么！没有什么比下面的例子更能说明这一点了。
注整个“苹果不支持 Flash”的姿态是/是一场格式战。
注意我们在这里讨论的回退内容原则上同样适用于
注意浏览器提供的控件通常不能开箱即用，除非你使用 Opera 浏览器。Opera 开箱即用，提供了出色的键盘可访问性，因此您可以播放、暂停和改变视频或音频的音量。不幸的是，按照大多数其他标准，Opera 不是一个非常屏幕友好的浏览器，但就 HTML5 
注意当编解码器表示用于传送媒体的压缩/解压缩算法时，它也表示编解码器的容器。
提示为了让你的内容能够以最少的格式创建和解码数量到达最多的浏览器，你应该至少提供两种格式的音频，比如 MP4 和 Ogg，至少提供三种最常用的格式的视频:MP4、WebM 和 Ogg。
注我要特别感谢我的朋友盖兹·莱蒙，以及马克·博厄斯和西尔维亚·菲弗，感谢他们在我编写这一部分时给予的慷慨帮助、评论和建议。
注意最难的是脚本，但是如果你保持简单，你可以实现很多，并且不会在这个过程中失去理智。嗯，这可能不完全正确。此外，您可以只使用本机 HTML 输入控件，如按钮，然后添加脚本。这为您提供了更多的开箱即用的可访问性，但是您在样式选择上有点受限。对于手卷控件，您有更多的空间来随心所欲地设计它们的样式。
注意在第一个例子中，我使用了#来通过键盘使控件成为焦点。传统上，使用#是为了给 JavaScript 一个焦点，但是随着 DOM 脚本的发展和像 jQuery 这样的工具包的普及，它并不总是必要的。如果您确实使用这个方法，一定要在它后面添加
`
注意使用 iKeyCodes 确保
注意现在 JavaScript 保持不变。稍后您将看到为前进和后退功能以及其他一些控件添加脚本。
注意关于使用 URL #作为关注控件的方式或者使用
注意如果所有这些都太多，还有现成的视频播放器可以使用，比如用于视频的 jPlayer 和 jQuery UI。您可以分别在
注你可以在
注意要了解更多关于 VTT 的信息和一篇好文章，请看一下
注欲了解更多关于具有良好可及性角度的 HTML5 视频的信息，请参见 Silvia Pfeiffer 的新书，html 5 视频权威指南 (Apress，2010)。
注您可以在
注意如果你想要一个很好的参考来创建你自己的
注一个屏幕阅读器是一个线性输出设备。这意味着它一次向用户输出一部分信息。对于一个没有视力的用户来说，如果他对 HTML 内容有一个完形的看法，你需要使用适当的代码来帮助他。这通常是通过编写内容的文本概述并以编程方式将其与表格相关联来实现的，以便当表格获得焦点时会显示出来。在这一章的后面我会详细说明如何做到这一点。
提示当表格比较复杂时，可以给表格元素添加一个汇总属性(
注意在 HTML5 中，
注意关于新的 HTML5 表格语法，我必须承认最初我对它有着复杂的感情。然而，当我编写前面的例子时，我发现更简洁的语法首先更容易编写，然后当我检查代码时也很好。我喜欢它在网格中思考的方式。您可以在您选择的编辑器中布置代码，就像您可视化地布置数据表中的表格单元格一样。当然，您也可以用 HTML 4 做到这一点，但是新的语法要简单得多，并且使得可视化解析代码变得更加容易。虽然一开始不太情愿，但发现自己惊喜万分。
注几年前，HTML5 工作组采取的立场是数据表不需要标题，而
注意 清单 7-6 有两个标题，因为标记用于引用表格顶部的标题和内嵌的标题。HTML5 规范允许以这种方式引用多个头。
扫一扫
1492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
