22.07.11_TIL

📌 이제 first프로젝트까지 남은기간은 약 5주이다. 5주동안 정말 내가 프로젝트를 완성할 수 있는지 할 수 있다면 어떤 기능을 구현할 수 있는지 직접 겪어보는 시간이 필요할 것 같다. 기획 → 와이어프레임 → 구현까지의 과정을 한번 해봐야 할 듯 하다. 기능으로는 React Router 설정 및 회원가입, 로그인 구현은 가장 기본적이기 때문에 CRUD프로젝트와는 다르게 다시 해봐야겠다.

📗 오늘 학습한 내용

웹 접근성

• 누구든지 화면을 볼 수 없거나, 소리를 들을 수 없거나, 마우스 없이 키보드밖에 사용할 수 없는 등 정보 접근에 제한을 받을 수 있는 상황을 해결하고자 노력하는 것이 웹 접근성(Web Accessibility)이다.
• 웹 접근성을 갖추면 어떤 상황에서도 항상 동등한 수준의 정보를 제공받도록 보장받을 수 있다.

웹 접근성을 갖추면 얻을 수 있는 효과

1. 사용자층 확대
2. 다양한 환경 지원
3. 사회적 이미지 향상

한국형 웹 콘텐츠 접근성 지침

• 인식의 용이성(Perceivable): 모든 컨텐츠는 사용자가 인식할 수 있어야 한다.
  1. 적절한 대체 텍스트 (alt 속성 사용)
  2. 자막 제공 (track 요소 사용)
  3. 색에 무관한 콘텐츠 인식 (테두리 및 레이블 달기)
  4. 명확한 지시사항 제공
  5. 텍스트 콘텐츠 명도 대비
  6. 자동 재생 금지
  7. 콘텐츠 간 구분
• 운용의 용이성(Operable): 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.
  1. 키보드 사용 보장
  2. 초점 이동
  3. 조작 가능
  4. 응답 시간 조절
  5. 정지 기능 제공
  6. 깜빡임과 번쩍임 사용 제한
  7. 반복 영역 건너뛰기
  8. 제목 제공
  9. 적절한 링크 텍스트
• 이해의 용이성(Understandable): 콘텐츠는 이해할 수 있어야 한다.
  1. 기본 언어 표시(lang 속성 사용)
  2. 사용자 요구에 따른 실행
  3. 콘텐츠 선형 구조
  4. 표의 구성
  5. 레이블 제공
  6. 오류 정정
• 견고성(Robust): 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.
  1. 마크업 오류 방지
  2. 웹 애플리케이션 접근성 준수

WAI (Web Accessibility Initiative)

• 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관

ARIA (Accessible Rich Internet Applications)

• 장애가 있는 사람들이 웹 콘턴츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는 기술

WAI-ARIA의 필요성

• 시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에서 사용한다.
• SPA처럼 AJAX를 사용하는 상황에서 사용한다.

WAI-ARIA 사용법

• 역할(role): HTML 요소의 역할을 정의하는 속성
• 상태(state): 요소의 현재 상태를 나타내는 속성
• 속성(property): 요소의 특징을 정의하는 속성(attribute)

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

JavaScript 이분탐색 코드 분석 및 이론정리

📝 중요한 내용

• 웹 접근성이란?
• 웹 접근성을 통해 얻을 수 있는 효과
• WAI-ARIA