下面几节将介绍一些更重要的技术方面和注意事项 管理或创建OER时的可访问性. 

 

我们强烈鼓励策展人和创作者参加 ASCCC自定进度无障碍基础课程.

 

另一个需要考虑的资源是 孤峰学院 OER和ZTC教师:可访问性 网页提供一系列资源,供社区大学教师使用 正在开发资源

 

全部展开 | 全部折叠

无障碍简介

我们希望所有的教科书和其他教育材料都能被所有人使用 我们的学生. 从法律上讲,这意味着这些材料应该符合美国的要求 残疾法案和1973年康复法案第508条. ADA及组 508合规允许更多的学生获得开放的教育资源和应该 在格式化过程中优先考虑. 下面的页面描述了遵从性的关键方面 应用于几种文件类型.

 

通常,OER专家会先用Word格式化,然后再将文件转换为 一个PDF. 而Word确实有一个辅助功能检查器,PDF辅助功能检查器 通常用作文档可访问性的最终测试.

创建可访问的文档

在微软Word和谷歌文档中创建的文档可以很容易地访问,但在那里 OER作者应该使用哪些技巧来确保他们创建的文档 不仅可以在Word中访问,而且在转换为其他格式时也可以访问 格式(网页、PDF文件、盲文文件). 在Word和其他文字处理工具中轻松构建可访问的文档 谷歌 docs和Open Office),作者需要熟悉编辑 工具栏. 使用适当的样式“标记”文档与隐藏的代码,使 该文档可以被屏幕阅读器软件理解.

要记住的基本技巧包括:

  • 使用样式来表示标题.
  • 使用列表样式创建编号和项目符号列表.
  • 为所有图像提供替代文本.
  • 确保表中的头被标记.
  • 确保所有文本和背景之间有足够的颜色Contrast.
  • 使用制表符而不是空格来移动单词.

教程

以前的文字处理软件变化很大,窗户版的word, 窗户版的word Mac和谷歌文档的功能其实非常相似! 这里有几个很棒的 这些视频将帮助作者鸟瞰如何使文件易于访问, 对于Word用户来说,这是一个很棒的在线资源,应该收藏起来以备将来之需 使用:

为了更好地理解设计电子文档的指导方针,请观看 下面的视频 本处介绍MS Word的基本使用功能:

MS Word的基本访问功能

文档:分块和标题

文档中的标题——无论是Word、谷歌 Doc、PowerPoint还是PDF——都应该是这样的 通过识别内容的主要思想或概念,将内容分成“块” 页面. 标题还可以识别页面上信息流动的变化 允许个人可视地扫描文档以获取所需信息.

 

从可访问性的角度来看,格式正确的标题很有价值 为使用屏幕阅读器的用户提供在 文档. 而不是逐行阅读文档或网页,使用 Of标题允许个人根据标题主题浏览信息.

 

为了帮助学生从标题中获得最大的收获,请遵循以下三条规则:

 

  1. 确保标题具有逻辑性和描述性.
    • 应该只有一个1级标题.
    • 使用二级标题作为主要主题. (一个页面可能只需要h2s.)
    • 子主题使用级别3.
  2. 使用样式来表示标题.
  3. 保持标题的语义结构(不要跳过级别).

窗户

在Word 2016中创建标题:

    1. 突出显示将成为标题的文本(或将光标放置在文本中).
    2.  Home 选项卡,选择合适的标题样式 风格.

标题位于顶部工具栏


其他窗户资源

Mac

在Mac版Word 2016中创建标题:

    1. 突出显示将成为标题的文本(或将光标放置在文本中)
    2.  Home 选项卡,选择合适的标题样式 风格.  
如果窗口很小,样式可能会被隐藏. Select 风格,然后出现下拉菜单. 
Word 2016 Mac版风格图库截图
其他Mac资源

谷歌文档

在谷歌文档中创建标题:

  1. 突出显示将成为标题的文本(或将光标放置在文本中)
  2. 从菜单栏中选择 风格 下拉菜单,然后选择适当的标题级别.

风格 也可以从 格式 menu. 

谷歌标题位于标题下拉


其他谷歌资源
格式列表

列表可以帮助转换密集的句子或段落,使材料更丰富 视觉上可访问的. 列出清单是很好的方法:

  • 向学生展示相关的想法;
  • 说明一组中的项目;
  • present pieces of a series; or
  • 概述流程中的步骤. 

他们还利用留白,这有助于使内容更直观 吸引人的.

 

列个清单 但是,请确保使用列表样式. 简单地添加顺序 列表中每行文本或项目前的数字或项目符号  列个清单 可访问的. 

窗户

使用Word for 窗户创建列表:

  1. 在列表中输入每个项目(单独的项目有一个返回).
  2. 突出显示列表中的所有项目.
  3. 从格式ribbon中选择项目符号列表或编号列表.

Word for 窗户的Home选项卡中的列表选项的截图


其他窗户资源:

Mac

使用Word 2016 for Mac创建列表:

  1. 在列表中输入每个项目(单独的项目有一个返回).
  2. 突出显示列表中的所有项目.
  3. 从格式ribbon中选择项目符号列表或编号列表.

Mac版Word 2016主选项卡列表选项的截图

 


其他Mac资源:

谷歌

使用谷歌 docs创建一个列表:

  1. 在列表中输入每个项目(单独的项目有一个返回).
  2. 突出显示列表中的所有项目.
  3. Select 格式,然后 list.
  4. 选择列表样式.

谷歌文档工具栏中列表选项的截图


其他谷歌资源

谷歌支持: 添加项目符号列表或编号列表

谷歌文档:使用列表 (视频)

超链接

而超链接是一个有用的和简单的方式来快速引导学生到网络 资源,它们可以在目的和目的地之间构成可访问性挑战 屏幕阅读器用户不清楚其中的链接. 屏幕阅读器将识别所有 文档中的链接,并以字母顺序排列,以便于导航; 但这些链接必须是描述性的. 为了让每个学生都能访问这些链接, 遵循以下规则:

  • 将超链接的目的或功能标识为超链接名称的一部分.
  • 尽量描述,但不要太长,否则用户将不得不倾听 到整个链接,然后再移动到列表上的下一个链接.
  • 将链接集成到一个句子中——视力正常的用户会看到链接,屏幕阅读器也会看到 将识别链接.

也有一些事情要避免. 避免使用模糊或重复的文本作为超链接; 如点击这里,阅读更多,或链接. 此外,为了与存在的概念保持一致 描述性的链接不应该是url. 大多数url不仅不是描述性的,而且它们 通常都很长.

 

其他超链接资源

窗户

插入一个超链接。

  1. 复制链接网站的URL.
  2. 突出显示将作为链接文本的短语(记住遵循指南) 链接文本).
  3. Select 插入 从菜单栏中选择 链接/超链接(取决于菜单选项卡的大小).
  4. 将URL粘贴到 Address 字段,然后选择 OK.

Word超链接选项卡


其他窗户资源

Mac

插入一个超链接。

  1. 复制链接网站的URL.
  2. 突出显示将作为链接文本的短语(记住遵循指南) 链接文本).
  3. Select 插入 从菜单栏中,然后 超链接.
  4. 将URL粘贴到 Address 字段,然后选择 OK.

在Word for Mac中插入标签 在Word for Mac中插入超链接窗口


其他Mac资源

谷歌

插入一个超链接。

  1. 复制链接网站的URL.
  2. 突出显示将作为链接文本的短语(记住遵循指南) 链接文本).
  3. Select 插入 从菜单栏中,然后选择 Link...
  4. 将URL粘贴到 Link 字段,然后选择 应用.

因为它是基于网络的,所以谷歌文档也允许用户搜索合适的文档 链接,甚至对链接提出建议. 如果你不确定的话,这很方便 他们想要链接的资源,但一定要看看谷歌的建议 link! 记住,链接的站点也需要是可访问的!

为谷歌文档插入超链接标签

 

高亮显示的文本显示超链接框


其他谷歌资源

如何在谷歌文档中创建内部链接链接到外部网站.

包括图像与Alt文本

包括图像与Alt文本

为了确保文档是可访问的,向图像添加文本描述是很重要的. 这允许视力受损或失明的人使用屏幕阅读软件 去“听”形象的描述. 此外,对于正在使用 在纯文本Web浏览器或其他移动设备中,文本描述仍然提供 在不显示图像时访问信息.

 

**重要**
提醒您,需要在 WCAG 2.0、A级链接到外部网站.,和 第508节标准链接到外部网站..

 

 

在某些情况下,不需要描述性的alt文本——有时是图像 仅仅是为了视觉吸引力吗. 它纯粹是装饰性的. 在这种情况下,所有文本都是 没有必要,因为图像在帮助学生使用辅助技术方面没有价值 理解所呈现的信息. 然而,许多图像具有教学意义 目的,因此,需要一个描述来解释图像的信息 传达了. 

当为图片提供替代文本时,CCC高技术中心培训单元 提供以下指导方针:

  • 备选文本尽量简短(10字以内),但要有描述性.
  • 如果图像中有文本内容,请在替代文本中包含准确的文本 box.
  • 不要用“图像”这个词来开始描述,而是要识别图像的类型 如果图像与图像内容相关,则使用该图像.g.,摄影,绘画, 截图).
  • 如果图片非常详细,不能用几句话概括,那就考虑一下 在前面或后面的页面文本中放置有关图像的附加信息 图像.
标签内容
显示在负载上的标签 1
标题 内容
窗户

窗户

在Word for 窗户中的Alt文本

设置图像上的全部文字。

  1. 选择图像并单击鼠标右键.
  2. 选择 格式的图片 从菜单中.
  3. 在“格式图片”侧面板中选择 布局和属性 option.
  4. 点击 ALT文本,然后输入图像的简短文字描述.
    • 包括有关图像的内容和/或功能的信息.
    • 尽量将所有文本保持在7个单词以下.

在Word for 窗户中插入图像替代文本的菜单截图

Mac

Mac

在Mac版Word 2016中设置Alt文本:

  1. 选择图像; the Picture 格式 TAB将出现在功能区上.

  2. 打开 格式窗格,然后选择布局和属性图标.

  3. 打开 Alt文本 选项.

  4. 控件中输入适当的alt文本 描述 (不是标题).
    Word for Mac中图片格式选项卡的截图 格式图片窗口的截图,以添加Alt文本


其他Mac资源

Microsoft支持:使Word文档可访问链接到外部网站.

谷歌

谷歌

在谷歌文档中设置Alt文本:

  1. 选择图像.
  2. 选择 Alt文本 从 格式 menu.
  3. 控件中输入适当的alt文本 描述 (不是标题).
  4. Select OK.

在Word for 窗户中插入图像替代文本的菜单截图


其他谷歌资源

谷歌Doc Alt文本视频

谷歌 Doc Alt文本链接到外部网站.谷歌 Doc Alt文本

为了确保学生能够轻松地浏览表格,所有表格都应该格式化 为了与屏幕阅读器一起最佳使用,包括正确表示表头 row. 请记住,标题行允许屏幕阅读器跟踪它的位置 内表,提供有价值的信息,让视障学生 以便更好地理解表. 为了最大限度地提高表格的清晰度,这一点很重要 要避免嵌套表(表中的表)、拆分和合并单元格以及空 细胞.

标签内容
显示在负载上的标签 1
标题 内容
窗户

窗户

格式表

  1. 选择标题行.
  2. 右键单击该行并选择Table Properties.
  3. 选择Row选项卡.
  4. 勾选每页顶部的“重复作为标题行”.”
    菜单选项中的PC表属性.
    表属性下的PC行选项卡

 


其他窗户资源
Mac

Mac

在Word for Mac 2016中插入表:

  1. Select 插入 然后 Table 从格式栏中.
  2. 选择使用网格的列数和行数.
  3. 确保表有标题行.
    Mac下拉表插入
    表格设计选项卡

如果表格超过一页或跨两页,请确保 标题行在第二页重复. 这将使表更易于使用 包括视力正常和视力受损的学生. 要重复标题行:

  1. 将光标置于标题行,然后按Control+单击或从Word中选择“表” Menu. 
  2. 从列表或下拉菜单中选择表属性. 
  3. 选择“行”选项卡,然后选择“重复为标题行”框. Word for Mac表属性选项卡 Mac表属性

其他Mac资源

 

谷歌

谷歌

谷歌表目前无法访问,因为标题行无法划定. 


其他谷歌资源
Color

在本节中,我们提供了关于颜色Contrast的指导和建议 你的开放教育材料.

什么是色彩Contrast?

颜色Contrast包括:文本、图像和背景的色调、明度和饱和度 文件类型: .医生, .超文本标记语言, .pdf, .jpg, .gif

颜色在你的内容传递中扮演什么角色?

当文档或网页在前景元素之间没有提供足够的Contrast度时 (e.g.,文本,图像)和背景元素(例如.g.(彩色,水印图像),一些 学生阅读内容会有困难. 考虑以下问题:

1. 您是否在彩色或纹理背景上呈现基于文本或图像的内容? 如果是这样,你应该:

  • 确认你的前景内容和图片之间有足够的Contrast度 选定的背景颜色或纹理.

2. 你在你的内容中包含链接了吗? 如果是这样,你应该:

  • 确认你的网页链接的颜色与你的背景颜色不同 以及周围文字的颜色.

3. 你用过颜色来传达概念或信息吗? 如果是这样,你应该:

  • 确认你没有单独使用颜色来传达这个信息.

你这么做是为了谁?

这项工作支持以下学生:

  • 视力低下
  • 视力Contrast差
  • 你是色盲,不能区分某些颜色吗
  • 是否使用单色显示设备

你需要做什么?

Contrast

弱视和/或色盲的学生可能有阅读困难 与所选背景颜色Contrast不够的文本. If 你采用的调色板太微妙了.g.,浅色背景上的白色文字; 浅灰色背景上的中灰色文本),前景之间的Contrast 对一些学生来说,背景可能不够.

Web内容可访问性指南(WCAG 2).0)要求“视觉呈现” 文本与图像的文本的Contrast度至少为7:1.”[15] 下图展示了四个不同前景/背景颜色Contrast的例子 说明色彩Contrast度不足和充足.

 
图片显示了四个前景(文本)颜色Contrast背景颜色的例子; 只有最右边的例子展示了具有足够颜色Contrast度的组合.

 

不知道如何测试材料的色彩Contrast度?

有许多在线和可下载的工具可以帮助您评估颜色 Contrast比率. 这里有一些我们尝试过的,并且很喜欢:

  • WebAIM的 色彩Contrast检查器:这个基于web的工具允许您选择或输入要测试和提供的颜色值 你的Contrast度是“及格”还是“不及格”.
  • ACART的 Contrast检查这是一个简单的基于网络的工具,你可以用它来检查颜色Contrast 然后用灰阶来查看你的选择. 该工具还允许您保存历史记录 你测试过的颜色组合.
  • Giacomo Mazzocato的 无障碍色轮这个基于网络的工具包括几个选项来测试你的颜色选择, 包括三种色盲的模拟. 你也可以选择测试 你的Contrast度是什么,当前景和背景颜色的选择 倒.

连接的颜色

网页链接必须在视觉上区别于周围的非链接文本和文本 背景颜色. 如果你没有给你的链接加下划线(或者提供一些其他的非颜色) 提示),您必须确保在链接和之间提供足够的Contrast度 背景颜色和链接颜色与周围文本的颜色之间.

Web内容可访问性指南(WCAG 2).0)要求a:

  • 4.链接文本颜色与背景的Contrast度为5:1
  • 链接文本颜色与周围非链接文本颜色的Contrast[16]

高Contrast度模式

有些学生需要在黑暗的背景上看到浅色的文字,以便阅读 另一些则需要浅色背景上的深色文字. 视力不好的学生必须能够 在高Contrast度模式下显示内容时查看. 这可能是主观的 经验,基于个别学生的需要. 我们建议您尝试测试您的 文本和图像为基础的内容,你去使用自己的电脑上的高Contrast度模式 并根据需要进行调整.

所有内容项(如文本、图像、项目符号和表格边框)必须是可见的 在常规和高Contrast度模式下.

不知道如何在高Contrast度模式下测试你的内容? 要在此模式下测试内容的可见性,请同时打开高Contrast度 按下电脑键盘上的下列键:

左ALT +左SHIFT +打印屏幕.

要关闭高Contrast度模式,请重复此步骤.

色彩的运用

你不应该依靠颜色作为传达信息和指示的唯一手段. 如果你要表达的观点依赖于颜色来理解,你就需要编辑了 你的材料,这样在视觉上呈现的概念不会丢失给那些 你是色盲或需要高Contrast度的人吗.[17]

在本节中,我们提供了关于颜色Contrast的指导和建议 你的开放教育材料.

什么是色彩Contrast?

颜色Contrast包括:文本、图像和背景的色调、明度和饱和度 文件类型: .医生, .超文本标记语言, .pdf, .jpg, .gif

颜色在你的内容传递中扮演什么角色?

当文档或网页在前景元素之间没有提供足够的Contrast度时 (e.g.,文本,图像)和背景元素(例如.g.(彩色,水印图像),一些 学生阅读内容会有困难. 考虑以下问题:

1. 您是否在彩色或纹理背景上呈现基于文本或图像的内容? 如果是这样,你应该:

  • 确认你的前景内容和图片之间有足够的Contrast度 选定的背景颜色或纹理.

2. 你在你的内容中包含链接了吗? 如果是这样,你应该:

  • 确认你的网页链接的颜色与你的背景颜色不同 以及周围文字的颜色.

3. 你用过颜色来传达概念或信息吗? 如果是这样,你应该:

  • 确认你没有单独使用颜色来传达这个信息.

你这么做是为了谁?

这项工作支持以下学生:

  • 视力低下
  • 视力Contrast差
  • 你是色盲,不能区分某些颜色吗
  • 是否使用单色显示设备

你需要做什么?

Contrast

弱视和/或色盲的学生可能有阅读困难 与所选背景颜色Contrast不够的文本. If 你采用的调色板太微妙了.g.,浅色背景上的白色文字; 浅灰色背景上的中灰色文本),前景之间的Contrast 对一些学生来说,背景可能不够.

Web内容可访问性指南(WCAG 2).0)要求“视觉呈现” 文本与图像的文本的Contrast度至少为7:1.”[15] 下图展示了四个不同前景/背景颜色Contrast的例子 说明色彩Contrast度不足和充足.

 
图片显示了四个前景(文本)颜色Contrast背景颜色的例子; 只有最右边的例子展示了具有足够颜色Contrast度的组合.

 

不知道如何测试材料的色彩Contrast度?

有许多在线和可下载的工具可以帮助您评估颜色 Contrast比率. 这里有一些我们尝试过的,并且很喜欢:

  • WebAIM的 色彩Contrast检查器:这个基于web的工具允许您选择或输入要测试和提供的颜色值 你的Contrast度是“及格”还是“不及格”.
  • ACART的 Contrast检查这是一个简单的基于网络的工具,你可以用它来检查颜色Contrast 然后用灰阶来查看你的选择. 该工具还允许您保存历史记录 你测试过的颜色组合.
  • Giacomo Mazzocato的 无障碍色轮这个基于网络的工具包括几个选项来测试你的颜色选择, 包括三种色盲的模拟. 你也可以选择测试 你的Contrast度是什么,当前景和背景颜色的选择 倒.

连接的颜色

网页链接必须在视觉上区别于周围的非链接文本和文本 背景颜色. 如果你没有给你的链接加下划线(或者提供一些其他的非颜色) 提示),您必须确保在链接和之间提供足够的Contrast度 背景颜色和链接颜色与周围文本的颜色之间.

Web内容可访问性指南(WCAG 2).0)要求a:

  • 4.链接文本颜色与背景的Contrast度为5:1
  • 链接文本颜色与周围非链接文本颜色的Contrast[16]

高Contrast度模式

有些学生需要在黑暗的背景上看到浅色的文字,以便阅读 另一些则需要浅色背景上的深色文字. 视力不好的学生必须能够 在高Contrast度模式下显示内容时查看. 这可能是主观的 经验,基于个别学生的需要. 我们建议您尝试测试您的 文本和图像为基础的内容,你去使用自己的电脑上的高Contrast度模式 并根据需要进行调整.

所有内容项(如文本、图像、项目符号和表格边框)必须是可见的 在常规和高Contrast度模式下.

不知道如何在高Contrast度模式下测试你的内容? 要在此模式下测试内容的可见性,请同时打开高Contrast度 按下电脑键盘上的下列键:

左ALT +左SHIFT +打印屏幕.

要关闭高Contrast度模式,请重复此步骤.

色彩的运用

你不应该依靠颜色作为传达信息和指示的唯一手段. 如果你要表达的观点依赖于颜色来理解,你就需要编辑了 你的材料,这样在视觉上呈现的概念不会丢失给那些 你是色盲或需要高Contrast度的人吗.[17]

在本节中,我们提供了关于颜色Contrast的指导和建议 你的开放教育材料.

什么是色彩Contrast?

颜色Contrast包括:文本、图像和背景的色调、明度和饱和度 文件类型: .医生, .超文本标记语言, .pdf, .jpg, .gif

颜色在你的内容传递中扮演什么角色?

当文档或网页在前景元素之间没有提供足够的Contrast度时 (e.g.,文本,图像)和背景元素(例如.g.(彩色,水印图像),一些 学生阅读内容会有困难. 考虑以下问题:

1. 您是否在彩色或纹理背景上呈现基于文本或图像的内容? 如果是这样,你应该:

  • 确认你的前景内容和图片之间有足够的Contrast度 选定的背景颜色或纹理.

2. 你在你的内容中包含链接了吗? 如果是这样,你应该:

  • 确认你的网页链接的颜色与你的背景颜色不同 以及周围文字的颜色.

3. 你用过颜色来传达概念或信息吗? 如果是这样,你应该:

  • 确认你没有单独使用颜色来传达这个信息.

你这么做是为了谁?

这项工作支持以下学生:

  • 视力低下
  • 视力Contrast差
  • 你是色盲,不能区分某些颜色吗
  • 是否使用单色显示设备

你需要做什么?

Contrast

弱视和/或色盲的学生可能有阅读困难 与所选背景颜色Contrast不够的文本. If 你采用的调色板太微妙了.g.,浅色背景上的白色文字; 浅灰色背景上的中灰色文本),前景之间的Contrast 对一些学生来说,背景可能不够.

Web内容可访问性指南(WCAG 2).0)要求“视觉呈现” 文本与图像的文本的Contrast度至少为7:1.”[15] 下图展示了四个不同前景/背景颜色Contrast的例子 说明色彩Contrast度不足和充足.

 
图片显示了四个前景(文本)颜色Contrast背景颜色的例子; 只有最右边的例子展示了具有足够颜色Contrast度的组合.

 

不知道如何测试材料的色彩Contrast度?

有许多在线和可下载的工具可以帮助您评估颜色 Contrast比率. 这里有一些我们尝试过的,并且很喜欢:

  • WebAIM的 色彩Contrast检查器:这个基于web的工具允许您选择或输入要测试和提供的颜色值 你的Contrast度是“及格”还是“不及格”.
  • ACART的 Contrast检查这是一个简单的基于网络的工具,你可以用它来检查颜色Contrast 然后用灰阶来查看你的选择. 该工具还允许您保存历史记录 你测试过的颜色组合.
  • Giacomo Mazzocato的 无障碍色轮这个基于网络的工具包括几个选项来测试你的颜色选择, 包括三种色盲的模拟. 你也可以选择测试 你的Contrast度是什么,当前景和背景颜色的选择 倒.

连接的颜色

网页链接必须在视觉上区别于周围的非链接文本和文本 背景颜色. 如果你没有给你的链接加下划线(或者提供一些其他的非颜色) 提示),您必须确保在链接和之间提供足够的Contrast度 背景颜色和链接颜色与周围文本的颜色之间.

Web内容可访问性指南(WCAG 2).0)要求a:

  • 4.链接文本颜色与背景的Contrast度为5:1
  • 链接文本颜色与周围非链接文本颜色的Contrast[16]

高Contrast度模式

有些学生需要在黑暗的背景上看到浅色的文字,以便阅读 另一些则需要浅色背景上的深色文字. 视力不好的学生必须能够 在高Contrast度模式下显示内容时查看. 这可能是主观的 经验,基于个别学生的需要. 我们建议您尝试测试您的 文本和图像为基础的内容,你去使用自己的电脑上的高Contrast度模式 并根据需要进行调整.

所有内容项(如文本、图像、项目符号和表格边框)必须是可见的 在常规和高Contrast度模式下.

不知道如何在高Contrast度模式下测试你的内容? 要在此模式下测试内容的可见性,请同时打开高Contrast度 按下电脑键盘上的下列键:

左ALT +左SHIFT +打印屏幕.

要关闭高Contrast度模式,请重复此步骤.

色彩的运用

你不应该依靠颜色作为传达信息和指示的唯一手段. 如果你要表达的观点依赖于颜色来理解,你就需要编辑了 你的材料,这样在视觉上呈现的概念不会丢失给那些 你是色盲或需要高Contrast度的人吗.[17]

在本节中,我们提供了关于颜色Contrast的指导和建议 你的开放教育材料.

什么是色彩Contrast?

颜色Contrast包括:文本、图像和背景的色调、明度和饱和度 文件类型: .医生, .超文本标记语言, .pdf, .jpg, .gif

颜色在你的内容传递中扮演什么角色?

当文档或网页在前景元素之间没有提供足够的Contrast度时 (e.g.,文本,图像)和背景元素(例如.g.(彩色,水印图像),一些 学生阅读内容会有困难. 考虑以下问题:

1. 您是否在彩色或纹理背景上呈现基于文本或图像的内容? 如果是这样,你应该:

  • 确认你的前景内容和图片之间有足够的Contrast度 选定的背景颜色或纹理.

2. 你在你的内容中包含链接了吗? 如果是这样,你应该:

  • 确认你的网页链接的颜色与你的背景颜色不同 以及周围文字的颜色.

3. 你用过颜色来传达概念或信息吗? 如果是这样,你应该:

  • 确认你没有单独使用颜色来传达这个信息.

你这么做是为了谁?

这项工作支持以下学生:

  • 视力低下
  • 视力Contrast差
  • 你是色盲,不能区分某些颜色吗
  • 是否使用单色显示设备

你需要做什么?

Contrast

弱视和/或色盲的学生可能有阅读困难 与所选背景颜色Contrast不够的文本. If 你采用的调色板太微妙了.g.,浅色背景上的白色文字; 浅灰色背景上的中灰色文本),前景之间的Contrast 对一些学生来说,背景可能不够.

Web内容可访问性指南(WCAG 2).0)要求“视觉呈现” 文本与图像的文本的Contrast度至少为7:1.”[15] 下图展示了四个不同前景/背景颜色Contrast的例子 说明色彩Contrast度不足和充足.

 
图片显示了四个前景(文本)颜色Contrast背景颜色的例子; 只有最右边的例子展示了具有足够颜色Contrast度的组合.

 

不知道如何测试材料的色彩Contrast度?

有许多在线和可下载的工具可以帮助您评估颜色 Contrast比率. 这里有一些我们尝试过的,并且很喜欢:

  • WebAIM的 色彩Contrast检查器:这个基于web的工具允许您选择或输入要测试和提供的颜色值 你的Contrast度是“及格”还是“不及格”.
  • ACART的 Contrast检查这是一个简单的基于网络的工具,你可以用它来检查颜色Contrast 然后用灰阶来查看你的选择. 该工具还允许您保存历史记录 你测试过的颜色组合.
  • Giacomo Mazzocato的 无障碍色轮这个基于网络的工具包括几个选项来测试你的颜色选择, 包括三种色盲的模拟. 你也可以选择测试 你的Contrast度是什么,当前景和背景颜色的选择 倒.

连接的颜色

网页链接必须在视觉上区别于周围的非链接文本和文本 背景颜色. 如果你没有给你的链接加下划线(或者提供一些其他的非颜色) 提示),您必须确保在链接和之间提供足够的Contrast度 背景颜色和链接颜色与周围文本的颜色之间.

Web内容可访问性指南(WCAG 2).0)要求a:

  • 4.链接文本颜色与背景的Contrast度为5:1
  • 链接文本颜色与周围非链接文本颜色的Contrast[16]

高Contrast度模式

有些学生需要在黑暗的背景上看到浅色的文字,以便阅读 另一些则需要浅色背景上的深色文字. 视力不好的学生必须能够 在高Contrast度模式下显示内容时查看. 这可能是主观的 经验,基于个别学生的需要. 我们建议您尝试测试您的 文本和图像为基础的内容,你去使用自己的电脑上的高Contrast度模式 并根据需要进行调整.

所有内容项(如文本、图像、项目符号和表格边框)必须是可见的 在常规和高Contrast度模式下.

不知道如何在高Contrast度模式下测试你的内容? 要在此模式下测试内容的可见性,请同时打开高Contrast度 按下电脑键盘上的下列键:

左ALT +左SHIFT +打印屏幕.

要关闭高Contrast度模式,请重复此步骤.

色彩的运用

你不应该依靠颜色作为传达信息和指示的唯一手段. 如果你要表达的观点依赖于颜色来理解,你就需要编辑了 你的材料,这样在视觉上呈现的概念不会丢失给那些 你是色盲或需要高Contrast度的人吗.[17]

Color

当涉及到颜色时,有一些非常重要的考虑因素:Contrast, 色盲和色彩处理问题.

在创建文档时,一定要注意Contrast. 它通常是最好的 可读性,不要在繁忙的图形上覆盖文本. 类似地,当使用 彩色背景,确保文本与背景形成强烈Contrast. 不要在浅色背景上使用浅色文本(例如白色背景上的黄色文本) 深色背景上的深色文本(例如深蓝色背景上的黑色文本).

浅背景上的浅字体颜色易读性差
深色背景上的深色字体易读性差

 

还要记住,很大一部分人都有某种程度的色盲 (通常是红色/绿色). 如果绿色的文字为正确答案,红色的文字为 不正确的答案,有些学生可能会完全迷失方向. 使用颜色是可以的 一个加固,只要颜色不是唯一的指标. 例如,有 “正确”用绿色,“不正确”用红色.
用颜色表示信息的例子

对于有视力问题的学生来说,包括视觉处理问题, 以某种方式受颜色影响. 一个完全可访问的文档的好处 学生用来阅读文件的程序可以改变颜色吗 必要的.

颜色Contrast

如果可能,请使用文本颜色的默认设置. 如果使用自定义颜色 标题或其他文本标记,通过免费的在线颜色Contrast检查Contrast度 tool. 为了测试颜色,了解颜色是很重要的 十六进制代码链接到外部网站. 所使用的颜色. 一些推荐的颜色Contrast工具有:

在Word文档中检查Contrast度的说明:

Microsoft Word中的Contrast链接到外部网站.

 

 

归因:

采用CVC-OEI:创建可访问的课程内容 海伦·格雷夫斯. 本作品在a 知识共享协议4.0国际许可证链接到外部网站.

第6单元:可访问性的延续——文档设计 苏珊娜·德拉汉蒂著. 本作品在a 知识共享公共领域标志.0许可证链接到外部网站.

 

 

访问PDF的

访问pdf文件

创建可访问文档的道路充满了坎坷. 一个特别的问题 学生打开文件所需的软件是什么——如果他们有Word的话 文档,他们将需要Word来阅读它. 此外,如果他们的操作系统或 Word的版本与文档创建者的版本不相同,不能保证 文档在他们看来和在创建文件的人看来是一样的.

 

转换Word, 谷歌文档, PowerPoint和谷歌 Slides文档(Excel和谷歌 表格(也是)转换为PDF消除了软件问题. 有了pdf文件,学生可以下载 免费的 Adobe Reader链接到外部网站.,允许普遍访问课程材料,并且,文档将看起来准确 和设计时一样. 

 

然而,这里有一个警告:

 

PDF只能像原始文档一样可访问.

 

换句话说,可访问的PDF是由可访问的Office或谷歌文档构建的. 如果原始文件有可访问性问题,则该问题将在 PDF格式. 此外,有时在文件存在时还会出现新的可访问性问题 呈现为PDF格式,所以即使Word文档100%可访问, PDF版本可能不是!

 

经常检查PDF的可访问性是很重要的,如果需要的话,修复 的无障碍问题 adobeacrobatpro链接到外部网站..

 

本页上的以下选项卡将提供如何转换Office for 窗户的指导 将Office for Mac和谷歌 docs转换为pdf文件. 在 下一节我们将介绍使用adobeacrobatpro.

 

标签内容
显示在负载上的标签 1
标题 内容
窗户

窗户

微软产品的美妙之处在于它们的一致性. 是否转换Word 文档或ppt,这个过程是非常相似的:

  1. 确保原始“源”文件(来自Word或PPT)是可访问的.
  2. Select 文件,然后 另存为.
  3. 选择保存文件的位置.
  4. Select PDF 随着 另存为 type.
  5. Select 选项,然后在方框中勾选 用于可访问性的文档结构标记. 
  6. Select OK.

检查最终的PDF也没有坏处. 在下一节中,我们将了解更多 评估pdf的可访问性.


其他窗户资源

Microsoft Office教程: 保存或转换为PDF链接到外部网站.

Mac

Mac

记住,要完成一个可访问的PDF,从一个可访问的PDF开始是很重要的 file. 此外,如果使用Mac上的任何版本的Microsoft Word 到2016年,无法将文档从Word或PPT转换为可访问的PDF. The 文档将需要导入到另一个工具(谷歌 docs或OpenOffice) 实例),以便创建可访问的PDF. 因此,我们强烈建议所有Mac用户升级到Mac-2016的MS Office

**重要信息**

我们想在这里说清楚. 2016年以前为Mac设计的MS Office产品 将允许文档保存为pdf,但是,这些pdf无法访问.

这是因为有两种类型的pdf——纯图像和带标签的. 仅pdf文档 是否有像图片一样的原始文件. 看起来是一样的,但文字实际上 已更改为图像. 文字无法编辑,更重要的是,屏幕无法编辑 阅读器不会看到文本——相反,它会检测到单个图像. 从本质上讲, 原始文件的照片.

另一方面,带标签的pdf是文本文档,“标签”保留了重要的内容 格式化信息对屏幕阅读器非常有用. 

在2016年之前的MS Office for Mac产品中,转换过程变成了 将原始文档转换成只有图像的PDF格式——没有文本,没有标签,只有图像. 它看起来 很好,但这对使用辅助技术的学生来说是没有用的.

因此,以下是如何确保将MS Office for Mac文档转换为可访问的pdf文件:

  1. 检查Office的版本以确保它是2016版本(选择 Word 从菜单栏中,然后 关于).
  2. Select 另存为 从 文件 菜单,命名文件,然后选择要保存文件的文件夹.
  3. For 文件格式,选择 PDF.
  4. Select 最适合电子分发和可访问性.
  5. Select 出口.

检查最终的PDF也没有坏处. 在下一节中,我们将了解更多 评估pdf的可访问性.

Microsoft Word for Mac许可证 Word导出格式

Mac保存对话框的截图显示PDF文件类型.

谷歌

谷歌

将谷歌文档转换为PDF格式:

  1. Select 下载 中的下拉列表中 文件 menu.
  2. Select PDF文件(.pdf) 从下拉列表中.
  3. 将转换后的文档保存到计算机.

“下载为”位于文件选项卡下

 PDF的改造

改造pdf文档

多年来,关于PDF格式一直流传着一个不幸的神话 神奇地使文档可访问. 然而,现在是时候直面这些骷髅了 在壁橱里,看看那些旧的pdf文件. 

永远不要认为PDF是可以访问的,即使它看起来非常专业.

 

查看pdf文件

检查PDF的最佳方法是使用adobeacrobatpro. 如果大量使用pdf, 投资这款软件对于拥有OER专家的校园来说是无价之宝. adobeacrobat有许多工具,包括辅助功能检查器. 运行辅助功能 报告,在adobeacrobatpro中打开PDF:

  1. 选择 可访问性 tool.
  2. Select 完整的报告 从菜单栏.
  3. Select 开始检查.

可访问性报告将在左栏打开. 根据反馈进行纠正 任何错误. 

 

改造

改进pdf的方法将取决于OER专家是否拥有 已转换为PDF的原始源文件. 如果他们有原始文件,那就 他们将从哪里开始:

  1. 删除无法访问的PDF.
  2. 相应地修改原始源文件和格式.
  3. 如果选择修改原始源文件,在修复任何可访问性问题后, 将文件转换为PDF格式.

如果这不是原始的源文件,需要adobeacrobatpro才能使用该文件:

  1. 在adobeacrobatpro中打开该文件.
  2. 运行辅助功能检查.
  3. 按照Adobe生成的提示来解决任何问题.

使用Adobe需要练习. 他们有一些很棒的网络教程,包括 在附加资源中. 


额外的资源