웹 접근성

웹 접근성이란 장애인, 고령자 등의 모든 사용자가 동등하게 웹 사이트를 접근하고 이용할 수 있도록 보장하는 것을 뜻합니다.

시각장애를 가지신 분이나 인지장애를 가지신 분 또는 노인분들의 웹 접근성을 지원하는 보조 기구로 스크린리더 라는것이 있습니다.

스크린리더란 스크린의 정보를 음성으로 출력해주는 화면 낭독 프로그램이라고 보시면 됩니다.

 

웹 접근성 마크를 획득하기 위해서는 꽤 많은 비용이 들고, 재심사의 경우 60% 감면을 해준다고 하지만 그래도 큰 돈이 들어 웹 접근성 신청을 하기 이전에 미리 검사해볼 수 있는 사이트도 있습니다.

(아래 블로그를 참고해주세요)
https://eunyoe.tistory.com/76

 

웹 접근성에 도움을 주는 몇가지 속성들을 설명해보겠습니다.

1. sr-only (tailwind css)

<label> 태그란 form요소에 이름표를 붙이기 위한 태그입니다.

예를들면 <input>과 같은 태그와 함께 쓰입니다.

<label for="username">이름</label>
<input id="username" type="text" placeholder="이름"/>

 

그런데 이 상황에서 label을 화면에서 숨겨야 한다고 할 때 어떻게 하면 좋을까요?

그냥 label태그에 hidden처리나 display: none; 혹은 visibility: hidden; 처리를 해버린다면

스크린리더기에 해당 <label>은 읽히지 않아 웹 접근성에 맞지 않는 구조가 되어버립니다.

 

이럴 때 사용하는 것이 sr-only입니다.

sr-only는 화면에서는 숨김처리 되나 스크린리더에는 읽힙니다.

 

sr-only는 tailwind css에서 미리 정의 해놓은 것이고 css 코드는 아래와 같습니다.

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

 

2. aria-label

label태그를 붙일 수 없는 곳에 label 태그를 대신할 수 있는 속성입니다.

label태그는 웬만해서 있는 것이 좋지만 아이콘 버튼이나 등등 붙일 수 없는 곳에 넣습니다.

<button aria-label="검색">
  🔍
</button>

 

3. alt

렌더링 되지 못할 때 나타날 문자열을 지정하기 위한 값임과 동시에 스크린리더에서 이미지를 설명하는 대체 텍스트가 됩니다. 디자인 요소등과 같이 불필요한 이미지에는 값을 작성하지 않는 것이 좋습니다.

 

 

참고)

참고 블로그