Post

웹표준과 웹접근성

Posted Updated
Preview Image
By kimyih 9 min read

웹표준과 웹접근성

웹표준

웹 표준(Web Standards)이란 웹 사이트 및 웹 페이지가 서로 다른 브라우저, 기기, 운영 체제에서 일관되게 작동하고, 접근 가능하며, 지속 가능하게 유지될 수 있도록 만드는 규칙이나 지침을 말합니다.
웹 표준은 전 세계의 웹 개발자들이 통일된 기술을 사용할 수 있도록 하여, 웹 개발의 복잡성을 줄이고 호환성을 높입니다.

쉽게 설명하자면 웹사이트가 다양한 브라우저나 기기에서도 문제없이 잘 작동하도록 만드는 규칙과 지침을 말합니다.

주요 웹표준 기관

1. 월드 와이드 웹 컨소시엄(W3C):

HTML, CSS 등을 포함한 다양한 웹 기술 표준을 개발합니다.

2. 인터넷 엔지니어링 태스크 포스(IETF):

인터넷 프로토콜(IP)이나 전송 제어 프로토콜(TCP) 같은 인터넷 통신 표준을 다룹니다.

3. 웹 하이퍼텍스트 애플리케이션 기술 워킹 그룹(WHATWG):

HTML과 웹 애플리케이션의 표준을 주도적으로 개발합니다.


웹표준의 장점

장점설명
호환성다양한 브라우저와 기기에서 일관된 경험을 제공합니다.
접근성모든 사용자, 특히 장애를 가진 이용자가 웹사이트를 더 쉽게 이용할 수 있도록 합니다.
검색 엔진 최적화웹 표준을 준수한 웹사이트는 검색 엔진에 의해 더 잘 이해되고 더 높은 순위를 얻을 수 있습니다.
유지 보수 용이성코드가 표준에 따라 구축되면 수정과 업데이트가 쉬워지며, 다른 개발자가 이해하고 관리하기 편리합니다.
성능 향상최적화된 코드 작성은 페이지 로딩 시간을 줄이고 전반적인 웹사이트의 성능을 향상시킵니다.
경제적 비용 절감여러 브라우저와 기기에서의 테스트 및 디버깅 시간을 줄여 개발 비용을 절감할 수 있습니다.


웹표준 준수하기

📌 웹표준을 준수하기 위해선 몇 개의 조건이 있습니다.
함께 알아보도록 합시다!

1. DOCTYPE 선언


image

HTML/CSS/JavaScript 최신 표준 사용

HTML5, CSS3, ECMAScript 6 이상의 최신 버전을 사용하여 문서를 작성합니다. 문서의 구조, 스타일, 동작이 각각 명확하게 분리되어야 합니다(HTML은 구조, CSS는 스타일, JavaScript는 동작 처리).


2. 시맨틱 태그 사용


image

HTML 요소를 문서의 의미와 내용에 맞게 적절히 사용합니다.
예를 들어, 단순히 시각적 스타일링을 위해 <div>나 <span>을 남발하지 않고, <header>, <footer>, <article>, <section> 등의 요소를 적절히 활용합니다.


3. CSS 스타일 시트 따로 사용

image image

CSS 스타일 시트를 사용하여 디자인과 레이아웃을 분리하고, 웹 페이지의 내용과 디자인을 분리하여 유지보수 및 확장성을 높일 수 있습니다.

웹접근성

웹 접근성(Web Accessibility)은 장애가 있는 사람들을 포함하여 모든 사용자가 웹을 사용할 수 있도록 보장하는 관행입니다. 이는 웹사이트, 도구, 기술이 장애의 유형(시각, 청각, 운동, 인지 등)에 상관없이 모든 사람들에게 이용 가능해야 한다는 원칙을 포함합니다. 웹 접근성은 사용자의 다양한 요구와 상황을 고려하여 디자인과 개발이 이루어져야 함을 의미합니다.


웹접근성 준수하는 방법

시맨틱 마크업: 적절한 HTML 요소를 사용하여 콘텐츠의 의미를 명확하게 합니다.

키보드 접근성: 모든 기능이 키보드만으로도 사용 가능하도록 합니다.

대체 텍스트 사용: 이미지와 같은 비텍스트 콘텐츠에는 대체 텍스트를 제공하여 시각 장애가 있는 사용자도 콘텐츠를 이해할 수 있도록 합니다.

ARIA 사용: 복잡한 UI 구성 요소(탭, 메뉴, 알림 등)에 대해 접근성을 향상시키기 위해 WAI-ARIA 롤과 속성을 적절히 사용합니다.


웹접근성의 중요 요소

중요 요소설명
인식의 용이성정보와 사용자 인터페이스 구성 요소는 모든 사용자가 쉽게 인식할 수 있도록 제공되어야 합니다. 예를 들어, 시각 장애가 있는 사용자를 위해 이미지에는 대체 텍스트가 제공되어야 합니다.
운용의 용이성사용자 인터페이스와 탐색은 모든 사용자가 쉽게 조작할 수 있어야 합니다. 이는 키보드 만으로도 모든 기능을 사용할 수 있어야 한다는 것을 포함합니다.
이해의 용이성정보와 사용자 인터페이스의 사용 방법은 모든 사용자가 쉽게 이해할 수 있어야 합니다. 명료하고 예측 가능한 내용 제공이 필요합니다.
견고성콘텐츠는 다양한 사용자 에이전트(예: 웹 브라우저, 스크린 리더 등)를 통해 신뢰성 있게 해석될 수 있어야 합니다.


웹접근성 준수의 이점

  • 법적 요구 사항 충족 : 많은 국가에서 웹 접근성은 법적으로 요구됩니다. 이를 준수하지 않으면 법적 조치를 받을 수 있습니다.

  • 시장 확대 : 장애를 가진 사용자를 포함한 더 넓은 범위의 사용자들이 서비스를 이용할 수 있게 되므로, 잠재적인 시장을 확대할 수 있습니다.

  • 사용자 경험 향상 : 웹 접근성을 고려하여 제작된 웹사이트는 일반적으로 모든사용자에게 더 나은 사용자 경험을 제공합니다

HTML/CSS
HTML/CSS
This post is licensed under CC BY 4.0 by the author.