通用网页设计中的常见错误

在当今时髦且竞争激烈的“ Web 2.0”和社交媒体世界中， 通用设计被很多次遗忘了。 令人困惑的是，为什么有很多社会，技术，财务和法律方面的原因支持通用设计实践。 让我们讨论一下当今网站上一些更普遍的问题，以及它们如何与主要的通用设计原则相关联。

原则

首先，让我们回顾七种通用设计原则，包括一些与Web相关的示例。 请记住，这些原理当然适用于计算机和网络之外的许多行业，例如土木工程（建筑物，人行道），娱乐（电影院，主题公园）和交通运输（公共汽车，火车）。

1. 公平使用：对各种能力的人有用且可销售。
   示例：设计地方政府的网站，以便那些使用辅助技术（例如屏幕阅读器）的人可以访问它。
2. 使用的灵活性：适应各种个人喜好和能力。
   示例：航空公司网站的设计可在各种计算机显示尺寸上保持视觉美感。
3. 简单直观：无论用户的经验，知识，语言技能或当前的专注程度如何，都易于理解。
   示例：Web应用程序的主要控件同时带有文本和符号。
4. 可感知的信息：无论环境条件或用户的感官能力如何，都可以将有效的信息有效地传达给用户。
   示例：带字幕的教学视频除了提供收听之外，还提供了阅读对话的选项。
5. 错误容忍度：将意外操作或意外操作的危害和不良后果降至最低。
   示例：提交表单时出现技术错误，提供了清晰的解释和有关如何继续的选项。
6. 体力劳动量少：可以高效舒适地使用，并且疲劳程度最小。
   示例：网站设计具有足够的色彩对比和文本大小，可最大程度地减少眼睛疲劳。
7. 接近和使用的大小和空间：无论用户的身体大小，姿势或活动性如何，都为接近，到达，操纵和使用提供了适当的大小和空间。
   示例：设计网站是为了使无法使用鼠标的肢体障碍用户仍然可以使用键盘（或屏幕键盘！）访问所有内容。

现在我们已经熟悉了这些原理，下面让我们研究几个相关的Web设计问题。

难以阅读

通用设计中的第一个普遍错误是文本内容，由于其设计，许多人难以阅读。 这涉及原则1，公平使用； 6，体力劳动量少，特别是眼睛疲劳。 请注意， 认知阅读困难是一个单独的问题，不在本文讨论范围之内。 良好的可读性使网站更加实用且美观。 顺便说一句，请阅读Readability.com Web应用程序以获得超级简单的阅读。

那是什么问题呢？ 小尺寸的文本和较低的色彩对比度是使Web排版难以阅读的两个关键问题。 在下面的示例中，主要文本内容在黑色背景上为灰色，未通过“亮度 差异”和“颜色差异”测试。 文字大小设置为12像素，对于包括我在内的许多用户来说，这是相当小的。 从CSS删除文本大小时，浏览器将显示默认大小，该默认大小稍大一些，并且可读性更高！ 因此， .75em 将默认文本设置为12px或.75em ， .75em 将其设置为16px或.95em 。

与文本有关的另一种最佳实践是在CSS中使用相对大小（em或百分比），而不是固定大小（像素或点），以帮助确保用户能够根据需要在浏览器中调整文本的大小并使用文本。 其他好的指导原则包括提供用户友好的标题和足够的行距。

难以确定文本链接

默认情况下，超链接文本带有下划线。 这是Web浏览中的长期惯例。 删除该约定不仅会破坏用户的期望，而且可能使色盲或视力弱的人无法访问该链接。 很多时候，当链接在黑色文本中定义为深色时，这个问题就更加复杂了。 与上述问题类似，这与原则1和6有关。

我的验光师告诉我，从40岁左右开始，男人的视力开始失去区分颜色的能力。 男孩是对的！ 许多网站都有深蓝色的链接，没有下划线，我肯定要睁大眼睛确定文本链接。 下面的示例来自新闻报道。 您能看到文字连结吗？ 对我来说很难。

新闻网站似乎使用臭名昭著的蓝色链接而臭名昭著，即使是著名的英国网站The Telegraph也是如此 。 要解决此问题，只需返回下划线即可消除障碍。 Nomensa博客是一个很好的例子。 （可选）对文本链接（例如彩色背景）使用粗体文本或其他视觉标记。

视觉噪音

分散的布局和内容过载不仅在视觉上不吸引人，而且不是非常有用或不可访问。 这直接关系到原理3，简单直观。 在下面显示的加利福尼亚州地方政府网页中，有许多导航区域，两个大的小节横幅图像以及仅是一个无组织的分散外观。 结果，主要内容直到页面的“折叠”才开始，这显然是不理想的。 而且，没有焦点，没有视觉层次结构，导致用户更有可能疯狂搜索页面以查找用户需要的内容。

相比之下，请访问澳大利亚政府和USA.gov网站； 更加宽敞和井井有条，创造了更多可用的体验。

产生“视觉噪音”的更多示例是：

• 导航：页面上太多的导航部分（如上述示例），太多级别的导航以及设计噩梦都会造成混乱。
• 冗余工具提示：文本链接上的标题属性与链接本身具有相同的内容，因此创建的工具提示过分且不需要。
• 毫无意义的图像：仅在具有价值的内容中使用图像； 它应该传达对文本内容重要的意义。

没有键盘访问

键盘访问功能（仅使用键盘即可浏览屏幕并与可聚焦对象进行交互的功能）至关重要。 不幸的是，许多网站没有提供此功能。 更准确地说，由于HTML本质上可以通过键盘访问，因此许多网站为键盘用户设置了障碍 。 如果您设计用于鼠标事件，请确保为键盘提供相同的访问权限。 这将创建设备独立性。 这是好事！ 此问题与原则1，合理使用， 2，使用灵活。

在对网站进行编码时，需要考虑一些好的做法。 在CSS中 ，如果使用:hover伪类，请确保还提供了:focus状态。 另外，永远不要删除锚元素上的轮廓，即a { outline: 0 } （请注意：大多数CSS重置样式表都会删除锚轮廓-请确保稍后将其重新添加到您自己的CSS中 ！）。 如果绝对必要，则必须替换某种视觉效果。

在JavaScript中，请勿使用双击处理程序（ onDblClick ），因为键盘无法执行此行为。 如果使用了onMouseOver和onMouseOut JavaScript处理程序，则还必须实现onFocus和onBlur事件以允许键盘访问。

缺少图片的替代文字

如果图像提供了相关内容，则必须随附替代文本。 当看不到图像时（盲人用户，低频带用户和断开的图像链接就是这种情况），则仍需要访问图像的“内容”。 与上面类似，此问题与原则1和2有关。提供替代文本的最流行方法是在image元素的alt属性中输入文本。

网络上的许多图像（例如图形图表，漫画和信息图表）在alt文本中未提供“详细说明”，因此阻止了许多用户使用其内容。 Web Axe博客在其“ Fixing Alt ”系列中更正了一些示例。 有关长描述的更多信息，请查看我的两部分文章Longdesc和其他长图像描述解决方案 。

以下是替代文本的一些指导原则：

• 如果文本嵌入在图像中，请将其添加到alt属性。
• 如果图像仅是装饰性的，则应包含一个空的alt属性。 （例如<img src="decoration.png" alt=""/> ）。
• 对于某些图像，例如图表和艺术品，需要更长的描述。
• 如果带有链接的图像包含内容，则替代文字应描述链接的功能，而不是图像本身。

外卖

这七个通用设计原则是设计网站和其他产品时的绝佳资源。 人们使用计算机的方式不同，访问网络的方式也不同。 通过保持这种思想，网页设计师将在创建有吸引力的，用户友好的和所有人均可访问的网站方面取得更大的成功。

进一步阅读

• Web应用程序的通用设计 （O'Reilly Media），作者：Wendy Chisholm，Matt May。
• 通用可用性 （Sales Horton）在线书籍。
• 华盛顿大学DO-IT程序通用教学设计 。
• 北卡罗来纳州立大学设计学院，通用设计原理 。
• 通用设计文件：面向所有年龄和能力的人们的设计 （期刊），作者：Molly Story，James Mueller和Ron Mace。

From: https://www.sitepoint.com/popular-mistakes-in-universal-web-design/