널리

안녕하세요, 접근성팀입니다.

접근성 업무를 진행하며 접근성에 관심이 많은 외국 기업과 기관들이 참여하는 CSUN 컨퍼런스를 알게 되었습니다. 그동안 간접적으로 컨퍼런스 내용을 접했는데요, 올해에는 오프라인이 아닌 온라인으로 진행되어 참여하게 되었습니다.

 

CSUN(California State University, Northridge) 컨퍼런스는 매년 3월 진행하는 접근성 및 기술 분야의 최고 행사입니다. 컨퍼런스는 메인 행사 전에 진행되는 pre-workshop을 포함하여 3월 6일부터 3월 14일까지 여러 세션 및 각 업체들의 전시 부스 운영 형태로 진행되었고, 저희는 워크숍을 제외한 메인 세션에 참여했습니다. 발표 후 Q&A가 가능한 세션은 실시간으로 스트리밍 되었고, 실시간 세션들을 포함해 이외 세션들도 당일에 업로드되어 시청이 가능했습니다. 각 세션 당 30분 내외로 진행되었으며, 하루에 약 50개의 세션으로 구성되었습니다.

세션의 규모만으로도 놀라웠지만 접근성 분야의 최고 행사인 만큼 구글, 아마존과 같은 기업들을 포함하여 다양한 기업들이 여러 장애 유형을 고려한 보조 기술과 접근성 정보를 공유하는 시간이었습니다. 컨퍼런스가 종료되는 시점까지 온라인상으로 세션 별 영상을 모두 볼 수 있었기 때문에 주제를 확인하고 관심 있는 분야에 참여할 수 있었습니다.

 

구글, 아마존과 같은 기업에서는 새로 출시하였거나 업데이트된 자사 접근성 서비스에 대해서도 공개하였습니다. 현재 안드로이드 11에서 맛볼 수 있는 새로운 TalkBack 소개, 안드로이드 접근성을 어느 정도 자동으로 검사할 수 있는 접근성 검사기 업데이트 소식, 크롬에 추가된 자동 자막, el.role = "button"; 과 같이 스크립트에서 setAttribute 를 거치지 않고 요소에 바로 role 을 추가할 수 있는 aria-refelection, 아마존 알렉사를 통한 좀 더 세분화된 음성 쇼핑 기능 등입니다. 

 

크롬 실시간 자막 생성 캡쳐 이미지

 

혁신적 기술을 접목한 사례들이 눈에 띄었는데요, OrCam은 얼굴, 사물, 바코드, 색상 등을 인식하여 리딩 해 주는 안경에 부착 가능한 다기능 카메라입니다. AutoCad는 시각장애인이 간단한 코딩을 통해 업무에 효율적인 Cad작업을 가능하게 하는 프로그램입니다. CloverBook은 접이식 휴대용 돋보기로 텍스트를 크게 보거나 카메라로 멀리 있는 화면도 볼 수 있으며, 보이는 부분을 터치, 라이브 패닝, 대비, 확대/축소/이동 등이 가능합니다.

 

OrCam MyEy2 영상

 

CloverBook Pro 영상

 

또한 구글에서 모바일 앱 개발자들이 사용하는 안드로이드 스튜디오에서 제공하는 접근성 스캐너 프레임워크를 통해 기본적인 자동화 접근성 준수를 개발 시점에서 확인할 수 있게 하고 있으며 이에 대한 사용방법과 개발자들이 어떻게 접근성을 지키는지 설명을 해주고 있었습니다.

 

안드로이드 스튜디오 Accessibility Scanner 캡쳐 이미지

안드로이드 스튜디오를 통해 개발한 앱을 접근성 테스트 프레임워크 (Accessibility Test Framework)를 실행하여 우측 상단의 스캔하기 아이콘을 클릭하면 해당 터치 영역의 크기나 대체 텍스트 유무 등을 파악하여 아래 콘솔 창에 접근성 에러 이슈들을 출력해 주며 이를 직접 시연을 통해서 알려주기도 하였습니다. 해당 기능은 지속해서 안드로이드 스튜디오 업데이트와 더불어 진단 밀도를 높여가고 있으며 많은 해외에서는 대부분의 앱 개발자분들이 접근성 이슈에 대한 인지로 활용하고 있다는 것을 알 수 있었습니다.

 

특정 UI기술에 대한 세션들도 있었으며 그중 흥미로웠던 발표는 흔하게 쓰이는 캐러셀 위젯 에 대한 발표도 있었습니다. 해외의 접근성 전문 컨설팅 업체인 TPGI의 개발자분께서 발표를 진행했습니다. 캐러셀은 모바일 또는 PC웹 에서 흔하게 쓰이는 UI위젯 중 하나인데 참으로 접근성을 지키기 까다롭고 고려할 사항들이 많다는 내용을 안내해줬습니다. 캐러셀 이미지 위에 좌우 화살표가 오버랩되어 들어가는 경우가 많으며 이로 인해 명도 대비가 지켜지기 힘들고 슬라이드 이전에 가려진 이미지에 대한 접근, 이미지 아래에 겹쳐져 있는 점으로 된 페이징 처리, 맨 끝 이미지 슬라이드에서 처음 이미지로 반복되기 위해 강제로 초기 슬라이드 객체들을 이동시키는 처리까지 들어가 있는 복잡한 구조라고 설명해줬습니다. 스크린 리더기를 사용하는 키보드 유저와 보조기기 사용을 안 하는 키보드 유저를 위해서 올바른 접근성 준수 방법을 처음에 안내해줍니다. 보조기기 미사용 키보드 유저에게는 기본적인 탭 이동 순서는 현재 슬라이드 콘텐츠에 대한 접근, 이전 슬라이드, 다음 슬라이드, 페이징 원형 점 순으로 돼야 되며 슬라이드 전환 후에는 해당 슬라이드 콘텐츠에 바로 초점이 이동돼야 한다고 설명해줬습니다. 숨겨져 있는 슬라이드는 aria-hidden="true"로 처리도 해줘야 한다고 알려주고 있습니다. 스크린 리더 보조기기 사용자에게는 순차적으로 다음 슬라이드 콘텐츠로 이동이 되어 스크린 리더 사용자가 리스트 형식의 내용을 읽어 나가게끔 구조를 잡아주는 방식도 알려주었습니다. 이 방법으로는 aria-hidden 처리나 강제 초점이동 처리도 필요가 없어진다고 설명하고 있습니다.

 

스크린리더 사용자에게 인지되어야 하는 캐러셀 구조의 설명

두 가지를 모두 완벽히 만족하기에는 충돌되는 요소들이 많지만, 최소의 마이너 이슈들을 고려하며 지키기를 권하고 있습니다. 그리고 이보다 가장 중요한 캐러셀 형태에서 꼭 고려했으면 하는 요소 4가지를 설명하고 있습니다. 첫째로 콘텐츠 건너뛰기, 둘째 캐러셀 전체 객체를 하나의 그룹 요소로 묶어서 해당 영역은 캐러셀이라는 것을 인지시켜주며 향후를 위한 aria-roledescription="carousel" 의 추가로 철저해지며, 셋째 슬라이드 객체 요소 줄이기, 넷째 자동 재생 정지라고 설명해주고 있습니다.

 

Apple과 Adboe 에서 접근성 팀에서 근무한 발표자분의 세션에서는 본인의 HTML 코드 레이아웃 스타일에 관해서 설명해줬습니다. 프레임워크를 쓰더라도 오버라이드 처리로 본인의 기본 구조에 맞춰서 작성하며 자신의 노하우와 코드 스타일의 활용성에 대해서 안내했으며 실무적인 도움이 되는 내용이었습니다.

 

시멘틱 마크업 형태의 기본 구조

div.container-fluid
	header.row
	main.row.content-row
	footer.row

마크업은 모바일 퍼스트 기준으로 작업하여 최고 320px 까지 고려하여 나머지 아래의 미디어쿼리 구조로 작업을 한다고 합니다.

미디어쿼리  분리 구조

@media only screen and (min-width:544px){/* SM~Small */}
@media only screen and (min-width:768px){/* MD~Medium */}
@media only screen and (min-width:992px){/* LG~Large */}
@media only screen and (min-width:1200px){/* XL~Extra Large */}

기본 마크업 스타일로는 배경은 되도록 흰색으로 처리하여 명도 대비에 좋은 대처를 하도록 하고 contain-fluid 클래스 스타일을 통해 부모객체를 정의하고 있습니다. 콘텐츠가 되는 main 영역은 가로 형태의 객체로 1170px 을 최대로 기획하여 작업한다고 합니다.

상위 레이아웃 스타일

body {
	background-color:white;
}
html,body {
	width:100%;
	height:100%;
	position:relative;
	box-sizing:border-box;
}

.container-fluid {
	position:relative;
	width:100%;
	margin-left:8px;
	margin-right:8px;
}

main, .main, main .content-row, .content-row {
	max-width:1170px;
	width:100%;
	margin:auto;
}

이미지와 단락객체는 아래와 같은 구조로 이미지 크기가 화면을 넘어가지 않고 단락의 최대캐릭터를 설정하여 작업한다고 합니다.

이미지 및 단락 스타일

img {
	width:100%
	max-width:100%;

}

p, .normal-measure, .measure {
	max-width:33ch;
}


.max-measure {
	max-width:54ch;
}

 

접근성을 향상시키는 방법에는 기술적 측면뿐 아니라 번역, 보이스 오버, 비디오 더빙, 오디오 설명, 캡션, 수화 등 여러 가지가 있습니다. 사소한 부분이더라도 모든 사용자가 편리하게 이용 가능하도록 개발한 내용을 발표하는 세션들도 많았습니다.

전시 부스의 경우에는 원래 큰 홀에 수많은 업체들이 부스를 설치하여 제품들을 직접 만져보고 체험할 수 있도록 운영되었으나 올해는 전 행사가 온라인으로 진행되었기 때문에 각 부스별 소개 페이지를 두고 Zoom 혹은 google meet 등을 통해 각 업체와 대화할 수 있는 채널을 운영하였습니다. 따라서 각 스케줄에 맞춰 참가자들은 관심 있는 부스 홈페이지에 들어가서 업체가 올린 정보를 확인하고 추가적으로 궁금한 것이 있으면 라이브톡을 통해 궁금증을 해결하는 방식으로 운영되었습니다. 

 

2019년 12월부터 시작된 COVID-19 사태가 지속적으로 이어지면서 많은 분들이 힘든 생활을 하고 있는 상태입니다. 재택근무를 하는 회사들도 많아져서 온라인 회의 프로그램이 활성화되었고, 학생들 또한 온라인 교육을 진행하는 경우가 많아졌습니다.

리서치 결과로 원격 또는 온라인 회의 프로그램에서 장애 사용자들이 편리하게 사용하는 기능들과 보완이 필요한 부분들을 확인할 수 있었습니다. 업무, 교육, 의료 등 많은 분야에서 비대면 프로그램 접근성이 개선되어 다양한 사용자들이 COVID-19 상황에 불편하지 않도록 일상생활을 해 나갔으면 좋겠습니다.

발표의 공통점은 실무자들이 접근성을 준수하는 것을 당연하게 생각하여 모든 사용자들이 편하게 사용할 수 있는 서비스 개발을 목적으로 하는 것이었습니다. 우리나라도 접근성이 법적인 요소로만 다루어지는 것이 아닌, 필수 요소로 자리 잡기를 바랍니다.