웹 표준과 웹 접근성이란?

웹 표준(Web Standards)이란?

어떤 운영체제나 브라우저에서든 동일한 콘텐츠를 볼 수 있도록 웹페이지를 만들때 지켜야 하는 규칙을 말한다.

여기서 동일한 콘텐츠는 같은 내용이 아니라 모든 플랫폼(OS, 브라우저)에서 동등한 수준의 정보를 의미한다.

웹 표준은 팀 버너스 리(웹의 아버지)를 중심으로한 조직의 토론으로 결정되었다. 특정 브라우저에서만 동작하는 태그나 기능 같은 경우 웹 표준에서 벗어난다.

---

왜 웹 표준이 필요할까??

1990년대 후반에서 2000년대 초반까지 넷스케이프와, 인터넷 익스플로러등 다양한 브라우저들이 나타나기 시작했다.

그로 인해 과도한 경쟁이 발생했고, 개발자는 모든 브라우저에서 동작하는 웹을 따로따로 만들어야 했었다.

이를 해결하기 위해 W3C라는 공식웹표준기구가 설립되었고, 이를 통해 각 브라우저에서도 동일한 콘텐츠를 볼 수 있는 환경이 조성 되었으며, 스마트폰이 등장하면서 다양한 OS와 브라우저에서 일관되게 동작하는 웹 페이지의 필요성이 더욱 중요해졌습니다.

웹 표준의 장점

• 크로스 브라우징: 웹 접근성을 향상시켜 다양한 브라우저에서 코드가 일관되게 해석되어, 모든 사용자에게 동일한 경험을 제공합니다.
• SEO(검색 엔진 최적화): 올바르게 구조화된 웹 페이지는 검색 엔진이 페이지를 더 잘 이해하고, 검색 순위에 긍정적인 영향을 미칩니다.
• 유지보수성: 표준화된 코드베이스는 협업 시 가독성과 수정이 용이하며, 추후 버그 수정이나 기능 확장이 쉬워집니다.

---

웹 접근성(Web Accessibility)이란?

웹 사이트에서 제공하는 정보를 차별 및 제한없이 동등하게 이용할 수 있도록 보장하는 것을 말한다. 정보를 차별 및 제한없이 동등하게 제공한다는 것은 신체적 조건이나 환경적 조건에 관계없이 제공해 달라는 것을 의미한다. 신체적 조건이란 장애인 및 고령자를 포함한 모든 사람과 다양한 Platform및 Device와 웹브라우저 등 모든 환경을 말한다. 즉, 신체적조건이나 환경적 조건에 관계없이 웹에 접근해서 정보를 이용할 수 있도록 보장해 달라는 것이 웹 접근성의 기본 개념이다.

 

---

왜 웹 접근성을 준수 해야 할까?

한가지 사례를 보자면, 대부분의 사람들은 장애인은 게임이라든가, 특정 서비스를 이용하지 못할 것이라고 오해하게 된다. 그러나 장애인도 비장애인처럼 똑같이 게임을 즐기고자 하는 욕구를 가지고 있고, 또한 게임을 즐길 수 있는 능력이 있다. 시각 장애인은 스크린 리더라는 프로그램을 통해 웹 페이지를 읽을 수 있다.

 

- 스크린 리더(Screen Reader)는 시각장애인과 저시력자들이 컴퓨터, 스마트폰, 태블릿 등 다양한 디지털 기기를 사용할 수 있도록 돕는 보조 기술이다.
- 화면에 표시된 텍스트와 UI 요소를 음성으로 읽어주거나 점자 디스플레이에 출력하여 시각 정보에 접근할 수 있도록 도와준다.

 

웹의 힘은 보편성에 있다. 장애에 관계없이 모든 사람이 접근할 수 있도록 하는 것이 필수적인 요소이다.
                                                                                                                                                   
[ 웹의 아버지 - 팀 버너스 리 ]

 

또한, 웹 접근성을 지켜야 하는 이유로는 법적 의무도 있다.

 

웹 접근성 보장은 「국가정보화기본법」과 「장애인차별금지 및 권리구제 등에 관한 법률(이하 "장애인차별금지법")」등 법률에 명시된 의무사항입니다. 특히 장애인차별금지법은 행위자에 대한 단계적 범위를 명확히 하였으며, 불이행시 처벌 등이 구체적으로 성문화된 법입니다. 이에 따라 모든 공공기관은 2009년 4월 11일 부터 웹 접근성을 준수해야 하고, 단계적으로 2015년까지 모든 웹 사이트가 웹 접근성을 준수해야 합니다.

 

마지막으로, 운전 중이거나 소음이 많은 곳에서 일하는 경우 등 웹 사용자가 처한 환경에 따라 제한받는 경우도 고려할 필요가 있다. 장애인뿐아니라 고령자, 어린이등 보다 넓은 범위 이용자를 포함하고 있음을 알 수 있다.

 

이처럼, 웹과 앱의 접근성을 높여주어 더 많은 사용자가 디지털 환경을 누릴 수 있도록 돕는 중요한 기술이다. 웹 개발자는 스크린 리더와 같은 보조 기술을 지원하기 위해 웹 접근성 표준을 따르는 것이 중요하다.

---

어떻게 하면 웹 접근성이 높아질까?

• HTML 코드에서 시맨틱 태그를 일관성 있게 사용하기
  • 시맨틱 태그를 사용하면 스크린 리더 등 보조 기술이 페이지 구조를 이해하기 쉬워진다. 예를 들어 <header>, <nav>, <main>, <footer>와 같은 태그를 적절하게 사용하여 정보의 구조를 명확히 한다.
• 웹 표준을 준수하도록 HTML, CSS 검사기(validator)를 통해 오류를 확인하기
  • W3C HTML Validator와 CSS Validator를 통해 코드의 오류를 확인하고, 표준을 준수하도록 개선한다. 코드의 일관성 및 호환성을 높여 모든 사용자가 접근할 수 있도록 한다.
• 웹 접근성을 고려해 시맨틱 태그와 올바른 속성을 사용하는 습관 기르기
  • ARIA 속성 등을 활용하여 버튼, 링크 등 중요한 요소에 적절한 설명을 추가한다. 예를 들어, 이미지에 alt 속성을 사용해 설명을 추가하고, 버튼에는 명확한 역할을 표시한다.

대표적인 시맨틱 태그
header: 웹 사이트의 로고나 사용자들을 위한 중요한 메뉴 아이템들을 담는 태그
nav: header안에 존재하는 여러가지 메뉴를 담는 태그
footer: 웹 페이지 하단에 링크나 페이지 정보를 담는 태그
main: 웹 페이지에서 중요한 콘텐츠를 담는 태그
aside: main태그 안에서 페이지 컨텐츠와 직접적으로 연관된 정보가 아닌 정보를 담는 태그(광고, 페이지와 연관된 링크를 담아 낼 수 있음)
article: 블로그 포스트에서 포스트하나, 신문 기사에서 기사 하나를 묶어 내는 것과 같은 경우에 사용한다. 독립적으로 다른 페이지에서 보여져도 문제가 없는 정보에 사용한다. main안에서 다른 정보들과 상관없이 고유한 정보를 나타내고 싶을 때 사용한다.
section: 연관있는 정보를 하나로 묶어 줄 때 사용한다.

---

웹 표준, 웹 접근성, 시맨틱 태그는 각각 독립적인 개념이지만 상호 깊이 연결되어 있다. 시맨틱 태그를 잘 사용하면 웹 표준을 지킬 수 있고, 웹 표준을 준수하면 웹 접근성이 높아지며, 이는 검색 엔진 최적화에도 도움이 된다. 결국 웹 표준과 웹 접근성 모두 사용자를 위한 것이며, 사용자에게 어떤 어려움이 있을지, 어떻게 해결할 수 있을지 고민하는 것이 더 나은 웹 환경을 만드는 첫걸음이다.

 

---

사진출처

https://nuli.navercorp.com/education/accessibility

NULI

https://yozm.wishket.com/magazine/detail/2495/

알아두면 쓸모 있는 '시맨틱 마크업' 개념 정리 | 요즘IT