Post

웹 표준과 웬 접근성

Posted Updated
Preview Image
By sunhew 12 min read

HTML & CSS

해당 포스팅에서는 웹 표준과 접근성을 다룹니다.

HTML & CSS 목차

  • 웹 표준, 웹 접근성 ✔️
  • 반응형 작업
  • 레거시 코드, IR 효과 시멘틱 태그
  • CSS 우선순위, Position 속성
  • block, inline-block, inline 차이
  • data 속성
  • seo, 최적화 방법, ID vs class 차이

웹 표준

웹 표준의 개념

웹 표준은 웹 기술의 일관성, 호환성, 접근성, 유지보수성 을 보장하기 위해 국제적인 표준화 기구에서 제정한 규격과 지침을 말합니다. 웹 표준을 준수하면 웹 사이트가 다양한 브라우저와 장치에서 일관되게 표시되고, 다양한 사용자들이 쉽게 접근이 가능하다는 장점이 있습니다.

주요 구성 요소

HTML (HyperText Markup Language)

  • 웹 페이지의 구조를 정의하는 마크업 언어입니다. HTML은 웹 페이지의 콘텐츠와 그 구조를 기술 합니다.
  • 최신 표준은 HTML5 이며 멀티미디어 요소(비디오, 오디오) 와 그래픽(Canvas), 웹 애플리케이션 기능(로컬 저장소, 오프라인 작업) 을 지원합니다.

CSS (Cascading Style Sheets)

  • 웹 페이지의 스타일과 레이아웃을 정의 합니다. CSS는 HTML의 구조와 콘텐츠를 시각적으로 꾸미기 위해 사용됩니다.
  • 최신 표준은 CSS3로, 애니메이션, 그리드 레이아웃, 플렉스박스 와 같은 고급 레이아웃 기능을 포함합니다.

JavaScript

  • 웹 페이지에 동적인 기능을 추가 하기 위해 사용되는 프로그래밍 언어입니다.
  • 최신 표준은 ECMAScript 2023 로, 비동기 프로그래밍, 모듈화, 최신 문법과 기능을 포함 합니다.

ARIA (Accessible Rich Internet Applications)

  • 웹 콘텐츠 와 웹 애플리케이션의 접근성 을 높이기 위한 표준입니다.
  • 스크린 리더와 같은 보조 기술 이 웹 페이지의 내용을 더 잘 이해하고 해석 할 수 있게 합니다.

XML (eXtensible Markup Language)

  • 데이터를 저장하고 전송 하는 데 사용되는 마크업 언어로, HTML과 유사하지만 데이터의 의미와 구조를 정의하는 데 중점 을 둡니다.

관련 기구

W3C (World Wide Web Consortium)

  • 웹 표준을 개발하고 유지 관리하는 주요 기구 입니다. HTML, CSS, ARIA 등의 표준을 제정 합니다.
  • 웹 접근성 이니셔티브(WAI) 와 같은 프로젝트를 통해 접근성을 향상 시키는 지침을 제공합니다.

WHATWG (Web Hypertext Application Technology Working Group)

  • HTML5 표준을 처음 개발한 그룹 으로, W3C와 협력 하여 웹 기술의 발전을 주도합니다.
  • HTML과 DOM 표준을 지속적으로 업데이트 하고 있습니다.

ECMA International

  • JavaScript의 표준인 ECMAScript 를 관리하는 국제 표준화 기구입니다.

중요성

호환성

  • 다양한 브라우저와 장치에서 일관되게 웹 콘텐츠를 제공 할 수 있습니다.
  • 브라우저 간의 호환성 문제를 줄이고, 유지보수를 용이 하게 합니다.

접근성

  • 장애가 있는 사용자들도 웹 콘텐츠에 접근할 수 있도록 보장 합니다.
  • 법적 요구사항을 준수하고, 더 넓은 사용자 층에 도달할 수 있습니다.

미래 보장성

  • 표준을 준수하면 새로운 기술과 브라우저 업데이트에 쉽게 대응 할 수 있습니다.
  • 코드의 가독성과 유지보수성이 향상되어 장기적인 관점에서 유리 합니다.

검색 엔진 최적화 (SEO)

  • 표준을 준수 하면 검색 엔진이 웹사이트를 더 잘 크롤링하고 인덱싱할 수 있어 검색 결과 상위에 노출될 가능성이 높아집니다.

웹 접근성

웹 접근성의 개념

웹 접근성(Web Accessibility)은 장애를 가진 사람을 포함한 모든 사용자들이 웹 콘텐츠와 서비스를 쉽게 접근하고 사용할 수 있도록 보장 하는 것을 의미합니다. 웹 접근성은 웹사이트, 애플리케이션, 전자문서 등 모든 형태의 디지털 콘텐츠에 적용 됩니다. 접근성을 높이기 위해 다양한 기술과 지침이 존재하며, 이는 사용자의 다양성을 포용하고, 더 넓은 사용자층에 도달할 수 있도록 돕습니다.

웹 접근성의 중요성

법적 준수

  • 많은 나라에서 웹 접근성은 법적으로 요구 됩니다. 예를 들어, 미국의 경우 ADA(Americans with Disabilities Act)와 Section 508 규정이 있으며, 유럽에서는 EN 301 549 표준이 있습니다.

사회적 책임

  • 장애가 있는 사용자들도 비장애인과 동등하게 웹에 접근 할 수 있도록 하는 것은 사회적 책임이며, 포용적인 사회를 만드는 데 기여합니다.

비즈니스 이점

  • 접근성이 높은 웹사이트는 더 넓은 사용자층에 도달 할 수 있습니다. 또한, 검색 엔진 최적화(SEO) 에도 긍정적인 영향을 미쳐 더 많은 방문자를 유도할 수 있습니다.

웹 접근성 지침

웹 접근성을 보장하기 위해 다양한 지침이 존재합니다. 대표적인 지침은 W3C의 웹 콘텐츠 접근성 지침(Web Content Accessibility Guidelines, WCAG)입니다.

WCAG 원칙

WCAG는 다음 네 가지 원칙에 기반합니다.

지각할 수 있게.(Perceivable)

  • 정보와 사용자 인터페이스 구성 요소는 사용자가 인식할 수 있어야 합니다. 예를 들면 시각적 콘텐츠에 대한 대체 텍스트를 제공하거나 동영상에 자막을 제공 하는것입니다.

운용할 수 있는(Operable)

  • 사용자 인터페이스 구성 요소와 네비게이션은 사용자가 조작할 수 있어야 합니다. 예를 들면 키보드만으로도 모든 기능을 사용 할 수 있게 하거나 충분한 시간 내에 콘텐츠를 읽고 상호작용할 수 있도록 합니다.

이해할 수 있는(Understandable)

  • 정보와 사용자 인터페이스의 작동 방식은 사용자가 이해할 수 있어야 합니다. 예를 들어 일관된 내비게이션 구조를 제공 하거나, 쉽게 이해할 수 있는 언어를 사용 하는 것입니다.

견고한(Robust)

  • 콘텐츠는 시간이 지나도 다양한 사용자 에이전트(브라우저, 보조 기술 등)에서 견고하게 작동해야 합니다. 최신 표준을 준수하고, 다양한 기술에서 호환성을 유지 하는것이 중요합니다.

접근성을 위한 기술 및 기법

대체 텍스트(Alt Text)

  • 이미지, 비디오, 오디오 컨텐츠에 대해 텍스트 대체물을 제공 하여 시각장애인도 내용을 이해 할 수 있게 합니다.

자막 및 대본 제공

  • 동영상 콘텐츠에 자막을 제공 하고, 오디오 콘텐츠에 대본을 재공 하여 청각장애인도 콘텐츠를 접근할 수 있게 합니다.

키보드 내비게이션

  • 모든 기능을 키보드만으로 사용할 수 있도록 설계 하여, 마우스를 사용할 수 없는 사용자도 웹 사이트를 사용 할 수 있게 합니다.

명확안 구조와 레이아웃

  • 헤딩 태그를 사용하여 콘텐츠의 구조를 명확히 하고, 일관된 내비게이션 메뉴를 제공 하여 사용자가 쉽게 웹사이트를 탐색할 수 있게 합니다.

색상 대비

  • 텍스트와 배경 간의 충분한 색상 대비를 제공 하여 시각장애인, 특히 색맹 사용자도 내용을 쉽게 읽을 수 있게 합니다.

시용자 제어

  • 자동 재생 미디어, 자동 갱신 콘텐츠 등의 사용자 제어를 제공 하여, 사용자가 필요에 따라 콘텐츠를 조작할 수 있게 합니다.
html & css
html&css html css 웹표준 웹접근성
This post is licensed under CC BY 4.0 by the author.