首页< / > 博客< / > 网页设计< / >如何让你的网站更容易访问的10个有用的建议 如何让你的网站更容易访问的10个有用的建议 通过WebFX团队 阅读时间约15分钟 WebFX团队由450多名数字营销、SEO、网页设计和网页开发、社交媒体等领域的专家组成。他们一起帮助WebFX的客户从网络上赚取了超过30亿美元的收入——而这仅仅是在过去的五年里。 在设计网站时，我们经常忽略的一个最容易被忽视的方面是网页可及性< / >．有一种误解，认为网页的可访问性需要牺牲美学，或者认为不值得付出努力。然而，随着用户访问网络的方式越来越多，创建高度可访问和通用的设计，可以在尽可能多的方式查看是一个网站，甚至是一个公司的成功至关重要。 让一个网站易于访问的好消息是，它并不像你想象的那么难。大多数网页可及性的指导方针< / >已经与网站开发实践密切相关。 想通过视频了解更多信息吗?点击播放按钮访问网页设计< / >我们在下面嵌入了视频。 这篇博文探讨了10种快速简单的方法，如何让一个网站在2022年及以后更容易访问。 如果你想的话让你的网站易于访问< / >如果需要帮助，可以向WebFX咨询。 与我们的网站无障碍设计服务< / >，以及我们的屡获殊荣的设计团队< / >，我们可以帮助您的企业启动和维护一个每个人都可以使用的网站。在线联系我们< / >或致电888-601-5359学习更多! 什么是网站易访问性? 网站易访问性的重点是让每个人都能访问互联网上的每个网站。近五分之一的人< / >在美国 有残疾的人生活，强调网站需要为有缺陷或残疾的用户提供访问服务。虽然屏幕阅读器、盲文终端和可选关键词等技术使残疾人浏览互联网成为可能，但公司可以在网站设计上更进一步。快速的设计改变可以帮助你的网站更容易被世界各地的人所访问。 为什么要让网站具有可访问性? 你想让你的网站具有可访问性，有以下几个原因: 让你的目标受众平等地访问你的网站、服务和内容 保护你的公司免受罚款和诉讼< / >由于无法访问的网站 展示你的品牌致力于服务于你的目标受众中的每一个人 通过接触和服务你的目标受众中更大的市场来发展你的业务 公司很少故意让残疾人无法访问他们的网站。事实上，许多人想要做一个可访问的网站，但当涉及到这类项目所需的成本和资源时，他们想要做研究。 如何让你的网站易于访问 如果你已经准备好学习如何让你的网站易于访问，那么就从这10个技巧开始吧: 1.使用有意义的标题属性 标题属性可以看作是描述点击超链接的用户所处位置的简短摘要。如果title属性与链接文本相同，就没有帮助了，比如下面的例子: < a href = " portfolio.html " title =“投资组合" >投资组合< / > 这是为什么呢?因为对于屏幕阅读器用户来说，这是多余的，没有给他们任何额外的价值。 在上面的例子中，尽管网页可访问性和Section 508验证器不会让你通过他们的自动化测试，但是去掉title属性实际上会更好。对于上面的例子，一个更好的title属性是: 投资组合< / > 2.把重要的互动元素放在网页上方 这里有一个简单的网页易访问性练习:识别用户需要访问的重要超链接和用户界面控件。然后计算你需要按多少次Tab键才能找到它。你够快了吗? 还是你疯狂地按Tab键?当您按下Tab键时，您是否能够看到界面控件当前关注的是哪个超链接?现在想象一下，你不能使用传统的点对交互设备，比如鼠标;在这种情况下，为了得到一个想要的交互元素，你必须遍历网页上在它之前出现的元素。 这让你对手功能受限或没有手功能的人如何使用网页有了部分了解。很简单:把重要的链接和其他交互元素放在网页的上方。无论如何，这是一个很好的做法，因为大多数网站用户，无论身体或心理能力，都希望重要的项目靠近网页的顶部。 3.不要用相同的文本开始标题属性 你经常会看到标题属性为这样的超链接元素: < a href = " / " title =“链接到home"> home products 如果标题属性以相同的文本开头，则很难使用内置在屏幕阅读器中的搜索功能。 4.正确使用标题 标题标签允许屏幕阅读器用户跳转到他们感兴趣的部分。网页上的标题是网页的大纲;使用一个< h2 >后一个<标题>元素表示是前一小节的一个小节<标题>．我们很多人都忽略了标题，包括我< / >． 在我误用标题元素的每一个例子中，我都找不到一个合理的解释——你也找不到。这个简单的网页可访问性指南可以为使用屏幕阅读技术的视力缺陷人士带来奇迹。把一个很长的网页分成带标题的逻辑子部分，可以更容易找到你感兴趣的位置。 想象一下，在阅读一篇文章的第一段时，你马上想要留下评论，而评论表单位于网页底部的某个地方。对于视力正常的用户来说，这是小菜一碟:你只需要向下滚动并视觉定位网页表单。但在像你现在看到的这样内容丰富的网站上，评论表单实际上是在HTML结构的中间位置，尽管从视觉上看，它是在网页的底部。 如果没有标明网页表单从哪里开始的章节标题，屏幕阅读器用户将不得不费力阅读大量内容才能找到表单。在Six revision中，第3级标题“Leave a Comment”将允许屏幕阅读器用户快速跳转到它。 5.使用独特而有意义的页面标题 屏幕阅读器用户在网页完全加载后遇到的第一件事就是你的<标题>标签。这是你能做的最糟糕的事，除了没有<标题>标签，就是让它们在你所有的网页上都是一样的。这使得依赖于你的HTML标记的用户很难确定他们在什么页面上，或者他们点击的链接是否与他们之前在的网页相同。 如果你的页面标题是相同的，或者如果你没有页面标题，屏幕阅读器用户总是需要阅读内容，才能确定他们在他们想要的网页上。保持页面标题简洁而有意义。包含重复文本的好的页面标题是: About Us - Our Store 所有文章:Our Store Our Store: Home 6.使用跳过导航 屏幕阅读器用户必须从上到下阅读HTML文档，而不能扫描网页以寻找他们感兴趣的信息。跳过导航< / >允许屏幕阅读器用户和不会使用鼠标的人跳过长长的链接列表，如网站上的主导航。跳过导航是一个简单的链接，在你的网页顶部，当点击，定位你到内容部分。 通过使用CSS将链接移到浏览器视口之外，可以将此链接隐藏起来，不让身体健全的用户看到。这里有一个例子:假设你有下面的HTML结构，你想要有一个跳过导航，将阅读器定位在主内容区域(div#内容）. 李< ul id = "导航" > < > < a href = " Home " title = " " >家< / > < /李> <李> < a href = " about.html " title = " " >对< / > < /李> <李> < a href = " blog.html " title = " " >博客< / > < /李> <李> < a href = " portfolio.html " title = " " >组合< / > < /李> <李> < a href = " contact.html " title = " " >与< / > < /李> < / ul > < div id = " left " > < h1 >我的朋友< / h1 > < ul > <李> < a href = " http://blogofafriend.com/ " title = " " >博客的朋友< / > < /李> <李> < a href = " http://friendofablog.com/ " title = " " >一个博客的朋友< / > < /李> < / ul > < / div > < div id = " #内容" ><标题>页面标题< / h1 >…< / div > 你可以把你的跳过导航链接放在无序列表的正上方，像这样: 跳过导航李< ul id = "导航" > < > < a href = " Home " title = " " >家< / > < /李> <李> < a href = " about.html " title = " " >对< / > < /李> <李> < a href = " blog.html " title = " " >博客< / > < /李> <李> < a href = " portfolio.html " title = " " >组合< / > < /李> <李> < a href = " contact.html " title = " " >与< / > < /李> < / ul > < div id = " left " > < h1 >我的朋友< / h1 > < ul > <李> < a href = " http://blogofafriend.com/ " title = " " >博客的朋友< / > < /李> <李> < a href = " http://friendofablog.com/ " title = " " >一个博客的朋友< / > < /李> < / ul > < / div > < div id = " #内容" ><标题>页面标题< / h1 >…< / div > 一些网站决定保持跳过导航链接可见，但如果你宁愿隐藏它对视力正常的用户，你可以使用CSS缩进链接外的网页浏览器视口: # skipnav{:绝对;上图:-10000像素；｝ 上述技术的缺点是，尽管它适用于屏幕阅读器用户，但它不能帮助不会使用鼠标的用户，因为他们不能使用Tab键导航到跳过导航链接。对上述方法的改进可以在WebAIM上找到:通过键盘焦点显示的链接< / >．跳过导航很容易实现，但是对于在主要内容区域上面有很多内容的网页来说非常有用。 WebAIM有一个非常彻底的跳过导航的讨论< / >其中包括您应该阅读的几种技术(及其优缺点)。 7.为表单元素添加标签 HTML网页表单是与网站交互的主要方式。由于web表单的重要性，确保使用正确的标记对于通用设计是至关重要的。用有意义和描述性的文本标记输入元素。 这可以让用户清楚地知道他们应该提供什么信息。 <标签=“searchbox”>输入关键词进行搜索: id = " searchbox "name = " searchbox＂type = " text " / > 使用CSS，您可以将标签元素样式化为图标，或者通过将其推出浏览器视口将其隐藏在普通视图中(如果确实需要的话)。 8.在禁用CSS和JavaScript的情况下测试你的网页 要判断一个网站对那些无法在电脑显示器上看到内容的用户的访问友好程度，最简单的方法之一就是关闭CSS和JavaScript。为什么?使用CSS，我们可以将元素放置在任何我们想要的位置，而不管它们在实际文档对象模型中的什么位置。 使用JavaScript，我们可以根据用户的操作，通过隐藏、删除和显示页面元素来操作它们。禁用这两种web技术可以让您查看是否所有的网页内容都是可访问的。它还可以显示你的网页是否以最佳的方式组织。 9.看看使用辅助技术是什么感觉 也许要完全理解web上的通用设计，最好的方法是看一个人使用辅助技术的网站。如果你不知道有什么人有某种形式的残疾影响了他们使用网络的能力，网上有许多模拟器至少可以帮助你部分了解辅助技术是如何渲染和与网站交互的。对于屏幕阅读器模拟，可以尝试webywhere，这是密歇根大学和罗切斯特大学合作开发的一个网络工具。 如果你想感受盲人和网站互动的感觉:记住几个webywhere使用的快捷键。使用webywhere导航到您的站点。关掉显示器，拔掉鼠标插头。 最后，试着阅读你所在的网页并与之互动。要查看您选择的颜色是否对视力障碍患者普遍适用，请查看评估颜色的工具列表< / >我很久以前整理的。此外，还有许多工具可以帮助你根据常见的网页可访问性标准和指南来验证你的工作。 它们有很多，而且大多数好的都是免费的。看到这篇文章:10个评估网页设计易访问性的工具< / >． 10.网页可访问性并不是关于降低整体用户体验 我想分享的最后一个建议是更多地从哲学的角度来考虑网页的可访问性。我们中的许多人认为达到高水平的网页可访问性意味着它是以一般/平均用户体验为代价的。这不是． 它是关于提供具有不同复杂程度的多个接入点。我是在看各种各样的游乐场设备时学到这一课的。我注意到这并不是关于降低操场设备中的障碍的难度，而是关于提供不同难度级别的入口点。 研究下面的丛林吉姆，它为用户提供了几个访问点。 从照片猿< / >有几个潜在的点可以进入游戏设备。身体健全的儿童如果想接受更高层次的挑战，可以使用难度更高的路线，而行动障碍儿童可以使用通道路线。 这个概念对网页设计有什么意义?它的意思是它不是关于不使用Flash内容，因为它是臭名昭著的难以访问，这是关于确保用户有困难与Flash内容交互有一个替代的方式来获得相同的信息。这不是关于不使用Ajax是因为屏幕阅读器无法解析客户端脚本的异步DOM操作。 内容更改而无需重新加载页面)，这是关于向用户解释页面将在执行特定操作时更新，而他们可能看不到它，或者为他们提供另一种体验(就像《Jungle Jim》)。记住这些技巧将确保至少部分访问你的网站和网络应用程序。如果有一件事你应该从阅读这篇文章中得到，那就是网页的可访问性并不是很难与你的过程集成，并且大部分，如果不是所有的这些技巧，应该已经成为你的网页设计和网页开发最佳实践的一部分。 了解更多关于如何使一个网站更容易访问 要使网站普遍可访问，有许多方法，集成的困难程度各不相同。上面提到的只是其中的一小部分。即使你今天只花几个小时来阅读下面的资源，你也会学到很多关于网页可访问性的知识。 浏览以下资料，了解如何让网站更容易浏览: 网页易读性简介< / > W3C Web Accessibility Initiative小组为那些想了解Web Accessibility但不知道从哪里开始的人提供了介绍性级别的文档。 WebAIM< / > WebAIM (Web Accessibility In Mind)促进了网页的通用设计，并有大量关于网页易访问性的文章;只要研究一下网站的设计和HTML/CSS源代码就能让你对什么是无障碍网站有个概念。 深入的可访问性 这本在线书籍被设计成一个30天的课程，每天教育读者一种易访问性技巧，但你可以一口气读完它，一般的读者可能只需要几个小时就能读完。 残疾人如何使用网络< / > 一份关于万维网联盟的文件，向读者概述残障人士如何使用网络。 让你的网站可以使用WebFX访问 一个可访问的网站对当今的企业来说至关重要。如果你不做一个可访问的网站，你的公司不仅面临诉讼和罚款的风险，而且还有机会与你的目标受众中的每一个人联系。创建一个易于访问、用户友好的网站，让你的业务增长。 在线联系我们< / >或致电888-601-5359了解我们的易访问网页设计服务可以如何帮助! 你网站的SEO怎么样? 使用我们的免费工具，让您的分数计算在60秒内。 获得SEO评分 表的内容 什么是网站易访问性?< / > 为什么要让网站具有可访问性?< / > 如何让你的网站易于访问< / > 了解更多关于如何使一个网站更容易访问< / > 让你的网站可以使用WebFX访问< / > 你网站的SEO怎么样? 使用我们的免费工具，让您的分数计算在60秒内。 获得SEO评分 WebFX职业 加入我们的使命，为全球的企业提供业界领先的数字营销服务，同时建立您的个人知识和个人成长。 我们招聘! 视图30 +职位空缺! 与我们合作 网页设计服务< / > RainmakerFX< / > Web设计服务< / > 着陆页服务< / > 继续阅读 网页设计资源< / > 网页设计的博客< / > 一个网站的成本< / > 响应网页设计< / > 通过电子邮件获取帖子 当我们发布一个新的博客文章时，成为第一个知道的人! 每一天 一周一次 得到更新 以前的< / > 下一个< / > 最重要的< / div >< / div >< / div >< / div >
