网络 & 社交媒体可访问性

1. 去 Chrome网络商店， http://chrome.google.com/webstore. 搜索和添加 ‘无障碍开发人员工具从谷歌辅助功能到你的浏览器.
2. 导航 到你要评估的网站.
3. 点击 “F11’ 键,或 “Ctrl + Shift + I”，打开Chrome的'开发工具的 屏幕右侧的TAB键.
4. 点击 的 arrows on 的 top right of 的 tab to open a dropdown. Select “审计的 列表中的选项. 这将打开审计菜单.
5. 检查 “可访问性的 框中审计的
   • Be sure to uncheck any o的r boxes and differentiate between mobile and desktop sites. 这将提供最好的结果.
6. 点击 “审计运行的 按钮，并让审计完成.
   • Once 的 process is complete, 的re will be an accessibility report displayed in 的 sidebar. This report 提供s a score with recommendations for correction.
7. 审查 报告和， 如果可能的话, 提供 对问题的补救.

The following steps for assessing web content requires an intermediate skill level for web browser navigation as well as some basic/intermediate understanding of web design or HTML. If you are not comfortable with 的se, skip to Questions 5 and 6 for less extensive checks/processes.

To assess online content in any browser, you will need open 的 检查窗口 网页按下 F12 or CTRL + Shift + C (Windows)或 命令(⌘) +选项+ C (Mac)，而一个是你想要检查的页面. Look at 的 window 到 right/bottom to answer 的 following questions:

Note: 的 elements are presented in an expandable list; 点击 any right facing arrow to expand that section of 的 检查窗口.

1. 它们是HTML格式的吗?
   1. Scroll 到 top of 的 inspect window: Do you see “” in 的 top left.
      1. HTML can be read by screen readers while o的r formats cannot.
2. Are 的re headings and bodies that create organization and identify 的 website/page?
   1. 1. Visible headings should be labeled with
      2. 标题应该保持一个逻辑层次.
         1. Headings are just as important on a web page as 的y are on a document. They 提供 quick information about 的 content on 的 page.
      3. Do you see “”?
         1. Accessible web pages should have a body where 的 content exists.
      4. 网页是否划分为逻辑字段?
         1. When you open 的 body, do you see “
            ” along 的 left of your screen?

            1. Each
               tag along 的 left should have a corresponding tag at 的 bottom of 的 section.
         2. When you 徘徊 over any “
            ” does it highlight a logical section of 的 screen?

            1. 这一页是否划分为有意义的原因? 有些地区可能有多个分区.
         3. 这些部分列在 检查窗口 以合乎逻辑的方式?
            1. The page should be divided in a way that makes sense. The sections on top and 到 left should appear first.
3. 是否所有图像都有替代文本?
   1. 点击 的 检查窗口 然后 徘徊 over an image; does 的 highlighted portion starting with “
4. 你能按一下吗? 选项卡 循环浏览链接?
   1. 你能按一下吗? Shift + 选项卡键 通过链接返回?
5. 你能用键盘浏览任何多媒体吗?
   1. 你能使用箭头在视频中向前或向后跳吗?
   2. 你能用空格键停止和开始吗?

检查ing 的 accessibility of websites and linked content is integral to ensuring full course accessibility for our students and 的 community. There are many ways to determine 的 accessibility of webpages; a good tool is 的 波浪评估工具, 可以添加到谷歌的Chrome浏览器中吗. Wave 提供s a platform to view and verify website accessibility and 提供s information and strategies for areas of concern.

1. Go 到 Chrome网络商店， http://chrome.google.com/webstore.
2. 搜索和添加 波浪评估工具 你的Chrome浏览器.
   1. Once it has been added, an icon will appear in 的 top right corner of 的 browser.
3. Go 到 website whose accessibility you are trying to determine.
4. 点击 打开的图标 波的工具 然后运行可访问性检查.
   1. 波图标:
5. A window will pop-up on 的 left side of 的 screen with a summary of 的 accessibility review.
   1. 摘要将以优先顺序显示
      包含错误、警报、错误和结构的列表
   2. 摘要面板:
6. 点击 的 Details 图标，并查看完整的报告. This report 提供s a list of issues with documentation explaining 的 need for correction.
7. 审查 这份报告，如果可能的话， 纠正 的问题.

You now know how to use 的 波浪评估工具 to determine website accessibility

To completely assess online content for accessibility, you need to consider color contrasts of text and background colors. There should also be clear contrasts between different sections of a website. This guide will explain how to download and use 的 Colour Contrast 检查er extension for Google Chrome.

下载:

1. Go 到 谷歌商店
2. 搜索 选择“颜色对比检查器”
   1. Note: be sure to use 的 British spelling to download 的 correct extension.
3. 点击 添加到Chrome (屏幕右侧的蓝色按钮).

使用对比度检查器:

1. 点击 的 yellow button in 的 upper right-hand corner of your browser; this will open a half window where you can complete 的 following steps.
2. 点击 的 点眼药器图标 under ‘Background Colour’; a circle will appear on 的 screen.
3. 位置 的 red square over a pixel containing 的 background color.
4. 单击以选择颜色.
5. 重复 步骤3 使用文本/前景色.

了解结果:

1. On 的 left-hand side of 的 extension window 的re will be a number; this represents 的 contrast ratio to 1.
   1. Black on white is 21:1; white on white is 1:1.
   2. The ratio does not change if 的 colors are inversed.
2. Below 的 number are four boxes; 的se represent 的 different standards and if 的 contrast meets those standards.
3. AA is 的 standard used by 的 ADA; 的 minimum contrast for this standard is 4.5:1
4. AAA is a more rigorous standard used in o的r parts of 的 world; 的 minimum AAA contrast is 7:1