网页设计我们要思考这些体验者的可访性

Author: 素马

深圳素马设计;一直以来不断的提升团队的服务,包括先进技术提升,服务提升,以及更多的加入人性化的思考设计,深入人心的设计才是我们追求的。

 

我们是要所有人都有好的体验,而并非一部分人,我们一起向未来。

 

 

我从网页设计师那里看到的最大错误之一是使可访问性比实际更复杂。大多数设计师认为创建可访问的内容需要数周的夸张标记,为网站的每一分钟功能设计标签浏览和热键,以及编写过度描述的元数据,所以大多数人只是放弃甚至不打扰。但是,通过使用一些简单的技术并遵循一些基本准则,您可以让广大用户访问您的网站,而无需花费太多时间和精力。

 

我将网络可访问性定义为:

 

无论身体能力、网络客户和个人喜好如何,都可以向广大受众提供网络内容。

 

为了简化我们作为无障碍网页设计师的任务,在我们评估一些不同类型的用户时,有一些特定的类别可能会有所帮助:

 

>视力障碍者:视力低下或没有视力的人。这些用户可能使用屏幕阅读软件或可能使用浏览器的功能来增加文本大小和对比度。

>听力受损者:听力低下或没有听力的人。这些用户将需要能够看到作为网站一部分的任何音频的文本表示。

>身体受损者:那些缺乏使用鼠标或传统键盘的身体灵活性的人。这些用户可能使用各种接口设备,其中许多与传统 [TAB] 键的功能平行。

>移动端用户:可能使用移动设备、平板电脑、专业浏览器(如零售销售点设备)或游戏机的用户。这些设备上浏览窗口的尺寸和方向可能非常规

>网络受限者:可能带宽低或网络可靠性低的用户,例如偏远地区或发展中国家的用户。这些用户可能会关闭表示层以更好地访问内容。

 

要设计一个可访问的网站,您可以做的最重要的事情之一就是将内容与演示分开。请记住,人们正在访问您的网站以获取内容。通过将演示文稿与内容分开,您可以让您的用户使用任何适合访问您的内容的客户端,无论是屏幕阅读器、移动设备还是平板电脑。

 

内容层

内容层是设计可访问网站的核心。由标签之间的所有内容组成的内容层<body>应该只包含您希望直接与观众交流的信息,例如文本和图像。除了设置信息显示的顺序之外,内容层不应该包含任何关于页面应该是什么样子的信息——这些信息属于表示层。

 

结构。内容层应根据您使用的 html 标签的含义来构建。如果您已经熟悉语义代码,这应该很容易。

 

>页面的标题应该包含在<h1>标签中,表明它是页面上最高级别的标题。

>网站的导航应该包含在一个<ul>标签中,因为它是一个无序列表的项目。

>尽可能避免使用<iframe>. 在尝试使用 [TAB] 键导航页面时,内联框架往往会混淆屏幕阅读软件并造成严重破坏。

>  <table>不应使用格式化标签。<table>标签只能用于识别表格数据,例如财务资产负债表。

>   <div>不要对标签发疯。不幸的是,由于人们已经停止使用<table>标签,他们似乎只是用<div>s 替换它们。当 a<div>不代表新的内容分组时,它没有被正确使用。

 

图像。spacer.gif语义设计原则告诉我们不应包含非内容图像,例如图像。应该对图像进行元标记,<alt>以向无法查看图像的用户表明其用途;不幸的是,一些过分认真的设计师会添加过于详细以至于变得毫无用处<alt>的标签,例如:

 

<alt="a small group of people including a blonde woman with short hair, a man with dark hair, a woman with long dark hair, and a man with brown, long hair all on a light blue background">

 

请记住,您包含在<alt>标签中的信息可能会被屏幕阅读器大声读出,因此最好使用简洁的描述<alt="Team Photo">。

 

表示层

 

固定尺寸。用户可能有一个异常大小的屏幕,或者可能选择增加浏览器中的文本大小。当您为元素建立固定高度时,当您的用户尝试增加文本大小时,您的设计很可能会中断。尽可能避免使用固定尺寸。

 

颜色和对比度。确保您的颜色选择允许文本从背景中脱颖而出,以便视力不佳的人可以轻松阅读您的内容。

 

动态内容。有很多很棒的基于 JavaScript 的、AJAX 风格的动态技术,可用于使您的网站具有视觉吸引力和功能上有用的演示文稿。包含这些元素时,请始终注意未启用 Javascript 的用户尝试访问内容或功能时会发生什么。

 

可用性测试

一旦您研究了内容和表示层的可访问性,就该看看如何将您的网站呈现给通过任何数量的非传统方式查看它的客户。我见过的最好的快速可访问性检查是MIT Web 可访问性指南 5 分钟快速检查可访问性。它包括以下步骤:

1.关闭浏览器中的图像(确保图像占位符已打开)

2.关闭对 JavaScript 的支持

3.浏览页面,尝试不使用鼠标导航

4.尝试更改浏览器中的标准字体颜色和样式

5.尝试使用浏览器增加字体大小(查看>文字大小>增加)

6.关闭对样式表的支持

 

如果您的网站在采取这些步骤后,那么您就有了一个可访问的网站,可以覆盖非常广泛的用户。

 

素马设计;我们一直在设计路上追求更好的用户体验。

我们提供建站服务更提供我们真心的建议。

相关阅读