정의 및 사용 방법

aria- 접두사를 가진 속성은
웹 접근성 향상을 위해 요소의 '상태'나 '특성'을 스크린 리더와 같은 접근성 보조 기술에 전달하는 데 사용됩니다.

aria- 접두사를 가진 속성(이하 aria-* 속성)은 스크린 리더와 같은 접근성 보조 기술에 요소의 상태(States)나 이름, 관계, 설명과 같은 특성(Properties) 정보를 전달합니다.
이 속성들을 사용하면 사용자 인터페이스의 접근성이 향상되고, 사용자는 웹 콘텐츠를 더 잘 이해할 수 있습니다. 특히, 장애를 가진 사용자에게 더 나은 접근성을 제공할 수 있습니다.

여기서 aria-*는 aria- 접두사를 가진 모든 속성을 의미합니다.

이러한 속성은 요소의 상태나 특성 정보를 전달할 뿐, 화면에서 요소의 동작이나 표시를 직접 변경하지는 않습니다.

기본 예제

다음은 aria-* 속성이 요소의 '상태'와 '특성' 정보를 어떻게 전달하는지 보여주는 기본 예제입니다.
각 예제를 통해 이러한 속성들이 요소의 '상태'와 '특성'을 어떻게 나타내는지 살펴보겠습니다.

요소의 '상태' 정보 전달

aria-* 속성은 요소의 현재 상태를 보조 기술에 전달하는 데 사용됩니다.
예를 들어, 콘텐츠가 펼쳐져 있는지, 선택되었는지와 같은 상태 정보를 스크린 리더에 명확하게 알릴 수 있습니다.

HTML 
<!--
    # aria-expanded는 요소가 확장된 상태인지 여부를 나타냅니다.
    # false이면 콘텐츠가 닫혀 있고, true이면 펼쳐져 있음을 의미합니다.
-->
<!-- 닫혀 있는 상태 -->
<button aria-expanded="false">상세 정보 보기</button>
<div style="display: none;">상세 내용...</div>

<!-- 펼쳐진 상태 -->
<button aria-expanded="true">상세 정보 닫기</button>
<div style="display: block;">상세 내용...</div>

요소의 '특성' 정보 전달

aria-* 속성은 요소의 이름, 관계, 설명과 같은 특성 정보를 접근성 보조 기술에 전달하는 데 사용됩니다.
이렇게 하면, 시각적으로는 확인하기 어려운 정보도 스크린 리더에 명확하게 전달할 수 있습니다.

HTML 
<!--
    aria-label은 요소의 이름(레이블)을 보조 기술에 제공합니다.
    이 속성은 화면에 보이는 텍스트와 관계없이 요소의 의미를 전달할 때 사용됩니다.
-->
<button aria-label="닫기"></button>

aria-* 속성의 유형

요소의 상태와 특성를 전달하는 aria-* 속성은 기능에 따라 다음의 네 가지 유형으로 분류합니다.

위젯 속성(Widget Attributes)

버튼, 체크박스 등과 같은 인터넷 애플리케이션(주로 위젯)이나, 향상된 웹 접근성 제공을 위해 사용자 인터페이스(UI, User Interface)에 특화된 상태나 특성을 제공합니다.

버튼, 체크박스 등과 같은 사용자 인터페이스 요소의 상태를 제공하는 aria-* 속성
aria-autocomplete 텍스트 입력 필드(주로 콤보박스)에서 사용자가 문자를 입력할 때 시스템이 예측된 값이 어떻게 표시될지를 접근성 보조 기술에 제공합니다.
aria-checked 체크박스, 라디오 버튼, 메뉴 항목 등 UI 요소의 선택 상태(체크 여부)를 접근성 보조 기술에 제공합니다.
aria-disabled 모든 요소에 적용 가능하며, HTML의 disabled 속성과 달리 해당 요소가 포커스(Focus)를 받을 수 있는 상태나 클릭, 선택 등의 기능에는 관여하지는 않지만 "비활성화됨"이라는 상태 정보를 접근성 보조 기술에 제공합니다.
aria-errormessage 모든 요소에 적용 가능하며, 사용자가 오류가 발생했을 때 오류 메시지가 표시되는 요소의 id 값을 aria-errormessage 속성의 값으로 지정하여 두 요소의 관계를 접근성 보조 기술에 제공합니다.
aria-expanded 버튼 등 특정 요소가 제어하는 하위 영역(메뉴, 아코디언, 드롭다운 등)이 현재 펼쳐져서 확장된 상태인지 아닌지의 여부를 나타냅니다.
aria-haspopup 버튼 등 특정 요소가 제어하는 하위 영역(메뉴, 아코디언, 드롭다운 등)이 사용될 수 있는 가용성 여부 또는 그 유형을 접근성 보조 기술에 제공합니다.
aria-hidden 모든 요소에 적용 가능하며, 특정 요소를 접근성 보조 기술에서 숨길지 여부를 지정합니다.
aria-invalid 사용자가 입력한 값이 애플리케이션에서 예상하는 형식과 일치하지 않은 상태를 접근성 보조 기술에 제공합니다.
aria-label 요소의 이름(레이블)을 부여하여 접근성 보조 기술에 제공합니다.
aria-level 제목, 트리, 중첩 그리드, 중첩 탭 목록 등에서 해당 요소가 계층 구조상 어느 정도의 깊이(수준)에 있는지를 명시적으로 접근성 보조 기술에 제공합니다.
aria-modal 해당 요소가 표시될 때 모달(Modal)인지 여부를 나타냅니다. 모든 aria-* 속성이 그렇듯 요소가 실제로 모달이 되도록 하는 기능은 개발자가 구현해야 합니다.
aria-multiline HTML의 contenteditable 속성으로 만든 텍스트 편집 필드가 여러 줄 입력을 허용하는지 아니면 한 줄만 허용하는지를 접근성 보조 기술에 제공합니다.
aria-multiselectable 사용자가 현재 선택 가능한 하위 항목 중에서 두 개 이상의 항목을 선택할 수 있음을 접근성 보조 기술에 제공합니다.
aria-orientation 요소의 방향이 가로, 세로 또는 알 수 없음/모호함인지 여부를 나타냅니다. 사용자가 특정 위젯을 탐색하는 방법을 접근성 보조 기술을 통해 제공해야 할 때 사용합니다.
aria-placeholder 텍스트를 입력하는 컨트롤 요소에 텍스트 박스에 값이 없을 때 사용자의 데이터 입력을 돕기 위한 짧은 힌트(단어 또는 짧은 문구)를 나타냅니다. 시각장애인을 위한 스크린 리더는 기본적으로 HTML의 placeholder 속성의 값을 읽지 않으므로, 접근성 향상을 위해 aria-placeholder 사용을 고려해야 합니다.
aria-pressed 토글 버튼(Toggle Button, 여러 상태를 번갈아 가며 전환하는 버튼)의 현재 "눌린" 상태를 나타냅니다. 이 속성이 버튼 요소에 있으면 접근성 보조 기술은 해당 버튼을 단순 클릭 버튼이 아닌 '토글 버튼'으로 인식합니다.
aria-readonly 요소가 '편집 불가능한 상태'인지 여부를 접근성 보조 기술에 제공합니다.
aria-required 폼 제출 시 사용자가 사전에 반드시 값을 입력하거나 선택해야 하는 필수(required) 컨트롤 요소임을 접근성 보조 기술에 제공합니다. 주로 개발자가 직접 커스텀으로 만든 컨트롤 요소에 사용합니다.
aria-selected 현재 컨트롤 항목 요소가 선택되어 있는지 여부를 접근성 보조 기술에 제공합니다.
aria-sort 표(table)나 그리드(grid)의 헤더 요소에서 해당 열(Column)이나 행(Row)이 어떤 순서로 정렬되었는지를 접근성 보조 기술에 제공합니다.
aria-valuemax 범위를 나타내는 위젯에 허용되는 최댓값이 얼마인지 접근성 보조 기술에 제공합니다.
aria-valuemin 범위를 나타내는 위젯에 허용되는 최솟값이 얼마인지 접근성 보조 기술에 제공합니다.
aria-valuenow 범위를 나타내는 위젯의 현재값이 얼마인지 접근성 보조 기술에 제공합니다.
aria-valuetext 범위를 나타내는 위젯의 현재값인 aria-valuenow의 값을 좀 더 사용자 친화적이고 사람이 이해하기 쉬운 방식으로 표시하는 방법으로 제공하고 싶을 때 사용합니다.

라이브 영역 속성(Live region attributes)

라이브 영역 속성은 콘텐츠가 동적으로 변경될 때, 그 변경 내용을 스크린 리더와 같은 접근성 보조 기술에 전달하기 위해 사용됩니다.
이 속성들은 사용자가 요소에 초점을 이동하지 않아도 콘텐츠의 변경 사항을 전달하며, 이러한 변경을 어떻게 처리할지에 대한 정보를 함께 제공합니다.

이 속성들은 모든 요소에 적용될 수 있습니다.

콘텐츠가 동적으로 변경될 때 보조 기술에 정보를 전달하는 라이브 영역(Live Region) 관련 aria-* 속성
aria-live 요소의 내용이 동적으로 변경될 때, 접근성 보조 기술이 사용자에게 변경 내용을 어떤 방식으로 알릴지를 지정합니다.
aria-atomic 요소의 내용이 동적으로 변경될 때, 접근성 보조 기술이 변경된 부분만 알릴지, 아니면 해당 영역 전체를 함께 알릴지를 지정합니다.
aria-relevant 요소의 내용이 동적으로 변경될 때, 접근성 보조 기술이 어떤 종류의 변화(추가, 삭제, 텍스트 변경 등)가 일어났을 때 사용자에게 알릴지 지정합니다.
aria-busy 요소의 내용이 동적으로 변경될 때, 현재 수정 중인지 여부를 접근성 보조 기술에 제공합니다.

드래그 앤 드롭 속성(Drag-and-Drop attributes)

예전에는 드래그 앤 드롭 속성(Drag-and-Drop attributes)이 존재했지만, 이제는 명세서(2017년 ARIA 1.1부터)에서 더 이상 사용되지 않는 속성(Deprecated)으로 분류했습니다.
아직 많은 학습서나 기존 코드에서 사용하고 있으므로 관심사를 위해서만 아래에 나열합니다.

  • aria-dropeffect
  • aria-grabbed

관계 속성(Relationship attributes)

시각적으로 보지 않으면 문서 구조에서 쉽게 파악할 수 없는 요소 간의 관계 또는 연관성을 접근성 보조 기술에 전달하는 속성들입니다.

문서 구조 내 요소 간의 관계를 접근성 보조 기술에 제공하는 aria-* 속성
aria-activedescendant 콤보박스, 텍스트 박스, 메뉴, 탭 등 포커스를 받을 수 있는 여러 하위 요소를 가지는 부모인 대화형 요소에 현재 포커스가 활성화된 하위 요소가 있을 경우 해당 요소의 id 값을 aria-activedescendant 속성의 값으로 지정하여 두 요소의 관계를 접근성 보조 기술에 제공합니다.
aria-colcount 표, 그리드, role="treegrid"인 요소에서 실제로 DOM(Document Object Model)에 노출되지 않은 열(column)을 포함하여 전체 열의 개수가 몇 개인지를 접근성 보조 기술에 제공합니다. 주로 데이터가 너무 많아 화면에 일부 열만 렌더링하는 방식을 사용할 때, 사용자에게 전체 구조를 정확히 알리기 위해 사용합니다.
aria-rowcount 표, 그리드, role="treegrid"인 요소에서 실제로 DOM(Document Object Model)에 노출되지 않은 행(row)을 포함하여 전체 행의 개수가 몇 개인지를 접근성 보조 기술에 제공합니다. 주로 데이터가 너무 많아 화면에 일부 행만 렌더링하는 방식을 사용할 때(가상 스크롤 등), 사용자에게 전체 데이터의 규모를 정확히 알리기 위해 사용합니다.
aria-colindex 표, 그리드, role="treegrid"인 요소에서 전체 열 중 현재 열이 몇 번째 위치에 있는지를 1부터 시작하는 인덱스 기반으로 접근성 보조 기술에 제공합니다. 주로 aria-colcount와 함께 사용하며, 데이터가 너무 많아 화면에 일부 열만 렌더링할 때 현재 보여주는 열이 실제 데이터상에서 몇 번째 열인지 정확한 위치 정보를 알리기 위해 사용합니다.
aria-rowindex 표, 그리드, role="treegrid"인 요소에서 전체 행 중 현재 행이 몇 번째 위치에 있는지를 1부터 시작하는 인덱스 기반으로 접근성 보조 기술에 제공합니다. 주로 aria-rowcount와 함께 사용하며, 데이터가 너무 많아 화면에 일부 행만 렌더링할 때 현재 보여주는 행이 실제 데이터상에서 몇 번째 행인지 정확한 위치 정보를 알리기 위해 사용합니다.
aria-colspan 표, 그리드, role="treegrid"인 요소에서 특정 셀이 확장되어 걸쳐 있는 테이블 열(column)의 수를 접근성 보조 기술에 제공합니다.
aria-rowspan 표, 그리드, role="treegrid"인 요소에서 특정 셀이 아래쪽으로 확장되어 걸쳐 있는 행(row)의 수를 접근성 보조 기술에 제공합니다.
aria-controls 현재 요소에 의해 내용이나 존재 여부가 제어되는 요소(또는 요소들)를 식별하기 위해 식별할 요소의 id 값을 aria-controls 속성의 값으로 지정하여(여러 요소일 경우 띄어쓰기로 구분한 id 값) 이 요소(들)의 관계를 접근성 보조 기술에 제공합니다.
aria-describedby 해당 속성이 설정된 요소를 설명하는 요소(또는 요소들)를 식별하기 위해 식별할 요소의 id 값을 aria-describedby 속성의 값으로 지정하여(여러 요소일 경우 띄어쓰기로 구분한 id 값) 이 요소(들)의 관계를 접근성 보조 기술에 제공합니다.
aria-description 해당 속성이 설정된 요소에 대한 추가적인 설명을 제공하기 위해, 설명할 텍스트 내용을 aria-description 속성의 값으로 직접 지정하여 접근성 보조 기술에 제공합니다. aria-describedby와 달리 별도의 요소를 생성하여 id로 연결할 필요 없이 문자열(string) 형태로 즉시 설명을 추가할 수 있습니다.
aria-details 해당 속성이 설정된 요소와 관련된 추가(상세) 정보를 제공하는 요소(또는 요소들)를 식별하기 위해 식별할 요소의 id 값을 aria-details 속성의 값으로 지정하여(여러 요소일 경우 띄어쓰기로 구분한 id 값) 이 요소(들)의 관계를 접근성 보조 기술에 제공합니다.
aria-errormessage 사용자가 오류가 발생했을 때 오류 메시지가 표시되는 요소의 id 값을 aria-errormessage 속성의 값으로 지정하여 두 요소의 관계를 접근성 보조 기술에 제공합니다.
aria-flowto 접근성 보조 기술은 사용자가 현재 요소 다음에 읽을 요소의 id 값을 aria-flowto 속성의 값으로 지정하여, 문서 원본 순서대로 읽는 대신에 작성자가 의도한 대체 읽기 순서를 제공합니다.
aria-labelledby 해당 속성이 설정된 요소에 대한 이름(레이블) 정보를 제공하는 요소(또는 요소들)를 식별하기 위해 식별할 요소의 id 값을 aria-labelledby 속성의 값으로 지정하여(여러 요소일 경우 띄어쓰기로 구분한 id 값) 이 요소(들)의 관계를 접근성 보조 기술에 제공합니다.
aria-owns DOM(Document Object Model) 구조상으로는 부모-자식 관계가 아니지만, 접근성 보조 기술에는 부모-자식 관계로 인식하게 강제합니다. 자식으로 강제(소유)할 요소의 id 값을 aria-owns 속성의 값으로 지정하여(여러 요소일 경우 띄어쓰기로 구분한 id 값) 이 요소(들)의 관계를 접근성 보조 기술에 제공합니다. aria-controls는 제어되는 관계를 제공하지만 aria-owns는 소유(계층 구조)를 바꿉니다.
aria-setsize 목록, 트리, 메뉴 등과 같은 그룹 내에서 현재 포함된 전체 항목의 개수를 접근성 보조 기술에 제공합니다. 주로 aria-posinset과 함께 사용하며, 데이터가 너무 많아 화면에 일부 항목만 렌더링할 때 보조 기술 사용자에게 실제 데이터의 전체 규모가 어느 정도인지 정확한 정보를 알리기 위해 사용합니다.
aria-posinset 목록, 트리, 메뉴 등과 같은 그룹 내에서 현재 항목이 전체 항목 중 몇 번째 위치에 있는지를 1부터 시작하는 인덱스 기반으로 접근성 보조 기술에 제공합니다. 주로 aria-setsize와 함께 사용하며, 전체 데이터 중 일부 항목만 화면에 렌더링할 때 현재 항목이 실제 데이터상에서 몇 번째 위치인지 정확한 정보를 알리기 위해 사용합니다.

aria-* 속성 사용 시 고려해야 할 점

aria-* 속성을 사용할 때 고려해야 할 몇 가지 사항이 있습니다.

표준과 호환성 유지

aria-* 속성은 HTML의 부족한 접근성 부분을 채워주는 '보조' 수단입니다.

HTML 표준에서 이미 제공하는 태그나 속성이 있다면 그것을 사용하는 것이 최선입니다.
예를 들어, 다음과 같은 코드에서 사용된 aria-* 속성은 오남용이며, 적절하지 않습니다.

HTML 
<form>
    <fieldset>
        <legend>비밀번호는 필수</legend>
        <p>
            <label for="userpassword">비밀번호(*필수)</label>
             <!-- 대표적인 aria-* 속성 오남용 사례 -->
            <input id="userpassword" type="password" required aria-required="true">
        </p>
        <p>
            <button type="submit">제출</button>
        </p>
    </fieldset>
</form>

위 코드에서 <input>에 사용된 aria-required="true"는 대표적인 속성 오남용 사례입니다. 이미 HTML5 표준 속성인 required가 설정되어 있기 때문에, 접근성 보조 기술은 이 입력 칸이 필수 항목임을 충분히 인지할 수 있습니다.

이처럼 표준 HTML 태그나 속성(required, hidden, checked 등)이 aria-* 속성과 동일한 기능을 수행한다면, 접근성 보조 기술과의 충돌을 방지하고 코드의 간결함을 유지하기 위해 표준 속성을 우선적으로 사용해야 합니다.

적절한 레이블 관련 속성 적용

aria-label이나 aria-labelledby는 해당 요소에 대한 이름(레이블) 정보를 제공합니다.
이 속성을 사용하는 요소에 이미 적당한 이름(레이블) 정보가 있다면 이 속성의 사용은 오남용이며, 적절하지 않습니다.

HTML 
<button type="submit" aria-label="제출">제출</button>

위의 첫 번째 예시에서 <button>은 이미 내부에 '제출'이라는 텍스트 콘텐츠를 가지고 있습니다. 이 텍스트가 브라우저와 보조 기술에 의해 자동으로 버튼의 이름(레이블)으로 인식되므로, 별도의 aria-label="제출"을 중복해서 사용할 필요가 없습니다.

HTML 
<footer role="contentinfo" aria-label="글로벌 푸터" aria-labelledby="g-f">
    <h2 id="g-f">글로벌 푸터</h2>
    <!-- footer content -->
</footer>

두 번째 예시인 <footer>는 더욱 심각한 오남용 사례입니다. aria-label과 aria-labelledby가 동시에 사용되었는데, 이 경우 보조 기술은 보통 aria-labelledby를 우선순위로 인식하며 aria-label은 무시됩니다.

가장 중요한 것은, 이미 내부의 <h2> 태그가 푸터의 제목 역할을 의미론적으로 수행하고 있다면, 보조 기술 사용자에게도 해당 텍스트가 자연스럽게 전달됩니다. 여기에 불필요한 레이블 속성을 중복 적용하는 것은 관리 포인트만 늘리고 코드의 명확성을 해치는 결과를 초래합니다.

명세서 사양

aria-* 속성의 명세서 사양
명세서 사양
aria-* Accessible Rich Internet Applications (WAI-ARIA) 1.2
#state_prop_taxonomy

참고문헌

같이 보기