모두를 위한 접근성(Accessibility for Everyone) 후기

UX Philosophy
8 min readAug 19, 2019

8월 3일 구글 캠퍼스에서 진행한 ‘모두를 위한 접근성 (Accessibility for Everyone)’ 간단한 요약과 후기입니다 :) 개인적으로 메모하듯 정리해서 문장이 매끄럽지 않을 수 있습니다.

키노트

by. 조은

접근성 : 정보의 차별을 일으키지 않도록 하는 것

불편함이 정보의 차별을 일으키지 않는 것

모두에게 동등한 정보가 전달되는 것.

1차적으로 모두가 인식 가능한 것.

첫번째 세션

디자이너가 알아두면 좋은 접근성 고려 사항 (Design for Accessibility)

by 오남경 / RIDI Product Designer

오늘 얘기하고자 하는 것은 기업이 주장하는 접근성이 아니라 포괄적인 접근성에 대해 얘기할 것

빔으로 쏘는 키보드는 마우스 스틱을 어떻게 쓰게 할 것인가?

잘 들을 수 없는 사람은 자막 서비스를 이용한다.

Screen Reader — 디바이스가 음성으로 읽어주는 기능

아이들 타겟으로 컬러를 명도,채도를 높게 사용하거나, 신체 능력이 떨어지는 노인들을 위해 큰 버튼 등이 필요할 수 있습니다.

Apple, Microsoft, Google의 사례

구글 i/o 세션에서 수화랑 자막 제공하는 행사를 보고 충격 받음. (한국에서는 파이콘 제외하곤 본적이 없었다.)

  • 구글,애플 — 다크 테마 (어두운 곳에서 편하게 보도록. 필요한 정보를 바로 보도록 제공한다.
  • 마이크로소프트 — Incusive design 이라고 해서 3가지의 상황을 제시함

Microsoft Design

사람이 인터랙션이 안될 때가 장애라고 정의함

우리는 일부의 사람을 위해 디자인이나 개발할 것이 아니라, 모든 사람들을 대상으로 제품을 만들어 나가는 것이 중요하다.

WCAG — Web Content Accessibility Guidelines (웹 접근성 표준)

Web Content Accessibility Guidelines (WCAG) Overview

2018년에 WCAG 2.0 — 네가지 범주의 지침 (인식, 작동, 이해, 견고성)

각 지침의 적합성 단계가 있음 (A, AA, AAA)

AAA 단계는 까다롭고 구현하기 어렵다. AA정도를 권고함

대비

대비 권장사항을 확인할 수 있는 두 사이트

Color Tool — Material Design

Accessible Colors | WCAG 2.0 AA and AAA color contrast checker

이해 — 가독성

RIDI에서는 명확한 설명을 위한 가이드라인이 존재합니다.

안내하는 텍스트를 할 때는 명료하게 해야 합니다.
부정적 어조 < 긍정적 어조를 사용해서 신뢰도 향상

일관성

Lift 버튼 하나 만 조작하며 대부분의 페이지를 일관성 있게 사용할 수 있다.

링크 텍스트 표현

UI 디자인. < 단어에 링크를 거는 방식

WCAG 2018 2.1 버전

Web Content Accessibility Guidelines (WCAG) 2.1

모바일, 태블릿, 웨어러블 기기가 없던 이전 버전의 결함을 보완한 내용

기기 회전

뷰포트 고정을 지양하는 가이드라인이 2.1 버전에서 추가되었습니다.

입력 목적 식별

(좌) ‘볼륨 오프’ / (우) ‘메세지’?, ‘다이얼로그’? 불명확하다.

명쾌한 아이콘을 사용해야 한다.

많은 사람들이 인지할 수 있는 아이콘을 제안해라

입력폼에 자동 완성하는 기능도 제안

리플로우

400%로 봤을 때 가로 스크롤이 생기지 않아야 한다 (리디 — 반응형 적용하면 나아지지 않을까..)

좋은 예시 : BBC (400% 확대해도 깨지지 않음)

BBC — Homepage

비텍스트 명도 대비

텍스트 간격

사용자가 글자 크기를 조정해도 깨지지 않음

RIDI UI Design

RIDI Design System

UI TEXT

-리디 디자인 시스템 : 어떤 톤으로 작성할건지, 날짜, 책 타이틀 등 텍스트 가이드라인을 만들어서 사용자가 명쾌하게 인지하도록 하자는 약속이 있습니다.

이미지 대체 텍스트

디자인 시스템을 만들면서 접근성과 관련된 내용을 제안하는 게 어떨까

alt 속성 을 스크린 리더로 읽으면 [기획 배너]~~~ 이상하게 나옵니다. → 이를 ‘취업과 이직 제대로 준비하기’로 바꾸면 접근성 대응이 될 것.

장애라는 것이 사람이 인터랙션을 하지 못하는 순간이 장애이다.

접근성을 고려하여 서비스, 제품이 발전했으면 좋겠다. 서드파티 앱에서도 많은 발전이 있기를 바랍니다.

두번째 세션

보조 기술 (Assistive Technologiest) 이해하기

by 조은

  • 세션 목차

내가 이 작업을 하는 건 ‘장애인을 위해 만드는 것이기 때문이다’ 가 아니라 자연스럽게 당연히 고려해야 하는 것

비용을 고려를 상당히 많이 한다

서비스 만들때 10대 사용자쓰지 말게하자 이러진 않는 것처럼!

전세계 인구 중 10% 장애인 + 노인, 약자, 장애 등급이 없는 사람 까지.

비용을 따지는 것이 인류의 보편적 가치에서 많이 벗어나지 않나

장애인은 동정의 대상이 아니다

“장애인이 나와서 돌아다니는 게 미안한 일인가요?”

스크린 리더 같이 사용해보기

맥 OS에는 Voice over (커맨드 + F5)를 사용, 윈도우에서는 센스리더, NVDA 사용

  • 관련 링크

세션에서는 Voice Over 를 같이 사용해보았습니다.

네이버, 나이키 😩

  • 알트 이미지, 옵션 안보임
  • 라디오, 레이블을 같이 선택해 놓지 않아서 옵션 선택이 불가능
  • 이모지는 못 읽는다 (빈 텍스트)
  • 로그인 오버레이 팝업 — 포커스를 주지 않으면 페이지 맨 하단에서 로그인 가능
  • 실제 사용하는 입장에선 헤딩 단위로 사용하는데 대응을 하지 않았음
  • 한국어 사이트 리디렉션 정보 노출 X

노션 😩

  • lang 설정 en→ko (en으로 되어 있어서 스크린 리더가 ‘가나다’를 읽을 때 ‘한글 입력 가’ ‘한글 입력 나’ ‘ 한글 입력 다’라고 읽는 현상이 발생함)
  • 우리가 자주 쓰는 노션 또한 스크린 리더로 읽었을 때는 접근성 탈락입니다..

생각해볼 만한 여지들

  • 웹 접근성 대응 / 앱 접근성 대응
  • 한국어 / 영어 는 어떻게 읽는지, 스트롱 em 요소는?

좋은 사례?

  • 문서로 이루어진 WCAG 사이트
  • 국내에선 다음, 카카오가 신경을 쓴 편

애플 HCI 접근성 가이드라인 조차…

  • 4.5 : 1 권장이지만 실제는 3.4:1 이더라

스크린 리더 등을 사용하면, ‘할거 다했어 , 이 정도면 되지 않을까?’에서 한단계 더 나아갈 수 있지 않을까…

네트워킹 시간

실제로 겪어볼 수 있을 만한 상황들을 카드로 만들어 주셨습니다.

6명이 한 조가 되어서 카드들을 받고 관련된 주제로 15분 정도 토론하였습니다.

저희 조는 실무자 분들이 더 많으셔서 실제 조직에서 접근성을 대응하려면 어떻게 해야 하는가? 에 대해 더 많이 얘기했던 것 같습니다. 내용을 정리해보면,

  1. 개발 단에서 부터 프로세스를 만들려는 시도를 했지만, 기획 입장에서 기업에게 얼마나 이득이 되는지에 대한 어필이 되지 않아 프로세스 도입에 실패했다.
  2. 브라우저 자체에서 보이스 오버를 감지해서 접근성을 대응하기 위한 사이트로 재 접속하는 방법이 있을 수 있지만, 이 또한 두 배의 시간이 걸린다.

시간이 부족해서 더 토론할 수 없어서 아쉬웠지만, 실제로 접근성을 대응하려고 하신 팀원 분의 경험을 공유 받을 수 있어서 좋았습니다. :) 그리고 기획, 디자인 단에서 부터 접근성을 고려하는 게 중요하다는 생각이 들었네요.

강의 내용처럼 서비스나 제품을 만드는 입장에서 우리에게 득이 되지 않으니 고려하지 않고 만드는 것이 아니라, 인류의 보편적 가치를 위해서라도 리소스와 시간을 투입하는 방향으로 발전해 나갔으면 좋겠습니다.

또한, 국내 세미나나 컨퍼런스에서 자막, 수화를 지원하는 곳이 늘어났으면 좋겠네요.

Facebook Page UX Philosophy(https://www.facebook.com/UXPhilosophy) 좋아요, 팔로우 부탁드립니다!
피드백은 환영입니다. 피드백주실 내용 있으시면 uxphilosophy@gmail.com로 메일 부탁드립니다!
읽어주셔서 감사합니다.

--

--