6
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ビジュアルデザインとアクセシビリティ

Posted at

この記事はWWDC19のVisual Design and Accessibilityのセッション動画をまとめたものです。

※ここに貼っている画像は、上記動画をスクショしたものです。

概要

アクセシビリティを視覚的に向上させる3つの方法について

Dynamic Type

Dynamic Type はユーザがフォントサイズをカスタマイズできる機能。Dynamic Type を実装するときは、次の4点に気をつける必要がある。

  • 拡張性を持たせ、テキストはできるだけ動的に
  • 画面の幅を最大限に利用する
  • テキストを切り捨てず、デフォルトと同じだけの量を表示する
  • テキストだけでなくグリフのサイズも調整して、UI のバランスを取る         

iOS では11種類のテキストスタイルで Dynamic Type を使うことができる。Dynamic Type を使う場合は次のように書く。

label.font = UIFont.preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = true

iOS 11 ではカスタムフォントでも利用しやすくなった。

var fontDict: [UIFont.TextStyle : UIFont] = myCustomFontDict()
if let font = fontDict[style] {
  label.font = UIFontMetrics(forTextStyle: style).scaledFont(for: font)
} else {
  label.font = UIFont.preferredFont(forTextStyle: style)
}

さらに Xcode 11 では Dynamic Type のプレビューが簡単に見られるようになった。Environment Overrides ボタンをクリックするとこのポップアップが出てきて、スライダーでリアルタイムに文字の大きさを変えることができる。
スクリーンショット 2019-08-17 22.36.19.png

視覚効果を減らす

没入感を出すために視覚効果が使われることはあるが、これを望まないユーザもいる。3人に1人が動きに敏感で、車内で読書するのが苦手だったり、動きのある画面を見るのが苦手だったりする。iOSには動きを減らす設定がある。提供されているAPIは次の通り。

static var UIAccessibility.isReduceMotionEnabled: Bool { get }
static let UIAccessibility.reduceMotionStatusDidChangeNotification: NSNotification.Name

ビデオの自動再生の設定が iOS 13 から新しく追加されている。Auto-Play Video Previews の設定をオフにすれば動画が自動再生されなくなる。

スクリーンショット 2019-08-17 22.56.40.png

この新しいAPIはパブリックで提供されている。アプリ内で設定を設けている場合は、グローバル設定とミラーリングするようにすればよい。

static var UIAccessibility.isVideoAutoplayEnabled: Bool { get }
static let UIAccessibility.videoAutoplayStatusDidChangeNotification: NSNotification.Name

画面切り替え時の視覚効果の設定もある。「クロスフェードトランジションを優先」という設定が新しくできており、この設定をオンにすると画面遷移アニメーションがディゾルブに変わる。

カラー以外で区別

2型2色覚の人には赤、緑、黄色が同じ色に見える。iOS 13 では設定のアクセシビリティの「画面表示とテキストサイズ」から「カラー以外で区別」という項目が使える。

スクリーンショット 2019-08-17 23.17.53.png

開発者はこの新しいAPIを使って設定の監視と変更を行う。shouldDifferentiateWithoutColorがtrueなら色だけで情報を伝えているところには形や他のインジケータを追加するようにする。


public func UIAccessibility.shouldDifferentiateWithoutColor() -> Bool
public static let UIAccessibility.differentiateWithoutColorDidChangeNotification: NSNotification.Name

このようなAPIはあるとはいえ、色だけで意味づけを行うのはできるだけやめた方が良い。

6
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?