접근성 설계를 위한 권장 사항 및 주의 사항 (2016)

Karwai Pun은 현재 기존 및 신규 서비스를 사용자에게 더 나은 방식으로 제공하기 위한 서비스 최적화 (Service Optimisation) 업무를 담당하고 있는 인터랙션 디자이너 (interaction designer)입니다. Karwai는 Home Office Digital의 접근성 그룹의 일원으로서 자폐증 (autism) 관련 분야를 이끌고 있습니다. 그녀는 팀과 함께 디자인 관점에서 접근성 (accessibility)에 접근하는 방법으로서 이러한 권장 사항 및 주의 사항 (dos and don'ts) 포스터를 제작했습니다.

포스터

접근성 설계를 위한 권장 사항 및 주의 사항은 정부 서비스의 접근성을 높이기 위한 일반적인 가이드라인이자 최선의 디자인 관행 (best design practices)입니다. 현재 이 시리즈에는 저시력 (low vision), 청각 장애 (D/deaf and hard of hearing), 난독증 (dyslexia), 운동 장애 (motor disabilities), 자폐 스펙트럼 (autistic spectrum) 사용자 및 스크린 리더 (screen readers) 사용자를 대상으로 하는 여섯 가지의 서로 다른 포스터가 있습니다.

여러 포스터에 걸쳐 공통적으로 나타나는 권장 사항에는 좋은 색상 대비 (colour contrasts), 읽기 쉬운 글꼴 크기 (legible font sizes), 선형 레이아웃 (linear layouts) 등을 사용하는 것이 포함됩니다. 그렇다면 좋은 디자인 원칙은 접근성 요구 사항이 있는 사람들뿐만 아니라 모든 사람에게 적용되는 것 아닌가요?

이는 사실이지만, 이 포스터의 목적은 좋은 디자인 관행을 통해 다양한 상태에 대한 인식을 높이는 것입니다. 우리는 단지 우리의 즉각적인 필요에 맞춰 설계하거나 구축하는 것에만 유의해서는 안 됩니다. 예를 들어, 키보드 사용만을 고려한 설계를 생각해 보십시오. 이는 마우스 사용이 특히 정밀한 움직임에서 상당히 어려울 수 있는 운동 장애 (motor disabilities) 사용자들에게 매우 유용하며, 반면 키보드 사용은 훨씬 쉽습니다.

포스터의 또 다른 목적은 지나치게 규정적이기보다는 일반적인 지침을 제공하는 것입니다. 밝은 대비를 사용하는 것이 일부 사용자(예: 저시력 사용자)에게는 권장되었지만, 자폐 스펙트럼 (autistic spectrum)의 일부 사용자는 다르게 선호할 수도 있습니다. 조언이 서로 모순되는 것처럼 보일 때는 항상 사용자와 함께 디자인을 테스트하여 적절한 균형을 찾고, 사용자의 요구 사항에 가장 적합한 절충안을 찾는 것이 가치가 있습니다.

팀

팀

포스터에 담긴 콘텐츠는 Home Office Digital의 접근성 팀(accessibility team)에서 제공했습니다. 접근성 리드(accessibility leads)인 Emily Ball과 James Buller가 이끄는 저희 팀은 12명으로 구성되어 있으며, 각자 다음의 상태(conditions)를 전문으로 합니다: 시각 장애(blind and visual impairment), 난독증(dyslexia), 자폐증(autism) 및 ADHD, 청각 장애(D/deaf and hard of hearing), 정신 건강(mental health) 및 운동 장애(motor disabilities). 저희는 팀 내부 및 외부와 지식을 공유할 수 있도록 지식을 증진하기 위해 가능한 한 이러한 상태들에 대해 최대한 많이 학습하고 있습니다.

포스터 제작 과정에서 직면한 과제 중 하나는 각기 다른 전문 분야로부터 정보를 수집하고, 방대한 양의 지식을 10가지 주요 권장 사항(dos) 및 주의 사항(dont’s)으로 압축하는 것이었습니다. 콘텐츠와 그래픽에 관한 과제도 있었습니다. 저는 운동 장애(motor disabilities) 분야를 담당하고 있는 콘텐츠 디자이너(content designer) Nick Cowan과 협력하여, 콘텐츠를 간결하게 유지하고 그래픽이 조언을 시각적으로 정확하게 표현할 수 있도록 노력했습니다.

다음 단계

저희는 피드백을 받기 위해 정부 전반에 이 포스터들을 공유했으며, GitHub에서 확인하실 수 있습니다.

저희는 지속적으로 포스터를 개선하고 내용을 추가하고 있으므로, 여러분의 의견을 알려주시기 바랍니다. 디자인을 통해 접근성을 이해한다는 것은 사용자의 접근 요구 사항이 무엇이든, 모두를 위해 더 나은 서비스를 구축할 수 있음을 의미합니다.

업데이트: 이 포스터를 복제하거나 다른 언어로 번역할 수 있는지에 대한 문의를 받았습니다. 모든 것을 공개하는 GDS의 정신(ethos)에 따라, 저희는 Creative Commons 라이선스를 사용했습니다. 이 라이선스는 비상업적 목적으로 사용하고 적절한 출처 표기(Home Office, Home Office Digital 및 Creative Commons 로고)를 유지한다는 조건 하에 누구나 포스터를 공유, 사용 및 이를 기반으로 새로운 결과물을 만들 수 있도록 허용합니다. 사람들이 Twitter에 포스터가 사용되는 사진을 공유해 주시고, 모든 사람이 이용할 수 있도록 저희 GitHub 저장소(repository)에 포스터 번역본을 기여(commit)해 주신다면 매우 감사하겠습니다.

포스터 내용

자폐 스펙트럼(autistic spectrum) 사용자를 위한 디자인

권장 사항 (Do)

• 단순한 색상을 사용하세요
• 쉬운 영어 (plain English)로 작성하세요
• 단순한 문장과 글머리 기호 (bullets)를 사용하세요
• 버튼을 서술적으로 만드세요 - 예: 파일 첨부 (Attach files)
• 단순하고 일관된 레이아웃 (layouts)을 구축하세요

하지 말아야 할 사항 (Don't)

• 밝고 대비가 강한 색상을 사용하지 마세요
• 비유나 관용구 (idioms)를 사용하지 마세요
• 텍스트의 벽 (wall of text)을 만들지 마세요
• 버튼을 모호하고 예측 불가능하게 만들지 마세요 - 예: 여기를 클릭하세요 (Click here)
• 복잡하고 어수선한 레이아웃 (layouts)을 구축하지 마세요

스크린 리더 (screen readers) 사용자를 위한 디자인

권장 사항 (Do)

• 이미지를 설명하고 비디오에 대한 자막 (transcripts)을 제공하세요
• 선형적이고 논리적인 레이아웃 (layout)을 따르세요
• HTML5를 사용하여 콘텐츠를 구조화하세요
• 키보드 사용만을 고려하여 구축하세요
• 서술적인 링크 (links)와 헤딩 (heading)을 작성하세요 - 예: 문의하기 (Contact us)

하지 말아야 할 사항 (Don't)

• 이미지나 비디오에만 정보를 표시하지 마세요
• 페이지 전체에 콘텐츠를 흩뿌려 놓지 마세요
• 구조를 잡기 위해 텍스트 크기와 배치에만 의존하지 마세요
• 마우스나 화면 사용을 강제하지 마세요
• 정보가 없는 링크 (links)와 헤딩 (heading)을 작성하지 마세요 - 예: 여기를 클릭하세요 (Click here)

저시력 (low vision) 사용자를 위한 디자인

권장 사항 (Do)

• 좋은 대비 (contrasts)와 읽기 쉬운 글꼴 크기 (font size)를 사용하세요
• 모든 정보를 웹 페이지 (HTML)에 게시하세요
• 색상, 모양, 텍스트를 조합하여 사용하세요
• 선형적이고 논리적인 레이아웃 (layout)을 따르세요. 또한 텍스트를 200% 확대했을 때 텍스트가 흐름을 유지하고 가시성을 확보하도록 하세요
• 버튼과 알림을 문맥 (context)에 맞게 배치하세요

하지 말아야 할 사항 (Don't)

• 낮은 색상 대비 (colour contrasts)와 작은 글꼴 크기 (font size)를 사용하지 마세요
• 다운로드 파일 안에 정보를 숨기지 마세요
• 의미를 전달하기 위해 색상만을 사용하지 마세요
• 페이지 전체에 콘텐츠를 흩뿌려 놓지 마세요. 또한 텍스트를 200% 확대했을 때 사용자가 가로 스크롤을 강제당하게 만들지 마세요
• 동작 (actions)을 문맥 (context)에서 분리하지 마세요

신체적 또는 운동 장애 (physical or motor disabilities) 사용자를 위한 디자인

권장 사항 (Do)

• 클릭 가능한 동작 (actions)을 크게 만드세요
• 양식 필드 (form fields)에 충분한 공간을 확보하세요
• 키보드 또는 음성 전용 사용을 고려하여 디자인하세요
• 모바일과 터치 스크린을 염두에 두고 디자인하세요
• 단축키 (shortcuts)를 제공하세요

하지 말아야 할 사항 (Don't)

• 정밀함을 요구하지 마세요
• 상호작용 (interactions)을 한데 모아두지 마세요
• 많은 마우스 움직임을 요구하는 동적 콘텐츠 (dynamic content)를 만들지 마세요
• 타임아웃 (time out) 창을 짧게 설정하지 마세요
• 많은 타이핑과 스크롤로 사용자를 지치게 하지 마세요

청각 장애 (D/deaf) 또는 난청 (hard of hearing) 사용자를 위한 디자인

권장 사항 (Do)

• 쉬운 영어 (plain English)로 작성하세요
• 비디오에 자막을 사용하거나 스크립트 (transcripts)를 제공하세요
• 선형적이고 논리적인 레이아웃 (layout)을 사용하세요
• 소제목, 이미지, 비디오를 사용하여 콘텐츠를 분리하세요
• 사용자가 예약을 할 때 선호하는 커뮤니케이션 지원 방식을 요청할 수 있도록 하세요

하지 마세요

• 복잡한 단어나 비유적 표현을 사용하지 마세요
• 콘텐츠를 오디오나 비디오로만 제공하지 마세요
• 복잡한 레이아웃과 메뉴를 만들지 마세요
• 사용자가 긴 텍스트 블록을 읽게 만들지 마세요
• 사용자의 유일한 연락 수단이 전화가 되지 않도록 하세요

난독증 (dyslexia) 사용자를 위한 디자인

권장 사항 (Do)

• 텍스트를 보조하기 위해 이미지와 도표를 사용하세요
• 텍스트를 왼쪽 정렬하고 일관된 레이아웃을 유지하세요
• 다른 형식 (예: 오디오 및 비디오)으로 자료를 제작하는 것을 고려하세요
• 콘텐츠를 짧고, 명확하며, 단순하게 유지하세요
• 사용자가 배경과 텍스트 사이의 대비 (contrast)를 변경할 수 있도록 하세요

하지 마세요

• 무겁고 방대한 텍스트 블록을 사용하지 마세요
• 단어에 밑줄을 긋거나, 이탤릭체 (italics)를 사용하거나, 대문자로 작성하지 마세요
• 사용자가 이전 페이지의 내용을 기억하도록 강요하지 마세요 - 리마인더 (reminders)와 프롬프트 (prompts)를 제공하세요
• 정확한 철자에만 의존하지 마세요 - 자동 수정 (autocorrect) 기능을 사용하거나 제안을 제공하세요
• 한 곳에 너무 많은 정보를 담지 마세요

Karwai를 Twitter에서 팔로우하고 이메일 알림 신청도 잊지 마세요.