资讯中心 资讯详情
了解企业新闻和行业动态,获取官网通知公告,掌握做网站的基本知识和技巧!

网站无障碍设计工具指南

来源:易助科技网浏览量:7收藏

这是创建一个合格的可访问设计的主要工具的详细指南!新手和专业人士都会在这里找到新的东西,让我们现在开始吧!



什么是网站无障碍设计?


正如定义所示,网页设计中的可访问性使各种能力的用户能够完全使用产品。它确保了高质量的用户体验,并影响从用户满意度到转化率的所有指标。在我们最近的一次采访中,资深设计师将无障碍性称为伟大设计的关键特征之一。


无障碍设计网站-TUBIK.ARTS
[ TUBIK.ARTS ] 的插图


全世界约有15%的人患有各种残疾,他们希望像其他人一样使用互联网和应用程序。这就是为什么每个设计师都应该考虑让用户体验变得可访问:


你也可以让别人的生活变得更轻松、更好。

你也扩大了你的目标受众。

您可以提高每个用户的用户体验质量。

现在,让我们了解一下有哪些可访问性标准,以及如何测试您的产品的可访问性。



无障碍标准


追求的目标:使各种类型的残疾人都能获得技术。


[ WAI ] (Web可访问性倡议) –涵盖所有与可访问性有关的官方程序。 此总括术语包含现代可访问性的所有规则,指南和技术。


[ WCAG ](网络内容无障碍指南)是一系列规则,用于让所有使用任何类型设备的人都可以访问网站。其最新版本已成为ISO标准。Web内容无障碍指南(WCAG)2.0涵盖了使Web内容更易于访问的广泛建议。遵循这些指南将使更广泛的残疾人能够访问内容,包括失明和低视力、耳聋和听力损失、学习障碍、认知障碍、行动受限、言语障碍、光敏性及其组合。遵循这些指导原则通常也会使您的Web内容更易于用户使用。


[ ARIA ] (可访问的富Internet应用程序) –一种特定的标准,定义了如何构建依赖JavaScript / Ajax和类似技术的可访问的富应用程序。 在Anna Monus的这篇文章中阅读有关此内容的更多信息。



无障碍设计工具


1.  视觉障碍


Colorable - 厌倦了在文本和背景之间找到最佳组合吗?反转或随机化它以获得一些灵感。

Colors - 准备使用90种颜色组合,您可以在产品中使用这些颜色。


无障碍设计网站-scope
[ SCOPE ] 是英格兰和威尔士的残疾人平等慈善机构。其网站的用户可以更改网站的颜色、增加文本大小或大声说出网站


Contrast - macOS工具,帮助您确定界面元素的对比度比例。它基于WCAG,可帮助您选择正确的颜色。

Contrast checker - 输入您的文本对象和页面背景颜色--立即获得结果!

Contraste - macOS工具,可帮助您通过颜色组合分析文本可访问性。基于WCAG。

Hex Naw - 在线测试你的调色板——最多加12种颜色,看看结果!

Stark - 用于Figma、Sketch、Adobe XD和Google Chrome的插件。包括对比度检查器,色盲生成器,颜色建议,以及9个色盲模拟。


[ TRELLO ] 具有单色视觉的色盲友好模式


Color Safe - 在线工具,可以快速检查文本的对比度。选择背景色、字体选项,看看你的颜色组合有多好。

Accessible color palette builder - 用于检查您的颜色集的在线工具。


无障碍设计网站-adobecolor
[ adobecolor ] 还具有颜色可访问性功能,可以检查调色板的色盲安全性



2. 行动不便


Android Switch Access - 一种允许用户使用音量按钮、外部键盘或开关控制智能手机的工具。



3. 听觉障碍


Accessibility checklist - WCAG的检查表。有很多标准,但你可以通过使用标签找到你需要的指导方针。

Apple Accessibility features - iOS和macOS功能将有助于测试您的产品的音频、文本、控制和移动性。


无障碍设计网站冠军-APPLE
[ APPLE ] 是可访问性的绝对冠军:画外音、打字反馈、音频描述、显示和文本大小、放大镜、减少运动和其他为有特殊需求的人提供的功能



4. 认知障碍


The AY11 Project - 基于WCAG的社区驱动无障碍指南。包括所有3个级别的可访问性--A、AA和AAA。它不仅涉及文本或对比度,还涉及外观、动画和触摸界面。

Hemingway App - 在线检查器和应用程序,使您的副本更容易阅读。海明威强调复杂的句子、副词和被动语态。编辑文本,使其易于阅读和理解。


无障碍设计工具在线检查器和应用程序-Hemingway App


PEAT - 光敏性癫痫分析工具可帮助您分析视频和动画中潜在的视觉风险。



可访问性测试的有用资源


准则


Android accessibility

Apple design guidelines

iOS accessibility checklist

Microsoft design guidelines

W3C Mobile accessibility guide



插件


axe DevTools for Chrome‍

Material design accessibility

Starting Android accessibility

WAVE (Web Accessibility Evaluation Tool)



工具


Android Accessibility Tools

Accessibility insights‍

ChromeVox‍

Microsoft Ease of Access‍

The A11y Machine‍

VoiceOver



总结


可访问性标准和工具将允许您为每个人创建服务。制作一些好的用户体验,帮助人们喜欢你的产品——他们会喜欢的。