접근성이란?
접근성은 개인의 신체적, 인지적 능력 및 웹에 접근하는 방법과 관계없이 가능한 한 접근할 수 있도록
콘텐츠를 개발하는 것을 의미한다.
즉, 웹페이지를 신체적인 어려움에서도 어떻게든 사용할 수 있게 만들어야한다.
사용하는 방법은?
- 키보드로 움직인다.
- 스크린리더의 도움을 받는다.
등의 방법이 있다.
때문에 시멘틱요소를 적절히 사용하여 웹페이지를 만들어야한다.
시멘틱요소를 스크린리더가 구분하기 때문이다.
스크린리더에서는 읽히는데 화면에는 보이지 않게 만드는 방법
예를 들어 할인율을 나타내고자 할 때
할인율은 웹페이지 상에는 표시가 되지 않지만
HTML에는 할인율을 적어줘서 스크린리더에 읽히게 만들어야한다.
<strong class="sale">
<span class="a11y">할인율</span>
33
<span class="unit">%</span>
</strong>위 구조에서 a11y 클래스를 생성하여 css에 값을 입력해준다.
.a11y {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
}스크린리더에서는 안읽히는데 화면에는 보이게 만드는 방법
이번엔 반대의 방법이다.
불필요한 요소들을 많이 읽어주면 오히려 사용자가 혼란스럽기 때문에
불필요한 요소를 읽어주지 않게 하려고 한다.
이는 html에 마크업만으로도 가능하다.
<span class="line" aria-hidden="true">|</span>aria 속성을 사용하면 된다.
(+ 느낀점
접근성? 귀찮은데 꼭 해야하나? 라는 생각을 한 적도 있다.
하지만 시각장애 유투버 [원샷한솔]의 컨텐츠들을 보니,
시각장애인들이 실생활에서 어려움을 겪는 것들이
정말 상상 이상으로 많았다는 것을 느꼈다.
시각장애인들이
웹페이지만이라도 정확한 정보를 전달하여 편하게 사용할 수 있게 만들어야겠다.)
출처:https://youtu.be/lmYSIiZFxPI
https://youtu.be/hvEfSbHJAfU
