希望使您的网站更容易访问？ 或者，您是否想使使用浏览器和其他界面遍历整个站点更加容易？ 使用ARIA，您可以同时进行。 让我们看一下什么是ARIA，以及它如何使电子商务站点受益。 我们还将逐步介绍一些示例。
什么是ARIA？
WAI-ARIA代表Web Accessibility Initiative –可访问的富Internet应用程序。 该倡议采取W3C维护的一组准则和属性的形式。 使用这些属性，我们可以在站点元素之间创建不能仅通过HTML表示的关系。 在这里使用最重要的是，我们可以在父子关系之外定义元素关系，并为用户更清楚地连接UI元素。
将ARIA添加到电子商务
之前，我们讨论过如何将ARIA应用于类似于常见的小型企业主页的一般网站 。 这次，我们将仔细研究ARIA如何改善大型电子商务网站的用户体验。
我们将着重介绍电子商务中出现特殊情况的四个关键领域：产品页面，类别页面（或产品集合页面），多层导航和多面导航。 我们将使用这两个线框来指导我们完成该过程：
为ARIA做准备
对于大多数网站而言，添加ARIA是一个相当简单的过程。 您定义站点的各个部分，将它们分解为地标和元素，然后添加必要的代码。
我们将在我们的电子商务网站上遵循类似的流程，但是现在我们有了新的复杂性。 由于电子商务网站所带来的复杂性，ARIA在许多情况下可能会变成麻烦。 尽管尽可能提高站点的可访问性很重要，但是不幸的是，我们经常会遇到业务限制。 因此，我们将需要做一些更多的前期计划，将ARIA的每个新增功能划分优先级。
通过确定优先级，我们可以确保首先改善网站的最重要方面，从而在可用的时间内使用户体验达到最佳状态。
让我们从一些产品页面开始。
产品页面的ARIA
任何电子商务站点的主要页面，这些页面通常显示产品，其可用的变体以及将商品添加到购物车的方法。 这些交互元素中的每一个都应单独考虑。
对于我们的产品页面，让我们将其分为以下几部分：我们的核心产品信息，影响该产品的交互元素，“添加到购物车”按钮以及一个扩展的内容部分。
如果需要在此页面上对实现进行优先级排序，我们希望将其按以下方式分组：
- 核心产品信息，交互元素，添加到购物车按钮
- 扩展产品内容
在这里起作用的主要因素是我们在上一篇文章中讨论的内容：ARIA帮助定义元素的意图。 对于扩展内容，大多数正在使用HTML元素都具有语义含义和意图相匹配的元素。 这意味着，如果可以的话，放置其他ARIA信息很有用，但与完成其他三个领域相比，重要性可能不那么重要。
核心产品信息
首先，将ARIA添加到我们的核心产品信息中。 由于此处使用的元素简单，因此这非常简单。 代码如下：
<!-- Our code before any changes -->
<div class='row-wrapper'>
<div class='left-column'>
<img src='bag-image.jpg' alt='brown bag' />
</div>
<div class='right-column'>
<h1>A Nice Bag</h1>
<p>Bag Size:<br/>100x150mm</p>
<select name='color-options'>
<option value="brown">Brown</option>
<option value="black">Black</option>
</select>
<input type="checkbox" value="Glossy">
<button>Add to cart</button>
</div>
</div>首先，我们将在主div中添加一个角色，并在图像和产品标题之间添加关系。
<div class='row-wrapper' role='main'>
<div class='left-column'>
<img src='bag-image.jpg' alt='brown bag' aria-labelledby='product-title' />
</div>
<div class='right-column'>
<h1 id='product-title'>A Nice Bag</h1>
...
</div>
</div>互动产品元素
在这里，产品页面会有些棘手。 电子商务网站上的产品可能存在多种不同类型的变体。 除了可用的类型以外，可以同时使用的类型数量增加了另一层复杂性。 在我们的示例中，我们使用三个元素：大小，颜色和数量。
让我们来看看如何进行标记。 这是ARIA增强选择和复选框元素的代码：
<select name='color-options' aria-label='Color Selection Drop Down'>
<option role='option' aria-selected='false' value="brown">Brown</option>
<option role='option' aria-selected='false' value="black">Black</option>
</select>
<input type="checkbox" value="Glossy" role="checkbox" aria-checked="false" aria-label='Glossy Bag?'>
添加到购物车按钮
购物车按钮类似于标准按钮，但是我们将比其他按钮更加清晰地标记它：
<button aria-label="Add to Cart">Add to Cart</button>扩展产品内容
最后，将扩展的内容区域视为典型的内容区域。 但是，根据产品页面的不同，最好将主要内容地标与补充内容地标分开。 这些选项卡还在此处为代码添加了额外的一层。 在示例中，这是我们的处理方式：
<div id="tabs" role='comlementary' aria-label="Expanded Content Area">
<ul role="tablist">
<li role="presentation"><a href="#more-info" id="tab-more-info" role="tab" aria-selected="true" tabindex="0">Product Info</a></li>
</ul>
<div id="more-info" role="tabpanel" aria-hidden="false" aria-labelledby="tab-more-info">
More product info...
</div>
</div>将ARIA添加到类别页面
尽管产品页面在大多数方面都可以看作是内容页面的另一种形式，但网站的类别页面（也称为产品列表页面（PLP））却完全不同。 它们以大型导航结构运行，允许用户对数百甚至数千种产品进行分类。
这使它们变得越来越复杂，随着添加更多内容和过滤器层而变得更加复杂（我们将在下一部分中讨论多面导航和过滤器）。 让我们看一下过滤器之外的PLP的两个主要方面：乘积和分页。
这是我们的起始代码框架：
<h1>Product Listing Page</h1>
<div id='faceted-navigation'>
<p>Color Sort</p>
<a href="#">Red</a>
<a href="#">Green</a>
<a href="#">Black</a>
<p>Size Sort</p>
<a href="#">Large</a>
<a href="#">Small</a>
</div>
<div id='product-listings'>
<div id='product-block'>
<h2>A Nice Bag</h2>
<img src="bag.jpg" alt="A paper bag" />
<button>Add to cart</button>
</div>
...
</div>
<div id='pagination'>
1
<a href="#">2</a>
<a href="#">3</a>
...
<a href="#">Last</a>
</div>处理分页
分页是在此处产品列表底部的小链接的名称。 通常，它们用数字或箭头表示，但它们可以有其他多种形式。 在HTML方面，分页链接看起来就像常规链接。 我们将说我们是在控制产品列表而不重定向到另一个页面。
为了知道它正在以这种方式控制内容区域，我们必须将其声明为控制器，定义其所控制的内容，然后将该内容区域标记为活动状态。 这是我们的情况：
<div id='product-listings' role='main' aria-live='polite'>
...
</div>
<div id='pagination' role='navigation' aria-label='Pagination Links'>
1
<a href="#" aria-controls='product-listings'>2</a>
<a href="#" aria-controls='product-listings'>3</a>
...
<a href="#" aria-controls='product-listings'>Last</a>
</div> 当我们在此处创建活动区域时，我们利用了ARIA提供的"polite"设置。 如果您的更改是相关的并且需要用户Swift解决，或者需要在多个活动区域中确定优先级，则也可以使用"assertive"值。
标记重复元素
产品着陆页所面临的一个独特挑战是产品列表本身内部的密集导航复杂性。 从视觉角度来看，使用视觉提示确定哪些信息适用于哪种产品可以很容易地对信息进行分组。
与ARIA相比，它具有比我们之前介绍的应用程序更多的层次。 当页面上有20个按钮时，将“立即购买”按钮标记为标准按钮可能会造成混乱。 为了解决这个问题，我们需要在每个产品及其相关元素之间建立明确的连接。
我们将执行以下操作：
<div id='product-listings' role='main' aria-live='polite'>
<div id='product-block'>
<h2 id='product-title'>A Nice Bag</h2>
<img src="bag.jpg" alt="A paper bag" />
<button aria-labelledby='product-title'>Add to cart</button>
</div>
...
</div>虽然这确实有助于澄清与用户的关系，但这仍然不是最佳的实现。 更好的方法是通过将product-title元素与其他短语（例如“添加到购物车”）连接起来动态生成aria标签。
将ARIA与多面导航一起使用
分面导航是指电子商务网站上通常显示的过滤器和选项，可让您缩小搜索范围。 这些有多种口味-从大小到颜色等等。 对于我们的示例，我们将做两个假设：
我们分面的导航会更新页面上的实时产品。 情况并非总是如此，因为有时在应用过滤器时，电子商务网站可能会生成一个新页面，但是我们将像该网站一样实时更新内容。
我们的多面导航可以选择多个过滤器。 并非每个电子商务网站都这样做，并且在某些情况下肯定不应该这样做。 但是，这超出了本文的范围，增加了一层复杂性。
设置控件
过滤器后面HTML类似于分页，在代码中以基本链接的形式出现。 不过，对于我们来说，过滤器的目的是更改页面上当前的信息。 因此，我们要标记过滤器周围的整个容器，以使其清楚地表明这是页面上另一个区域的控制器：
<div id='faceted-navigation' role='navigation' aria-controls='product-listings'>
<p>Color Sort</p>
<a href="#" aria-label='Sort by Red'>Red</a>
<a href="#" aria-label='Sort by Green'>Green</a>
<a href="#" aria-label='Sort by Black'>Black</a>
<p>Size Sort</p>
<a href="#" aria-label='Sort by Large'>Large</a>
<a href="#" aria-label='Sort by Small'>Small</a>
</div>定义居住区
像分页一样，这些更新在页面上实时进行。 因此，我们希望将页面上的主要内容标记为“实时”。 请注意，我们之前在分页部分中进行了此操作，但是为了保持一致性，我们将在此重复此步骤。
该代码应如下所示：
<div id='product-listings' role='main' aria-live='polite'>
<div id='product-block'>
<h2 id='product-title'>A Nice Bag</h2>
<img src="bag.jpg" alt="A paper bag" />
<button aria-labelledby='product-title'>Add to cart</button>
</div>
...
</div>测试您的实施
现在我们的实现都已经准备就绪，因此让我们对其进行一些测试。 我最喜欢的工具包括Google的Accessibility Developer Tools或IBM的Dynamic Assistant Plugin ，但是根据项目的规模，您可能需要创建自己的测试脚本。
如果您需要在Chrome之外运行的工具，或者只是不喜欢上面提到的两个工具 ，则W3C列出了其他可用的辅助功能工具 。
使电子商务更易访问
通过将这些新添加到ARIA工具集中，您现在应该能够适当地标记几乎所有电子商务站点。 为了确保最好的用户体验，使用电子商务网站，请记住保持导航尽可能简单，并明确表达意图。
对这个主题还有其他疑问吗？ 我错过了重要的事情吗？ 在下面的评论中告诉我！
翻译自: https://code.tutsplus.com/tutorials/hands-on-with-aria-ecommerce-implementations--cms-31890