当前位置:首页 > 建站教程 > 如何设计无障碍网站(完整指南)

如何设计无障碍网站(完整指南)

2年前 (2024-12-11)建站教程770

如何设计无障碍网站(完整指南)

无论您经营的是电子商务网站还是网络开发业务,您都希望吸引尽可能多的访客访问您的网站。这意味着要通过优先考虑网站的可访问性,确保尽可能多的人可以使用您的网站。

网站的可访问性包括确保每个人都能使用您的网站,包括那些有残疾和障碍的人。您可以利用各种资源、工具和技巧,让创建包容性网站变得更加容易。

在这篇文章中,我们将介绍关于网站可访问性的所有知识:为什么它如此重要,如何检查网站当前的可访问性水平(和障碍),以及设计高可访问性网页的完整指南。

什么是网站无障碍性?

网站的可访问性是指残障人士可以使用网站的程度。这包括盲人或低视力者、聋人或重听者、行动不便者、认知障碍者以及其他残疾人士。这包括设计网站,使其内容可供所有人使用,包括可能使用屏幕阅读器、语音识别软件或专用输入设备等辅助技术的人。

这一理念不仅仅是帮助个人。它是关于拥抱网络用户的多样性,并认识到平等访问互联网的重要性。通过优先考虑可访问性,您不仅可以扩大受众范围,还可以促进包容性和社会责任。

网站的可访问性也符合各种法律标准,如美国的《美国残疾人法案》(ADA)和全球的类似立法。这些法律要求某些网站,尤其是公共机构和企业的网站,必须对残疾人无障碍,以避免歧视。

谁来管理和执行网站无障碍规则和法律?

管理和执行网站无障碍规则和法律的责任由不同的政府和非政府组织分担,每个组织都在建立和维护本文后面将介绍的无障碍标准方面发挥着重要作用。

  • 政府和政府机构。在美国,司法部(DOJ)主要负责执行《反歧视法》,其中包括网站无障碍规则。其他国家也有自己的政府机构来监督类似的法律法规。
  • 国际标准组织。万维网联盟(W3C)制定了《网页内容可访问性指南》(WCAG),这是一套国际公认的标准,概述了如何让残疾人更容易访问网页内容。这些准则被广泛接受为网络无障碍的基准,并经常在法律要求中被引用。
  • 宣传团体和非政府组织。非营利组织和倡导团体积极推动网站无障碍化,通常会提供资源、进行审核,有时还会推动对违规网站采取法律行动。
  • 法律系统。法律系统通常会介入不遵守网站无障碍法律的案件。可以对不符合规定标准的组织提起诉讼和采取法律行动,特别是《美国残疾人法案》规定的标准。法律诉讼可以开创重要的先例,为今后无障碍规则的执行制定标准。

值得注意的是,网络无障碍环境在不断变化。我们都有责任了解最新的新闻、法律发展以及影响网站管理员的其他变化。

什么是网站无障碍标准?

根据 WCAG,在创建无障碍网站时必须遵循四项原则。这些原则规定,网站必须

  • 可感知。访问者必须能够感知或理解并知晓网站上的内容和信息。比如,可以访问alt文本。
  • 可操作。访问者必须能够不受干扰地使用网站的每一部分。一个布局合理、条理清晰的导航菜单可以实现这一点。
  • 可理解性。网站上的所有内容,无论是书面的还是以其他方式呈现的,都应易于理解。简洁明了的语言和干净整洁的页面可以用来传达信息。
  • 稳健。网站的基础(如 HTML 代码)应易于所有访问者阅读和理解,包括屏幕阅读器等辅助技术。另一个例子是针对手机和平板电脑等各种设备优化网站。

网站无障碍标准

网上无障碍障碍示例

这些常见的障碍会妨碍残疾用户访问网站或与网站互动。以下是一些障碍示例及其对用户的影响。

  • 图片缺少alt文本。如果网站上的图片没有替代文本(alt 文本),视障用户使用的屏幕阅读器就无法解读图片的内容。这会导致用户无法理解或错过关键信息。
  • 键盘导航不足。许多有运动障碍的用户依赖键盘导航而不是鼠标。不支持键盘导航或布局复杂的网站会让这些用户无法访问。
  • 色彩对比度差。文字和背景颜色对比度不足会使有视觉障碍(包括色盲)的用户难以阅读网站内容。这可能会使某些用户几乎看不到文本。
  • 非描述性链接文本。在链接文本中使用 “点击此处 ”这样含糊不清的短语,无法提供足够的链接目的地信息,尤其是对于脱离上下文浏览链接的屏幕阅读器用户而言。
  • 音频和视频内容缺乏字幕或文字说明。耳聋或重听用户依赖于音频和视频内容的字幕或文字稿。如果没有这些,他们可能会错过关键信息。
  • 复杂和不一致的导航。不连贯或过于复杂的网站导航会让人感到困惑,尤其是对有认知障碍的用户而言。简单、可预测和一致的导航有助于更好地理解和使用。
  • 有时间限制的内容和互动。超过一定时间就会消失的内容或需要快速互动的内容可能会对有认知障碍或运动障碍的用户造成障碍,因为他们可能需要更多的时间来阅读或与内容互动。
  • 使用专业术语或复杂语言。过于复杂的语言或行业术语对于有认知障碍的用户或母语不是网站语言的用户来说,可能是一个很大的障碍。

为什么要优先考虑网站的可访问性

据世界卫生组织(WHO)估计,全球有 15% 的人口(多达 10 亿人)患有残疾。随着寿命的延长,残疾率也在不断上升,导致慢性健康状况加剧。残障人士理应能够获得与非残障人士相同的信息,这就是为什么我们所有人都必须共同努力,使数字内容具有无障碍性,并努力消除网上无障碍性的障碍。

网站的可访问性要素

作为网站所有者,重要的是要确保您没有排斥残障人士,即使是在无意中。美国残疾人权利法》是一部民权法律,禁止企业和组织基于残疾原因进行歧视,因此,如果您的网站不是人人都能访问,您就可能陷入法律纠纷!但是,法律合规性并不是您在设计网站时将可访问性放在首位的唯一原因。

研究表明,更具多样性和包容性的公司,其财务回报高于行业平均水平的可能性高达 35%。

无障碍网站设计不仅能让残障人士轻松浏览网站,其设计原则还能切实改善网站所有访问者的用户体验。

创建一个无障碍网站并不难,也不耗时。只需采取几个简单的步骤,就能大大提高网站的可访问性。这样,您就可以在扩大受众范围的同时,为网络无障碍做出贡献。您甚至可以激励其他人也这样做!

如何检查网站的网络无障碍性

在介绍设计无障碍网站的技巧和步骤之前,我们最好先了解一下您的网站目前的状况–它在无障碍标准和最佳实践方面的表现如何,以及您可能需要通过更改或重新设计来克服哪些无障碍障碍。

检查网站可访问性的方法有很多种。下面我们就来探讨几种最简单、最常用的方法。

使用在线可访问性检查器

检查网站可访问性的最快、最简单的方法之一是使用在线可访问性检查器,如 WAVE Web 可访问性评估工具 。

WAVE Web 可访问性评估工具

WAVE 是一套评估工具,您可以用它来评估您的网页和内容,使它们更便于残障人士访问。WAVE 工具可检查是否符合 WCAG 等无障碍标准,但如果您想更进一步,也可以方便人工审核您的内容。

要使用 WAVE,只需在“网页地址”字段中输入要评估的网页 URL,然后点击箭头按钮。WAVE 就会生成一份报告,显示该网页上的任何错误或潜在的可访问性问题。您还可以为 Chrome、Firefox 和 Edge 安装 WAVE 浏览器扩展,直接在网页浏览器中测试可访问性。

除错误报告外,WAVE 还会提供反馈,告诉您如何改进网页以提高其可访问性。例如,它可以指出哪些图片缺少alt文本,哪些结构元素的组织方式可能会让网站访问者感到困惑。

安装无障碍浏览器扩展

WAVE 并不是唯一一个可以自动检查网站无障碍问题的浏览器插件,您还可以下载并使用许多其他插件。在 Chrome 浏览器和 Firefox 浏览器中,可访问的富互联网应用(ARIA)扩展是一个很受欢迎的选择。

ARIA DevTools 扩展是一个免费的开源无障碍资源,允许用户自定义与网页内容交互的方式。ARIA 旨在提高网页对残障人士的可用性,并使网页更易于屏幕阅读器等辅助技术访问。

ARIA 通过提供一系列属性来提高网站 HTML 元素的可访问性。例如,“aria-label”属性可以作为以其他方式无法访问的元素的标记,而“aria-describedby ”属性则可用于提供解释。

要使用 ARIA 扩展,请从浏览器的扩展市场安装。在开始运行之前,您可能需要启用它。

ARIA DevTools

手动检查常见的无障碍问题

另一种检查无障碍问题的方法是使用手动方法。当然,这可能比使用在线工具和扩展程序更耗时。

不过,如果进行手动检查,可能会比某些数字工具更彻底。另外,这种方法是免费的,所有网站所有者都可以使用。

如果您决定手动查找可访问性问题,您可能需要使用一份检查表来帮助您开始并确保尽可能彻底。WebAIM 提供了一份全面的 WCAG 2 检查表,其中包含以下条目:

  • 所有人(包括残障人士)都可以访问所有内容。
  • 所有图片都正确标注了替代文本。
  • 仅使用键盘即可浏览网站。
  • 网站上的所有视频或音频内容都有文字说明或字幕。
  • 网站没有可能导致阅读困难的色彩对比。
  • 网站内容可由多种用户代理(包括辅助技术)解读。
  • 内容不需要特定的输入类型,如仅触摸或仅键盘,但支持其他输入类型(如在移动设备上使用键盘)。

聘请网络可访问性专家审核您的网站

如果您有资源,第四个选择是聘请专家审核您的网站。这通常是对网站可访问性进行最全面审查的最佳方式,对于那些希望将可访问性作为其在线业务核心价值的人来说,这尤其是一个不错的选择。

如何设计无障碍网站(完整指南)

现在到了有趣的部分:设计和构建网站,让每个人都能轻松使用和浏览。开始网站无障碍之旅令人兴奋,以下步骤将指导您完成设计过程,并帮助确保您的网站符合法律要求和技术标准,使所有用户都能访问。让我们开始吧。

1. 确保网站允许键盘导航

常见网站快捷键

键盘导航是网站无障碍的基石。许多用户,尤其是有运动障碍的用户,依靠键盘而不是鼠标来浏览网站。确保您的网站支持键盘导航,就能让更多用户(包括依赖辅助技术的用户)访问网站。

最佳实践:

  • 确保网站的选项卡顺序符合逻辑。这意味着当用户按下 Tab 键时,焦点应按照合理的顺序(通常是按照页面的视觉布局)在交互元素中移动。
  • 当用户使用键盘导航时,要有清晰的视觉指示器显示当前哪个元素拥有焦点。这可以是边框、颜色变化或其他明显的风格变化。
  • 在每个页面的顶部加入“跳转到主要内容”链接。这可以让依赖键盘的用户绕过重复的导航链接,直接访问主要内容。
  • 如果您的网站使用下拉菜单,请确保它们可以使用键盘命令进行导航和激活。这包括能够展开和折叠菜单以及选择其中的项目。
  • 使用自定义键盘快捷方式可以提高可用性,但要注意不要与现有的浏览器或屏幕阅读器快捷方式相冲突。为用户明确记录自定义快捷方式。
  • 确保键盘用户不会被网站的任何部分卡住。他们应能仅使用键盘浏览所有元素。

2. 让内容易于观看和聆听

网站可访问对比度检测

要让有视觉和听觉障碍的用户也能访问您的网站,就必须确保网站内容易于观看和聆听。这包括盲人、低视力者、色盲者、聋人或重听者。

最佳做法:

  • 在文字和背景之间使用高对比度的颜色组合,确保文字易于阅读。避免使用冲突色或混合色。同时,使用易读的字体大小和样式。
  • 使用对比度检查器等在线工具帮助你选择高对比度的调色板,以实现良好的视觉可读性。
  • 确保用颜色传达的信息在没有颜色的情况下也能使用,比如通过文字标签或图案。这对色盲用户尤为重要。
  • 允许用户在不破坏网站布局的情况下调整文字大小。
  • 对于视障用户,应确保任何音频内容都清晰明了,节奏明快,描述性强,足以传达所有必要的信息。
  • 使用 ARIA(可访问的富互联网应用)角色和地标。这可以帮助屏幕阅读器用户更有效地理解布局和浏览内容,尤其是在复杂的网络应用程序中。

3. 提供文本替代

文本替代方案可以让视觉和听觉残障人士访问网站的非文本内容。这些替代文本提供了通过图像、视频和音频文件传达的信息的等效文本,确保所有用户(包括使用屏幕阅读器或其他辅助技术的用户)都能获取相同的信息。

文本替代

另一个好处是,alt 文本可以帮助优化网站,使其在搜索引擎中的可见度更高。您可以用它来加入与图片相关的经常被搜索的关键术语。

最佳实践:

  • 网站上的每张图片都应有相应的alt文本,以准确、简洁地描述图片的内容或功能。该描述应与图片向视力正常的用户传达的信息或目的相同。
  • 在 WordPress 中通过媒体库为图片添加 alt 文本。
  • 为视频提供字幕,字幕不仅要描述语音内容,还要描述其他相关声音和非语音信息。转录文本也很重要,它提供了所有音频内容的文本版本,包括口语和其他相关声音。
  • 对于视频,应包括叙述视觉信息的音频描述。这一点对于视觉内容所包含的重要信息无法仅通过音频传达的内容尤为重要。
  • 确保所有链接和按钮都以文字为基础,或有文字替代,以便屏幕阅读器用户清楚它们的功能。避免将图像作为传达重要操作或链接的唯一手段。
  • 对于图表和图形等复杂的视觉内容,应提供基于文字的摘要或说明,解释所展示的数据或信息。
  • 表单等交互式元素应有清晰的描述性标签。这有助于用户了解每个表单字段的用途以及如何与之交互。

4. 以适应性强的方式组织和结构化内容

以适应性强的方式组织和构建内容,有助于确保所有用户,无论他们以何种方式访问网站,都能以连贯、合乎逻辑的方式接收信息。这种方法对依赖屏幕阅读器等辅助技术的用户和有认知障碍的用户都有好处,因为他们可能会觉得复杂的布局或不一致的结构令人困惑。

最佳实践:

  • 使用 HTML5 语义元素,如<header><footer><nav><article> 和 <section> 来清晰地组织内容。这些元素可为辅助技术提供上下文,使其能够向用户传达网页的结构和布局。
  • 使用标题(H1、H2、H3 等)对内容进行分层和逻辑结构化。确保标题具有描述性,并能清晰显示后面的内容。
  • 灵活设计网站布局。这意味着它应能适应不同的屏幕尺寸和方向,而不会丢失信息或功能。这对于需要放大的低视力用户或使用移动设备访问网站的用户尤为重要。
  • 如果使用表格显示数据,请确保用行和列标题正确标注。避免将表格用于布局目的,因为这会让屏幕阅读器用户感到困惑。
  • 使用有序(编号)和无序(项目符号)列表对相关项目进行分组。这有助于屏幕阅读器传达内容的结构和组织。

使用Heading标题

5. 提供消费时基媒体的其他方式

时基媒体包括音频和视频内容。聋人、听力障碍者、盲人或低视力者需要其他方式来获取定时媒体。

最佳实践:

  • 为所有视频内容提供封闭式字幕。字幕应准确反映有声对话,并描述对理解内容非常重要的相关非对话音频提示,如音乐或音效。
  • 为音频和视频内容创建文字说明。
  • 在视频中加入音频描述,对视频的视觉效果进行叙述。
  • 确保网站上使用的媒体播放器可以访问。媒体播放器应可使用键盘导航和操作,其功能(如播放、暂停和调节音量)应清晰标注,屏幕阅读器用户应可理解。
  • 对于关键的视频内容,可以考虑提供手语翻译。这可以是一个单独的视频轨道,也可以是视频中的画中画显示,提供口语内容的手语翻译。
  • 包括控制播放速度、暂停、后退或快进内容的选项。这种灵活性对有认知障碍、学习障碍或需要更多时间处理视听信息的用户尤其有益。
  • 从 WordPress 5.6 开始,您可以使用网络视频文本跟踪格式(WebVTT)功能为 WordPress 视频添加标题和字幕。要使用该功能,只需在页面上插入一个视频块,然后在水平导航菜单中选择文本轨按钮即可。

6. 精心设计表单

许多网站都需要表单,从联系信息到在线购买,表单无所不能。设计合理的表单可确保所有用户都能输入信息、做出选择,并了解提交过程中可能出现的任何错误。

最佳做法:

  • 每个表单字段都应有一个清晰的描述性标签,并通过程序与字段链接。这样可以帮助屏幕阅读器用户了解所需的信息类型。
  • 当用户出错时,如遗漏必填字段或输入无效数据,应清楚地识别错误并用文字加以说明。这有助于用户了解需要更正的内容。
  • 确保表单的制表符顺序符合逻辑顺序,使用户可以使用键盘以可预测的方式浏览表单字段。
  • 当用户在表单中切换时,应该有明显的提示,例如边框或背景颜色的变化,表明当前哪个字段是焦点。
  • 使用字段集和图例对相关字段进行分组。这对屏幕阅读器用户特别有帮助,因为它提供了上下文,有助于理解不同字段之间的关联。
  • 如果您的表单包含下拉菜单、复选框或自定义控件,请确保它们完全无障碍,并且可以使用键盘导航和选择。
  • 必要时,为字段提供说明或示例,尤其是那些需要特定格式数据的字段,如日期或电话号码。
  • 如果表单有填写时间限制,请为用户提供延长时间的方法,因为有些用户可能需要更多时间来阅读和填写表格。
  • 确保表单可在不同设备和屏幕尺寸下使用,特别是对于可能放大或使用移动设备的用户。
  • Formidable Forms 等插件内置了有用的辅助工具。

表单设计最佳实践

7. 让访客有足够的时间浏览网站

有些网站访问者可能阅读速度较慢、有认知或学习障碍,或者使用辅助技术,需要更多时间来浏览和解释内容。确保他们有足够的时间阅读、观看和使用网站上的所有内容。

最佳实践:

  • 如果您的网站有时间限制的功能或内容(如定时测验、会话超时表单或旋转木马),请为用户提供调整、延长或禁用它们的方法。
  • 对于任何移动、闪烁或滚动的内容,以及自动更新的信息(如新闻快报),提供允许用户暂停、停止或隐藏的控制。
  • 避免在没有用户启动的情况下自动更新内容,因为这会让屏幕阅读器用户感到无所适从。
  • 如果需要超时(如银行网站出于安全原因),应在超时前警告用户。这样他们就有机会在不丢失数据的情况下延长会话时间。

8. 避免闪烁或闪动内容

避免闪烁或闪动的内容可以让那些容易因闪烁的灯光或图案而导致癫痫发作的用户更容易访问你的网站,这种情况被称为光敏性癫痫。此外,快速闪烁的内容可能会分散用户的注意力,甚至让用户感到痛苦,从而造成不愉快或无法访问的网络体验。

最佳做法:

  • 原则上应避免在一秒钟内闪烁超过三次的内容。这条准则是《网页内容可访问性指南》(WCAG)的一部分,有助于降低发作的风险。
  • 如果您的网站必须包含闪烁或闪烁的内容(出于艺术或信息方面的原因),请在显示内容之前提供明确的警告。这可以让对照片敏感的用户避免接触此类内容或做好准备。
  • 注意网页设计中的动画和过渡效果。确保它们是微妙的,不涉及闪烁或快速移动。尽可能提供减少或关闭动画的选项。
  • 不要使用闪动内容来吸引眼球,可以考虑使用大胆的颜色、图案或静态图形等替代方法,这些方法同样有效,但不会给用户带来风险。
  • 如有疑问,请咨询网站可访问性专家,他们可以检查网站是否存在潜在问题,并提出更安全的替代方案。

9. 提供清晰的导航

清晰的导航设计

清晰的导航是网络无障碍的基石。它能让所有用户(包括残障用户)在网站上轻松找到自己的位置。良好的导航尤其有利于残疾用户和依赖辅助技术的用户。清晰、可预测的导航结构可以帮助用户了解他们在网站上的位置,如何到达他们想要的目的地,以及如何返回之前访问过的页面。

最佳实践:

  • 保持整个网站导航布局的一致性。一致性有助于用户学习并记住如何浏览网站,减少混乱和挫败感。
  • 将相关的导航项目组合在一起。这可以通过条理清晰的菜单、清晰的栏目标题或提供网站结构概览的网站地图来实现。
  • 确保所有菜单都可通过键盘导航和屏幕阅读器访问。这包括下拉菜单和其他动态内容。
  • 对于有多层内容的网站,应使用面包屑路径。这可以为用户提供从主页到当前位置的清晰路径,并帮助用户轻松导航回到之前的部分。
  • 实施强大的搜索功能,尤其是对于大型网站。这可以让用户快速查找信息,而无需浏览多个页面。

10. 使内容清晰易懂

让网站内容清晰易懂可以帮助有残疾、学习困难或母语不是网站语言的访问者。清晰、直观的内容可确保更多受众获取信息,并帮助所有用户快速掌握预期信息或操作。

最佳做法:

  • 用通俗易懂的语言撰写内容。避免使用复杂的句子、行话和专业术语。如果需要使用专业术语,应提供简单的解释或词汇表。
  • 使用标题和小标题,合理安排内容结构。这有助于用户(尤其是使用屏幕阅读器的用户)理解版面布局,更容易找到信息。
  • 保持段落和句子简短,切中要害。这种结构使内容更容易阅读和理解。
  • 使用要点或编号列表将信息分解成易于管理和消化的片段。这对说明或复杂信息尤其有用。
  • 保持网站布局和设计的一致性。字体、颜色和风格的一致性有助于用户更好地理解和浏览内容。
  • 在适当的情况下,使用图片、图标或图表来支持文本。视觉辅助工具可以帮助更清晰地传达复杂的信息,并使处理视觉信息比处理文字更有效的用户受益。
  • 让“行动号召 ”按钮或链接清晰明了。用户应该能够理解点击它们会发生什么。

11. 编写有用的错误提示信息

错误提示信息

有效的错误信息可以引导用户解决他们遇到的问题,这对残疾用户尤为重要,因为他们可能会发现理解和纠正错误更具有挑战性。清晰、翔实的错误信息有助于防止用户产生挫败感,确保所有用户都能成功地与网站进行交互并完成预期操作。

最佳做法:

  • 错误信息应明确说明问题所在。避免使用含糊不清或技术性语言,以免让用户感到困惑。例如,不要说“输入无效”,而是具体说明问题所在,如“电子邮件地址格式不正确”。
  • 尽可能将错误信息与建议的解决方案或接下来的步骤配对。例如,如果必填字段为空,错误信息应提示用户填写该字段。
  • 在视觉上突出显示发生错误的字段或区域。这可以通过改变边框颜色、添加图标或使用文本样式来实现。这对有视觉障碍的用户特别有帮助。
  • 在错误信息中使用友好、非技术性的语气。这种方法可以减少用户的挫败感和焦虑感,尤其是对于那些在浏览网站时已经很吃力的用户。
  • 将错误信息放置在靠近出错点的位置,最好是在相关表单字段的上方或旁边。这样可以让用户(包括使用屏幕阅读器的用户)更容易找到并理解错误。
  • 确保屏幕阅读器用户可以访问错误信息和指示器。使用 ARIA 角色和属性来传达错误的存在和性质。
  • 在整个网站中使用一致的方法来识别和显示错误。一致性有助于用户理解和预测错误的传达方式。
  • 对于复杂或重复出现的错误,提供额外的帮助选项,如客户支持联系信息。

12. 编写可解析的 HTML

最后,编写可被网络浏览器和辅助技术解析或正确处理的 HTML。结构良好、有效的 HTML 代码可以让屏幕阅读器和其他辅助工具准确解释并向用户传达内容。这种做法对于创建一个具有包容性且人人都能浏览的网络环境至关重要。

最佳实践:

  • 坚持使用标准 HTML 标记,避免使用专有标记或属性。这样可以确保所有浏览器和辅助技术都能普遍理解您的 HTML 代码。
  • 合理安排 HTML 文档的结构。使用合理的 HTML 元素顺序,并确保标题(<h1><h6>)、段落(<p>)、列表(<ul>,<ol>,<li>))等元素以及其他标准元素的使用得当。
  • 使用 HTML5 语义元素,如(header><footer><article><section><nav>)来定义网页结构。
  • 使用 HTML 验证器检查代码是否有错误或不一致之处。有效的 HTML 更容易被浏览器和辅助技术正确解释。
  • 将内容、样式和行为分开。样式使用外部 CSS,行为使用外部 JavaScript 文件,而不是内联样式或脚本。这种分离有助于保持 HTML 的简洁、可读性和可访问性。
  • 使用有意义的标题标签和元描述来传达页面的目的。
  • 使用 <html> 标签中的 lang 属性声明页面的语言。这有助于屏幕阅读器正确发音。

小结

网络可访问性的不断改进值得庆祝。毕竟,如果您运行的是 WordPress 网站,您就想让尽可能多的人访问,包括残障人士。幸运的是,设计一个无障碍网站完全在您的能力范围之内。

在这篇文章中,我们讨论了许多策略,您可以用来设计一个更便于所有访客浏览和使用的网站。例如,您可以确保您的网站对键盘导航友好,以便与辅助技术兼容。您还可以为所有视觉媒体使用alt文本和视频转录。最重要的是,当您遵循我们的指南时,您将支持更公平的网络体验,确保您的网站可供尽可能多的人使用。

文章来源:https://www.wbolt.com/make-your-website-accessible.html

扫描二维码推送至手机访问。

欢迎转载或分享本篇文章。

本文链接:https://www.jcba123.com/article/10618

分享给朋友:

“如何设计无障碍网站(完整指南)” 的相关文章

网站已运行多少天代码

<p>网站已运行<span id="iday"></span>天<script>function siteRun(d){var nowD=new Date();return parseInt((nowD.getTime()-Date.parse(d))...

使用 WP Downgrade 在线降级 WordPress 到旧版本!

我们都知道,每当WordPress有新本的时候,我们都可以在后台一键更新。但是有些时候,我们的主题或插件可能不兼容新版本的WP,这时候我们如果要降级为之前的旧版本,该怎么操作呢?下面一起来看看。 重要提示:不管是升级还是降级,操作前,请务必备份你的网站数据,尤其是网站的数据库,以防万一!...

WordPress 如何批量修改文章信息?

你是否遇到过如下几种状况: 博客更换域名,博客文章的内容也要跟着换 使用的图片地址更换了 写了很多文章,回过头来想切换作者 想删除某个可恶留言者的所有留言 想更改某个留言者所有留言的网站URL 想要禁用所有文章的pingback 想要禁用所有文章的评...

介绍使用WordPress时10个常用的MySQL查询

多数使用 WordPress 搭建的网站,其后台都是 MySQL 数据库,经常我们需要定制 WordPress 的功能,这里我们列表 10 个最有用的 WordPress 的数据库查询,你需要一个数据库的管理工具,例如 phpMyAdmin 或者 Navicat 等来执行这些 SQL 语句。...

8个好用的WordPress RSS Feed插件

8个好用的WordPress RSS Feed插件

什么是RSS Feed? RSS代表“Really Simple Syndication”,但它也可能意味着“丰富站点摘要”或“实时简单联合组织”。这是一种基于XML的内容格式,可向用户更新所有他们喜欢的网站上的最新新闻,文章,标题和内容。 由于已经存在了很长一段时间,因此许多人都认为RSS...

“丑陋”的单页网站如何做到每月赚取 5000 美元

“丑陋”的单页网站如何做到每月赚取 5000 美元

在线赚钱是许多自由职业人的梦想,但是当真正开始时,你会意识到有很多麻烦事要做,例如创建落地页、构建登录页面、撰写 USP(独特卖点)等等。 但有时候,我们也可以跳过这些琐事,并且仍然可以赚到很多钱。 比如 diskprices ,看起来像是用 HTML 制...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。