티스토리 뷰

Basic_Studies/HTML

[HTML / CSS] 웹 접근성? 웹 표준? 웹 접근성을 위한 규칙들

adore_voy 2020. 9. 5. 16:43

웹 접근성이란?

모든 사람들에게 평등한 웹 이용을 위해, 웹 접근성이 만들어졌다.

보통 사람들과 달리 웹 이용에 불편함을 겪는 사람들(장애인, 노약자 등)은 웹의 접근성이 떨어진다. 이를 위해 스크린리더기, 마우스스틱 등 보조기기를 이용하는데 보조기기가 읽게 하기 위한 방법들을 통해 웹 접근성이 좋게 해야 한다. 

 

웹 표준과 웹 접근성의 차이는?

웹 표준은 웹 접근성을 지키기 위한 표준이다.

어떤 웹 브라우저를 사용하던, 모바일, 태블릿 등 어떤 화면 사이즈에서 웹을 이용하던 어려움 없이 이용하도록 하는 표준 이다.

이는 W3C라는 국제 웹 표준화 단체에서 발표한 자료들에 기반해 만들어진다.

 

웹 표준을 지킨 웹은 아래와 같은 장점을 가진다.

  • 웹 표준을 따라 효율적으로 짜여진 코드는 코드의 양도 줄고 동시에 서버의 부담을 줄인다. 이는 로딩 속도도 향상시킨다.
  • 어떤 모바일 기기를 이용하던 웹 이용이 쉬워진다. 아직까지 오래된 브라우저를 이용하고 CRT모니터와 같은 오래된 모니터를 사용하는 사람들에게도 어려움 없이 웹 이용을 가능하게 해준다.
  • 보조기기로 신체적 어려움에 도움을 받는 사람들에게 좀 더 정확한 정보를 전달한다.
  • 불필요한 태그들을 사용하지 않고 정해진 규격에 맞게 코딩하기 때문에 이후 유지보수가 상대적으로 간편해진다. 다른이들과의 협업에서도 좋은 가독성을 제공한다.

웹 접근성 가이드

웹 접근성의 4가지 핵심 원리는 아래와 같다.

  • 인식의 용이성 : 모든 콘텐츠는 사용자가 인식 가능해야한다.
  • 운용의 용이성 : 사용자가 모든 기능에 대해 조작이 가능해야한다.
  • 이해의 용이성 : 모든 사용자에게 콘텐츠는 이해돼야한다.
  • 견고성 : 미래의 기술로도 현재의 콘텐츠를 이용할 수 있어야 한다.

<대체 텍스트>

  • img태그 내의 alt에 대체 텍스트를 입력해 스크린리더기가 읽을 수 있게 해야한다. 이미지에 글 콘텐츠가 포함 돼 있다면 똑같이 적어야 한다.
  • 의미 없는 디자인용 이미지같은 경우는 alt를 빈칸으로 남겨둔다.
  • QR코드와 같은 이미지는 어떤 QR코드인지 명시해야한다.
  • 버튼도 기능을 명시해야 한다.
<img src="249287xnlsde.jpg" alt="마샬 스피커 할인">  <!--콘텐츠 이용에 필요한 이미지-->
<img src="293847lkdjw.jpg" alt="">	<!--디자인 용 의미없는 이미지-->
<img src="293847lkdjw.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;} 
/* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공 */

위의 class를 대체텍스트가 필요한 html 요소에 적어 넣으면 된다.

부트스트랩을 이용하는 사람들은 sr_only 라는 클래스를 이용하면 된다.

 

<자동재생 배경음 적용 금지>

 

웹 사이트에 접속했을 때 자동으로 소리가 재생되게 하면 안된다.

이는 화면 낭독 프로그램을 이용하는 사용자에게 방해가 될 수 있다.

이용자가 소리의 재생을 선택할 수 있는 기회를 제공해야 한다.

 

<Tab 키를 이용해 콘텐츠 선택 가능>

 

사용자의 키보드에 있는 Tab 키를 이용해 콘텐츠 를 자유롭게 이용할 수 있게 한다.

tabindex속성을 이용한다.

그러나 이를 남용하게 되면 탭키를 수 없이 눌러야 다음 메인 콘텐츠로 이동하기 때문에 오히려 불편함을 불러올 수 있다.

탭의 이동 순서도 신경써야 한다. 네비게이션 바에 해당 예시들이 많이 있다.

<p tabindex='0'>탭 키를 이용할 수 있게 함</p>
<p tabindex='-1'>탭 키를 이용할 수 없게 함</p>

<p tabindex='1'>탭 키의 순서를 지정</p>
<p tabindex='2'>탭 키의 순서를 지정</p>
<p tabindex='3'>탭 키의 순서를 지정</p>

<페이지 언어 지정>

 

html 태그에 언어를 지정한다. 

<html lang="ko"> <!-- 전체 언어 -->
<p>좀 더 <span lang="en">fancy</span>한 삶을 살고 싶으신가요?</p> <!-- 특정 언어는 span의 속성을 이용한다. -->

이 외에도 지켜야 할 사항들이 많다.

 

웹 접근성, 웹 표준에 대한 더 많은 공부는 아래의 웹을 참고하길 바람.

 

- 웹접근성 연구소

https://www.wah.or.kr:444/

- 다음 다룸

http://darum.daum.net/convention/checklist

 

다룸, Darum 웹표준을 다루다

Html&CSS 본문 체크리스트 웹표준관련 업무수행시 체크해야하는 확인 사항들로 내부체크리스트와 외주 대행업무 전달시 함께 지켜져야 하는 CP가이드의 체크리스트가 통합적으로 정리되어 있습��

darum.daum.net

- 서울시 웹접근성 가이드

https://news.seoul.go.kr/gov/archives/47485

 

웹 접근성 및 웹 표준 준수 가이드 안내

웹 접근성 및 웹 표준 준수 가이드 안내

news.seoul.go.kr

- 네이버 접근성 페이지

https://accessibility.naver.com/accessibility

 

네이버 접근성 페이지 : 접근성 가이드

Accessibility Guide 정보 접근성이란? 모든 사용자를 위한 더 편리한 서비스 정보 접근성은 모든 사용자가 특정 환경이나 신체적 장애에 상관없이 웹 사이트나 애플리케이션에서 제공하는모든 정보�

accessibility.naver.com

참고:

위 사이트 포함

https://m.blog.naver.com/PostView.nhn?blogId=tcloe8&logNo=221600050263&proxyReferer=https:%2F%2Fwww.google.com%2F

반응형

'Basic_Studies > HTML' 카테고리의 다른 글

[HTML] Input 자동 완성 끄기  (0) 2020.10.25
댓글