접근성
장애를 경험하는 사람이 독립적으로 타인과 동등한 활동에 참여할 수 있도록 하는 것
차별행위에 대한 정의
장애를 고려하지 아니하는 기준을 적용함으로써 장애인에게 불리한 결과를 초래하는 경우. 의도가 없었지만 결과적으로 불리한 상황에 처했다면 그것은 차별 행위이다. 정당한 편의 제공을 거부하는 경우.
장애라는 환경에 처하지 않도록... 장애는 경험되는 것. 접근성을 고려하지 않는다면 장애가 없어도 장애가 있는 삶.
접근성을 고려하지 않는다면
- 사회에 참여하는 것을 저해
- 자기결정권에 침해
모달창을 넣을 때
aria-hidden = true 눈으로 보이지만 접근 금지
role=dialog
aria-modal=true 모달이라는 것을 알려줌
탭으로 이동했을 때 나오는 포커스는 따로 막아야 한다.
tab-index=-1을 넣거나, 팝업 내로 포커스 이동 후 팝업이 실행될 때는 팝업 내에서만 움직이게 하거나...
접근성을 고려할 때
role=text 비표준 속성 aria에서 role 적용하기 모든 케이스에 적용불가. 비표준인데도 모든 브라우저에서 사용가능
별도의 대체 콘텐츠를 따로 넣어주는 것. 실제 컨텐츠를 aria-hidden을 주는 방법. 코드가 길어진다.
aria-label에 대체 컨텐츠를 넣어준다.
안드로이드에서 링크 전체를 한 번에 읽고 내부를 다시 읽어주는 이슈가 있어서 aria-hidden을 넣어준다.
시각적인 범위는 크지만 포커스자체의 범위가 작은 경우가 있다. aria-label을 사용해서 터치 영역을 넓게 가져갈 수 있다.
css 스타일의 문제점
visibility:hidden, display:none 스크린리더가 안 읽음
text-indent -9999px 다른 위치에 초점이 표시되어 터치하여 탐색으로 접근이 안된다.
position:absolute 초점이 상단으로 튀는 현상
font-size:0 voiceOver의 초점이 접근되지 않는다. 숨길때 0보다는 0.1 등으로 사용하는 걸 추천
tabindex=-1 톡백의 초점이 중복으로 접근된다.
그 밖의 정보들
컨텐츠를 소리로 듣기 때문에 자동 재생을 할 경우 다른 컨텐츠의 소리를 듣는데 방해가 될 수 있다. 단, 3초 미만의 배경음은 예외로 인정...
찾아보면 좋을 듯: 유튜브에서의 접근성
지시사항(대체 텍스트 등)은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식할 수 있어야 한다. - 명확한 지시사항 제공. 정확한 고유명사 사용, 순서에 의해서 위치를 설명
배너 자동 롤링+aria-live=polite => 무한 음성 출력
핵심은 내가 뭔가를 할 수 없다는 것이 접근성이 좋지 않다는 것이다. 설정에서라도 변경 할 수 있는 기회를 주어야 한다.
사용자 오류.. 오류정정 메세지를 스크린리더가 실시간으로 읽어주는 방법 aria-live=assertive role=alert
기본 언어 표시 lang ko 언어 표시에 따라 읽는 방법이 달라진다. 전자단말기에도 영향을 준다.
