티스토리 뷰
웹 접근성 관련 업무를 맡아 작업한 것을 정리해 보았다.
피드백이 오면 업데이트할 예정이다.
시멘틱 마크업하여 해결되면 좋겠지만 프로젝트를 진행하다보면 기획단계와 디자인적인 레이아웃, 어찌할 수 없는 어떤..사정(?)으로 인한 웹 접근성 이슈들이 생긴다. 마크업으로 해결 할 수 없는 부분들은 WAI-ARIA를 잘 사용하여 사용자들이 더 나은 경험을 할 수 있도록 하는게 중요하다.
1. 페이지 타이틀을 직관적으로 변경
이슈
여러 페이지 타이틀의 타이틀이 동일하여 직관적이지 못하였다.
해결방안
<title> 태그 안에 들어가는 타이틀은 그 문서를 가장 잘 나타내는 주제로 작성해야 한다.
타이틀은 문서 엔진 최적화(search engine optimization, SEO)에 있어서 가장 큰 비중을 차지하고 있다. 웹 문서를 찾을 고객들이 사용할 가능성이 큰 키워드를 포함하는 것이 중요하다. SEO의 관점해서 타이틀은 영문 50-60자, 국문 25-30자로 내외로 간결하게 작성하는 것이 좋다. 구글의 검색 결과에서 보이는 최대 글자 수가 이 정도 이기 때문이다. 제한 글자 수는 계속 변화하고 있기 때문에 절대적으로 생각할 필요는 없지만 가능한 길어지지 않도록 관리해야 한다.
<title>해당 페이지의 주제를 잘 나타내는 문자열</title>
타이틀은 웹 페이지마다 고유한 테마가 있어야 한다. 같은 카테고리라고 하여 하위 페이지마다 동일하게 적용하지 말아야 한다. 동일한 타이틀을 적용할 경우 사용자의 관심도 끌 수 없을뿐더러 웹페이지들 간에 순위 경쟁이 발생하여 노출도 어려워진다.
2. 화면 스크롤된 상태에서 위로 가기 버튼 누를 경우 추첨을 페이지 가장 첫 요소로 이동
이슈
페이지를 읽다가 중간에 '위로가기' 버튼 클릭 시 아무런 피드백이 없어 어떤 결과가 발생했는지 알 수 없었다.
해결방안
위로가기 버튼을 누르면 초점이 페이지의 가장 첫 요소로 보냈다. 나의 경우엔 첫 요소는 이전 페이지로 이동하는 '뒤로 가기' 버튼이었다. 이렇게 실행한 결과 스크린 리더에서 첫 요소를 읽어주어 결과에 대한 상황을 인지할 수 있게 해 준다.
3. 키보드를 사용하여 레이어 영역에서만 포커스가 이동하도록 수정
이슈
Tab 또는 Tab+Shift로 콘텐츠 탐색 시 레이어 밖 콘텐츠로 포커스가 이동되어 어디까지가 레이어 부분인지 파악이 어려웠다.
해결방안
4. 메뉴, 본문, 푸터 영역과 관련하여 랜드마크 정보 추가
이슈
헤더, 콘텐츠, 푸터 영역으로 레이아웃이 나누어져 있지만 영역에 대한 정보는 주자 않아 페이지 구조를 파악하기 어려웠다.
해결방안
랜드마크 스크린 리더와 같은 보조기술 사용자에게 웹페이지의 구조를 명확히 식별하기 위해 사용될 수 있으며, 보조기술 사용자에게 랜드마크 역할을 통해 효과적인 키보드 탐색을 지원하여 웹 페이지의 탐색 경험을 향상할 수 있습니다.
| 랜드마크 | |
| role="banner" | 웹 페이지 상단(예:header) 내 브랜드정보(로고,사이트 제목)가 있을 경우 사용. navigation, search와 같은 랜드마크를 포함할 수 있음 |
| role="complementary" | 주요 콘텐츠의 보조적인 정보를 포함할 수 있음 |
| role="contentinfo" | 사이트 하단(예:footer)에 제공되는 저작권 보호, 개인정보 등을 포함할 수 있음 |
| role="form" | 회원가입, 로그인 등의 서식에 사용 페이지에 여러 form 랜드마크가 있는 경우 aria-labelledby나 aria-label 속성을 사용하여 적절한 레이블을 지정 |
| role="search" | 검색과 관련된 서식, 링크 등이 포함 |
| role="main" | 본문 영역과 같은 페이지의 주요 콘텐츠를 포함 할 수 있음. 페이지 당 하나의 main만 사용할 수 있음. <main>를 사용하면 브라우저는 main 랜드마크로 처리 |
| role="navigation" | 주메뉴, 유틸메뉴와 같은 탐색할 수 있는 그룹을 포함할 수 있음. 페이지에 <nav> 를 사용하면 브라우저는 navigation 랜드마크로 처리 |
| role="region" | 웹사이트 제작자가 중요하다고 생각하는 콘텐츠에 사용 |
스크린 리더는 랜드마크를 위한 키보드 탐색 명령을 제공한다. 랜드마크의 역할을 잘못 적용하거나 과도하게 사용할 경우 사용자의 웹페이지 탐색을 방해할 수 있다.
5. 레이어 팝업을 가진 버튼에 상태정보 표시
이슈
레이어 팝업을 띄우는 버튼이지만 스크린 리더 사용자에게는 일반 버튼으로 안내되고 있어 클릭 시 팝업이 뜨는지 알 수 없음
해결방안
해당 버튼에 aria-haspopup="dialog" 상태정보를 넣어 레이어 팝업이 뜰 것이라는 것을 안내한다.
<button type="button" aira-haspopup="dialog">팝업 열기</button>
aria-haspopup 속성은 해당 요소에 연결되어 있는 팝업의 정보를 제공한다.
| 팝업 유형(속성값) | 설명 |
| dialog | 버튼,콘트롤 등 상호작용 요소가 포함된 현재 문서의 하위창 |
| menu | 메뉴 팝업인 경우 |
| listbox | 클릭시 콤보박스에 option(목록상자)이 나타나는 버튼에 사용 |
| tree | 하위 list(role)을 포함하며 접고 펼칠 수 있음.위젯 사용자가 계층적으로 하나 이상의 항목을 선택할 수 있다.(??다시 확인하기) |
| grid | 행과 열로 구성된 선택 가능한 위젯. |
6. 버튼과 그에 해당하는 설명을 확인하기 어려움
이슈
현재 요소에 대한 자세한 설명이 다른 위치에 존재하지만 해당 요소만 확인했을 땐 무엇을 설명하는지 알 수 없다.
<!-- a태그의 주문상세가 어떤 주문상세인지 알 수 없음-->
<a href="#">주문상세</a>
<div class="box__name">
<span class="text__name">바디케어 로션 핸드크림 바디워시 프리미엄 핸드크림</span>
</div>
해결방안
aria-describedby 속성을 사용하여 버튼과 현재 요소 설명을 연결한다. aria-describedby는 id값을 참조하는 방식으로 설명한다.
<a href="#" aria-describedby="describedby">주문상세</a>
<div class="box__name" id="describedby">
<span class="text__name">바디케어 로션 핸드크림 바디워시 프리미엄 핸드크림</span>
</div>
7. 확장상태 추가
이슈
확장·축소 되는 버튼에 포커스 했을 때 현재 확장된 상태인지 아닌지 알 수 없음
해결방안
aria-expanded 속성을 사용하여 확장상태를 알려준다.
확장되었을 때 aria-expanded="true"
축소되었을 때 aria-expanded="false"
<button type="button" aria-expanded="true" aria-controls="list">상품문의</button>
<ul id="list">
<li class="list-item">
<button type="button" aria-haspopup="dialog">판매자에게 문의하기</button>
</li>
<li class="list-item">
<a href="#">고객센터 바로가기</a>
</li>
</ul>aria-expanded 속성을 사용할 경우 제어 기능을 하는 요소에 aria-controls 속성을 함께 사용한다.
해당 요소가 제어하는 요소가 어떤 요소인지 명시하는 역할을 한다.
다음 포스팅에 계속됩니다😎
참고 사이트
https://webclub.tistory.com/272?category=543274
https://nuli.navercorp.com/community/article/1132906
https://github.com/lezhin/accessibility/blob/master/aria/README.md
'프론트엔드 > 웹 접근성' 카테고리의 다른 글
| 스크린 리더 NVDA 간단 사용법 (0) | 2021.06.03 |
|---|---|
| 👀웹 접근성 정리 #2 (2) | 2021.05.21 |
| keyboard로 모달 팝업 내 포커스 loop (1) | 2021.03.03 |