跳到主要内容

如何建立一个领先的慈善机构的无障碍网站

RNIB是一家领先的慈善机构,为英国近200万患有视力丧失的人提供信息和支持。数字代理先例赢得了为慈善机构创建新网站的招标。该团队采用“形式跟踪功能”的方法来创建一个高度可访问,简化的网站,以满足不同程度视力障碍的用户。我们与团队进行了交谈,了解他们是如何做到的......

原始简报是什么?

亚当埃勒斯顿:在Drupal中设计和构建响应式网站,提供最高标准的可访问性,使RNIB能够提供更多在线服务和更好的在线体验。

本恩皮尔森:我们面临的主要挑战之一是我们需要采用并实现RNIB的冲浪权标准:在三个级别(A,AA和AAA)中采用WCAG的最佳元素,同时解决网络浏览中与视觉相关的其他可访问性问题。我们为此感到兴奋,因为它提供了一个突破界限的机会响应式网页设计改善视力丧失者的网络体验。

你是怎么开始这个项目的?

埃德理查兹:大多数网站访问者都有不同程度的视力相关困难,所以在策略和方面UX我们与无障碍顾问LéonieWatson合作的项目阶段。这使我们能够制定要求,测试声明和实施培训。

BP:深入了解用户如何与网站互动是一个关键的起点。这使我们能够快速识别特定的可访问性问题,并从那里我们集思广益的想法和可能的解决方案。我们发现盲人电影评论家汤米爱迪生的YouTube视频是一个很好的资源。

A modular approach was formulated early on, while the Precedent team was sketching out ideas

早期制定了模块化方法,而先验团队正在草拟想法

你是如何处理原型设计的?

ER:一旦我们制定了模块化方法,我们就能够为所有模块制作原型。堆叠模块使其非常高效,甚至使我们能够对移动设备,平板电脑和桌面视图进行原型制作,这些视图通过将所有模块生成为智能对象来体现我们在Photoshop中的工作方式。

BP:然后我们创建了一个交互式原型。最初我们使用它来测试响应模块,但它随后被用作测试可访问性的交互式样式指南。最后,它成为Drupal集成的参考。

AE:在Drupal集成期间,交互式样式指南非常有效,因为它使我们能够在Drupal之外快速实现和测试想法。这也是保持HTML一致并清理Drupal HTML的一个很好的参考。

和我们谈谈颜色。你是怎么选择调色板的?

ER:为了获得最佳的可访问性,您必须具有对比色 - 但我们不想复制旧网站,它在任何地方都使用纯色。我们使用品牌颜色制作了一个调色板,并使用了颜色对比工具来满足WCAG对比度。

排版怎么样 - 你在这里做出了任何聪明的决定吗?

BP:排版是RNIB品牌更广泛变化的一部分好机构,但确保我们在WCAG色彩对比度公式内是至关重要的。这都是通过数学公式设计的,并引导我们的基线高度,这形成了排版的垂直节奏。

The site works on a multitude of platforms - seen here is the mobile version

该网站可在多种平台上运行 - 这里可以看到移动版本

是否有可能拥有一个既方便又美观的网站?

ER: 是的,一点没错。我们与无缝可用性相结合的流线型设计证明了这一点。

BP:品牌颜色,排版和垂直节奏都经过仔细考虑,测试和计算。我认为这种“形式跟随功能”的方法可以导致内部和外部都很漂亮的网站。

该网站是响应。你觉得这很麻烦还是解放?

BP:这可能很棘手,但我对于响应式方法如何将用户体验带到另一个层面充满热情。在这种情况下,创建一个直观,流线型和无缝使用的网站是至关重要的。在开发过程中,诸如阻止选项卡专注于画布外导航这样的事情是一些额外的工作,但响应对于保持最佳阅读文本大小和页面缩放等事情至关重要。另外,这是有趣的一点。

您是如何管理在浏览器窗口内更改站点规模的需要的?

BP:页面缩放在响应式网站上运行得非常好,所以这有帮助。该页面看起来非常棒,占据平板电脑视图的250%,并且在响应视图中移动视图所需的响应视图高达500%时保持一致。

Maintaining optimum text size and zooming was crucial, making RWD key in this project

保持最佳文本大小和缩放至关重要,这使RWD成为该项目的关键

您使用和部署了哪些辅助技术?

BP混合物在原型制作期间真正帮助完成了工作流程互动风格指南。将此与BEM和SMACSS方法一起使用有助于形成结构并保持代码可维护。我们内部的Sass mixin库用于确保所添加的所有内容都可以访问。

AE:我们使用Git流程,根据用户故事和冲刺处理功能和发布工作流程。我们还使用Jenkins和Drush自动发布版本并使部署快速可靠。

您希望网页设计师能够更方便地访问网站的一条建议是什么?

BP:一旦你获得了语义结构的HTML,没有任何CSS或JS,你的页面将是可访问的,所以只需测试你添加的所有样式。一种方法是添加WAI-ARIA,但不要过度,因为它会给用户太多信息,特别是与HTML5结合使用时

AE:仅使用键盘在屏幕阅读器中进行测试 - 只需通过网站标签查看它的工作原理是如何帮助的。

ER:可访问性的模糊性意味着用户测试至关重要。了解用户如何与RNIB站点进行交互并制定解决方案是我们实现无缝结果的关键。

这篇文章最初出现在网络杂志问题256。



翻译字数超限