使用 Dreamweaver 工具使网站可访问

优质
小牛编辑
134浏览
2023-12-01
使用 Dreamweaver 可生成可供有视觉、听觉、运动及其他障碍的人士使用的网站和 Web 产品。

注意:用户界面已经在 Dreamweaver CC 和更高版本中做了简化。因此,您可能在 Dreamweaver CC 和更高版本中找不到本文中描述的一些选项。有关详细信息,请参阅此文章。

关于辅助内容

辅助功能是指使 Web 站点和 Web 产品可供具有视觉、听觉、运动和其他障碍的人士使用。软件产品和 Web 站点的辅助功能示例包括屏幕阅读器支持、图形的等效文本、快捷键、将显示颜色更改为高对比度等。Dreamweaver 提供便于使用的工具以及帮助您创作可访问内容的工具。

对于需要使用辅助功能的 Dreamweaver 开发人员,该应用程序提供了屏幕阅读器支持、键盘导航和操作系统辅助功能支持。

对于需要创建可访问内容的 Web 设计人员,Dreamweaver 将帮助您创建包含屏幕阅读器的有用内容的可访问页面并遵守联邦政府准则。例如,提供了相应的对话框,可在您插入页面元素时提示输入辅助功能属性(例如,图像的等效文字)。然后,当该图像显示在页面上以供有视觉障碍的用户使用时,屏幕阅读器将朗读该说明。

注意:有关两个重大辅助功能计划的详细信息,请参阅《万维网联盟网页辅助功能计划》(www.w3.org/wai) 和《美国联邦康复法案》第 508 节 (www.section508.gov)。

注意:有关日本工业标准辅助功能规范的详细信息,请参阅 JIS X 8341-3 (www.jisc.go.jp)。

没有任何创作工具能够实现辅助功能开发流程的自动化。如果要设计具有辅助功能的 Web 站点,您需要了解辅助功能要求,并在设计中随时确定残障用户是如何与网页进行交互的。确保 Web 站点具有辅助功能的最佳方法是精心的规划、开发、测试和评估。

将屏幕阅读器用于 Dreamweaver

屏幕阅读器会朗读计算机屏幕上显示的文字。屏幕阅读器还可以朗读在创作页面时通过辅助功能标签或属性提供的非文本信息(如应用程序中的按钮标签文字或图像说明)。

作为 Dreamweaver 设计人员,您可以使用屏幕阅读器帮助您创建网页。屏幕阅读器会从“文档”窗口的左上角开始朗读。

Dreamweaver 支持 JAWS for Windows(来自 Freedom Scientific)(www.freedomscientific.com) 和 Window-Eyes 屏幕阅读器(来自 GW Micro)(www.gwmicro.com)。

操作系统辅助功能支持

Dreamweaver 同时支持 Windows 和 Macintosh 操作系统中的辅助功能。例如,在 Macintosh 上,您可以在“通用访问首选参数”对话框(“Apple”>“系统首选参数”)中设置可视化首选参数。这些设置将反映在 Dreamweaver 工作区中。

还支持 Windows 操作系统的高对比度设置。您可以通过 Windows 控制面板激活此选项,然后此选项会影响 Dreamweaver,如下所示:

  • 对话框和面板使用系统颜色设置。例如,如果将颜色设置为“黑底白字”,则所有 Dreamweaver 对话框和面板均会以白色前景颜色和黑色背景颜色显示。
  • “代码”视图使用系统和窗口的文本颜色。例如,如果将系统颜色设置为“黑底白字”,然后在“编辑”>“首选参数”>“代码颜色”中更改文本颜色,则 Dreamweaver 会忽略这些颜色设置并以白色前景颜色和黑色背景颜色显示代码文本。
  • “设计”视图使用您在“修改”>“页面属性”中设置的背景颜色和文本颜色,使您设计的页面在颜色显示上与浏览器相同。

优化工作区以进行具有辅助功能的页面设计

创建具有辅助功能的页面时,需要将标签和说明等信息与页面对象相关联,以使页面内容可供所有用户访问。

为此,针对每个对象激活“辅助功能”对话框,以便 Dreamweaver 在您插入对象时提示您有关辅助功能的信息。您可以在“首选参数”的“辅助功能”类别中为任何对象激活对话框。

  1. 选择“编辑”>“首选参数”(Windows) 或“Dreamweaver”>“首选参数”(Macintosh)。
  2. 从左侧的“类别”列表中选择“辅助功能”,选择某个对象,设置以下任意选项,然后单击“确定”。

    插入时显示属性

    选择要为其激活“辅助功能”对话框的对象。例如,表单对象、框架、媒体和图像。

    打开时使焦点在面板中

    将焦点保持在该面板上,以便屏幕阅读器可以访问该面板。(如果未选择此选项,当用户打开某个面板时,焦点会置于“设计”或“代码”视图中。)

    屏幕外呈现

    当使用屏幕阅读器时选择此选项。

    注意:当插入新表格时,辅助功能属性会显示在“插入表格”对话框中。

使用键盘在 Dreamweaver 中导航

您可以使用键盘在面板、检查器、对话框、框架和表格中导航,而无需使用鼠标。

注意:仅对 Windows 支持使用 Tab 和箭头键。

在面板间导航

  1. 在“文档”窗口中,按 Ctrl+F6 将焦点切换到某一面板。

    面板标题周围的虚线指示焦点位于该面板。屏幕阅读器会朗读获得焦点的面板标题栏。

  2. 再次按下 Ctrl+F6 进行切换,直到您要操作的面板获得焦点。(按 Ctrl+Shift+F6 可将焦点切换至先前的面板。)
  3. 如果您要操作的面板尚未打开,请使用“窗口”菜单中的键盘快捷键显示相应的面板;然后按 Ctrl+F6 将焦点切换到该面板。

    如果您要操作的面板已打开但尚未展开,请将焦点置于该面板标题栏,然后按空格键。再次按空格键可折叠该面板。

  4. 按 Tab 在该面板上的各个选项之间移动。
  5. 正确地使用箭头键:
    • 如果某一选项包含若干选择,可使用箭头键滚动查看这些选择,然后按空格键做出选择。
    • 如果是包含多个选项卡的面板组,要打开其他面板,可将焦点置于已打开的选项卡,然后使用向左键或向右键打开其他选项卡。当打开一个新的选项卡后,按 Tab 便可在该面板上的各个选项之间移动。

在属性检查器中导航

  1. 按 Ctrl+F3 显示属性检查器(如果它不可见)。
  2. 按 Ctrl+F6(仅限于 Windows),直到将焦点切换到属性检查器。
  3. 按 Tab 在属性检查器的各个选项之间移动。
  4. 适当地使用箭头键在选项的各项选择之间移动。
  5. 根据需要,按 Ctrl+向下箭头/向上箭头 (Windows) 或 Command+向下箭头/向上箭头 (Macintosh),或在焦点位于右下角的扩展器箭头上时按空格键,即可打开和关闭属性检查器的扩展部分。

    注意:要使展开和折叠操作起作用,键盘焦点必须位于属性检查器中(而不是在面板标题上)。

在对话框中导航

  1. 按 Tab 在对话框中的各个选项之间移动。
  2. 使用箭头键在选项的各项选择之间移动。
  3. 如果该对话框包含“类别”列表,可按 Ctrl+Tab (Windows) 将焦点切换到“类别”列表,然后使用箭头键在列表中向上或向下移动。
  4. 再次按 Ctrl+Tab 以切换到某一类别的选项。
  5. 按 Enter 键退出对话框。

在框架间导航

  1. 如果文档包含多个框架,则可以使用箭头键将焦点切换到某个框架上。

选择框架

  1. 按 Alt+向下键,将插入点置于“文档”窗口中。
  2. 按 Alt+向上键,选择当前具有焦点的框架。
  3. 继续按 Alt+向上箭头键,将焦点切换到框架集。如果存在嵌套框架集,则再切换到父框架集。
  4. 按 Alt+向下键,将焦点切换到子框架集或该框架集中的一个框架。
  5. 当焦点位于单个框架上时,按 Alt+向左键或向右键可让焦点在各个框架之间移动。

在表格中导航

  1. 根据需要,使用箭头键或按 Tab 移动到表格中的其他单元格。

    注意:如果在最右侧的单元格中按 Tab,则会将另一行添加到表格中。

  2. 若要选择一个单元格,请在插入点位于该单元格时按 Ctrl+A(仅 Windows)。
  3. 若要选择整个表格,如果插入点位于单元格中,请按 Ctrl+A 两次。如果单元格处于选定状态,则按一次。
  4. 若要退出表格,请按 Ctrl+A 三次(如果插入点位于某个单元格中)、两次(如果单元格处于选定状态)或一次(如果表格处于选定状态),然后按向上、向左或向右箭头键。