🌐 웹 표준 & 웹 접근성 이란?

...

웹 표준 (Web Standards)

웹 표준은 웹에서 사용되는 기술들의 표준화를 의미한다. 즉, 웹 사이트를 구성하는 HTML, CSS, JavaScript 등의 언어들이 표준화된 방식으로 작성되어야 한다는 것이다. 쉽게 말하면 사용자가 어떤 브라우저나 기기를 사용하더라도 홈페이지 화면을 동일하게 볼 수 있도록 하는 것이 웹 표준인 것이다.

웹 표준의 장점

웹 페이지를 작성할 때 웹 표준을 준수하면 다음과 같은 효과를 누릴 수 있게 된다.

1. 웹 페이지의 호환성

웹 표준을 준수하면, 웹 페이지가 모든 브라우저에서 일관적으로 표시되게 된다. 이를 통해 사용자들은 어떤 브라우저를 사용하더라도 동일한 사용자 경험을 얻을 수 있어 오래된 브라우저에서도 컨텐츠가 적절하게 표시되고 호환성과 운용성이 확보된다.

2. 검색 엔진 최적화 (SEO)

웹 표준을 준수하면, 검색 엔진에서 웹 페이지를 더욱 잘 인식할 수 있다. 이를 통해 더욱 높은 검색 결과를 얻을 수 있다.

3. 유지보수 및 확장성

웹 표준을 준수하면, 웹 페이지를 만드는 데 필요한 시간과 비용을 줄일 수 있어 유지보수 및 확장성이 좋아진다. 또한 논리적이고 효율적으로 작성된 웹 문서는 코드의 양이 줄어 파일 크기가 줄고 서버 부담의 감소로 이어진다.

4. 웹 접근성 향상

웹 표준을 준수하면, 모든 사용자가 쉽게 웹 페이지에 접근할 수 있도록 웹 접근성을 고려할 수 있다. 예를들어

다양한 브라우저, 휴대폰 PDA, 장애인 지원용 프로그램에서도 대응이 가능하므로 접근성이 향상되고 크린리더기 등 보조공학 기기 사용자들이 조금 더 정확한 정보를 얻을 수 있도록 도움을 준다.

웹 표준을 준수하는 방법

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>~~, ~~<footer>~~ 등의 태그를 사용하여 웹 페이지의 구조를 더욱 명확하게 표현할 수 있다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>시맨틱 태그 예제</title>
  </head>
  <body>
    <header>
      <h1>시맨틱 태그 예제</h1>
      <nav>
        <ul>
          <li><a href="#">메뉴1</a></li>
          <li><a href="#">메뉴2</a></li>
          <li><a href="#">메뉴3</a></li>
        </ul>
      </nav>
    </header>
    
    <section>
      <h2>섹션 1</h2>
      <p>본문 내용입니다.</p>
    </section>
    
    <section>
      <h2>섹션 2</h2>
      <p>본문 내용입니다.</p>
    </section>
    
    <aside>
      <h2>광고</h2>
      <p>광고 내용입니다.</p>
    </aside>
    
    <footer>
      <p>저작권 © 2021 Upstage. All Rights Reserved.</p>
    </footer>
  </body>
</html>

3. CSS 스타일 시트 사용

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

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML !DOCTYPE declaration</title>
    <link href="/media/examples/link-element-example.css" rel="stylesheet"> <!-- css 파일 분리 -->
</head>
<body>
    <p>이 문서는 HTML 문서입니다.</p>
</body>
</html>

4. 웹 접근성 고려

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

<input type="text" name="name" tabindex="1">
<input type="text" name="email" tabindex="2">
<input type="submit" value="Submit" tabindex="3">

웹 접근성 (Web Accessibility)

웹 접근성은 장애를 가진 사람들도 신체적, 환경적 조건에 관계없이 인터넷을 통해 정보에 접근하고 이용할 수 있도록 하는 것을 말한다. 이는 인터넷을 더욱 공평하고 인종, 성별, 연령, 장애 유무와 상관없이 모두가 이용할 수 있는 공간으로 만드는 것을 목표로 한다.

예를들자면, 시각장애인의 경우 화면을 눈으로 볼 수 없기 때문에 '스크린 리더'라는 별도의 소프트웨어를 컴퓨터에 설치하여 음성으로 웹페이지에 담긴 정보를 이해 한다.

웹 접근성을 위해 사용되는 보조기기에는 자막, 스크린리더, 자동완성 기능, 마우스스틱, 색상 대비 디자인 등이 있다.

하지만 스크린 리더는 스스로 웹페이지의 내용을 분석하지 못한다. 만일 로그인 페이지일 경우, 이 로그인 페이지의 디자인을 '로그인' 이라는 텍스트 대신 로그인 이미지를 사용할 경우 스크린 리더는 이를 인식하지 못하여 시각 장애인이 홈페이지를 이용할 수 없게 되는 차별이 일어난다. 따라서 이미지 대신 소스코드에 내용을 그대로 담는 것이 권장되며, 부득이하게 이미지를 사용할 경우 반드시 이미지가 어떤 내용인지 아래와 같이 ~~alt~~ 속성을 통해 설명을 추가 해야 한다.

<img arc = "img/login.png" alt="로그인 />

웹 접근성을 준수하는 방법

웹 접근성은 모든 사람이 인터넷을 이용할 수 있는 공간을 만들기 위한 중요한 요소이다. 따라서, 웹 개발자는 웹 접근성을 고려하여 웹 사이트를 구축하고, 이를 통해 모든 사용자들이 웹 사이트를 쉽게 이용할 수 있도록 노력해야 한다.

1. 시각적 요소 처리

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

2. 청각적 요소 처리

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

3. 키보드 접근성

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

4. 웹 접근성 검사

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

웹 콘텐츠 접근성 지침 (WCAG)

웹 콘텐츠 접근성 지침(WCAG)은 웹 접근성을 확보하기 위한 국제 표준으로, 다양한 장애를 가진 사용자들이 웹 사이트에 쉽게 접근하고 이용할 수 있도록 가이드라인 이라고 보면 된다.

WCAG는 4가지 원칙, 13가지 지침, 78가지 성공 기준으로 구성되어 있다.

1. 인식의 용이성

정보와 사용자 인터페이스 요소는 그들이 인지할 수 있도록 사용자에게 표시될 수 있어야 한다.

텍스트가 아닌 콘텐츠에 대체 텍스트를 사람들이 원하는 인쇄, 점자, 음성, 기호 또는 간단 언어 등과 같은 형태로 제공해야 한다.
정보와 구조의 손실 없이 콘텐츠를 다른 방식(예를 들면 더욱 간단한 형태로)들로 표현할 수 있어야 한다.
사용자들이 보다 쉽게 보고 들을 수 있는 전경에서 배경을 분리한 콘텐츠를 만들어야 한다.

2. 운용의 용이성

사용자 인터페이스 요소와 탐색은 운용 가능해야 한다.

키보드로 모든 기능을 사용할 수 있도록 해야 한다.
읽기 및 콘텐츠를 사용하는 사용자에게 충분한 시간을 제공해야 한다.
사용자가 탐색하고, 콘텐츠를 찾고 그들이 어디에 위치하고 있는지를 알 수 있도록 도와주는 방법을 제공해야 한다.

3. 이해의 용이성

정보와 사용자 인터페이스 운용은 이해할 수 있어야 한다.

텍스트 콘텐츠를 판독하고 이해할 수 있도록 만들어야 한다.
웹 페이지의 탑재와 운용을 예측 가능한 방법으로 제작해야 한다.
사용자의 실수를 방지하고 수정할 수 있도록 도와야 한다.

4. 내구성

콘텐츠는 보조 기술을 포함한 넓고 다양한 사용자 에이전트에 의존하여 해석될 수 있도록 충분히 내구성을 가져야 한다.

웹 기술 사용, 호환성 검사, 오류 정정 등

# 참고자료

http://www.law.go.kr/LSW/admRulInfoP.do?admRulSeq=63673

https://goddaehee.tistory.com/244

인용한 부분에 있어 만일 누락된 출처가 있다면 반드시 알려주시면 감사하겠습니다

이 글이 좋으셨다면 구독 & 좋아요

여러분의 구독과 좋아요는
저자에게 큰 힘이 됩니다.

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`