웹 표준 & 접근성

블로깅 과제

웹 표준 & 접근성

lap_mu 2023. 1. 3. 13:57

웹 표준

웹 개발자들이 각 브라우저마다 따로 개발을 해야 하는 수고를 없애기 위해 웹 개발 형식을 통일시킨 것
W3C (https://www.w3.org/)에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙

웹 표준 준수시 장점

1. 유지 보수의 용이성

웹 표준을 준수하며 웹 페이지를 작성하면 유지 보수가 용이해지며 코드가 경량화되며 트래픽이 감소하는 효과가 생긴다.

2. 웹 호환성 확보

웹 표준을 준수하여 웹사이트를 제작하면 어떤 운영체제든, 어떤 브라우저든 사용하는 기기와는 관계없이 동일한 결과를 얻을 수 있다.

3. 검색 효율성 증대

검색 엔진은 HTML의 요소 등을 보고 정보의 중요도를 파악하여 표출해주며 웹 표준에 맞춰 작성하면 검색엔진의 더 높은 우선순위에 노출될 수 있다.

4. 웹 접근성 향상

웹 표준에 맞춰 개발하면 모든 환경과 사용자가 사용할 수 있는 웹페이지를 작성할 수 있다.

Semantic HTML

HTML이 구조를 만드는 것을 넘어 의미를 갖도록 작성하는 것
웹 표준에서는 html을 시맨틱하게 작성하는 것의 중요성을 강조

Semantic HTML의 필요성

1. 개발자 간의 소통

각 요소가 어떤 역할을 할지 모르기에 주석을 추가하거나 id와 class를 사용하여 일일이 표기해야 한다.
id와 class를 사용하더라도 어떤 id와 class를 사용할지 정해야 하며 설명해야 한다.

2. 검색 효율성

검색 엔진은 <div>와 <span>으로 작성하면 모든 요소의 중요도가 같다고 판단한다.
시맨틱 요소를 사용하면 요소들의 중요도를 결정할 수 있고 검색 상위에 더 자주 뜨게 만들 수 있다. (시맨틱 html을 잘 짜면 어느 정도 광고 효과도 노릴 수 있다.)

3. 웹 접근성

웹 접근성은 나이 성별 장애 여부 사용환경을 떠나서 항상 동일한 수준의 정보를 제공할 수 있어야 함을 뜻한다.
시맨틱 요소만 잘 사용해도 웹 접근성을 향상시킬 수 있다.

시맨틱 요소의 종류

요소	설명
<header>	페이지나 요소의 최상단에 위치하는 머릿말 역할의 요소
<main>	이름 그대로 문서의 메인이 되는 주요 콘텐츠를 담는 요소
<nav>	메뉴, 목차 등에 사용되는 요소
<aside>	문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소
<article>	게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소
<footer>	페이지나 요소의 최하단에 위치하는 꼬릿말 역할의 요소
<section>	문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소
<hgroup>	제목을 표시할 때 사용하는 요소

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

1. 초기 기획

어떤 웹사이트를 만들 것인지 정확하게 결정

2. 개발

코드가 각 브라우저에 호환이 되는지 파악하고 사용하기

3. 테스트 / 발견

여러 환경에서 버그가 있는지 없는지 테스트를 하여 버그를 발견

4. 수정 / 반복

발견한 버그를 수정하는 것을 반복

웹 접근성

일반적으로 웹 접근성은 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것

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

1. 사용자층 확대

정보 소외계층의 고객층을 확보할 수 있다.

2. 다양한 환경 지원

다양한 환경 다양한 기기에서 웹사이트를 자유롭게 사용할 수 있게 되므로 서비스의 사용범위가 확대되면서 이용자 수 증가를 기대할 수 있다.

3. 사회적 이미지 향상

기업의 사회적 이미지가 향상됨으로써 이용자 수의 증가와 충성고객을 확보할 수 있는 가능성이 늘어난다.

웹 콘텐츠 접근성 지침

인식의 용이성(Perceivable)

모든 콘텐츠는 사용자가 인식할 수 있어야 함

1. 적절한 대체 텍스트

텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공

2. 자막 제공

멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공

3. 색에 무관한 콘텐츠 인식

콘텐츠 색에 관계없이 인식될 수 있어야 함

4. 명확한 지시사항 제공

지시사항은 모양 크기 위치 방향 색 소리 등에 관계없이 인식될 수 있어야 함

5. 택스트 콘텐츠 병도 대비

텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 함

6. 자동 재생 금지

자동으로 소리가 재생되지 않아야 함

7. 콘텐츠 간 구분

이웃한 콘텐츠는 구별될 수 있어야 함

운용의 용이성(Operable)

사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 함

1. 키보드 사용 보장

모든 기능은 키보드만으로도 사용 가능해야 함

2. 초점 이동

키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구분할 수 있어야 함

3. 조작 가능

사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 함

4. 응답 시간 조절

시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 함

5. 정지 기능 제공

자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 함

6. 깜빡임과 번쩍임 사용제한

초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 함

7. 반복 영역 건너뛰기

콘텐츠의 반복되는 영역은 건너뛸 수 있어야 함

8. 제목 제공

페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 함

9. 적절한 링크 텍스트

링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 함

이해의 용이성(Understandable)

콘텐츠는 이해할 수 있어야 함

1. 기본 언어 표시

주로 사용하는 언어를 명시해야 함 (ko)

2. 사용자 요수에 따른 실행

사용자가 의도하지 않은 기능은 실행되지 않아야 함

3. 콘텐츠 선형 구조

콘텐츠는 논리적이 순서로 제공해야 함

4. 표의 구성

표는 이해하기 쉽게 구성해야 함

5. 레이블 제공

사용자가 입력에는 대응하는 레이블을 제공해야 함

6. 오류 정정

입력 오류를 정정할 수 있는 방법을 제공해야 함

견고성(Robust)

웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 함

1. 마크업 오류 방지

마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 함

2. 웹 애플리케이션 접근성 준수

콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 함

WAI - ARIA

HTML 요소에 추가적으로 의미를 부여
시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 보조적으로 사용하면 접근성을 향상
시맨틱 요소로 충분한 상황에서는 사용하면 안 됨. 시맨틱한 html을 작성하는 것이 우선

WAI - ARIA 사용법

역할(role): HTML 요소의 역할을 정의하는 속성
상태(state): 요소의 현재 상태를 나타내는 속성
속성(property): 요소의 특징을 정의하는 속성