Digital inclusion and social impact are a major part of our work at 一节, so alongside some of the digital projects, campaigns and user research work we do, 我们认为分享一些技术建议和资源来帮助人们开始无障碍测试是很有用的. 这是 Global Accessibility Awareness Day on Thursday 19th May, 因此，我们将以下8个步骤放在一起，用于测试您正在构建的内容的可访问性.
Why does this matter?
可悲的是，许多人认为网页可访问性是专业的，或者有点“有就好”。. We’ve all heard the same comments:
“How many people does 那 issue really effect though?” - Debra, 42.
“Looks fine to me” - Ross, 28.
“I don’t think 那 will ever be a problem” - Steve, 32.
When we talk about this topic we often think of the extreme cases. We think about the people with dexterity issues, we think about the people living with sight loss, we think about the (sorry mum) older people. 考虑到这些人当然是件好事，但我们也很容易忘记，提高网站的可访问性也会提高网站对所有人的可用性.
在输入用户名后，您是否经常使用tab键快速导航到密码框? 你有多少次因为手机上最微弱的阳光让你把亮度调到最大，只是为了能读一些基本的文字而难以阅读东西? 有多少次你会因为弹出窗口的顶角上那个小十字太小而错过它?!
So yeah; web accessibility does affect you, whether you realise it or not.
“很棒的故事，伙计，但我刚刚花了10万美元买了一个网站，却无法访问.”
Well don’t worry, I’m here to help.
在一节，我们明白，可访问性有时可能是一个硬性推销, 因此，我们建立了一个简单的测试清单，以帮助在最短的时间内产生最大的影响. We’ve timeboxed this testing to two hours, 这样，当你试图向股东或高级管理层(或任何控制现金的人)推销你的想法时，你的工作就更容易了。.
Step 1 – Selecting a sample
为了充分利用接下来的两个小时，您需要选择站点的一个示例区域来运行测试. Always try and consider the business-critical paths. 也许可以考虑使用谷歌分析之类的工具来找出流量最高的页面. Typical examples might be:
- 主页
- 全球最大的博彩平台
- Content Page
不要试图选择太多的页面，因为你最终要么会耗尽时间，要么会影响你选择的页面的质量.
Step 2 – Run automated tools
自动化工具只需点击一个按钮就能识别出各种各样的问题. 我们建议使用一些自动化的工具来获得尽可能多的覆盖率. 的 WAVE accessibility checker, AChecker accessibility tool and the suite of optimisation tools from SiteImprove are just a few 那 will give you some really good results.
In our work, 我们邀请具有广泛能力和数字信心水平的用户参与共同设计, prototyping and usability testing sessions, 但是将手工测试与自动化工具结合起来是有真正价值的.
Step 3 – Enable text re-sizing
许多视障用户并不依赖屏幕阅读器技术. 相反，他们可能会放大网页上的文本大小，使文本更容易阅读. To test this we use two different methods.
- Resize using browser settings: Using the built-in browser settings, user should be able to resize the text across the page. 这被大多数现代浏览器使用，并且很容易在浏览器设置中找到
- 缩放文本:这个Chrome扩展是一个流行的辅助功能附加组件，将强制文本调整大小. We test this up to 200% zoom as per the Web Content Accessibility Guidelines.
Step 4 – Use tab indexing
For users who can’t or prefer not to use a mouse, who instead rely on tab navigation to use the site, 我们需要确保TAB索引是合乎逻辑的，并且仅使用TAB和enter键就可以完全导航页面.
为了让用户能够成功地做到这一点，我们需要注意以下几点:
- 逻辑排序(从上到下，从左到右的页面布局)
- 保持良好的悬停状态，以便用户知道他们在页面上的位置
- Not missing out or skipping over any key sections
- 的 ability to bypass repeating blocks (e.g. the same header menu on each page)
Step 5 – Always add alternative text
Descriptive “alt text” should be provided for all images. 它应该与页面的内容或目的相关并具有功能性. 这可以通过使用内置的浏览器工具进行测试，或者在运行屏幕阅读器时将鼠标悬停在图像上. If nothing is identified or the description is unhelpful,n this doesn’t meet the accessibility standards. 当您添加说明性图像时，您将用户排除在您想要的体验之外.
Step 6 – Check the colour contrast
Text across the site needs to have a sufficient colour contrast ratio. 的 ratio will change depending on the size of the text. Although most automated tools will 尝试 为了识别色彩对比问题，在我们的经验中有很多实例被遗漏了. 由于这个原因，颜色对比应该始终包含在您的手动测试中. 简单地取一个有问题的颜色代码样本，并通过诸如 WebAim’s contrast checker to find out if they are accessible.
Step 7 – Build forms properly
用户应该能够使用屏幕阅读器和tab键完成和提交任何表单. 屏幕阅读器读取的表单说明应该清晰，并向用户提供上下文. Mandatory/optional fields should be identified, and error messages should be clear, instructional and bring focus on the page. 完成此测试的最简单方法是打开屏幕阅读器，不看就完成表单.
Step 8 – Think about pop-ups and modal windows
很明显, 这并不总是与所有的网站设计相关，但弹出窗口或模态窗口可能是你网站上最令人沮丧的可访问性问题之一. When a modal window is open, user should be able to tab through the relevant elements, 但它们应该始终锁定在模态中，不应该与父页面交互.
So,re are your 8 steps.
In conclusion
This is designed to be a short audit. This won’t help you find all the accessibility issues with your site, but it will make a big difference in a really short time. With 那 said, you obviously need to be aware of the outcome. As well as designing and developing digital things ourselves, we provide talks, training and testing to help you build better products. 如果你想让我们为全球最大的博彩平台数字社区设置一些东西来帮助你提高你在网页可访问性方面的知识和技能, please get in touch at: hello@nexerdigital.com
