본문 바로가기
코딩

웹 표준, 웹 접근성

by Frontend 2022. 7. 12.

1. 웹 표준

1-1. 웹 표준이란 ?

  • 웹 개발 형식을 통일시킨 것으로서, 웹에서 표준적으로 사용되는 기술이나 규칙을 일컫는다.
  • 운영체제 및 브라우저 종류에 상관없이 동일하게 웹 페이지가 작동되고 구현되도록 만드는 제작 기법.

웹 표준의 장점

  • 유지 보수의 용이성
  • 웹 호환성 확보
  • 검색 효율성 증대
  • 웹 접근성 향상

1-2. Semantic HTML

웹 표준에서는 개발자 간 소통, 검색 효율성, 웹 접근성의 이유로 Semantic HTML의 중요성을 강조

시맨틱 요소의 종류

  • <header>
  • <nav>
  • <aside>
  • <main>
  • <article>
  • <section>
  • <hgroup>
  • <footer>

1-3. 크로스 브라우징

  • 웹 브라우저의 종류에 상관없이 동등한 화면과 기능을 제공하도록 만드는 작업.
  • 웹 표준만 잘 준수하여도 어느정도 크로스 브라우징을 실현하게 된다.

크로스 브라우징 워크 플로우

  1. 초기 기획
  2. 개발
  3. 테스트/발견
  4. 수정/반복

1-4. SEO(Search Engine Optimization, 검색 엔진 최적화)

  • 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화시켜주는 작업.
  • 검색 엔진에서 웹 페이지를 보다 상위에 노출시켜줄 수 있다.
  • 종류는 On-page SEO, Off-page SEO로 구분됨.

SEO에 영향을 미치는 요소

  1. <title> : 검색 결과창에서 제목에 해당, <head>의 자식 요소로 작성하기
  2. <meta> : 메타 데이터(해당 웹 페이지에서 다루는 데이터)를 담는 요소, <head>의 자식 요소로 작성하기
  3. <hgroup> : 콘텐츠의 제목을 표시.
  4. <콘텐츠>

2. 웹 접근성

2-1. 웹 접근성이란?

  • 상황이나 장애 여부 등에 상관없이 누구나 정보를 제공받을 수 있도록 하는 것(장애인, 고령자, 비장애인 모두 포함)
  • 웹 접근성 충족 시, 이로운 점 :
    • 사용자층 확대
    • 다양한 환경 지원
    • 사회적 이미지 향상

2-2. 한국형 웹 콘텐츠 접근성 지침 2.1

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

  1. 적절한 대체 텍스트
  2. 자막 제공
  3. 색에 무관한 콘텐츠 인식
  4. 명확한 지시사항 제공
  5. 텍스트 콘텐츠 명도 대비
  6. 자동 재생 금지
  7. 콘텐츠 간 구분

II. 운용의 용이성(Operable)

  1. 키보드 사용 보장
  2. 초점 이동
  3. 조작 가능
  4. 응답 시간 조절
  5. 정지 기능 제공
  6. 깜빡임과 번쩍임 사용 제한
  7. 반복 영역 건너뛰기
  8. 제목 제공
  9. 적절한 링크 텍스트

III. 이해의 용이성(Understandable)

  1. 기본 언어 표시
  2. 사용자 요구에 따른 실행
  3. 콘텐츠 선형 구조 : 콘텐츠는 논리적인 순서로 제공해야 함
  4. 표의 구성 : 표는 이해하기 쉽게 구성해야 한다.
  5. 레이블 제공
  6. 오류 정정

IV. 견고성(Robust)

  1. 마크업 오류 방지
  2. 웹 애플리케이션 접근성 준수

2-3. WAI-ARIA

  • = WAI + ARIA
  • WAI(Web Accessibility initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
  • ARIA(Accessible Rich Internet Application) : 웹 접근성을 갖추기 위한 기술

WAI-ARIA가 필요한 이유

  • HTML 요소에 추가적으로 의미를 부여할 수 있게 해줌
  • (단, 시맨틱 요소만으로 충분히 의미를 부여할 수 없는 상황에서만 보조적으로 사용해야 한다)
  • SPA처럼 AJAX를 사용하는 상황, 즉 새로고침없이 페이지 내용이 바뀌어도 변경된 영역에 대한 정보 전달이 가능하다.

WAI-ARIA 사용법

  • HTML 태그 내부에 속성을 추가함으로써 의미 부여 가능
  • 속성의 종류 :
    • 역할(role) : HTML 요소의 역할을 정의.
      • 예시
      <div role = “button”> 버튼 < /div>
    • 상태(state) : 요소의 현재 상태를 나타냄.
      • aria-expanded : 아코디언 UI가 펼쳐진 상태인지 표시
      • aria-hidden : 요소가 숨김 상태인지 표시
      • aria-selected : 선택 상태인 요소를 표시
    • 속성(property) : 요소의 특징을 정의함.
      • aria-label
      • aria-live
저작자표시 (새창열림)

'코딩' 카테고리의 다른 글

[HTML/CSS] 브라우저/반응형 웹  (0) 2022.07.23
[Section 3] 모의 기술면접 준비 자료  (0) 2022.07.20
Redux  (0) 2022.07.07
[React] Custom Component  (0) 2022.06.30
[React] Styled Components 실습  (0) 2022.06.30

관련글

티스토리툴바