万维网的发明者蒂姆·伯纳斯-李说,万维网是为了所有人。不幸的是,情况并不总是如此。
糟糕的设计决策可能会给许多不同的群体带来障碍人民。事实上,WebAIM的研究发现,在100万个主页上,平均有5000多万个“明显的可访问性错误”每页略高于50。
这些错误不仅让人们感到被边缘化;它们还阻止了数百人成千上万的人无法与您的品牌互动或购买您的产品。
很少有网站管理员想要有目的地边缘化人们或限制访问他们的网站。这就是为什么了解最常见的网络是如此重要的原因辅助功能问题,并了解如何使用干净的设计解决这些问题。
我们开始吧。
为什么UX辅助功能很重要?
因为互联网已经成为人们日常生活中不可或缺的一部分超过10亿人,网站所有者必须采取措施确保每个人可以平等地访问它。然而,这不仅仅是一个人权问题。那里对于让你的网站变得可访问来说,这是一个显而易见的财务案例。鉴于61美国有数百万人患有某种形式的残疾,无法访问的网站可能会损害您的底线。创建您的站点这样,您就有可能向成千上万的客户敞开大门。
了解我的代理如何为您的网站带来更多流量
- SEO-解锁更多SEO流量。看到真正的结果。
- 内容营销-我们的团队创建史诗般的内容,这些内容将被分享、获取链接并吸引流量。
- 付费媒体-有效的付费策略,投资回报明确。
预订电话
遵循UX辅助功能设计趋势可以支持您公司的声誉。正在制造轰动效应RT以迎合特定的弱势群体用户证明您的公司关心所有客户。此添加的步骤可能会鼓励潜在客户利用你的品牌做更多的生意前进。
还有一个法律合规的小问题。虽然有关于1990年的《美国残疾人法案》是否包括网站和实体店,这并没有阻止数以千计的诉讼每年的联邦法院。你可能不会因为缺乏美国反兴奋剂机构网站而受到惩罚合规,但法律行动的威胁是显而易见的。
归根结底,使用UX辅助功能进行设计并不只是改善浏览为残疾用户提供体验;它改善了所有人。即使视力完美的用户也能从更好的色彩对比度中受益和更多的标签-你的搜索引擎优化肯定会从添加ALT之类的东西中受益文本和更好的链接说明。
7个最常见的Web辅助功能错误
使您的网站更易于访问与避免常见问题一样重要这是关于整合新技术的问题。避免以下七个错误,让你的网站比你的网站更容易访问,你将大有裨益竞争对手。
1:图像上缺少Alt文本
Alt Text是一种描述图像所代表内容的HTML属性。从一个从辅助功能的角度来看,Alt Text为屏幕阅读器提供以下信息向视障用户准确描述图像。如果你不提供Alt文本或您的Alt文本不是很有描述性,那么您就没有使您的所有人都可以使用网站的图片。
空Alt文本和缺少Alt文本之间存在差异。有时图像可以纯粹用于装饰目的。在这种情况下,一个空的可以使用Alt标签,它显示为alt=“”。这将被屏幕忽略并且不会影响可用性。
通常,alt文本不是空的,而是完全缺失。当一个屏幕阅读器问世对于缺失的alt属性,它将假定图像很重要,并且注入文件名。对于像图表和信息图这样的图像,对于用户理解网页来说,文件名不会是足够了。这就是为什么为您的所有用户创建Alt文本非常重要图像。
2:颜色对比度较弱
您有没有尝试过在黄色背景上阅读白色字体?不容易,是吗?它?但这可能是许多用户每次访问您的网站时的感受。这个事实是,有些人很难阅读文字,除非颜色之间的反差字体和背景都非常朴素。这就是为什么白色的字体是黑色的背景是如此受欢迎的选择。
改善颜色对比度的最简单方法是避免使用相似的颜色背景和文本。这意味着红色背景上没有橙色字体。或绿色蓝色背景上的文本。请特别注意设计功能,如您的网站页眉或表单上的提交按钮也是如此。这些功能往往合并品牌颜色,更有可能导致对比度问题。
或者,您也可以使用WebAIM中的对比度检查器等工具来量化你的对比度。比例越高,对比度越好你的网站的可读性就越强。该工具将告诉您是否你的颜色通过或失败。通常,文本和背景颜色应具有大文本的对比度至少为3:1,正常文本的对比度至少为4:1调整文本大小。
从下图中可以看到,白色背景上的深蓝色文本具有对比度很高。
但白色背景上的黄色文本的对比度很差。
3:链接文本不佳
从用户体验的角度来看,链接都是网页的重要组成部分还有搜索引擎优化。但您需要使用链接文本准确地描述它们,以使它们是有效的。
而那些精通搜索引擎优化的人可能做梦也不会错过一个机会添加一个关键字在内部链接中,缺少链接文本的情况非常常见。徽标,按钮和图标都没有文本,这意味着屏幕读者会忽略它们。如果您想让用户点击您的CTA,那就不太好了按钮。
链接文本模糊或不明确也是一个问题。不仅仅是像这样的短语“点击此处”没有提供搜索引擎优化的价值,但它也会阻碍用户访问您的网站通过屏幕阅读器。包括没有任何锚点的整个http://链接无论文本是什么,都更糟糕。这两个版本都不包含这些信息用户需要。
相反,请确保可点击的文本准确描述了用户可以找到的内容在下一页。例如,在下面的示例中,您可以通过点击链接,你将被定向到一个页面,在那里你可以获得14天的免费试用Shopify。
然后是导航链接。这些也会给屏幕带来问题读者,如果它们编码不当的话。这是因为屏幕阅读器不会跳过这意味着用户将不得不每隔一段时间收听您的导航菜单是他们翻开新的一页的时候了。通过将ARIA角色分配给您的导航菜单以指示其用途。这将帮助屏幕阅读器必要时避免使用它们。
4:缺少表单标签
我几乎可以肯定您的网站上至少有一个表单,即使它只是在您的联系人页面上。但是,是否每个字段都有标签告诉用户他们需要输入的信息?否则,将无法访问您的表单所有人。
与链接文本一样,表单输入字段需要标签,以便屏幕阅读器和其他辅助设备可以理解它们,并帮助用户导航。不过,标签不仅仅是您可以在表单域中看到的占位符文本。您还需要在表单的代码中添加描述。那是因为屏幕阅读器通常会忽略占位符文本。这也无济于事该占位符文本通常缺少强烈的颜色对比度。
理想情况下,您将我在
5:数据表无标记
表格对于屏幕阅读器和其他可访问性来说是一场噩梦设备。当屏幕阅读器遇到表时,它们会告诉用户有一个表具有给定的列数和行数,然后继续列出所有的数据。遗憾的是,该数据可能无法在正确的顺序。更糟糕的是,屏幕阅读器不能读出有是多组行或列标题。
事实上,使表可访问的最好方法是根本不使用它们。当然,这对一些网站是行不通的。那么,桌子在哪里呢?必填项,则需要使它们尽可能简单,并使用正确的加价。应该使用ID、Header和Scope属性来正确标记你桌子的每一部分。您还可以使用表标题来提供其他向用户提供有关如何最好地理解您的表的信息。
另一种方法是将您的数据显示为图像文件,并使用适当的列出数据的Alt文本。然而,对于复杂的表,情况可能并非如此可行。
6:屏幕阅读器缺乏键盘辅助功能
不是每个人都会使用鼠标浏览您的网站。许多视觉上-有障碍的人会使用键盘或其他辅助设备进行移动在你的网站周围。这意味着你需要特别注意以下情况设计和创建网站的布局。
具体而言,用户必须能够使用空格键导航您的网站和Tab键。构建在语义正确的HTML中的简单站点可能会实现这一点无需任何调整即可实现,但更复杂的网站将需要数字里程碑中的代码,更好地允许键盘用户和屏幕阅读器四处走动
在每个页面的顶部添加跳转到内容的链接年龄也可以节省您的用户从每次打开新页面时都必须切换每个菜单项。当您按Tab键时出现的这些按钮允许用户导航网站使用Tab键和空格键跳过导航和标题直接转到页面的主要内容。
7:没有正确标记的非HTML内容
在优化您的站点时,很容易忘记非HTML元素可访问性。但像PDF和Word文档这样的内容也可能是一个问题。开箱即用,用户无法自定义这些文档以使其更容易阅读,他们也不能很好地使用辅助技术。可访问性问题当文档以纯图像PDF格式生成时,情况会更糟。
一种解决方案是通过标记这些资源来解决导航错误通过屏幕阅读器导航。另一种是使用Office的内置功能辅助功能检查器可在您执行以下操作时提高这些文档的辅助功能创建它们。
滑块、手风琴和拖放小部件等交互式内容可以也会影响可访问性。动态内容,如弹出框和确认消息。如果屏幕阅读器不能理解这些片段正在加载内容,它将无法告诉用户有关它们的信息。
同样,您可以使用ARIA属性来解决此问题。对这些进行标记具有正确ARIA属性的交互和动态元素将通知页面内容已更改的屏幕阅读器。或者,您可以设计站点时应避免使用弹出窗口和其他形式的动态内容。静态网站可能看起来不那么华而不实,但它们很重要更易访问。
常见问题
*辅助功能的四个重要类别是什么?*
Web内容可访问性准则建立在以下四个原则之上倾倒:可感知、可操作、可理解和健壮。
*什么是ADA合规性?*
如果您的站点符合ADA,则它符合中提出的建议1990年的《美国残疾人法》,符合以下条件的人可以访问残疾。
*如何使我的网站更具辅助功能?*
您可以通过改善颜色对比度、添加Alt文本,或为屏幕阅读器添加键盘辅助功能。
*网站无障碍功能的示例是什么?*
允许用户使用键盘而不是鼠标浏览您的网站网站可访问性的一个例子。向上的每一张图像添加Alt文本也是如此您的网站。
结论
不幸的是,即使是最好的设计师和网络企业家也能创造出无法访问的网站。这就是为什么不断回顾这件事是如此重要这些错误在您构建网站或创建新内容时都会出现。
在所有图像上包含Alt文本、向表格中添加标记数据并提高链接文本的质量,但数百万用户将感谢你对此表示感谢。
但不要止步于此。接下来,了解如何创建包容性内容并改进您网站的整体用户体验。
您首先要更正哪些UX辅助功能错误?