컨텍스트에서의 웹 접근성

장애 인권 변호사이자 하버드 법대 최초 시청각장애인 졸업생인 하벤 기르마^{Haben Girma}는 지난달 열린 AccessU 디지털 접근성 콘퍼런스에서 다음과 같은 기조연설을 했다.

“나는 장애를 혁신의 기회라고 정의합니다.”

그녀는 청중을 매료시키고 감동을 주었으며, 터치로 수화를 배우는 법, 인터넷 서핑을 배우는 법을 알려주었다. 그리고 연설 이후 질문 시간에 자신이 사용한 키보드와 점자 간 통신 시스템에 대해 이야기했다.

하지만 앱을 만드는 우리 대부분은 이와는 대조적인 관점을 갖고 있다. 웹 접근성은 버전2에서나 검토할 만한 혼란스러운 규칙의 모음이며 처리는 뒷전이 된다. 만약 이런 이야기에 익숙하다면(당신이 개발자, 디자이너 또는 제품 관리자라면) 이 기사가 도움이 될 것이다.

기술, 장애 그리고 디자인의 넓은 영역에 어떻게 웹 접근성이 적용되는지 보여줌으로써 당신의 관점이 하벤 기르마와 더 가까워졌으면 한다. 우리는 통찰력과 혁신을 이끌어내는 다양한 능력의 집합을 어떻게 디자인하는지 살펴볼 것이다. 또한 브라우저와 HTML의 역사가 보조 기술의 역사와 어떻게 연관되어 있는지 설명할 것이다.

보조 기술

접근 가능한 제품은 누구나 사용할 수 있는 것을 뜻하며, 보조 기술은 장애로 접근이 불가능할 때 이를 돕는 장치 또는 기술을 의미하는 일반적인 용어이다. 예를 들어 자막은 청각장애인과 듣기가 어려운 사람들이 비디오에 접근할 수 있도록 도와준다. 하지만 무엇을 장애로 간주하는가에 대해 물으면 더욱 관심이 생길 것이다.

세계보건기구^WHO에서는 장애의 ‘사회적 정의’에 대해, 장애란 개인의 본질적인 속성이 아니라 개인의 능력과 환경의 불일치로 규정한다. 어떤 것은 ‘장애’ 또는 ‘보조 기술’로 구분하는 데 명확한 경계가 없고 단지 문맥에 따라 정의될 뿐이다.

능력과 환경 사이의 불일치를 해결하는 것은 기술 혁신뿐만 아니라 세계를 인간이 어떻게 인식하고 상호작용하는지에 대한 새로운 이해로까지 이어지는 데 영향을 미쳤다.

뉴욕의 쿠퍼 휴이트 스미스소니언^{Cooper Hewitt Smithsonian} 디자인 박물관에서 최근에 개최된 ‘Access+Ability’ 전시회에서 최신 보조 기술 프로토타입과 제품을 선보였다. 나는 감각 디자인에 대한 큰 전시회를 보기 위해 박물관에 갔는데 교차 감각 인터페이스에 초점을 맞춘 이 작은 전시회가 감각에 대해 훨씬 더 많은 통찰력을 제공한다는 것을 알게 되었다.

보는 것은 눈이 아니라 뇌에서 이루어진다. 이는 전시회에 출품된 아이템 중 시각장애인 또는 저시력자를 위한 장치, 브레인포트^Brainport가 만들어진 아이디어가 되었다. 뇌가 눈을 통해 받은 자극을 해석한 것에 기반하여 시각에서 물리적인 환경을 표현한다.

만약 당신의 뇌에서 일반적으로 받아들이는 정보가 눈이 아닌 다른 감각을 통해서 전달된다면 어떨까? 브레인포트의 헤드셋에 달린 카메라는 착용자의 혀에 ‘거품’으로 픽셀과 같은 격자 패턴의 부드러운 자극을 변환하여 시각적 입력을 받는다. 사용자들은 마음의 눈으로 주변을 “볼 수 있다”고 말한다.

사운드 셔츠^Soundshirt 또한 일반적으로 하나의 감각에서 인식되는 자극을 다른 감각을 통한 자극으로 변환한다. 이 웨어러블 기술은 셔츠에 다채로운 소리 센서, 오케스트라의 다양한 악기와 같은 미묘한 진동을 적용하여 교향곡의 즐거움을 촉각을 통해 느낄 수 있다. 또한 복잡한 의료기기 대신 친숙하게 디자인된 보석처럼 보이는 보청기를 통해 소리를 해석하는 디스플레이가 달려 있다.

다양한 능력을 위한 디자인은 종종 그들이 의도한 사용 방법을 뛰어넘어 사람과 환경에게 유용한 혁신으로 이어진다. 휠체어가 보도블록에 쉽게 접근할 수 있도록 인도에서 이어지는 연석^{curb cuts}은 지금은 누구나 익숙하게 사용하지만 1970년대 장애인 인권운동에서 유래되었다. 펠레그리노 투리^{Pellegrino Turri}는 시각장애인 친구가 글을 읽을 수 있도록 1800년대 초반에 초기 타자기를 발명했으며, 최초의 상업용 타자기인 한센 라이팅볼^{Hansen Writing Ball}은 코펜하겐 왕립 청각장애인 협회장에 의해 만들어졌다.

빈트 서프^{Vint Cerf}는 청각장애를 언급하며 공동 개발한 전자우편과 TCP/IP 프로토콜에 관심을 보였다. 색맹 사용자를 위한 스마트폰의 색상 대비 설정은 밝은 햇빛 속에서 화면을 보는 사람에게 유용한데 휴대전화 중독에서 벗어나도록 돕는 예상하지 못한 용도를 발견하기도 했다.

즉 다양한 능력을 위한 디자인은 우리에게 어떻게 환경을 인식하고 상호작용하는지에 대해 새로운 통찰력을 제공하고 보조 기술과 일반적인 기술 사이 경계의 불확실성을 만드는 혁신으로 이끈다.

이를 염두에 두고 이제 웹으로 돌아가보자.

보조 기술과 웹

웹은 처음부터 모두가 접근할 수 있도록 만들어졌다. 웹 접근성을 공부하다 보면 다음 문구를 많이 만나게 될 것이다.

“웹의 힘은 보편성에 있다. 장애에 구애받지 않고 모든 사람이 접근할 수 있는 것이 웹의 필수 요소다.”

  —팀 버너스리, W3C 디렉터이자 월드 와이드 웹 창시자

 

웹을 인식하고 상호작용하기 위해서 어떤 종류의 보조 기술을 사용할 수 있을까? 화면 내용을 읽어주는 스크린 리더에 대해 들어보았거나 사용해본 적이 있을 수도 있다. 웹 페이지를 점자 화면으로 변환하는 장치나 아이트래커와 같은 대체 입력 기기도 있다.

웹 페이지가 점자로 표시되는 것을 배우는 것은 매우 흥미로운 일이다. 우리가 만드는 웹 페이지는 3D로 표현할 수도 있다! 점자 화면은 대개 페이지의 작은 부분 단위로 ‘번역’하며 올라오거나 내려가는 핀으로 만들어진다. 하벤 기르마가 AccessU에서 기조연설 후 청중의 질문을 읽을 때 사용한 장치와 매우 유사하다. 신생기업 블리탭(‘시각장애^blind’ + ‘태블릿^tablet’에서 명명)에서는 화면의 질감을 변화시키는 액체를 사용하여 점자 안드로이드 태블릿을 만들고 있다.

오디오 스크린 리더를 능숙하게 사용하는 사람들은 더 빠른 말에 익숙해지고 인상적으로 재생 속도를 조절할 수 있다(뿐만 아니라 화면을 꺼서 배터리 수명을 절약할 수도 있다). 스크린 리더는 웹사이트와 상호작용할 수 있는 쓸 만한 대안책이며, 실제로도 많은 사람이 콘텐츠를 듣거나 받아쓰는 데 활용한다. 일부 사람들을 위한 인터페이스가 보다 넓게 사용되고 있는 것이다.

스크린 리더보다는 웹 접근성이 더 고차원의 개념이지만 일단 여기서는 스크린 리더에 초점을 맞출 것이다. 접근 가능한 웹에 대한 기술적 도전의 핵심이 바로 스크린 리더이기 때문이다.

추천 자료: 스티븐 램버트^{Steven Lambert}의 “접근성과 포함에 대한 디자인^{Designing For Accessibility And Inclusion}”

기술적 도전과 초기 접근법

스크린 리더를 설계해야 한다고 상상해보자. 당신도 보조 기술을 배우기 전의 나와 같다면, 일단 오디오북 버전의 웹 페이지를 상상하는 것에서 시작해보자. 당신의 임무는 페이지 안에 있는 단어를 자동으로 읽게 하는 것이다. 하지만 지금 보고 있는 이 페이지는 어떠한가? 레이아웃과 디자인을 통해 당신이 얼마나 많은 시각적 신호를 사용하고 있는지, 이와 얼마나 상호작용하고 있는지 알 수 있을 것이다.

• 이 페이지의 텍스트에 클릭할 수 있는 링크나 버튼이 포함되었는지 스크린 리더가 어떻게 알 수 있을까?
• 페이지의 텍스트를 어떤 순서로 읽을지 스크린 리더가 어떻게 정할까?
• 사용자가 문서의 메인 제목을 결정하기 위해 이 페이지를 어떻게 하면 빠르게 훑어볼 수 있을까?

초창기 스크린 리더는 텍스트 기반의 인터페이스만 다루었기 때문에 내가 처음 상상했던 오디오북처럼 단순했다. 1980년대 중반에 개발된 ‘대화형 터미널’은 화면 버퍼의 ASCII 문자를 오디오 출력으로 변환했다. 하지만 금세 그래픽 사용자 인터페이스 (또는 GUI) 가 보급되었다. 1991년 잡지 《바이트^BYTE》의 “GUI 대화 만들기” 기사에 따르면 새로운 스크린이 보급되면서 새로운 시각 콘텐츠가 등장했고 이 때문에 스크린 리더도 새로운 기술이 필요하게 되었다. 미국 장애인 법률이 새롭게 통과되면서 이 중요성이 더 부각되었다.

《바이트》 기사에서 다룬 아웃스포큰^OutSpoken은 GUI를 위한 최초의 상용 스크린 리더 중 하나다. 아웃스포큰은 운영체제 단계에서 그래픽 명령어를 가로채서 화면의 각 부분을 데이터베이스로 표현하는 오프스크린 모델을 구축한다. 예를 들어 버튼이 그려져 있거나 텍스트와 연관된 아이콘이 있음을 추측하기 위해 휴리스틱스^heuristics를 통하여 그래픽 명령어를 해석한다. 사용자가 화면에서 마우스 포인터를 움직이면 스크린 리더는 오프스크린 모델을 통해 커서의 위치가 화면의 어느 부분에 있는지 읽어 들인다.

하지만 로 레벨^low-level의 그래픽 명령어는 복잡하고 운영체제에 종속되어 있으므로 이런 초창기 접근법을 적용하기 어렵다. 또한 휴리스틱스에 의존하여 명령어를 해석하면 오류가 발생하기 쉽다.

시맨틱 웹과 접근성 API

시맨틱 웹 아이디어를 바탕으로 1990년대 후반에 스크린 리더에 대한 새로운 접근법이 나타났다. 팀 버너스리^{Tim Berners-Lee}는 1999년 저서 《월드와이드웹: 당신이 꿈꾸는 인터넷 세상^{Weaving the Web: The Original Design and Ultimate Destiny of the World Wide Web}》에서 다음과 같이 자신의 꿈을 기술했다.

나는 사람과 컴퓨터 사이의 콘텐츠, 링크, 트랜잭션 같은 웹의 모든 데이터를 분석할 수 있는 능력을 가진 웹(컴퓨터)을 꿈꾼다. 이를 가능하게 하는 ‘시맨틱 웹’이 아직 등장하지 않았지만 만약 그렇게 된다면 무역, 생활에 필요한 모든 규칙이나 시스템 그리고 일상생활에서 매일매일 이루어지는 메커니즘은 기계와 대화하는 기계를 통해 처리될 것이다. 사람들이 오랫동안 염원했던 ‘지능형 에이전트’가 드디어 실현되는 것이다.

 

버너스리는 시맨틱 웹을 “기계들이 직간접적으로 처리할 수 있는 데이터의 그물망”이라고 정의했다. 이 꿈이 얼마나 실현되었는지는 논쟁의 여지가 있고 많은 사람이 지금으로서는 비현실적인 꿈이라고 생각한다. 하지만 우리는 오늘날 웹을 위한 보조 기술을 통해 이 꿈의 일부분이 전개되고 있음을 볼 수 있다.

버너스리는 1994년 웹의 국제 표준 그룹인 W3C를 설립할 때부터 웹 접근성을 강조했다. 그는 1996년 W3C의 웹 접근성 이니셔티브^{Web Accessibility Initiative} 뉴스레터에 다음과 같이 기고했다.

 

월드 와이드 웹^{World Wide Web}의 출현은 적절한 컴퓨터와 통신 장비를 가진 개인이 이전과 전혀 다른 상호작용을 할 수 있게 했다. 이는 장애인에게 새로운 도전과 희망을 보여주었다.

1990년대 후반에 개발되어 1998년에 출시된 HTML4는 문서 구조와 의미를 감각적인 것이나 표현을 위한 고민과는 분리해야 한다는 것을 강조했다. 이는 시맨틱 웹 원리에 기반하여 접근성에 대한 지원이 향상되면서 부분적으로 동기를 부여했다. 우리가 현재 사용하고 있는 HTML5는 이런 아이디어를 바탕으로 만들어졌으며 그 디자인의 핵심은 바로 보조 기술에 대한 지원이다.

그렇다면 오늘날의 브라우저와 HTML은 스크린 리더를 어떻게 지원하나?

많은 프런트엔드 개발자는, 특히 보조 기술을 위해서 브라우저가 DOM을 파싱하여 데이터 구조를 만든다는 것을 인식하지 못한다. 이것은 접근성 트리^{accessibility tree}로 알려진 트리 구조로서 스크린 리더용 API를 만들기 위한 것이다. 이 말은 곧 오프스크린 모델처럼 더 이상 렌더링 프로세스를 가로챌 필요가 없다는 뜻이다. 이제 HTML은 하나의 표현 방식으로 화면 렌더링이나 오디오 또는 점자 장치에 정보를 제공할 수 있다.

접근성 API에 대해 좀더 자세히 살펴보고 앞에서 우리가 고민한 과제를 어떻게 처리하는지 알아보자. ‘접근 가능한 객체^{accessible objects}’로 불리는 접근성 트리의 노드는 DOM 노드의 서브셋에 해당하며 HTML 마크업에서 뽑아낸 role(button과 같은), name(버튼의 텍스트와 같은), state(focused와 같은)를 포함한 속성을 갖고 있다. 스크린 리더는 페이지의 이런 값들을 사용한다.

바로 이 방법을 통해 비장애인이 의존하는 시각적인 신호 없이도, 이것이 버튼임을 스크린 리더 사용자가 알 수 있는 것이다. 스크린 리더 사용자는 모든 정보를 읽지 않고도 어떻게 페이지에서 관련 정보를 찾을 수 있을까? 최근 조사에 따르면 스크린 리더 사용자가 정보를 찾는 가장 일반적인 방법은 페이지 제목을 보는 것이라고 한다. 만약 h1–h6 태그가 달린 요소가 있다면 heading이라는 role을 가진 접근성 트리의 노드가 생성된다. 스크린 리더에는 ‘다음 제목으로 건너뛰기’ 기능이 있어서 이를 통해 페이지를 훑어볼 수 있는 것이다.

일부 HTML 속성은 접근성 트리를 위해 만들어졌다. HTML 태그에 ARIA^{Accessible Rich Internet Applications} 속성을 추가하여 해당하는 노드의 name과 role을 지정할 수 있다. 예를 들어 텍스트 대신 아이콘으로 된 버튼이 있다고 가정해보자. 버튼에 aria-label="sign up"을 추가하면 스크린 리더 사용자에게 표현할 수 있는 버튼이 된다. 마찬가지로 이미지 태그에 alt 속성을 추가함으로써 접근 가능한 해당 노드와 스크린 리더 사용자가 페이지에 무엇이 있는지 알 수 있게끔 대체할 수 있는 텍스트를 제공할 수 있다.

시맨틱 접근법의 단점은 바로 개발자들이 코드에서 의도한 것과 일치하도록 HTML 태그와 aria 속성을 사용해야 한다는 것이다. 이는 결국 개발자들 사이에서 인식의 필요 그리고 그들의 팀에서 접근성에 대해 우선순위가 있어야 한다는 것을 의미한다. 현재 웹 접근성의 주요 장벽은 어떤 기술적인 한계보다도 접근성이 중요하다는 것에 대한 인식과 우선순위의 결여다.

그래서 현재 웹을 위한 보조 기술에 대한 접근은 시맨틱 웹 이론을 기반으로 하며 브라우저와 HTML 설계에 반영되었다. 개발자들과 그 팀들은 이를 이용할 수 있도록 HTML에 내장된 접근성 기능을 알아야 한다.

추천 자료: 레오니 왓슨^{Léonie Watson}의 “접근성 API: 웹 접근성의 핵심”

AI 연결

오늘날 시맨틱 웹의 꿈에 대해 버너스리가 언급한 것을 읽으면 머신러닝(ML)과 인공지능(AI)이 떠오른다. 컴퓨터가 데이터를 분석하는 지능형 에이전트라고 한다면 우리는 이것이 머신러닝 접근법을 통해 수행된다고 생각할 수 있다. 초창기의 오프스크린 모델은 시각적인 정보를 분류하기 위해 휴리스틱스를 사용하는 접근법을 취했다. 이는 입력 값을 분류하기 위한 휴리스틱스가(수작업 코딩보다는 이전에 본 시각적 입력 값의 자동 분석을 기반으로 한다는 것을 제외하고), 머신러닝의 접근법을 떠오르게 한다.

만약 우리가 머신러닝을 사용하기 위해 생각했던 웹 접근성을 위한 방법을 초창기부터 알았다면 어땠을까? 그 기술들이 지금도 유용할까?

머신러닝은 최근 몇 가지 보조 기술에 사용되고 있다. 마이크로소프트의 씨잉AI^SeeingAI와 구글의 룩아웃^Lookout은 스마트폰 카메라를 통해 본 개체를 머신러닝을 이용해 분류하고 말해준다. CTRL 랩스는 머신러닝 기술로 해석한 미세 근육의 움직임을 감지하는 기술을 개발하고 있다. 이처럼 움직이고자 하는 생각을 읽고 몇몇 운동신경장애에 도움을 주는 애플리케이션이 등장할 수 있는 것이다. AI는 텍스트를 읽기 위해 글자를 인식하는 데도 사용되고 수화를 텍스트로 변환하는 데도 사용된다. 최근 머신러닝을 사용한 안드로이드의 발전으로 사용자 주변 소리를 증폭하고 품질을 높여 대화를 자동으로 기록해주는 기술도 생겼다.

AI는 접근성 트리로 가는 데이터를 개선하는 데도 도움을 준다. 페이스북은 사용자에게 이미지를 스크린 리더의 스크립트로 제공하기 위해 자동으로 생성되는 대체 텍스트를 도입했다. 결과는 불완전하지만 흥미로운 방향을 제시했다. 한 걸음 더 나아가 구글은 크롬에서 브라우저가 제공하는 이미지를 대체 텍스트로 자동 생성하는 기능을 제공할 것이라고 최근 밝혔다.

다음은 무엇일까?

머신러닝 접근법이 더 성숙해질 때까지 웹 접근성은 접근성 트리에 기반한 API에 의존한다. 이는 강력한 해결책이지만 브라우저 내의 보조 기술을 활용하려면 웹사이트를 개발하는 사람들이 이를 인식해야 한다. 어떤 기술적 어려움보다도 인식의 부재가 현재 웹 접근성의 주요 과제이다.

요점

• 다양한 능력의 집합에 대한 디자인은 우리에게 새로운 통찰력을 줄 수 있고 널리 사용 가능한 혁신을 이끌어낼 수도 있다.
• 웹은 처음부터 모두가 접근할 수 있도록 만들어졌으며 웹의 역사는 웹을 위한 보조 기술의 역사와 얽혀 있다.
• 웹을 위한 보조 기술은 현재 브라우저와 HTML의 설계에 반영되었다.
• 특히 AI를 포함한 보조 기술 설계는 지속적으로 새로운 통찰력을 제공하며 혁신을 이끌고 있다.
• 현재 웹 접근성의 주요 과제는 개발자, 디자이너 그리고 제품 관리자들이 인식을 가져야 한다는 것이다.

참고 자료

• 구글의 web.dev 접근성 가이드는 간결하며 상호작용 가능한 작은 데모를 제공한다.
• 마이크로소프트에서 제공하는 크롬의 확장 프로그램 Accessibility Insights는 브라우저의 문제점을 알려준다.
• 접근성 트리에 대해 더 알고 싶다면 레오니 왓슨의 스매싱 매거진 기사 “접근성 API: 웹 접근성의 핵심^{Accessibility API’s: A Key to Web Accessibility}”, 마시 서턴^{Marcy Sutton}의 에그헤드 비디오 “접근성 트리란 무엇인가?^{What is the Accessibility Tree?}”, 롭 도드슨^{Rob Dodson}의 “왜 아직도 스크린 리더를 테스트하지 않았는가!^{Why you can’t test a screen reader(yet)!}”를 보자.
• 캣 홈스^{Kat Homes}의 《불일치: 설계에 형태를 어떻게 포함시킬 것인가^{Mismatch: How Inclusion Shapes Design}》에서 장애에 대한 사회적 정의와 이를 설계에 어떻게 반영할 수 있을 것인가에 대해 읽어보자.