🎄  A11y Advent Calendar (번역) 10일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :) ARIA(Accessible Rich Internet Applications)는 HTML의 semantic을 향상시켜 스크린 리더와 같은 보조 기술에 더 많은 의미를 전달하기 위한 표준입니다. 하지만 ARIA를 사용할 때는 신중해야 하며, 기본적으로는 ARIA를 사용하지 않는 것이 가장 좋은 접근법이라는 점을 기억해야 합니다. ARIA 사용의 기본 원칙1. 가능하면 native HTML을 사용하세요. HTML 요소들은 이미 접근성을 고려하여 설계되었습니다. 예를 들어, , , 과 같은 기본 요소들은 보조 기술과 자연스럽게 호환됩니다.2. ARIA는 보완 수단으로 사용하세요. HTML만으..

🎄  A11y Advent Calendar (번역) 9일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :) 웹은 본질적으로 Form입니다. 사용자가 링크 클릭 이상의 상호작용을 원하는 순간, Form을 통해 이루어집니다. 검색창, 채팅창, 설문지 등 모두 Form의 일종입니다. Form은 모든 사용자가 효율적으로 사용할 수 있도록 세심하게 설계되어야 합니다. 키보드로 탐색하는 파워 유저부터 스크린 리더를 사용하는 시각장애인까지, 다양한 사용자들에게도 지루하지 않고 편리하게 작성될 수 있도록 주의가 필요합니다. 다음은 접근성 높은 Form을 만들기 위한 핵심 사항들입니다 Label모든 필드에는 반드시 label을 지정해야 합니다. label은 디자인에 따라 시각적으로 숨길 수 있지만, DOM에 ..

🎄  A11y Advent Calendar (번역) 8일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :) 이미지에 대한 대체 텍스트는 이미지가 로드되지 않거나, 이미지를 인식하지 못하는 사용자들이 텍스트 콘텐츠를 통해 의미를 파악할 수 있도록 돕기 위해 사용됩니다. 이는 검색 엔진 최적화는 물론, 스크린 리더를 사용하는 사용자들에게도 매우 중요한 요소입니다. 웹에는 대체 텍스트를 작성하는 방법에 대한 많은 리소스가 있지만, 그중에서도 Daniel Göransson의 가이드는 간결하면서도 핵심을 잘 전달해 주는 좋은 예로 꼽힙니다. 주요 내용을 요약하면 다음과 같습니다 대체 텍스트는 이미지를 설명하는 데 집중해야 합니다. 크레딧, 저작자 표시, 또는 키워드를 채우는 용도로 적합하지 않습니다주요..

🎄  A11y Advent Calendar (번역) 7일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :) 우리가 흔히 간과하는 점은, 스크린 리더와 같은 보조 기술들이 초기 웹 환경을 기반으로 설계되었다는 사실입니다. 이러한 기술들은 페이지가 리로드될 때 페이지의 컨텍스트, 즉 요소로 정의된 페이지 제목을 사용자에게 전달합니다. SPA(Single Page Application)을 구축할 때는 어떤 프레임워크를 사용하든, 라우터 링크를 따라 탐색할 경우 다음 두 가지 작업을 반드시 수행해야 합니다:새로운 뷰/페이지의 제목을 사용자에게 전달.포커스를 적절히 유지하거나 필요한 위치로 이동이를 해결하기 위한 좋은 방법은 탐색 시 새 페이지의 제목이 표시되는 시각적으로 숨겨진 요소를 페이지 상단에..

🎄  A11y Advent Calendar (번역) 6일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :) 오늘은 종종 간과되지만 중요한 기능인, 사이트의 주요 콘텐츠 영역으로 바로 이동할 수 있는 ‘Skip-to-Content’ 또는 ‘Skip-Navigation’ 링크에 대해 이야기해보겠습니다. 하이퍼링크를 사용하는 기존 웹사이트에서는 링크를 클릭할 때 페이지가 완전히 새로고침되며 초점이 페이지 상단으로 이동합니다. 키보드로 탐색하는 경우, 메인 콘텐츠에 도달하려면 헤더, 내비게이션 바, 사이드바 등을 일일이 탭으로 건너뛰어야 합니다. 이는 사용자 경험 측면에서 바람직하지 않습니다. Single Page Application(SPA)도 이 문제에서 완전히 자유롭지 않습니다. 링크를 따라가면..

🎄  A11y Advent Calendar (번역) 5일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :) 제목 계층 구조는 페이지의 heading 요소로 정의되는 컨텐츠 구조를 의미합니다. 이는 웹 접근성에서 중요한 역할을 하며, 특히 스크린 리더 사용자가 웹사이트를 탐색할 때 주요 방법 중 하나로 활용됩니다. 2014년에 진행된 WebAim 설문조사에 따르면, 스크린 리더 사용자의 약 3분의 2가 긴 웹 페이지에서 정보를 찾기 위해 제목을 먼저 스캔한다고 응답했습니다. 이처럼 명확하고 체계적인 제목 구조는 정보 접근성을 높이는 데 필수적입니다. 예를 들어 이 문서에서는 글 제목이 이고 그 뒤에 여러 개의 가 있습니다. 이 중 하위 섹션이 필요한 부분이 있다면 등이 있을 것입니다. 개요는 ..