Start with ARIA: Enhancing website accessibility

Using only standard HTML, modern web applications may exclude users with accessibility needs.

HTML is the dominant online markup language, used by nearly 83% of existing websites. While there have been some changes in the 25 years since its creation, even newer iterations like HTML5 and AMP leave a lot to be desired, especially when it comes to accessibility. This is where ARIA comes in. In this tutorial, I’ll discuss what ARIA is, why it’s useful for your website, and a few ways to add it to your website.

p>

What is ARIA?

ARIA, also known as WAI-ARIA, stands for Accessible Rich Internet Applications from the Web Accessibility Initiative. The full specification document can be found here. Note that the full specification document is quite dense, so it's a good idea to read this article first and check out some of the other resources linked below.

The main purpose of ARIA is to allow high-level semantic structures in HTML as a counterpart to the syntax-heavy nature of HTML. In other words, HTML tells the browser how things go, and ARIA tells the browser how they interact.

Who is responsible for ARIA?

ARIA is a project sponsored by W3C (World Wide Web Consortium). This project follows the same updating and editorial standards as other programs. They also provide a GitHub repository with multiple tests that you can run to ensure your page is functioning properly.

What's wrong with my current site markup?

Most websites with a structured, thoughtful design do a good job of adapting to technology (i.e. screen readers). However, enabling users to figure out how to use your site and making it easy to use are different things. For low-vision users, who make up nearly 2% of the population, this difference can mean saving a lot of time and detective work when trying to perform basic online tasks. It can be the difference between providing visitors with a spectacular experience and providing them with a maze to navigate.

In addition to traditional accessibility, ARIA is looking for a technology that provides a new perspective on standard interactions. An increasing number of speech systems, converged browsing (such as automotive embedded computers), and other innovations are leveraging ARIA to take advantage of its enhanced semantic capabilities.

Okay, but what does it do?

Overall, ARIA joins elements together in a semantically meaningful way. It provides users with additional meaning about the interaction. Here are some practical examples of how to use it:

1. Associative non-nested elements: With pure HTML, the user's browser can only see relationships based on parent/child relationships. However, in some cases we may need a series of buttons parallel to the content in the HTML hierarchy. With ARIA, we can define the controller type for each button and what element it controls elsewhere in the document.
2. Declaring interactive elements: While HTML provides a few elements for interaction, ARIA defines many more elements, allowing for a more granular description of the functionality of each element of the page. Additionally, these can be assigned to HTML tags which are not typically used for such purposes but may make sense in your particular case. For example, you can use the
3. tag for a series of checkboxes that you don't want to consist of form elements.
4. Live zone update notifications: Another feature provided by ARIA is the definition of "live" content zones. When a content area is defined in this way, ARIA notifies the user whenever the content within that element changes. This is useful when making sure users with low vision know that something has changed on your page.

Add ARIA to your pages

We've discussed the capabilities of ARIA, now let's look at some of the most common examples. We'll start each section with a brief description of what we hope to achieve, followed by a code example of how to achieve that goal.

Create alternative tags using ARIA

Speaking of alt tags, most developers are familiar with thealtattribute, which is commonly used withtags. This tag serves an important purpose: to describe the image it is attached to to improve accessibility (or as a common SEO tactic, depending on your point of view).

ARIA provides a similar attribute calledaria-label, which can be attached to any HTML element, not only improving the accessibility of images, but also improving the accessibility of website sections, form controls, etc. Accessibility. Here is an example:

    
A text description of the image, visible on the screen

Define ARIA-specific UI elements

HTML already provides many elements for creating web pages, but their main focus is usually on generally defining an area and presenting the structure of the website to the user. ARIA offers dozens of additional elements that focus more on how the element is used, such as timers, tooltips, or progress bars.

此处使用的示例是您可能会在表单上找到的工具提示。创建模式的方法有很多种，从触发一些 JavaScript 的链接到悬停在上面时创建模式的元素。这里缺少的一点是，尽管它可能对视力正常的用户有效，但弱视用户可能甚至不知道工具提示的存在。

您可以使用 ARIA 定义工具提示，如下所示：

可用的 ARIA 定义

为了扩展这些 UI 元素，这里简要列出了一些可以定义的最有趣的“角色”。完整的列表可在参考的规范文档中找到。

• 搜索
• banner
• 演示
• 工具栏
• status
• menuitem
• log
• dialog
• link

在父/子结构之外建立关系

现在让我们扩展一下我们之前讨论过的一点：HTML 的强制结构。虽然父母/孩子的关系有利于决定事情应该如何排序，但当需要更有意义的联系时，它就显得不足了。兄弟元素就是一个例子。一些库添加了遍历兄弟元素或其他形式的元素关系的功能，但这通常发生在 JavaScript 或标记之外的其他语言中。

ARIA 使我们能够在标记中直接定义这些关系，从而更轻松地对菜单项进行分组、创建非标准导航以及将控件附加到通常难以完成的元素区域。

让我们看一下如何使用它来将一些控件连接到内容区域：

 
 Your tutorial's content 

此代码段表示nextbutton.jpg图像是一个按钮，它是下面教程div的控件。

在 ARIA 中创建“实时”元素

我们将在此处介绍的 ARIA 的最后一个功能是aria-live属性。虽然 ARIA 的大多数其他功能都处理语义连接，但这一功能直接涉及向用户提供内容或元素更改通知的想法。

对于许多视力不佳的人来说，可能无法立即清楚他们与您网站的交互是否导致了页面其他位置的变化。对于细微的变化尤其如此，例如可能会发生变化但保持相对相同长度的小文本摘要。通过使用此属性，每次定义元素内的内容发生更改时，您的用户都会收到通知。

我们可以将此属性添加到元素中，如下所示：

 Content that updates, ie. guided directions 

让网络成为所有用户更美好的地方

略多于 2% 的美国人口带有某种形式的低视力标签，提高网站的可访问性可以显着提高网站的覆盖范围。对于那些网站覆盖多个国家的公司来说，这个数字会更大。除了可访问性之外，ARIA 还为非浏览器界面提供了一种利用您的网站的方法，许多基于语音的设备已经提供了支持。

实施 ARIA 可以帮助您的用户，也可以帮助您的流量，所以开始吧！

我是否遗漏了任何细节，或者您还有其他问题吗？请在下面发表评论！

如果您想深入了解完整的 ARIA 文档或尝试官方测试工具，请查看以下链接：

• ARIA 创作实践
• 完整的 ARIA 规范文档
• 测试工具示例报告

The above is the detailed content of Start with ARIA: Enhancing website accessibility. For more information, please follow other related articles on the PHP Chinese website!