웹 표준 / 웹 호환성 / 웹 접근성의 개념과 차이점

Janet·2023년 9월 6일
0

Web Development

목록 보기
8/19
post-thumbnail

웹 표준 / 웹 호환성/ 웹 접근성


1. 웹 표준(Web Standards)

  • 웹 표준은 웹 페이지, 웹 애플리케이션을 만들 때 따라야 하는 규칙과 규격의 모음으로, 이러한 표준은 W3C(World Wide Consortium)와 같은 표준화 단체에서 정의하며, 웹 사이트 개발에 필요한 HTML, CSS, JavaScript 등에 대한 규정을 담고 있다.

  • 웹 표준은 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 표준화 된 언어를 사용함으로써 동일한 결과물을 보여주는 웹 페이지 제작 기법이다.

  • 웹 표준의 목적은 웹사이트에 접속한 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 동일한 결과를 보이게 하는 것이다.

  • 웹 표준을 준수함으로써 웹 개발자는 웹 페이지를 다양한 브라우저와 플랫폼에서 일관되게 표현할 수 있으며, 코드를 더 잘 이해하고 유지보수할 수 있다.


2. 웹 호환성 (Cross Browsing / Cross Browser Compatibility)


  • 웹 호환성은 웹 페이지 또는 웹 애플리케이션을 여러 브라우저와 디바이스에서 일관되게 동작하도록 보장하는 것을 의미한다.

  • 다양한 브라우저(Chrome, Firefox, Safari, Edge 등)와 디바이스(모바일, 데스크탑, 태블릿 등)에서 웹 페이지가 올바르게 표시되고 작동하도록 개발되어야 한다. 따라서 웹 개발자는 웹 호환성을 보장하기 위해서 웹 표준을 준수한 CSS, HTML, JavaScript 언어 및 문법을 사용하여야 할 것이다.


3. 웹 접근성 (Web Accessibility)


  • 장애인, 고령자 등 모든 사용자가 웹사이트에서 제공하는 모든 정보, 즉 웹 콘텐츠에 동등하게 접근하고 상호 작용 할 수 있도록 보장하는 것을 의미합니다.

  • 웹 접근성은 웹 콘텐츠의 구조와 디자인, 키보드 및 스크린 리더 사용에 대한 고려와 조치를 포함한다.

  • 웹 사이트는 웹 접근성 지침에 따라 개발되어야 하며, 이를 준수함으로써 모든 사용자에게 평등한 접근 기회를 제공할 수 있다.

웹 접근성 지침을 따르기 위한 방법들

  • W3C에서 제시하는 웹 콘텐츠 지침인 WCAG(Web Content Accessibility Guidelines: 웹 콘텐츠 접근성 가이드라인) 및 웹 표준을 이해하고 준수해야 한다.

  • 키보드 접근성: 웹 사이트는 키보드만으로 탐색 및 상호 작용이 가능해야 한다. 키보드 포커스 관리와 키보드 이벤트 처리에 대한 이해가 필요하다.

  • 접근성 테스트 도구: 웹 접근성을 평가하고 수정하기 위한 도구를 사용한다. (Lighthouse, axe, Chrome DevTools의 Accessibility 탭 등)

  • 스크린 리더 사용 경험: 시각 장애인이 사용하는 스크린 리더 도구를 경험하여 웹 접근성을 테스트하고 개선하는 데 도움이 된다.

  • 폼(form)과 레이블(label) element 사용: 폼 element에 레이블 요소(lable element)를 제공한다. 이로 인해 스크린 리더 사용자는 label을 통해 폼 컨트롤과 관련된 텍스트를 알 수 있다. 또한 label을 사용하면 키보드로 폼 컨트롤에 포커스를 이동 가능하다.

  • 반응형 레이아웃 (유동적인 레이아웃): 다양한 화면 크기와 기기에 대응하기 위해 반응형 레이아웃 및 유동적 디자인을 구현해야 한다.


📌 요약


  • 웹 표준: 웹 기술의 명세를 정의하고 준수를 촉구한다.

  • 웹 호환성: 다양한 브라우저와 디바이스에서의 웹 콘텐츠 호환성을 유지하는 데 중점을 둔다.

  • 웹 접근성: 모든 사용자에게 웹 콘텐츠 접근 기회를 제공하도록 하는 데 중점을 둔다.

👉🏻 이러한 원칙들을 고려하면 사용자에게 보다 높은 품질의 웹 경험을 제공할 수 있고, 웹 개발자 입장에서도 일관된 규칙으로 코드를 작성함으로써, 이해하기 쉽고 유지보수에도 용이할 것이다.

profile
😸

0개의 댓글