웹 표준 & 접근성

목차

 

 

📌 웹 표준 & 접근성

 

 

📍웹 표준

W3C(World Wide Web Consortium)에서 권고하는

웹에서 표준적으로 사용되는 기술이나 규칙 (웹은 인터넷이 아니다)

웹 개발에 사용되는 언어인 HTML, CSS, JavaScript 등의 기술을 다룬다

 

 

🔗  웹 표준의 장점

 

1. 유지 보수의 용이성
2. 웹 호환성 확보
3. 검색 효율성 증대
4. 웹 접근성 향상

 

 

📍 Semantic HTML

 

웹 표준 - HTML을 시멘틱하게 작성하는 것의 중요성을 강조

💡 시멘틱 뭔가요?

📖 semantic : 의미의, 의미가 있는 이라는 뜻의 영단어

 

• <div>와 <span>으로 화면 구성하기
• 시멘틱 요소로 화면 구성하기

 

🔗 시멘틱 HTML의 필요성

 

• 개발자간 소통
• 검색 효율성
• 웹 접근성

 

🔗 시맨틱 요소의 종류

자주 사용되는 시맨틱 요소들은 다음과 같습니다.

 

<header>	페이지나 요소의 최상단에 위치하는 머릿말 역할의 요소입니다.
<nav>	메뉴, 목차 등에 사용되는 요소입니다.
<aside>	문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소입니다.
<main>	이름 그대로 문서의 메인이 되는 주요 콘텐츠를 담는 요소입니다.
<article>	게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소입니다. 각각의 <article>을 구분하기 위한 수단이 필요하며, 보통 제목(<hgroup>)을 포함하는 방법을 사용합니다.
<section>	문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용합니다. 제목(<hgroup>)을 포함하는 경우가 많습니다.
<hgroup>	제목을 표시할 때 사용하는 요소로, <h1> ~ <h6> 요소가 <hgroup>입니다.
<footer>	페이지나 요소의 최하단에 위치하는 꼬릿말 역할의 요소입니다.

 

 

📍크로스 브라우징

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

크로스 브라우징은 초기 기획 → 개발 → 테스트/발견 → 수정/반복의 단계로 진행된다.

 

 

 

 

📍 SEO

On-Page SEO :  페이지 내부에서 진핼 할 수 있는 SEO, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용

Off-Page-SEO :  웹 사잍 외부에서 이루어지는 SEO로, 소셜 미디어 홍보, 백링크 등을 이용하는 방법, 내용과 주고와는 관계 없다

 

 

🔗 On-Page  SEO

 

1. <title> 요소
2. <meta> 요소

 

 

📍 웹 접근성

모든 사용자가 신체적, 환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것

 

🔗 웹 접근성의 실태

우리나라의 웹 접근성 수준은 높지 않다

대부분의 경우 웹 접근성에 대한 인식이 낮고, 잘 지켜지고 있지 ㅇ낳다.

 

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

 

1. 사용자층 확대
2. 다양한 환경 지원
3. 사회적 이미지 향상

 

🔗 인식의 용이성(Perceivable)

 

• 적절한 대체 텍스트
• 자막 제공
• 색에 무관한 콘텐츠 의식
• 명확한 지시사항 제공
• 텍스트 콘텐츠 명도 대비
• 자동 재생 금지
• 콘텐츠 간 구분

 

🔗 운용의 용이성(Operable)

 

• 키보드 사용 보장
• 초점 이동
• 조작 기능
• 응답 시간 조절
• 정지 기능 제공
• 깜빡임과 번쩍임 사용 제한
• 반복 영역 건너뛰기
• 제목 제공
• 적절한 링크 텍스트

 

 

🔗 이해의 용이성(Understandable)

 

• 기본 언어 표시
• 사용자 요구에 따른 실행
• 콘텐츠 선형 구조
• 표의 구성
• 레이블 제공
• 오류 정정

 

🔗 견고성(Robust)

 

• 마크업 오류 방지
• 웹 어플리케이션 접근성 준수

 

 

 

📍 WAI-ARIA

WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격

 

WAI : Web Accessibility Initiative, 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관 

ARIA : Accessible Rich Internet Applications, 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 엑세스 할 수 있도록, 즉 웹 접근성을 갖추기 위한 기술

- RIA(Rich Internet Applications) : 별도 설치 없이 편리성 프로그램을 직접 설치 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 어플리케이션, SPA

 

 

🔗 WAI-ARIA 필요성

1. HTML 요소에 추가적으로 의미를 부여하여 더 원할하세 페이지를 탐색 할 수 있게 도와준다
2. SPA처럼 AJAX를 사용하는 상황, 즉 새로고침 없이 페이지의 내용이 바뀌는 상황에서도 변경된 영역에 대한 정보를 전달해줄 수 있어 동적인 컨텐츠에서도 웹 접근성을 향상시킬 수 있다

 

🔗 WAI-ARIA 사용법

 

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