웹 접근성과 웹표준에 대해 알아봅시다.

웹 접근성 인증 마크

 

HTML과 CSS를 사용하여 마크업을 하게 되면 가장 기본적으로 많이 듣게 되는 단어가 웹 표준입니다. 그리고 그에 파생되어서 웹 접근서이라는 단어도 같이 접하게 되는데 아마 '웹 표준', '웹 접근성'이라는 단어를 처음 접하시는 분들도 계실수도 있고 두 단어가 같은 의미를 가진다고 생각할 수도 있습니다.  

 

비슷하지만 서로 의미하는게 다른 두 단어를 오늘 이해해보려고 합니다.

📒 웹 표준이란?

웹 표준이란, ‘웹에서 표준적으로 사용되는 기술이나 규칙의 총칭으로 다양한 접속 환경을 가진 인터넷 사용자들이 정보에 소외되지 않고, 동등하게 정보를 이용할 수 있도록 하는 방법이라고 정의합니다. 좀 더 쉽게 정리하면 웹 표준은 브라우저의 종류나 버전에 관계 없이 서로 호환이 가능하도록 제시된 표준으로 어느 한쪽에 최적화되어 치우치지 않고 동일하게 정보를 이용할 수 있는 웹 페이지 제작 기법을 말합니다.

 

📒 웹 접근성이란?

웹 접근성(web accessibility)은 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용할 수 있도록 보장하는 것으로 웹에 누구나 신체적, 환경적 조건에 관계없이 인터넷에 접속하여 웹 서비스를 이용할 수 있어야 한다는 것이며 웹 접근성 준수는 법적 의무사항입니다.

 

둘의 가장 큰 차이는 웹 접근성은 신체적, 환경적 조건에 상관없이 동등한 정보를 제공받는다는 것이 전제이고 웹 표준은 다양한 접속 한경에서 동등한 정보를 제공한다는 전제입니다.

🌞 웹 접근성 준수 고려사항

• 시각 : 실명, 색각 이상, 다양한 형태의 저시력을 포함한 시각 장애
• 이동성: 파킨슨병, 근육병, 뇌성마비, 뇌졸중과 같은 조건으로 인한 근육 속도 저하, 근육 제어 손실로 말미암아 손을 쓰기 어렵거나 쓸 수 없는 상태
• 청각 : 영상, 음성 콘텐츠에 자막, 원고, 수화 등의 대체수단 부제로인한 인식이 불가능한 상태
• 인지: 문제 해결과 논리 능력, 집중력, 기억력에 문제가 있는 정신 지체 및 발달 장애, 학습 장애(난독증, 난산증 등)

 

🌞 KWCAG  웹 접근성 지침 2.0 구성

• 4개 원칙(Principles), 13개 지침(Guidelines), 22개 검사항목(Requirements)으로 구성
• 웹 콘텐츠 내에 검사항목에 해당하는 경우가 없는 경우, 준수한 것으로 간주함
• 모든 검사항목은 필수 항목임(모든 지표의 95% 이상 준수해야 함)

웹 접근성에 대한 지침표

원칙	지침	성공기준
합계	13개	22개
1. 인식의 용이성	1.1 : 대체텍스트	1개
	1.2 : 멀티미디어 대체수단	1개
	1.3 : 명료성	3개
	1.4 : 배경음 사용금지	1개
2. 운용의 용이성	2.1 : 키보드 접근성	1개
	2.2 : 충분한 시간제공	3개
	2.3 : 광 과민성 발작예방	1개
	2.4 : 쉬운 네비게이션	3개
3. 이해의 용이성	3.1 : 가독성	1개
	3.2 : 예측가능성	1개
	3.3 : 콘텐츠의 논리성	2개
	3.4 : 입력도움	2개
4. 견고성	4.1 : 문법준수	1개
	4.2 : 웹애플리케이션 접근성	1개

   

🌞 KWCAG  웹 접근성 지침 2.1 수정사항 및 추가사항

4개 원칙(Principles), 13개 지침(Guidelines), 24개 검사항목(Requirements)으로 구성

 

1. 인식의 용이성

1.1.1 (적절한 대체 콘텐츠 제공)(수정)

- 의미 있는 배경 이미지가 사용자에게 전달되어야 하는 콘텐츠는 그 의미가 보조기술로 전달되도록 대체 텍스트를 제공해야 한다. 의미 있는 배경 이미지의 경우 가급적 배경이 아닌 이미지로 제공할 것을 권장한다.

- 동일한 정보를 중복해서 제공하는 경우(대체 텍스트의 중복 제공 방지) 보조기술로 동일한 정보가 반복해서 전달되지 않도록 구현하는 것이 바람직하다.

 

1.3.3 (텍스트 콘텐츠의 명도 대비)(수정)
- 텍스트 콘텐츠의 명도 대비} 텍스트의 콘텐츠와 배경간의 명도 대비는 4.5 대 1 이상이어야 한다.

단, 화면 확대가 가능한 콘텐츠의 경우 3대 1까지 낮출 수 있다.

1.3.5 (콘텐츠 간의 구분)(신규)
- 이웃한 콘텐츠는 구별될 수 있어야 한다.

• 테두리를 이용한 구분 한다.
• 콘텐츠 사이에 시각적인 구분선을 삽입하여 구분한다.
• 서로 다른 무늬를 이용하여 구분한다.
• 콘텐츠 배경색 간의 명도 대비(채도)를 달리하여 구분한다.
• 줄 간격 및 글자 간격을 조절하여 구분한다.
• 기타 콘텐츠를 시각적으로 구분할 수 있는 방법을 이용한다.

2. 운용의 용이성

2.1.3 (조작 가능)(신규)

- 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.  

콘텐츠에 포함된 모든 컨트롤은 대각선 방향의 길이를 6.0MM 이상으로 제공해야 한다.

2.4.1 (반복 영역 건너뛰기)(수정)

- 콘텐츠는 쉽게 내비게이션 할 수 있어야 한다.
건너뛰기 링크는 시각장애인뿐 아니라 지체장애인도 키보드 조작 횟수를 줄일 수 있게 하는 효과적인 수단이므로 메뉴 건너뛰기 링크는 화면에 보이도록 구현해야 한다.

2.4.2 (제목 제공)(수정)
- 팝업 창은 팝업 창임을 제목에 명시해야 한다.

2.4.3 (적절한 링크 텍스트)(수정)
- 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

•  문장의 일부분에 링크를 연결하는 경우 : URL 목적지, 용도 등을 표현한 텍스트에 링크를 연결해야 한다.
• "바로가기" 등의 링크 텍스트를 제공하는 경우 :URL에 관한 정보를 제공하는 문장에 이어서 링크 텍스트를 삽입한다.
• 이미지 링크를 제공하는 경우 : URL에 관한 정보를 제공하는 텍스트와 URL로 이동하는 이미지 링크는 하나의 링크로 구성하는 것이 바람직하다. 이 경우, 이미지 링크의 대체 텍스트는 공백 문자로 제공해야 한다.
• 동일한 제품을 서로 다른 관점에서 각각 설명한 페이지로 이동하는 링크 들은 각 링크 텍스트를 서로 다르게 구성하는 것이 바람직하다.
• TAB 컨트롤을 이용하여 공지사항 목록을 나열하고, 주변에 “더보기: 링크를 제공하는 콘텐츠에서 “더보기”링크는 그 맥락으로부터 "공지사항 더보기"임을 알 수 있다.