Accessible design Basic

Assistive technology(보조적 기술)

Assistive technology은 장애가 있는 개인의 기능적 능력을 증가, 유지 또는 개선하는 데 도움이 됩니다.

사람들은 키보드, 스크린 리더, 점자 디스플레이, 추적 입력, 돋보기, 음성 입력과 같은 장치를 통해 기술에 참여함으로써 보다 독립적으로 생활할 수 있습니다.

 

 

 

아이콘은 다양한 입력 방법과 사용자 요구 사항에 대한 이해가 필요한 대화형 요소의 한 예입니다. 

이 예에서는 아이콘의 대상 영역이 식별되어 확장된 아이콘 경계가 동작과의 상호 작용을 더 쉽게 만드는 방법을 보여줍니다.

 

Common forms of assistive technologies

Keyboard

keyboards, a D-pad, or trackball 같은 하드웨어 또는 소프트웨어 컨트롤러를 사용하면 linear 방식으로 선택에서 선택으로 이동할 수 있습니다.

 

Screen readers

스크린 리더는 Google의 스크린 리더인 TalkBack과 같이 점자 디스플레이를 사용하거나 텍스트를 소리내어 읽는 소프트웨어 프로그램입니다. 시각 장애가 있거나 읽기에 어려움이 있거나 일시적으로 읽을 수 없는 사람은 스크린 리더를 사용할 수 있습니다. 스크린 리더는 눈에 보이는 콘텐츠를 말로 표현하고 소리내어 읽습니다. 단락 및 버튼 텍스트와 아이콘 및 제목의 대체 텍스트와 같은 숨겨진 콘텐츠는 프로그램에서 식별됩니다. 스크린 리더를 사용하거나 UI의 텍스트 전용 버전을 경험하는 사용자의 경험을 최적화하기 위해 콘텐츠에 레이블을 지정할 수 있습니다.

 

Switch input

스위치는 화면의 Item을 스캔하여 선택할 때까지 각 항목을 차례로 강조 표시합니다.

스위치 제어를 사용하면 터치스크린 대신 하나 이상의 스위치를 사용하여 Android 기기와 상호 작용할 수 있습니다.

Hierarchy 

Navigation이 쉬울 때 사용자는 앱에서 자신이 어디에 있는지, 무엇이 중요한지 이해할 수 있습니다.

어떤 정보가 중요한지 강조하기 위해 색상, 모양, 텍스트 및 동작과 같은 여러 시각적 및 텍스트 단서가 명확성을 더합니다.

 

Types of feedback

시각적 피드백(예: 레이블, 색상 및 아이콘) 및 터치 피드백은 사용자에게 UI에서 사용 가능한 항목을 보여줍니다.

 

Navigation

내비게이션은 최소한의 단계, 찾기 쉬운 컨트롤 및 명확한 라벨링으로 명확한 작업 Flow을 가질 수 있습니다. 

자주 사용하는 작업에 대해 포커스 제어 또는 키보드 및 읽기 포커스를 제어하는 기능을 구현할 수 있습니다.

 

추가된 모든 버튼, 이미지 및 텍스트 줄은 UI의 복잡성을 증가시킵니다. 

다음을 사용하여 UI 이해 방식을 단순화할 수 있습니다.

 

- 명확하게 보이는 요소
- 충분한 대비와 크기
- 명확한 중요도 계층
- 한눈에 알아볼 수 있는 주요 정보

 

Item의 상대적 중요도를 전달하기 위해

- 화면 상단 또는 하단에 중요한 작업 배치(바로 가기로 접근 가능)
- a similar hierarchy의 관련 Item을 서로 옆에 배치

 

Visual hierarchy

screen readers가 의도한 순서대로 콘텐츠를 읽을 수 있도록 하려면, 디자이너가 개발자와 협력하는 것이 중요합니다.

HTML을 올바른 순서로 작성하고 screen readers가 디자인을 해석하는 방법을 이해해야 합니다.

 

CSS가 페이지의 레이아웃과 모양을 결정하는 반면 screen readers는 모든 플랫폼(모바일 또는 웹)에서 HTML의 하향식 구조에 의존합니다. 이 구조는 콘텐츠를 읽을 때 스크린 리더가 따라갈 Map(지도)를 만듭니다.

 

 

screen readers와 같은 보조 기술이 정보를 해석할 수 있는 방식을 최적화하려면,

논리적 읽기 순서로 화면의 콘텐츠 hierarchy를 식별할 수 있는 방법

 

Layout and typography

 

머티리얼 디자인 대상 가이드라인은 화면을 볼 수 없거나 작은 대상을 터치하는 데 어려움이 있는 사용자가 앱의 요소를 탭하는 데 도움이 될 수 있습니다.

Copy link

Touch and pointer target sizes

터치 대상은 사용자 입력에 반응하는 화면의 일부로, 요소의 시각적 경계를 넘어 확장되어 있다.

예를 들어 아이콘이 24 x 24dp로 표시될 수 있지만 아이콘을 둘러싼 패딩은 전체 48 x 48dp 터치 대상으로 구성됩니다.

 

대부분의 플랫폼에서 터치 대상을 최소 48 x 48dp로 만드는 것이 좋습니다. 

이 크기의 터치 대상은 화면 크기에 관계없이 물리적 크기가 약 9mm입니다.

 터치스크린 요소에 대한 권장 대상 크기는 7-10mm입니다. 

 

더 넓은 범위의 사용자를 수용하려면 더 큰 터치 대상을 사용하는 것이 적절할 수 있습니다.
참고: iOS는 44 x 44dp 타겟을 권장합니다.

 

Pointer targets(마우스로 터치할 대상.)

포인터 Target은 터치 Target과 유사하지만 마우스나 스타일러스와 같은 동작 추적 포인터 장치로 구현됩니다.
포인터 Target을 최소 44 x 44dp로 만드는 것이 좋습니다.

 

Target spacing

대부분의 경우 8dp 이상의 공간으로 분리된 Target은 균형 잡힌 정보 밀도와 유용성을 증가시켜줍니다.

 

Focus order

시각적 레이아웃의 순서를 따르는 input 포커스는 일반적으로 화면 상단에서 하단으로 흐릅니다.

가장 중요한 항목에서 가장 중요하지 않은 항목으로 이동할 수 있습니다.

초점과 움직임을 결정하는 데 도움이 되도록 다음을 고려하십시오.

- element가 포커스를 받는 순서
- element가 그룹화되는 방식
- 포커스가 있는 요소가 사라질 때 포커스가 이동하는 위치

- 시각적 지표와 접근성 텍스트의 조합을 통해 포커스 포인트를 표현할 수 있습니다.

Grouping

그룹화 내용과 콘텐츠가 공간적으로 구성되어 있음을 알리는 제목 아래에 element을 그룹화합니다.

Transitions

화면과 작업 사이의 지속적인 초점 이동은 사용자 경험을 개선하여 작업이 중단된 다음 다시 시작되는 경우 이전에 초점을 맞춘 요소로 돌아갈 수 있습니다.

 

Writing

Accessibility text

Accessibility text는 Android의 Google TalkBack, iOS의 Apple VoiceOver, 데스크톱의 Freedom Scientific의 JAWS와 같은 스크린 리더 접근성 소프트웨어에서 사용하는 텍스트를 말합니다.

Screen Reader는 보이는 텍스트와 보이지 않는 대체 텍스트를 모두 포함하여 화면의 텍스트와 요소(예: 버튼)를 큰 소리로 읽습니다.

Alternative text (Alt text)

Alt text example: A DJ standing in front of music equipment at night.

 

Alt text는 시각적 UI를 텍스트 기반 UI로 변환하는 데 도움이 됩니다. Alt text는 이미지를 볼 수 없는 사용자를 위해 이미지를 설명하는 코드의 짧은 레이블(최대 125자)입니다. Alt text는 이미지 전용이므로 대체 텍스트에 "이미지" 또는 "사진"을 추가할 필요가 없습니다.

스크린 리더는 이미지 대신 Alt text를 소리내어 읽습니다.

이미지 로드에 실패하면 Alt text가 나타나기 때문에 Alt text는 정안 사용자에게도 유용합니다. 사용자에게 이미지에 대해 알리는 데 도움이 되는 타겟 키워드를 포함합니다. 키워드는 또한 검색 엔진 최적화(SEO)를 향상시킬 수 있습니다.

Captions, adjacent text, and embedded text

이미지 안팎의 텍스트는 이미지에 대한 주요 정보를 제공하므로 Accessibility을 고려해야 합니다.

 

Captions

caption은 asset 아래에 표시되는 텍스트입니다.

자산의 컨텍스트 정보(누가, 무엇을, 언제, 어디서)를 설명합니다.

시력이 있는 사용자와 screen reader 사용자 모두 asset 설명에 캡션을 사용합니다.

Embedded text in images

screen reader 는 이미지에 포함된 텍스트를 읽을 수 없습니다.

이미지에 필수 정보가 텍스트로 포함되어 있는 경우, alet Text에 필수 정보를 포함 해야 합니다.

Essential and non-essential elements

정보를 담고 있는 이미지에는 필수 요소와 비필수 요소가 있습니다. 

필수 정보는 큰 텍스트의 경우 3:1,  작은 텍스트의 경우 4.5:1의 색상 명암비를 가져야 합니다.

위 그림에는 필수 정보와 비필수 정보가 모두 포함되어 있습니다.

1  Essential:  텍스트가 모든 명암비 및 크기 요구 사항을 충족합니다.
2  Essential:  색상 대비 지침을 따르는 지침의 시각적 표현
3  Non-Essential:  장식 요소는 일러스트레이션의 배경과 개성을 만듭니다. (정보를 전달하지 않으며 contrast(대조적) 요구 사항을 충족할 필요가 없습니다.)

Implementing accessibility

표준 플랫폼 컨트롤과 시맨틱 HTML(웹에서)을 사용하여 앱은 플랫폼의 보조 기술과 원활하게 작동하는 데 필요한 마크업과 코드를 자동으로 포함합니다. 각 플랫폼의 접근성 기준을 충족하고 보조 기술(바로 가기 및 구조 포함)을 지원하여 사용자에게 효율적인 경험을 제공합니다.

 

표준 플랫폼 대화 상자와 같은 기본 요소 사용해야 한다.

표준 대화 작업을 수행하기 위해 비표준 플랫폼 대화와 같은 비표준 요소를 사용하는 것에 주의하십시오. 

보조 기술과 잘 작동하려면 추가 테스트가 필요합니다.