현재 페이지 위치

Home> 광장> 상세보기

목록다음 글 보기137/139이전 글 보기

의견수
11
조회수
3309
공유하기
페이스북으로 공유하기페이스북 공유 횟수 :0트위터로 공유하기트위터 공유 횟수 :0

선택된 탭의 상태를 나타내는 방법, 뭐가 좋을까요?

접근성

시각 장애인을 대상으로 사용성 테스트를 몇 번 진행해보니 선택된 메뉴의 상태를 알기 어렵다는 얘기를 많이 듣게 됩니다.

탭 메뉴를 제공할때 기본적으로는 다음과 같이 코드를 작성하게 됩니다.

<ul>
<li class="on"><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>

선택된 메뉴에는 on 이나 selected와 같은 클래스를 줘서 시각적으로 다르게 표현하기도 하죠. 그런데 이 정보는 시각 장애인이 인식할 수 없습니다. 스타일만 바꾼 것이니까요.

그렇다면 어떻게 해야 시각 장애인도 탭 메뉴가 선택되었다는 인식할 수 있을까요?

제가 생각해본 방법 중 첫번째는 선택된 탭의 링크를 제거하는 것입니다.

페이지 네비게이션에는 이렇게 마크업 하는 경우도 꽤 있는듯 합니다. 그런데 선택된 탭도 클릭할 수 있다고 생각하는 것이 거의 일반적이어서.. 이렇게 하는 것이 과연 좋을지는 모르겠습니다. 사용자의 패턴을 바꾸면 모를까요.

<ul>
<li class="on">메뉴1</li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>

두번째는 선택된 메뉴에 숨김 텍스트로 선택된 상태임을 알리는 것입니다.

(아래 코드에서 blind라는 클래스는 화면에 보이지 않지만 스크린리더에서 인식 가능한 방법으로 스타일을 지정한 클래스로 가정합니다.)

아이폰 앱 개발할때 사용하는 hint 개념을 차용할 수 있을듯 한데, 웹에서는 아직 hint라는 것을 구현하기에 적절한 요소나 속성이 없는것 같아 span 요소로 작성해보았습니다.

<ul>
<li class="on"><a href="#">메뉴1 <span class="blind">선택됨</span></a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>

아무래도 이러한 이슈를 고려하지 않았을 때 보다는 번거로울 수 있겠지만 탭의 선택 상태가 당연히 제공되어야 하는 정보라고 생각한다면 고민해볼 가치가 있는것 같습니다. 더 좋은 의견있다면 알려주세요~

(seleted="selected" 속성을 아무대나 사용할 수 있다면 좋을텐데요....;; )

의견보기

전체 의견
11

Insanehong

회원 등급 : 1

0개5개

저는 두 번째 방법, 숨김텍스트로 선택 된 상태임을 알리는 방식과 함께, 해당 영역 시작 부분에 헤딩요소(<h1>~<h6>)를 제공하는 것이 시각 장애인들에게 화면을 가장 잘 표현해줄 수 있는 방법이라고 생각합니다.

마크업 시에 고려해야 될 사항도 늘어나게 되고 번거롭게 될 것 같긴 하지만.. 그래도 이런 작은 배려가 시각장애인분들에게는 크게 느껴질 수 있지 않을까 하는.... 생각이 듭니다^^

현영배

회원 등급 : 1

0개10개

네비게이션 역할이 아닌 본문 중 내용이고 단순히 문서로만 본다면 ㅡㅡㅡㅡ 이놈을선택했을때 해당 내용을 보여주는 탭이라면 디자인만 탭이지라고 생각합니다 인풋이나 버튼 등으로 selected 속성선언이 기능하게 메뉴만들고 선택시 내용을보여주면 어떨까요?

Insanehong

회원 등급 : 1

0개5개

@Young Bae Hyun

네비게이션 역할이 아닌 본문 중 내용이고 단순히 문서로만 본다면 ㅡㅡㅡㅡ 이놈을선택했을때 해당 내용을 보여주는 탭이라면 디자인만 탭이지라고 생각합니다 인풋이나 버튼 등으로 selected 속성선언이 기능하게 메뉴만들고 선택시 내용을보여주면 어떨까요?

음... input 혹은 select 요소를 사용하면 일단 시멘틱 요소적인 측면에서 더욱 혼란만 있지 않을가 하네요

현영배

회원 등급 : 1

0개10개

@insanehong 님 말씀이 맞습니다. 결국 그냥 2번 방법인 텍스트로 넣어주는 방법 밖에 없나요? 벌써 흔한방법이고 스크립트드써야하고. 네이트비하게 해보려다ㅋ 안즣은 아이디어가 나왔네요

Insanehong

회원 등급 : 1

0개5개

@Young Bae Hyun

고민이 많이 되는 문제이긴 해요. 현재 스펙으로는 active 에 대한 옵션이 없으니까요.

다만 음성적으로 지원이 가능해야 한다면 해당 정보를 정확히 전달 할 수 있는 텍스트 전달이 가장 좋지 않을가 하는게 제 생각인데 더 좋은 아이디어가 있으신 분들이 나타나길 바라고 있다고 할가요 ㅎㅎ

miname

회원 등급 : 1

0개2개

먼저, 안녕하세요. 반갑습니다.

정석대로라면 웹 앱이나 웹 페이지에서 구현된 탭에 적용될 수 있는 것으로 WAI-ARIA의 role 중에 tab, tablist, tabpanel이 있습니다.

여기서 선택된 탭은 aria-selected="true"로 설정하고 다른 놈한텐 JavaScript의 힘을 빌려 aria-selected="false"로 설정합니다.

이렇게 하면, 스크린리더가 선택된 탭을 제대로 인지해서 시각장애인한테도 이 사실을 알려줄 수 있을듯 한데, 실제 국산 스크린 리더가 "tab" role을 인식해서 적당한 반응을 하느냐는 저 또한 궁금한 사항이군요.

이와 관련해서 얼마 전 책갈피해 둔 글입니다. Advanced ARIA tip #1: Tabs in web apps

생기자마자 벌써 유익한 토론 글이 올라오는군요. 앞으로 자주 뵙기를 바랍니다. 그리고 이렇게 좋은 토론의 장을 마련해주신 널리 관계자분들에게도 고맙습니다. :)

Nyx Chung

회원 등급 : 1

안녕하세요 정대영입니다.

0개2개

시각 장애인 분의 의견이 궁금한데요. 이미 학습되었다는 이유로나 첫번째 방법으로도 현재 페이지를 인식하는데 충분하다면 개발 공수를 더 들일 필요가 없을듯도 합니다. 물론 첫번째 방법으로 실제 사용자가 충분히 인지 못한다면 좀더 친절한(?) 두번째가 맞을듯하구요

김동현

회원 등급 : 1

1개3개

먼저 반갑습니다. 그냥 읽고 가려다 시각장애인 실 사용자의 의견이 궁금하다 하셔서 의견 남겨봅니다.

일단 스크린리더 및 인터넷 활용 정도에 따라 다르지만 초보 사용자를 고려한다면 2번 방법이 괸찮을 것으로 생각됩니다. @miname 님께서 aria 구현 방법을 말씀 주셨는데. 국내 스크린리더가 aria는 조금씩 지원하기 시작한 상황이고. 실제 aria로 구현했고, 스크린리더가 이를 잘 지원한다 하여도 시각장애인 사용자의 학습된 사용 페턴과 달라 한동안은 혼란이 있을것 같습니다.

Hyongsop Kim

회원 등급 : 1

1개4개

안녕하세요? '널리'에 처음으로 글을 남기는 김형섭입니다.

먼저 널리 포럼을 만들어주신 모든 분들께 정말 감사드립니다. 이렇게 웹접근성에 대해 많은 관심을 가지시는 분들이 있기에 저희 사용자 입장에서도 더 홈페이지를 편하게 이용할 수 있는 것이 아닌가 싶습니다.

실질적인 스크린리더를 사용하고 있는 시각장애인 입장에서 선택된 탭 처리에 대해 말씀드리겠습니다. 사실 아시다시피 스크린리더에서 웹페이지를 탐색을 하게 되면 웹탐색모드(가상커서)에서 페이지의 정보를 갱신하여 시각장애인들이 그 정보를 읽게 되는데 마치 문서 편집기에 한 문서를 열어 놓은 것 같은 느낌을 받게 됩니다. 그래서 좌측메뉴, 우측메뉴, 탭메뉴와 같은 것들의 경계성을 처음부터 파악하기 어렵습니다. 물론 컴퓨터를 많이 해보신 분들이면 메뉴를 보니까 좀 큼직큼직한 주제면 대메뉴, 작은 주제면 소메뉴, 정렬방식이나 보기방식과 같은 것은 탭메뉴라고 이해를 할 뿐입니다. 그러므로 가장 좋은 것은 탭메뉴는 탭이라는 글자가 각각의 메뉴에 붙어 있는 것이고 선택된 탭은 선택됨이라고 그 링크에 들어 있는 것입니다. 가장 대표적으로 제가 제시한 대로 되어 있는 사이트는 http://www.hp.co.kr 입니다. 거기서 고객지원으로 들어가면 여러 탭들이 있고 열린 탭은 오픈이라고 표시되어 있습니다. 이렇게 만들면 스크린리더 사용자가 일반 사용자와 이야기를 나눌 때도 탭메뉴라는 명칭 자체의 공유가 가능하고 또 어떤 탭이 선택되어 있는지 알수 있지 않을까 싶습니다. 감사합니다.

김혜일

회원 등급 : 1

0개13개

1번이 가장 많이 쓰였지만 단점은.... 목록으로 만들었더라도 사용자는 일반텍스트 혹은 영역의 제목과 혼동할 우려가 높습니다. (게시판 에서 하단의 페이지 목록에서는 매우 유용합니다.)

2 번을 1번과 함께 보완해서 사용하면 도움이 되겠지만 사용자가 탭 목록을 메뉴리스트로 인지하고 들어갔을 때 유용한 방법입니다. 탭 숫자가 많아진다면 혼동되겠죠. (이 방법은 회원가입, 은행이체등의 단계를 표시하는 부분에서 매우 유용합니다)

추가1 탭메뉴 앞에 숨김텍스트로 XXX탭메뉴라는 것을 미리 알리고 목록을 인지할 수 있도록 가이드, (gnb에 링크가 많을 때 대메뉴 구분 시 유용, 사이트 메인에 주요서비스 링크를 별도로 제공할 때 유용)

추가2 해당 컨텐츠 영역의 첫 부분에 h 로 현재 탭 정보를 제공, 다른 탭링크를 눌러서 페이지가 갱신되었을 때 컨텐츠 영역으로 빠르게 찾아가는데 활용할 수 있음 (컨텐츠 블럭의 제목을 활용해서 탭 제목을 안내하는 방법)

추가3 페이지 타이틀에 현재 탭정보까지 표시하기 (탭 메뉴라는걸 인지하고 링크를 사용했을 때, 어차피 페이지 처음부터 탐색해야하니까 현재 탭을 인지하는데 가장 유용할 듯합니다.

aria role은 아직 국내에서는 먼나라 이야기네요. 화면낭독기에서 지원하지 않기 때문에 안타깝지만 사용해도 기대한 효과를 거둘 수 없습니다.

여기서 간과한 것이 컨텐츠 선형화 부분인 듯합니다. 제목 - 내용 -제목 - 내용... 이 순서가 얼마나 의미를 갖고 얼마나 사용성을 높일 수 있느냐도 관건인 듯합니다. 물론 이게 가장 좋은 방법이지만.. 내용에 초점을 받는 요소가 많은 경우 다음 탭을 보려면 꽤 많은 키조작이 필요합니다.

그냥 뭐 그렇다는 겁니다. 뭐든 일괄적으로 적용하기는 힘들고 컨텐츠에 따라 상황에 따라 적절하게 변형이 필요하다는 말이 하고 싶었습니다.

펄님

회원 등급 : 1

3개7개

추가1 탭메뉴 앞에 숨김텍스트로 XXX탭메뉴라는 것을 미리 알리고 목록을 인지할 수 있도록 가이드, (gnb에 링크가 많을 때 대메뉴 구분 시 유용, 사이트 메인에 주요서비스 링크를 별도로 제공할 때 유용)

모든 탭메뉴에 적용하는 것은 무리겠지만 페이지 내의 주요 네비게이션에 헤딩을 제공하는 것은 공감합니다.

추가2 해당 컨텐츠 영역의 첫 부분에 h 로 현재 탭 정보를 제공, 다른 탭링크를 눌러서 페이지가 갱신되었을 때 컨텐츠 영역으로 빠르게 찾아가는데 활용할 수 있음 (컨텐츠 블럭의 제목을 활용해서 탭 제목을 안내하는 방법)

선택된 탭 시작부분에 헤딩을 제공하는 것 정말 필요하죠! 좋은 의견인것 같습니다~

목록다음 글 보기137/139이전 글 보기

공유하기
페이스북으로 공유하기페이스북 공유 횟수 :0트위터로 공유하기트위터 공유 횟수 :0