ARIA로 시작하기: 웹사이트 접근성 향상

표준 HTML만 사용하는 최신 웹 애플리케이션은 접근성이 필요한 사용자를 제외할 수 있습니다.

HTML은 기존 웹사이트의 거의 83%에서 사용되는 주요 온라인 마크업 언어입니다. 제작 이후 25년 동안 약간의 변화가 있었지만 HTML5 및 AMP와 같은 새로운 버전조차도 특히 접근성 측면에서 아쉬운 점이 많습니다. 이것이 바로 ARIA가 등장하는 곳입니다. 이 튜토리얼에서는 ARIA가 무엇인지, ARIA가 웹 사이트에 유용한 이유, ARIA를 웹 사이트에 추가하는 몇 가지 방법에 대해 설명하겠습니다.

p>

ARIA란 무엇인가요?

ARIA는 WAI-ARIA라고도 알려져 있으며 Web Accessibility Initiative의 Accessible Rich Internet Application을 의미합니다. 전체 사양 문서는 여기에서 찾을 수 있습니다. 전체 사양 문서는 매우 복잡하므로 먼저 이 문서를 읽고 아래 링크된 다른 리소스를 확인하는 것이 좋습니다.

ARIA의 주요 목적은 HTML의 구문이 많은 특성에 대응하여 HTML에서 높은 수준의 의미 구조를 허용하는 것입니다. 즉, HTML은 브라우저에 상황이 어떻게 진행되는지 알려주고 ARIA는 브라우저에 상호 작용하는 방식을 알려줍니다.

ARIA는 누가 담당하나요?

ARIA는 W3C(World Wide Web Consortium)가 후원하는 프로젝트입니다. 이 프로젝트는 다른 프로그램과 동일한 업데이트 및 편집 표준을 따릅니다. 또한 페이지가 제대로 작동하는지 확인하기 위해 실행할 수 있는 여러 테스트가 포함된 GitHub 저장소를 제공합니다.

현재 웹사이트 마크업에 어떤 문제가 있나요?

구조화되고 사려 깊은 디자인을 갖춘 대부분의 웹사이트는 반응형 기술(예: 스크린 리더)에 충분히 적응합니다. 그러나 사용자가 사이트 사용 방법을 알 수 있도록 하는 것과 사용하기 쉽게 만드는 것은 별개의 문제입니다. 인구의 거의 2%를 차지하는 저시력 사용자의 경우 이러한 차이는 기본적인 온라인 작업을 수행하려고 할 때 많은 시간과 조사 작업을 절약할 수 있음을 의미할 수 있습니다. 이는 방문객에게 멋진 경험을 제공하는 것과 탐색할 수 있는 미로를 제공하는 것의 차이일 수 있습니다.

ARIA는 전통적인 접근성을 넘어 표준 상호 작용에 대한 새로운 관점을 제공하는 기술을 찾고 있습니다. 점점 더 많은 음성 시스템, 통합 브라우징(예: 자동차 내장 컴퓨터) 및 기타 혁신 기술이 ARIA를 활용하여 향상된 의미 기능을 활용하고 있습니다.

알겠습니다. 그런데 무슨 역할을 하나요?

전반적으로 ARIA는 의미상 의미 있는 방식으로 요소를 함께 연결합니다. 이는 사용자에게 상호 작용에 대한 추가적인 의미를 제공합니다. 다음은 사용 방법에 대한 몇 가지 실제 예입니다.

<li>연관 비중첩 요소: 순수 HTML을 사용하면 사용자 브라우저는 상위/하위 관계를 기반으로 한 관계만 볼 수 있습니다. 그러나 어떤 경우에는 HTML 계층 구조의 콘텐츠와 평행한 일련의 버튼이 필요할 수 있습니다. ARIA를 사용하면 각 버튼의 컨트롤러 유형과 문서의 다른 곳에서 제어하는 ​​요소를 정의할 수 있습니다. <li>대화형 요소 선언: HTML은 상호작용을 위한 몇 가지 요소를 제공하는 반면 ARIA는 더 많은 요소를 정의하여 페이지의 각 요소 기능에 대한 보다 세부적인 설명을 허용합니다. 또한 이러한 목적은 일반적으로 이러한 목적으로 사용되지 않지만 특정 경우에 적합할 수 있는 HTML 태그에 할당할 수 있습니다. 예를 들어 양식 요소로 구성하지 않으려는 일련의 확인란에 <li> 태그를 사용할 수 있습니다. <li>라이브 영역 업데이트 알림: ARIA가 제공하는 또 다른 기능은 "라이브" 콘텐츠 영역의 정의입니다. 콘텐츠 영역이 이러한 방식으로 정의되면 ARIA는 해당 요소 내의 콘텐츠가 변경될 때마다 사용자에게 알립니다. 이는 시력이 낮은 사용자에게 페이지의 내용이 변경되었음을 알릴 때 유용합니다.

웹페이지에 ARIA를 추가하세요

ARIA의 기능에 대해 논의했습니다. 이제 가장 일반적인 몇 가지 예를 살펴보겠습니다. 우리는 달성하고자 하는 목표에 대한 간략한 설명으로 각 섹션을 시작하고, 이어서 해당 목표를 달성하는 방법에 대한 코드 예제를 제공합니다.

ARIA를 사용하여 대체 태그 만들기

대체 태그에 관해 말하면 대부분의 개발자는 alt 属性，该属性常用于 <img> 태그에 익숙합니다. 이 태그는 첨부된 이미지를 설명하여 접근성을 향상시키는(또는 관점에 따라 일반적인 SEO 전술로) 중요한 목적을 수행합니다.

ARIA는 모든 HTML 요소에 첨부할 수 있는 aria-label라는 유사한 속성을 제공하여 이미지뿐만 아니라 웹 사이트 섹션, 양식 컨트롤 등에 대한 접근성을 향상시킵니다. 예는 다음과 같습니다.

으아아아

ARIA 특정 UI 요소 정의

HTML은 이미 웹 페이지 생성을 위한 많은 요소를 제공하지만 일반적으로 주요 초점은 일반적으로 영역을 정의하고 웹 사이트의 구조를 사용자에게 제시하는 것입니다. ARIA는 타이머, 도구 설명, 진행률 표시줄 등 요소 사용 방법에 더 중점을 둔 수십 가지 추가 요소를 제공합니다.

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

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

<!-- Defining a question mark image as a tooltip UI element -->

<img src=”questionmark.png” role=”tooltip” />

可用的 ARIA 定义

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

<li>搜索 <li>banner <li>演示 <li>工具栏 <li>status <li>menuitem <li>log <li>dialog <li>link

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

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

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

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

<img src=”nextbutton.jpg” role=”button” aria-controls=”tutorial” />

<div id=”tutorial”>
    Your tutorial's content
</div>

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

在 ARIA 中创建“实时”元素

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

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

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

<div aria-live=”true”>
    Content that updates, ie. guided directions
</div>

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

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

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

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

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

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

위 내용은 ARIA로 시작하기: 웹사이트 접근성 향상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!