注意：此帖子最初来自 Showwcase

想象这个

您目前在无处不在的网络上滚动，您的胃部抱怨。您最近一直在渴望拥有汉堡和薯条，因此您可以在谷歌搜索一些餐厅，并找到这家当地的餐厅，并看到令人垂涎的多汁汉堡，奶昔和脆皮薯条的令人垂涎的图像。当您单击“ Enter”按钮时，兴奋会充满您，但是在页面加载后，失望会在您身上洗掉。该网站杂乱无章，很难导航。这些图像缺少描述，让您想知道每个汉堡的外观。当您努力找到菜单或联系信息时，挫败感陷入困境，导致您终于将手举起失败，然后前往冰箱剩下的剩菜。我的朋友们，这是无法访问网站的情况。它破坏了像在线订购食物一样简单的东西。我知道，我知道，可访问性是一个可怕的词和一个复杂的话题。但是，我的编码人员不要害怕。在帖子中，我将向您介绍三种但不常见的可访问性技术，这些技术将使您能够创建网站和其他项目，这些网站和其他项目不仅具有视觉吸引力，而且最终将使您的用户免于混乱。

技术1：语义HTML5元素

还记得您经常在衣服的标签上看到的标签以及在编码会议期间经常吐的薯条包吗？语义HTML标签具有相似的目的。他们明确描述了代码线的目的。我知道您可能听说过<article>和<section>，但让我介绍一些通常不谈论的标签：

• <abbr>：此标签通常用于描述术语的缩写。这是看起来的样子：

<p>When you're writing <abbr>LGTM</abbr> in the comment section of someone's pull request, it could mean two things: <ul> <li> Let's get to merging!</li> <li> Looks good to me!</li> </ul> </p>

当您的网站或项目的内容引用特定公司或为像上述代码片段中的领域或社区的人定义行话时，最好使用此此事。

。

• <details>：此元素创建一个披露小部件，用户将其打开和关闭以查看信息。这是一个例子：

<details> <summary>Details</summary> You can pick whatever definition you'd like. </details>

通常与<summary>元素结合在一起。当您想在网站或项目中给出一些内容时，我强烈建议使用这些元素。

• <address>：此标签用于提供联系信息。在这里，它正在行动：

<p> Want to work with me? Contact me via the information below:</p> <address> <a href="janesmith@gmail.com
koude9 href="tel:+13165452398">(316)545-2398</a> </address>

如果您从事自由职业或经营业务，我强烈建议您将其用于您的项目或网站。

现在，语义HTML是使您的项目或网站更容易访问的方法之一。让我们看另一个！ ð

技术2：键盘可访问性

有低视力和/或运动技能问题的人也使用互联网！ ð认真地说，about 2.2 billion people are either blind or have a vision impairment，因此在建立网站并从事其他编码项目时，不要牢记这种人群，这会使您极大的风险失去潜在的工作粉丝。但是不要担心，这里有一些简单的提示，以确保您的编码项目易于访问：

• 将您的标题按顺序：将标题视为烹饪完美大米的关键步骤。当这些步骤未按顺序放置时，就像一个食谱出了问题。您会在厨房周围疯狂地奔跑，不确定是先洗米饭还是直接将干谷物直接扔进沸水锅中。结果？烹饪灾难！同样，如果将<h3>标签放在<h1> One之前，则是混乱的秘诀。用户将挠头，试图理解您的内容，并获得可怕的浏览体验。因此，让您和您的用户免于可怕的数字体验（和头痛），并以数值顺序放置标题。

• 在 IS 主要网站链接中添加跳过：如果您的网站或编码项目导航菜单很长，则此特别有用。经历许多部分就像在游乐园经历那漫长而令人毛骨悚然的迷宫。他们俩都使人们感到疲劳，因此添加跳过链接以使您的用户免于另一个头痛。

注意：如果您担心链接使您的设计看起来没有吸引力，则WEBAIM建议创建一个隐藏的内容，直到用户使用键盘导航为一个很好的例子是In-N-Out Burgers网站。

• 使您的链接描述性：像标题一样，链接是指导用户通过Internet迷宫的检查点，因此您不想使用无聊和模糊的短语，例如单击此处或阅读更多。有有关制作鹰嘴豆布朗尼的视频的链接吗？使用像Love Brownies这样的短语，查看此视频吗？希望用户在Twitter上关注您，说一些链接跟随我，以获取有关编码，笑话和其他Hijinks的推文。总而言之，有了描述性链接，您将让您的用户愉快地探索您的网站，揭开宝藏而不会丢失数字流量。

现在坚持下去，不要走。您只需要学习另一种可访问性技术来学习您的网站并编码从数字地狱到技术仙境的编码项目。

技术3：ARIA角色和属性

根据MDN的说法，可访问富的Internet应用程序（ARIA）是一组角色和属性，它们定义了使残疾人更容易访问Web内容和Web应用程序的方法。换句话说，此标签可在您的网站上可点击功能，并更容易访问人们。现在，我知道许多网站经常建议将它们添加到链接和按钮中，但是您可以使用以下其他方法：

• <contentinfo>：这个ARIA角色定义了您网站底部的内容。在这里，它正在行动：

<div role="contentinfo"> <h2>Privacy Statement</h2> <!-- footer content --> </div>

虽然最好使用<footer>标签，但我强烈建议使用<contentinfo>标签，需要一段时间才能找到您的联系人链接和隐私声明。它将帮助您的观众或潜在的业务客户使用屏幕读者快速找到此信息。

• <comment>：这种ARIA角色用于描述某些内容中的反应或情感。这是一个例子：

<div role="comment" id="thread-1" data-author="jane"> <h3>Jane said</h3> <p class="comment-text">I really think this ice cream could use more peanut butter.</p> <p><time datetime="2023-03-30T19:28">March 302023,19:28</time></p> </div>

如果您的网站和/或编码项目包含您的作品的证明或您喜欢的电影或戏剧中的报价，我强烈建议您使用此信息。它将帮助您的观众，尤其是那些使用屏幕读者更多了解的观众。

• <alert>：此ARIA角色仅用于传达时间敏感的信息。这是一个例子：

<div id="sessionendWarning" role="alert"> <p class="hidden">Your session will expire in3 minutes</p> </div>

我强烈建议您仅在您的网站或项目上使用此操作，例如让用户填写提交表格的日期和时间赠品表格。

结论

在那里，您拥有它，三种可访问性技术将您的网站和/或项目变成数字天堂。请记住，可访问性不是fad或其他可以让拍拍的东西。这是创建更好的用户体验的东西。如果您需要更多技巧或想学习更多方法来提高您的编码技能，请订阅此博客，然后通过Linkfree关注我的其他社交活动。现在去那里，使互联网更适合所有人。

信用

让Marvel Studios

让Go 通过Film Riot

移动反应GIF

The Simpsons的苦苦挣扎的第9季GIF

Giphy的黑色和白色gif末端