사이드프로젝트로 웹 접근성 시작하기

FEconf 2024 Lightning Talk에서 '사이드프로젝트로 웹 접근성 시작하기' 주제로 발표한 자료입니다.

Transcript

1. Qualson 임경희 사이드프로젝트로 웹 접근성 시작하기
2. 웹 접근성, 어디까지 알고 있니 사이드프로젝트로 웹 접근성 시작하기 alt focus ring a11y IR WCAG 2.2 WAI-ARIA
3. 웹 접근성 Web Accessibility 어떠한 사용자든 어떠한 기술환경에서든 사용자가 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것 사이드프로젝트로 웹 접근성 시작하기
4. 사이드프로젝트로 웹 접근성 시작하기
5. 웹의 창시자, Tim Berners-Lee 웹의 힘은 보편성에 있다. 장애에 관계없이 모든 사람이 접근할 수 있도록 하는 것은 필수적인 요소이다. 사이드프로젝트로 웹 접근성 시작하기 웹의 진정한 힘 “ ”
6. 사이드프로젝트로 웹 접근성 시작하기 UI 개발진의 숨겨진 힘
7. 사이드프로젝트로 웹 접근성 시작하기 그런데 접근성 대응,,,
8. 사이드프로젝트로 웹 접근성 시작하기 그런데 접근성 대응,,, 촉박한 프로젝트 일정 개발진들과의 협의 공수 대비 효용에 대한 의심 어디서부터 시작해야할까 효과를 확인하기 어려움 사이드프로젝트부터 시작하자
9. 사이드프로젝트로 웹 접근성 시작하기 5분 안에 웹 접근성 프로젝트 시작하는 법 2 마음에 드는 템플릿 선택 3 ‘Use this template’ 버튼 클릭 1 github에 ‘accessible blog’ 검색
10. 사이드프로젝트로 웹 접근성 시작하기 커스텀하면서 고려할 점 • 색상의 차이를 구분할 수 없는 사람이 있다 • 텍스트 색과 배경 색의 명암비가 4.5:1 이상인지 개발자 도구로 확인한다 • 색상 만으로 정보를 전달하지 않는다 • 키보드/스크린리더를 통해서만 정보를 읽을 수 있는 사람이 있다 • Tab 키로 이동했을 때의 흐름이 충분히 이해 가능한지 고려한다 • 필요한 데이터는 IR 기법으로 요소 추가 • 불필요한 데이터는 읽히지 않도록 삭제하거나 aria-hidden: true • 중요한 지점으로 바로 이동할 수 있는 skip 버튼이 있어야 한다
11. 사이드프로젝트로 웹 접근성 시작하기 WCAG 지침 관련 추천 사이트 Access Guide 사람인 접근성 체크리스트 AOA11Y 유튜브
12. 사이드프로젝트로 웹 접근성 시작하기 그렇게 만든 블로그를 소개합니다 n-zine.vercel.app
13. 사이드프로젝트로 웹 접근성 시작하기 aria-* • aria-label • 시각적 텍스트가 없거나 추가 설명이 필요한 요소에 스크린리더가 읽을 수 있도록 설명을 제공한다 • aria-expaned • 확장 가능한 요소의 현재 상태를 나타낸다 • aria-controls • 현재 요소가 제어하는 다른 요소의 id를 지정한다
14. 사이드프로젝트로 웹 접근성 시작하기 WAI-ARIA 관련 추천 사이트 공식 문서 ARIA Authoring Practices Guide (APG)
15. 사이드프로젝트로 웹 접근성 시작하기 접근성 테스트 크롬 익스텐션 axe DevTools - Web Accessibility Testing Web Developer Toolbar - validate html 접근성 지침 위반 검사 마크업 유효성 검사
16. 사이드프로젝트로 웹 접근성 시작하기 스크린리더 테스트 • iOS: voiceover • AOS: talkback • NVDA • JAWS
17. 사이드프로젝트로 웹 접근성 시작하기 함께 고민해보면 좋을 질문 • 컴포넌트 기반 구조에서 어떻게 계층 구조를 지키며 마크업 할 수 있을까 • 커머스처럼 이미지가 많은 서비스에서는 적절한 대체 텍스트를 어떻게 넣어줄 수 있을까 • 회사에서 웹 접근성을 시작하기 위해서 무엇을 시도해보면 좋을까
18. 같이 접근성 고민해요 🙌 Linkedin 참고 자료 - [AOA11Y] 2024년 제2회 정보접근성오픈아카데미 - [AOA11Y] 웹접근성과 웹표준 - [널리] 모바일 스크린리더 기본 사용법 #iOS VoiceOver