멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습

👨🏻‍🏫 웹 접근성 특강

• 웹 접근성 특강 강사님
  • 김혜일 님
  • 카카오 디지털 접근성 책임자(Digital Accessibility Officer, DAO)

웹 접근성의 중요성

• 접근성을 고려하지 않으면 누군가는 소외될 수 있다.
• 우리가 기대하는 즐거운 경험을 누군가는 놓칠 수 있다.
• 접근성이 없다면, 장애가 없어도 장애가 있는 삶이 될 것이다.
• 우리는 더 많은 사람들이 다양한 컨텐츠를 즐겁게 누릴 수 있도록,
  웹 접근성을 당연히 알고 있어야 한다.

디지털 & NO 접근성

1. 사회에 참여하는 것을 저해
2. 자기결정권의 침해
   • 일상생활 - 식당, 교통, 금융, 의료, 공공서비스, 택배, 안내 등..
   • 비장애인: 자아 → 독립적 행동 → 목표달성
   • 장애인: 자아 → 보조인 → 목표달성 (본인과 보조인 사이에 노이즈 발생)

접근성 - 대체(Alternavtive)

• 시각 어려움 - 듣는 콘텐츠
• 신체 어려움 - 쉬운 조작
• 청각 어려움 - 보는 콘텐츠

시각 어려움 - 듣는 콘텐츠

[화면 낭독 프로그램] - 스크린 리더

• 모바일 기기의 IT 보조기술 (Assistive Technology)
• iOS
  • iPhone, iPad, Mac
  • 설정 → 손쉬운 사용 → VoiceOver
  • 세 손가락으로 위/아래 쓸기(목록 스크롤), 좌/우 쓸기 (페이지 전환)
• Android
  • Samsung Galaxy
  • 설정 → 접근성 → Talkback
  • 설정 → 접근성 → 스크린 리더 → 보이스
  • 한 손가락 한 번 탭: 포커스 접근
  • 한 손가락 좌/우 쓸기: 이전/다음 초점 이동
  • 한 손가락 두 번 탭: 포커스 된 콘텐츠 실행
• 화면 낭독 프로그램 종류
  • 센스리더 (국내 점유율 90%이상)
  • NVDA (무료)
  • JAWS (세계적으로 점유율 높음)

[초점]

• 초점 이동 크기와 순서도 굉장히 중요함(논리적 순서)

[보이지 않는 텍스트 넣을 때 주의]

• visibility: hidden; display:none;
  • VoiceOver, Talkback 모두 읽어지지 않음
• text-indent: -999px;
  • 실제 콘텐츠와 다른 위치에 초점이 접근됨
• position:absolute;
  • 부모 요소의 블록에 따라 초점이 상단으로 튀는 현상 발생
• font-size: 0;
  • VoiceOver의 초점이 접근되지 않음

[자동 재생 금지]

• 사용자가 손 쉽게 멈춤, 일시정지, 음량 조절 등과 같이 제어할 수 있는 수단 제공
• 단, 3초 미만의 배경음은 예외 인정

[명확한 지시사항 제공]

• 지시사항은 모양,크기,위치,방향,색 등에 관계없이 인식할 수 있어야 함
  • ex) 파란색 글씨를 입력하세요, 빨간 버튼을 클릭하세요 등..
• 대명사 보다 고유명사 사용

[사용자 요구에 따른 실행]

• 라이브러리 aria-live 주의
  • 배너 자동 롤링 + aria-live="polite" = 배너를 계속 읽어주며, 무한 음성 출력됨

[표의 구성 - 행과 열의 제목]

• th scope 사용하기

[명도 대비]

• 텍스트 콘텐츠의 명도 대비 - W3C 기준 참고
• 비텍스트 콘텐츠의 명도 대비 - W3C 기준 참고

GAAD (세계 접근성 인식의 날)

• Global Accessibility Awareness Day (5월 셋째주 목요일)
• 유명 기업들의 웹 접근성 발표를 볼 수 있음
• 세계적으로 어떤 컨퍼런스와 움직임이 있는지 참고

나의 코드 한 줄이 한 사람의 일상생활을 바꿀 수 있다.