실무에서 웹 접근성 개선해보기
·
웹 접근성
안녕하세요 :) 웹 접근성 개선은 모든 사용자가 불편함 없이 웹을 이용할 수 있도록 하는 중요한 작업입니다. 하지만 리소스가 한정적인 스타트업에서는 단순히 “좋은 일이니까 하자”는 이유만으로 시간을 할애하기가 쉽지 않습니다. 그래서 우리는 왜 웹 접근성을 개선해야 하는지보다, 어떻게 현실적으로 추진할 수 있었는지를 중심으로 이야기해보려고 합니다. 저희 회사는 일본과 미국을 포함한 글로벌 프로젝트를 많이 진행했습니다. 해외에서는 웹 접근성이 법적으로도 중요한 요소이고, 이를 준수하지 않으면 소송의 대상이 될 수도 있습니다. 따라서 프론트엔드 팀에서 더 나은 사용자 경험을 제공하면서도 최소한의 법적 기준을 충족할 수 있도록 접근성 개선을 주도하게 되었습니다. 그 과정에서 저는 사내 접근성 스터디를 열었고, ..
Day 10) ARIA란
·
웹 접근성
🎄  A11y Advent Calendar (번역) 10일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :) ARIA(Accessible Rich Internet Applications)는 HTML의 semantic을 향상시켜 스크린 리더와 같은 보조 기술에 더 많은 의미를 전달하기 위한 표준입니다. 하지만 ARIA를 사용할 때는 신중해야 하며, 기본적으로는 ARIA를 사용하지 않는 것이 가장 좋은 접근법이라는 점을 기억해야 합니다. ARIA 사용의 기본 원칙1. 가능하면 native HTML을 사용하세요. HTML 요소들은 이미 접근성을 고려하여 설계되었습니다. 예를 들어, , , 과 같은 기본 요소들은 보조 기술과 자연스럽게 호환됩니다.2. ARIA는 보완 수단으로 사용하세요. HTML만으..
Day 6) Skip to Content를 추가하여 접근성 높이기
·
웹 접근성
🎄  A11y Advent Calendar (번역) 6일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :) 오늘은 종종 간과되지만 중요한 기능인, 사이트의 주요 콘텐츠 영역으로 바로 이동할 수 있는 ‘Skip-to-Content’ 또는 ‘Skip-Navigation’ 링크에 대해 이야기해보겠습니다. 하이퍼링크를 사용하는 기존 웹사이트에서는 링크를 클릭할 때 페이지가 완전히 새로고침되며 초점이 페이지 상단으로 이동합니다. 키보드로 탐색하는 경우, 메인 콘텐츠에 도달하려면 헤더, 내비게이션 바, 사이드바 등을 일일이 탭으로 건너뛰어야 합니다. 이는 사용자 경험 측면에서 바람직하지 않습니다. Single Page Application(SPA)도 이 문제에서 완전히 자유롭지 않습니다. 링크를 따라가면..
Day 2) 웹접근성 평가하기
·
웹 접근성
🎄  A11y Advent Calendar (번역) 2일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :) 접근성의 정의를 살펴보았으니, 이제 이를 어떻게 측정할 수 있는지 알아보겠습니다. 접근성은 현재 기술 표준인 웹 콘텐츠 접근성 지침(WCAG)을 기준으로 평가됩니다. WCAG는 인식 가능, 작동 가능, 이해 가능, 견고함의 약자인 POUR 원칙에 따라 구성된 12가지 지침을 제공합니다.Perceivable (인식 가능): 콘텐츠는 사용자가 감각적으로 접근할 수 있어야 합니다.Operable (작동 가능): 웹사이트는 다양한 입력 도구로 사용 가능해야 합니다.Understandable (이해 가능): 콘텐츠와 UI는 명확하고 예측 가능해야 합니다.Robust (견고함): 다양한 환경과 보조..
Day 1) 웹접근성이란?
·
웹 접근성
🎄  A11y Advent Calendar (번역) 1일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :) 웹접근성은 주로 시각장애인을 위한 것으로만 알려져 있지만, 실제로는 더 넓은 범위를 다루며, 크게 다섯 가지 범주로 나눌 수 있습니다.시각적 어려움: 시력 저하, 색맹, 흐릿함, 완전 실명, 백내장 등의 다양한 범위를 포함합니다.웹은 주로 시각적으로 소비되기 때문에 이 분야에서 많은 기술적 발전이 이루어졌습니다. 그러나 종종 시각장애인 사용자만을 위한 것으로 좁게 이해되는 경우가 많습니다.움직임의 어려움: 웹에서는 주로 하체가 아닌 상체의 장애를 고려합니다. 건염, 손목 터널 증후군, 손이나 팔 골절, 피부 질환, 손 떨림, 파킨슨병 등이 이에 속합니다.인지적 어려움: 난독증, 외상 후 ..