通用网页设计中的流行错误

凭借当今的当今竞争和竞争性的“ Web 2.0”和社交媒体世界，通用设计 很多次被遗忘。关于为什么有许多社会，技术，财务和法律原因支持普遍设计实践，这令人困惑。让我们讨论当今网站中一些更普遍的问题，以及它们与主要通用设计原则的关系。

钥匙要点

尽管具有社会，技术，财务和法律利益，但通用网络设计经常被忽略。常见错误包括难以阅读的文本，不清楚的文本链接，过多的视觉噪音，缺乏键盘访问以及图像缺少替代文本。
>文本可读性对于通用设计至关重要。小型文本和低色对比可能使网络版式难以阅读。在CSS而不是固定尺寸中使用相对尺寸可以帮助确保用户能够根据需要调整文本大小。
键盘访问对于通用设计至关重要。许多网站无法提供此信息，为用户造成障碍。良好的实践包括提供a：CSS中的焦点状态，如果使用：悬停伪类类，并确保如果设计了鼠标事件，则提供了键盘的平等访问。 为图像提供替代文本是通用设计的另一个关键方面。如果图像提供相关内容，则必须伴随替代文本，以确保所有用户的可访问性，包括视觉障碍或速度缓慢的Internet连接。
原理
首先，让我们回顾一下包括一些与Web相关的示例，包括一些通用设计原则。请记住，这些原则当然可以应用于计算机和网络以外的许多行业，例如土木工程（建筑物，人行道），娱乐（电影院，主题公园）和交通运输（公共汽车，火车）。

1. 公平用途：对具有不同能力的人有用且可销售。
   示例：当地政府的网站的设计，以便使用辅助技术（例如屏幕阅读器）的人可以访问它。
2. 使用的灵活性：可容纳广泛的个人偏好和能力。
   示例：航空公司网站的设计在各种计算机显示尺寸中维护视觉美学。
>简单而直观：无论用户的经验，知识，语言技能或当前集中度如何，易于理解。
3. 示例：Web应用程序的主要控件标记为文本和符号。
   >
可感知的信息：无论环境条件或用户的感觉能力如何，都可以有效地与用户传达必要的信息。
4. 示例：带有字幕的教学视频提供了读取对话的选项。
   错误的耐受性：最大程度地减少偶然或意外行动的危害和不利后果。
示例：提交表单时的技术错误提供了一个清晰的解释和选择。
5. 身体上的努力低：可以有效，舒适地使用，并且最少的疲劳。
   示例：网站设计具有足够的颜色对比度和文本大小，可最大程度地减少眼睛应变。
用于接近和使用的尺寸和空间：无论用户的身体尺寸，姿势或移动性如何，都提供适当的尺寸和空间，用于接近，触及，操纵和使用。
6. 示例：设计网站，以便无法使用鼠标的物理受损的用户仍然可以使用键盘访问所有内容（或屏幕上的键盘！）。
   

现在我们已经熟悉了这些原则，让我们研究一些相关的网络设计问题。

难以阅读

通用设计中的第一个流行错误是文本内容，由于其设计，许多人很难阅读。这与原则1有关，公平使用；和6的体力低下，特别是眼睛劳累。请注意，>认知阅读难度不是本文范围内的一个单独的问题。良好的可读性使网站更加可用和美观。顺便说一句，请查看Readability.com Web应用程序以进行超级阅读。 那么有什么问题？小型文本和低色对比是两个关键问题，使网络版式难以阅读。在下面的示例中，主要文本内容是在黑色背景上灰色的，该黑色背景在亮度>和颜色测试的差异中失败了。文本大小设置为12个像素，对于包括我自己在内的许多用户而言，这很小。从CSS删除文本大小时，浏览器会显示默认大小，该大小稍大，并且更可读！因此，不要将默认文本设置为12px或.75EM，而是尝试更高一些16px或.95em。 与文本有关的另一个最佳实践是在CSS中使用相对尺寸 （EMS或百分比）而不是固定尺寸（像素或点），以帮助确保用户能够根据需要在浏览器中调整文本大小，并在文本中进行布局比例。其他好的指南，包括提供用户友好的标题和足够的线路间距。

难以确定文本链接

默认情况下，超链接的文本用下划线呈现。这是网络浏览中的长期惯例。删除该约定不仅会打破用户的期望，而且可能使链接无法获得色盲或低视力的人无法访问。很多时候将这个问题复杂化是在黑色文本中用深色定义链接时。与上述问题类似，这与原则1和6有关。 我的验光师告诉我，从40岁左右开始，男人的视力开始失去区分颜色的能力。男孩是对的！许多网站都有深蓝色的链接，没有下划线，我肯定必须紧张我的眼睛才能确定文本链接。下面的示例来自新闻报道。您可以看到文本链接吗？对我来说非常困难。

新闻网站似乎臭名昭著，即使在杰出的英国网站上使用蓝色链接以及删除的下划线也是如此。要解决，只需通过返回下划线去除屏障。 Nomensa博客是一个很好的例子。可选地，将大胆的文本或其他视觉表示用于文本链接，例如彩色背景。 视觉噪声

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

相比之下，请查看澳大利亚政府和美国网站；更宽敞和有条理，创造了更可用的体验。 创建“视觉噪音”的更多示例是：

• 导航：页面上的导航段太多（如上所述），导航级别太多可能会造成混淆，以及设计的噩梦。
>
• 冗余工具提示：文本链接上的标题属性，其内容与链接本身相同的内容创建了一个刻薄且不需要的工具提示。
>
• 毫无意义的图像：仅在具有值的内容时使用图像；它应该传达对文本内容重要的意义。
>

>无键盘访问

键盘访问，可以单独使用键盘进行导航屏幕并与聚焦对象进行交互的能力。不幸的是，许多网站没有提供此信息。更准确地说，许多网站为键盘用户创建障碍，因为HTML固有地是键盘可访问的。如果您为鼠标活动设计，请确保为键盘提供平等的访问权限。这会创建与设备无关的；那是一件好事！这个问题涉及原则1，公平使用；和2，使用的灵活性。 在编码网站时，有几种好的做法需要考虑。在CSS中，如果使用：悬停伪类类，请确保还提供了焦点状态。另外，切勿删除锚元素上的轮廓，即a {atline：0} （要警惕：大多数CSS重置样式表删除锚式轮廓 - 请务必稍后将它们添加到您自己的CSS 中！）。如果是绝对必要的，那么某种视觉效果必须替换。 在JavaScript中，请勿使用双击处理程序（ONDBLICK），因为键盘无法执行此行为。如果使用了onmouseover和onMouseOut javaScript处理程序，则还必须实现onfocus和onblur事件以允许键盘访问。

缺少图像的替代文本

如果图像提供相关内容，则必须伴随替代文本。当看不见图像时，盲人用户，低频用户和损坏的图像链接将是这种情况，则仍然需要访问图像的“内容”。如上所述，此问题与原理1和2有关。提供替代文本的最流行方法是在Image Element的Alt属性中输入文本。 许多图像，例如Web上的图形图，漫画和信息图表都没有在Alt文本中提供“长描述”，因此阻止了其内容的许多用户。 Web Ax博客在其系列“ Fixing Alt”中纠正了一些示例。有关长时间描述的更多信息，请查看我的两部分文章Longdesc和其他长图像说明解决方案。

以下是一些替代文本的指南：

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

设计网站以及其他产品时，七个通用设计原理是一个很好的资源。人们以不同的方式使用计算机，并以不同的方式访问网络。通过保持这种思维，网页设计师将在创建吸引人，用户友好且可访问的网站方面更加成功。

进一步阅读

Web Applications（O’Reilly Media）的通用设计Wendy Chisholm，Matt May。

普遍的可用性，莎拉·霍顿（Sarah Horton）的在线书。

华盛顿大学DO-IT计划的通用教学设计。>
• >北卡罗来纳州立大学设计学院通用设计原则。
>通用设计文件：为各个年龄段和能力的人设计（日记），莫莉·斯托尔（James Mueller），詹姆斯·穆勒（James Mueller），罗恩·梅斯
>通用网络设计的常见问题
什么是通用的Web设计，为什么重要？
• 通用Web Design（UWD）是一种设计方法，旨在创建网站和Web内容，无论其能力或使用的设备如何，都可以访问和使用尽可能多的人。这很重要，因为它可以确保每个人，包括残疾人，都可以有效访问和使用Web内容。它还改善了整体用户体验，使网站更加用户友好，更易于导航。

>通用网络设计与传统的Web设计有何不同？

传统的网络设计通常集中在一般受众的美学和功能上。另一方面，通用网络设计考虑了所有用户（包括残疾人）的各种需求。它强调可访问性，可用性和包容性，以确保每个人都可以访问和使用Web内容，无论其能力或使用的设备如何。

>

>通用网络设计中的某些常见错误是什么？可访问性指南和标准。这些错误可能导致用户体验差，并限制网站的可访问性和可用性。

>如何使我的网站更容易访问和用户友好？其中包括使用清晰而简单的语言，为图像提供替代文本，确保网站可以使用键盘导航，使用逻辑且一致的布局以及为视频提供标题。在不同的设备和浏览器上测试您的网站也很重要，以确保它对所有用户都效果很好。

>

什么是Web浏览器，它如何影响通用Web Design？

> Web浏览器是一个软件应用程序，它用于人们用于访问Internet和网页的软件应用程序。它会影响通用Web设计，因为不同的浏览器可能以不同的方式解释和显示Web内容。因此，重要的是要在不同的浏览器上测试您的网站，以确保其效果很好，并且对所有浏览器看起来都很好。

>通用网络设计的一些示例是什么？

>

>

示例包括易于导航的网站，易于浏览钥匙板，使用键盘和简单的语言，为图像提供替代文本的网站，可用于图像和网站的替代网站，并为您提供图像和网站。这些功能使网站更容易访问和适用于所有用户，包括残疾人。

>

>通用的Web设计如何使业务受益？

通用Web Design通过提高用户体验，提高客户满意度并扩大潜在客户群来使业务受益。通过使其网站更容易访问和用户友好，企业可以吸引更多的受众，包括残疾人。这可能会导致流量增加，更高的转换率和提高客户忠诚度。

>有什么资源可以更多地了解通用Web设计？

>

有很多可用于了解通用Web Design的资源。其中包括在线教程，网络研讨会，书籍和课程。一些在通用网络设计上提供资源的知名组织包括万维网联盟（W3C），Web可访问性计划（WAI）和国家残疾与教育访问中心（NCDAE）。

>如何在现有网站中实现通用的网站？在现有网站上实现通用网站？这可能包括添加图像的替代文本，使网站使用键盘导航，使用逻辑和一致的布局以及为视频提供字幕。在不同的设备和浏览器上测试网站也很重要，以确保更改改善了用户体验。

>通用网络设计的未来是什么？

通用网络设计的未来可能会更加重视可访问性和包容性，因为越来越多的企业认识到使所有用户都可以访问其网站的重要性。人工智能和机器学习等技术的进步也可能在使网站更容易访问和用户友好方面发挥作用。此外，可能还有更多的法规和标准，以确保每个人都可以访问和使用网站。

以上是通用网页设计中的流行错误的详细内容。更多信息请关注PHP中文网其他相关文章！