웹 접근성 공부를 위해서 공부한 내용 시리즈
▶ 2024.02.17 - [Web] - 웹 표준, 웹 호환성, 웹 접근성
▶ 2024.02.21 - [Web] - 웹 접근성 시나리오
▶ 2024.02.25 - [Web] - 웹 접근성이 왜 필요할까?
▶ 2024.03.16 - [Web] - 웹 접근성 기술 학습 <= 현재 글
▶ 2024.03.20 - [Web] - 웹 접근성 시나리오 - 2
▶ 2024.03.27 - [Web] - WAI-aria
▶ 2024.03.31 - [Web] - 웹 접근성 시나리오 - 3
▶ 2024.04.04 - [Web] - 사용자가 입력하는 이미지
웹 접근성이 중요한 것은 충분하게 공부한 것 같다.
이제 웹 접근성을 위해서 스크린리더에 잘 읽히게 하려면 어떤 방법들이 있을까?
- 웹 표준 태그를 사용한다.
- 웹 페이지에 맞는 lang 속성을 사용한다.
- 의미적인 태그를 사용한다.
- 선형적인 마크업을 작성한다.
- 트리 구조를 명확히 한다.
=> <div><div><div></div></div></div> 같이 꼭 사용할 필요 없는 div는 지양한다.
스크린리더가 어떻게 읽을지 예상할 수 없기 때문이다. - 태그의 네이티브 기능을 학습하고 이를 구현한다.
지금까진 이런 방법들을 자연스럽게 이해했다.
추가적으로 다음과 같은 방법으로 웹 접근성을 높일 수 있다.
outline
outline : 0;
디자인을 위해서 우리는 outline을 0으로 처리하는 경우가 있다.
이러한 작업은 웹 접근성에서 좋지 않는 방법이다.
탭키를 눌렀을 때 outline을 0으로 하면 보이지 않는다.
우리가 시각 장애인이라고 이야기할 때 전맹 ( 완전히 보이지 않는 분들 )의 비율은 5%이다.
그 외에는 흐릿하게라도 보이는 분들이다.
이 경우에는 포커스를 통해서 내가 어디에 있는지 알 수 있기 때문에 가능한 사용하는 것이 좋다.
outline 말고도 box-shadow, dropshadow, background, text color 등으로 구현할 수도 있다.
중요한건 Tab 키가 왔을 때 현재 어디에 포커스가 있는지 알 수 있으면 된다.
IR 기법
웹 접근성을 지키기 위해서 아주 많은 도움이 되는 개념이다.
css 설정으로 인해서 화면에는 보이지 않지만 스크린리더는 읽어주게 하기 위해서 사용한다.
일반적으로 reset-css를 사용하고 바로 다음에 선언하는 css 이다.
이때 blind 말고 visually-hidden, sr-only, for-a11y 같은 명칭으로 사용하기도 한다.
blind는 맹인이라는 뜻으로 의미 자체가 비하의 의미로 사용될 수 있다고 한다.
※ a11y ?
a11y 라는 단어가 있는데 이것은 무슨 뜻일까?
접근성을 의미하는 accessibility 라는 단어 자체가 접근성이 좋지 않기 때문에 a와 y 사이에 11개의 문자가 있다고
a11y라고 한다 ㅋㅋ
UI에서 IR이 필요한 곳이 어디일까??
범위가 좁기 때문에 대부분 알텐데 바로 별표이다. 안보이는 사람들한테 이런 별표는 아무런 의미가 없을 것이다.
<div>
<img src="..." alt=""/>
<span class="blind">평점 별 5점 중</span> 5
</div>다음과 같이 IR 처리를 해줄 수 있을 것이다.
'Web' 카테고리의 다른 글
| 랜드마크 롤 (0) | 2024.03.24 |
|---|---|
| 웹 접근성 시나리오 - 2 (0) | 2024.03.20 |
| 웹 접근성이 왜 필요할까? (1) | 2024.02.25 |
| 웹 접근성 시나리오 (1) | 2024.02.21 |
| 웹 표준, 웹 호환성, 웹 접근성 (0) | 2024.02.17 |