数字包容和社会影响是我们工作的重要组成部分 Nexer, 除了一些数字项目, 我们做的活动和用户研究工作, we thought it would be useful to share some technical advice and resources to help people get started with accessibility testing. It's 全球无障碍宣传日 5月19日星期四, so we put together the following eight steps for testing the accessibility of the things you're building.
为什么这很重要??
Sadly, many people see web accessibility as specialist or a bit of a ‘nice to have’. 我们都听到过同样的评论:
“有多少人知道呢? that 问题确实有影响?——黛布拉，42岁.
“我觉得挺好的。”——罗斯，28岁.
“我不认为这是个问题。”——史蒂夫，32岁.
当我们谈论这个话题时，我们经常想到一些极端的例子. 我们考虑的是那些手脚不灵活的人, 我们想到了那些生活在视力衰退中的人, 我们想到的是(对不起，妈妈)老年人. It is of course good that we think of and include these people but it’s also very easy to forget that improving a site’s accessibility will improve its usability for everyone.
How often do you use the tab key to navigate quickly to the password box after typing your username? How often do you struggle to read something because the slightest glimmer of sun on your phone makes you ramp up your brightness to full whack just to be able to read some basic text? How often do you miss that tiny little cross in the top corner of the pop-up window because it’s just TOO DAMN SMALL?!
So yeah; web accessibility does affect you, whether you realise it or not.
“Great story mate, but I’ve just paid 100k for a website and it’s not accessible.”
别担心，我是来帮忙的.
At Nexer we understand that accessibility can sometimes be a hard sell, so we have built a simple testing checklist to help make the biggest impact in the shortest time. 我们把测试时间限定在两个小时内, so that you have an easier job when trying to sell the idea to shareholders or senior management (or whoever controls the cash).
步骤1 -选择样本
In order to get the most out of the next two hours you’ll want to select a sample area of the site to run the tests against. 始终尝试并考虑业务关键路径. Maybe consider using something like Google Analytics to find out which are the highest traffic pages. 典型的例子可能是:
- Homepage
- 全球最大的博彩平台
- 内容页
Don’t be tempted to select too many pages because you’ll end up either running out of time or compromising on quality on the pages you pick.
步骤2 -运行自动化工具
Automated tools will identify a wide range of issues with just the click of a button. We recommend using a selection of automated tools to get as much coverage as possible. The WAVE可达性检查器, the ecker辅助工具 还有一套 来自SiteImprove的优化工具 有几个方法能给你带来真正的好结果吗.
在工作中, we invite users with ranging abilities and digital confidence levels into co-design, 原型和可用性测试环节, but there is real value in combining manual testing with automated tools.
步骤3 -启用文本大小调整
Many users who are visually impaired don’t rely on screen reader technology. Instead, they may enlarge the text size on web pages to makes the text easier to read. 为了验证这一点，我们使用了两种不同的方法.
- 使用浏览器设置调整大小:使用内置的浏览器设置, 用户应该能够在页面上调整文本的大小. This is used by most modern browsers and will be easily found within the browser settings
- Zoom text only: This Chrome extension is a popular accessibility add-on and will force the text to resize. 我们测试了200%的变焦 网页内容易读性指引.
步骤4 -使用标签索引
对于不能或不喜欢使用鼠标的用户, 谁转而依靠TAB导航来使用网站, we need to make sure that the tab index is logical and that the page is fully navigable using only the tab and the enter keys.
In order for users to do this successfully, some of the things we look out for are:
- Logical ordering (top to bottom of pages, left to right of page layouts)
- Maintaining good hover states so that users know where they are on a page
- 不要错过或跳过任何关键部分
- 绕过重复块的能力.g. 每个页面的标题菜单相同)
步骤5 -总是添加替代文本
应为所有图像提供描述性的“alt文本”. It should be relevant and functional in relation to the content or purpose of the page. This can be tested by using the in-built browser tools or simply by hovering over images whilst running a screen reader. 如果没有识别或描述没有帮助, 这就不符合无障碍标准. You are excluding users from the experience you intended when you added illustrative images.
第六步-检查颜色对比
整个网站的文字需要有足够的颜色对比度. 该比率将根据文本的大小而变化. 尽管大多数自动化工具会 attempt to identify colour contrast problems, in our experience a lot of instances are missed. Colour contrast should always be included in your manual testing for this reason. Simply take a sample of the colour codes in question and run them through a service such as WebAim的对比检查器，以确定它们是否可访问.
步骤7 -正确构建表单
Users should be able to able to complete and submit any form using a screen reader and the tab key. Instructions for forms that are read by screen readers should be clear and give context to the user. 应该标识必选/可选字段, 错误信息应该是清晰的, 指导性的，并把重点放在页面上. The easiest way to complete this test is to turn on the screen reader and complete the form without looking.
步骤8 -考虑弹出窗口和模态窗口
Obviously, this is not always going to be relevant to all website designs but pop-ups or modal windows can be one of the most frustrating accessibility issues on your site. 当模态窗口打开时, 用户应该能够通过TAB键浏览相关元素, but they should always be locked into the modal and should not interact with the parent page.
这就是你的8个步骤.
总之
这被设计成一个简短的审计. 这并不能帮助你找到网站的所有可访问性问题, 但它会在很短的时间内产生很大的影响. 话虽如此，你显然需要意识到结果. 以及我们自己设计和开发数字产品, 我们提供会谈, 培训和测试，以帮助您构建更好的产品. If you’d like us to set something up for the 全球最大的博彩平台的数字 community to help you improve your knowledge and skills in web accessibility, 请联系: hello@nexerdigital.com
