IOS voiceover에서 발생하는 이슈

https://youtu.be/D9JrOBiy0bc

1. <a> 안에 여러 요소를 선택해버림(초점분리현상)

<a href="#">
  <div class="img"></div>
  <div class="title">쉬슬러 고농축 세제 3.05L 4개</div>
  <div class="price">
    <span class="num">19,900</span>
    <span class="unit">원</span>
  </div>
</a>

저 코드를 아이폰으로 읽어보면, 빨간색 영역과 같이 3번을 나눠서 읽어버림. <a>안에 block요소가 들어가는 경우 발생하는 이슈임. 이해가 안되는건 아니지만 스와이프를 여러번 해야하기때문에 불편함.

 

방법1(추천)

<div>대신 <span>과 같은 inline요소로 작성

 

방법2

<div>에 role="text'를 넣어줌

 

 

https://youtu.be/FVSBHQmMzIQ

2. 실제 영역을 잡지 못함

<a>뿐이 아닌 다른 요소에서도 일어나는 문제임.

 

방법1(추천)

안에 요소를 <span>등으로 감싸고, 거기에 aria-hidden줘서 못읽게 하기

(이렇게하면 자식을 잡을 수 없어서 부모요소를 잡게 됨)

 

이렇게하면 포커스는 잘 잡을 수 있는데 자식요소를 꼭 읽어야한다면 아래와같이 바꿔주면 됨.

- 부모에 aria-label로 따로 읽을 내용을 할당

- 부모랑 자식에 aria-labelledby랑 id 할당

 

방법2

안에 요소를 2개 이상의 inline태그로 변경