[Accessibility] 웹표준과 웹접근성
웹표준(Web Standards)이란?
웹 표준이란, ‘웹에서 표준적으로 사용되는 기술이나 규칙’을 의미하는데,
이는 우리가 흔히 생각하는 표준(standard)과는 조금 다르다.
웹에서의 표준은 W3C의 토론을 통해 나온 권고안(recomendation)을 말하며, 권고안 이외 단계 수준의 스펙은 비표준이거나 독자확장 요소를 의미하기 때문에 구분하여 사용해야 한다.
웹에서 표준적으로 사용되는 기술이나 규칙
표준화 단체인 W3C가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정이 담겨있다.
어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상 작동해야 함을 의미
표준 스펙을 잘 지키는 것 뿐만 아니라 구조적 마크업(XHTML)과 표현 및 레이아웃(CSS)및 사용자 행위 제어(DOMScripting)를 잘 분리하는 고급 홈페이지 구축 방식
CSS와 HTML(XHTML)로 웹 문서를 작성하는 것의 명확한 용어는 권고(Recommend)라고 하며 버전과 상관없이 HTML, XHTML은 그 자체로 표준이라고 한다.
W3C란?
World Wide Web Consortium의 약자로 팀 버너스 리 경이 설립한 웹기술의 표준을 정의하는 공식 기관이다.
웹표준의 장점
1. 웹 페이지의 효환성
웹 표준을 준수하면, 웹 페이지가 모든 브라우저에서 일관적으로 표시되게 된다. 이를 통해 사용자들은 어떤 브라우저를 사용하더라도 동일한 사용자 경험을 얻을 수 있어 오래된 브라우저에서도 컨텐츠가 적절하게 표시되고 호환성과 운용성이 확보된다.
2. 검색 엔진 최적화 (SEO)
웹 표준을 준수하면, 검색 엔진에서 웹 페이지를 더욱 잘 인식할 수 있다. 이를 통해 더욱 높은 검색 결과를 얻을 수 있다.
3. 유지보수 및 확장성
웹 표준을 준수하면, 웹 페이지를 만드는 데 필요한 시간과 비용을 줄일 수 있어 유지보수 및 확장성이 좋아진다. 또한 논리적이고 효율적으로 작성된 웹 문서는 코드의 양이 줄어 파일 크기가 줄고 서버 부담의 감소로 이어진다.
4. 웹 접근성 향상
웹 표준을 준수하면, 모든 사용자가 쉽게 웹 페이지에 접근할 수 있도록 웹 접근성을 고려할 수 있다. 예를들어 다양한 브라우저, 휴대폰 PDA, 장애인 지원용 프로그램에서도 대응이 가능하므로 접근성이 향상되고 크린리더기 등 보조공학 기기 사용자들이 조금 더 정확한 정보를 얻을 수 있도록 도움을 준다.
웹 표준을 준수하는 방법
1. DOCTYPE 선언
웹 페이지의 최상단에 DOCTYPE을 선언하여 웹 페이지가 어떤 버전의 HTML, XHTML을 사용하는지 명시한다.
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML !DOCTYPE declaration</title>
</head>
<body>
<p>이 문서는 HTML 문서입니다.</p>
</body>
</html>
2. 시맨틱 태그 사용
시맨틱 태그는 HTML5에서 새로 추가된 태그로, <header>, <nav>, <section>, <footer> 등의 태그를 사용하여 웹 페이지의 구조를 더욱 명확하게 표현할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>시맨틱 태그 예제</title>
</head>
<body>
<header>
<h1>시맨틱 태그 예제</h1>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
</nav>
</header>
<section>
<h2>섹션 1</h2>
<p>본문 내용입니다.</p>
</section>
<section>
<h2>섹션 2</h2>
<p>본문 내용입니다.</p>
</section>
<aside>
<h2>광고</h2>
<p>광고 내용입니다.</p>
</aside>
<footer>
<p>저작권 © 2021 Upstage. All Rights Reserved.</p>
</footer>
</body>
</html>
3. CSS 스타일 시트 사용
CSS 스타일 시트를 사용하여 디자인과 레이아웃을 분리하고, 웹 페이지의 내용과 디자인을 분리하여 유지보수 및 확장성을 높일 수 있다.
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML !DOCTYPE declaration</title>
<link href="/media/examples/link-element-example.css" rel="stylesheet"> <!-- css 파일 분리 -->
</head>
<body>
<p>이 문서는 HTML 문서입니다.</p>
</body>
</html>
4. 웹 접근성 고려
웹 페이지를 만들 때 모든 사용자가 쉽게 접근할 수 있도록 웹 접근성을 고려해야 한다. 예를 들어, 시각 장애인이 스크린 리더를 사용하여 웹 페이지를 읽을 수 있도록 alt 속성을 사용하여 이미지에 대한 설명을 제공하거나, 키보드만으로 모든 기능을 사용할 수 있도록 tabindex 속성을 사용하는 등의 세심한 작업이 필요하다.
1
2
3
<input type="text" name="name" tabindex="1">
<input type="text" name="email" tabindex="2">
<input type="submit" value="Submit" tabindex="3">
웹접근성(Web Accessibility)이란?
웹 접근성은 ‘모든 사용자가 신체적·환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것’ 입니다.
여기서 신체적 조건이란, 일반 사용자는 물론, 장애를 가진 사람, 고령자 등을 의미하며,
환경적 조건이란 다양한 기기(PC, Mobile, PDA 등), OS(운영체제), 웹 브라우저(Internet Explorer, FireFox, Safari,Chrome, Opera 등) 또는 저사양 및 저속회선 사용자나 이미지, 동영상 등을 볼 수 없는 환경 등을 의미한다.
즉, 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것이다.
장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킨다.
사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있다.
웹 접근성 고려사항
시각 : 실명, 색각 이상, 다양한 형태의 저시력을 포함한 시각 장애
운동성 : 파킨슨병, 근육병, 뇌성마비, 뇌졸증과 같은 조건으로 인한 근육 속도 저하, 근육 제어 손실로 말미암아 손을 쓰기 어렵거나 쓸 수 없느 ㄴ상태
청각 : 청각 장애
발작 : 깜박이는 효과나 시각적인 스트로보스코프를 통해 일어나는 뇌전증성 발작
인지 : 문제 해결과 논리 능력, 집중력, 기억력에 문제가 있는 정신 지체 및 발달 장애, 학습 장애(난독증, 난산증 등)
웹 콘텐츠 접근성 지침(WCAG)
1. 인지성(Perceivable)
정보와 사용자 인터페이스 요소는 그들이 인지할 수 있도록 사용자에게 표시될 수 있어야 한다
- 모든 텍스트가 아닌 콘텐츠에 대체 텍스트를 사람들이 원하는 인쇄, 점자, 음성 기호 또는 간단 언어 등과 같은 형태로 제공해야 한다.
- 시간을 바탕으로 한 미디어에 대한 대안을 제공해야 한다.
- 정보와 구조의 손실 없이 콘텐츠를 다른 방식(예를 들면 더욱 간단한 형태로)들로 표현할 수 있어야 한다.
- 사용자들이 보다 쉽게 보고 들을 수 있는 전경에서 배경을 분리한 콘텐츠를 만들어야 한다.
2. 운용성(Operable)
사용자 인터페이스 요소와 탐색은 운용 가능해야 한다. 키보드로 모든 기능을 사용할 수 있도록 해야 한다.
- 읽기 및 콘텐츠를 사용하는 사용자에게 충분한 시간을 제공해야 한다.
- 알려진 방법으로 발작을 일으킬 수 있는 콘텐츠를 디자인하지 않아야 한다.
- 사용자가 탐색하고 콘텐츠를 찾고 그들이 어디에 위치하고 있는지를 알 수 있도록 도와주는 방법을 제공해야 한다.
3. 이해성(Understandable)
정보와 사용자 인터페이스 운용은 이해할 수 있어야 한다.
- 텍스트 콘텐츠를 판독하고 이해할 수 있도록 만들어야 한다.
- 웹 페이지의 탑재와 운용을 예측 가능한 방법으로 제작해야 한다.
- 사용자의 실수를 방지하고 수정할 수 있도록 도와야 한다.
4. 내구성(Robust)
- 콘텐츠는 보조 기술을 포함한 넓고 다양한 사용자 에이전트에 의존하여 해석될 수 있도록 충분히 내구성을 가져야 한다.
- 보조 기술을 포함한 현재 및 미래의 사용자 에이전트의 호환성을 극대화해야 한다.
웹 접근성을 위해 사용되는 보조기기
- 자막
- 스크린리더
- 자동완성 기능
- 마우스스틱
- 색상 대비 디자인 등.
웹 접근성을 준수하는 방법
웹 접근성은 모든 사람이 인터넷을 이용할 수 있는 공간을 만들기 위한 중요한 요소이다. 따라서, 웹 개발자는 웹 접근성을 고려하여 웹 사이트를 구축하고, 이를 통해 모든 사용자들이 웹 사이트를 쉽게 이용할 수 있도록 노력해야 한다.
1. 시각적 요소 처리
시각 장애인은 이미지, 비디오, 그래픽 등을 인식할 수 없다. 따라서, 대체 텍스트, 적절한 색상 대비, 텍스트 크기 등을 고려하여 시각적 요소를 처리해야 한다.
2. 청각적 요소 처리
청각 장애인은 오디오 콘텐츠를 이해할 수 없다. 따라서, 자막, 수화, 오디오 설명 등을 제공하여 청각적 요소를 처리해야 한다.
3. 키보드 접근성
지체 장애인은 마우스를 사용하지 못하므로 키보드를 통해 웹 사이트를 이용해야 한다. 따라서, 키보드만으로 웹 사이트를 이용할 수 있도록 구현해야 한다.
4. 웹 접근성 검사
웹 사이트를 구축할 때, WCAG 준수 여부를 검사하여 웹 접근성을 확보할 수 있다.