🎄  A11y Advent Calendar (번역) 4일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :) 이번엔 링크에 대해 이야기해 보겠습니다. 스크린 리더는 페이지의 모든 링크를 나열해 사용자가 더 빠르게 탐색할 수 있도록 돕는 기능을 제공합니다. 또한, 탭 키를 사용하면 링크 간을 이동하며 링크 사이의 텍스트는 건너뛸 수 있습니다. 이 과정에서 링크는 페이지의 콘텐츠나 문법적 문맥과 분리된 상태로 보여지게 됩니다. 이러한 이유로, 링크는 그 자체로 명확하고 설명 가능해야 합니다. 링크가 포함된 문장의 나머지 부분 없이도, 링크 자체만으로 의미를 전달할 수 있어야 합니다. 링크의 내용은 사용자가 클릭했을 때 수행될 작업이나 이동할 페이지를 명확히 설명해야 합니다. 만약 페이지에서 링크가 ..

🎄  A11y Advent Calendar (번역) 3일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :) 오늘은 좀 더 기술적인 주제로 들어가서 보조 기술이 접근 가능하도록 콘텐츠를 숨기는 방법에 대해 알아보겠습니다. 대부분의 사람들은 링크와 버튼을 탭하거나 클릭하여 상호 작용하는 방식으로 웹을 탐색합니다. 이러한 방식은 시각적 입력을 사용하는 사용자에게는 효과적이지만, 스크린 리더를 사용하는 사용자들에게는 다릅니다. 스크린 리더는 페이지 내용을 음성으로 읽어주는 소프트웨어로, 시각적 정보 없이도 웹 콘텐츠를 탐색할 수 있게 돕습니다. 따라서 개발자는 스크린 리더 사용자를 고려한 접근성 높은 웹 콘텐츠를 제공해야 합니다. 예를 들어, 아이콘은 시각적으로 의미를 전달할 수 있지만, 이를 인식하..

🎄  A11y Advent Calendar (번역) 2일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :) 접근성의 정의를 살펴보았으니, 이제 이를 어떻게 측정할 수 있는지 알아보겠습니다. 접근성은 현재 기술 표준인 웹 콘텐츠 접근성 지침(WCAG)을 기준으로 평가됩니다. WCAG는 인식 가능, 작동 가능, 이해 가능, 견고함의 약자인 POUR 원칙에 따라 구성된 12가지 지침을 제공합니다.Perceivable (인식 가능): 콘텐츠는 사용자가 감각적으로 접근할 수 있어야 합니다.Operable (작동 가능): 웹사이트는 다양한 입력 도구로 사용 가능해야 합니다.Understandable (이해 가능): 콘텐츠와 UI는 명확하고 예측 가능해야 합니다.Robust (견고함): 다양한 환경과 보조..

🎄  A11y Advent Calendar (번역) 1일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :) 웹접근성은 주로 시각장애인을 위한 것으로만 알려져 있지만, 실제로는 더 넓은 범위를 다루며, 크게 다섯 가지 범주로 나눌 수 있습니다.시각적 어려움: 시력 저하, 색맹, 흐릿함, 완전 실명, 백내장 등의 다양한 범위를 포함합니다.웹은 주로 시각적으로 소비되기 때문에 이 분야에서 많은 기술적 발전이 이루어졌습니다. 그러나 종종 시각장애인 사용자만을 위한 것으로 좁게 이해되는 경우가 많습니다.움직임의 어려움: 웹에서는 주로 하체가 아닌 상체의 장애를 고려합니다. 건염, 손목 터널 증후군, 손이나 팔 골절, 피부 질환, 손 떨림, 파킨슨병 등이 이에 속합니다.인지적 어려움: 난독증, 외상 후 ..

Advent calendar란 크리스마스를 기다리며 매일 초콜릿을 하나씩 꺼내먹을 수 있는 달력을 말합니다. 이에 착안해 웹 접근성과 관련된 지식을 크리스마스 전까지 하루에 하나씩 공유하는 블로그를 봤는데 방식이 재미있고 유용한 내용이 많았습니다. 회사에서 이 글을 번역하여 스터디를 진행한적이 있습니다. 더 많은 사람들과 공유하고 싶어 개인 블로그에 하나씩 옮겨 적어보려합니다 여러분도 함께 웹 접근성의 가치를 느끼고 매년 크리스마스 시즌이 되면 한번씩 꺼내읽는 글이 되었으면 좋겠습니다. 이를 통해 더 많은 사람들이 편리하게 웹을 사용할 수 있도록 돕는 데 동참하셨으면 합니다 :) 목록Day 1) 웹접근성이란?Day 2) 웹접근성 평가하기Day 3) 스크린 리더 사용자만을 위한 컨텐츠 숨기기Day 4) 접..

alt는 이미지가 제대로 렌더링되지 않았을 경우 혹은 스크린 리더를 사용하는 유저를 위해 필요한 속성입니다. 지금부터 alt text를 잘 작성하기 위한 원칙을 알아보겠습니다.alt text를 잘 작성하기 위한 원칙단순히 decoration용인 이미지에도 alt=""를 적어준다.꼭 유저가 알아야 할 필요가 없는 정보성이 아닌 이미지에도 alt를 적어줘야 한다고 합니다. alt가 없는 경우 스크린 리더가 정보를 읽을 때 종종 src를 alt 대신 읽기 때문입니다. 그렇게 되면 유저가 정보를 읽어나가는 데 필요없는 정보를 주게되어 불편하게 만들 수 있으니 꼭 적어줘야합니다. 🙂 짧게 묘사한다alt text는 아무리 길어도 100자 이하로 끝내야 한다고 합니다. 너무 길면 사용자 경험에 좋지 않을 수 있으니..