2026-02-21

웹 표준(Web Standards)과 웹 접근성(Web Accessibility)

웹 표준 (Web Standards)이란

W3C(World Wide Web Consortium)에서 정의한 웹 기술의 공식 규격과 권고안을 따르는 것

대표적인 웹 표준 기술:

  • HTML
  • CSS
  • JavaScript
  • DOM
  • HTTP

⇒ 목적: 브라우저와 환경에 관계없이 동일하게 동작하도록 하기 위함

왜 웹 표준이 중요한가

  1. 브라우저 호환성 확보
  2. 유지보수 용이
  3. 검색 엔진 최적화(SEO)
  4. 접근성 향상
  5. 미래 확장성

웹 표준의 핵심 요소

  • 구조(HTML)
    • DOCTYPE 선언
    • 시맨틱 태그 사용 (header, nav, main, section, article, footer)
  • 표현(CSS)
    • 구조와 스타일 분리
  • 동작(JavaScript)
    • 이벤트 기반 처리

⇒ 구조·표현·동작의 분리 원칙

웹 접근성 (Web Accessibility)이란

장애가 있거나 다양한 환경에 있는 사용자도 웹을 문제없이 사용할 수 있도록 하는 것 ⇒ 누구나 동등하게 웹을 이용할 수 있도록 하는 것

관련 국제 기준

WCAG (Web Content Accessibility Guidelines) : 웹 콘텐츠 접근성 지침

  • W3C에서 제정
  • 전 세계 표준 가이드라인
  • 4가지 원칙: | 원칙 | 의미 | | ————– | ————— | | Perceivable | 인식 가능 | | Operable | 조작(운용) 가능 | | Understandable | 이해 가능 | | Robust | 견고성/내구성 |

웹 접근성의 핵심 실천 요소

  • 대체 텍스트 제공 
    <img src="logo.png" alt="회사 로고" />

    ⇒ 스크린 리더 지원

  • 키보드 접근 가능
    • 마우스 없이 Tab 키로 이동 가능해야 함
    • 버튼, 링크는 포커스 가능해야 함
  • 명확한 시맨틱 구조 
    <button>저장</button>

    X <div onclick="..."> O <button>

  • 명도 대비 확보
    • 텍스트와 배경의 대비 충분해야 함
    • WCAG 대비 기준 준수
  • 폼 레이블 연결 
    <label for="email">이메일</label> <input id="email" />

웹 표준 vs 웹 접근성 차이

구분 웹 표준 웹 접근성
목적 기술 규격 준수 사용자 접근 보장
대상 브라우저, 개발자 사용자
핵심 표준 기술 사용 장애 포함 모든 사용자 고려
관계 접근성의 기반 표준 위에서 실현

⇒ 웹 표준은 접근성의 기초다.

추가) ARIA (Accessible Rich Internet Applications)

HTML만으로 부족할 때 사용

<div role="button" aria-label="닫기 버튼"></div>

⇒ 스크린 리더 보조

⇒ 가능하면 시맨틱 태그 먼저 사용

추가) SEO와의 연결

  • 시맨틱 태그 → 검색엔진 이해도 상승
  • alt 속성 → 이미지 검색 반영
  • 구조화된 문서 → 크롤링 효율 증가

⇒ 접근성과 SEO는 연결되어 있다.

참고자료

  • https://goddaehee.tistory.com/244
  • http://google.com/search?q=%EC%9B%B9+%ED%91%9C%EC%A4%80&oq=%EC%9B%B9+%ED%91%9C%EC%A4%80&gs_lcrp=EgZjaHJvbWUyCQgAEEUYORiABDIHCAEQABiABDIHCAIQABiABDIHCAMQABiABDIHCAQQABiABDIHCAUQABiABDIHCAYQABiABDIGCAcQABgeMgYICBAAGB4yBggJEAAYHtIBCTM1MjVqMGoxNagCCLACAfEFZl87uLN3nRs&sourceid=chrome&ie=UTF-8
  • https://adeveloperstory.tistory.com/entry/Web-Standards%EC%9B%B9-%ED%91%9C%EC%A4%80-%EC%9D%84-%EC%A7%80%ED%82%A4%EB%8A%94-%EC%9D%B4%EC%9C%A0-%EA%B7%B8%EB%A6%AC%EA%B3%A0-web-accessibility%EC%9B%B9-%EC%A0%91%EA%B7%BC%EC%84%B1%EC%9D%B4%EB%9E%80
  • https://velog.io/@jos9187/%EC%9B%B9-%ED%91%9C%EC%A4%80%EA%B3%BC-%EC%9B%B9-%EC%A0%91%EA%B7%BC%EC%84%B1%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C

results matching ""

    No results matching ""