웹 표준과 웹 접근성
- 웹 표준
- 웹 접근성
웹 표준, 웹 접근성, 웹 호환성
누구나, 어떤 환경에서나 👨👩👧👦🌐
📕출처: 웹발전 연구소 http://www.smartebiz.kr/new/subpage02_02.html
1. 웹 표준
웹 표준 정의
웹 표준이란 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법을 의미한다.
☑️ 표준화 단체인 W3C(World Wide Consortium)가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정을 담고 있다.
☑️ 웹 표준의 궁극적인 목적은 웹사이트에 접속한 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 동일한 결과를 보이게 하는 것이다.
목적
웹의 사용성 및 접근성 보장
웹 표준 준수
국내 웹의 현실은 특정 브라우저와 사용자 등의 이용환경과 비표준 페이지 및 과도한 플러그인 사용으로 장애인, 노약자를 포함한 모든 사용자들에게 운영체제 및 웹 브라우저 등의 정보 접근 제약이 있다. 따라서 브라우저의 종류나 버전에 상관없이 모든 사용자들이 동일한 웹사이트를 볼 수 있도록 웹 표준기술 작업이 필요하며 웹 표준 준수는 웹 접근성 준수를 위한 핵심이다.
[준수 내용]
- HTML, CSS 등에 대한 WC3규격(문법) 준수 등
- HTML, CSS, Javascript 등 구조와 표현, 동작 분리 권고
웹 표준 장점
1. 수정 및 운영관리 용리 ⭐
유지보수: 콘텐츠의 올바른 구조화와 CSS로 시각표현을 통일하여 제어하게 되어 페이지 제작의 부담 감소 및 관리용이
2. 접근성 향상 ⭐
웹 표준을 이용해 작성한 문서는 다양한 브라우징 환경에 대응이 가능하며 휴대폰, PDA에서도 정상적인 작동 및 장애인 지원용 프로그램에도 도움이 되므로 사용자나 접속 장치의 접근성이 용이
3. 검색엔진 최적화(SEO) ⭐
시멘틱 태그로 구조화된 웹페이지는 검색 로봇 수집을 통해 검색엔진에 효율적으로 노출될 수 있도록 검색엔진의 검색결과를 최적화
4. File Size 축소, 서버 저장 공간 절약
효율적인 소스 작성은 파일 사이즈와 서버공간을 절약할 수 있으며 동시에 화면표시에 소요되는 시간을 단축
5. 효율적인 마크업
CSS와 HTML문서를 분리하여 제작할 경우 불필요한 마크업이 최소화되어 페이지 로딩속도 향상
6. 호환성 가능
기존 IE브라우저에서만 작동이 가능했던 요소들이 웹 표준을 준수함으로써 다양한 브라우저
(크롬, 파이어폭스, 사파리, 오페라 등)에서 작동.
2. 웹 접근성
사용성, 성능, 심미성, 실용성 뿐만 아니라 접근성도 고려해야 한다.
목적
- 💡인적, 환경적 요인에 제약없이 동등하게 웹 정보에 접근하고 이용할 수 있는데에 대한 정도
- 다양한 플랫폼 및 디바이스와 웹 브라우저 등 모든 환경
- 웹 문서 설계 시 장애인, 고령자 등을 고려해야 함을 잊지 않아야 한다.
☑️ 장애인차별금지 및 권리구제 등에 관한 법률 제21조(정보통신, 의사소통 등에서의 정당한 편의제공의무)
(중략) 행위자 등이 생산, 배포하는 전자정보 및 비전자정보에 대하여 장애인이 아닌 사람과 동등하게 접근, 이용할 수 있도록 한국수어, 문자 등 필요한 수단을 제공해야 한다.
✅ 시각 장애인은 스크린리더라는 프로그램을 통해 웹페이지를 읽을 수 있다. 웹 요소 간의 이동은 Tab 키를 통해 가능하다. tab키를 이용하여 html 대화형 요소에 접근하고 스크린 리더는 이를 읽어준다. 대화형 요소란 button, a, input 태그와 같이 사용자와 상호작용할 수 있도록 설계된 태그들을 의미한다.
웹 접근성 향상하는 방법
1. 웹 표준 지키기
웹 표준은 접근성 보조 기기가 웹을 조금 더 쉽게 이해할 수 있도록 해준다. 그렇기 때문에 접근성은 웹 표준을 지키는 것에서부터 시작된다.
웹 접근성 지침 준수(WCAG)
W3C 웹 콘텐츠 접근성 가이드라인 표준 권고안은 웹 사이트/애플리케이션에서 충족해야 하는 기준을 정의하여 장애가 있는 사용자가 보다 쉽게 이용할 수 있도록 준수해야 하는 지침으로, 웹 서비스를 제작하는 사람들이 기획/디자인/개발 과정에서 고려해야 할 요구사항이다. 접근성은 시각, 청각, 음성, 지체, 인지, 언어, 학습 및 신경 장애를 포함한 광범위한 장애를 포함한다.
4가지 원칙 : 인식, 운용, 이해, 견고
원칙 1) 인식의 용이성
- 모든 콘텐츠는 사용자가 인식할 수 있어야 한다.
- (적절한 대체 텍스트 제공) 텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
- (색에 무관한 콘텐츠 인식) 색에 관계없이 인식될 수 있어야 한다.
- (텍스트 콘텐츠의 명도 대비) 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.
- 확대 가능한 환경에서는 명도대비를 3대 1까지 허용한다.
- (콘텐츠 간의 구분) 이웃한 콘텐츠는 구별될 수 있어야 한다.
원칙 2) 응용의 용이성
- 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.
- (제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
- (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
- (초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하면 시각적으로 구별할 수 있어야 한다.
원칙 3) 이해의 용이성
- 콘텐츠는 이해할 수 있어야 하기 때문에 주로 사용하는 언어를 명시해야 한다.
- (콘텐츠의 선형화) 프레임, 콘텐츠는 논리적인 순서로 제공해야 한다.
- (시멘틱 마크업) 으로 보조기기 사용자 고려
- (다양한 환경에 대한 웹접근성 보장) 스크린 리더 등 보조 기기를 사용하는 사용자가 콘텐츠의 의미를 이해할 수 있도록 제공해야 한다.
원칙 4) 견고
웹 표준 기술
- 견고한 구조 설계를 위한 HTML
- seo
- 헤딩 태그 순서에 맞게 작성
- 시멘틱 태그
- 웹 접근성과 관련된 wai-aria 속성
- 기존 HTML에서 부족했던 부분을 보완하고 웹접근성을 준수할 수 있도록 역할 모델이나 속성, 상태 정보 등을 추가
- 레이아웃 및 스타일을 위한 CSS
- 반응형 글꼴 설정
- 색상 권장 비율 맞추기
- 동작 및 제어를 위한 DOM과 Javascript
📕참고 해보기: WAI-ARIA 사례집 - 오픈 소스로 되어있어서 플러그인 해서 바로 사용 가능
접근성을 고려한 HTML 설계
- 기본 언어 설정 및 문서 제목
- lang 속성로 언어 설정,
- title 요소(불필요한 특수 문자❌)
- 콘텐츠 구조 (시멘틱 태그 목적과 의미에 맞게 사용)
- 올바르지 않는 태그를 사용하면 '스크린 리더'를 사용하고 있는 사용자는 무엇인지 인지할 수 없다. 스크린 리더 등 보조 기기를 사용하는 사용자가 의미를 이해할 수 있도록 제공해야 한다. 그러므로 태그를 사용할 땐 사용 목적과 의미에 맞게 사용해야 한다.
- 이는 정확한 태그를 사용한다면 후속 작업을 해주는 생산성 낭비와 혹시 모를 버그를 막을 수 있다.
- 화면에 보이지 않는 영역은 화면 설계시 숨김 컨텐츠를 하거나 제외한다. 전달할 가치가 있다면 숨김 컨텐츠 형태로 정보를 제공할 수 있다. 의미가 없는 <div> 요소 제공했다면 WAI-ARIA의 랜드마크 role를 활용할 수 있다. 하지만 권장되는 건 시멘틱 요소를 사용하는 것이다.
- 콘텐츠 제목
- 헤더 내부 제공되는 브랜드 영역과 정보를 담고 있는 메인 콘텐츠 영역 등이 있다.
- 이때 브랜드 영역은 해당 사이트를 대표하는 내용으로 간주하여 최상위 제목인 h1 요소로 마크업 하고, 메인 콘텐츠에는 <h2> 요소를 사용하여 구성하도록 한다.
- 주의 사항 디자인 상 제목으로 간주될 수 있는 정보가 보이지 않는다는 것이다. 디자인적 관점에서 제목 정보가 제공되고 있지 않더라도 독립된 콘텐츠 영역이라면 각각의 영역을 대표할 수 있는 콘텐츠 블록에 제목을 제공해야 한다. 숨김 제목의 형태로✅
- 적절한 제목 제공
- SEO와 보조 기기를 위한 제목을 제공해야 한다. HTML의 제목 관련 요소를 사용하여 콘텐츠에 대한 제목을 지정한다. 단, 계층 구조를 건너뛰지 않도록 주의. 예를 들어 <h1> 요소 없이 <h3> 요소를 바로 사용하는 경우를 말한다.
- 헤딩 태그 마크업 순서
- '스크린리더'는 페이지에 마크업 된 h1~h6의 순서대로 정보를 읽어준다. 따라서 웹 표준으로 권장되는 h1~h6의 마크업 순서를 지키지 않으면 정보를 순차적으로 제공받을 수 없기 때문에 사용성이 심각하게 저하된다. 웹 표준으로 HTML을 마크업 하는 것은 가장 기본이자 중요한 부분이다.
<header>헤더 영역</header>
<nav>네비게이션 영역</nav>
<main>메인 영역</main>
<section>섹션 영역</section>
<article>아티클 영역</article>
<footer>푸터 영역</footer>
Wai-aria 속성
- aria-label: HTML 요소에 대한 간단한 설명을 제공하는 속성
- aria hidden: 사용자에게 불필요한 정보를 스크린 리더가 읽지 않게 하는 속성
- aria-live: 웹 페이지에서 실시간으로 변화하는 콘텐츠를 사용자에게 즉시 전달하기 위해 사용하는 속성
- (속성값: off, polite, assertive)
- alt: 대체 텍스트 (텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다.)
- lang="ko": 페이지 언어 한국어
다이어로그
- <dialog>가 제공하는 접근성 기능
- 포커스 관리: 모달이 열리면 포커스 자동 이동
- 접근성 트랩: 포커스를 모달 안에 가두기
- 모바일 네이티브 이벤트 구현: 두 손가락 문지르기를 통한 모달 닫기
- <dialog> 사용 시 알아두어야 할 것
- Show(): 비모달식 대화상자 오픈 -> 외부요소와 상호작용 O
- ShowModal(): 모달식 대화상자 오픈 -> 외부요소와 상호작용을 막는다.
📌 정리
웹 표준이란 브라우저의 종류나 버전에 상관없이 모든 사용자들이 동일한 웹 사이트를 볼 수 있도록 하는 약속이다. 개발자의 개발 효율성과 기업의 서버 비용 절감을 가져다 주는 장점이 있다. 웹 접근성은 장애인, 고령자 등 모든 사용자들이 차별 없이 웹을 쉽게 이용할 수 있도록 하는 것이다. 웹 표준 준수는 웹 접근성을 위한 기본이 된다.
https://zyeuny.tistory.com/207
접근성 준수와 스크린리더
접근성 준수와 스크린리더 스크린리더를 신경 쓰지 않고 개발을 하는 경우, 스크린리더 사용자를 차별하는 개발을 할 수가 있다. 웹 접근성을 준수하여 장애가 있는 사용자가 보다 쉽게 차별 없
zyeuny.tistory.com
📕참고: 유튜브 AOA11Y- 웹 접근성 영상 참고했습니다.
'공부 모음집 > WEB' 카테고리의 다른 글
| 웹 서버와 호스팅 그리고 클라우드 호스팅/ FTP 프로그램 (1) | 2023.10.13 |
|---|---|
| 검색엔진 최적화(SEO)와 OG 작업 (0) | 2023.10.07 |
| 브라우저 렌더링 과정 (0) | 2023.08.20 |
| 크로스 브라우징이란? (웹 호환성🚥) (0) | 2023.08.14 |
| MS 익스플로러 지원 종료 (0) | 2022.11.23 |