웹 접근성에 대해 알아보자!

Dl2l·2023년 2월 27일

웹접근성이란?

「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항이다.

(참고로 인증비용은 백~이백만원대ㅎㅎ)

전문가 심사 검사 항목

심사 검사 항목은 아래와 같다.

그리고 웹 접근성 준수 고려사항은 아래와 같다.

저시력을 포함한 시각장애 고려, 손을 쓰기 어려운 상태를 고려(화살표키로 페이지 이동 구현), 소리를 들을 수 없을 때 자막 대체가 필요한 상황, 인지 능력이 떨어지는 장애 고려

접근성의 필요성

2018년 기준 전국 홈페이지 보유 현황은 총 4,019,872개(출처 KOSIS)지만 23년 2월 26일 기준 웹접근성 인증을 받은 홈페이지는 9,994개(출처 한국웹접근성인증평가원) 뿐이다.

그리고 2021년 기준 전세계 상위 웹사이트 100만개를 봤을 때 최소한의 웹 접근성 지침을 준수하지 못한 웹사이트가 무려 97.4%에 달했다고 한다.

이에 디지털 접근성 소송이 점차 늘어나고 있고, 접근성을 갖춘 홈페이지는 비장애인에게도 긍정적인 이미지를 만들어주기 때문에 접근성을 지키는 홈페이지를 만드는 것은 앞으로 점차 중요해 질 것이다.

(참고 https://www.ciokorea.com/news/231874)

말로만 하면 어려운 웹접근성,, 대체 뭘까?

네이버를 스크린리더로 읽어보며 체험해보자.

https://youtu.be/vC2TvrBuqsY?t=450

시각장애우가 스마트폰을 사용할 때

https://youtu.be/H7fuoJ7Pg5M?t=166

우리가 지킬 수 있는 웹 접근성

기업의 웹 접근성 사례

1. 적절한 대체 텍스트

4. 명확한 지시사항 제공

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

모양으로 지시되는 예시

(이미지 출처 : 널리)

7. 콘텐츠 간의 구분

(이미지 출처 : 널리)

8. 키보드 사용 보장

: 모든 기능은 키보드만으로도 사용할 수 있어야 한다.

네이버에서 tab을 눌러보며 확인해봅시다! ㅎㅎㅎㅎ

https://www.naver.com/

9. 초점이동

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

10. 조작 가능

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

• 컨트롤의 대각선 길이는 6mm 이상 : 버튼 등 컨트롤이 너무 작은 경우 제대로 선택하기 힘듭니다.

• 컨트롤 간 1픽셀 이상의 여백 : 컨트롤이 연달아 있는 경우에는 여백을 주어 구분해주어야 합니다.

19. 콘텐츠 선형 구조

: 콘텐츠는 논리적인 순서로 제공해야 한다.

(배치를 시각적으로 변경해야 하는 경우(flex order)에도 콘텐츠의 선형구조는 유지해야 한다.)

개정된 한국형 웹 콘텐츠 접근성 지침

2022년 12월 말에 한국형 웹 콘텐츠 접근성 지침이 개정됐다.

웹 접근성을 지키지 않았을 때 시각장애우들이 느끼는 불편함

https://youtu.be/MbBwacqukQ0?t=222

WAI-ARIA

Web Accessibility Initiative – Accessible Rich Internet Applications

장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 접근할 수 있도록 하는 방법을 정의한다.

WAI : W3C에서 웹 접근성을 담당하는 기관

ARIA : RIA 환경의 웹 접근성에 대한 표준 기술 규격을 의미

(RIA환경 : 정적인 HTML, 단순한 자바스크립트 환경의 웹이 아닌 동적인 자바스크립트와 Ajax와 같은 기술을 사용한 환경에서 수준 높은 UX(User eXperience)를 제공하는 웹 애플리케이션)

(RIA : 웹 애플리케이션의 장점은 유지하면서 기존 웹 브라우저 기반 인터페이스의 단점인 늦은 응답 속도, 데스크톱 애플리케이션에 비해 떨어지는 조작성 등을 개선하기 위한 기술의 통칭)

웹 접근성을 지킬 수 있는 마크업 방법

1. role속성

버튼은 button, 링크는 a, 체크박스는 input checkbox 등등 이미 존재하는 요소들로도 충분히 표현할 수 있을 것이다. 하지만 이미지에 버튼 클릭 이벤트를 준다던가 좀더 세세하고 다양한 설정이 하고 싶을 때는 native 요소만으로 부족할 수 있다.

role속성은 스크린리더기나 검색엔진의 크롤링 및 색인과정을 도와주는 부수적인 역할을 수행하는 속성이다.

elements의 확장 개념으로 좀 더 명확한 구조와 의미를 부여하는 역할을 한다.

(출처 https://story.pxd.co.kr/1588)

출처 FEConf Korea

시각 이용자가 묶어서 파악해야할 정보를 스크린리더는 끊어서 읽어주는데, role은 그럴 때 유용하다고 한다.

여기서주의점~!!

! 올바르지 못한 ARIA를 사용할 바엔 ARIA를 사용하지 않는 편이 좋다.

스크린리더를 사용하여 페이지에 접근하는 경우 ARIA의 정보에 의지하게 되는데

바르지 못한 정보를 제공하게 되는 경우 스크린리더 사용자의 페이지 접근에 치명적인 영향을 주게된다.

<div role="button">주문하기</div>

예를 들어,

쇼핑몰에서 위의 소스처럼 div 영역을 버튼으로 사용하고 클릭시 주문이 되도록

소스를 작성했다고 했을 때, role="button"을 작성한다고 해서 실제 html 상에 키보드 포커싱이

일반 버튼처럼 역할을 주는 것은 아니다. (키보드로 해당 div가 접근이 안된다.)

만약 <button>, <input> 요소들처럼 키보드 지원이 되는 요소를 <div>와 WAI-ARIA로 작업해야 한다면, 동일하게 작동되도록 작업해주면 좋다.

<!-- html5 -->
<button>버튼<button>
</select>

<!-- div + WAI-ARIA -->
<div role="button" tabindex="0">버튼</div>

//tabindex는 기본적으로 키보드의 Tab키를 눌렀을 때 포커스의 이동 순서를 임의로 조정할 수 있는 HTML의 속성임!
//tabindex=”0”은 Tab키를 눌렀을 때 포커스를 받을 수 없는 요소, 이를테면 <span> 등의 요소에 포커스를 받게 할 수 있음!

//출처 https://nuli.navercorp.com/community/article/1132726

각 태그별로 적용할 수 있는 role

HTML 태그	암묵적 기본 역할 (role="")	적용 가능한 역할 (role="")
`<a href="">`	role="link"	button, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab
`<a> (href 속성 없이)`	x	어떤 role이든 적용 가능
`<article>`	role="article"	application, document, feed, main, none, presentation, region
`<aside>`	role="complementary"	feed, none, note, presentation, region, search
`<header>`	article, aside, main, nav, section태그의 자손 요소이거나role=article, complementary, main, navigation, region을 사용한 태그의 자손일 경우엔 암묵적 역할이 따로 없고해당 요소들의 자손요소가 아닐 경우엔role="banner"이다.	group, none, presentation
`<footer>`	article, aside, main, nav, section태그의 자손 요소이거나role=article, complementary, main, navigation, region을 사용한 태그의 자손일 경우엔 암묵적 역할이 따로 없고해당 요소돌의 자손요소가 아닐 경우엔 role="contentinfo"이다.	group, none, presentation
`<section>`	accessible name을 가지고 있다면role="region"그렇지 않다면 역할이 따로 없다.	alert, alertdialog, application, banner, complementary, contentinfo, dialog, document, feed, log, main, marquee, navigation, none, note, presentation, search, status, tabpanel
`<button>`	role="button"	checkbox, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab
`<div>`	x	어떤 role이든 적용 가능
`<dl>`	x	group, list, presentation, none
`<dt>`	role="term"	listitem
`<dd>`	role="definition"	x
`<fieldset>`	role="group"	none, presentation, radiogroup
`<form>`	accessible name을 가지고 있다면role="form"그렇지 않다면 역할이 따로 없다.	search, none, presentation
`<h1> ~ <h6>`	role="heading"	none, presentation, tab
`<img alt="텍스트">`	role="img"	button, checkbox, link, menuitem, menuitemcheckbox, menuitemradio, option, progressbar, scrollbar, separator, slider, switch, tab, treeitem
`<img alt="">`	x	x
`<img> (alt 속성 없이)`	role="img"	x
`<ul>`	role="list"	directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree
`<ol>`
`<li>`	role="listitem"	menuitem, menuitemcheckbox, menuitemradio,option, none, presentation, radio, separator, tab, treeitem
`<nav>`	role="navigation"	menu, menubar, tablist
`<svg>`	role="graphics-document"	어떤 role이든 적용 가능
`<input type="button">`	role="button"	link, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab
`<input type="checkbox">`	role="checkbox"	button(사용할 경우 aria-pressed 함께 사용), menuitemcheckbox, option, switch
`<input type="radio">`	role="radio"	menuitemradio
`<input type="text">`	role="textbox"	combobox, searchbox, spinbutton

Role에 대해 자세하게 알고 싶은 사람은 아래 링크를 보는 것을 추천!

https://www.w3.org/TR/wai-aria/#usage

2. aria-label 속성

텍스트 레이블이 없이 이미지로 표현될 때 정보를 부여해주어 컴포넌트의 특징이나 상황을 정의한다.

(출처 https://story.pxd.co.kr/1588)

검색이라는 안내 텍스트 없이 버튼을 나타낼 때 시각 정보를 이용할 수 없는 사용자는 어떤 버튼인지 알 수 없다. 물론 우리는 대체 텍스트를 이용할 수 있지만, aria-label을 이용하여 버튼 요소에 검색이라는 설명을 추가할 수 있다.

<button class="btn_search"></button>

<!-- 숨김 텍스트 이용하는 방법 -->
<button class="btn_search">
  <span class="hidden">검색</span>
</button>
<!-- WAI-ARIA 적용한 방법 -->
<button class="btn_search" aria-label="검색"></button>