웹 표준과 웹 접근성, 간단하게 알아보기

👾 웹 표준이란?

웹 표준은 어떠한 운영체제나 브라우저를 사용하여도 동일한 컨텐츠를 볼 수 있도록 웹에서 표준적으로 사용되는 기술이나 규칙이다.

→ 동일한 컨텐츠란 완벽히 똑같은 화면을 의미하는 것이 아닌, 모든 플랫폼에서 동등한 수준의 정보에 접근이 가능함을 의미하는 것이다.

웹 표준은 팀 버너스 리를 중심으로 한 W3C(World Wide Web Consortium)의 토론에 의해 결정된다.

크롬, 엣지, 사파리, 오페라, 파이어폭스 등 최신 웹 브라우저들은 모두 웹 표준을 지원한다. 따라서 웹 표준에 맞추어 웹 페이지를 작성하면 어떤 브라우저를 사용하든 동일한 결과물을 얻을 수 있다. 앞서 언급된 브라우저 호환 때문에 화면이 제대로 표시되지 않거나 기능이 작동하지 않는 등의 문제 상황을 방지할 수 있다. 따라서 가능한 웹 표준을 준수한 웹 페이지를 개발하기 위해서 노력하는 것이 좋다.

✔️ 웹 표준의 장점

1. 검색엔진 최적화에 용이

검색엔진 최적화란 웹 페이지가 검색 결과에서 좀 더 높은 순위가 나올 수 있도록 하는 작업을 의미한다. 웹 크롤러 봇은 웹 페이지를 탐색하여 분류하는데 의미를 가진 시맨틱 태그를 사용하는 등 표준을 지켜 웹페이지를 만들면 크롤러 봇이 좀 더 이해하기 쉬워진다. 이는 웹 페이지가 검색 결과 순위에서 더 높은 우위를 가져갈 수 있도록 한다.

2. 유지 보수의 용이성

웹 표준으로 HTML, CSS, JavaScript 등의 사용 방법을 정리하기 이전에는 구조, 표현, 동작이 뒤섞인 코드도 많았다. 그러다 보니 어느 한 부분을 수정하려면 전부 뜯어고쳐야 할 때도 있었다. 하지만 각 영역이 분리되면서 유지 보수가 용이해졌고, 코드가 경량화되면서 트래픽 비용이 감소하는 효과도 생겼다.

뿐만 아니라 브라우저와 os에 관계없이 하나의 코드로 모든 플랫폼에 대응할 수 있어 개발자 입장에서는 개발의 효율성을, 기업 입자에서는 서버 비용 절감과 운영의 효율성을 가져다 주게 되었다.

3. 웹 접근성 향상

브라우저의 종류, 운영 체제의 종류, 기기의 종류 등 웹에 접근할 수 있는 환경은 매우 다양하고, 웹을 사용하는 사람들도 다양하다. 이 모든 환경과 사용자에 맞춰서 웹 페이지를 개발하는 일은 쉽지 않지만 웹 표준에 맞춰 개발하는 것만으로도 이러한 문제를 해결할 수 있다.

웹 표준은 접근성 보조 도구가 웹을 좀 더 쉽게 이해할 수 있도록 해주기 때문에 웹 접근성을 높이는 것은 웹 표준을 지키는 것에서부터 시작된다.

4. 웹 호환성 확보

웹 사이트가 특정 운영체제나 브라우저에 종속적이라면 그 외 환경에서는 정상적으로 사용이 불가능한 문제점이 발생한다. 하지만 웹 표준을 준수하여 웹 사이트를 제작하면 웹 브라우저의 종류나 버전, 운영 체제나 사용 기기 종류에 상관없이 항상 동일한 결과가 나오도록 할 수 있다.

✔️ 웹 표준을 준수하는 방법

1. DOCTYPE 선언

웹 페이지 최상단에 DOCTYPE을 선언하여 웹 페이지가 어떤 버전의 HTML, XHTML을 사용하는지 명시한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML !DOCTYPE declaration</title>
</head>
<body>
    <p>이 문서는 HTML 문서입니다.</p>
</body>
</html>

2. 시맨틱 태그 사용

HTML5에서 새롭게 추가된 <header> <nav> <section> 등의 시맨틱 태그를 사용하여 웹 페이지의 구조를 더욱 명확하게 표현한다.

HTML5 시맨틱 요소 (Semantic Element)

👾 시맨틱 요소(Semantic Element)란 무엇일까? 시맨틱 요소(의미 요소, semantic element)란 그 자체로 의미를 가지고 있는 요소를 가리킨다. → semantic : 의미가 있는, 의미론적인 즉, 요소가 자기 스스로

fay-story.com

3. CSS 스타일 시트 사용

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

4. 웹 접근성 고려

웹 페이지를 만들 때 모든 사용자가 쉽게 접근할 수 있도록 웹 접근성을 고려하여 작업한다.

예를 들어 시각 장애인이 스크린 리더를 사용하여 웹 페이지를 읽을 수 있도록 alt 속성을 사용하여 이미지에 대한 설명을 제공하거나, 키보드만으로 모든 기능을 사용할 수 있도록 tabindex 속성을 사용하는 등의 세심한 작업이 필요하다.

👾 웹 접근성 (Web Accessibility) 이란?

웹 접근성이란 장애인이나 고령자 뿐만 아니라 모든 사용자들이 개인의 능력에 상관없이 웹 페이지의 정보에 접근할 수 있도록 보장하는 것을 의미한다.

예를들어, 시각 장애인은 스크린 리더라는 별도의 소프트웨어를 통해 음성으로 웹페이지에 담긴 정보를 이해한다. 스크린 리더는 스스로 웹페이지의 내용을 분석하지 못한다. 그렇기 때문에 만약 로그인 페이지의 디자인을 ‘로그인’이라는 텍스트 대신 로그인 이미지를 사용한다면, 그 이미지가 어떤 내용인지 alt 속성을 통해 설명을 추가해야 한다.

✔️ 웹 접근성을 갖추면 얻을 수 있는 효과

1. 사용자층 확대

웹 접근성을 확보하면 장애인, 고령자 등 정보 소외 계층도 웹 사이트를 자유롭게 이용할 수 있게 되기 때문에 그만큼 사이트의 이용자를 늘릴 수 있고, 새로운 고객층을 확보할 수 있게 된다. 실제로 웹 접근성 향상을 통해 매출이 증가한 외국 쇼핑몰 사례도 있으며, 국내 온라인 쇼핑몰에서도 노년층의 매출이 증가 추세를 보이고 있다.

2. 다양한 환경 지원

앞서 이야기했듯 정보 소외 계층이 아니더라도 정보에 접근하기 어려운 상황에 처할 수 있다. 웹 접근성을 향상 시키면 다양한 환경, 다양한 기기에서의 웹 사이트를 자유롭게 사용할 수 있게 되므로 서비스의 사용 범위가 확대된다. 자연스럽게 서비스의 이용자 수 증가를 기대할 수 있다.

3. 사회적 이미지 향상

기업의 사회적 책임에 대한 중요성이 점점 증가하고 있는 상황에서, 웹 접근성 확보를 통해 기업이 정보 소외 계층을 위한 사회 공헌 및 복지 향상에 힘쓰고 있음을 보여줄 수 있다. 기업의 사회적 이미지가 향상되면 그만큼 이용자 수의 증가는 물론 충성 고객을 확보할 수 있는 가능성이 늘어나게 된다.

✔️ 웹 접근성을 준수하는 방법

웹 접근성은 모든 사람이 인터넷을 이용할 수 있는 공간을 만들기 위한 중요한 요소이다.

따라서, 웹 개발자는 웹 접근성을 고려하여 웹 사이트를 구축하고, 이를 통해 모든 사용자들이 웹 사이트를 쉽게 이용할 수 있도록 노력해야 한다.

1. 시각적 요소 처리

시각 장애인은 이미지, 비디오, 그래픽 등을 인식할 수 없다. 따라서, 대체 텍스트, 적절한 색상 대비, 텍스트 크기 등을 고려하여 시각적 요소를 처리해야 한다.

2. 청각적 요소 처리

청각 장애인은 오디오 콘텐츠를 이해할 수 없다. 따라서, 자막, 수화, 오디오 설명 등을 제공하여 청각적 요소를 처리해야 한다.

3. 키보드 접근성

지체 장애인은 마우스를 사용하지 못하므로 키보드를 통해 웹 사이트를 이용해야 한다. 따라서, 키보드만으로 웹 사이트를 이용할 수 있도록 구현해야 한다.

4. 웹 접근성 검사

웹 사이트를 구축할 때, WCAG 준수 여부를 검사하여 웹 접근성을 확보할 수 있다.

📌 웹 콘텐츠 접근성 지침

↓ 한국형 웹 콘텐츠 접근성 지침 2.2 알아보기

웹 콘텐츠 접근성 지침, 웹 접근성을 준수한 웹개발하기

👾 웹 콘텐츠 접근성 지침 웹 접근성이란 장애인이나 고령자 뿐만 아니라 모든 사용자들이 개인의 능력에 상관없이 웹 페이지의 정보에 접근할 수 있도록 보장하는 것을 의미한다. 한국형 웹

fay-story.com

자료출처: Inpa님 블로그 웹 표준의 이해, 코드스테이츠 SEB 학습자료

✏️ 공부하며 정리한 내용입니다. 잘못된 정보나 더 공유할 내용이 있으면 댓글로 알려주세요!

읽어주셔서 감사합니다 😊

저작자표시 비영리 변경금지

'Frontend Dev > Web 개발 지식' 카테고리의 다른 글

크로스 브라우징(Cross Browsing)과 크로스 브라우징 워크 플로우 (0)	2023.06.27
웹 콘텐츠 접근성 지침, 웹 접근성을 준수한 웹개발하기 (0)	2023.06.27
REST 성숙도 모델 (0)	2023.05.26
REST API란 무엇일까? (0)	2023.05.26

FAY STORY

웹 표준과 웹 접근성, 간단하게 알아보기

👾 웹 표준이란?

✔️ 웹 표준의 장점

1. 검색엔진 최적화에 용이

2. 유지 보수의 용이성

3. 웹 접근성 향상

4. 웹 호환성 확보

✔️ 웹 표준을 준수하는 방법

1. DOCTYPE 선언

2. 시맨틱 태그 사용

3. CSS 스타일 시트 사용

4. 웹 접근성 고려

👾 웹 접근성 (Web Accessibility) 이란?

✔️ 웹 접근성을 갖추면 얻을 수 있는 효과

1. 사용자층 확대

2. 다양한 환경 지원

3. 사회적 이미지 향상

✔️ 웹 접근성을 준수하는 방법

1. 시각적 요소 처리

2. 청각적 요소 처리

3. 키보드 접근성

4. 웹 접근성 검사

📌 웹 콘텐츠 접근성 지침

'Frontend Dev > Web 개발 지식' 카테고리의 다른 글

티스토리툴바

웹 표준과 웹 접근성, 간단하게 알아보기

👾 웹 표준이란?

✔️ 웹 표준의 장점

1. 검색엔진 최적화에 용이

2. 유지 보수의 용이성

3. 웹 접근성 향상

4. 웹 호환성 확보

✔️ 웹 표준을 준수하는 방법

1. DOCTYPE 선언

2. 시맨틱 태그 사용

3. CSS 스타일 시트 사용

4. 웹 접근성 고려

👾 웹 접근성 (Web Accessibility) 이란?

✔️ 웹 접근성을 갖추면 얻을 수 있는 효과

1. 사용자층 확대

2. 다양한 환경 지원

3. 사회적 이미지 향상

✔️ 웹 접근성을 준수하는 방법

1. 시각적 요소 처리

2. 청각적 요소 처리

3. 키보드 접근성

4. 웹 접근성 검사

📌 웹 콘텐츠 접근성 지침

'Frontend Dev > Web 개발 지식' 카테고리의 다른 글

'Frontend Dev/Web 개발 지식' Related Articles

티스토리툴바