为了确保每个人都能访问网站和web应用程序, 加州大学洛杉矶分校网页设计师, 开发人员, 内容创作者必须遵循最新的网页可访问性指南.
形式
表单通常用于在网站和web应用程序中提供用户交互. 以使在线表格可访问, 每个表单字段都必须有一个标识其用途的描述性标签. 标签应该放置在其各自的字段附近,并且必须与该字段相关联.
您可以通过遵循这些最佳实践来改进表单的可访问性.
- 就如何填写表格提供清晰的说明.
- 明确指定必填字段.
- 按逻辑顺序放置表单字段.
- 对相关的表单字段进行分组并适当地标记它们.
- 确保表单字段可以使用键盘导航.
- 确保错误被清楚地传达并且易于识别.
Drupal网站
如果你的网页是托管在大学的Drupal网络平台(www.drupal.org)上.vaftizo.com),您可以通过使用网络form内容类型轻松创建可访问的表单. 添加新表单字段时, 您为该字段输入的标签将自动与相应的字段关联. 您还可以使用拖放功能轻松地对字段进行分组和排序. 有关如何在Drupal中创建表单的说明,请访问 创建网络forms 页面.
Non-Drupal网站
如果你的网页托管在大学的网络服务器(web.calstatela.Edu)或第三方, 使用正确的HTML标记将标签与其对应的字段关联起来. 如果您使用JavaScript来操作表单数据或进行表单验证, 确保表单仍然可以使用键盘进行导航. 欲了解更多信息,请访问 W3C的表单概念 页面和 网络AIM创建可访问表单 页面.
帧
帧
框架用于将网页分成不同的部分, 每个部分都有自己的窗口. 如果可能的话,避免使用框架,因为它们会产生可用性和可访问性问题. 如果你必须使用框架, 确保每个框架都有一个有意义的标题,清楚地表明该框架内的内容. 也, include a
Iframes
内联框架(iframes)用于将内容从一个网页嵌入到另一个网页中.g.比如YouTube上的视频或社交媒体小工具). 如果您在页面上合并iframe,请确保它有一个有意义的标题. 也, 通过在iframe开始和结束标记之间包含文本描述来提供可选内容.
欲了解更多信息,请访问 网络AIM创建可访问的框架和iframe 页面.
标题
标题帮助用户理解网页上包含的信息以及这些信息是如何组织的. 标题还允许屏幕阅读器和辅助技术用户浏览页面结构,导航到或跳过部分.
在设计页面结构时,请遵循以下最佳实践.
- 使用标题来表示页面的结构,而不是视觉效果.
- 对所有可视标题应用标题标记(h1-h6). 不格式化文本,使其看起来像一个标题.
- 只使用一个主标题(h1)作为页面标题.
- 正确排序标题. h1的副标题为h2s, h2s的副标题为h3s,以此类推.
- 使标题简短和描述性,这样用户可以很容易地找到他们正在寻找的信息.
- 确保所有的标题都有相关的内容.e.,没有空标题).
Drupal网站
如果你的网页是托管在大学的Drupal网络平台(www.drupal.org)上.vaftizo.com),您可以应用标题样式(标题2,标题3等).),使用所见即所得工具栏上的格式按钮. 在Drupal, 页面标题被标记为标题1, 因此,页面内容中的第一级副标题应标记为标题2.
Non-Drupal网站
如果你的网页托管在大学的网络服务器(web.vaftizo.com)或第三方,使用正确的HTML标记样式标题(h1, h2, h3等.). 欲了解更多信息,请访问 W3C的标题 页面.
图片
图像可以增强内容或增加网页的视觉趣味, 但有视力障碍的人无法进入. 为了便于访问,所有图像都必须具有等效的替代文本(alt文本)。. 它由屏幕阅读器读取,而不是图像, 允许访问图像的内容和功能. 图片最合适的替代文字取决于图片在网页上下文中的目的.
- 如果图像传达了简单的信息, Alt文本应该传达与图像相同的基本信息.
- 如果一幅图像传达了复杂的信息(例如.g., 图表或图表), 它应该包括一个简短的Alt文本和一个长描述,提供有关图像的更多细节.
- 如果图像纯粹是装饰性的,则alt属性应该为空(alt=""). 这告诉屏幕阅读器完全忽略图像.
- 如果图像有标题或在相邻的文本中描述, Alt属性应该为空(Alt =""),这样屏幕阅读器就不会读取信息两次.
- 如果图像包含文本,则所有文本应包含相同的文本.
- 如果图片被链接,那么alt文本应该描述链接的目的地.
- 如果图片被用作按钮,alt文本应该描述按钮的用途.
欲了解更多信息,请访问 网络AIM的替代文本 页面.
Drupal网站
确保托管在大学Drupal网络平台上的网站(www.drupal.org).calstatela.Edu)满足可访问性要求,所有图像都需要Alt文本. 有关如何在Drupal中添加图像的说明,请访问 添加图片 页面.
Non-Drupal网站
如果你的网页托管在大学的网络服务器(web.calstatela.Edu)或由第三方提供,请确保所有图像都包含适当的Alt文本. 欲了解更多信息,请访问 W3C的图像概念 页面和 网络AIM的无障碍图像 页面.
链接
链接是网站最基本、最重要的元素之一. 它们对网站导航至关重要,可以用来交叉引用相关内容. 因此,不可访问的链接是网站可能遇到的最大问题之一.
何时使用链接
通过遵循这些最佳实践,您可以提高链接的可用性和可访问性.
- 使用断章取义时有意义的链接文本. 避免使用冗余或模糊的链接文本,如“点击这里”或“阅读更多”.
- 保持链接文本简洁. 长链接更有可能在网页上跨行中断,使其看起来像两个链接.
- 避免使用url作为链接文本. 如果URL相对较短,例如网站的主页,则可以将其用作链接文本.
- 不使用相同的文本链接到不同的目的地.
- 确保链接可以使用键盘导航.
- 对链接进行样式设计,使其区别于网页上其他类型的文本. 给链接加下划线是表示文本可点击的标准约定.
欲了解更多信息,请访问 网络AIM的链接和超文本 页面.
插件
插件使网页浏览器能够显示特定的文件格式(PDF, Word, Excel, PowerPoint等).). 当一个网页链接到一个需要插件来显示内容的文件时, 必须提供到可以下载插件的页面的链接.
Drupal网站
如果你的网页是托管在大学的Drupal网络平台(www.drupal.org)上.vaftizo.com), 这一要求是通过位于网站页脚的文件查看器链接自动满足的. 如果您链接到一个需要插件的文件,而该插件没有在列表中列出 文件查看器和插件 页面,您需要添加一个链接到可以下载插件的页面.
Non-Drupal网站
如果你的网页托管在大学的网络服务器(web.calstatela.Edu)或第三方, 您可以通过添加一个链接到可以下载相应插件的页面来满足这一要求. 有关常用文件类型的插件列表,请访问 文件查看器和插件 页面.
Skip-Navigation
许多网站都有跨多个页面的冗余导航链接. 适用于屏幕阅读器用户和通过键盘导航的用户, 如果没有办法有效地跳过这些链接,这些链接就会变得很麻烦. 提高网站的可访问性, 在每个页面上包含一个跳过导航链接,允许网站访问者跳过重复的页面元素,进入主要内容.
Drupal网站
如果你的网页是托管在大学的Drupal网络平台(www.drupal.org)上.calstatela.Edu),则自动满足此要求. Drupal中创建的每个页面都包含一个“跳到内容”链接.
Non-Drupal网站
如果你的网页托管在大学的网络服务器(web.calstatela.Edu)或第三方, 您可以通过在每个页面的顶部添加直接指向主要内容的链接来满足这一要求. 欲了解更多信息,请访问 网络AIM的跳过导航链接 页面.
表
表 should be used to present data; they should not be used to create a 页面 layout. 使数据表可访问, 它需要包含列和/或行标头,以及将数据单元格与其各自标头相关联的标记.
Drupal网站
如果你的网页是托管在大学的Drupal网络平台(www.drupal.org)上.calstatela.Edu),您可以轻松创建可访问的表. 将表添加到页面时, 确保在“表属性”对话框中指定列和/或行标题. 根据你的选择, Drupal将自动向表中添加适当的标记,以便将数据单元格与其标题关联起来. 有关如何在Drupal中添加表的说明,请访问 添加表 页面.
Non-Drupal网站
如果你的网页托管在大学的网络服务器(web.calstatela.Edu)或第三方, 确保使用适当的HTML标记将数据单元格与其标题关联起来,从而创建可访问的表. 欲了解更多信息,请访问 W3C的表概念 页面和 网络AIM创建可访问表 页面.
文本
为了便于访问,网站文本必须具有高水平的可读性和易读性. 可读性是指读者能够容易地识别单词、句子和段落. 易读性是指读者识别文本中单个字符的难易程度.
您可以通过遵循这些最佳实践来提高文本的可访问性.
- 写作清晰简洁.
- 用标题和列表组织内容.
- 使用真实的文本,而不是嵌入在图形中的文本.
- 在文本和背景之间提供足够的对比.
- 选择简单易读的字体.
- 避免使用小字体.
- 字体大小使用相对单位.
- 避免完全对齐的文本.
- 避免闪烁或移动文本.
- 限制使用字体变体,例如 大胆的, 斜体,并全部大写字母.
- 除非文本是链接,否则不要在文本中添加下划线.
- 识别语言的任何变化(e).g.(从英语到西班牙语).
创建可访问的网络内容
通过遵循上面列出的简单指导方针,大多数web内容都可以访问. 有关网站可访问性指南的全面列表以及如何满足这些指南,请访问 网络AIM的WCAG 2.0的清单 页面和 W3C如何满足WCAG 2.0 页面.
Color
色彩的运用
色彩是网页设计的一个重要方面. 然而,一些用户在感知颜色方面有困难. 当使用颜色时,确保它不是传达信息的唯一视觉手段. 如果你用颜色来传达信息(e.g., 指定必需的字段, 超链接, 活跃的元素, 或其他资料), 包括第二种区分方法. 例如, 如果网页引导访问者按下绿色按钮寻求帮助, 它还应该包括按钮上的“帮助”字样. 这样,一个色盲的人仍然可以识别出这个按钮是为了帮助.
颜色对比
使用颜色时, 在文本和背景之间提供足够的对比度,以便有视觉障碍的人可以阅读内容.
- 文本和背景之间的最小对比度应为4.5:1.
- 较大的文本(不加粗至少18点,加粗至少14点)的对比度可以设置为3:1.
- 这些要求也适用于文本图像,如果这些图像打算被理解为文本.
- 装饰性且不传达任何信息的文本没有对比度要求.
使用 网络AIM颜色对比检查器 要测试文本与其背景之间的对比度: