🌟 디테일의 간격 시리즈! [📝 기획자로 웹 접근성 바라보기] (👀간단 요약) '장애'를 정의하고 사용자가 사이트를 이용하는 환경을 인지하자. 📌 전맹 시각장애 ✓ 시력이 거의 없어 앞을

🌟 디테일의 간격 시리즈! [📝 기획자로 웹 접근성 바라보기] (👀간단 요약) '장애'를 정의하고 사용자가 사이트를 이용하는 환경을 인지하자. 📌 전맹 시각장애 ✓ 시력이 거의 없어 앞을 볼 수 없는 상태. 청각 또는 촉각으로 웹을 이용한다. ✓ 청각으로 스크린리더기를 이용하거나 촉각으로 점자 정보 단말기를 통해 점자를 읽는다. → 이미지에 대한 대체텍스트를 고려해야함. 📌 저시력 시각 장애 (전체 시각 장애의 80%) ✓ 시력저하, 시야장애 : 뿌옇게 보이거나 페이지의 일부만 확인 가능. 확대기능을 많이 사용한다. ✓ 색약, 색맹 : 색상 분별에 어려움을 겪으므로, 고대비를 사용하여 페이지 구성이 필요하다. → 사이트를 확대하여 이용하는 케이스 / UI 검수 시 명도대비에 대한 인지 필요. 📌 중증 운동장애 / 손 운동 장애 ✓ 목만 움직일 수 있거나, 한손만 사용 가능한 환경으로 키보드만으로 사이트를 사용한다. → 키보드 원툴에 대한 인지 필요. 📌 청각장애 ✓ 안내문구 또는 자막을 이용하여 화면의 글씨를 읽음. → 오디오가 없는 환경에 대한 인지 필요. 📌 그 외 고려사항 ✓ OS 뿐만 아니라 브라우저 호환도 고려 ✓ 느린 인터넷 또는 아웃룩과 같은 특정 상황 → 환경적으로 UI가 깨지는 케이스 고려 그래서 기획자가 고려해야 할 내용은? 📌 키보드 엑세스 - 마우스 사용불가 환경에 대한 고려 ✓ 키보드로 이동, 입력, 탐색, 롤오버, 호버 등 모든 인터랙션이 가능한 지 확인 ✓ Tab으로 이동 시 포커스가 이동하는 지 확인 ✓ 다이얼로그팝업, 모달팝업 등 팝업을 esc키 등으로 닫을 수 있는 지 확인 📌 텍스트 및 이미지 - 이용 환경에 대한 고려 ✓ 브라우저에서 글꼴 크기를 변경했을 때 폰트 사이즈 및 가변영역이 변경되는 지 확인 ✓ 이미지 태그에 Alt 속성 (대체 텍스트)를 지원하는 지 확인 📌 색상 / 명도 대비 ✓ 중요한 컨텐츠가 있을 수록 색상 및 명도대비에 유의 (👋중요한 이유가 뭔가요?) 작년, 시니어 세대를 위한 모바일 UX 디자인 팁에 대한 코멘트를 작성한 적 있어요. 오늘 공유하는 내용과 동일하게 '접근성' 관점에서 바라볼 수 있는 내용인데요. 사람은 어쩔 수 없이 '자신'과 그 주변 환경에 따라 사고를 할 수 밖에 없어요. 상대적으로 적은 수라고 여겨지는 대상에 대한 서비스 경험, 이용 환경 역시 멀어질 수 밖에 없습니다. 늘 여기서 우선순위가 정해지고, 접근성에 대한 고려를 상대적으로 낮은 순위로 잡게 되는 이유인데요. 특히 국내는 아직 접근성에 대한 적극적인 대응이 잘 이뤄지지 않는 국가 중 하나라, 이런 글을 통해 경각심 또는 더 사려 깊은 (어쩌면 당연한) 기획에 대한 고민을 할 수 있지 않을까 하는 생각이 들었습니다. 북미 등에서는 우리 서비스에서 사용 되는 특정 컬러값을 입력하면 접근성 관점에서 좋은 컬러인지 등을 확인해주는 등 다양한 관련 서비스들이 나와있어요. 큰 폭의 변화는 서비스 성격 등에 따라 어려울 수 있으니, 본문에 언급된 내용들 중 가장 많은 대상이 겪고 있는 불편함을 차례대로 접근해보는 건 어떨까요? ✓ 시니어 세대를 위한 모바일 UX 디자인 팁 : https://news.publy.co/comments/10281 ✓ 접근성 향상에 도움이 되는 컬러 서비스 3개 (접근성 태그를 확인해주세요) : https://www.notion.so/zagmaster/acf91c30082843fa95beba8f95db2500