[Part1] 웹/디자인 - TERMS 02

[TERMS 02] 웹 표준 / 웹 접근성

웹 표준을 설명하는 이미지

 

웹 접근성을 설명하는 이미지

1) 웹 표준/ 웹 접근성의 정의

> 웹 표준

웹상에서 지켜하는 표준 규칙.

웹 표준을 잘 준수한 사이트 = 국제 표준화 단체인 W3C(World Wide Web Consortium)에서 지정한 표준안을 지키며 제작된 사이트

 

> 웹 접근성

웹 접근성은 장애인과 비 장애인 모두가 웹 사이트를 이용할 수 있게 하는 방식.

올바르게 설계되어 개발, 편집되었을 때 모든 사용자가 정보와 기능에 동등하게 접근 할 수 있다.

 

2) 웹 표준/ 웹 접근성은 어디서 접하게 될까?

웹 표준을 준수해서 개발한  사이트 = 웹 브라우저(크롬, 사파리 등)에 상관없이 동일하게 이용할 수 있다.

웹 표준을 준수하는 이유 = 사용자가 어떤 웹 브라우저를 사용하든지 웹 사이트를 정상적으로 이용하게 하기 위함

 

웹 접근성을 준수해서 개발한 사이트는 장애인들도 비 장애인과 동일하게 웹 사이트를 이용할 수 있다.

(현재 모든 웹 사이트가 웹 표준을 준수하고 있지만, 아진까지 웹 접근성을 고려해서 개발된 사이트는 부족한 상황)

웹 접근성 역시 개발자가 반드시 알고 준수해야 하는 규칙

 

3) 웹 표준/ 웹 접근성 알아보기

> 웹 표준

1. 문서 구조 : 해당 페이지의 기본정보를 포함하는 헤드(head)와 본문을 포함하는 보디(body)를 가진다.
2. 표준 엘리멘트(element) 사용 : 모든 요소는 완벽하게 중첩(시작 태그와 종료 태그)되어야 하고, 모든 요소와 속성은 소문자여야 한다.
3. 인코딩 선언 : 모든 HTML 문서는 'uft-8'을 기본 인코딩으로 사용한다.(<metahttp-equiv="Content-Type" content="text/html; charset=utf-8">)

 

> 웹 접근성

웹 접근성 표준은 원칙(Principle), 지침(Guideline), 검사 항목(Requirement) 3단계로 구성되어 있다. 여기서 원칙은 웹 접근성 제고를 위한 4가지 원칙, 지침은 각 원칙을 준수하기 위한 13개 지침, 검사 항목은 해당 지침의 준수 여부를 확인하는 22개의 검사 항목으로 구성되어 있다.

• 일반적인 웹 접근성

항목	내용	예제
인식의 용이성	텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있게 적절한 대체 텍스트를 제공해야 한다.	<img src ="/test.png" alt="테스트이미지입니다."">
운용의 용이성	모든 기능은 키보드만으로 사용 가능해야 한다.	a, button, input 등의 태그 사용
이해의 용이성	입력 서식은 시각 장애인 등이 해당 서식을 이해할 수 있도록 레이블(label)을 제공해야 한다.	<label for ="name">이름</label> <input type="text" id="name" size="30">
	<label>을 제공할 수 없는 입력 서식에는 title을 제공한다	<input type ="text" title="전화번호 뒷자리">

 

• 기존 웹 접근성의 한계를 극복하기 위해 등장한 WAI-ARIA

사이트 조작에 사용하는 물리적 인터페이스:

과거) 키보드와 마우스 + HTML과 자바스크립트(단순한 동작을 위해)

현재) 스크린 터치(모바일의 시대)
시각 장애인들의 사이트 접근성에 대한 요구 증대 => 사이트에 사용되는 UI들은 HTML의 한계를 넘어서는 상황
=> WAI-ARIA(Web Accessibility Initative - Accessible Rich Internet Application)가 등장

 

특히 리액트(React)나 Vue.js를 사용한 라이브러리에서 문제가 생겨난다.

[ e.g. 시맨틱 태그 없이 div 태그만 사용하여 체크 박스를 만듦, 시각 장애인이나 검색 포털 사이트의 크롤러들이 사이트를 검색할 때는 문제가 발생함]

문제 해결을 위해 WAI-ARIA가 사용된다. WAI-ARIA는 동적 콘텐츠, Ajax, HTML, 자바 스크립트및 관련 기술로 개발된 사용자 인터페이스 구성 요소의 접근성을 증가시키는 방법을 규정한 W3C가 출판한 기술 사양이다.

<div class= "checkbox" role="checkbox"></div>

속성을 넣는 것처럼 role 등의 키워드에 알맞은 값을 넣어 주면 된다. 직접 코드를 작성할 때는 시맨틱 태그를 이용하면 되지만, 자동 완성 모듈 같은 UI 사용시 시맨틱 태그가 제대로 정의되지 않는 경우가 있기 때문에 이를 보완하기 위해 WAI-ARIA를 사용한다.

 

• WAI-ARIA 사용 시 주의사항

올바르지 못한 ARIA 사용은 스크린리더(ARIA 정보를 바탕으로 움직임)를 사용하여 접근하는 사용자에게 안 좋은 영향을 준다.

 쇼핑몰에서 다음 코드처럼 div 영역을 버튼으로 사용하고 클릭 시 주문이 되도록 소스를 작성했다고 했을 때, role="button"을 작성한다고 해서 실제 HTML상에 키보드 포커싱이 일반 버튼 역할을 하지 않는다.

<div role = "button">문의하기</div>

HTML 요소 중 'a', 'button' 같은 태그는 탭 키로 이동 가능하지만 div 태그는 일반적으로 불가능하기 때문이다. 따라서 위와 같은 코드를 짤 때에는 키보드로 div 영역에 접근 할 수 있도록 강제로 tabindex 속성 혹은 스크립트 처리를 하거나 버튼 용도에 맞게 a,button 태그를 사용해야 한다.

 

4) 웹 표준/ 웹 접근성을 사용하는 이유

> 웹 표준을 사용하는 이유

1. 개발 시간 단축 : 웹 표준을 따르면 모든 플랫폼, 브라우저, 기기에서 작동하는 하나의 사이트만 만들면 된다.
2. 업데이트, 유지 보수 용이 : 웹 표준에 맞춰 작성된 웹 사이트는 수 많은 HTML페이지로 구성된 사이트 전체의 스타일을 바꿀 때 하나의 CSS파일만 업데이트 해서 간단하게 유지 보수 할 수 있다.
3. 검색엔진 최적화(SEO) : 좋은 기사 거리에 헤더(header)와 같은 시맨틱 HTML을 사용하면 해당 키워드에 비중을 둘 수 있고, 구글 검색 순위에도 영향을 미친다.

 

> 웹 접근성 사용 목적

웹 접근성의 목적 : 장애인과 비장애인이 동등하게 접근할 수 있는 웹 콘텐츠 제작(웹 접근성을 지키지 않는것 = 장애인을 차별하는 것)

[ e.g. 미국의 유명한 소매업체인 타깃(Target)은 대체 텍스트를 제공하지 않아 미국의 장애인차별금지법(ADA : Americans with Disabilities Act) 위배로 60억 정도를 배상함]

공공기관 사이트를 포함해 대중이 용하는 사이트의 웹 접근성이 강조되고 있다. 우리나라에서도 ' 한국형 웹 콘텐츠 접근성 지침'이라고 불리는 웹 접근성 지침 표준문서가 있다.

 

5) 웹 표준/ 웹 접근성 더 알아보기

> 액티브엑스(ActiveX)

과거 우리나라의 금융 사이트나 쇼핑몰에서 엑티브엑스로 전자금융 및 결제를 처리하는 경우가 많았다. 그런 크롬이나 사파리 같은 브라우저는 액티브엑스를 설치할 수 없다. 즉 액티브엑스는 IE에서만 작동하는 비표준 기술이다. 

 

> 함께 알아두면 좋은 용어

• W3C
• 한국웹접근성인증평가원
• WATCH 2.0

> 참고 자료

https://www.w3.org/WAI/standards-guidelines/aria