[WWDC Video Study] Make your app visually accessible

Link

Make your app visually accessible - WWDC 2020 - Videos - Apple Developer

시각적 접근성

시각적 접근성에 대해 생각할 때 iOS에서는 VoiceOver를 많이 생각할 것이다.

근데 생각보다 시각적 접근성에는 훨씬 더 많은 것이 있다.

사람마다 시력은 다르다. 시력이 좋거나, 나쁘거나, 전혀 보이지않을 수도 있고, 색맹, 빛 감도, 움직임 민감도 등 많은 것들이 있다.

iOS는 모든 사람이 자신에게 잘 맞는 방식으로 기기를 최대한 활용할 수 있도록 다양한 시각적 접근성 설정을 제공한다.

 iOS가 시각적으로 제공하는 것들!

Color and Shape

특정 UI 요소를 강조하려면 어떻게 할까? 는 많이 고민하는 문제들이다.

하지만 색을 통한 강조는 색맹이거나 시력이 낮은 사람들에게는 좋지않다.

그렇기때문에 우리는 추가적으로 '모양'을 사용한다.

'Start Playing' 이란 버튼을 네모로 표시함으로써 그냥 라벨이 아님을 표시

 

버튼 모양 접근성 설정 활성화 했을 경우!

다른 예로, 탭바는 기본적으로 색상만을 통해 활성 탭을 표시하지만, 버튼 모양 접근성 설정 을 활성화 하면 추가적으로 더 시각화 된다.

extension UIAccessibility { 
   @available(iOS 14.0, tvOS 14.0) 	
   static var buttonShapesEnabled: Bool { get }
    
   @available(iOS 14.0, tvOS 14.0) 
   static let buttonShapesEnabledStatusDidChangeNotification: NSNotification.Name 
}

iOS 13에서는 색상없는 차별화를 위한 API가 추가 되었고, 이는 단순한 버튼을 넘어 이런 아이디어ㅇ를 확장할 수 있는 방법이다. 혹시 더 공부를 원한다면 SFSymbol을 사용해보자!

 

예제에서는 기존 색상 라벨만 있던 테이블 뷰에

기호이미지를 추가하고 bold체의 텍스트를 사용하고, 고대비를 사용해 요소들을 돋보이게 했다.

고대비 이미지를 사용하기위해서 asset의 inspector에서 증가 대비를 체크하면 고 대비 이미지가 생겨난다

다크모드와 마찬가지로 밝은 흰색의 UI요소를 어둡게하는 스마트 인버스 컬러가 있다.

이는 일반적으로 대비가 높아 빛 감도가 높은 사람들에게 선호할 수 있다.

또 스마트 반전 컬러가 있다. 사진, 비디오 및 앱 아이콘과 같이 뒤집히지 않도록 앱 특정 뷰를 특별히 표시해야한다.

예시가 깔끔하니 영상은 꼭 참고하자'ㅁ'

extension UIView { 
  @available(iOS 11.0, tvOS 11.0) 
  var accessibilityIgnoresInvertColors: Bool { get set }
}

색과 모양으로 디자인할 때는 시각적인 강조를 만들기 위해 다양한 접근법을 취해야 한다.

 

기본 디자인이 적합하지 않다면 반드시 사람들의 선호도를 관찰하고 존중해라.

Text readability

iOS는 기기의 텍스트 크기 변경을 지원한다.

더 작은 텍스트는 화면에 더 많은 단어를 맞춰 더 높은 콘텐츠 밀도를 제공할 수 있고, 큰 텍스트는 쉽게 읽을 수 있다.

그러나 일부 사람들은 장치의 내용을 읽기 위해 더 큰 텍스트 크기에 의존한다.

앱을 설계할 때는 명확성과 가독성을 위해 텍스트 크기, 무게, 레이아웃을 염두에 두어야 한다.

UITraitCollection을 사용하면 장치가 선호하는 콘텐츠 크기 카테고리를 얻을수 있다.

extension UIAccessibility { 
  @available(iOS 9.0) 
  var isBoldTextEnabled: Bool { get }

  @available(iOs 9.0)
  static let boldTextStatusDidChangeNotificaiton: NSNotification.Name 
}

시스템 제공 폰트 스타일을 사용한다면 실제로 텍스트를 bold텍스트로 변경할 수 있다.

Display Preference

parallax... 홈 화면에서 많이들 사용한다.

이러한 효과는 사용하고 경험하는데 많은 재미가 있지만 일부 사람들에게는 방향 감각을 잃고 멀미를 일으킬 수 있다.

Reduce Motion에서 아래의 것을 조절할 수 있다.

 

extension UIAccessibility {
  @available(iOS 8.0, tvOS 9.0)
  static var isReduceMotionEnabled: Bool { get }
  
  @available(iOS 8.0, tvOS 9.0) 
  static let reduceMotionStatusDidChangeMotification: NSNotification.Name 
  
  @available(iOS 14.0, tvOS 14.0) 
  static var prefersCrossFadeTransitions: Bool { get }
  
  @available(iOS 14.0, tvOS 14.0) 
  static let prefersCrossFadeTransitionStatusDidChange: NSNotification.Name
}

iOS14부터 크로스페이드를 통해 전환 하는 방법이 추가되었다.

 

흐릿한 배경은 다양한 수준의 대조를 가지고 있기 때문에 읽기가 어렵다. 투명성 감소 설정을 하게 되면 시스템 블러 효과가 사라지고 선명해 지도록 조정한다

extension UIAccessibility {
  @available(iOS 8.0, tvOS 9.0)
  static var isReduceTransparencyEnabled: Bool { get } 

  @available(iOS 8.0, tvOS 9.0) 
  static let reduceTransparencyStatusDidChangeNotification: NSNotification.Name
}

포괄적이고 수용적인 앱을 사용할 수 있는 것은, 사용자에게 권한을 주는 것이기 때문에 중요하다!