通用网页设计中的常见错误
在今天的时髦和有竞争力的“Web 2.0”和社交媒体的世界里， 通用设计是被遗忘的许多倍。 因为有许多它的扑朔迷离，为什么社会，技术，财务和法律方面的原因 ，其支持通用的设计手法。 我们今天讨论的网站一些比较普遍的问题，以及他们如何涉及到的主要通用设计原则。
原则
首先，让我们回顾七个通用设计原则，包括一些网络相关的例子。 请记住，这些原则也适用，当然，许多行业计算机和网络之外，如土木工程（建筑物，人行道），娱乐（电影院，主题公园），交通（公共汽车，火车）。
- 公平使用：有用的，适销对路的人具有不同的能力。
例：某地方政府的网站设计，使其对那些谁使用辅助技术访问诸如屏幕阅读器。 - 灵活的使用：可满足广泛的个人喜好和能力。
维持在各种电脑显示器尺寸视觉美学航空公司网站的设计：例。 - 简单直观的：易于理解，无论用户的经验，知识，语言技能，当前的注意程度。
例如：一个Web应用程序的主控制标以文字和符号。 - 可视信息：有效地与用户进行通信，无论环境条件或用户的感觉能力的必要信息。
例如：教学视频与字幕提供阅读除了听对话的选项。 - 公差错误：最小化的危害和意外或无意行为的不良后果。
例如：当提交表单提供了如何继续一个明确的解释和选项的技术错误。 - 低体力：能够有效且舒适地使用，并以最小的疲劳。
例如：网站设计有充分的色对比和文字大小最小化眼睛疲劳。 - 尺寸和空间的方法及使用方法：适当的大小和空间提供了一种方法，接触，操作和使用无论使用者的体型，姿势或行动的。
例如：一个网站的设计，使物理受损的用户谁不能使用鼠标仍然可以访问所有与键盘的内容（或屏幕上的键盘！）。
现在，我们所熟悉的原则，让我们来看看几个相关的网页设计的问题。
难以阅读
在通用设计的第一个流行的错误是文字内容，因为它的设计中，很难对许多阅读。 这涉及到原则1，公平地使用; 和图6，低体力，具体而言，眼睛疲劳。 需要注意的是认知阅读困难是这篇文章的范围内一个单独的问题不是。 良好的可读性 ，使网站更加实用和美观。 顺便说一句，检查出Readability.com web应用超级方便阅读。
那么什么是问题？ 小型的文字和低色彩对比是，这使得两个关键问题网页排版难以阅读。 在下面的例子中，主文本内容是灰色在黑色背景上从而未能在亮度差和差异颜色测试。 文字大小设置为12个像素这是相当小了许多用户，包括我自己。 当从CSS删除文本大小，浏览器会显示默认大小是稍大，更可读！ 因此，而不是默认的文本设置到12px或.75em ，尽量高一点像16px或.95em 。
有关文本的另一个最佳做法是在CSS使用相对大小（EMS或百分比），而不是固定的尺寸（像素或点），以帮助确保用户能够调整在浏览器中的文本根据需要和有布局规模与文本。 其他好的指引，包括提供用户友好的标题和充足的行间距。
很难确定文本链接
默认情况下，超链接文本呈现带下划线。 这是在浏览网页的长期惯例。 删除此惯例不仅打破了用户的期望，但可能使链接无法访问那些患有色盲或视力低下。 很多时候，除了这种问题是，当链接与黑色文本中深色定义。 类似于上面的问题，这涉及到原则1和6。
我的验光师告诉我，40岁左右开始，男性的视力开始失去它的颜色区别开来。 而男孩是她的权利！ 许多网站都没有下划线深蓝色的链接，我肯定要紧张我的眼睛来确定文本链接。 下面的例子是从新闻报道。 你可以看到文本链接？ 这对我来说非常困难。
新闻网站似乎是臭名昭著的使用去掉下划线的蓝色链接，即使是从区分英国网站的电报 。 要解决，只要返回下划线删除屏障。 该Nomensa博客是一个很好的例子。 或者，使用粗体文字，或者文本链接的另一视觉外延如彩色背景。
视觉噪声
分散的布局和内容超载不仅是视觉上不美观，但不是十分有用，也不易获得。 这直接涉及原则3，简单和直观。 在加利福尼亚州的当地政府网页，如下图所示，有无数的导航区，两个大型款的横幅图片，只是一个无组织的，零散的外观。 其结果是，主要内容没有开始，直到页面，这显然是不理想的“折叠”。 此外，没有焦点，没有视觉层次，使用户更加容易疯狂地搜索页面，用户需要什么。
相比之下，检查了澳大利亚政府和USA.gov网站; 更宽敞的和有组织它创建了一个更实用的体验。
这创建“视觉噪声”更多的例子是：
- 导航：在页面上导航的太多部分（如例以上）和导航的层次太多会引起混乱，以及作为设计的噩梦。
- 冗余提示：上有相同的内容，链接本身的文字链接标题属性创建一个工具提示，是突兀的和不必要的。
- 无意义的图像：仅在内容中使用的图像时它具有值; 它应该传达意义的文本内容很重要。
无键盘访问
键盘访问 ，浏览屏幕和互动与单独使用键盘可聚焦对象的能力，是至关重要的。 不幸的是，许多网站不提供此。 更准确的说，许多网站制造障碍键盘的用户，因为HTML本质上是使用键盘进行访问。 如果你设计的鼠标事件，一定要提供键盘的平等机会。 这造成设备独立性; 这是好事！ 这个问题关系到原则1，公平使用; 和图2，在使用中的灵活性。
当输入一个网站，有几个好的做法来考虑。 在CSS中，如果:hover使用伪类，确保:focus状态也被提供。 此外，一个不应该删除锚元素，即轮廓a { outline: 0 }警惕：最CSS样式表复位删除锚点轮廓-一定要在他们自己的CSS以后添加回来！）。 如果这是绝对必要的，那么某种视觉效果必须更换。
在JavaScript中，不要使用双击处理程序（ onDblClick ），因为键盘不能执行这个行为。 如果onMouseOver和onMouseOut使用JavaScript的处理程序，在onFocus和onBlur事件，还必须实现以允许键盘访问。
缺少了图片的替代文字
如果图像提供了相关的内容，它必须与替代文字陪同。 当图像不能被看到，因为将与盲人用户，低频段的用户，并打破图像的情况下链接，然后将图像的“内容”仍然需要访问。 此问题，像上面，涉及原理1和2中最流行的方法，以提供替代文本是输入在所述图像元素的文本alt属性。
在网络上有许多图像，如图形图表，漫画，信息图表不提供alt文本“长说明”，并因此阻止其内容的许多用户。 网络斧博客纠正其系列“的一些例子固定Alt键 ”。 欲了解更多关于长的描述，看看我的两篇文章LONGDESC及其他长期图片说明解决方案 。
下面是替代文本的一些准则：
- 如果文本嵌入在图像中，将其添加到alt属性。
- 如果图像不仅是装饰，它应该包含一个空的
alt属性。 （例如<img src="decoration.png" alt=""/> - 对于一些图像，如图表和图形，需要更长的描述。
- 如果带有链接的图像包含的内容，则替代文本应描述链接，而不是图像本身的功能。
外卖
设计一个网站，以及其他产品时，七个通用设计原则是一个很好的资源。 人们使用电脑的方式不同，不同访问网络。 通过保持这种心态，一个网页设计师将在创建网站，是有吸引力的，用户友好以及对所有人更成功。
延伸阅读
- 通用设计Web应用程序通过温迪奇泽姆，马特日（O'Reilly Media公司）。
- 通用可用性 ，在线图书由萨拉·霍顿。
- 指令的通用设计华盛顿DO-IT项目的大学。
- 通用设计原则 ，设计学院，北卡罗莱纳州立大学。
- 通用设计文件：设计适合所有年龄和能力的人 （核心期刊）莫莉故事，詹姆斯·米勒，罗恩锤。
From: https://www.sitepoint.com//popular-mistakes-in-universal-web-design/