알씨타운
[웹 접근성 가이드] 2. 운용의 용이성 : 쉬운 네비게이션 본문
안녕하세요, 알씨타운입니다!😁
저번 포스팅에 이어 2번째 지침, 운용의 용이성 중
쉬운 네비게이션 검사 항목에 대해 정리 해보겠습니다!
[ 운용의 용이성 ]
2.1 입력장치 접근성
2.2 충분한 시간 제공
2.3 광과민성 발작 예방
2.4 쉬운 네비게이션
2.4 쉬운 네비게이션
1. 반복 영역 건너뛰기
웹 페이지마다 공통적으로 들어가 있는 영역은
페이지를 로드할 때마다, 반복되는 부분을 보여 줍니다.
주로 반복되는 영역의 예 중 하나가
header, 메뉴(navigation)부분 입니다.
비장애인은 웹페이지를 눈으로 스윽 볼 수 있기 때문에
메뉴가 반복되어 나타나도 큰 불편함이 없지만
스크린 리더 사용자나 키보드 tab키를 통해서만 웹을 이용할 수 있는 사람은
매번 페이지를 새로고침하거나, 다른 서브페이지로 들어갈 때마다
메뉴영역이 반복되기 때문에 중복으로 읽어주거나 포커스를 잡게 됩니다.
이러한 불편함을 해결하기 위해 반드시 건너뛰기 기능을 제공해야 합니다!
그렇다면 어떻게 반복 영역을 건너뛰게 만들 수 있을까요??😯
반복 영역을 건너뛰게 만든 웹 접근성 올바른 사례
<body> //반복영역 건너뛰기 기능 <ul id="skip_menu"> <li><a href="#contents">본문 바로가기</a></li> <li><a href="#menu">주 메뉴 바로가기</a></li> </ul> //메뉴 또는 컨텐츠 <div id=“contents”> ... </div> <div id=“menu”> <ul> ... 메뉴구조 ... </ul> </div> </body>
위 사진은 반복영역을 건너뛸 수 있는 기능을 넣은 올바른 사례와 마크업 구조 입니다.
건너뛰기 기능을 넣기 위해선
반드시 마크업을 할 때 가장 상단에 위치할 수 있어야 하며,
id 값으로 연결시켜 건너뛰기 링크가 페이지 내에 존재 하도록 해야 합니다.
즉, 웹 페이지를 처음 로드 했을때 키보드tab키를 누르면
사이트 최 상단에 "본문 바로 가기" / "주 메뉴 바로 가기" 이렇게 정보가 제공되어야 합니다!
("하단 메뉴로 바로 가기" 이렇게 내용을 제공하면 사용자 입장에서 하단이 어디를 말하는지
혼란스러울 수 있기 때문에 정확한 정보의 내용으로 제공하는 것이 좋습니다!)
2. 제목 제공
웹 페이지, 프레임, 콘텐츠에 알맞은 제목을 제공해야 합니다.
1) 페이지 제목
웹 페이지 제목은 사이트마다 유일하기 때문에 각 페이지마다 다르게 제공되어야 합니다.
그래야 여러개의 페이지가 열려 있을 때 페이지 타이틀만 보고 빠르게 인식할 수 있습니다!
페이지 제목부분
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>NAVER</title> </head>
페이지 제목은 <head>태그 안에 있는
<title>태그에다 지정을 하면 됩니다!
단, <title>태그에 제목입력 시, 유의할 점이 있습니다.
우선 현재페이지의 내용과 타이틀의 정보를 명확하게 일치시켜야 합니다.
그렇지 않으면 웹 사용자에게 혼란을 야기 시킬 수 있기 때문입니다!
그 다음 페이지 제목을 쓸 때 특수문자, 기호등은 사용하지 않도록 해야 합니다.
만약 <title>☆☆☆naver </title> 이런식으로 페이지 제목을 지정하게 되면
스크린리더는 "스타스타스타 네이버" 이렇게 읽어줍니다.
이렇게 단순히 시각적으로 보여주기 위해 특수문자를 사용하게 되면
스크린 리더 사용자들은 혼란스러울 수 있습니다.
2) 프레임 제목
간혹 사이트에 광고 이미지가 보여지는 경우도 있습니다.
<iframe> 또는 <a>태그를 사용해 마크업 하는 경우가 많은데
이때 반드시 title 속성을 지정 해주는 것이 좋습니다.
<iframe title=“회원가입용” id=“d” name=“frame” src=“url”></iframe>
만약 내용이 따로 없는 빈 프레임이라면
<title>태그를 그냥 공백으로 두는 것이 아니라
'내용없음' 또는 '빈 프레임'이라고 입력해놓는 것이 좋습니다!
<iframe src=“” title=“빈프레임” id=“d” name=“frame” width=“0” height=“0”></iframe>
2) 콘텐츠 제목
콘텐츠의 제목이 되는 부분을 마크업할 때
<h1> ~ <h6> 태그를 사용해야 합니다.
<div class="shop_header> <h1 class="link_shop">트렌드 쇼핑</h1> </div>
3. 적절한 링크 텍스트
링크텍스트가 웹 사이트에 들어갈 경우,
반드시 해당 링크의 용도 또는 목적을 이해할 수 있도록 제공되어야 합니다.
1) 빈 링크일 경우
<a href="" title=""></a> 이렇게 링크가 비어 있는 상태인데 a태그를 사용한 경우
사용자는 웹을 이용할 때 혼란을 불러 일으킬 수 있습니다.
2) 명확한 링크
더 자세한 내용을 확인하려면 <a href=”#”>여기</a>를 클릭하세요.
(웹 접근성 지침 잘못된 예시)
이렇게 링크의 텍스트를 제공하면 스크린 리더 사용자는 "여기" 라는 텍스트 그대로 읽어주게 됩니다.
시각장애인들은 '여기'라고만 두루뭉실하게 언급이 되면
링크가 클릭될 때 대체 어디 페이지를 말하는 건지 헷갈릴 수 있기 때문에
"더보기" , "자세히 보기", "다음 콘텐츠 보기" 등
반드시 정확한 텍스트로 언급을 해주는 것이 좋습니다.
더 자세한 내용을 확인하려면 <a href=”#”>더보기</a>를 클릭하세요.
(웹 접근성 지침 옳은 예시)
여러분, 오늘은 인식의 용이성 원칙에 대해 설명했는데요.
그외 독립적 이미지/배경이미지에 링크가 연결된 경우,
또는 썸네일 이미지 링크연결 관련 된 내용은
전에 포스팅했던 인식의 용이성에서 확인하실 수 있으니
참고하면 좋을 거 같아요!!!
[웹 접근성 가이드] 1.인식의 용이성 : 대체 텍스트 제공
안녕하세요 알씨타운입니다!😃그동안 웹 접근성이 무엇인지, 웹 접근성을 지켜야 하는 이유 등에 대해 ...
blog.naver.com
그럼 저흰 다음 포스팅에서 만나요!
'RCTOWN 이야기 > 프로 기획자 이야기' 카테고리의 다른 글
| [웹 접근성 가이드] 3. 이해의 용이성 : 콘텐츠의 논리성 (0) | 2021.11.25 |
|---|---|
| [웹 접근성 가이드] 3. 이해의 용이성 : 가독성과 예측가능성 (0) | 2021.11.24 |
| [웹 접근성 가이드] 2. 운용의 용이성 : 충분한 시간 제공/ 광과민성 발작예방 (0) | 2021.11.20 |
| [웹 접근성 가이드] 2. 운용의 용이성 : 입력장치 접근성 (0) | 2021.11.18 |
| [웹 접근성 가이드] 1.인식의 용이성 : 미디어 대체 수단 및 명료성 (0) | 2021.11.16 |
