HTML을 처음 접하는 웹 디자이너는 익숙하지 않은 속성을 발견할 수 있습니다. ARIA라는 단어가 접두사로 붙은 이러한 속성은 웹 곳곳에 나타나지만, 새로운 사용자에게는 그 용도를 잘 모를 수 있습니다.
ARIA 속성은 웹사이트의 접근성에서 중요한 역할을 합니다. 특정 요소의 콘텐츠와 해당 요소가 페이지 또는 주변의 다른 요소와 관련되는 방식을 모두 설명합니다.
이렇게 중요한 속성을 사이트에 추가하면 사용 중인 기술에 관계없이 모든 방문자가 동일한 경험을 얻을 수 있습니다.
ARIA 어트리뷰트란 무엇인가요?
ARIA는 접근 가능한 리치 인터넷 애플리케이션의 약어입니다. 최신 HTML, 특히 자바스크립트가 풍부한 애플리케이션에서는 구문을 기반으로 개별 요소가 어떤 역할을 하는지 항상 명확하게 알 수 있는 것은 아닙니다.
사용자가 스크린 리더와 같은 접근성 도구를 사용하여 사이트를 볼 때 역할을 구분하기 어렵다는 것은 문제가 될 수 있습니다. 적절한 시맨틱 HTML이 없으면 최종 사용자가 접근성 도구를 사용할 때 사이트를 탐색하지 못할 수 있습니다.
이 문제를 해결하는 가장 바람직한 방법은 HTML5에서 적절한 시맨틱 요소를 사용하는 것이지만, 이것이 항상 실용적이거나 가능한 것은 아닙니다. 이때 HTML 요소의 ARIA 속성이 필요합니다. 이러한 속성은 접근성 도구가 처리할 수 있는 방식으로 요소의 역할과 속성을 정의하는 데 도움이 됩니다.
ARIA 속성이 중요한 이유는 무엇인가요?
간단히 말해, ARIA 속성을 사용하면 장애가 있는 사용자도 웹사이트를 사용할 수 있습니다. 이러한 역할과 속성은 사이트의 다양한 요소에 대한 추가 정보를 정의하며, 다른 방법으로는 쉽게 사용할 수 없을 수도 있습니다.
할당할 수 있는 ARIA 속성은 매우 다양합니다. 문서를 시각적이지 않은 방식으로 이해할 수 있도록 추가 컨텍스트가 필요한 모든 곳에서 사용해야 합니다.
예를 들어 기본 탐색이 ‘nav’ 요소가 아닌 ‘div’ 요소로 감싸진 ‘ul’ 요소로 구성된 사이트를 생각해 보겠습니다:
<div class="nav">
<ul>
<li>Home</li>
<li>Shop</li>
<li>About</li>
</ul>
</div>
ARIA 속성을 사용하여 사용자의 탐색을 도울 수 있습니다. 역할 및 aria-label 속성을
- 요소에 추가하면 화면 리더 및 보조 기술이 메뉴의 위치를 파악할 수 있습니다.
<div class="nav">
<ul role="navigation" aria-label="Main">
<li>Home</li>
<li>Shop</li>
<li>About</li>
</ul>
</div>
대부분의 경우 적절한 요소를 사용해야 하지만, 작업의 제약 조건 내에서 이것이 항상 가능하지 않을 수도 있습니다. 예를 들어 사이트에 진행률 표시줄을 사용해야 하지만 표준 표시줄에서는 허용되지 않는 디자인을 원하는 경우입니다.
이 시나리오에서는 진행률 표시줄을 표시하는 사용자 지정 요소 집합을 만들 수 있습니다. 그러나 화면 리더가 보기에는 이러한 요소들이 뒤섞여 엉망진창처럼 보이므로 사이트 방문자에게 유용한 정보를 전달할 수 없습니다.
래퍼의 역할을 진행률 표시줄로 설정하고 래퍼에 aria-valuenow, aria-valuemin, aria-valuemax 속성을 추가하면 여전히 진행률을 표시할 수 있습니다.
현대 시대에는 접근성 높은 웹사이트를 구축하는 것이 그 어느 때보다 중요합니다. 접근성을 염두에 두고 구축된 여러 React 컴포넌트 라이브러리가 있습니다.
접근성 높은 웹사이트는 여러 주요 검색 엔진에서 검색 순위를 높이는 데 도움이 될 뿐만 아니라 잠재적인 사용자 그룹을 사용자 기반에서 차단하지 않도록 보장합니다.
사이트에 적절한 ARIA 속성을 추가하면 모든 사용자에게 정보를 표시하는 데 도움이 됩니다. 최종 결과물은 모든 잠재 고객을 환영하고 모든 사람에게 가능한 한 동일한 경험을 제공하는 사이트가 될 것입니다.
어떤 ARIA 속성을 사용해야 하나요?
사이트에서 사용해야 하는 다양한 속성이 있습니다. 일반적으로 이러한 속성은 두 가지 범주로 나뉩니다. 첫 번째는 일반적으로 사용자 정의 대화형 요소를 설명하는 위젯 속성입니다.
알아야 할 다른 범주는 관계 속성입니다. 이는 특정 요소가 사이트의 나머지 요소 또는 다른 요소와 어떻게 관련되어 있는지에 대한 정보를 보조 기술에 전달하는 속성입니다.
어떤 ARIA 속성을 포함해야 하는지 고려할 때 간단한 답은 가능한 한 많이 포함해야 한다는 것입니다. 사용 중인 요소에 해당 요소가 수행하는 역할이 설명되어 있지 않은 경우 역할 속성을 사용해야 합니다.
레이블이 있는 필드가 있는 경우 해당 필드에는 aria-labeledby 속성이 있어야 합니다. 사용 중인 속성이 의미가 있는 한, 속성을 추가하여 사이트의 접근성을 높이는 것뿐입니다.
위젯 속성
위젯 속성은 훨씬 더 큰 범주입니다. 여기에는 표준 사이트에 추가해야 하는 대부분의 ARIA 속성이 포함되어 있습니다. 앞의 사용자 정의된 진행률 표시줄 예시에서 aria-valuenow, aria-valuemin 및 aria-valuemax는 모두 위젯 속성입니다. 이들은 현재 요소의 상태 또는 가능한 상태를 설명합니다.
요소의 상태를 설명하는 데 사용할 수 있는 다양한 속성이 있습니다. 가장 일반적인 것 중 하나는 아리아 레이블입니다. 이 속성은 보조 기술에만 표시되는 레이블을 배치한 요소에 적용합니다.
이 범주에 속하는 또 다른 일반적인 ARIA 속성 쌍은 aria-hidden 및 aria-disabled입니다. 이는 요소의 현재 상태와 화면 리더가 사용자에게 요소를 읽어야 하는지 여부를 전달할 수 있습니다. 이는 자체 스크린 리더가 있는 다양한 장치에 유용합니다.
관계 속성
위젯 속성과 달리 관계 속성은 보조 기술에 요소와 주변의 다른 요소와의 관계 및 사용에 대한 표시를 제공합니다. 가장 일반적인 속성은 역할 속성입니다. 역할은 요소가 사이트 내에서 어떤 용도로 사용되는지 지정합니다.
역할 속성을 탐색으로 설정하면 즉시 탐색 래퍼로 식별됩니다.
일부 관계 속성은 요소가 주변의 다른 요소와 관계를 맺는 방식을 정의합니다. 예를 들어 aria-labeledby 속성은 어떤 요소가 이 요소의 레이블 역할을 하는지를 보여줍니다. 이 속성은 시각적으로 의미가 있지만 문서 흐름에서 특정 양식 컨트롤에 대한 레이블이 뒤에 있는 레이아웃을 사용할 때 유용할 수 있습니다.
관계 속성은 위젯 속성에 비해 그 수가 적지만, 이러한 속성은 종종 더 중요합니다. 관계 속성은 종종 문서의 흐름과 제어를 설명하고 사용자가 사이트를 탐색하는 방식에 대한 추가 세부 정보를 제공할 수 있습니다.
이러한 속성은 사이트에서 양식 및 탐색 항목을 디자인할 때 특히 중요합니다.
HTML에 ARIA 속성을 포함하는 것이 중요한 이유
ARIA 속성은 웹사이트에서 간단하고 필요한 용도로 사용됩니다. 접근성 소프트웨어의 사용 여부와 관계없이 모든 사용자가 사이트에 액세스할 수 있도록 하는 역할을 합니다. 장애가 있는 사용자의 경우 사이트에 이러한 속성이 있으면 사이트를 사용할 수 있습니다.
보조 기술로 작업할 때 선호하는 방법은 적절한 시맨틱 요소를 사용하는 것입니다. 그러나 그렇게 할 수 없는 경우 ARIA 속성을 사용하면 사용자가 콘텐츠를 놓치지 않고 자유롭게 작업할 수 있습니다.