如何实施ARIA标签以获得更好的可访问性：Web开发人员的综合指南
#css #网络开发人员 #设计 #ux

介绍

作为Web开发人员，必须确保您的网站都可以访问所有人。实现这一目标的方法之一是实施可访问的富互联网应用程序（ARIA）标签。 ARIA标签是HTML属性，可帮助使残疾人更容易获得Web内容。在这篇博客文章中，我们将介绍您需要了解的有关实施ARIA标签的所有信息，从基础到高级主题。

让我们从基础开始。 ARIA标签旨在为辅助技术（例如屏幕阅读器）提供其他信息。他们帮助残疾用户更好地了解您网站上的内容。

您今天可以开始使用的一些基本的ARIA标签包括：

ARIA标签和描述

咏叹调标签

此属性用于为元素提供一个无访问的名称，否则将没有名称。您可以将此属性用于标签按钮，链接和表单控件。

<button aria-label="Search" type="submit">Search</button>

Aria-labelledby

此属性用于为与页面上的另一元素相关的元素提供可访问的名称。此属性的值应该是提供可访问名称的元素的ID。

<label id="searchLabel">Search:</label>
<input type="text" aria-labelledby="searchLabel">

ARIA描述

此属性用于提供有关元素的其他信息，例如说明或描述。此属性的值应该是提供其他信息
的元素的ID 

<label for="password">Password:</label>
<input type="password" id="password" aria-describedby="passwordDesc">
<span id="passwordDesc">Please enter a password that is at least 8 characters long.</span>

咏叹调角色

ARIA角色是一组预定义的属性，可以在HTML和JavaScript中使用以定义网页上元素的角色或功能。




在JavaScript中，可以使用SetAttribute（）方法将ARIA角色添加到元素中，该方法允许您指定元素的角色。

通过将元素的角色设置为适当的ARIA角色，您可以通过辅助技术正确识别它并提供更容易访问的用户体验。重要的是要注意，只有在必要时才能使用ARIA角色，并应与其他可访问性最佳实践一起使用，以确保您的网站可完全访问所有用户。

角色=按钮

按钮角色适用于用户激活时触发响应的可单击元素。

const myButton = document.getElementById("myButton");
myButton.setAttribute("role", "button");

//OR

<button role="button">Search</button>

可以分配给元素的角色的更多示例是：

角色=标题

标题角色表明元素是标题，并且ARIA级属性可用于指示标题的水平（1至6）。

<h1 role="heading" aria-level="1" >This is a heading</h1>
<h2 role="heading" aria-level="2" >This is a heading</h2>
<h3 role="heading" aria-level="3" >This is a heading</h3>
<h4 role="heading" aria-level="4" >This is a heading</h4>
<h5 role="heading" aria-level="5" >This is a heading</h5>
<h6 role="heading" aria-level="6" >This is a heading</h6>

角色= link

链接角色表明元素是超链接，HREF属性可用于指定目标URL。

<a href="https://example.com" role="link">Link Text</a>

角色=菜单

角色菜单指示元素是菜单，并且可以使用ARIA定向属性来指定菜单的方向（水平或垂直）。

<ul role="menu" aria-orientation="horizontal">
  <li role="menuitem"><a href="#">Menu Item 1</a></li>
  <li role="menuitem"><a href="#">Menu Item 2</a></li>
  <li role="menuitem"><a href="#">Menu Item 3</a></li>
</ul>

角色=进度巴尔

角色progressbar表示元素是进度条，并且可以使用ARIA-VALUEMIN，ARIA-VALUENOW和ARIA-VALUEMAX属性来指定进度栏的当前和最大值。

<div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">50%</div>

角色= radiogroup

radiogroup的角色表明元素是一组广播按钮，并且可以使用ARIA检查的属性来指定当前选择的无线电按钮。

<div role="radiogroup">
  <label><input type="radio" name="option" role="radio" aria-checked="true"> Option 1</label>
  <label><input type="radio" name="option" role="radio"> Option 2</label>
  <label><input type="radio" name="option" role="radio"> Option 3</label>
</div>

角色=地区

角色区域表明元素是页面的一个区域，ARIA-Label属性可用于为该区域提供描述性标签。

<div role="region" aria-label="Main Content">
  <p>This is the main content of the page.</p>
</div>

角色=搜索

角色搜索表明元素是搜索字段，并且可以使用ARIA-LABEL属性为搜索字段提供标签。

<form role="search">
  <label for="search">Search:</label>
  <input type="text" id="search" name="search" aria-label="Search">
  <button type="submit">Submit</button>
</form>

咏叹调和特性

ARIA状态和属性是指可用于使Web内容更容易被残疾用户访问的属性。 ARIA状态可以指示元素是扩展还是折叠，或者是否选择。 ARIA属性提供了有关元素的更具体信息。

咏叹调

此属性用于隐藏屏幕阅读器和其他辅助技术的元素。这对于不提供任何有意义信息的装饰或多余元素很有用。

<div class="decorative" aria-hidden="true">
  <img src="decorative-image.png" alt="">
</div>

ARIA活气

此属性用于指示输入的值无效。这对于形式验证和错误消息很有用。

<label for="email">Email:</label>
<input type="email" id="email" aria-invalid="true" required>
<div class="error-message">Please enter a valid email address.</div>

咏叹调检查

指示是否检查了元素

<!-- Using aria-checked with a checkbox -->
<input type="checkbox" id="example-checkbox" aria-checked="false" />

<!-- Using aria-checked with a button -->
<button id="example-button" aria-checked="true">Selected</button>

ARIA DISABLED

指示元素是否被禁用。

<!-- Using aria-disabled with a button -->
<button id="example-button" aria-disabled="true">Disabled</button>

芳香膨胀

指示元素是否扩展。

<!-- Using aria-expanded with a collapsible section -->
<button id="example-button" aria-expanded="false" aria-controls="example-section">Expand</button>
<section id="example-section" aria-hidden="true">Collapsible content</section>

咏叹调选择

指示是否选择了元素

<!-- Using aria-selected with a listbox -->
<ul role="listbox">
  <li role="option" aria-selected="true">Option 1</li>
  <li role="option" aria-selected="false">Option 2</li>
  <li role="option" aria-selected="false">Option 3</li>
</ul>

咏叹调

ARIA Live区域是一组可访问的Internet应用程序（ARIA）属性，使Web开发人员可以为残疾用户访问的Web内容创建动态，实时更新。在JavaScript中，ARIA Live区域可用于更新网页的部分，而无需用户刷新整个页面。

ARIA Live区域对于显示实时信息的Web应用程序特别有用，例如新闻报纸，聊天室或运动成绩。

要在JavaScript中使用ARIA Live区域，开发人员可以使用ARIA-LIVE属性来指定重要性级别和更新实时区域的模式。 Aria-live属性具有三个可能的值：“ OFF”，“ POILITE”和“自信”。

  • 礼貌的价值表明对实时区域的更新不太紧迫，不应中断用户的当前任务。
  • 自信值表示对实时区域的更新更为重要，应该中断用户的当前任务。
  • '价值意味着现场区域不活跃。

总的来说，JavaScript中的ARIA Live区域是创建更具动态和易于访问的Web应用程序的强大工具，尤其是对于残疾用户。通过使用ARIA Live区域，开发人员可以确保所有用户，无论其能力如何，都可以实时访问和与Web内容交互。

示例： 

<div id="live-region" aria-live="polite">
    Initial content.
</div>
<button onclick="updateLiveRegion()">Update Live Region</button>

function updateLiveRegion() {
  var liveRegion = document.getElementById("live-region");
  var newContent = "New content added at " + new Date().toLocaleTimeString();
  liveRegion.innerHTML = newContent;
}

在此示例中，有一个DIV元素，其ID为“ Live-Region”。 ARIA-LIVE属性设置为“礼貌”，以表明实时区域不应中断用户的当前任务。实时区域的初始内容是“初始内容”。

当用户单击“更新live区域”按钮时，调用了updateLiveregion（）函数。此函数使用getElementById（）方法获取具有“ Live-Region” ID的DIV元素，然后使用当前时间更新元素的InnerHTML属性。由于ARIA-LIVE属性设置为“礼貌”，因此屏幕阅读器宣布了更新的内容，而不会中断用户的当前任务。

这只是一个简单的示例，但它显示了如何使用Aria Live区域为所有用户（包括残疾人）访问的Web内容提供实时更新。

ARIA模态对话

ARIA模态对话框是一种ARIA标签，可以在JavaScript中使用，以创建可访问的模态对话框。模态对话框通常用于向需要立即注意的用户提供信息或请求，例如错误消息，确认或通知。

ARIA模态对话框设计为残疾用户，尤其是使用屏幕阅读器的用户。它们通过在显示模式对话框时临时禁用页面的其余部分，并通过提供有关对话框的信息以辅助技术。这使残疾用户更容易理解和与对话框的内容进行交互。

要使用ARIA创建一个可访问的模态对话框，您可以使用角色属性将元素的角色定义为对话框，而ARIA模式属性则表明它是模态对话框。您还可以使用其他ARIA属性来提供有关对话框的其他信息，例如其标题，描述和状态。

示例：

<button id="open-modal">Open Modal Dialog</button>

<div id="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
  <h2 id="modal-title">Modal Dialog</h2>
  <p>This is a modal dialog. Press the escape key or click the close button to close the dialog.</p>
  <button id="close-modal">Close</button>
</div>

const openModalButton = document.getElementById('open-modal');
const closeModalButton = document.getElementById('close-modal');
const modal = document.getElementById('modal');

function openModal() {
  modal.style.display = 'block';
  modal.setAttribute('aria-hidden', 'false');
  document.body.style.overflow = 'hidden';
}

function closeModal() {
  modal.style.display = 'none';
  modal.setAttribute('aria-hidden', 'true');
  document.body.style.overflow = 'auto';
}

openModalButton.addEventListener('click', openModal);
closeModalButton.addEventListener('click', closeModal);
modal.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    closeModal();
  }
});

在此示例中，我们有一个按钮，当单击时，打开模式对话框。模态对话框具有“对话框”的角色属性和“ true”的ARIA模式属性，该属性表明它是模态对话框。它还具有一个ARIA标记的属性，该属性引用了对话框标题的ID和一个关闭按钮，该按钮将用于关闭对话框。

在JavaScript代码中，我们定义函数以打开和关闭模式对话框，并将事件侦听器添加到按钮和模态以处理用户交互。当“模态”对话框打开时，我们将页面其余部分的ARIA隐藏属性设置为“ True”，这使得屏幕阅读器无法访问。我们还将模式打开时禁用页面上的滚动，以防止用户意外与页面的其余部分进行交互。

这只是如何在JavaScript中使用ARIA模态对话框的一个示例。关键是使用适当的ARIA属性表明该元素是模态对话框，并提供有关辅助技术对话框的其他信息。通过这样做，您可以使残疾用户更容易访问模态对话。

ARIA标签面板

ARIA选项卡面板是将内容组织到选项卡中的一种方式，用户可以单击或点击以访问网页的不同部分。例如，屏幕读取器可以读取不同的选项卡及其关联的内容，从而使具有视觉障碍的用户可以更有效地导航页面。 ARIA选项卡面板还为所有用户提供了更有条理和简化的用户界面，改善了网站的整体用户体验。

<div role="tabpanel" aria-labelledby="tab1">
  <p>This is the content of the first tab.</p>
</div>
<div role="tabpanel" aria-labelledby="tab2">
  <p>This is the content of the second tab.</p>
</div>

<ul role="tablist">
  <li role="tab" id="tab1" aria-controls="panel1" tabindex="0">Tab 1</li>
  <li role="tab" id="tab2" aria-controls="panel2">Tab 2</li>
</ul>

最佳实践

要确保正确使用ARIA标签，必须遵循最佳实践。以下是实施ARIA标签时要记住的一些技巧：

  • 仅在必要时使用ARIA标签
  • 在您的网站上始终使用ARIA标签
  • 用辅助技术测试您的网站，以确保残疾人可以使用

通过遵循这些最佳实践，您可以确保您的网站既可以访问又可供所有人使用。

结论

总而言之，实施ARIA标签是使您的网站更容易访问的关键步骤。通过了解ARIA标签的基础知识和更高级的主题，您可以对网站的可访问性进行重大改进。通过遵循最佳实践，您可以确保每个人都可以访问您的网站，而不论残疾或障碍如何。作为Web开发专家，您有责任确保您的网站访问，并且实施ARIA标签是实现此目标的好方法。

感谢您阅读这篇文章

订阅我的Newsletter以供令人兴奋的帖子。

Subscribe | Sarvesh Patil

热情的作家分享见解和经验，以激发和告知。加入我的发现和成长之旅。

favicon sarveshh.beehiiv.com

Originally published at https://blog.sarveshpatil.com