이 글은 번역과 제 사견이 들어가 있습니다.
언제나 피드백 환영입니다.💚
Introdution
여기는 애플의 접근성을 소개한다.
이 중에서 애플은 항상 중시하는 손쉬운 사용을 뭔가 강조하는 느낌이 든다.
Approximately one in seven people have a disability that affects the way they interact with the world and their devices. People can experience disabilities at any age, for any duration, and at varying levels of severity. For example, situational disabilities — such as a wrist injury from a fall or voice loss from overuse — can affect the way almost everyone interacts with their devices at various times.
Best Practices
- Design with accessibility in mind
- Simplicity
- Perceivability
- Support personalization
- Audit and test your app or game for accessibility
이 다섯가지의 가장 중요한 포인트는 누구든 언제든 어떤 상황이든 동일한 경험을 주는데 큰 노력을 기울여야한다는데 있는 것 같다.
장애의 여부, 나이, 주변 환경에 따라 불편하고 잘 안되는 상황을 항상 대응해야한다는 것이다. 이러한 상황을 타파하기 위해 애플은 Voice Over, Reduce Motion, Large Text Size등을 제공한다.
Interactions
Gestures
1. 기본 시스템 제스처를 Override하지마라!
뭐 이건 당연하다 예를들어 제어센터를 여는 행동을 앱내에서 다른 것으로 정의해버리면 제어센터가 열수 없으니 상당히 불편할 것이다.
2. 간편하고 보편적인 interactions을 사용해라!
뭐 다중터치, 장터치 등 뭔가 어려워 보이는 interaction은 많은 사람들에게 문제를 야기할수 있기 때문에 피해야한다.
3. 제스처를 못 사용하는 상황에 Plan B를 만들어라!
이렇게 삭제를 하는 경우에도 swipe로 삭제가 안되는 경우도 있고 이걸 모를 수도 있으니 다양한 방법을 만들어야한다.
4. 항상 2가지 이상으로 어떠한 작업이 수행되도록 설계해라!
애플의 카메라를 보면 동그란 버튼을 눌려도 찍히지만 볼륨버튼을 눌러도 찍힌다. 이처럼 찍는다는 행위를 다양한 interactions을 사용해서 설계해야한다. 이러한 설계는 결국 다양한 상황을 대처할 수 있을 것이다.
5. Drag and Drop을 가능하도록 설계해라!
말그대로 Drag and Drop을 지원해라!이다.
Buttons and controls
1. interaction의 대상이 되는 것들은 최소 44pt x 44pt로 해라!
너무 작으면 불편하니께로...
2. 손쉬운 사용을 통해 사용자를 배려해라!
예를들어 Voice over를 통해 특정 버튼을 읽거나 특성화시켜서 강조해주면 앱을 이용하는데 불편함이 없을 것이다. 이런 것처럼 많은 상황을 대처하도록 노력해야한다.
3. 버튼의 계층화하여 사용해라!
가령 중요하지 않거나 덜 중요한 버튼은 색상을 회색으로 강조된 버튼은 파란색을 채우는 것등 특정한 계층적 의미를 부여하면 중요성을 파악하는데 큰 도움이 된다.
4. 사용자는 시스템 스위치를 선호한다!
때때로 선택이 된것에 색상을 바꿔서 표시하는 경우도 있지만, 실제로 스위치를 통해 나타내는게 on/off를 알기 더 쉬운것 같다. 즉 on/off 같은 개념에선 스위치를 사용하는게 맞는것 같다.
5. 색상으로만 나타내는 정보전달을 피해라!
우리가 나타내려는 색이 초록색인 경우 어떤이에게는 그것이 잘 안보일 수 있습니다. 즉 색상으로 나타내는 무언가에 밑줄이나 다른 요소를 추가하는것도 다양한 상황에 대처할 수 있을 것이다.
User Input
1. 받아쓰기 기능을 이용해보세요!
구두로 텍스트를 입력받는 것은 때때로 편리성을 제공합니다~
2. 시리를 사용해 특정 기능을 구현해보자!
기능이라는 하나의 시퀀스를 시리로 구현하게되면 많은 편리성을 제공합니다.
3. 텍스트선택을 막지마세용!
어떤 사람은 번역이나 정의를 찾기위해 글을 복사하려고 할 수 있으니 막지마세용
Haptics
1. 헵틱을 사용해보세요
햅틱은 화면을 볼 수 없을 때 큰 역할을 할 수 있습니다. 특정 작업의 성공유무나 이벤트등을 알릴수있죠! 하지만 무분별한 사용은 사용자를 헷갈리게 할 수 있습니다. 일관되게 사용하세용!
Voice Over
1. 모든 이미지에 description을 달아라!
만약 description을 사용하지 않으면 voice over 사용자에게 이미지에 대한 정보를 주기 힘듭니다 그렇기 때문에 이미지에 대한 description은 달아주세용
2. Infographic을 사용하려면 voice over도 고려해야합니다.
정보를 시각화하는 것은 좋지만 voice over 사용자도 고려해야합니다.
3. 반대로 단순히 디자인적인 요소일땐 voice over를 피하세요.
단순한 디자인 요소에 이미지나 다른 것들은 voice over 사용자에게 피로감만 줄 수 있습니다.
4. 각 화면에 제목을 짓고 계층구조를 명확하게 해야합니다.
이렇게 해야 voice over 사용자뿐만 아니라 모두에게 화면들의 계층을 파악하고 사용하는데 큰 도움을 줄 수 있습니다.
5. 모든 사람들이 모든 콘텐츠를 누릴 수 있어야합니다.
오디오, 자막, 스크립트 등을 활용해서 모두가 콘텐츠를 공평하게 누릴 수 있어야합니다. 또 폐쇄자막은 여러 언어를 지원할 수 있도록 합니다.
Navigation
1. voice over를 통해 UI정보를 제공해주세여~
기본 시스템 UI는 이것을 자동지원하지만 custom의 경우 지원을 하지 않습니다. Accessibility modifiers를 활용해서 정보를 제공해주세요
2. 텍스트와 이미지를 그룹, 정렬, 연결을 하세요~
아래 그림처럼 그림의 description을 다는 경우 글과 그림을 그룹하지 않으면 그림, 그림, 글, 글 순서대로 voice over는 읽습니다.
shouldGroupAccessibilityChildren와 accessibilityTitleUIElement를 이용해서 해결해보세요!
3. 화면의 콘텐츠나 레이아웃이 바뀌면 인지시켜주세요!
UIAccessibility.Notification와 NSAccessibility.Notification을 사용해서 voice over로 바뀐 정보를 알려주세요~
4. ...을 활용하여 새로운 정보들을 예측하게 하세욥!
시스템에서 말줄임표는 다른 창이나 보기를 열 수 있음을 알리는 표준방법입니다.
5. 중요한 컴포넌트 요소는 Label를 통해 voice over를 사용할 수 있게 해야합니다!
이는 voice over가 다양한 컴포넌트를 읽을 수 있게하기 때문에 접근성에 큰 도움이 됩니다.
6. 로터를 사용해 보세요!
로터를 통해 점자 키보드를 부를수 있고 이러한것은 다양한 항목을 탐색하는데 도움을 줍니다.
7. iPadOS 나 macOS는 키보드만으로 요소를 찾을 수 있는지 확인해보세요~
accessibility keyboard shortcuts 외에도 시스템은 다른 여러 keyboard shortcuts이는 키보드만으로 많은 작업을 수행하는데 도움을 줍니다.
Text Display
1. 글자가 디스플레이에 자동으로 조정되는지 확인하세요!
Dynamic type을 활요하면 사용자들이 적합한 글꼴크기로 조정이 가능합니다.
이는 Sketch, Photoshop 및 Adobe XD Apple 디자인 리소스에서 Dynamic Type 크기 표를 참고하면 알 수 있습니다.
2. 글꼴이 커질때 생기는 글 잘림은 최소화하세요!
스크롤이 가능할땐 글자 잘림을 조심하세요! 이를 해결하는 방법으론 numberOfLines를 사용해보세요.
3. Large font size에서 테스트해보세요!~
이렇게 되면 극단적으로 커졌을 때를 대비하염 스택 레이아웃이나 글 자체의 가독성을 테스트해볼 수 있습니다. 그렇기 때문에 큰게 테스트하면 다양한 상황에 대처하기 쉽습니다.
4. 글꼴이 커지면 아이콘도 커져야합니다!
아이콘 또한 글 처럼 의미를 담고 있다면 글꼴에 맞춰서 커져야합니다. SF symbol을 사용하면 자동으로 조절할 할 수 있습니다.
5. 글꼴 크기와 계층은 별개입니다.
글씨가 커졌다고 절대로 중요한 요소의 상단배치는 놓치지 말아야합니다.
6. regular or heavy font를 사용하세요
웬만하면 이 둘을 사용하세요 그게 눈에 더 잘보입니다.
7. 사용자들이 blod text를 적용했을 때, 앱에 잘 적용되는지 확인하세요!
말 그대로 잘 확인해보세요
8. 커스텀 글꼴은 가독성을 평가해야합니다!
9. 글꼴 정렬고정은 피해주세요!
특정 문화권에선 왼쪽부터 정렬이 아닐 수도 있습니다. 그러니 그또한 대응해야 겠죠?
10. 적절히 커스텀해서 글을 작성하세요!
긴 글에서 기울임이나 대문자로 표시하는것은 문제가 있습니다. 이는 적절히 사용해 주세용
Color and Effects
1. 색상으로만 구별되는 정보를 만드는 것은 놉!
색상은 모든 사람이 인식하지 못할 수 있습니다. 조심하세욥~
2. 시스템 색상을 사용하세요
이는 색상반전이나 대비 증가와 같은 손쉬운 사용에 맞춰 알아서 변하게 됩니다.
3. 색상을 조합을 사용하는 것은 피하세요!
예를들어 빨강 녹색, 빨강 검정 등은 특정 색맹인에게 인식에 있어서 어려움을 줄수 있습니다. 그렇기 떄문에 이를 시각적인 요소등을 섞어서 표현해주세요~
4. 앱이 색상반전에 잘 작동하는지 확인하세요!
색상 반전을 사용하는 사용자를 위해 꼭 확인하세요!
5. 강한 대비 색상을 사용해여 가독성을 높이세요!
텍스트, 글리프 및 컨트롤과 같은 요소들에 색상 대비를 높이면 인식에 도움이 됩니다.
6. 필수적인 경우가 아니면 애니메이션은 놉!
사용자가 애니메이션에 의존하지 않게 해야합니다.
7. 애니메이션이 감소된 경우를 만드세요!
사용자들이 확대/축소, 크기 조정, 회전과 같은 효과가 포함된 애니메이션을 볼 때 주의가 산만해지거나 어지러움 또는 메스꺼움을 경험하는 경우 Recude motion을 켤 수 있는데 이러한 경우 애니메이션을 대체할 수 있도록 만들어야합니다.
8. 사용자들이 모션을 제어할 수 있도록 합니다.
동영상 자동 재생등은 좋지 않습니다.
9. 움직이거나 깜빡거리는 요소는 주의를 기울이세요!
이는 무언가를 강조할 수 있지만 주의를 산만하게 할 수 있어요.
10. 사람들이 Reduce Transparency를 사용할때 흐림 및 투명도를 변경하세요!
흐릿하고 반투명한 영역을 불투명하게 만들때, 흐리거나 반투명할때의 색상과 다른 색상 값을 사용하는 것이 좋아용.
