상세 컨텐츠

본문 제목

02. 웹접근성, 웹표준화

Diary about code

by developia_yeso 2025. 2. 19. 15:52

본문

웹접근성과 웹표준화의 상관관계는 아주 밀접하다. 

현재 웹개발과 관련해 실무를 하고있는 이들에겐 어쩌면 매우 당연하게 여겨질만한 요소를 준수해야하는 까닭을 살펴보기로 한다.

 

1. 웹접근성(Web Accessibility)이란?

웹 접근성은 장애를 가진 사람들이나 특정 환경에 있는 사람들이 웹사이트나 웹 애플리케이션을 사용할 수 있도록 하는 디자인 및 개발의 원칙을 의미. 모든 사용자가 웹을 이용할 수 있도록 보장하는 중요한 요소로 이를 통해 신체적, 인지적, 또는 기술적 제약을 가진 사람들도 웹 사이트를 원활하게 탐색하고 상호작용할 수 있다.

 

웹 접근성의 주요 목적:

  1. 장애를 가진 사람들 (시각 장애, 청각 장애, 운동 능력 저하 등)을 위해 웹을 쉽게 사용할 수 있게 만드는 것.
  2. 모든 사람에게 동등한 사용자 경험 제공: 신체적 제약이 있는 사용자뿐만 아니라, 네트워크 속도가 느리거나, 특정 장치나 브라우저를 사용하는 사용자까지도 웹을 쉽게 이용하도록 하는 것.
  3. 법적 요구 사항 충족: 일부 국가에서는 웹 접근성을 법적으로 요구하고 있으며, 이를 준수하는 것이 중요.

 

웹 접근성을 높이는 방법:

- 텍스트 대체: 이미지에는 대체 텍스트(alt text)를 추가하여 화면 읽기 프로그램이 이미지를 설명.  

                      ex. <img src="" alt="closeBtn">

- 키보드 접근성 : 마우스를 사용하지 않고도 모든 기능을 키보드만으로도 사용할 수 있도록 설계.

- 명확한 레이아웃: 사용자에게 명확한 내비게이션을 제공하고, 내용의 구조가 논리적이고 일관되게 설계. 

  ex. header, navigation, footer, aside 등등 명확한 레이아웃을 제시

- 색상 대비: 텍스트와 배경의 색상 대비를 충분히 높여, 색상에 민감한 사용자도 쉽게 읽을 수 있도록 설계.

- 스크린 리더와 호환성: 스크린 리더를 사용하는 사용자들을 위해 웹 페이지의 구조를 올바르게 마크업하고, 적절한 ARIA(Accessible Rich Internet Applications) 속성을 추가하여 접근성 향샹. 

ex. 태블릿, 모바일같은 환경에서도 동일하게 동작. 예를 들어, JavaScript로 동적으로 생성된 콘텐츠가 있으면, ARIA 속성(aria-live, aria-label 등)을 사용해 스크린 리더가 그 변화를 감지하고 적절하게 읽을 수 있도록 호환.

 

 

2. 웹 표준화 (Web Standards) 란? 

웹 표준화는 웹 기술(HTML, CSS, JavaScript 등)을 개발하고 사용할 때, 국제 표준 기구인 **W3C(World Wide Web Consortium)**가 정의한 규칙을 따르는 것을 의미. 웹 표준을 준수하면 웹사이트가 다양한 브라우저와 장치에서 일관되게 동작하고, 유지보수 및 확장성 측면에서 유리하다.

 

웹 표준화의 주요 목적:

  1. 호환성: 웹 표준을 따르는 웹사이트는 다양한 웹 브라우저(Chrome, Firefox, Safari, Edge 등)와 다양한 디바이스(모바일, 데스크탑, 태블릿 등)에서 일관되게 동작 ex. 크로스브라우징
  2. 유지보수 용이성: 표준에 맞춰 개발된 코드는 다른 개발자들이 쉽게 이해하고 수정할 수 있어 유지보수가 용이
  3. 검색엔진 최적화(SEO): 웹 표준을 따르는 웹사이트는 검색 엔진에서 더 잘 인식되며, SEO 측면에서 유리.
  4. 웹 성능 최적화: 웹 표준을 따를 경우, 코드가 간결하고 효율적으로 작성되기 때문에 웹 페이지의 로딩 속도가 빨라지며, 사용자 경험이 개선.

웹 표준화의 주요 기술:

- HTML (HyperText Markup Language): 웹 페이지의 구조를 정의. HTML5는 웹 표준에서 가장 최신 버전으로, 다양한 기능을 지원.

- CSS (Cascading Style Sheets): HTML로 구조화된 웹 페이지의 디자인을 담당. CSS3는 애니메이션, 그라디언트, 반응형 웹 디자인 등 다양한 기능을 제공.

- JavaScript: 웹 페이지에 동적인 기능을 추가. ES6 이상의 버전은 웹 표준에 부합하는 최신 자바스크립트 문법을 제공.

- ARIA (Accessible Rich Internet Applications): 동적인 웹 애플리케이션을 사용할 때, 스크린 리더와 같은 보조 기술이 내용을 이해할 수 있도록 돕는 웹 표준.

- W3C 검증 도구: 웹 표준을 준수하고 있는지 확인하는 데 사용하는 도구로, W3C의 HTML 및 CSS 검증기를 이용하여 웹 코드가 표준에 맞게 작성되었는지 검사가능.

 

웹 접근성과 웹 표준화의 관계

웹 접근성과 웹 표준화는 서로 밀접하게 연결되어 있다. 웹 표준을 준수하는 것은 웹 접근성을 높이는 데 중요한 역할을 하는데 예를 들어, HTML5와 CSS3 표준을 따르는 것은 웹사이트가 다양한 장치와 브라우저에서 잘 동작하도록 하며, 이를 통해 접근성이 개선된다.

  • 웹 표준을 따르는 코드는 다양한 브라우저에서 일관된 사용자 경험을 제공하며, 장애를 가진 사용자가 스크린 리더와 같은 도구를 사용할 때 더 나은 경험을 제공할 수 있게 도와준다.
  • 웹 접근성을 고려한 디자인은 웹 표준을 잘 준수한 코드로 구현될 때 최적의 효과를 발휘한다.

 

요약

  1. 웹 접근성은 장애를 가진 사용자가 웹을 원활하게 이용할 수 있도록 하는 개념으로, 웹사이트의 사용성을 향상시키는 중요한 요소이다.
  2. 웹 표준화는 웹 기술을 규격에 맞게 사용하여 웹사이트가 다양한 환경에서 일관되게 동작하도록 보장하는 개념이다.

두 개념은 상호 보완적인 관계에 있으며, 웹을 더 많은 사람들이 사용할 수 있도록 만들기 위한 필수적인 요소이다. 

'Diary about code' 카테고리의 다른 글

03. SEO(검색 엔진 최적화)에 적합한 코드  (0) 2025.03.21

관련글 더보기