웹 접근성 기술 학습

▶ 2024.03.16 - [Web] - 웹 접근성 기술 학습 <= 현재 글

웹 접근성이 중요한 것은 충분하게 공부한 것 같다.

이제 웹 접근성을 위해서 스크린리더에 잘 읽히게 하려면 어떤 방법들이 있을까?

웹 표준 태그를 사용한다.
웹 페이지에 맞는 lang 속성을 사용한다.
의미적인 태그를 사용한다.
선형적인 마크업을 작성한다.
트리 구조를 명확히 한다.
=> <div><div><div></div></div></div> 같이 꼭 사용할 필요 없는 div는 지양한다.
스크린리더가 어떻게 읽을지 예상할 수 없기 때문이다.
태그의 네이티브 기능을 학습하고 이를 구현한다.

지금까진 이런 방법들을 자연스럽게 이해했다.

추가적으로 다음과 같은 방법으로 웹 접근성을 높일 수 있다.

outline : 0;

디자인을 위해서 우리는 outline을 0으로 처리하는 경우가 있다.

이러한 작업은 웹 접근성에서 좋지 않는 방법이다.

탭키를 눌렀을 때 outline을 0으로 하면 보이지 않는다.

우리가 시각 장애인이라고 이야기할 때 전맹 ( 완전히 보이지 않는 분들 )의 비율은 5%이다.

그 외에는 흐릿하게라도 보이는 분들이다.

이 경우에는 포커스를 통해서 내가 어디에 있는지 알 수 있기 때문에 가능한 사용하는 것이 좋다.

outline 말고도 box-shadow, dropshadow, background, text color 등으로 구현할 수도 있다.

중요한건 Tab 키가 왔을 때 현재 어디에 포커스가 있는지 알 수 있으면 된다.

웹 접근성을 지키기 위해서 아주 많은 도움이 되는 개념이다.

css 설정으로 인해서 화면에는 보이지 않지만 스크린리더는 읽어주게 하기 위해서 사용한다.

일반적으로 reset-css를 사용하고 바로 다음에 선언하는 css 이다.

이때 blind 말고 visually-hidden, sr-only, for-a11y 같은 명칭으로 사용하기도 한다.

blind는 맹인이라는 뜻으로 의미 자체가 비하의 의미로 사용될 수 있다고 한다.

a11y 라는 단어가 있는데 이것은 무슨 뜻일까?

접근성을 의미하는 accessibility 라는 단어 자체가 접근성이 좋지 않기 때문에 a와 y 사이에 11개의 문자가 있다고

a11y라고 한다 ㅋㅋ

UI에서 IR이 필요한 곳이 어디일까??

범위가 좁기 때문에 대부분 알텐데 바로 별표이다. 안보이는 사람들한테 이런 별표는 아무런 의미가 없을 것이다.

<div>
  <img src="..." alt=""/>
  <span class="blind">평점 별 5점 중</span> 5
</div>

다음과 같이 IR 처리를 해줄 수 있을 것이다.

티스토리툴바