[목차]
== 개요 ==
월드 와이드 웹의 측면을 서술하고 정의하는 공식 [[표준]]이나 다른 기술 규격을 가리키는 용어.
어떤 브라우저를 사용하든 웹페이지가 똑같이 보이고 정상적으로 작동해야 웹 표준을 잘 지킨 것이다.
##개요를 너무 늘리지 말아주세요.
== 엄밀한 정의 ==
이러한 것들 모두 "웹 표준"이라고 부르지만 웹 표준으로 이동하는 것을 찬성하는 사람들은 사용성과 접근성에 직접 영향을 미치는 더 높은 수준의 표준에 초점을 두는 경향이 있다. 더 넓은 뜻의 웹 표준은 아래를 이른다.
* WHATWG (Web Hypertext Application Technology Working Group) - 대표적으로 [[HTML]]과 웹 API의 표준을 정한다.
* [[W3C]] (World Wide Web Consortium) - 대표적으로 [[CSS]]의 표준을 정한다.
* 국제 인터넷 표준화 기구 (IETF)가 출판한 인터넷 표준 (STD) 문서
* 국제 인터넷 표준화 기구 (IETF)가 출판한 RFC (Request for Comments) 문서
* [[국제표준화기구]](ISO)가 출판한 표준들
* Ecma 인터내셔널 (이전 이름은 ECMA)이 출판한 표준들 - [[JavaScript]] 표준이 여기서 정해진다.
* [[유니코드]] 컨소시엄이 출판한 유니코드 표준과 다양한 유니코드 기술 보고서 (UTR) - [[UTF-8]]이 여기에 기반한다.
* 인터넷 할당 번호 기관 (IANA)이 운영하는 이름과 번호 [[레지스트리]]
== 웹 표준이 중요한 이유 ==
산업표준이 왜 존재하는지, [[도량형]]이 왜 존재하는지 생각해 보면 이유가 명확해진다. 산업현장에서 부품들의 표준화가 돼 있지 않으면 업체마다 서로 호환이 되지 않고, 같은 업체에서 생산하는 부품도 품질보장이 되질 않을 것이다. 웹 환경은 본질적으로 '통신'이기 때문에 더욱 더 표준화가 중요해진다. 비표준 '부품'이야 [[독자규격|자기네 제품에만 독점적으로 사용할 거라면]] 크게 상관없지만 웹은 누가 어떤 장치를 어떤 방식으로 사용할지를 제공자가 통제할 수 없기 때문이다. 인터넷 그 자체가 [[크로스 플랫폼]]인 이유.
2016년 현재 인터넷 사용 인구는 30억명을 훌쩍 넘긴다. 사실상 전인류의 절반이 인터넷을 사용하고 있고 인터넷 트래픽의 거의 전부를 차지하는 게 웹 트래픽이다. 사용하는 사람이 많아지면 표준화는 반드시 해결해야 할 과제가 된다. 그것이 일개 개인의 프로젝트에서 시작되었든([[월드 와이드 웹]]), 국제 연합 수준의 극대규모 프로젝트([[국제단위계|미터법]])였던 말이다.
웹 표준이 없던 1990년대 말 ~ 2000년대 초반에는 웹 사이트 개발자는 사실상 두 개의 사이트를 만들어야 했다. [[Internet Explorer]]용과 [[넷스케이프 내비게이터|넷스케이프]]용의 두 개. 실질적으로는 각종 핵과 브라우저 판별 코드를 삽입해야 해서 3배의 노동이 들었다. 표준이 없으면 이렇게 더 많은 노동력과 시간이 든다. 사회 전체적인 비용이 증가하는 것이다. 시간과 예산이 빠듯한 상황에서 웹 개발자는 결국 하나만을 선택하고 나머지를 버릴 수밖에 없다. 이는 정보 제공에 차별을 발생시킨다.
인터넷에 정보는 --[[Internet Explorer|웹 표준을 무시하는 브라우저]]를 사용하는 유저를 제외하고-- 차별없이 제공되어야 한다. "이 사이트는 [[Internet Explorer/버전#s-1.6|인터넷 익스플로러 6]], 1024x768 해상도에서만 이용하실 수 있습니다." 따위의 말은 그저 횡포일 뿐이다. 본인이 [[갑]]이 아닌데도 불구하고 이런 횡포를 부린다면, 그건 장사하기 싫단 소리밖엔 안 된다. [[민원24]]같은 전자정부 사이트는 [[갑]]의 요건을 일부 충족하기 때문에 아직도 배째라 영업(?)이 가능한 면이 있지만 시대를 역행하는 것임에는 변함이 없다.
웹 사이트를 작성하는 데 중요도가 높아지고 있으며 웹 [[디자인]], 개발과 관계가 있다. 수많은 상호 의존성이 있는 표준들과 규격들 가운데 일부는 단지 월드 와이드 웹으로만 끝나는 것이 아니라, 인터넷의 관리 측면이기도 하며 이러한 표준들은 직간접적으로 웹 사이트, 웹 서비스 개발과 관리에 영향을 주고 있다. 웹 표준을 완벽하게 지키려면 특정 브라우저에 의존하는 플러그인이나 코드를 완벽하게 제거해야 하는 것이 보통인데, 일반적인 브라우저에 공통적으로 제공되는 플러그인은 이 기준에서 예외가 되는 경우가 많다.
* 만화: [[http://www.thisisgame.com/webzine/nboard/213/?n=56672|웹 표준이 중요한 이유]]
== 웹 [[접근성]] ==
W3C의 정의에 의하면 웹 표준성은 접근성, 사생활 보호, 보안, 국제화의 측면을 고려해야 한다. 이 중에 접근성을 흔히 '웹 접근성'이라고 하고 웹 표준성과 함께 많이 언급되는 개념이다. 명칭은 '웹' 접근성이지만 [[https://www.w3.org/WAI/standards-guidelines/ko#wcag|WCAG 원문]]에 따르면 WCAG는 웹이 아닌 정보 통신 기술(ICT), 멀티미디어, “모바일”, 어플리케이션 등에도 모두 적용되는 지침이다. 즉 소소한 차이는 있을지언정 모바일 앱이나 게임의 인터페이스에도 적용이 된다는 뜻이다.
웹 접근성은 누구나 원활하게 웹 페이지를 이용할 수 있어야 한다는 것을 의미한다. 예를 들어 시각장애인의 경우 화면을 눈으로 볼 수 없기 때문에 그렇지 않은 사람과 같은 방식으로는 웹페이지를 이용할 수 없다. 그래서 '스크린 리더'라는 별도의 소프트웨어를 [[컴퓨터]]에 설치해서 인터넷을 이용한다. 스크린 리더는 [[모니터]]에 비춰지는 내용을 인식해서 음성, 점자로 출력해주는 역할을 한다. 예를 들어 화면에 '메뉴'라는 텍스트가 있으면 이를 인식해서 '메뉴'라는 음성이 나오는 방식이다. 시각장애인은 이를 이용해 눈으로 보는 대신 소리로 들으면서 웹페이지에 담긴 정보를 이해할 수 있다. 하지만 스크린 리더는 소프트웨어에 불과하므로 스스로 웹페이지의 내용을 분석해서 이건 무슨 내용이고 저건 무슨 내용이다라는 걸 이해할 수 없다. 특히 이미지의 경우가 그렇다. '메뉴'라고 텍스트로 집어 넣지 않고 메뉴라고 그려진 이미지를 사용하면 비 시각 장애인의 눈에는 똑같이 메뉴라고 보이지만 소프트웨어 입장에서는 그저 이미지일 뿐이다. 그 이미지 안에 그려진 내용을 인식하는 것은 불가능하다. 그래서 되도록이면 이미지를 사용하지 말고 소스 코드에 내용을 그대로 담는 것이 권장되며, 부득이하게 이미지를 사용할 경우 반드시 이 이미지가 어떤 내용인지 설명을 추가해야 한다.
{{{#!syntax html
1. 버튼
2. }}} 태그를 이용해서 구현하는 방식이고 아래 줄은 버튼 모양의 이미지를 쓰는 방식이다. 둘 중 어느 방식을 쓰던 버튼의 기능은 그대로 구현할 수 있다. 하지만 되도록이면 윗줄의 방식을 쓰는것이 권장된다. 이미 {{{}}} 태그를 쓰고 있기 때문에 스크린 리더가 메뉴라는 텍스트가 담긴 '버튼'이라는 것을 사용자에게 올바르게 전달할 수 있기 때문이다. 하지만 부득이하게 이미지를 쓴다면 ~~특히 버튼 특유의 회색 그라데이션을 견딜 수 없다면~~[* 물론 [[CSS]]로 이쁘장하게 꾸며줄 순 있다.] {{{alt}}}라는 속성을 추가한 뒤 이 이미지가 무슨 이미지인지 설명하는 텍스트를 추가해주어야 한다. 이렇게 할 경우 비 시각 장애인의 눈에는 {{{alt}}} 속성에 쓰여진 '메뉴 버튼'이라는 텍스트는 볼 수 없다.[* 다만 이미지 경로가 잘못돼서 이미지가 보이지 않을 경우 이미지 자리에 빈 상자가 보이고 {{{alt}}} 속성에 쓰여진 텍스트가 기본 폰트로 출력된다.][* 구 버전의 [[Internet Explorer]]에서는 {{{title}}} 속성으로 인식되는 버그가 있어서 마우스 커서를 올리면 텍스트를 볼 수 있다(...).] 하지만 스크린 리더는 이를 '메뉴 버튼'이라는 이미지로 인식해 사용자에게 정보를 전달하게 된다. 이처럼 장애가 있는 경우를 포함한 여러 사용자 시나리오에도 웹 페이지를 원활하게 이용할 수 있도록 지켜야 하는 사항을 웹 접근성이라고 한다.
네이버에서 '널리'라는 프로젝트의 일환으로 네이버 사옥 그린팩토리 2층에 '웹 접근성 체험 부스'를 오픈했다. 이 곳에 방문하면 누구나 무료로 실제 장애가 있는 경우 어떤 식으로 인터넷을 이용하는지 직접 체험해 볼 수 있다고 한다. [[http://nuli.navercorp.com/|널리 공식 홈페이지]]
일부 정보기술 단체에서 [[웹 접근성]][* 그 외 성격이 유사한 것. 예를 들면 [[정보보안]] 분야의 시큐어 코딩 등이 있다.] 경험이 있는 개발자에게 일을 맡기면 안된다고 주장하면서 --병맛--파문이 있었다. 실제로 이런 개발자들에게 일을 안주겠다는 의미가 아닌 [[차별금지법/대한민국|장애인차별금지법]]의 정보 접근성 조항에 대한 반발이었다. 이런 규정으로 인해 개발자들이 개발에 집중하지 않기 때문에 업무가 지연되는 원인이 된다고 주장했다. 물론 터무니없는 주장이다. 이미 대부분의 관련 표준 기술에서 접근성을 고려한 속성을 기본으로 지원한다. 게다가 정보 접근성은 단순히 장애인만을 위한 것이 아니며, 미래 기술을 위한 '''호환성'''을 아우르기 때문이다.
웹 접근성을 준수해야 하는 대상에게 관련 법령과 지침은 그저 봉사를 강요하는 것이라는 인식에 그치는 경우가 많다. 그나마 다행인건, 웹 접근성이 잘 준수된 웹 사이트의 경제적 가치는 [[검색엔진]]최적화(SEO), [[빅데이터]], [[인공지능]], [[메타버스]] 등으로 실현될 수 있다는 점이다. '''호환성'''이 좋기 때문이다. 장애인이 잘 읽을 수 있는 자료라면 컴퓨터도 잘 읽을 수 있기 때문에 모든 처리 과정에서 높은 우선권을 가진다. 쉽게 설명하면, 내 웹사이트가 검색결과 상위에 노출되어서 더 많은 잠재고객을 끌어모으고 싶다면 엉뚱한 스팸성 홍보 업체보다 웹 접근성에 투자하는게 가장 경제적이고 빠른 길이다.
=== 웹 접근성 지침 (WCAG) ===
Web Content Accessibility Guidelines. 웹 표준과 마찬가지로 W3C에서 제정한 웹 접근성 지침이 있다. 아래 하위 문단들은 2020년 기준 가장 최신 지침인 2.1을 참조하였으며 원본은 [[https://www.w3.org/TR/WCAG21/|W3C 웹 접근성 지침 버전 2.1 (영어)]]에서 찾을 수 있다. 크게 4가지 항목인 인지, 운용, 이해, 견고로 나누어져 있는데, 즉 웹 사이트는 인지∙운용∙이해가 쉬우며, 기기나 사양에 차이없이 견고해야 된다고 압축할 수 있다. 4가지 주요 항목 자체는 추상적인 만큼 구체적인 구현을 위하여 각 항목당 수많은 하위 항목 및 기준들이 나열되어 있다.
모든 세부 기준은 3가지 적합성(A, AA, AAA)으로 분류되어 있다. A가 최소 수준, AA가 일반적으로 권유되는 수준, 그리고 AAA가 가장 이상적인 수준[* 하지만 구현이 가장 까다로워 충족시키기 어려운 수준]이라고 이해하면 편하다. 이 기준을 얼마나 충족시키느냐에 따라 웹 페이지의 적합성 또한 3단계로 나눌 수 있다.
|| 적합성 || 의미 ||
|| A ||(최소 준수 수준) 웹 페이지가 모든 A 성공 기준을 충족시키거나, 적합한 대체제를 제공한다. ||
|| AA ||웹 페이지가 모든 A 및 AA 성공 기준을 충족시키거나, 적합한 AA 대체제를 제공한다. ||
|| AAA ||웹 페이지가 모든 A, AA 및 AAA 성공 기준을 충족시키거나, 적합한 AAA 대체제를 제공한다. ||
[[https://www.wah.or.kr:444/Participation/%ED%95%9C%EA%B5%AD%ED%98%95%EC%9B%B9%EC%BD%98%ED%85%90%EC%B8%A0%EC%A0%91%EA%B7%BC%EC%84%B1%EC%A7%80%EC%B9%A82.1.pdf|한국형 웹 콘텐츠 접근성 지침 2.1]]에서 비슷한 지침을 확인할 수 있지만 직번역이 아니고 WCAG 2.0을 국내 실정에 맞게 반영한 것이기 때문에 원본과 소소한 차이를 보인다. [[한국정보화진흥원]]이 운영하는 [[https://www.wah.or.kr:444/|웹 접근성 연구소]]에서 만들어진 내용이며, 웹 사이트는 2006년에 운영이 시작되었고 현재까지 한국에 웹 접근성이 무엇인지 알리는 역할을 해오고 있다. 하지만 우여곡절도 있었는데, 2011년(추정)까지 웹 접근성[* 당시의 웹 접근성은 웹 시장의 오랜 관습을 바꾸는 파격적인 개념으로 주목을 받았다.]에 대한 논의가 활발하였으나, 이후 근 4~5년간 우리나라에서 웹 접근성은 [[암흑기]]를 맞는다. 관련 업계, 기관, 민간 등 모든 분야에서 관심과 논의가 뜸해졌고, 정부기관의 유일한 웹 접근성 연구소의 웹 사이트 조차 접속이 매우 ~~문 닫았다는 이야기가 나올 정도로~~ 불안정했다. 이후 [[HTML5]] 도입 과정에서 다시 웹 접근성에 대한 관심이 높아지면서 현재는 웹 사이트 운영도 원활하고 오프라인 설명회, 유투브 등의 다양한 경로로 웹 접근성에 대해 알리고 있다.
==== 인지 ====
정보와 사용자 인터페이스 컴포넌트는 사용자가 인지할 수 있는 방식으로 제공돼야 한다.
1.[[대체 텍스트]]: 텍스트가 아닌 콘텐츠가 있을 경우 이를 텍스트로 이루어진 대체 콘텐츠와 함께 제공한다. 이는 대체 콘텐츠를 확대된 이미지, 점자, 음성 메시지, 기호, 더 간단한 언어로 바꾸어 필요한 사람에게 전달하기 위해서이다.
|| 적합성 || 기준 ||
|| A ||텍스트가 아닌 내용: 사용자에게 표시되는 모든 텍스트가 아닌 콘텐츠는 동등한 목적을 제공하는 대체 텍스트를 제공하되, 아래에 나열된 상황은 예외로 한다.
-----
* 컨트롤, 입력: 만약 텍스트가 아닌 콘텐츠가 컨트롤이거나 사용자 입력을 허용하는 경우에는 그 목적을 나타내는 이름을 제공한다.
* 시간 기반 미디어: 텍스트가 아닌 콘텐츠가 시간 기반 미디어인 경우, 최소 콘텐츠를 인지 가능한 수준의 텍스트 서술을 제공한다.
* 테스트: 텍스트가 아닌 콘텐츠가 시험이나 연습의 형태이며 텍스트로 보여지면 제 기능을 수행할 수 없을 경우, 최소 콘텐츠를 인지 가능한 수준의 텍스트 서술을 제공한다.
* 감각: 텍스트가 아닌 콘텐츠가 특정 감각의 사용을 겨냥하고 만들어졌다면, 최소 콘텐츠를 인지 가능한 수준의 텍스트 서술을 제공한다.
* [[CAPTCHA]]: 텍스트가 아닌 콘텐츠의 목적이 컴퓨터가 아닌 사람이 콘텐츠에 접근하는 것의 확인이라면, 그 콘텐츠를 설명하는 대체 텍스트가 제공되며, 다양한 장애를 수용하기 위하여 다른 종류의 감각 인식을 통한 대체 형태의 CAPTCHA 또한 제공한다.
* 장식, 서식, 비가시적: 텍스트가 아닌 콘텐츠가 순수한 장식, 시각적인 서식, 또는 사용자에게 비가시적일 경우, 보조 기술에 비인식되는 방향으로 구현한다.||
1.시간 기반 미디어: 시간에 기반한 미디어는 대체제를 제공한다.
|| 적합성 || 기준 ||
|| A ||사전 녹음된 오디오 또는 사전 녹화된 비디오 밖에 없을 때: 사전 녹음된 오디오나 비디오가 텍스트의 미디어 대체제이고 그 점이 정확히 명시되어 있지 않은 이상, 아래 사항을 따른다.
-----
* 사전 녹음된 오디오만 있는 경우: 사전 녹음된 오디오와 동일한 정보를 나타내는 대체제를 제공한다.
* 사전 녹화된 비디오만 있는 경우: 사전 녹화된 비디오 또는 그 비디오의 오디오 트랙과 동일한 정보를 나타내는 대체제를 제공한다.||
|| A ||사전 제작된 경우의 자막: 미디어가 텍스트의 미디어 대체제이고 그 점이 정확히 명시되어 있지 않은 이상, 자막은 모든 사전 제작된 오디오에 싱크되어 제공되어야 한다.||
|| A ||사전 제작된 오디오 서술문 또는 미디어 대체제: 미디어가 텍스트의 미디어 대체제이고 그 점이 정확히 명시되어 있지 않은 이상, 시간 기반 미디어 또는 사전 제작된 비디오의 오디오 서술문의 대체제를 싱크하여 제공한다.||
|| AA ||라이브인 경우의 자막: 모든 라이브 오디오는 싱크된 자막과 함께 제공한다.||
|| AA ||사전 녹화된 오디오 서술문: 모든 사전 녹화된 비디오는 싱크된 오디오 서술문과 함께 제공된다.||
|| AAA ||사전 녹음된 수화: 모든 사전 녹음된 오디오는 싱크된 수화와 함께 제공된다.||
|| AAA ||사전 녹음된 경우의 확장된 오디오 서술문: 전면에 있는 오디오의 멈춤들이 그 비디오의 의미를 충분히 정달하는 오디오 서술문을 제공하기에 부족한 경우, 확장된 오디오 서술문이 싱크된 비디오와 함께 제공된다.||
|| AAA ||사전 제작된 미디어 대체제: 모든 사전 제작된 미디어와 모든 사전 녹화된 비디오는 시간 기반 미디어의 대체제와 함께 제공된다.||
|| AAA ||라이브인 오디오만 있는 경우: 라이브인 오디오와 동일한 정보를 나타내는 시간 기반 미디어의 대체제를 제공한다.||
1.응용성: 콘텐츠가 정보나 구조를 잃지 않으면서 여러 방식으로 (예를 들어 더 간단한 레이아웃 같은) 제공 될 수 있다.
|| 적합성 || 기준 ||
|| A ||정보와 관계: 제시된 정보, 구조, 그리고 관계는 프로그래밍 방식으로 결정되거나 텍스트로 제공될 수 있다.||
|| A ||의미있는 순서: 순서가 콘텐츠의 의미부여에 영향을 미칠경우, 정확한 판독 순서가 프로그래밍 방식으로 결정될 수 있다.||
|| A ||감각적 특징: 콘텐츠을 이해하고 운용하기 위해 제공된 지침은 모양, 색상, 크기, 시각적 위치, 방향 또는 소리와 같은 컴포넌트의 감각적 특징에만 의존하지 않는다. ||
|| AA ||방향: 특정 디스플레이 방향이 필수가 아닌 이상, 콘텐츠는 세로나 가로 등 하나의 디스플레이 방향으로 제한되지 않는다.||
|| AA ||입력 목적 명시: 사용자에 관한 정보를 수집하는 각 입력 필드의 목적은 다음과 같은 경우에 프로그래밍 방식으로 결정될 수 있다.
-----
* 입력 필드는 사용자 인터페이스 컴포넌트의 입력 용도 섹션에서 명시된 용도로 제공된다.
* 콘텐츠는 입력 데이터에 대해 예상되는 의미를 식별할 수 있는 기술을 동원해 구현한다.||
|| AAA ||목적 명시: [[마크업 언어]]를 이용해 구현된 콘텐츠의 경우, 사용자 인터페이스 컴포넌트, 아이콘 그리고 영역은 프로그래밍 방식으로 결정될 수 있다.||
1.명료성: 배경과 전경을 분리하는 것을 포함해 사용자가 콘텐츠를 보고 듣기 용이하다.
|| 적합성 || 기준 ||
|| A ||[[색각 이상|색 사용]]: 색이 정보를 전달하거나, 행동을 나타내거나, 응답을 촉구하거나, 시각적 요소를 구별하는 유일한 용도로 쓰이지 않는다.||
|| A ||오디오 컨트롤: 만약 웹 페이지의 오디오가 3초 이상 자동 재생된다면, 그 오디오를 일시 정지 또는 중지하는 방법이 있거나, 또는 전체 시스템 볼륨 레벨과 독립적으로 그 오디오 볼륨만을 제어하는 방법을 제공한다.||
|| AA ||최소 대비: 텍스트나 텍스트의 형상을 한 이미지의 색 대비 비율은 최소 4.5:1으로 지키되, 아래에 나열된 상황은 예외로 한다.
-----
* 큰 텍스트[* 한국어 폰트 기준 최소 18 point 혹은 굵은 14 point [[https://www.w3.org/TR/WCAG21/#dfn-large-scale|#]]]: 큰 텍스트나 큰 텍스트의 형상을 한 이미지의 색 대비 비율은 최소 3:1로 한다.
* 부수적: 텍스트나 텍스트의 형상을 한 이미지가 비활성인 사용자 인터페이스 컴포넌트의 일부이거나, 순수한 장식 목적이거나, 비가시적이거나, 다른 중요한 시각적 내용이 포함된 그림의 일부인 경우는 색 대비가 제공 될 필요는 없다.
* 로고: 텍스트가 로고나 브랜드 이름의 일부라면 색 대비가 제공 될 필요는 없다.||
|| AA ||텍스트 크기 조정: 캡션과 텍스트 이미지를 제외한 모든 텍스트는 보조 기술에 의존하지 않아도 콘텐츠나 기능의 손상없이 2배까지 크기 조정이 가능하다.||
|| AA ||텍스트 이미지: 정보를 전달하는 목적으로 텍스트 이미지보다는 텍스트의 제공을 권장하되, 아래에 나열된 상황은 예외로 한다.
-----
* 맞춤 설정 가증: 텍스트 이미지는 사용자의 요구에 따라 맞춤 설정이 가능하다.
* 필수적: 텍스트의 특정 표현이 정보를 전달하는 데에 필수적이다.||
|| AAA ||향상된 대비: 텍스트나 텍스트의 형상을 한 이미지의 색 대비 비율은 최소 7:1으로 지키되, 아래에 나열된 상황은 예외로 한다.
-----
* 큰 텍스트: 큰 텍스트나 큰 텍스트의 형상을 한 이미지의 색 대비 비율은 최소 4.5:1로 한다.
* 부수적: 텍스트나 텍스트의 형상을 한 이미지가 비활성인 사용자 인터페이스 컴포넌트의 일부이거나, 순수한 장식 목적이거나, 비가시적이거나, 다른 중요한 시각적 내용이 포함된 그림의 일부인 경우는 색 대비가 제공 될 필요는 없다.
* 로고: 텍스트가 로고나 브랜드 이름의 일부라면 색 대비가 제공 될 필요는 없다.||
|| AAA ||배경 오디오가 작거나 없음: 사전 녹음된 오디오가 (1) 주로 연설을 전면적으로 내세우거나, (2) 음성 CAPTCHA 또는 음성 로고가 아니거나, (3) 노래하거나 랩하는 등의 음악적 표현을 목적으로 한 발성이 아닌 경우, 최소 다음 중 하나를 따른다.
-----
* 배경음 부재: 오디오가 배경음을 포함하지 않는다.
* 끄기 가능: 배경음을 끄는 것이 가능.
* 20데시벨(dB): 배경음은 주요 연설보다 최소 20데시벨 낮으며, 가끔 발생하는 1~2초 정도의 소리는 예외로 한다.||
|| AAA ||시각적 표현: 텍스트 블록을 시각적으로 표현하기 위하여, 아래에 나열된 방법들이 가능하다.
-----
* 전경과 배경의 색을 사용자가 선택할 수 있다.
* 가로 너비가 40자를 초과하지 않는다. (CJK 외의 경우는 80자)
* 텍스트에 [[양쪽 맞추기]] 정렬을 이용하지 않는다.
* 줄 간격 (선간)은 글자 높이의 최소 1.5배이며, 단락은 선간의 최소 1.5배이다.
* 텍스트는 보조 기술 없이도 두배까지 확대가 가능하며, 이는 전체 화면 창에서 가로 스크롤을 하지 않아도 가능하다.||
|| AAA ||텍스트 이미지 (예외 없음): 텍스트 이미지는 순수 장식 목적일 때, 또는 특정 표현이 정보를 전달하는 데 필수적일 때만 사용한다.||
|| AA ||리플로우: 다음과 같은 경우에 콘텐츠는 양 방향(수직과 수평)으로 스크롤 하지 않아도 정보나 기능의 상실 없이 표현되어야 한다. 2차원 레이아웃을 사용 혹은 뜻을 전달하는 데에 필수인 콘텐츠의 부분은 예외로 한다.
-----
* 320 CSS 픽셀과 동일한 높이의 수직 스크롤
* 256 CSS 픽셀과 동일한 너비의 수평 스크롤||
|| AA ||비 텍스트 대비: 아래에 나열된 요소들이 인접한 색들과 최소 3:1의 대비 비율을 가진다.
-----
* 사용자 인터페이스 컴포넌트: 사용자 인터페이스 컴포넌트를 명시하는 시각적 정보를 뜻하며, 비활성화 된 컴포넌트 혹은 사용자가 컴포넌트의 외형을 결정하는 경우는 제외한다.
* 그래픽 객체: 콘텐츠를 이해하기 위해 요구되는 그래픽 요소들을 뜻하며, 특정 표현이 정보를 전달하는 데 필수적일 경우는 제외한다.||
|| AA ||텍스트 간격: 아래에 서술되는 텍스트 스타일 요소들이 제공되는 마크업 언어를 통해 구현된 콘텐츠일 경우, 다음 스타일을 모두 설정하고 다른 스타일 속성을 변경하지 않아도 콘텐츠 또는 기능 손실이 없다. 예외로 언급된 속성이 이용되지 않는 언어 및 스크립트의 경우, 해당 언어 및 스크립트 조합에 존재하는 속성만 사용하는 방식으로 준수 가능.
-----
* 행간(줄 사이 간격)이 글자 높이의 1.5배 이상.
* 단락 간 간격이 글자 높이의 2배 이상.
* 자간(글자 사이 간격)이 글자 높이의 0.12배 이상.
* 어간(단어 사이 간격)이 글자 높이의 0.16배 이상.||
|| AA ||콘텐츠 호버 및 포커스: 포인터 호버나 키보드 포커스가 추가적인 콘텐츠를 드러내거나 숨기는데 쓰일 때, 아래 사항들이 적용된다. 단 사용자가 추가적인 콘텐츠의 시각적 표현을 제어하는 경우는 예외로 한다.
-----
* 해산 가능: 포인터 호버나 키보드 포커스를 이동하지 않고도 추가적 콘텐츠를 닫는 방법이 제공되며, 추가적인 콘텐츠가 입력 에러를 소통하거나 다른 콘텐츠를 모호하게하거나 대체하지 않는 경우는 제외로 한다.
* 호버 가능: 포인터 호버가 추가적인 콘텐츠를 트리거한 경우, 포인터가 그 추가적인 콘텐츠 위로 이동해도 콘텐츠가 사라지지 않는다.
* 지속성: 추가적인 콘텐츠는 호버 혹은 포커스가 제거되거나, 사용자가 해산시키거나, 정보가 더 이상 유효하지 않은 이상 지속된다.||
==== 운용 ====
사용자 인터페이스 컴포넌트 및 네비게이션은 반드시 운용이 가능해야 한다.
1.키보드 접근성: 오직 키보드만으로 모든 기능을 사용할 수 있다.
|| 적합성 || 기준 ||
|| A ||키보드: 콘텐츠의 모든 기능은 개별 키 스트로크의 정확한 타이밍 없이도 키보드로 운용할 수 있되, 기본 기능이 사용자의 이동 경로에 따른 입력을 요구하는 경우는 제외된다.||
|| A ||키보드 함정 없음: 보드 포커스가 페이지의 컴포넌트로 이동 가능한 경우, 키보드 인터페이스만을 이용하여 그 컴포넌트에서 멀어지는 것 또한 가능하며, 만약 그 행위가 기본 화살표, 탭 키, 또는 기타 표준 종료 방법 이상을 요구할 경우, 사용자는 포커스를 멀어지게 하는 방침을 제공받는다.||
|| AAA ||키보드 (예외 없음): 콘텐츠의 모든 기능은 개별 키 스트로크의 정확한 타이밍 없이도 키보드로 운용할 수 있다.||
|| A ||문자 단축키: 키보드 단축키가 문자 (대문자 및 소문자 포함), 문장 부호, 숫자 및 기호만 사용하여 콘텐츠에 구현 된 경우, 다음 중 하나 이상이 가능하다.
-----
* 기능 끄기: 단축키를 끌 수 있다.
* 재설정: 하나 이상의 비출력용 키 (예: Ctrl, Alt 등)를 이용한 재설정이 가능.
* 포커스에만 활성화: 포커스가 그 사용자 인터페이스 컴포넌트에 있는 경우만 해당 단축기가 활성화.||
1.충분한 시간: 사용자가 콘텐츠를 읽고 사용할 충분한 시간이 제공된다.
|| 적합성 || 기준 ||
|| A ||타이밍 조정 가능: 콘텐츠의 각 시간 제한이 있을 경우, 다음 중 하나 이상이 해당된다.
-----
* 끄기: 사용자는 시간 제한이 작동하기 전 그것을 끄는 것이 가능하다.
* 조정: 사용자는 시간 제한이 작동하기 전 그것을 기본 설정 길이의 10배 이상인 넓은 범위에서 조정 하는 것이 가능하다.
* 연장: 사용자는 시간 제한이 만료되기 전 그에 대한 경고를 받으며, 간단한 액션(예를 들어, "스페이스 바를 누르기")를 통해 시간 제한을 연장할 수 있는 최소 20초의 기간을 가진다.
* 실시간 예외: 시간 제한은 실사 이벤트(예를 들어, 경매와 같은)에 있어 필수적이며, 시간 제한에 대한 다른 대안이 전무하다.
* 필수적 예외: 시간 제한이 필수적이며 연장하는 것은 활동을 무효화한다.
* 20시간 예외: 시간 제한이 20시간을 초과한다.||
|| A ||일시정지, 중지, 숨기기: 움직이거나, 깜빡이거나, 스크롤 가능하거나, 자동 업데이트되는 정보의 경우, 다음 사항이 모두 요구된다.
-----
* 움직임, 깜빡임, 스크롤링: 적용된 정보가 (1) 자동으로 시작되거나 (2) 5초 이상 지속되거나 (3) 다른 콘텐츠와 동시에 표시되는 경우, 사용자가 그것을 일시정지, 중지, 혹은 숨기는 것이 가능하다.
* 자동 업데이트: 적용된 정보가 (1) 자동으로 시작되거나 (2) 다른 콘텐츠와 동시 표시되는 경우, 사용자가 그것을 일시정지, 중지, 혹은 숨기는 것이 가능하거나, 자동 업데이트가 필수적이 아닌 이상 빈도를 조절하는 것이 가능하다.||
|| AAA ||타이밍 없음: 콘텐츠에 표시된 이벤트나 활동을 위해 타이밍이 필수적인 부분이 아니되, 비-대화형 동기화 미디어와 실시간 이벤트는 예외로 한다.||
|| AAA ||중단: 중단은 사용자에 의해 연기되거나 억제 될 수 있으며, 긴급 상황은 예외로 한다.||
|| AAA ||재인증: 인증 과정이 만료 된 경우, 사용자는 재인증 후 데이터 손상 없이 활동을 지속 할 수 있다.||
|| AAA ||타임아웃: 사용자는 데이터 손상을 초래할 수 있는 비활동 기간에 대해 경고를 받되, 사용자가 아무런 활동을 하지 않아도 데이터가 20시간 이상 보존되는 경우는 예외로 한다.||
1.발작과 신체 반응: [[닌텐도 증후군|사용자가 발작]] 및 신체적 반응을 일으킬 가능성이 있는 방법으로 콘텐츠를 제작하지 않는다.
|| 적합성 || 기준 ||
|| A ||3회 또는 임계 값 미만의 깜빡임: 초당 3회 이상 깜빡거리는 내용을 포함하지 않으며, 혹은 그 깜빡임이 일반 및 적색 플래시 임계 값보다 낮다.||
|| AAA ||3회의 깜빡임: 초당 3회 이상 깜빡이는 내용을 포함하지 않는다.||
|| AAA ||인터랙션 애니메이션: 인터랙션으로 인해 일어나는 모션 애니메이션의 비활성화가 가능하되, 애니메이션이 기능이나 정보를 전달하는 데 필수적인 경우는 예외로 한다.||
1.탐색 가능성: 사용자가 탐색하고, 필요한 내용을 찾고, 지금 어느 부분을 보고 있는 것인지 알 수 있다.
|| 적합성 || 기준 ||
|| A ||블록 우회 가능함: 여러 웹 페이지에서 반복되는 콘텐츠 블록을 우회하는 방법이 제공된다.||
|| A ||페이지 제목: 웹 페이지는 주제나 목적을 설명하는 제목이 있다.||
|| A ||포커스 순서: 만약 웹 페이지가 순차적으로 탐색 가능하고 탐색 순차가 의미나 운용에 영향을 주는 경우, 포커스가 가능한 컴포넌트는 의미와 운용성을 보존하는 순서대로 포커스를 받는다.||
|| A ||링크 목적 (문맥): 링크 텍스트만으로 혹은 프로그래밍적으로 결정된 링크 문맥과 함께 링크의 목적을 실별 할 방벅을 제공하되, 그 링크의 목적이 일반적으로 사용자들에게 모호한 경우는 제외로 한다.||
|| AA ||다양한 방법: 일련의 웹 페이지 내에서 웹 페이지를 찾는 방법을 여러가지로 제공하되, 그 웹 페이지가 과정의 결과 또는 단계인 경우는 예외로 한다.||
|| AA ||제목 및 레이블: 제목과 레이블은 주제나 목적을 설명한다.||
|| AA ||포커스 표시: 키보드로 운용이 가능한 사용자 인터페이스는 키포드 포커스 상태가 표시되는 작동 모드가 있다.||
|| AAA ||위치: 일련의 웹 페이지 내에서 사용자 위치에 대한 정보가 제공된다.||
|| AAA ||링크 목적 (단독): 링크 텍스트만으로 링크의 목적을 식별 할 방법을 제공하되, 그 링크의 목적이 일반적으로 사용자들에게 모호한 경우는 제외로 한다.||
|| AAA ||섹션 제목: 섹션 제목은 내용을 구성하는 데 사용된다.||
1.입력 방식: 키보드 이외에 다양한 입력 방법을 제공하여 사용자가 기능을 사용하기 쉽게 한다.
|| 적합성 || 기준 ||
|| A ||포인터 제스쳐: 다중 포인트 또는 경로 기반 제스쳐를 사용하는 모든 기능은 경로 기반 제스처 없이 단일 포인터로 작동 가능하되, 다중 포인트나 경로 기반 제스쳐가 필수적인 경우는 제외로 한다.||
|| A ||포인터 취소: 단일 포인터를 이용해 운용 가능한 기능은 다음 중 하나 이상이 해당된다.
-----
* Down 이벤트 사용 없음: 포인터의 Down 이벤트는 기능의 부분을 실행하는 데 사용되지 않는다.
* 중단 또는 실행 취소: 기능의 완료는 Up 이벤트를 따르며, 기능을 완료 전 중단하거나 완료 후 실행 취소를 하는 방법이 제공된다.
* Up 반전: Up 이벤트는 모든 Down 이벤트의 결과를 반전시킨다.
* 필수적: Down 이벤트에서 기능을 완료하는 것이 필수적이다.||
|| A ||명칭 레이블: 텍스트 또는 텍스트 이미지를 포함하는 레이블이 된 사용자 인터페이스 컴포넌트의 경우, 그 명칭은 시각적으로 표시되는 텍스트가 포함한다.||
|| A ||모션 작동: 기기 모션 혹은 사용자 모션으로 운용이 가능한 기능은 사용자 인터페이스 컴포넌트를 통해서도 운용이 가능하며, 또한 우발적인 작동을 방지하기 위해 모션 반응의 비활성화가 가능하되, 다음은 예외로 한다.
-----
* 지원용 인터페이스: 모션이 접근성 지원 인터페이스를 통해 기능을 운용하는 데 사용된다.
* 필수적: 모션이 기능에 필수적이며 다른 방법으로는 활동이 무효화된다.||
|| AAA ||대상 크기: 포인터 입력 대상의 크기는 최소 44×44 CSS 픽셀이며, 다음은 예외로 한다.
-----
* 동일함: 같은 페이지에서 최소 44×44 CSS 픽셀인 동일한 링크 또는 제어 방법이 존재한다.
* 인라인: 대상이 문장이나 텍스트 블록에 포함되어 있다.
* 사용자 에이전트 제어: 대상의 크기는 사용자 에이전트에 의해 결정되며 개발자에 의해 조정되지 않는다.
* 필수적: 대상의 특정 표현이 정보 전달에 있어 필수적이다.||
|| AAA ||동시 입력 가능: 웹 콘텐츠는 플랫폼에서 사용 가능한 입력 양식들의 사용을 제한하지 않되, 제한이 필수적이거나 콘텐츠의 보안 및 사용자 설정의 존중을 위해 요구되는 경우는 제외로 한다.||
==== 이해 ====
사용자 인터페이스의 정보와 운용은 이해할 수 있도록 제공되어야 한다.
1.가독성: 텍스트로 이루어진 콘텐츠는 읽고 이해하기 쉬워야 한다.
|| 적합성 || 기준 ||
|| A ||웹 페이지 언어: 각 웹 페이지의 기본 언어는 프로그래밍 방식으로 결정될 수 있다.||
|| AA ||부분적 언어: 콘텐츠의 각 구절 또는 문구를 이루는 언어는 프로그래밍 방식으로 결정될 수 있되, 적절한 이름, 기술적 용어, 불확실한 언어로 이루어진 단어, 그리고 주변에 있는 텍스트의 고유어가 되는 단어 및 문구는 예외로 한다.||
|| AAA ||비일상적 단어: 비일상적이거나 제한적인 방식으로 쓰이는 단어 및 문구의 정의를 확인할 수 있는 방법을 제공한다.||
|| AAA ||약어: 약어의 확장된 형태, 또는 뜻을 확인할 수 있는 방법을 제공한다.||
|| AAA ||독해 수준: 적절한 이름과 제목을 제외하고도 텍스트가 중등 교육 수준보다 높은 독해 능력을 요구하는 경우, 보충 콘텐츠 혹은 중등 교육 수준보다 높은 독해 능력을 요구하지 않는 버전이 제공된다.||
|| AAA ||발음: 문맥상 발음을 모를 시 단어의 의미가 모호한 경우, 특정 발음을 식별하기 위한 방법을 제공한다.||
1.예측성: 웹 페이지가 사용자가 예측할 수 있는 방향으로 보이고 작동하도록 만들어야 한다.
|| 적합성 || 기준 ||
|| A ||포커스: 사용자 인터페이스 컴포넌트가 포커스를 받으면 컨텍스트 변경이 작동하지 않는다.||
|| A ||입력: 사용자 인터페이스 컴포넌트의 설정을 변경해도 그 컴포넌트 사용 전 사용자에게 동작에 대한 조언이 없으면 자동으로 변경되지 않는다.||
|| AA ||일관적인 네비게이션: 일련의 웹 페이지 내 다수의 페이지에서 반복되는 탐색 방법은 매번 동일한 상대적 순서로 발생하되, 사용자가 변경을 작동시킨 경우는 제외한다.||
|| AA ||일관적인 식별: 일련의 웹 페이지 내에서 동일한 기능을 가진 컴포넌트는 일관되게 식별된다.||
|| AAA ||변경 요청: 컨텍스트 변경은 사용자 요청에 의해서만 시작되거나 이러한 변경을 해제하는 방법을 제공한다.||
1.입력 도움: 사용자가 실수를 피할 수 있도록, 그리고 고칠 수 있도록 돕는다.
|| 적합성 || 기준 ||
|| A ||오류 식별: 입력 오류를 자동으로 감지하는 경우, 오류가 발생한 항목이 식별되며 그 오류를 사용자에게 텍스트로 설명한다.||
|| A ||레이블 및 지침: 콘텐츠가 사용자 입력을 요구하는 경우, 레이블이나 지침이 제공된다.||
|| AA ||오류 제안: 입력 오류가 자동으로 감지되고 수정 제안이 정의 된 경우, 사용자에게 그 제안을 제공하되, 그 제안이 컨텐츠의 보안 또는 목적을 무력화하는 경우는 제외한다.||
|| AA ||오류 예방 (법률, 재무, 데이터): 사용자에 대한 법적 책임 또는 금융 거래를 발생시키거나, 데이터 저장 시스템에서 사용자 제어 가능한 데이터를 수정 또는 삭제하거나, 또는 사용자 테스트 응답을 제출하는 웹 페이지의 경우, 다음 중 하나 이상이 가능하다.
-----
* 되돌리기: 제출은 되돌리는 것이 가능하다.
* 검토: 사용자가 입력한 데이터에 입력 오류가 있는지 검토하고 수정할 수 있는 기회가 제공된다.
* 확인: 제출을 완료하기 전에 정보를 복습, 확인, 수정하기 위한 방법이 제공된다.||
|| AAA ||도움: 콘텐츠 맞춤 도움이 제공된다.||
|| AAA ||오류 예방 (공통): 사용자에게 정보 제출을 요구하는 웹 페이지의 경우, 다음 중 하나 이상이 가능하다.
-----
* 되돌리기: 제출은 되돌리는 것이 가능하다.
* 검토: 사용자가 입력한 데이터에 입력 오류가 있는지 검토하고 수정할 수 있는 기회가 제공된다.
* 확인: 제출을 완료하기 전에 정보를 복습, 확인, 수정하기 위한 방법이 제공된다.||
==== 견고 ====
콘텐츠는 보조 기술을 포한한 다양한 사용자 에이전트로 해석될 수 있을만큼 견고하다.
1.호환성: 보조 기술을 포함한 현재 및 미래의 사용자 에이전트와의 호환성을 최대화 한다.
|| 적합성 || 기준 ||
|| A ||파싱: 마크업 언어를 통해 구현된 콘텐츠의 경우, 각 요소는 완전한 시작 및 종료 태그를 가지고, 해딩 규격에 따라 중첩되며, 중복된 속성을 가지지 않는다. 또한 모든 {{{id}}}는 고유하되, 그 규격에서 이러한 기능을 허용하는 경우는 예외로 한다.||
|| A ||이름, 역할, 값: (스크립트에 의해 생성된 양식 요소, 링크 및 컴포넌트를 포함하되 이에 국한되지 않은) 모든 사용자 인터페이스 컴포넌트는 이름({{{name}}})과 역할({{{role}}})이 프로그래밍 방식으로 결정될 수 있다; 사용자가 설정 가능한 상태({{{states}}}), 속성({{{properties}}}), 값({{{value}}}) 또한 프로그래밍 방식으로 결정될 수 있다; 그리고 이러한 항목에 대한 변경 알림이 보조 기술을 포함한 사용자 에이전트에 제공된다.||
|| AA ||상태 메세지: 마크업 언어를 통해 구현된 콘텐츠의 경우, 상태 메세지는 포커스 상태가 아니여도 보조 기술에 의해 사용자에게 제공되는 방식의 역할 또는 속성을 통한 프로그래밍 방식으로 결정될 수 있다.||
== 한국에서 ==
한국에서는 정부부터 웹 표준을 무시한다. 민간 기업들은 거의 대부분 웹 표준을 따라가거나 따라가려고 노력하고 있으나 아쉬울 것이 없는 정부24 등의 정부기관에서는 아직도 Internet Explorer를 사용해야 정상적인 프린트가 되는 등 표준을 지키려는 의지 자체가 없다.
=== 웹 표준을 안 지키는 국내 사이트 목록 ===
보다 자세한 내용은 [[Windows 10/호환성]]의 '인터넷 뱅킹' 항목 문서를 참고할 것.
* 안전 Dream 아동, 여성, 장애인 경찰지원센터 - [[http://www.safe182.go.kr/index.do|신고 메뉴로 갈 경우, ActiveX 플러그인 설치를 하지 않는한 해당 컨텐츠로 진입 할 수 없다.]]
* [[네이버]], [[다음]] 등의 국내 포탈사이트 - 여러 서비스들이 각종 [[Active X]]를 요구'''했었'''다. 그나마 2010년대 들어 스마트폰이 보급되자 지속적으로 걷어내서 2023년 현재는 거의 없어졌다고 보면 된다.
* '''[[국민은행]], [[하나은행]]을 제외한 인터넷 뱅킹 사이트 전부''' - 액티브X가 작동되지 않거나 설치가 안 되면 서비스진입이 아예 불가능하다!. [[오픈인터넷뱅킹]]이 있어서 다행이지만 그거는 일부 은행만 이용이 가능하다는 것이 문제이고, 요즘은 스마트폰이 엄청나게 보급돼서 스마트 뱅킹이 있어서 이걸 이용하면 우회가 가능하다. 그리고 스마트 뱅킹을 이용하려면 공인인증서를 폰에 저장시켜야 한다! 결국 오픈인터넷뱅킹 외에는 무조건 윈도우를 써야 한다. 하나은행은 논엑티브X 프로그램을 설치해야 한다. 그 중 가장 악질은 다름아닌 [[AhnLab Safe Transaction]].
* '''전자민원 사이트 전부''' - 이유는 위의 인터넷뱅킹 사이트하고 똑같다. 뱅킹은 오픈뱅인터넷뱅킹, 스마트뱅킹이라도 이용하면 그나마 우회하면 되지만, 이거는 이용하려면 [[공인인증서]], PC 사용이 강제된다. 현재는 [[정부24]]를 이용하면 대부분 플랫폼에서 제한없이 이용가능하다.
* '''전자상거래 일부''' - 액티브X 기반으로 나타나는 결제창 때문에 문제이다. 무통장 입금방법을 제외하고는 일반적으로 PG사의 결제창(KG이니시스, LGU+ 등)을 써야 하기 때문이다. 그나마 스마트폰이 활성화되면서 웹 표준을 준수하는 결제창이 개발이 되었지만, 여전히 구형 액티브X 기반 결제창을 쓰는 곳이 많으며, 모바일은 결제앱을 따로 깔아야 한다.
== 테스트 ==
[[Acid 테스트]]를 통해서 [[웹 브라우저]]가 웹 표준을 준수하는지 테스트할 수 있다. [[http://www.w3.org/standards/about|W3C 웹 표준 설명 페이지]]
== 관련 문서 ==
* [[오픈인터넷뱅킹]]
* [[오픈웹 쇼핑몰]]
* [[기관기업 웹호환성]]
[[분류:웹 표준]] 
}}}
위와 같이 메뉴 버튼을 두 가지 방식으로 구현할 수 있다. 윗줄은 {{{