구글 매터리얼 디자인 Foundations / Accessibility 접근성 Part 1. Overview & Accessibility basics

Foundations 기본

매터리얼 기본에서는 접근성 표준부터 레이아웃 및 상호 작용을 위한 필수 패턴에 이르기까지 모든 훌륭한 사용자 인터페이스의 기초에 대해 안내한다. 

1. Accessibility 접근성 

접근 가능한 디자인으로 다양한 능력을 가진 사용자들 모두가 UI를 탐색하고 이해하고 즐길 수 있게 한다. 

• 제품에 대한 이해를 높이기 위한 계층 구조의 단순화 
• WCAG(Web Content Accessibility Guidelines)의 사용으로 최소 요구 사항의 충족화 
• 구조, 흐름 및 화면 요소의 정의

1. 1. Overview

Accessibility & Material Design 접근성과 매터리얼 디자인 

기본적으로 매터리얼 디자인의 기본적인 디자인 가치는 접근성의 충족이다. 다양한 능력을 가진 인간의 경험과 장애를 이해하고 예측함으로써 고비용 설계를 미연에 방지하고, 기술 및 디자인의 부담을 줄이고, 자원을 사전에 절약하는 제품 기반을 구축할 수 있다. 매터리얼 컴포넌트는 포괄적인 제품 설계를 위한 기반을 제공하도록 접근성 표준을 준수하도록 설계되어 있다. 제품 접근성에 대한 제고를 통해 저시력, 실명, 청각 장애, 인지 장애, 운동 장애 또는 일시적인 상황 장애가 있는 사용자를 포함한 모든 사용자들의 사용성을 향상시킬 수 있다. 

Get started 시작에 앞서 

접근성 요구사항과 목표는 컴포넌트 페이지와 가이드라인 전반에 걸쳐 문서화되어 있다. 컴포넌트 지침에서 접근성 표준은 외재적(판단이 필요할 경우 고려 사항에 대해 논의)일 뿐만 아니라 내재적(디자인과 코드에 내장되어 있는)이다. 본 페이지는 설계 및 개발 단계 전반에 걸친 지속적인 점검에 필요한 참고자료이자 매터리얼 가이드라인 전반에 걸쳐 적용되는 접근성 표준을 이해하기 위한 출발점으로 사용할 수 있다. 
Principles for accessible design 접근성 디자인의 원칙 
접근 가능한 디자인을 위한 다음과 같은 원칙은 개별 사용자의 요구를 예측하고 포함하며 이에 대응하는데 도움이 되는 접근 방식이다. 이 원칙들은 포괄적이고 공평한 결과를 촉진하는 디자인, 개발, 협력 및 공동 제작을 위해 필요한 고려 사항이다. 
1) Honor individuals 개인 존중 
보편적인 기본 경험은 모든 사람의 욕구를 충족시킬 수 없다. 기본적인 경험에 사용자 지정이 가능하도록 추가적인 기능을 도입하는 것은 개별적인 적응의 장을 마련해 준다. 모든 사람들의 변화하는 요구를 존중하는 것은 그들 스스로 선택할 수 있도록 더 많은 자유를 주는 것을 의미한다. 개인 사용자의 하루, 일년, 또는 삶의 경험은 계속해서 변화할 수 있기 때문에, 그들의 다양한 선호와 선택을 지지하는 것은 변화하는 그들의 상황, 개인적 지식과 다양한 욕구를 충족시키는 방법에 대한 정보를 얻을 수 있게 해 준다.  
2) Learn before, not after 보충이 아닌 선수 학습 
해결책을  내 놓기 전에 다양한 능력과 삶의 경험을 가진 사용자의 욕구를 이해하는 데 시간을 투자해야 한다. 공식적이거나 비공식적인 연구들은 새로운 사고 방식을 열어주고 편견을 줄이며, 특히 일반적인 규범을 벗어난 사용자들에게 접근할 수 있는 창의적인 방법을 가져다줄 수 있다. 접근 가능한 디자인 프로세스는 가능한 빠르게 제품의 잠재력 또는 경험의 도출에 대해 예측이 가능하다. 디자인 문제가 발생했을 때, 산출물에 대한 탐색은 깊은  learning and recovering 연구의 기반으로 사용될 수 있다. (무슨 소리인지 도통 모르겠습니다만, When design problems arise, the exploration of outcomes can be used as a research foundation for learning and recovering thoughtfully.)  
3) Requirements as a starting point 출발점으로서의 요건 
WCAG가 설정한 최소한의 요구사항은 특정 인간의 요구사항을 지원합니다. 접근성 표준 기반 설계는 기술로 인간관계를 개선해야 하는 어플리케이션을 개선하고 확장시킬 수 있는 창의적인 기회이다. 역사에 의하면 특정 접근 방식의 요구에 대한 반응으로 비롯된 기능(다크 모드, 텍스트 음성 변환, 음성 변환 등)들은 특정한 제약 조건 내에서의 창의적인 문제 해결의 결과이다. 특정 조건을 제약이 아니라 요구 사항을 만난 기회로 보고 궁극적으로 다양한 서비스 솔루션을 이끌어 낼 수 있었다.
면책 조항: 이 자료들은 정보 제공을 하기 위한 것일 뿐이며, 법적인 조언에 해당하지 않는다. 특정 문제에 대해서는 변호사와 상의하여 조언을 구하기 바란다. 

1.2. Accessibility Basics

Get started 시작에 앞서 

매터리얼의 접근성 사양과 패턴, 플랫폼 별 안내에 대해 알아보기 전에 접슨성 디자인의 기본을 이해해야 할 필요가 있다. 

1.2.1 Assistive technology 보조 기술 

보조 기술은 장애를 가진 사용자들의 기능적 능력을 향상, 유지시키는데 도움을 준다. 사용자들은 입력, 확대, 음성 입력을 따르는 것과 마찬가지로 키보드, 스크린 리더, 점자 디스플레이 등의 장치를 통해 기술을 향유함으로써 더 독립적인 삶을 살아갈 수 있다.  

아이콘은 사용자의 요구와 다양한 입력 방법에 대한 이해가 필요한 상호 작용 요소의 일례이다. 이 예시에서는 조금 더 접근 가능한 동작으로 상호작용하는 아이콘으로 만들기 위해 아이콘의 목표 영역을 얼마나 확장해야 하는지를 구분하여 보여주고 있다. 

1. 2. 1. 1) Common forms of assistive technologies 보조 기술의 일반적인 형태 

1. 키보드 : D-pad(뭘까?) 또는 트랙볼, 키보드 등과 같은 직접 조작 가능한 하드웨어나 소프트웨어는 사용자들이 선형 방식으로 선택에서 다른 선택으로 건너뛰게 할 수 있다. 
2. 스크린 리더 : 스크린 리더는 구글의 스크린 리더인 톡백(TalkBack)처럼 점자 디스플레이를 사용하거나 텍스트를 큰 소리로 읽어주는 소프트웨어 프로그램이다. 시각 장애를 가지고 있거나, 읽는 것에 어려움을 겪고 있거나, 일시적으로 읽기가 불가는한 사용자들은 스크린 리더를 사용할 수 있다. 스크린 리더는 눈에 보이는 내용을 언어화하여 큰 소리로 읽어준다. 아이콘과 제목의 대체 택스트와 같은 숨겨진 내용뿐만 아니라 문단과 버튼 텍스트도 프로그램에 의해 식별 가능하다. 본문 내용들은 스크린 리더를 사용하거나 텍스트 전용 버전의 UI를 사용하는 사용자들의 경험을 최적화하기 위해 레이블이 주어질 수 있다. (can be labeled)
3. 입력 스위치 : 스위치는 화면의 항목들을 스캔하여 선택할 때까지 각 항목을 차례대로 강조하여 표시한다. 스위치 접근을 사용하면 터치스크린 대신 하나 이상의 스위치를 사용하여 사용자의 안드로이드 디바이스와 상호작용할 수 있다. 

1. 2. 1. 2) Hierarchy 계층구조

정보를 탐색(네비게이션)하기가 쉽다면 사용자는 앱에서 자신이 어디에 있고 무엇이 중요한지 이해할 수 있다. 어떤 정보가 중요한지 강조하기 위해 색상, 모양, 텍스트 및 모션과 같은 여러 시각적 및 텍스트 신호로 명확성을 추가한다. 

1. 피드백의 종류

시각적 피드백(라벨, 색상, 아이콘 등)과 터치 피드백은 UI에서 사용자가 사용 가능한 것이 무엇인지 보여준다. 

2. 네비게이션

네비게이션은 최소한의 단계로 명확한 흐름, 위치 파악이 쉬운 컨트롤 및 명확한 라벨링이 필요하다. 포커스 컨트롤, 또는 키보드와 읽기 포커스를 제어하는 기능을 통해 자주 사용되는 작업들을 대체할 수 있다. 

추가된 모든 버튼, 이미지 및 글줄은 UI의 복잡성을 증가시킨다. 다음을 사용하여 사용자의 UI에 대한 이해를 단순화할 수 있다:

• 선명하게 보여지는 시각 요소
• 충분한 크기와 대비
• 명확한 중요도 계층
• 한 눈에 알아볼 수 있는 주요 정보 

항목들의 상대적 중요도를 전달하기 위해서는 

• 중요한 동작은 바로 질러갈 수 있도록  화면의 맨 위, 또는 맨 아래에 배치한다. 
• 유사한 계층의 관련 항목은 나란히 배치한다. 

Visual hierarchy 시각적 계층 구조

스크린 리더가 의도한 순서를 지켜 읽을 수 있게 하려면 설계자가 HTML을 올바른 순서로 작성하고 스크린 리더가 디자인을 해석하는 방법을 이해하는 것과 동시에 개발자와 협력하는 것이 중요하다. CSS가 페이지의 레이아웃과 형태를 결정하는 반면에 스크린 리더는 어떤 플랫폼(모바일이나 웹)에서도 HTML의 하향식 구조에 의존적이다. 이 구조는 스크린 리더가 내용을 읽을 때 따라야 할 지도를 만들어낸다. 

1. 2. 2 Layout and typography 레이아웃과 타이포그라피 

 매터리얼 디자인 가이드라인은 화면을 보지 못하는 사용자나,  작은 요소를 선택하기 곤란한 사용자가 앱에서 요소를 선택하는 데 도움을 줄 수 있다.

1. 2. 2. 1) Touch and pointer target sizes 터치, 포인터 크기 

터치 타겟은 요소의 시각적 경계를 넘어 확장되는, 사용자 입력에 응답하는 화면의 부분들이다. 예를 들어 24x24dp 크기의 아이콘은 전체 48x4dp의 터치 타겟을 포함하고 있다. 대부분의 플랫폼에서는 터치 타겟을 적어도 48x48dp로 고려하여 제작한다. 이 크기의 터치 타켓은 디스플레이의 크기에 관계 없이 약 9mm 정도의 물리적 크기로 나타나게 된다. 터치 스크린 요소에 대한 권장 타겟의 크기는 7~10mm이며, 더 큰 스펙트럼의 사용자를 수용하기 위해서는 더 큰 터치 타겟을 사용하는 것이 적절할 수 있다. 참고 : iOS에서는 44x4dp를 권장한다. 

1. 2. 2. 2) Pointer targets 포인터 타겟 

포인터 타겟은 터치 타겟과 유사하지만 마우스나 스타일러스와 같은 동작 추적 포인터 장치로 구현된다. 포인터 대상을 최소 44x44dp로 제작하는 것을 고려해야 한다. 

1. 2. 2. 3) Target spacing 타겟 간격   

대부분의 경우 8dp 이상의 공간으로 구분된 요소들은 균형 잡힌 정보 밀도와 사용성을 촉진한다. 

1. 2. 2. 4) 포커스 순서  

시각적 레이아웃 순서를 따르는 입력 포커스는 일반적으로 화면의 상단에서 하단으로 흐른다. 가장 중요한 항목부터 가장 중요하지 않은 항목까지 가로지를 수 있다. 
포커스 포인트와 동작을 결정하는데 도움이 될 만한 고려사항은 아래와 같다. 

• 요소가 포커스를 받게되는 순서
• 요소들이 그룹지어진 방식
• 포커스도니 요소가 사라졌을 때 포커스가 이동하는 위치 
• 포커스 지점은 시각적 지표와 접근 가능한 텍스트의 조합으로 표현할 수 있다. 

그룹화 

Group items under headings that communicate what the groupings are and that content is organized spatially. (그룹의 내용을 전달하는 제목 아래의 그룹 항목과 내용이 공간적으로 구성되어 있다. 갑자기 포커스 그룹 무슨 소리??)

전환(애니메이션)

화면과 작업 간의 연속적인 포커스 이동은 사용자 환경을 개선하여 작업이 중단되었다가 다시 시작되는 경우에 이전 포커스 요소로 돌아갈 수 있도록 한다. 

1. 2. 3 Writing 글쓰기  

1. 2. 3. 1)  Accessibility text 접근가능한 텍스트 

접근 가능한 텍스트란 안드로이드 운영체제인 구글의 TalkBack, iOS 운영체제인 애플의 보이스 오버, 데스크톱에서는 Freedeom Scientific의 JAWS와 같은 스크린 리더 소프트웨어에서 사용되는 텍스트를 말한다. 스크린 리더는 화면에 보이는 텍스트와 보이지 않는 대체 텍스트를 포함한 버튼 등의 요소를 모두 큰 소리로 읽는다. 

• Alternative text (Alt text) 대체 텍스트 
  대체 텍스트는 시각적 UI를 텍스트 기반의 UI로 변환하는 것을 돕는다. 대체 텍스트는 이미지를 눈으로 볼 수 없는 사용자를 위해 사용하는 이미지 설명 코드로 최대 125자의 짧은 이름표(Label)이다. Alt 텍스트는 이미지만을 위해 사용하는 요소이므로 '이미지' 또는 '그림'이라는 단어를 추가할 필요가 없다. 스크린 리더는 이미지 대신 큰 소리로 대체 텍스트를 읽을 것이다. 대체텍스트는 이미지를 로딩하는데 실패할 경우 나타나는 텍스트로 일반 사용자들에게도 유용하다. 사용자에게 이미지의 내용에 대해 알리는 데 도움이 되는 키워드를 포함하도록 한다. 키워드는 또한 검색엔진 최적화(SEO)를 향상시킬 수 도 있다. 
• Captions, adjacent text, and embedded text 캡션, 인접 텍스트와 내장 텍스트 
  이미지에 포함된 텍스트 및 주변에 인접해 있는 텍스트는 이미지에 대한 주요 정보를 제공하므로 접근성을 고려할 필요가 있다. 
• Captions 캡션
  캡션은 자산(asset) 아래에 표현되는 글이다. 자산의 상황에 맞는 정보(누가, 무엇을, 언제, 어디서)를 설명한다. 시각장애인과 스크린 리더 사용자 모두 자산에 대한 설명을 캡션에 의존한다. 
• Embedded text in images 이미지에 포함된 텍스트 
  스크린리더는 이미지에 포함된 텍스트는 읽을 수 없다. 이미지에 텍스트로 포함된 필수 정보가 있으면 대체 텍스트에 필수 정보가 포함되어 있어야 한다. 

1. 2. 3. 2)  Essential and non-essential elements 필수 요소와 그 외 요소들 

정보적인 이미지들은 필수 요소와 필수적이지 않은 요소를 가지고 있다. 필수적인 정보는 큰 텍스트일 경우 3:1, 작은 텍스트일 경우 4.5:1의 색상 대비 비율을 가져야 한다. 

1. 2. 4 Implementing accessibility 접근성의 구현 

어플리케이션들은 표준 플랫폼 컨트롤과 의미 기반 구조의 HTML을 사용하면 플랫폼의 보조 기술과 잘 작동하는데 필요한 마크업과 코드를 자동으로 포함하게 된다. 각 플랫폼의 접근성 표준을 충족시키고 보조 기술(바로 가기 및 구조 포함)을 지원하면 사용자에게 효율적인 경험을 제공할 수 있다. 

Accessibility > Patterns / Accessibility > Design to implementation은 각각 별도 포스팅으로 이어가겠습니다. (이렇게 길 줄 몰랐...습니다.)