웹접근성 aria-label, aria-labelledby /스크린리더

 

 

 

           

            <!-- aria-label 사용시 스크린리더가 읽는 방법 -->

            <ul>

              <li><div class="del"><span class="hide">원가</span>3,000원</div></li> //'목록 항목 수 두개 원가 3천원'

              <li><div><span class="hide">판매가</span>1,000원</div></li> // '판매가 천원'

            </ul>

            <button>X</button> //'엑스버튼'  -알파벳X로 만듬

            <button class="close"></button> //공백 -'버튼'

            <button class="close"><span class="hide">닫기</span></button> //아리알기법(과거기법) -'닫기버튼'

            <button class="close" aria-label="닫기"></button>

                 //아리알레이블 (svg,img,background 닫기이미지OK/ 텍스트는X) - '닫기버튼'

            <a href="" target="_blank" aria-label="팝업 새창열기">팝업</a>  //'방문한링크 팝업 새창열기'

            <a href="" target="_blank" aria-label="팝업 새창열기" title="툴팁입니다.">팝업</a>  

                //타이틀은 마우스를 올려야 '툴팁입니다.'라는 텍스트가 보인다. 읽어주는 우선순위 높지 않다.

            aria-labelledby설명하고 싶은 특정한 영역의 텍스트가 화면에 보일때 사용.

            nar, artical, section등 특정 영역에 왔을때는 aria-labelledby로 영역을 설명 한다.

            <button aria-label="파란색" aria-labelledby="color">빨간색</button>

            <span id="color">노랑색</span>

               //'버튼 노랑색 노랑색' - aria-labelledby가 우선순위 1번 aria-label가 2번 그다음 빨간색 텍스트

                노랑색 텍스트를 두번 읽은 이유는 aria-labelledby="color"와 span에 id="color"로

                연결되서 '버튼 노랑색'먼저 읽고 span로 와서 '노랑색' 텍스트를 두번째로 읽은 것이다.

 

 

<!-- aria-label 사용시 스크린리더가 읽는 방법 -->
<ul>
					//'목록 항목 수 두개 원가 3천원'
  <li><div class="del"><span class="hide">원가</span>3,000원</div></li> 
  					// '판매가 천원'
  <li><div><span class="hide">판매가</span>1,000원</div></li> 
</ul>

<button>X</button> //'엑스버튼'  -알파벳X로 만듬
<button class="close"></button> //공백 -'버튼'

//아리알기법(과거기법) -'닫기버튼'
<button class="close"><span class="hide">닫기</span></button> 


//아리알레이블 (svg,img,background 닫기이미지OK/ 텍스트는X) - '닫기버튼'
<button class="close" aria-label="닫기"></button> 


//'방문한링크 팝업 새창열기'
<a href="" target="_blank" aria-label="팝업 새창열기">팝업</a>  

//타이틀은 마우스를 올려야 '툴팁입니다.'라는 텍스트가 보인다. 읽어주는 우선순위 높지 않다.
<a href="" target="_blank" aria-label="팝업 새창열기" title="툴팁입니다.">팝업</a>  


aria-labelledby설명하고 싶은 특정한 영역의 텍스트가 화면에 보일때 사용. 
nar, artical, section등 특정 영역에 왔을때는 aria-labelledby로 영역을 설명 한다.


<button aria-label="파란색" aria-labelledby="color">빨간색</button>
<span id="color">노랑색</span> 
//'버튼 노랑색 노랑색' 
- aria-labelledby가 우선순위 1번 aria-label가 2번 그다음 빨간색 텍스트
노랑색 텍스트를 두번 읽은 이유는 aria-labelledby="color"와 span에 id="color"로
연결되서 '버튼 노랑색'먼저 읽고 span로 와서 '노랑색' 텍스트를 두번째로 읽은 것이다.