[html5,css3] 웹 접근성 / WAI-ARIA

ARIA는 HTML요소에 접근 가능한 설명용 텍스트를 넣을 수 있다.

그 방법이 바로 ARIA의 속성 중 label과 관련된 속성을 사용하는 것이다. 

 

간단하게 설명을 먼저 하자면

aria-label은 화면에 현재 요소를 설명할 텍스트가 없을 경우에 사용하는 설명용 텍스트를 담고있고

aria-labelledby는 화면에 현재 요소를 설명할 텍스트가 있을 경우에 해당 텍스트 영역과 현재 요소를 연결할 때 사용한다.

 

1. aria-label

 

1-1. aria-label은 모든 html 태그에서 사용할 수 있다.

 

1-2. 이미지를 사용해 시각적 표현을 할 경우 대체 텍스트 역할을 한다.

 

일반적인 텍스트를 사용해서 영역을 표현하는 경우가 아닌

이미지를 통해 영역을 표현하는 경우 해당 영역이 어떤 영역인지 설명할 수 있는 요소가 있어야한다.

 

그런 설명하는 역할을 하는 속성이 바로 aria-label 속성이다.

- 시각 사용자의 경우 요소의 컨텍스트와 시각적 모양은 목적을 결정하는 데 충분한 단서를 제공할 수 있습니다. 예를 들어 팝업 div(라이트 상자)의 오른쪽 상단 모서리에 자주 사용되는 'X'는 div를 닫기 위한 컨트롤을 나타냅니다.

aria-label어떤 경우 에는 선택한 디자인 접근 방식이나 레이아웃으로 인해 레이블이 표시되지 않지만 컨트롤의 컨텍스트와 시각적 모양이 목적을 명확하게 하는 상황에 대해 액세스 가능한 이름을 제공하기 위해 요소에 속성을 지정할 수 있습니다 .

다른 상황에서는 기본 aria-labelHTML 레이블 지정 요소가 컨트롤에서 지원되지 않는 경우 액세스 가능한 이름을 제공하기 위해 요소에 속성을 지정할 수 있습니다.

예를들어 X 버튼이 있다고 한다면

일반적인 사용자들의 경우 X버튼을 보고 클릭을 하고 사용하겠지만

시각적으로 X버튼을 확인할 수 없는 사용자들의 경우

해당 영역이 어떤 버튼인지 인지 할 수 없다. 그렇기 때문에

aria-label 속성을 사용해 해당 영역이 X버튼 이라는 정보를 담아준다.

 

 

2. aria-labelledby

aria-labelledby는 맨 처음 aria-label을 설명하기 전에 설명했듯이

화면에 현재 요소를 설명할 텍스트가 있을 경우에 해당 텍스트 영역과 현재 요소를 연결할 때 사용한다.

- 이 기술의 목적은 보조 기술에서 읽을 수 있는 사용자 인터페이스 컨트롤의 이름을 제공하는 것입니다.

aria-labelledby WAI-ARIA는 속성 을 사용하여 섹션, 그림, 양식 요소, 그림 등과 텍스트를 연결하는 방법을 제공합니다 . 이 기술은 aria-labelledby속성을 사용하여 양식 필드와 같은 사용자 인터페이스 컨트롤을 레이블을 지정하는 페이지의 텍스트와 연결합니다.

마찬가지로 공백 aria-describedby으로 aria-labelledby구분된 목록을 사용하여 페이지의 다른 요소를 가리키는 여러 ID를 허용할 수 있습니다. 이 기능은 aria-labelledby시각 사용자가 컨트롤을 식별하기 위해 주변 컨텍스트의 정보를 사용하는 상황에서 특히 유용합니다. ARIA9: aria-labelledby를 사용하여 여러 텍스트 노드의 레이블을 연결 하면 페이지의 다른 여러 텍스트 요소에서 이름이 생성되는 상황의 더 많은 예가 포함됩니다.

aria-labelledby의 기능은 기본 HTML 레이블 요소와 유사하게 보이지만 몇 가지 차이점이 있습니다.

• aria-labelledby둘 이상의 텍스트 요소를 참조할 수 있습니다. label하나만 참조할 수 있습니다.
• aria-labelledby다양한 요소에 사용할 수 있는 반면 label요소는 양식 요소에만 사용할 수 있습니다.
• label관련 양식 필드 를 클릭하면 초점이 맞춰집니다. 에서는 발생하지 않습니다 aria-labelledby. 이 동작이 필요한 경우 label스크립팅을 사용하여 이 기능을 사용하거나 구현하십시오.

 

 

 

출처:https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA16, https://abcdqbbq.tistory.com/77