入门可访问性?拥抱HTML的力量
#html #网络开发人员 #a11y

对自己诚实 - 您刚开始学习Web开发时花了多长时间学习HTML?对于大多数人来说,鉴于该语言的灵活性和宽容的本质,通常1-2周足以理解基础知识并开始运行。然后,您进入更复杂的事情。

但是,当我们继续进行更复杂的事情时,我们经常会错过了解HTML免费提供的一些东西,尤其是内置的可访问性。因此,我想鼓励您重新访问HTML。它具有100多个不同的标签和各种属性。这些元素中的许多元素都具有使您的网站无需额外努力即可访问的功能(有时甚至更少)。

这里有10个技巧,可以开始写更多访问的HTML:

  1. 一些元素被指定为地标。其中包括<nav> <header> <footer><main>之类的东西。尽管它们看起来像是带有精美名称的Divs,但输入额外的几个字母可以帮助使用屏幕读者导航您的网站的人们更轻松地进入页面的不同部分。视力用户有能力扫描页面并找到他们想要的内容。屏幕读取器用户可以使用地标以类似的方式导航部分,而不必浏览页面上的所有内容。

  2. 与地标类似,正确的标题结构是屏幕读取器用户可以快速找到所需的信息的另一种方式。标题结构应基于层次结构,而不是样式。每个页面理想情况下应包含一个H1,然后包含多个H2S。如有必要,可以将这些H2分解为H3。只需从H2跳到H4,因为您希望标题是不同的尺寸。在这里,CSS是您的朋友。

  3. 专注于使用正确的语义HTML,其中该元素匹配其预期目的。如果您点击了一些东西,并且将您带到其他地方,那么您可能想要一个<a>元素。如果您单击某些内容并执行操作,例如打开和关闭菜单,则可能需要<button>。这些语义元素具有内置的功能,可以通过鼠标和键盘触发它们,而无需添加任何额外的代码。如果您使用DIV制作按钮,则需要自己添加所有额外的功能,这可能非常复杂且易于忘记。

  4. 编写清晰简洁的链接文本,以准确描述链接的目的地。避免使用模糊的术语,例如“单击此处”或“阅读更多”。链接即使读出上下文也应该是有意义的,以便用户知道链接将将其带到哪里。

  5. 提供视觉效果的替代文本。您页面上的所有图像和图标都需要描述那些可以看到它们的人。这通常称为替代文本,并添加到IMG元素中,并在此处使用Alt =您的描述。提供足够的信息来了解为什么图像在那里,对于图标,您通常需要考虑图像的功能,而不是它实际描绘的内容。例如,放大镜通常用于象征搜索和变焦。匹配该功能的替代文本比描述放大镜本身更有用。

  6. 确保输入具有标签,并且它们在编程上相互关联。这意味着什么?这意味着标签具有用于属性的一个,并且输入具有相同的ID,以表明它们已连接。这告诉屏幕读者和其他辅助技术,标签属于输入。

  7. 占位符并不能很好地替代标签,因为有人试图输入某些东西,它们就会消失。这可能很要求内存,尤其是如果占位符文本包含有关输入的格式的信息。输入旁边始终存在的清晰标签为每个人提供了更好的体验。

  8. 优先考虑键盘导航。对于依赖键盘导航的用户而言,这对于由于运动障碍而言至关重要。从页面顶部开始,然后开始浏览内容。您可以到达每个交互元素吗?您能看到您在选项情况时始终关注的位置,或者有时可见的焦点消失了吗?您可以使用Enter密钥和按钮或Enter键激活链接吗?通常,如果您有语义html,那应该不是问题。如果遇到问题,请返回并在可能的情况下改进HTML,或者您需要开始使用JavaScript添加适当的键盘支持。

  9. 如果没有更合适的语义元素,使用<div><span>非常好。 Divs和跨度是可访问性树看不见的,因此被屏幕阅读器和其他辅助技术忽略了。这使它们非常适合用于造型和定位元素,而无需使屏幕阅读器变得嘈杂。

  10. 属性也很有用。例如,将lang属性添加到<html>元素中,将诸如屏幕读取器(使用哪种语言)等辅助技术通知。然后,屏幕读取器将相应地调整输出并用正确的发音读取。

这些更改中的大多数需要额外的几秒钟,但它们可以对您的网站访问方式产生巨大的影响。为什么不只是选择上面建议的一件事情,而是使其成为今天的新习惯呢?从长远来看,随着时间的流逝,较小的改进。