aria-label

2021. 7. 7. 01:04웹 접근성

https://youtu.be/VsWfNPvDgiA

 

https://youtu.be/oPQWjNglt_Y

 

 

장점 : 
IR기법을 대체해서 사용 가능

단점 : 
p, i, u, del처럼 텍스트를 표현하기위한 요소나
span, div처럼 의미없는 태그의 경우
ex) <span aria-label="설명">텍스트</span> 라면
aria-label에 있는 속성이 아닌 "텍스트"라는 글씨를 읽어줌

aria-label에 있는 설명은 간결해야 한다.
길 경우엔 
aria-describedby를 사용 해야 한다.

 

<span aria-describedby="desc">텍스트</span>
<p id="desc">ARIA는 요소에 레이블과 설명을 추가하기 위한 여러 가지...</p>


내용이 간결할경우
텍스트가 시각적으로 보일경우 (aria-labelledby)
아이콘처럼 텍스트가 보이지 않을경우 (aria-label)

내용이 길경우
aria-describedby

aria-labelledby, aria-describedby 이 속성의 값은
다른 태그중의 id값의 참조 형태로 들어간다.