허도경, limewhale

WAI-ARIA는 HTML의 접근성 문제를 보완하는 W3C 명세입니다. WAI-ARIA는 HTML 요소에 role 또는 aria-* 속성을 추가하여 콘텐츠의 '역할(roles), 상태(states), 속성(properties)' 정보를 보조기기에 제공합니다. WAI-ARIA 속성을 모든 HTML 요소에 무분별하게 사용할 수 있는 것은 아닙니다. role 또는 aria-* 속성을 특정 HTML 요소에 사용할 수 있는지 ARIA in HTML 명세를 검토하면서 적용해야 합니다. 1. HTML을 의미 있게 작성한다. 대부분의 WAI-ARIA 명세는 HTML 요소와 속성을 흉내내는 것입니다. 올바른 HTML을 사용한다면 WAI-ARIA 사용을 최소화할 수 있습니다. WAI-ARIA를 사용하기에 앞서 HTML을 ..

WAI-ARIA란? HTML로 화면의 마크업을 구성할 때 고려해야 하는 부분 중 하나가 웹 접근성인 부분입니다. 과거의 웹페이지는 정적인 정보성 화면이 주를 이루었습니다. 그래서 웹 표준을 지켜서 시멘틱 마크업과 접근성 요소들을 준수하면 웹 접근성 요소를 해결할 수 있었습니다. 하지만 최근에는 자바스크립트, AJAX 등을 활용하여 비동기 데이터를 불러오거나 시간에 따라 정보가 자동으로 업데이트되는 경우 전맹 시각장애인들은 스크린리더 등 보조기기에서 업데이트 된 정보를 인지하기 어려움을 느끼게 됩니다. 이러한 부분을 보완하기 위해 나온것이 WAI-ARIA입니다. WAI-ARIA는 W3C에 의해 제정된 웹 접근성을 위해 지원되는여러 가지 특성들을 대한 표준 기술 규격을 의미합니다. WAI는 ‘Web Acce..

웹 접근성에서 키보드의 포커스 이동은 굉장히 중요한 요소입니다. 그리고 웹 접근성이 아니더라도 마크업이 순차적으로 잘 적용되어 있으면 콘텐츠의 논리적인 흐름에 따라서 focus가 당연히 올바르게 이동하겠지만 프로젝트상의 우리가 제어할 수 없는 환경적 이슈라던지 상황에 따른 여러 이유로 인해 포커스의 흐름이 우리가 원치 않는 방향으로 이동하는 경우가 발생합니다. 그럴 때는 어쩔 수 없이 강제적으로 포커스의 이동을 처리해 줘야 하는데 조금 더 이해하기 쉽게 예를 들어 볼게요. 특정 버튼을 클릭할 때 해당 Event로 레이어 팝업이 화면에 보이게 된다고 가정해 봅시다. 여기서 레이어 팝업에 조건을 둘게요. 이 레이어 팝업이 처음부터 화면에 마크업으로 되어 있지 않고 버튼을 클릭하면 그때 스크립트에서 동적으로 ..

HTML과 CSS를 사용하여 마크업을 하게 되면 가장 기본적으로 많이 듣게 되는 단어가 웹 표준입니다. 그리고 그에 파생되어서 웹 접근서이라는 단어도 같이 접하게 되는데 아마 '웹 표준', '웹 접근성'이라는 단어를 처음 접하시는 분들도 계실수도 있고 두 단어가 같은 의미를 가진다고 생각할 수도 있습니다. 비슷하지만 서로 의미하는게 다른 두 단어를 오늘 이해해보려고 합니다. 📒 웹 표준이란? 웹 표준이란, ‘웹에서 표준적으로 사용되는 기술이나 규칙의 총칭으로 다양한 접속 환경을 가진 인터넷 사용자들이 정보에 소외되지 않고, 동등하게 정보를 이용할 수 있도록 하는 방법이라고 정의합니다. 좀 더 쉽게 정리하면 웹 표준은 브라우저의 종류나 버전에 관계 없이 서로 호환이 가능하도록 제시된 표준으로 어느 한쪽에 ..

인지 장애인분이나 몸이 불편하신 신체 약자분들도 웹 환경을 동등하게 사용하기 위해 웹 접근성 지침 항목이 만들어져 있습니다. 그 중 스킵 내비게이션(Skip Navigation)은 접근성에서 키보드 사용자를 위해 필요한 요소로 키보드만 사용하여 하단 메뉴나 다른 페이지 메뉴로 이동시 지속적으로 탭키로 이동하여야 하는 번거로움을 덜어줄 수 있게 하기 위해 만들어진 구조입니다. 쉽게 이야기하면 사용자가 원하는 대 메뉴로 바로 이동할 수 있는 메뉴 바로가기라고 생각하시면 이해하기가 조금 더 쉬울 거 같아요. 그렇기 때문에 탭키로 포커스 진입시 가장 먼저 스킵 메뉴로 진입해야 하기 때문에 마크업 시 DOM 구조의 가장 최상단에 위치하여야 합니다. 예제로 만든 스킵 네비게이션은 탭으로 포커스가 스킵 내비게이션에 ..