Front-end

🥑 Colour Contrast Analyser (CCA) 전경색과 배경색의 명도 대비를 체크해주는 프로그램 1) 프로그램 설치 페이지 ˙ 설치 바로가기 : Colour Contrast Analyzer - TPGi Colour Contrast Analyzer - TPGi TPGi's ADA Color Contrast Checker helps determine the accessibility of the contrast ratio of two colors for WCAG AA and AAA. www.tpgi.com 2) 프로그램 실행 화면 ˙명암비가 최소 3:1 이상이 되도록 구현 🥑 KWCAG a11y inspector 컨트롤의 대각선 길이를 측정해주는 프로그램 1) 확장 프로그램 추가 페이지 ˙ 바로가..

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

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

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

사용자 입력에는 대응하는 레이블을 제공해야 한다. 레이블이란 모든 사용자 입력의 용도 또는 역할에 대한 설명을 말한다. 옷에도 라벨이 있듯, 입력 서식에도 레이블을 제공해야 한다. 🥑 레이블이 시각적으로 노출되어 있는 경우 - 청각으로 웹을 인식하는 사용자는 입력 서식에 초점이 갔을 때 스크린 리더가 "편집창"이라고만 읽어주기 때문에 아이디를 입력해야 하는지, 비밀번호를 입력해야 하는지 알 수 없다. 1) 레이블과 입력 서식이 1:1 매칭인 경우 - label for 속성 값과 input id 속성 값을 동일하게 제공 아이디 비밀번호 2) 레이블과 선택 서식이 1:1 매칭인 경우 피자선택 피자를 선택하세요 치즈 퐁듀 파이어 미트 블랙앵거스 스테이크 베스트 콰트로 블랙타이거 슈림프 3) 레이블과 라디오 버..

표는 이해하기 쉽게 구성해야 한다. 🥑 데이터 표 - 스크린 리더가 마크업에 따라 표를 읽어주기 때문에 표의 내용, 구조 등을 이해할 수 있게 제목 셀은 로, 데이터 셀은 로 구분해야 한다. - 또한 제목 셀이 가로, 세로로 있는 경우 th 태그의 scope 속성으로 행 제목인지 열 제목인지 구분 가능하도록 제공해야 한다. - 표의 제목과 요약 정보는 동일하지 않도록 제공해야 하며, 요약 정보를 제공하기 어려운 경우에는 제목 셀을 나열하는 방식으로 제공하면 된다. 1) XHTML, HTML4 - 제목은 , 요약 정보는 table의 summary 속성으로 제공 직원 관리 현황 표 번호 부서 직원 수 합계 15명 1 총무부 5명 2 인사부 4명 3 기획부 6명 2) HTML5 - 제목과 요약 정보를 에 모두..

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

사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 한다. 🥑 페이지 진입 시 뜨는 새 창 (팝업) - 사용자가 예측할 수 없는 상황에서 페이지 진입 시 새 창을 제공하지 않아야 한다. 🥑 화면을 가리는 레이어 팝업 - 요즘은 새 창 팝업 대신 레이어 팝업으로 변경되고 있다. - 화면을 가리는 레이어 팝업을 제공하지 않아야 하며, 반복 영역 건너뛰기보다 먼저 팝업을 제어할 수 있도록 구현하거나 화면을 가리지 않고 최상단에 레이어 팝업을 제공해야 한다. 🥑 사전에 인식할 수 없는 새 창 - 특정 링크 클릭 시 새 창이 뜨는 경우 스크린 리더 사용자는 새 창이 뜬 것을 인지하기 힘드므로 이전 창에서 계속 탐색할 수도 있다. - 사용자가 예측하지 못한 팝업은 시각장애인, 지체장..

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

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