WebAIM  - 无障碍记

在Dreamwea万博体育官网网址ver中创建可访问的Web内容

介绍

Dreamweaver是一种流行的Web创作工具所开发Adobe。它经常被用来作为一个WYSISYG(你看到的就是你得到的)编辑器,这意味着它可以让人们无需花费作为标记或代码太多时间制作网页。本教程概述了如何在Dreamweaver中创建访问的网络内容。万博体育官网网址

请注意

除非另有说明,说明为Dreamweaver CC 2014或更高版本。

图像替代文本

每一个< img >元素应该有替代文本向屏幕阅读器用户显示图像的内容或功能。若要为图像提供替代文本,请选择该图像并在Alt键场,坐落在属性面板在页面的底部。

截图

如果属性面板不可见,请选择窗口>属性

重要的

当你在Dreamweaver中插入一个图像时,它会给出一个空的替代文本(ALT = “”) 默认。如果图像是装饰性的,或者如果图像的替代文本附近文本提供,那么你就可以离开这个领域的空白。否则,确保添加适当的替代文本。

旧版本的Dreamweaver中的图像

在较早的版本(CS6和更早的版本)中,当将图像插入文档中时,Dreamweaver会提示用户输入替代文本。将出现一个对话框,其中包含用于的字段替代文字长描述

截图

键入适当和等量替代文成替代文字区域。如果图像不传递内容,也不提供页面功能,请选择<清空>来自替代文字菜单。

屏幕截图显示空替代文本被选中

对话框还包括一个选项来添加详细描述(LONGDESC属性的img标签)的复杂图像。我们不建议使用LONGDESC属性——它没有得到很好的支持,已经从HTML5中删除了。但是,如果您选择使用它,请在长描述字段。请记住,图像仍然需要描述的替代文本。如果不选择长描述,那么LONGDESC属性没有添加到图像中。

表单标签

大多数类型的表单元素(文本框,文本区域,复选框,单选按钮等),需要描述性标签。当添加一个表单控件的页面时,Dreamweaver会自动添加一个<标识>元素中的通用文本(如“文本字段”)。更新标签文本,使其具有唯一性和描述性。

请注意

控件中插入控件时代码框,只有表单控件会出现,标签不会出现。

如果表单控件已经有一个应该是标签的文本描述,请选择标签文本并选择从>标签中插入>。然后去属性面板上的标签,选择,并选择匹配的值ID要标记的窗体控件的。

展开菜单的截图
重要的

<标识>元素不能用于为单个表单控件提供多个标签,也不能用于将单个标签与多个表单控件关联。如果窗体控件有多个标签(反之亦然),请参阅我们的文章先进的表单标签

如果标签文本与表单控件相邻,则选择文本和表单控件,然后插入标签。Dreamweaver将包装a<标识>在文本和表单周围标记。不要添加属性为包装标签。

在旧版本的Dreamweaver中的表单标签

当在旧版本的Dreamweaver中添加表格控件,一个对话框会提示您添加一个表单标签:

窗体标签对话框的截图

如果需要的话,在第一字段中输入的值的ID(一个通用的ID将被添加,如果这是空白)。记住,这个值必须是一个单词(不含空格)和独特的页面上。接着,键入相应的形式的标签进入标签对话。然后,您可以选择标签风格。我们建议您保留默认值安装使用“的”属性标签标记选中。此对话框还提供了用于指定的选项访问键Tab键索引。这些通常被误用,应该留空。

重要的

旧版本的Dreamweaver不正确地提供标签当您将按钮和图像输入元素插入web页面时,对话框。这两个表单元素都不应该有标签。屏幕阅读器将读取按钮输入元素的value属性,并读取图像输入元素的alt属性,这两个属性都可以使用属性面板。

自定义字段

<字段集><传奇>元件提供一个机制,以更高级别的标签添加到组表单控件。的<字段集>识别整个分组和<传奇>识别分组的描述性文本。这通常用于无线电按钮和复选框的基团。加上<字段集><传奇>在Dreamweaver,突出显示元件组,并选择插入>表格>字段集。选中的内容将包装在<字段集>然后将出现一个对话框,您可以在其中输入传说

截图

数据表

有参与决策三个原则数据表万博体育官网网址访问屏幕阅读器用户:

  1. 指定表标头(< th >)。
  2. 分配一个范围到行和/或列标题。
  3. 如果合适的话,得到表一<标题>。

当插入一个表格,一个对话框呈现。在下面选项中选择表是否有没有头(没有),行标题(),列标题(最佳),或者行和列标题()。

表格对话框的截图。有一些选项可以更改表大小、选择标题结构、添加标题和添加摘要

Dreamweaver将指定正确范围的表标头(例如,< th范围=“上校”>)。

该对话框还具有用于表的字段标题,其中介绍了表的标题或描述。虽然不是所有的数据表需要字幕,他们往往是有帮助的。一张桌子概要通常应该留空白的总结属性是不能很好的支持,而不是HTML5规范的一部分。

请注意
  • 如果表用于布局的目的,选择没有在标题下面的选项和不添加标题
  • 如果您指明表中有通过选择行和列标题,然后Dreamweaver将把左上角的单元格设置为列标题。如果该单元格是行标题,或者根本不是标题,则更新它使其与数据表的结构匹配。

将scope属性添加到文档中已经存在的表的唯一方法是手动添加它们代码视图。对于复杂的表格具有标题跨度的行或列以及其范围是不够的,你必须手动添加头和id属性。如果可能的话,简化您的表,这样ID是可以避免的。

标题

一个逻辑标题结构大大提高网页的可访问性。标题通常为页面导航和定向使用屏幕阅读器的用户。为了标题添加到页面上,选择插入>标题,然后选择所需的标题级别。将文本更改为标题,或更改标题级别,选择文本,然后从所需的标题级别格式在菜单属性面板。

扩展格式对话框。选项有:无,段落,标题级别1-6和预格式化。

页面标题

简洁、独特和描述性的页面</code>对于可访问性非常重要。许多用户,特别是屏幕阅读器用户,依靠页面标题来识别页面上的内容。创建新文档时,将出现一个对话框。属性中输入页面标题<span class="menuchoice">标题</span>字段。</p> <div class="mediaobject"> <img alt="截图" height="254" src="//www.kanehsu.com/techniques/dreamweaver/media/title1.png" width="451"> </div> <p>如果不加<code><TITLE></code>或者如果你是使用Dreamweaver的旧版本,页面给出了一个通用的<code><TITLE></code>的“无标题文档”。您可以在此更改<span class="menuchoice">文件名</span>场,在文档的<span class="menuchoice">属性</span>面板。</p> <div class="mediaobject"> <img alt="截图" height="115" src="//www.kanehsu.com/techniques/dreamweaver/media/title2.png" width="373"> </div> </div> <div class="section" id="link"> <h2>链接</h2> <p>当插入超链接,会出现一个对话框,几个选项。</p> <div class="mediaobject"> <img alt="在超链接对话框的屏幕截图。选项包括:文本,链接,标题,访问键,Tab键索引。" height="264" src="//www.kanehsu.com/techniques/dreamweaver/media/link.png" width="453"> </div> <p>添加<a href="//www.kanehsu.com/techniques/hypertext/link_text">描述性的文字链接</a>到<span class="menuchoice">文本</span>字段。这段文字应该清楚地描述目的地或链接的功能。避免含糊不清的或无关的文字,如“点击这里”。的<span class="menuchoice">访问密钥</span>,<span class="menuchoice">选项卡索引</span>和<span class="menuchoice">标题</span>字段应该总是留为空白。</p> </div> <div class="section" id="list"> <h2>列表和强调文本</h2> <p>Dreamweaver包括创建无序/项目符号列表的选项(<code>< ul ></code>),有序/编号列表(<code>< ol ></code>)。您还可以指定,强调文本(<code>< >强</code>大胆的和<code>< em ></code>斜体)。这些更改可以在<span class="menuchoice">属性</span>面板<br>(<img alt="B, I,项目符号列表和编号列表图标的屏幕截图" height="17" src="//www.kanehsu.com/techniques/dreamweaver/media/semantics.png" width="100">)。</p> </div> <div class="section" id="html5"> <h2>HTML5分节元素</h2> <p>Dreamweaver允许您创建以下HTML5分段元素(在<span class="menuchoice">插入</span>菜单):<span class="menuchoice">头</span>,<span class="menuchoice">导航</span>(<code><导航></code>)<span class="menuchoice">主要</span>,<span class="menuchoice">一边</span>,<span class="menuchoice">文章</span>,<span class="menuchoice">部分</span>和<span class="menuchoice">页脚</span>。就像<a href="//www.kanehsu.com/techniques/aria/">咏叹调地标</a>,这些元素标识可以帮助屏幕阅读器用户定位和导航页面的页面区域。</p> </div> </article> <aside id="articlemeta"> <div id="updated"> 最近更新时间:<time datetime="2016-06-30">二〇一六年六月三十○日</time> </div> <div id="translations"> <h2>翻译</h2> <ul> <li><a href="https://elektrikbilliger.com/erstellung-barrierefreier-inhalt-mit-dreamweaver/"><img src="//www.kanehsu.com/media/common/flags/de.png" alt="">德语</a></li> </ul> </div> <div id="related"> <h2>相关资源万博亚洲体育官网</h2> <ul> <li><a href="//www.kanehsu.com/techniques/word/">微软的Word无障碍</a></li> <li><a href="//www.kanehsu.com/techniques/acrobat/acrobat">杂技演员和可访问性</a></li> </ul> </div> </aside> </main> <footer> <div id="footerresources"> <div class="footerblock"> <p id="copyright"><span class="hidden">©</span>2020年WebAIM</p> <p id="contact">中心残疾人<br>犹他州立大学<br>6807老主山<br>洛根,但84322 - 6807<br><a class="phone" href="tel:4357977024">435.797.7024</a></p> </div> <div class="footerblock"> <h2 id="blog">从博客</h2> <ul> <li><a href="//www.kanehsu.com/blog/wave-3-1-release/">WAVE 3.1发布</a></li> <li><a href="//www.kanehsu.com/blog/wcag-2-2-overview-and-feedback/">WCAG 2.2概述和反馈</a></li> <li><a href="//www.kanehsu.com/blog/anniversaries-celebrated/">纪念日庆祝</a></li> <li><a href="//www.kanehsu.com/blog/wave-webinar-and-intro-video/">WAVE网络研讨会和介绍视频</a></li> <li><a href="//www.kanehsu.com/blog/webaim-million-one-year-update/">WebAIM百万-一年更新</a></li> </ul> </div> <div class="footerblock"> <h2 id="popular">受欢迎的资源万博亚洲体育官网</h2> <ul> <li><a href="//www.kanehsu.com/training/virtual">WebAIM培训</a></li> <li><a href="//www.kanehsu.com/standards/wcag/checklist">WCAG 2检查表</a></li> <li><a href="//www.kanehsu.com/newsletter">WebAIM月度简报</a></li> <li><a href="//www.kanehsu.com/resources/contrastchecker">色彩对比检查</a></li> <li><a href="//www.kanehsu.com/resources/designers/">设计人员的网页可及性</a></li> <li><a href="//www.kanehsu.com/wave/">WAVE网页可访问性评估工具</a></li> </ul> </div> <div class="footerblock" id="checkpage"> <h2>检查你的可访问性</h2> <form action="https://wave.www.kanehsu.com/report" novalidate> <label for="waveurl" class="hidden">网站地址</label> <input type="url" id="waveurl" name="url" placeholder="Web site address" title="Web site address"> <input type="submit" value="波"> </form> </div> <div id="footerlinks"> <ul> <li><a id="footercontact" href="//www.kanehsu.com/contact">联系</a></li> <li><a id="footerabout" href="//www.kanehsu.com/about">关于</a></li> <li><a id="footerrss" href="//www.kanehsu.com/community/rss">RSS提要</a></li> <li><a id="footertwit" href="http://twitter.com/webaim">推特</a></li> <li><a id="footercopyright" href="//www.kanehsu.com/copyright">版权及使用条款</a></li> </ul> </div> <div class="clear"></div> </div> </footer> </body> </html>