Rainbow
웹 표준 & 웹 접근성에 대하여 본문
웹 표준이란
웹 표준이란 웹에서 표준적으로 사용되는 기술이나 규칙을 의미합니다.
브라우저 종류 및 버전에 따른 차이에 대하여 호환이 가능하도록 제시된
권고된 표준안에 따라 웹 사이트를 만들어야 합니다.
웹 표준을 통한 궁극적인 목적은 웹 사이트에 접속한 사용자가 어떠한 운영체제나 브라우저를 사용하더라도
동일한 결과를 보이게 하는 것입니다.
장애인, 노약자를 포함한 모든 사용자들에게 동일한 웹 사이트를 볼 수 있도록 웹 표준 기술 작업이 필요하며
웹 표준 준수는 웹 접근성 준수를 위한 핵심입니다.
웹 접근성이란
모든 사람들에게 평등한 웹 이용을 위해, 웹 접근성이 만들어졌다.
보통 사람들과 달리 웹 이용에 불편함을 겪는 사람들(장애인, 노약자등)은 웹의 접근성이 떨어진다.
이를 위해 스크린 리더기 마우스스틱 등 보조기기를 이용하는데 보조기기가 읽게 하기 위한 방법들을
통해 웹 접근성이 좋게 해야 한다.
웹 표준과 웹 접근성의 차이는?
웹 표준은 웹 접근성을 지키기 위한 표준이다.
어떤 웹 브라우저를 사용하던, 모바일, 태블릿 등 어떤 화면 에서 웹을 이용하던 어려움 없이 이용하도록 하는 표준 이다.
이느 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의 속성을 이용한다. -->다음에서 웹 표준 접근성을 참고할 수 있다.
웹표준, 웹접근성, 웹호환성의 정의와 차이점 & 효과 3가지 - 우선코딩 (codingfirst.kr)
웹표준, 웹접근성, 웹호환성의 정의와 차이점 & 효과 3가지 - 우선코딩
웹제작 관련 업무를 하다보면 웹표준, 웹접근성, 웹호환성 이라는 단어를 많이 들어보았을 겁니다. 특히 공공기관, 대기업에서 의뢰한 작업의 경우는 이를 꼭 지켜 제작이 되어야만 합니다. 프
codingfirst.kr
웹 접근성 vs 웹 표준
웹 접근성 vs 웹 표준 웹 접근성 (Web Accessibillity): 1) 장애를 가진 사람들이 웹 콘텐츠를 인지하고, 2) 편리하게 사용할 수 있으며, 3) 그 내용이 쉬워야 하며, 4) 견고성을 지녀야 한다. 월드 와이드
kutar37.tistory.com
'web > html' 카테고리의 다른 글
| a 태그 속성 (0) | 2022.03.08 |
|---|---|
| [html/css] html 기초 (0) | 2022.03.08 |
| id와ㅣspan 요소 (0) | 2021.07.08 |
| form태그 enctype속성 (0) | 2021.06.24 |
| 이미지 포멧 (0) | 2021.06.17 |
