웹 표준, 크로스 브라우징, 웹 접근성 정리

웹 표준은 어떤 환경에서도 이용할 수 있는 웹페이지를,
웹 접근성은 어떤 사람이든 이용할 수 있는 웹페이지를 만들 수 있는 방법을 담고 있다.

웹 표준이란?

W3C(World Wide Web Consortium)에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙
사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹페이지 제작 기법을 담고있다.
웹 개발에 사용하는 언어인 HTML, CSS, JavaScript 등의 기술을 다룬다.

현재는 크롬, 엣지, 사파리 등 최신 웹 브라우저들은 모두 웹표준을 지원한다.

웹 표준에 맞추어 웹페이지를 작성하면 어떤 브라우저를 사용하든 동일한 결과물을 얻을 수 있다.

웹 표준을 준수하는 방법

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">

웹 표준의 장점

1. 유지 보수의 용이성

웹 표준으로 HTML, CSS, JavaScript 각 영역이 분리 => 유지 보수 용이, 코드 경량화, 트래픽 비용 감소

2. 웹 호환성 확보

웹 브라우저의 종류나 버전, 운영체제 및 사용 기기 종류에 상관 없이 동일한 사용자 경험 보장, 호환성과 운용성 확보

3. 검색 효율성 증대

검색 엔진에서 높은 순위로 노출

4. 웹 접근성 향상

다양한 브라우저, 휴대폰 PDA, 장애인 지원용 프로그램에서 대응 가능하므로 접근성 향상 /

보조공학 기기 사용자들에게 보다 정확한 정보 제공

크로스 브라우징이란?

웹사이트에 접근하는 브라우저에 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업

모든 브라우저에서 동등한 수준의 정보와 기능을 제공하는 것이 목표
완전히 똑같은 화면을 보이도록 하는 것이 목표가 아님

크로스 브라우징 워크 플로우

1. 초기 기획

어떤 콘텐츠와 기능이 있어야 하는지
디자인은 어떻게 할지
사이트의 타겟층은 누구인지 (고객층의 사용 브라우저 및 기기 고려)

2. 개발

-브라우저별 코드의 호환성을 파악 (아래 사이트에서 호환성 확인 가능)

MDN Web Docs

The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

developer.mozilla.org

Can I use... Support tables for HTML5, CSS3, etc

caniuse.com

3. 테스트

기능 구현 후 브라우저 및 운영체제에 대해 테스트
데스크톱 브라우저(크롬,엣지,사파리 등)
휴대폰 및 태블릿 브라우저(크롬, 사파리 등)
그 외 초기 기획 단계에서 목표했던 브라우저
Window, Linux, Mac 등 다양한 운영체제
자동 테스트 도구
TestComplete
LambdaTest
BitBar

4. 수정

테스트 단계에서 발생한 오류 해결

웹접근성이란?

웹 접근성은 장애인, 고령자 등이 웹사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것
어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록 하는 것이 목표

웹 접근성을 준수하는 방법

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

1. 시각적 요소 처리

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

2. 청각적 요소 처리

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

3. 키보드 접근성

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

4. 웹 접근성 검사

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

웹 콘텐츠 접근성 지침

웹 접근성을 판단할 기준이 되는 지침이다. 다음은 W3C이 웹 접근성 권고안인 ‘WCAG(Web Content Accessibility Guidelines) 2.0’을 기반으로 한국 실정에 맞게 수정한 ‘한국형 웹 콘텐츠 접근성 지침 2.1’ 내용을 요약한 것이다.

인식의 용이성
- 적절한 대체 텍스트
- 자막 제공
- 색에 무관한 콘텐츠 인식
- 명확한 지시사항 제공
- 텍스트 콘텐츠 명도 대비 (4.5대 1 이상)
- 자동 재생 금지
- 콘텐츠 간 구분
운용의 용이성
- 키보드 사용 보장
- 초점 이동 (키보드에 의한 초점 이동 및 구별)
- 조작 가능 (사용자 입력 및 컨드롤의 사용성 보장)
- 응답 시간 조절
- 정지 기능 제공
- 깜빡임과 번쩍임 사용 제한
- 반복 영역 건너 뛰기
- 제목 제공
- 적절한 링크 텍스트
이해의 용이성
- 주로 사용하는 언어 표시
- 사용자 요구에 따른 실행
- 콘텐츠 선형 구조 (ex. 제목->내용 순서 제공)
- 표의 구성
- 레이블 제공
- 오류 정정 (입력 오류 정정할 수 있어야)
견고성
- 마크업 오류 방지
- 웹 어플리케이션 접근성 준수