[web] 접근성을 고려한 UI 제작 (HTML&CSS)

09 Sep 2021

접근성을 고려한 UI 제작 (HTML&CSS)

강사: 김데레사 (seulbinim@gmail.com)

발표자료

목표

테크니컬한 이야기는 최소화, 접근성 관련 주제
WAI-ARIA

내용

Part 1. 웹접근성과 웹표준

웹접근성(Web Accessibility): 웹사이트에서 제공하는 정보를 차별 및 제한없이 동등하게 이용할 수 있도록 보장하는 것

장애인 및 고령자를 포함한 모든 사람
다양한 platform 및 Device와 웹브라우저 등 모든 환경 (호환성과도 연결되는 이야기)
개발자의 수고가 필요하겠지만, 그 작업으로 고객을 만족시킬 수 있다

웹접근성을 고려한 UI 제작 준비

웹접근성 지침 준수
웹표준 기술의 활용

디바이스의 파편화 극심함. 변태 해상도들까지 대응하다보면 시간과 비용, 노력이 추가된다. 이를 해결하기 위해 표준 스펙을 가져와 작업한다 (표준 = 기술 스펙)

웹접근성 지침 및 기술

WCAG (Web Content Accessibility Guidelines)
KWCAG 2.1
- 24가지 검사 항목이 있음
WAI-ARIA (Web Accessibility Initiative Accessible Rich Internet Applications)
- RIA - 플래시, 실버라이트 등 기능을 통합한 것
- ARIA - 위 내요의 접근성을 개선하는 것
[WAI-ARIA 사례집](https://www.wah.or.kr:444/_Upload/pds2/WAI-ARIA%20%EC%82%AC%EB%A1%80%EC%A7%91(%EC%98%A8%EB%9D%BC%EC%9D%B8%ED%8C%90).pdf
- 간략한 설명과 웹 콤포넌트별로 접근성 이슈를 개선할 수 있는 방법을 쉽게 해준다

웹 표준(Web Standartds)

웹표준(Web Standards): 웹에서 표준적으로 사용되는 기술이나 규칙
- 견고한 구조 설계를 위한 HTML
- 레이아웃 및 스타일을 위한 CSS
- 동작 및 제어를 위한 Javascript
정확한 정보는 레퍼런스 사이트를 참조해 기반을 탄탄히 다지는것이 중요하다
- W3C, MDN - HTML, CSS, JavaScript
- 웹접근성 온라인 채널 AOA

Part 2. 웹접근성을 고려한 HTML Markup

기본 언어 설정 및 적절한 제목 제공

원칙 2 운용의 용이성(Operable) - 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.

2.4.2 (제목 제공) - 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.

원칙 3 이해의 용이성(Understandable) - 콘텐츠는 이해할 수 있어야 한다.

3.1.1 (기본 언어 표시) - 주로 사용하는 언어를 명시해야 한다.

Html root 요소에 lang="ko-KR" 과 같이 주 언어를 명시
중간중간 바뀌는 언어는 그 요소들에 적절하게 재선언 해즌디
title: 페이지 제목은 유니크해야한다

논리적인 순서와 시맨틱 마크업

원칙 3 이해의 용이성(Understandable) - 콘텐츠는 이해할 수 있어야 한다.

3.3.1 (콘텐츠의 선형화) - 프레임, 콘텐츠는 논리적인 순서로 제공해야 한다.

시맨틱 마크업 - 보조기기(스크린 리더, …) 사용자 고려

다양한 환경에 대한 웹접근성 보장 - 스크린 리더 등 보조 기기를 사용하는 사용자가 콘텐츠의 의미를 이해할 수 있도록 제공해야 한다

구조 설계 (HTML)

시안에 나와있지 않은 정보 (footer)도 마크업 해두는게 접근성에 도움을 준다
header 태그는 <body> 하위에 올 경우 해당 내용의 헤더, <section> 하위에 올 경우 <section> 의 헤더가 된다. footer 태그도 마찬가지. html 문서 내에 여러번 중복 사용 가능하다

구조 설계 (ARIA)

<div> 태그는 중립적이라 의미를 가지고 있지 않다. 이 경우 roll 속성을 사용한다

<body>
    <div role="banner">
        헤더
    </div>
    <div role="main">
        메인
    </div>
    <div role="contentinfo">
        푸터 (숨김 콘텐츠)
    </div>
</body>

roll="banner" 는 전체 문서에서 한번만 사용할 수 있다

제목의 중요성

SEO와 접근성 관점에서 heading은 중요하다
위해 시안에 없는 정보를 마크업 해둔 후 a11y-hidden 으로 디자인을 깨트리지 않고도 의미적으로 헤딩간 이동에 도움을 받을 수 있다

레이블 제공 및 숨김 콘텐츠

원칙 3 이해의 용이성(Understandable) - 콘텐츠는 이해할 수 있어야 한다.

3.4.1 (레이블 제공) - 사용자 입력에는 대응하는 레이블을 제공해야 한다.

숨김 콘텐츠 - 보조기기 사용자 고려

다양한 환경에 대한 웹접근성 보장 - 콘텐츠에 대한 이해를 위해 사용자에게 전달이 필요한 콘텐츠와 그렇지 않은 콘텐츠를 구분해서 제공해야 한다.

레이블 선택 시 입력 폼이 포커스되는 등 컨텐츠 접근성 확대 가능하다
hidden 속성은 HTML5에 추가된 논리속성으로 해당 속성이 선언 될 경우 화면에도 보이지 않고 보조 기기에서도 인식할 수 없는 콘텐츠가 된다
비장애의 눈에는 보이지만 보조기기는 접근할 필요 없는 경우 aria-hidden="true" 로 숨길 수 있다
눈에 보이는 것, 보이지 않는것에 대해 고려하며 마크업하자

키보드 사용 보장 및 초점 이동

원칙 1 인식의 용이성(Perceivable) - 모든 콘텐츠는 사용자가 인식할 수 있어야 한다.

1.1.1 (적절한 대체 텍스트 제공) - 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.

원칙 2 운용의 용이성(Operable) - 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.

2.1.1 (키보드 사용 보장) - 모든 기능은 키보드만으로도 사용할 수 있어야 한다.

2.1.2 (초점 이동) - 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.

버튼의 포커스(초점)이 사라지는건 바람직하지 않으며, 대안이 필요함

링크 요소를 버튼으로 역할 변경하기

a 태그는 어딘가로 이동하게 될텐데, 모달창이 뜨는거라 올바르지 않음. button 요소가 문법상올바르지만 그 내부에 요소를 넣을 수 없기 때문에 a 태그를 사용했다

a 태그를 사용하되, roll="butto" 으로 역할을 보여준다

<a href="#" role="button"
	aria-haspopup="dialog" 
	aria-pressed="false">
  ...
</a>

팝업 창 정보 제공하기

원칙 3 이해의 용이성(Understandable) - 콘텐츠는 이해할 수 있어야 한다.

3.2.1 (사용자 요구에 따른 실행) - 사용자가 의도하지 않은 기능 (새 창, 초점 변화 등)은 실행되지 않아야 한다.

팝업(Modal)창 - 보조기기 사용자 고려

다양한 환경에 대한 웹접근성 보장 - 보조 기기를 사용하는 사용자가 새창임을 이해할 수 있도록 제공하거나 모달 레이어의 경우 포커스를 강제로 모달 레이어 안쪽으로 옮겨주어야 합니다. 그렇지 않으면 포커스가 이동하지 않아 모달 레이어가 실행되었음을 알 수 없습니다.

<div class="ediya-menu__item--detail" hidden 
	role="dialog" aria-modal="true" aria-labelledby="ediya-menu__item1">
	...
</div>

HTML Validation(유효성 검사)

원칙 4 견고성(Robust) - 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.

4.1.1 (마크업 오류 방지) - 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.

프로그래밍 언어라면, 문법 검사는 기본이다.

Part 3. 웹접근성을 고려한 CSS Style

Universal Design

원칙 1 인식의 용이성(Perceivable) - 모든 콘텐츠는 사용자가 인식할 수 있어야 한다.

1.3.1 (색에 무관한 콘텐츠 인식) - 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.

1.3.3 (텍스트 콘텐츠의 명도 대비) - 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 한다.

1.3.5 (콘텐츠 간의 구분) - 이웃한 콘텐츠는 구별될 수 있어야 한다.

색상에 의존한 정보 제공 오류

유니버셜하게 디자인 할 수 있도록 고려해야한다