# WCAG

39개의 포스트
post-thumbnail

웹 접근성

웹 표준을 설명하는 포스트에서 웹 표준을 지키기 위한 노력 중 하나로 웹 접근성(Web Accessibility)를 지키자라고 언급했었습니다. 그러면 웹 접근성이 무엇이고 어떻게 해야지킬 수 있는지 알아보도록 하겠습니다. 웹 접근성 웹 접근성은 하드웨어, 소프트웨어, 언어, 장소, 능력, 장애에 상관없이 모든 사람들이 모든 웹 공간을 자유롭게 사용할 수 있도록 웹 사이트를 설계/기획/개발하는 것을 의미합니다. 그렇기에 모든 웹 개발자는 이러한 웹 접근성을 항상 염두에 두고 개발에 참여해야합니다. >누구든지(일반인, 장애인, 고령자, 어린이) 언제 어디서든 어떤 기기(PC, 태블릿, 스마트폰, 스마

2023년 9월 7일
·
0개의 댓글
·

WCAG 4가지 원칙

인식의 용이성: 사용자가 하나 또는 다수의 감각을 사용해 어떤 방식으로든 인지할 수 있어야 한다. 운용의 용이성: 사용자가 UI 요소들을 컨트롤 할 수 있어야 한다.예를 들어, 버튼은 마우스, 키보드, 음성 명령 등의 방식으로 클릭이 가능해야 한다. 이해의 용이성: 사용자가 콘텐츠를 이해할 수 있어야 한다. 견고성: 콘텐츠는 각기 다른 브라우저에서 현재와 미래에 모두 동작할 수 있게 널리 알려진 웹 표준을 준수해 개발돼야 한다. 이 중 하나라도 지키지 않으면 장애가 있는 사용자는 웹을 사용할 수 없다.

2023년 9월 5일
·
0개의 댓글
·
post-thumbnail

사례로 보는 WCAG, 운용의 용이성

💡 프론트엔드와 웹 접근성  웹 개발을 공부하다 보면, 한 번쯤 접하게 되는 단어가 바로 '접근성'일 것이다. 접근성을 준수하면 좋다는 건 암묵적으로 알겠는데, 왜 준수해야 하는지 생각해보면 구체적으로 답변하기 어려운 것 같다. 이와 관련하여 예전에 준비했던 발표가 있어서, 제작한 발표 자료를 바탕으로 웹 접근성에 대해 살펴보고자 한다. 구체적으로는 WCAG 중에서도 담당했던 '운용의 용이성' 부분에 초점을 맞춰볼 예정이다. 🤔 Why, 웹 접근성?  이전 글에서도 잠깐 웹 접근성에 대해 언급한 적이 있는데, 먼저 웹 접근성을 준수해야 하는 이유에 대해 간략하게 짚고 넘어가면 위와 같다. 웹의 창시자인 팀 버너스 리에 의하면 웹은 **"장애에 구애 없이

2023년 5월 28일
·
0개의 댓글
·
post-thumbnail

웹 접근성이란 무엇인가? 웹 접근성 표준이 뭐야? (WCAG)

_**웹의 힘은 보편성에 있습니다. 장애에 상관없이 모두가 접근할 수 있다는 것이 가장 중요한 부분입니다.**_ -팀 버너스리, W3C 디렉터 및 Wrold Wide Web의 창시자 동기가 OS를 주제로 발표를 했다! 그리고 간단하게 맥주한잔을 다같이 했는데(소주였으면 잤다 ㅎㅎ) , 웹접근성이야기가 나왔다. 흥미가 생겨서 원래 하려던 OS말고 웹접근성을 찾아보았다. 웹접근성을 검색하면 많은 자료가 나오지만, 구체적으로 지침이 어떤것인지 등에 대한것은 잘 나와있지 않다. 보통 대체 텍스트, 음성, 키보드 입력등 정도의 이야기를 한다. 웹접근성이란 "웹 접근성은 웹 사이트, 도구, 기술이 장애를 가진 사용자들이 사용할 수 있도록 설계 및 개발된 것을 말합니다." 라고 W3C(World Wid

2022년 9월 30일
·
0개의 댓글
·

WCAG 2.1 정리

👀 WCAG? > - WCAG는 Web Content Accessibility Guideline의 줄임말로 웹 콘텐츠를 접근성 있게 만들기 위한 권장 표준 이 표준을 준수함을 통해 시각, 청각, 운동장애 등 광범위한 장애에 대한 접근성 있는 콘텐츠를 만들 수 있음 웹 접근성의 기초를 제공하는 4가지 원칙인 인식의 용이성(Perceivable), 운용의 용이성(Operable), 이해의 용이성(Understandable), 견고성(Robust)에 기반을 두고 있음 원칙을 기반으로 접근성을 위해 어떠한 목표를 달성해야 하는지에 대한 지침과 또 그 지침에 대한 검증가능한 성공기준을 제시하고 있음 성공기준은 최저수준인 level A 부터 최고수준인 level AAA까지 3단계로 나누어짐 WCAG 2.0 VS WCAG 2.1 WCAG 2.0 이 만들어졌을때는 주로 데스크탑 환경만을 고려했지만 그 후 모바일 산업의 폭발적인 확장으로 모바일 환경을 필수적으로

2022년 9월 5일
·
0개의 댓글
·
post-thumbnail

웹 접근성 진단 도구

🏹 Colour Contrast Analyser (CCA) 전경색과 배경색의 명도 대비를 체크해주는 프로그램 프로그램 설치 페이지 🔗 설치 바로가기 : https://www.tpgi.com/color-contrast-checker/ 프로그램 실행 화면 명암비가 최소 3:1 이상이 되도록 구현 ![](https://velog.velcdn.

2022년 8월 23일
·
2개의 댓글
·
post-thumbnail

웹 애플리케이션 접근성 준수

콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다. 웹 애플리케이션이란 웹 콘텐츠에 포함되어 특정한 기능을 수행하도록 구성된 소프트웨어의 일종으로, 리치 인터넷 애플리케이션(RIA : Rich Internet Application)이라고도 한다. 즉, 웹 애플리케이션을 사용할 수 있도록 접근 가능하도록 구현해야 한다. 따라서 웹 애플리케이션에 대한 접근성 프로그래밍 인터페이스 사용을 지원하거나, 대체 수단을 제공하거나 보조 기술을 지원해야 한다. 예를 들어, 접근성이 어려운 플래시(Flash)의 경우 HTML 버전을 선택할 수 있는 대체 수단이나 대체 텍스트를 제공해야 한다.

2022년 8월 23일
·
0개의 댓글
·
post-thumbnail

마크업 오류 방지

**_마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다._** 오류가 없도록 마크업 문서를 구성하면 웹 브라우저나 보조 기술이 작동을 멈추지 않고 콘텐츠를 명확히 전달할 수 있으며, 콘텐츠의 일부 기능이 누락되는 것을 방지할 수 있다. 🏹 요소의 열고 닫음 마크업 언어로 작성된 콘텐츠는 표준에서 특별히 정한 경우를 제외하고는 단일 태그가 아니라면 시작 요소와 끝나는 요소가 정의되어야 한다. > * 오류 사례 🏹 요소의 중첩 시작 요소와 끝나는 요소의 나열 순서는 포함 관계가 어긋나지 않아야 한다. > * 오류 사례 🏹 중복된 속성 사용 하나의 요소 안에서 속성을 중복하여 선언하지 않아야 한다. > * 오류 사례 🏹 id 속성 값 중복 페이지 내 id 값이 중복 선언되지 않도록 제공해야 한다. 레이블과 매칭된 서식의 id가 중복된 경우

2022년 8월 23일
·
0개의 댓글
·
post-thumbnail

오류 정정

입력 오류를 정정할 수 있는 방법을 제공해야 한다. 입력 서식 작성 시 사용자의 실수로 오류가 발생할 경우 이를 정정할 수 있는 방법을 제공해야 한다. 🏹 오류 사례 입력 서식 작성 시 오류가 발생하여 입력 내용이 모두 사라지는 경우 오류이다. 🏹 준수 사례 작성된 내용이 삭제되지 않고 오류가 있는 부분만 수정할 수 있도록 제공해야 하며, 사용자에게 오류가 발생한 원인을 알려주어야 한다. 또한 오류가 발생한 입력 서식으로 초점이 이동해야 한다.

2022년 8월 23일
·
0개의 댓글
·
post-thumbnail

레이블 제공

사용자 입력에는 대응하는 레이블을 제공해야 한다. 레이블이란 모든 사용자 입력의 용도 또는 역할에 대한 설명을 말한다. 옷에도 라벨이 있듯, 입력 서식에도 레이블을 제공해야 한다. 🏹 레이블이 시각적으로 노출되어 있는 경우 청각으로 웹을 인식하는 사용자는 입력 서식에 초점이 갔을 때 스크린 리더가 "편집창" 이라고만 읽어주기 때문에 아이디를 입력해야 하는지, 비밀번호를 입력해야 하는지 알 수 없다. > * 레이블과 입력 서식이 1:1 매칭인 경우 label for 속성 값과 input id 속성 값을 동일하게 제공 > * 레이블과 선택 서식이 1:1 매칭인 경우 ![](https://velog.velcdn.com/images/layssingcar

2022년 8월 23일
·
0개의 댓글
·
post-thumbnail

표의 구성

표는 이해하기 쉽게 구성해야 한다. 🏹 데이터 표 스크린 리더가 마크업에 따라 표를 읽어주기 때문에 표의 내용, 구조 등을 이해할 수 있게 제목 셀은 `로, 데이터 셀은 `로 구분해야 한다. 또한 제목 셀이 가로, 세로로 있는 경우 th 태그의 scope 속성으로 행 제목인지 열 제목인지 구분 가능하도록 제공해야 한다. 표의 제목과 요약 정보는 동일하지 않도록 제공해야 하며, 요약 정보를 제공하기 어려운 경우에는 제목 셀을 나열하는 방식으로 제공하면 된다. > ![](https://velog.velcdn.com/image

2022년 8월 22일
·
0개의 댓글
·
post-thumbnail

콘텐츠의 선형 구조

콘텐츠는 논리적인 순서로 제공해야 한다. 웹 페이지를 구성하는 모든 콘텐츠는 사용자가 내용을 이해할 수 있도록 선형 구조로 작성되어야 한다. 🏹 탭 제목-내용 콘텐츠 탭 메뉴가 나열되어 있고 탭에 대한 내용이 있는 경우 시각적으로는 클릭하면 해당 내용이 보이기 때문에 쉽게 인식할 수 있다. 하지만 스크린 리더 사용자는 메뉴와 내용을 따로 마크업하는 경우 메뉴를 다 읽어주고 나서야 내용을 읽어주기 때문에 어떤 메뉴에 대한 내용인지 인식할 수 없다. > 메뉴 → 내용 → 메뉴 → 내용 순으로 마크업 **메뉴끼리 내용끼리 마크업하되, <span style='bac

2022년 8월 9일
·
0개의 댓글
·
post-thumbnail

사용자 요구에 따른 실행

**_사용자가 의도하지 않은 기능 (새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 한다._** 🏹 페이지 진입 시 뜨는 새 창 (팝업) 사용자가 예측할 수 없는 상황에서 페이지 진입 시 새 창을 제공하지 않아야 한다. 🏹 화면을 가리는 레이어 팝업 요즘은 새 창 팝업 대신 레이어 팝업으로 변경되고 있다. 화면을 가리는 레이어 팝업을 제공하지 않아야 하며, 반복 영역 건너뛰기보다 먼저 팝업을 제어할 수 있도록 구현하거나 화면을 가리지 않고 최상단에 레이어 팝업을 제공해야 한다. ![](https://velog.velcdn.com/images/layssingcar/post/4d848855-dccf-44c8-a191-2dcf8bdef281/image.pn

2022년 8월 8일
·
0개의 댓글
·
post-thumbnail

기본 언어 표시

주로 사용하는 언어를 명시해야 한다. 웹 브라우저는 웹 페이지를 구성하는 텍스트 콘텐츠의 언어 정보를 바탕으로 텍스트 콘텐츠를 화면에 표시하거나 보조 기술로 전달한다. 언어를 명시하면 자동 언어 전환을 지원하는 스크린 리더의 경우 선언된 언어로 전환하여 읽어주므로, 웹 페이지의 기본 언어는 정확히 정의해야 한다. 🏹 기본 언어 표시 기본 언어 표시는 HTML 태그에 lang 속성을 사용하여 ISO639-1 에서 지정한 두 글자로 된 언어 코드로 제공해주면 된다. 기본 언어를 설정해둔 상태에서 중간에 다른 언어가 존재한다면 해당 영역에만 lang 속성으로 적절한 언어를 제공해주면 된다. ![]

2022년 8월 8일
·
0개의 댓글
·
post-thumbnail

적절한 링크 텍스트

링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다. 🏹 빈 링크 링크 텍스트를 제공하지 않아 빈 링크가 존재하는 경우 스크린 리더 사용자는 무슨 링크인지 알 수 없으며, 링크가 크기를 갖지 않는 이상 키보드 사용자는 어디에 초점이 갔는지 알 수 없다. 따라서 다음과 같이 의미 없는 빈 링크는 제거해야 한다. 🏹 독립적 이미지 링크 이미지를 독립적 링크로 제공하는 경우 링크 텍스트는 이미지의 대체 텍스트이기 때문에 이미지의 alt 속성 값이 잘못 제공되거나 빈 값으로 제공되지 않아야 한다. 이미지 요소 > 링크에 의미 있는 배경 이미지를 적용한 경우에도 이미지 대체 텍스트이자 링크 텍스트를 적절하게 제공해야 한다. 배경 이미지 > 🏹 썸네일 링크 썸네일 이미지와 텍스트를 각각 링크로 구현하는 경우 이미지의 대체 텍스트와 링크 텍스트가 중복되기 때문에

2022년 8월 8일
·
0개의 댓글
·
post-thumbnail

제목 제공

페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다. 🏹 페이지 제목 제공 스크린 리더 사용자는 제목이 전부 똑같이 제공되어 있거나 내용과 다르게 제공되어 있으면 인식하기 힘들다. 따라서 웹 페이지의 제목은 유일하고 서로 다르게 제공해야 한다. 페이지 제목은 해당 내용을 이해할 수 있도록 제일 하위 분류로 제공해야 한다. 🏹 프레임 제목 제공 웹 페이지를 구성하는 모든 프레임에 제목을 제공하면 시각 장애인, 지적 장애인, 중증 지체 장애인 등의 사용자가 프레임 간을 매우 편리하게 이동할 수 있다. 프레임이나 아이프레임에도 각 프레임을 설명하는 간단명료한 제목을 제공해야 한다. 광고를 iframe으로 제공한 경우 iframe의 tit

2022년 8월 7일
·
0개의 댓글
·
post-thumbnail

반복 영역 건너뛰기

콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다. 스크린 리더 사용자는 페이지가 로드되거나 갱신될 때마다 반복 영역을 다시 듣게 되므로, 반복되는 영역을 건너뛸 수 있는 기능을 제공해야 한다. 🏹 반복 영역 건너뛰기 제공 방법 > 마크업상 최상단에 위치 건너뛰기 링크가 페이지 내에 존재 키보드 접근 시 화면에 노출 &nbsp;&nbsp; 🔎 여러 개의 건너뛰기 링크를 제공하는 경우에는 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 본문으로 이동하기 위한 건너뛰기 링크를 가장 먼저 나타낸다.

2022년 8월 7일
·
0개의 댓글
·
post-thumbnail

깜빡임과 번쩍임 사용 제한

**_초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다._** 🏹 포켓몬 쇼크 1997년 12월 16일 일본에서 방영하던 포켓몬스터 무인편 제 38화 '전뇌전사 폴리곤'의 후반부에서 빨간 빛과 파란 빛이 매우 빠른 속도로 번쩍거리는 점멸 이펙트를 해당 에피소드에 전체적으로 사용하면서 당시 시청 중이던 750여 명의 아이들이 구토 증세를 보이거나 어지럼증을 호소하였으며, 심한 경우에는 경련을 일으키거나 의식 상실, 호흡 장애 등을 겪는 등 각종 광과민성 발작 현상을 일으킨 사건이다. 광과민성 발작이란 오랜 시간 불규칙적으로 깜빡거리는 광과에 자극받아 생기는 간질 발작이다. 이 사건으로 포켓몬스터 애니메이션은 「가장 많은 사람들에게 발작을 일으킨 TV

2022년 8월 7일
·
0개의 댓글
·
post-thumbnail

정지 기능 제공

자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다. 웹 콘텐츠는 스크롤 및 자동 갱신되는 콘텐츠를 장애인 사용자가 이용할 수 있도록 일시 정지할 수 있는 수단을 제공해야 한다. 🏹 자동 변경 슬라이드 스크롤 및 자동 갱신되는 콘텐츠는 사용하지 않는 것이 좋으며 사용 시에는 이전, 다음, 정지 기능을 제공해야 한다. 만약 정지 버튼이 없더라도 마우스 오버 시와 키보드 접근 시에 정지되도록 구현하면 정지 기능을 제공한 것으로 인정된다. 🏹 자동 변경 콘텐츠 실시간 검색어처럼 자동 변경되는 콘텐츠에는 이전, 다음, 정지 기능을 제공하거나 마우스 오버 시와 키보드 접근 시 전체 콘텐츠를 제공해야 한다. 스크롤 및 자동 갱신되는 콘텐츠는 사

2022년 8월 6일
·
0개의 댓글
·
post-thumbnail

응답 시간 조절

시간 제한이 있는 콘텐츠는 응답 시간을 조절할 수 있어야 한다. 시간제한이 있더라도 온라인 경매, 실시간 게임 등과 같이 반응 시간의 조절이 원천적으로 허용되지 않는 경우에는 적용되지 않는다. 다만, 이 경우에도 사용자에게 시간 제한이 있다는 것을 미리 알려주고, 종료되었을 경우에도 알려주어야 한다. 세션 시간이 20시간 이상인 콘텐츠는 예외로 간주한다. 🏹 시간 연장이 불가능한 콘텐츠 시간 제한이 있는 콘텐츠는 가급적 포함하지 않는 것이 바람직하며, 보안 등의 사유로 시간 제한이 반드시 필요할 경우에는 종료 시간을 안내하고, 이를 회피할 수 있는 수단을 제공해야 한다. 아무런 공지 없이 자동으로 로그아웃 되거나, 종료 시간을 공지하고 있지만 수단을 제공하지 않으면 오류이다. 반응 시간이 완료되

2022년 8월 6일
·
0개의 댓글
·