목차
· 웹 접근성은 무엇일까
· 웹 표준과 웹 접근성의 차이는 무엇일까
· 웹 표준을 지킨 웹은 아래와 같은 장점을 가진다.
· 웹 접근성 가이드
· 대체 텍스트
· 그 외에 준수해야할 것이 있을까?
웹 접근성은 무엇일까
모든 사람들에게 평등하고 공평한 웹의 이용을 위해 웹 접근성이라는 것이 만들어졌다. 보통 사람들과 달리 웹 이용에 불편함을 겪는 사람들 (장애인, 노약자 등)은 웹의 접근성이 떨어진다. 이를 위해 스크린 리더기, 마우스 스틱 등 보조 기기를 이용하는데 보조기기가 읽게 하기 위한 방법들을 통해 웹 접근성이 좋게 해야한다.
웹 표준과 웹 접근성의 차이는 무엇일까
우리가 흔히 알고있는 웹 표준이라는 정의는 누군가가 어떤 브라우저 및 기기를 통해서 웹에 접속했을 때 동일시한 내용을 전달받아야한다는 것을 의미하는데, 웹 표준은 웹 접근성을 지키기 위한 표준이라고 생각을 하면 된다. 어떤 웹 브라우저를 사용하던, 모바일 태블릿 등 어떤 화면 사이즈에서 웹을 이용하던 어려움 없이 이용할 수 있도록 하는 표준인셈이다. 이는 W3C라는 국제 웹 표준화 단체에서 발표한 자료들에 기반해 만들어진다.
웹 표준을 지킨 웹은 아래와 같은 장점을 가진다.
· 웹 표준을 따라 효율적으로 짜여진 코드는 코드의 양도 줄고 동시에 서버의 부담을 줄일 수 있다. 이는 로딩 속도도 향상 시키는 장점을 가지고 있다.
· 어떤 모바일 기기를 이용하던 웹 이용이 쉬워진다. 아직까지 오래된 브라우저를 이용하고 CRT 모니터와 같은 오래된 모니터를 사용하는 사람들에게도 어려움 없이 웹 이용을 가능하게 해준다.
· 보조기기로 신체적 어려움에 도움을 받는 사람들에게 좀 더 정확한 정보를 전달해준다.
· 불필요한 태그들을 사용하지 않고, 정해진 규격에 맞게 코딩을 진행하기 때문에 이후 유지보수가 상대적으로 간편해진다. 다른 이들과 협업에서도 좋은 가독성을 제공한다.
웹 접근성 가이드
· 인식의 용이성 : 모든 콘텐츠는 사용자가 인식 가능해야한다.
· 이해의 용이성 : 모든 사용자에게 콘텐츠는 이해되어야 한다.
· 운용의 용이성 : 사용자가 모든 기능에 대해 조작이 가능해야한다.
· 견고성 : 미래의 기술로도 현재의 콘텐츠를 이용할 수 있어야 한다.
대체 텍스트
· img 태그 내의 alt에 대체 텍스트를 입력해 스크린 리더기가 읽을 수 있게 해야한다. 이미지에 글 콘텐츠가 포함되어 있다면 똑같이 적어줘야한다.
· 의미 없는 디자인 용 이미지 같은 경우 alt를 빈칸으로 남겨둔다.
· QR 코드와 같은 이미지는 어떤 QR 코드인지 명시해야한다.
· 버튼도 기능을 명시해야한다.
<img src="test1.jpg" alt="이미지에 대한 설명입니다."> <!--콘텐츠 이용에 필요한 이미지-->
<img src="test2.jpg" alt=""> <!--디자인 용 의미없는 이미지-->
<img src="test3.jpg" alt="website.co.kr로 가는 qr코드 이미지"> <!--QR코드 이미지-->
<input type="image" src="button.png" alt= "뒤로가기 버튼"> <!--버튼 이미지-->img 태그를 이용하지 않고, background image 속성을 이용하는 경우도 있는데, 이는 해당 이미지에 글씨를 넣고 화면에서 글씨를 숨기는 방법을 이용한다. 이를 ir 기법이라고 한다.
.ir_pm {display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px;}
/* 의미있는 이미지의 대체 텍스트 제공*/
.ir_wa {display:block; overflow:hidden; position:relative; z-index:-1; width:100%; height: 100%;}
/* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 제공*/
.ir_su {overflow: hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9999px;}
/* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공 */그 외에 준수해야할 것들이 있을까?
· 자동 재생 배경음 적용 금지
예전 프로젝트를 진행했을 때, 페이지가 렌더링 되고 나서 자동으로 배경음악을 삽입했던 적이 있었다. 웹 사이트에 접속을 했을 때 자동으로 소리가 재생되게 한다면, 스크린 리더기와 같은 화면 낭독 프로그램을 이용하는 사용자에게 방해를 줄 수 있다. 이용자가 소리의 재생을 선택할 수 있는 기회를 제공해줘야한다.
· Tab 키를 통한 콘텐츠 선택 기능
사용자의 키보드에 있는 Tab 키를 이용해 콘텐츠를 자유롭게 이용할 수 있게 해야한다. 이때, tab에 대한 속성은 tabindex 속성을 이용할 수 있다. 그러나 이를 남용하게 되면 탭 키를 수 없이 눌러야 다음 콘텐츠로 이동할 수 있기 때문에 적절한 조화를 이루도록 설계해야한다.
<p tabindex='0'>탭 키를 이용할 수 있게 함</p>
<p tabindex='-1'>탭 키를 이용할 수 없게 함</p>
<p tabindex='1'>탭 키의 순서를 지정</p>
<p tabindex='2'>탭 키의 순서를 지정</p>
<p tabindex='3'>탭 키의 순서를 지정</p>· 페이지 언어 지정
HTML5에서 기본 언어를 명시하는 이유는 스크린 리더기가 언어를 인식해 자동으로 음성 변환을 하거나, 선택된 언어에 적합한 발음을 제공하기 때문에 필요한 작업이다. 한국어는 아래와 같이 명시를 하게 되면, 스크린 리더기가 한국어를 자동 인식하게 된다.
한국어(ko), 영어(en), 프랑스(fr), 독일어(de), 중국어(zh), 일본어(ja) 와 같이 언어별로 속성 값이 다르다.
<!DOCTYPE html>
<html lang="ko"> //이곳에 명시합니다.
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>이 밖에도 접근성에 대한 부분들에서 개발자가 고려해야할 부분들이 생각보다 많다. 기존 프로젝트에서 UX를 고려한 설계를 진행해왔다고 생각을 했지만, UX에 대한 부분을 비장애인의 시점에서만 바라보려고 했던 것 같다. 앞으로는 다양한 접근성 방면에 있어 여러 요소들을 고려하며 누구나 동일한 내용을 볼 수 있는 웹 표준과, 모든 사람들이 평등하고 공평하게 웹을 이용할 수 있는 접근성을 고려하는 설계의 시점을 맞추며 프로젝트를 진행해야한다는 생각이 든다.
레퍼런스
[HTML / CSS] 웹 접근성? 웹 표준? 웹 접근성을 위한 규칙들
웹 접근성이란? 모든 사람들에게 평등한 웹 이용을 위해, 웹 접근성이 만들어졌다. 보통 사람들과 달리 웹 이용에 불편함을 겪는 사람들(장애인, 노약자 등)은 웹의 접근성이 떨어진다. 이를 위
jae04099.tistory.com
네이버 접근성 페이지 : 접근성 가이드
Accessibility Guide 정보 접근성이란? 모든 사용자를 위한 더 편리한 서비스 정보 접근성은 모든 사용자가 특정 환경이나 신체적 장애에 상관없이 웹 사이트나 애플리케이션에서 제공하는모든 정보
accessibility.naver.com
'취준적인' 카테고리의 다른 글
| RESTful하다, REST하다? (0) | 2023.03.29 |
|---|---|
| 왜 크로스 브라우징(Cross Browsing)을 고려해야해요? (0) | 2023.03.21 |
| 브라우저는 어떻게 작동할까? (0) | 2023.03.14 |
| 보안 정책에 관련된 SOP와 CORS (0) | 2023.03.14 |
| 함수형 컴포넌트와 클래스 컴포넌트 리마인드 (0) | 2023.03.05 |
댓글