[2019널리세미나] 비슷하지만 다른 웹과 모바일 접근성

•

1 like•747 views

안녕하세요 비슷하지만 다른 웹과 모바일 접근성에 대해 발표하게 된 NTS 접근성팀 이선주입니다. 연사 초청을 받고 나서 아 주제를 뭐로 해야 할까 고민을 무지 많이 했어요. 항상 무슨 세미나가 있다 그러면 무조건 신청하고 보지 않나요? 회사안가니까, 뭐라도 도움이 되지 않을까, 아니면 경품에 혹해서? 그런데 막상 하루 종일 세미나를 듣고 와도 머리에 남는 건 많지 않나요? 접근성 세미나에서는 보통 웹에는 이런 것들이 있습니다 또는 모바일에서는 이런 것들이 있습니다. 라고 쭉 설명을 하는 경우가 많아서 무엇을 주제로 해야 할까 고민해보다가 세부적인 지침을 다 다루기보다는 웹에만 있거나 모바일에만 있거나 또는 웹과 모바일에 동시에 있어서 헷갈리는 부분들을 다뤄 봐야겠다 라는 생각이 들었습니다. 지금부터 웹과 모바일 접근성 차이에 대해 살펴보도록 하겠습니다. 웹에는 24가지의 접근성 항목이 있는데요, 다들 기본적으로 알고 계시죠..?? 알고 계시죠?? 그래서 이렇게 몇 가지만 모바일과 비교하여 살펴보도록 하겠습니다. 웹에는 키보드 사용 보장 항목이 있는데요 말 그대로 키보드 사용을 보장한다 입니다. 마우스를 사용하기 힘든 사용자들은 키보드로 웹을 탐색하기 때문에 모든 기능은 키보드만으로도 사용할 수 있어야 합니다. 그러려면 마우스로 동작할 수 있는 기능들은 모두 키보드로도 동작할 수 있도록 구현해주셔야 겠죠? 그럼 모바일은 어떨까요? 모바일은 키보드가 없습니다. 모바일은 터치 기반 입니다. 모바일에는 키보드 사용 보장이라는 항목 대신 누르기 동작 지원 항목이 존재하는데요, 모바일에서는 모든 기능이 누르기 동작으로 조작 가능해야 합니다. 이게 무슨말이냐, 통상적인 예로 지도 앱이 있는데요, 지도를 확대시키려면 두 손가락을 이용해야 하죠? 그럼 두 손가락을 이용하지 못하는 사용자는 이 기능을 어떻게 사용해야 할까요? 또한 스크린 리더 사용시 두 손가락 사용은 다르게 탐색하는 기능이기 때문에 다중 누르기, 펜, 끌기와 놓기 등의 복잡한 동작은 단순한 누르기 동작을 함께 제공되어야 합니다. 이렇게 끌어다 놓기로 이동이 가능한 경우 우측과 같이 누르기 동작만으로도 이동이 가능하도록 구현해야 합니다. 다음은 웹에서의 조작 가능 항목인데요, 저만해도 버튼이 너무 작으면 마우스로 클릭하기 힘들거든요, 손 떨림 현상을 가진 사용자와 같이 정교한 마우스 조작이 어려운 사용자들은 작은 컨트롤을 조작하는 것이 더~어 힘들겠죠? 따라서 컨트롤의 크기는 대각선 길이가 6mm이상이 되도록 구현해야 합니다. 가로, 세로가 아니라 대각선 길이 입니다. 모바일에도 비슷하게 컨트롤의 크기와 간격 항목이 있는데요 모바일에서는 컨트롤의 가로, 세로 길이가 각각 9mm 이상이 되도록 구현해주셔야 합니다. 컨트롤 크기는 아무래도 디자이너분들이 신경 써 주셔야 할 영역인 것 같은데요, 즉, 컨트롤을 큼직큼직하게, 클릭하기 쉽게 제공해주시면 됩니다. 웹에는 반복 영역 건너뛰기 항목이 있는데요, 저는 처음에 이게 반복되는 영역으로 건너뛰는 기능 인줄 알았어요. 그래서 메뉴로 바로 가기 이렇게 제공해야 하는 줄 알았는데 그게 아니라 반복되는 영역을 건너뛰는 기능이었습니다. 페이지마다 보통 메뉴가 반복되어 있는데요, 웹 페이지를 들으면서 탐색하는 분들은 다른 페이지에 갈 때마다 이 메뉴를 처음부터 다시 읽어주게 되어 불편합니다. 따라서 페이지마다 반복되는 콘텐츠를 건너뛸 수 있는 기능을 제공해야 합니다. 반복 영역 건너뛰기는 마크업 상 최 상단에 위치해야 하고 당연히 링크는 페이지 내에 존재해야 하며 키보드 접근 시 화면에 노출되어야 합니다. 또한 하단 메뉴로 바로가기 와 같은 위치 정보는 시각장애인의 경우 하단이 어디인지 알 수 없기 때문에 본문으로 바로 가기와 같이 명확하게 제공해야 합니다. 그럼 모바일은 어떨까요? 모바일은 반복 영역 건너뛰기 항목이 없습니다. 모바일은 화면 공간이 협소하기도 하지만 보통 반복되는 콘텐츠인 메뉴를 이렇게 아이콘으로 제공하여 선택 시 메뉴가 노출되기 때문에 굳이 반복 영역 건너뛰기를 제공할 필요가 없습니다. 웹에서는 제목 제공 항목이 있는데요, 이렇게 페이지를 여러 개 띄워 놓은 경우 페이지 제목이 모두 네이버네이버네이버 이면 직관적으로 어떤 페이지인지 인지하기 어려워 불편합니다. 청각으로 웹을 탐색하는 분들 또한 페이지 내용을 다 들어야 어떤 페이지인지 알 수 있기 때문에 페이지에는 페이지를 유추할 수 있는 제목을 제공해야 합니다. 프레임이나 아이프레임에도 제목을 제공해야 하며 콘텐츠 블록에도 제목을 제공해야 하는데요 이렇게 헤딩 태그로 콘텐츠 제목을 제공해주면 스크린리더 사용시 헤딩 태그만 건너뛰는 기능이 있기 때문에 본인이 원하는 콘텐츠를 선택해서 탐색할 수 있습니다. 모바일은 어떨까요? 모바일에는 제목 제공 항목이 없는데요 왜 없을까요? 소스를 볼 수 없으니까요.. 뿐만 아니라 모바일 네이티브 앱에서는 title태그와 같이 페이지 제목을 제공하는 기능이 없습니다. 다만 모바일 웹의 경우에는 “웹뷰 네이버”와 같이 title태그로 제목 제공 시 해당 제목을 읽어줍니다. 또한 모바일은 터치 기반으로 터치하면 내용을 들을 수 있기 떄문에 제목 제공이 아직은 필수는 아니지만 제목 제공 해주는 것을 권장합니다. 콘텐츠 제목을 예로 들면 비장애인분들은 아 이 부분들이 다 메뉴이구나라고 인식할 수 있지만 스크린 리더 사용자는 이 부분이 어떤 영역인지 알 수 없어 사용에 혼란을 줄 수 있습니다. 따라서 이렇게 디자인상으로 콘텐츠에 대한 제목을 제공하거나 다른 방법으로 제목을 제공해 주는 것이 좋습니다. 웹에서는 데이터 테이블을 제공하는 경우 표의 제목과 내용 셀을 구분해야 하며, 제목과 요약 정보를 제공해야 합니다. HTML5부터는 summary속성이 없어져서 많이들 헷갈려 하시는데요, Summary 속성이 없어졌다고 해서 요약 정보를 제공하지 않는 것이 아니라, caption에 제목과 요약 정보를 모두 제공해야 합니다.

Internet