动手使用ARIA：首页元素和标准导航

最新推荐文章于 2024-06-03 09:55:04 发布

cunjie3951

最新推荐文章于 2024-06-03 09:55:04 发布

阅读量630

点赞数

文章标签： python java html 人工智能 css

希望使您的网站更易于访问？是否想成为新的在线界面进入市场的第一人？除了ARIA，别无所求。

W3C（万维网联盟）维护的这套标准通过添加许多允许以有意义的方式扩展HTML的属性，为您提供了两全其美的方法。在这里，我们将逐步了解什么是ARIA，了解它如何使信息网站受益，并通过代码示例逐步介绍用例。让我们开始吧！

ARIA基础

定义非传统关系

大多数网站都是使用HTML构建的，该网站主要通过父子关系以分层方式将元素彼此关联。这种结构非常适合定义内容，但是在定义用户界面时就不够用了。例如，在许多站点和Web应用程序中，内容的区域由同级元素中的按钮控制-同级具有相同的父元素，但在HTML中它们之间没有直接关系。因此，在使用辅助技术时，很难定义哪些用户界面（UI）元素控制哪些内容。

这也适用于更新的接口。例如，如果您尝试通过智能设备浏览网站，则在看不到元素更改时会变得很困难。

ARIA允许您使用其他属性将HTML元素绑定在一起，以表示这些类型的控件。

非刚性元素分类

HTML的另一个缺点是无法将结构与意图分开。

例如，您可能希望将图像元素变成可单击的按钮。但是，HTML在很大程度上仍将该图像定义为仅图像，除此之外的所有其他情况都在其他地方发生。

使用ARIA，可以将意图与元素分离，从而可以将图像标记为按钮，或者将链接定义为工具提示。这为开发人员提供了有关UI的更多控制权，从而创建了更清晰的设置关系。

创建地标区

除了UI中的标记元素外，ARIA还提供对role属性的访问权限-用于定义页面区域。例如，您可以将主菜单标记为导航，将文章的内容区域标记为主要内容。这使用户可以更轻松地在网站的重要区域中移动，并且可以防止网站布局不常见或复杂的用户感到困惑。

用例：小型企业主页

为了获得将ARIA添加到网站的经验，我们将使用小型企业可能会使用的网站线框，并逐步实现我们的属性。

为了清楚起见，我们将使用的代码经过精简，删除了CSS类和CMS中的所有功能。

我们要做的第一件事是将线框分解为多个部分，以使ARIA的整体添加更加简单。在下面的图片中，您将看到我选择将网站分为五个主要部分：

导航
内容
侧边栏
联系表格
专门的UI元素

在我们的例子中，它看起来像这样：

在将您的网站细分为此类区域时，我们正在寻找两件事。第一个是可以由ARIA地标定义的主要元素：横幅，导航，主要，补充，内容信息，搜索和表单。这些代表了我们网站的必要组成部分，使用它所不需要的任何内容都不会被标记为地标（例如广告）。

要查找的第二件事是ARIA需要澄清的特定元素。在大多数情况下，这非常简单（例如将图像标记为图像），但是对于某些UI元素而言，它可能会有些棘手。

一旦我们知道需要实施ARIA的哪些领域，就可以开始系统地遍历这些领域。让我们开始浏览网站。

这些菜单的目的是否不同？在我们的示例中，顶部菜单导航网站的主要页面，而较小的菜单则专注于登录用户可能需要的内容。这些意图是不同的，因此将它们分开是有意义的。
菜单是否在同一父元素中？我知道这似乎是违反直觉的，因为ARIA旨在帮助我们克服这些类型的关系限制，但是在这种情况下，关乎的是什么是可行的，而关乎用户的正确选择。定义一个菜单，但其中一半放在一个位置，另一半放在其他位置，则导航变得更加困难。

对于我们的情况，我们将把导航视为两个独立的地标。因此，我们将对代码进行一些更改。首先，我们只有基本HTML：

<!-- Example code before ARIA -->

<div id=’menus’>
    <ul>
		<li>Home</li>
		<li>About</li>
		<li>Services</li>
		<li>Location</li>
		<li>Contact Us</li>
	</ul>
    <ul>
		<li>Login</li>
		<li>Account</li>
		<li>Settings</li>
	</ul>
</div>

现在，我们将使用一些地标对其进行注释。

<!-- Example code after adding landmarks -->

<div id=’navigation-menu’ role=’navigation’>
    <ul>
        ...
	</ul>
</div>
<div id=’user-menu’ role=’navigation’>
    <ul>
        ...
	</ul>
</div>

定义这些界标的下一步是向用户提示每个菜单的意图。如果我们把它们都留作导航，而没有任何进一步的信息，那只会使事情更难以解释。因此，让我们使用aria-label属性为它们添加有意义的标签：

<!-- Example code after adding labels -->

<div id=’navigation-menu’ role=’navigation’ aria-label=’Main Navigation’>
    <ul>
        ...
	</ul>
</div>
<div id=’user-menu’ role=’navigation’ aria-label=’User Menu’>
    <ul>
        ...
	</ul>
</div>

除此之外，我们还要在菜单中添加其他角色标记，以使用户知道这是一个菜单，并将其中的每个链接标记为菜单项：

<!-- Code after ARIA implementation -->

<div id=’navigation-menu’ role=’navigation’ aria-label=’Main Navigation’>
    <ul role=’menu’>
		<li role=’menuitem’>Home</li>
		<li role=’menuitem’>About</li>
		<li role=’menuitem’>Services</li>
		<li role=’menuitem’>Location</li>
		<li role=’menuitem’>Contact Us</li>
	</ul>
</div>
<div id=’user-menu’ role=’navigation’ aria-label=’User Menu’>
    <ul role=’menu’>
		<li role=’menuitem’>Login</li>
		<li role=’menuitem’>Account</li>
		<li role=’menuitem’>Settings</li>
	</ul>
</div>

内容区

现在转到内容区域。在这里，我们将使用role=”main”标记包含整个主要内容的容器。同样，为了进行比较，这是我们的入门代码。

<!-- Our code before ARIA -->

<div>
    <img src=”#” onclick=”#” />

	<p> Lorem …
		<a href=”#” onclick=”#”>scelerisque</a>
	…</p>

	<form action="#">
      		<input type="text" placeholder="Enter Your Search Text" name="search">
     		 <button type="submit">Find It</button>
    	</form>
</div>

这就是我们添加"main"地标后的样子。

<!-- Adding in the 'main' landmark -->

<div role=”main”>
    <img src=”#” onclick=”#” />

	<p> Lorem …
		<a href=”#” onhover=”#”>scelerisque</a>
	…</p>

	<form action="#">
      		<input type="text" placeholder="Enter Your Search Text">
     		 <button type="submit">Find It</button>
    	</form>
</div>

在该内容中，我们将继续查找意图与其HTML定义不匹配的任何元素。

首先，我们将通过添加"button"角色来处理作为按钮的图像：

<img src=”#” onclick=”#” role=”button” />

激活模式的链接有些棘手，因为它取决于模式本身中的内容。对于我们来说，我们要说的是一个工具提示：

<a href=”#” onhover=”#” role:’tooltip’>scelerisque</a>

在我们的主要内容内，我们还有一个搜索表单。这是一个额外的复杂性层，因为它是使用HTML元素的搜索表单，并且也有资格作为搜索框地标。我们将这样标记它：

<div role=’search’>
<form action="#">
          	<input type="text" placeholder="Enter Your Search Text" role=’textbox’>
     		 <button type="submit" role=’button’>Find It</button>
    	</form>
</div>

除此之外，您还可以使用适当的ARIA标签定义每个元素。对于大多数站点，这可能会给开发过程带来太多时间负担，尽管在大多数CMS中，它可以自动化。在不可能的情况下，如果元素HTML定义与其使用意图匹配，那么在进行ARIA实现时，可以将其视为低优先级。进行所有这些更改后，主要内容区域如下所示：

<!-- The completed content area -->

<div role=”main”>
    <img src=”#” onclick=”#” role=”button” />

	<p> Lorem …
		<a href=”#” onhover=”#” role:’tooltip’>scelerisque</a>
	…</p>

<div role=’search’>
<form action="#">
      		<input type="text" placeholder="Enter Your Search Text" role=’textbox’>
     		 <button type="submit" role=’button’>Find It</button>
    	</form>
</div>
</div>

侧边栏

网站的边栏可以采用多种形式。在我们的案例中，它提供了与网站相关的其他内容，并在底部列出了相关帖子。

这是侧边栏的开始标记：

<aside id=’sidebar’>
    <div>
    	<h2>More About Us</h2>
    	<p>Lorem...</p>
    </div>
	<div>
    	<h2>Related Posts</h2>
    	<ul>
    		<li>Post</li>
    		<li>Post</li>
    		<li>Blog Post</li>
    	</ul>
    </div>
</aside>

为了定义内容，我们希望赋予它"complementary"角色，让用户知道边栏中的信息是与主要内容相关的其他内容。看起来可能像这样：

<div role=’complementary’>
    <h2>More About Us</h2>
	<p>Lorem...</p>
</div>

以下相关帖子可以被视为一种导航形式，允许用户进一步浏览该站点的帖子。我们将使用"navigation"角色对其进行标记，并为其指定适当的标签，如下所示：

<div role=’navigation’ aria-labelledby=’posts-heading’>
    <h2 id=’posts-heading’>Related Posts</h2>
	<ul role=’menu’>
		<li role=’menuitem’>Post</li>
		<li role=’menuitem’>Post</li>
		<li role=’menuitem’>Blog Post</li>
	</ul>
</div>

每个站点的侧边栏都不同，可能需要角色和地标的不同组合。如果侧边栏上有广告，则最好不要标记该元素。如果侧边栏中有一个搜索表单，则也要用适当的角色标记它。侧栏中显示的所有菜单都应遵循我们在导航部分中讨论的相同模式：

"navigation"地标
菜单容器的"menu"角色
每个嵌套项目的"menuitem"角色

这是我们最终的侧边栏外观：

<aside id=’sidebar’>
    <div role=’complementary’>
    	<h2>More About Us</h2>
    	<p>Lorem...</p>
    </div>
	<div role=’navigation’ aria-labelledby=’posts-heading’>
    	<h2 id=’posts-heading’>Related Posts</h2>
    	<ul role=’menu’>
    		<li role=’menuitem’>Post</li>
    		<li role=’menuitem’>Post</li>
    		<li role=’menuitem’>Blog Post</li>
    	</ul>
    </div>
</aside>

处理联系表格

最后，在页面底部是一个号召性用语表格，询问用户名和电子邮件，并在下面提供一个标准的提交按钮。关于表单，需要牢记三个部分：

给表单起"form"的标志性作用：由于表单是站点的主要部分，因此我们需要使用户易于使用它。我们通过赋予其具有里程碑意义的作用来实现
为元素分配匹配角色。表单是意图和HTML定义不匹配的常见区域。必要时添加ARIA角色，尤其是涉及复选框，滑块，工具提示以及可以多种方式实现的其他元素时。
使标签与适当的元素匹配。 HTML通过一种基本方式来处理此问题，使您可以使用<label>元素将标签与输入相关联。表单可以很容易地具有更复杂的结构，从而无法正常工作。幸运的是，我们可以使用aria-labelledby属性来解决此问题。

让我们看一下更新后的代码是什么样的：

<!-- Contact form after ARIA -->

<form action="#" role=’form’>

    <label for="textbox" id=’textbox-label’>Text box</label>
  	<input type="text" id="textbox" role=’textbox’ aria-labelledby=’textbox-label’>

    <select name="combobox" role=’combobox’ aria-label=’Descriptive Name Dropdown’>
		<option value="choice1" aria-label=’Choice #1’>Choice #1</option>
  		<option value="choice2" aria-label=’Choice #2’>Choice #2</option>
	</select>

	<input type=”checkbox” checked  role=’checkbox’ aria-label=’Get a Newsletter Checkbox’ aria-check=’true’’>Checkbox
	
  	<input type="submit" value="Submit" role=’button’>
      
</form>

测试实施

部署好所有实现后，我们现在需要检查它们是否正常运行。为此，最简单的方法是使用现有的辅助功能工具，例如Google的Accessibility Developer Tools或IBM的Dynamic Assistant Plugin 。

两者都与Chrome的开发人员工具集成在一起，可以实时检查您网站的可访问性。 W3C还为可访问性保留了大量工具。

使网络更易于访问

我们的站点线框现在有ARIA！尽管还有许多ARIA可以探索，但是您现在已经掌握了足够的知识，可以使您工作的大部分站点变得更容易访问。除此之外，您的站点还为处理可能出现的许多新的Internet遍历技术做好了更好的准备。

您希望我们探索ARIA的另一方面吗？对本文有疑问吗？随时在下面的评论中添加它们！

翻译自: https://code.tutsplus.com/tutorials/hands-on-with-aria-homepage-elements-and-standard-navigation--cms-31826

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动手使用ARIA：首页元素和标准导航

希望使您的网站更易于访问？是否想成为新的在线界面进入市场的第一人？除了ARIA，别无所求。 W3C（万维网联盟）维护的这套标准通过添加许多允许以有意义的方式扩展HTML的属性，为您提供了两全其美的方法。在这里，我们将逐步了解什么是ARIA，了解它如何使信息网站受益，并通过代码示例逐步介绍用例。让我们开始吧！ ARIA基础定义非传统关系大多数网站都是使用HTML构建的，该网站...
复制链接

扫一扫