[C/F TIL] 53~54일차 - 웹 접근성/ 페어 과제

Code States
Front-end boost camp
Today
I
Learned

⛅️ 뽀송뽀송 53일차/ 페어 과제 54일차

⛅️ 웹 접근성

• 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것
• 웹 접근성을 갖추면?
  -- 사용자층을 확대시킬 수 있음
  -- 다양한 환경 지원 (운전 중, 마우스가 없을 경우 등)
  -- 사회적 이미지 향상

⛅️ 웹 콘텐츠 접근성 지침

✔️ 인식의 용이성 : 모든 콘텐츠는 사용자가 인식할 수 있어야 한다.

• 적절한 대체 텍스트
  -- 텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
• 자막 제공
  -- 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.
• 색에 무관한 콘텐츠 인식
  -- 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
• 명확한 지시사항 제공
  -- 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
• 텍스트 콘텐츠 명도 대비
  -- 텍스트 콘텐츠와 배경 간에 명도 대비는 4.5대 1 이상이어야 한다.
• 자동 재생 금지
  -- 자동으로 소리가 재생되지 않아야 한다.
• 콘텐츠 간 구분
  -- 이웃한 콘텐츠는 구별될 수 있어야 한다.

✔️ 운용의 용이성 : 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.

• 키보드 사용 보장
  -- 보든 기능은 키보드만으로도 사용할 수 있어야 한다.
• 초점 이동
  -- 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
• 조작 가능
  -- 사용자 입력 및 컨드롤은 조작 가능하도록 제공되어야 한다.
• 응답 시간 조절
  -- 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
• 정지 기능 제공
  -- 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
• 깜빡임과 번쩍임 사용 제한
  -- 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
• 반복 영역 건너뛰기
  -- 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
• 제목 제공
  -- 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
• 적절한 링크 텍스트
  -- 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

✔️ 이해의 용이성 : 콘텐츠는 이해할 수 있어야 한다.

• 기본 언어 표시
  -- 주로 사용하는 언어를 명시해야 한다.
• 사용자 요구에 따른 실행
  -- 사용자가 의도하지 않은 기능은 실행되지 않아야 한다.
• 콘텐츠 선형 구조
  -- 콘텐츠는 논리적인 순서로 제공해야 한다.
• 표의 구성
  -- 표는 이해하기 쉽게 구성해야 한다.
• 레이블 제공
  -- 사용자 입력에는 대응하는 레이블을 제공해야 한다.
• 오류 정정
  -- 입력 오류를 정정할 수 있는 방법을 제공해야 한다.

✔️ 경고성 : 웹 콘텐츠는 미래의 기술로도 접글할 수 있도록 견고하게 만들어야 한다.

• 마크업 오류 방지
  -- 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
• 웹 애플리케이션 접근성 준수
  -- 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.

⛅️ WAI-ARIA

• WAI와 ARIA를 합친 단어
  -- WAI(Web Accessibility Initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
  -- ARIA(Accessible Rich internet Applications) : 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에서 더 쉽게 엑세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술
• WAI-ARIA의 필요성? : HTML 요소에 추가적으로 의미를 부여할 수 있게 해줌
  -- 시멘틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용하면 HTML 요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색할 수 있게 도와줌
  -- SPA처럼 AJAX를 사용하는 상황, 즉 새로고침 없이 페이지의 내용이 바뀌는 상황에서도 변경된 영역에 대한 정보를 전달해 줄 수 있어 동적 콘텐츠에서도 웹 접근성을 향상
• WAI-ARIA 사용법
  -- 역할 : HTML 요소의 역할을 정의하는 속성
  -- 상태 : 요소의 현재 상태를 나타내는 속성
  -- 속성 : 요소의 특징을 정의하는 속성

⛅️ 페어프로그래밍 - Web standard

빈칸채워 넣기 식으로 잘못된 태그 부분을 올바르게 바꾸는 형식의 과제였다. 답이 따로 정해진건 아니었기 때문에 페어분들이랑 같이 해보는 걸로 마무리함!

⛅️ 53~54일차 수업을 마치며...

지난 회사에서 sns마케팅할 때 한 공공기관 홈페이지에 올라갈 배너 제작 시에는 늘 업로드 전에 웹접근성 검사를 했었다.. 그때는 단순히 디자인물 색상과 관련해서 1:4.5 명암비를 넘지 않는 기준만 확인하긴 했었는데 이렇게 개발자 시각에서 배워보니 새로운 것 같기도. 호호