👀웹 접근성 정리 #2

#1에 이어서 스타뚜

 

8. 검색창에 키워드 입력 후 삭제 버튼 클릭 시 초점이 초기화됨

 

이슈

검색창에 키워드 입력된 상태에서 삭제 버튼 클릭 시, 초점이 초기화되어 스크린 리더 사용자가 웹페이지를 처음부터 다시 탐색해야 하는 이슈가 있었다.

 

해결방안

검색어가 삭제되면 검색어 입력란으로 포커스를 보내주었다.

var resetSearchText = function() {
	// . . .
    $('#txtSearch').val('');
    $('.form__input-search').focus();
}

---

9. 탭키를 눌러 이동시 어떤 라디오 버튼인지 확인할 수 없음

 

이슈

편집창과 라디오 버튼은 폼 컨트롤이기 때문에 Tab키로 이동하는 경우가 많다. 그런데 현재 운영 사이트는 탭키를 눌렀을 때 라디오 버튼의 레이블은 읽어주지만 이것이 어떤 그룹의 라디오 버튼인지에 대한 피드백이 없다.

 

 

해결방안

<div>
	<h3 id="text__check-date">기간선택</h3>
	<p>최대 2년까지 조회가 가능합니다.</p>
	<ul role="radiogroup" aria-labelledby="text__check-date">
		<li role="none presentation">
			<input type="radio" id="input-date1">
			<label for="input-date1">전체</label>
		</li>
		<li role="none" role="presentation">
			<input type="radio" id="input-date2">
			<label for="input-date2">4 월</label>
		</li>
		<li role="none">
			<input type="radio" id="input-date3">
			<label for="input-date3">3 월</label>
		</li>
		<li role="none">
			<input type="radio" id="input-date4">
			<label for="input-date4">직접선택</label>
		</li>
	</ul>
</div>

1. ul에 role="radiogroup"을 추가해 ul 진입 시 스크린 리더기가 라디오 그룹인 것을 읽어주도록 한다.

2. h3가 ul의 aria-labelledby 속성을 사용하여 ul 요소에 적절한 레이블을 제공한다.

참조해 기간 선택 텍스트를 읽을 수 있도록 한다.???

3. 각 li 요소는 role="none"을 설정하여 목록 항목 역할과 의미를 숨긴다.

보조 기술의 호환성을 위해 role="none presentation" 또는 role="none" role="presentation"과 같이 presentation 값을 추가해주는 것이 좋다. none과 presentation은 동일한 역할을 한다.

---

10. 비밀번호 잘못 입력 시 오류 메시지를 바로 확인할 수 없음

 

이슈

비밀번호 오류 시 유효성 검사 에러 메시지가 화면에 표시되지만, 스크린 리더 사용자는 확인이 불가능하다.

 

 

해결방안

<input type="password" aria-describedby="text__password-error" placeholder="" title="비밀번호를 다시 한 번 입력해 주세요">
<p id="text__password-error">비밀번호를 잘못 입력하였습니다.</p>

$('input').focus().attr('aria-describedby','text__password-error');

1. 비밀번호 오류가 발생하면 비밀번호 편집창으로 초점을 이동시킨다.

2. 오류가 발생했을 때 비밀번호 input 요소에 aria-describedby 속성을, 에러 텍스트에는 id를 지정하여 연결한다.

---

11. 키보드 탐색 시 어떤 버튼이 선택되었는지 직관적이지 않음

 

이슈

스크린 리더 사용자가 Tab키로 이동시 여러 '수정' 버튼들이 어떤 수정의 버튼인지 알 수 없이 모두 '수정', '수정'으로 읽는다.

 

해결방안

<div>
	<h3>내 정보</h3>
	<div role="group">
    	<dl>
			<dt>이름</dt>
			<dd>이*연</dd>
		</dl>
		<button type="button"aria-label="이름 수정" aria-haspopup="dialog">수정</button>
    </div>
    <div role="group">
		<dl>
	    	<dt>E-mail</dt>
			<dd>jiyeui***@eb**.com</dd>
	  	</dl>
        <button type="button" aria-label="E-mail 수정" aria-haspopup="dialog">수정</button>
    </div>
 </div>

aria-label 속성에 '이름 수정', 'E-mail 수정'과 같은 값을 설정하여 각 group에 해당하는 정보를 보여줄 수 있도록 한다.

---

12. 스크린 리더 사용자에게 화면에 가려진 정보가 모두 탐색됨

 

이슈

상세보기 하위 콘텐츠에 overflow:hidden 처리되어 있어 숨겨진 상태임에도 불구하고 스크린 리더 사용자에게 내용이 다 표시되고 있었다.

하위 컨텐츠 축소상태

 

하위 컨텐츠 확장 상태

해결방안

숨겨져야 하는 콘텐츠에 aria-hidden="true" 또는 "false" 값을 적용하여 확장된 상태인지 축소된 상태인지 알린다.

---

13. 영역 정보를 구분할 수 없음

 

이슈

한 화면에 보이는 메인 영역과 이벤트 영역은 서로 다른 영역이지만 스크린 리더 사용자는 영역 정보를 구분할 수 없다.

 

해결방안

주 콘텐츠와 분리된 영역(이벤트 영역)에 role="complementary" 속성을 추가하면 스크린 리더가 기타 랜드마크로 읽어준다.

독립된 영역은 aside 태그를 사용하면 섹션의 역할이 자동으로 전달된다. ARIA보다 html 요소를 사용하는 것이 더 좋은 방법이다.

---

14. 팝업을 닫아도 스크린 리더에서는 팝업이 표시됨

 

이슈

팝업을 열였다가 닫기를 누르면 화면상에서는 팝업이 사라진다. 하지만 스크린 리더에서는 팝업에 초점이 그대로 남아 있다.

 

해결방안

팝업을 열 때 팝업에 포커스를 보내고 tabindex를 지정했으면 닫을 때도 포커스를 잃게 하고 tabindex 속성을 제거 한다.

 

tabindex="-1"

Tab키를 눌렀을때 포커스 받을 수 있는 요소(링크, 폼)가 포커스를 받지 못하도록 한다. -1은 특정 이벤트에만 나타나는 요소에 유용하다.

 

tabindex="0"

0은 기본값이다. Tab키를 눌렀을때 포커스 받을 수 없는 요소(span)가 포커스를 받을 수 있게 한다. 0으로 설정하면 연속 키보드 탐색으로 접근할 수 있다.

 

tabindex="1"

Tab키를 눌렀을때 가장 먼저 포커스 받는다. 1이 아니더라도 양의 정수값으로 포커스의 순서를 지정할 수 있다. 하지만 페이지 조작과 탐색에 방해가 될 수 있기 때문에 되도록 사용하지 않고 문서의 요소 순서를 논리적으로 배치해야 한다.

---

웹 접근성 업무를 마치고 개발에 전달한지 2달 정도 된 것 같다. 희미해져 가는 기억을 되살리며 다시 정리하니 머릿속에 좀 더 확실히 저장되었다. 관련하여 피드백이 오면 좀 더 디밸롭하는 시간을 가질 수 있을 것 같다.👍

 

참고 사이트

https://nuli.navercorp.com/community/article/1132961

https://nuli.navercorp.com/community/article/1132726

https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/tabindex