이미지를 표시할 수 없거나 할때 대체텍스트를 사용하여 어떤 이미지인지 보여주는 용도로 알고있었는데 최근 작업한 것에서는 좀더 신경써야 할 부분이 되어버렸다.
바로 모바일 웹 접근성 검사 이슈가 있었다.
시각이 불편한 사용자들을 위해서 Android 와 iOS 에서는 다음과 같은 기능을 제공한다.
Android - TalkBack (톡백 또는 토크백)
iOS - VoiceOver (보이스오버)
해당 기능을 켠 상태로 웹페이지를 탐색을 하게되면 해당 페이지의 항목들을 소리내어 읽어준다.
실제로 사용을 해보니 눈을 감고 웹페이지를 사용할 수 있을 정도이다.
(물론 모바일 웹 접근성에 대해서 훌륭히 제작된 페이지의 경우에만..)
모바일 웹 접근성 페이지를 만들 때 iframe 태그를 가급적 사용하지 않는 것이 좋다고 생각을 하는데 이유는 Android 에서 치명적인 결함이 있다.
1. iframe 내부에 있는 컨텐츠에 focus 이동이 되지 않는다.
(iframe 자체를 선택 시 iframe 에 focus 가 맞춰지며 내부로 들어가지 않는다. double tab 으로 액션을 하게되면 처음에 선택한 위치에 링크가 있다면 링크로 이동이 되지만 링크가 여러개인 경우 시각이 불편한 사용자는 어떤 링크를 클릭했는지 인지할 수 없다.)
2. 왼쪽에서 오른쪽으로 스와이프 할 시 iframe 으로 focus가 정상적으로 이동되지 않는다.
(1번에서의 설명대로 iframe 을 직접 tab 하면 focus 선택은 된다.)
(이미지 출처 - http://blog.daum.net/foreveryunje/4)
눈을 감고 인터넷을 직접 해보니 2번의 이슈가 발생을 하여 Div 나 Span 태그를 읽고 있다가 iframe 으로 focus 이동이 되지 않아 iframe 뒤에있는 Element 로 이동을 할 수 없는 문제가 발생했다.
iframe 내부에 있는 컨텐츠만 읽지 못하는게 아니라 다른 멀쩡한 컨텐츠 까지도 접근을 할 수 없으니 상당히 치명적이라고 할 수 있다.
대체방법
iframe 내부에 있는 페이지의 HTML 코드를 긁어온 다음에 사용자에게 보여질 페이지에 끼워 넣는방법
<html><head></head>
<body>
<div>
...
<html><head></head><body> Google Website </body></html>
...
</div>
</body>
</html>
* 위의 예제에서 html 을 끼워 넣을때는 html, head, body 태그와 같은 Element 는 제거 후 넣어줘야 한다.
결과적으로 iframe 이 들어가는 페이지는 보통 웹서버에서 뿌려줄 테니 해당 내용을 가져와서 같이 보여주면 될듯 한데..
1. iframe 내부에 들어가는 페이지를 직접 수정이 가능하다면 더 좋은 일이고
2. 직접 하지 않더라도 협업 업체라면 서로 협의 후 알맞게 수정을 하면 되지 않을까 싶다.
3. 하지만 네이버나 구글과 같이 일반적으로 공개되어 있는 페이지라면 충돌나는 기능이 있는지 테스트 및 가공이 필요하다.
만약에 불가피하게 iframe 을 사용해야 한다면 다음과 같이 사용을 할 수 밖에 없다고 생각한다.
1. iframe 태그의 title 속성에 iframe 의 정보를 최대한 많이 집어 넣어준다.
2. 몇개의 버튼이나 링크가 있는경우 선택을 해야 하는 경우라면 iframe 을 쪼개서 하나의 iframe 에 하나의 링크만 나오게 한다.
3. iframe 내부에 있는 내용이 변경된다면
iframe 을 넣으면서 조금더 불편하게 만들 수 있지 않을까 고민을 했지만 다른 대안이 따로 떠오르지 않는다.
(좋은 방법이 있다면 댓글로 알려주세요.)
