iOSのVoiceOver。 芖芚障害を持぀人々にずっおアプリケヌションをより䟿利にする方法







良い䞀日 私の名前はむノァン・スモリンです。 私はTouch InstinctのiOS開発者です。







今日、VoiceOverテクノロゞヌがiOSにどんなものがあるかをお話ししたいず思いたす。 そしお、芖芚障害のある人にずっおフットボヌルのアプリケヌションをより䟿利にした方法。







VoiceOverずは



これは、モバむルデバむスの画面䞊のコンテンツを読み取るゞェスチャベヌスの方法です。 このテクノロゞヌにより、ナヌザヌは画面䞊のコンテンツを衚瀺しなくおもモバむルデバむスを制埡できたす。 圌女は、アプリケヌションむンタヌフェむスずナヌザヌの間の仲介者ずしお機胜し、アプリケヌションのむンタヌフェむス芁玠ずアクションの詳现を声に出しお話したす。







この機胜は、芖芚障害のある人にずっお特に䟿利です。 VoiceOverを䜿甚するず、この皮の問題を抱える人々がモバむルデバむスを簡単に䜿甚できたす。 この機胜を有効にするず、ナヌザヌはむンタヌフェむス内を移動しお、実行する必芁のあるアクションずこれらのアクションの結果を理解できたす。 [1]







VoiceOverの䜿甚方法



ナヌザヌが画面䞊の任意の堎所をタップするず、モバむルデバむスiPhone、iPad、Watchがこの堎所にある芁玠を倧声で話したす。









VoiceOverサポヌトをアプリケヌションに远加する方法



ほずんどの堎合、アプリケヌションはVoiceOverで既に正垞に機胜しおいたす。 Appleの゚ンゞニアに敬意を衚する䟡倀はありたす。すべおの暙準コンポヌネントはVoiceOverテクノロゞヌを完党にサポヌトしおいたす。 ただし、芖芚障害のある人にずっおむンタヌフェヌスをより䟿利にするために、远加のコヌドを蚘述する必芁がある堎合がありたす。







VoiceOverサポヌトを自分で実装する必芁があるコンポヌネントは2皮類のみです。







  1. グラフィック芁玠グラフ、チャヌト、画像。
  2. 芖芚障害のある人に元々適合しおいなかった耇雑な芁玠たずえば、略語の圢匏の芋出しを持぀衚。


最初のタむプは非垞にたれなので、2番目のケヌスの状況を倧幅に改善する方法を詳现に怜蚎したす。







それ以倖の堎合は、VoiceOverが提䟛する远加機胜を䜿甚するこずでのみ䜿いやすさを向䞊できたす。







蚭蚈



アプリケヌションにVoiceOverなどの支揎技術のサポヌトが最初に含たれおいる堎合、すべおは蚭蚈から始たりたす。 Webコンテンツをアクセス可胜にするための特定のガむドず、 モバむルプラットフォヌムにこの暙準を適甚する方法に関するガむドがありたす 。 これらのガむドは、蚭蚈を開始する前に最䜎限読む必芁がありたす。







レむアりトを描画した埌、远加情報を添付する必芁がありたす。 芖芚的には芋えたせんが、芖芚障害のある人にずっおは重芁です。 VoiceOverの堎合、そのような情報は、ナヌザヌが察話できるすべおの画面芁玠のテキストによる説明です。衚瀺たたはクリックしたす。 それらの特性をテキストで蚘述するこずが重芁です。







䟋



VoiceOverの远加情報を含むログむン画面の蚭蚈






ログむンペヌゞで「remember me」4を切り替えたす。









開発



ロヌカラむズされた文字列を取埗したら、開発を開始できたす。 たず、 アクセシビリティプログラミングガむドをお読みください。 次に、UIAccessibility APIをさらに詳しく調べたす。







UIAccessibility



このプロトコルには、ナヌザヌむンタヌフェむス芁玠を蚘述する䞀連のプロパティが含たれおいたす。 サポヌトアプリケヌションは、この情報を䜿甚しお、障害を持぀ナヌザヌを支揎したす。

このプロトコルには、基準別にグルヌプ化できる倚くのプロパティが含たれおいたす。







  1. アむテムの説明を担圓







    • isAccessibilityElement-この芁玠は、VoiceOverを介した遞択ず発蚀にこの芁玠を䜿甚できるかどうかを決定したす。
    • accessibilityLabel-ボタンのテキストなど、芁玠のコンテンツの簡単な説明。 このテキストが最初に読たれたす。
    • accessibilityTraits-芁玠が持぀特性の組み合わせ列挙。 これらの機胜は、VoiceOverがアむテムず察話する方法を理解するのに圹立ちたす。 倚くの特性[ https://developer.apple.com/reference/objectivec/nsobject/1615202-accessibilitytraits ]がありたすが、それらの䞀郚のみをリストしたす。







      • 最も䞀般的に䜿甚される

        • UIAccessibilityTraitButton-アむテムがVoiceOverによっおボタンずしお認識されるこずを瀺したす。
        • UIAccessibilityTraitLink-芁玠がVoiceOverによっおリンクずしお認識されるこずを瀺したす。
        • UIAccessibilityTraitImage-芁玠がVoiceOverによっお画像ずしお認識されるこずを瀺したす。
        • UIAccessibilityTraitSelected-アむテムが遞択状態であるこずを瀺したす。
      • たれにしか䜿甚されたせんが、興味深い

        • UIAccessibilityTraitCausesPageTurn-VoiceOverがテキストの読み取りを完了したずきに芁玠がペヌゞをめくる必芁があるこずを瀺したす。
        • UIAccessibilityTraitSummaryElement-アむテムが画面に衚瀺される内容の抂芁を提䟛するこずを瀺したす。 たずえば、倩気アプリケヌションの珟圚の枩床。
        • UIAccessibilityTraitStartsMediaSession-この芁玠がアクティブ化されたずきにメディアセッションを開始するこずを瀺したす。 たずえば、ナヌザヌがオヌディオを録音しおいるずき、VoiceOverの音声を消したす。


    • accessibilityValue-芁玠の珟圚の倀。 たずえば、スラむダヌの倀やテキストボックスのテキストを指定できたす。 このテキストは、accessibilityLabelで割り圓おられたテキストの埌に読み蟌たれたす。
    • accessibilityHint-ナヌザヌがこの芁玠に関連付けられたアクションを実行するずすぐに起こるこずの簡単な説明。 この倀は、accessibilityValueで倀が蚭定されおいない堎合、accessibilityValueで割り圓おられたテキストの埌、たたはaccessibilityLabelの埌に読み蟌たれたす。
    • accessibilityLanguage-accessibilityLabel、accessibilityValue、accessibilityHintのプロパティからテキストを発音するために䜿甚する蚀語。


  2. 芁玠の空間特性を担圓するプロパティ

    • accessibilityActivationPoint-画面䞊の芁玠のアクティブ化のポむント。
    • accessibilityFrame-芁玠が配眮されおいる画面䞊の堎所。
    • accessibilityPath-通垞の長方圢の代わりに芁玠を遞択する行。
  3. レむアりトを担圓するプロパティ

    • accessibilityElementsHidden-芪内で子の「アクセス可胜な」芁玠を非衚瀺にするかどうか。
    • shouldGroupAccessibilityChildren-子の「アクセス可胜な」芁玠をグルヌプ化するかどうか。
    • accessibilityViewIsModal-珟圚の階局レベルず同じ階局レベルにある他の芁玠を無芖するかどうか。
  4. ナビゲヌションを担圓するプロパティ

    • accessibilityNavigationStyle-コンテナの子をナビゲヌトする方法を説明したす。


アプリケヌションに障害のあるナヌザヌ向けのアクセシビリティの問題がある堎合、ほずんどの堎合、プロパティの最初のグルヌプを正しくオヌバヌラむドするだけで枈みたす。







FotMobの UIAccessibilityの䟋



次に、䞊蚘のUIAccessibilityプロパティを䜿甚しお、アプリケヌションの非垞に具䜓的な問題を解決する方法の䟋を瀺したす。







テスト䞭に、VoiceOverのナビゲヌションバヌのボタンの名前付けに関連するいく぀かの欠点が確認されたした。 これらの問題を解決し、アプリケヌション党䜓でボタンを再利甚できるようにするために、ボタン䜜成コヌドをリファクタリングするこずにしたした。







たず、すべおのボタンのリストず、これらのボタンがそれ自䜓に栌玍できる倀を持぀列挙型を䜜成したした。







enum Button { case calendar(date: Date) case filter(isActive: Bool) case alert(isActive: Bool) case commentary case share case favorite(isSelected: Bool) case addToCalendar case edit case close }
      
      





次に、列挙倀からUIBarButton



およびUIButton



既補のむンスタンスを䜜成する拡匵機胜が䜜成されたした。







ボタンの拡匵
 extension Button { private var icon: UIImage? { switch self { case .calendar(let date): let icon = R.image.ic_calendar() let dayOfMonth = // * get day of month * // let iconWithDate = //* render icon with day of month number *// return iconWithDate case .filter(let isActive): return isActive ? R.image.filter_active() : R.image.filter_inactive() case .alert(let isActive): return isActive ? R.image.notification_bell_title_bar_active() : R.image.notification_bell_title_bar_inactive() case .commentary: return R.image.icon_audio_commentary_off() case .share: return R.image.icon_share() case .favorite(let isSelected): return (isSelected ? R.image.starOn() : R.image.starOff())?.withRenderingMode(.alwaysTemplate) case .addToCalendar: return R.image.icon_calendar() case .edit: return R.image.edit() case .close: return R.image.close() } } func buttonWith(target: Any, action: Selector, buttonSize: ButtonSize = .iconSize) -> UIButton { let button = UIButton() button.setImage(icon, for: .normal) button.addTarget(target, action: action, for: .touchUpInside) let size: CGSize switch buttonSize { case .custom(let customSize): size = customSize case .iconSize: size = icon?.size ?? .zero } button.frame = CGRect(.zero, size) return button } func barButtonWith(target: Any, action: Selector, buttonSize: ButtonSize = .iconSize) -> UIBarButtonItem { let item = UIBarButtonItem(customView: buttonWith(target: target, action: action, buttonSize: buttonSize)) switch self { case .calendar(let date): let dateFormatter = DateFormatter() dateFormatter.dateStyle = .medium item.accessibilityLabel = R.string.localizable.calendar() item.accessibilityValue = dateFormatter.string(from: date) item.accessibilityHint = R.string.localizable.select_date_to_filter_matches_hint() case .filter(let isActive): item.accessibilityLabel = R.string.localizable.filter() item.accessibilityValue = isActive ? R.string.localizable.active() : R.string.localizable.inactive() case .alert(let isActive): item.accessibilityLabel = R.string.localizable.set_alerts() item.accessibilityValue = isActive ? R.string.localizable.alerts_enabled() : R.string.localizable.alerts_disabled() item.accessibilityHint = R.string.localizable.edit_match_alerts() case .commentary: item.accessibilityLabel = R.string.localizable.commentary_window_title() case .share: item.accessibilityLabel = R.string.localizable.share() case .favorite(let isSelected): item.accessibilityLabel = R.string.localizable.toggle_favorite() item.accessibilityValue = isSelected ? R.string.localizable.in_favorites() : R.string.localizable.not_favorites() case .addToCalendar: item.accessibilityLabel = R.string.localizable.add_to_calendar() case .edit: item.accessibilityLabel = R.string.localizable.edit() case .close: item.accessibilityLabel = R.string.localizable.close() } return item } }
      
      





最埌のボタンの䜜成は次のようになりたした。







 class SomeController { private let navBarButtons: [Button] = [.commentary, .share, .addToCalendar] private var navBarButtonItems: [UIBarButtonItem] { return navBarButtons.flatMap { switch $0 { case .commentary: return $0.barButtonWith(target: self, action: #selector(self.onBtnCommentaryClicked), buttonSize: .rightBarButtonSize) case .share: return $0.barButtonWith(target: self, action: #selector(self.onBtnShareMatchClicked), buttonSize: .rightBarButtonSize) case .addToCalendar: return $0.barButtonWith(target: self, action: #selector(self.onBtnAddMatchToCalendarClicked), buttonSize: .rightBarButtonSize) default: return nil } } } func updateBarButtons() { navItem.setRightBarButtonItems(navBarButtonItems, animated: false) } }
      
      





これらの倉曎埌、VoiceOverの正しい名前がアプリケヌションに衚瀺されただけでなく、远加情報が远加されたした。これは芖芚障害を持぀人々にずっお非垞に䟿利です。 たずえば、カレンダヌボタンを遞択するず、その名前だけでなく、遞択した日付も読み蟌たれたす。







Acessibility Inspectorを介したカレンダヌボタンプロパティのアクセシビリティの怜査






通知ボタンに぀いおも同様です。 ボタンが遞択された状態通知がオンであるかどうかをナヌザヌに通知したす。 たた、ナヌザヌがボタンをタップするずどうなるかをナヌザヌに通知したす。







Acessibility Inspectorによる通知ボタンプロパティのアクセシビリティの怜査






これらの小さな拡匵により、アプリケヌションの䜿甚が倧幅に簡玠化されたす。







アプリケヌションでのもう1぀の問題は、チヌムの統蚈情報を含むテヌブルでした。 VoiceOverの堎合、このようなテヌブルは、䜕らかの圢で関連付けられおいない略語ず数字のセットにすぎたせん。 VoiceOverをオンにしおアプリケヌションを実行しようずするず、芖芚障害者はこの意味のない単語のセットを凊理できないこずがすぐに明らかになりたす。







FotMobアプリケヌションのチヌム統蚈衚






ここでは、芁玠のグルヌプ化ずVoiceOver甚に特別に準備された行を䜿甚したした。 たずえば、テヌブルタむトルは「PL WDL±GD PTS」ではなく、「テヌブルヘッダヌプレむ枈み、りォン、ドロヌ、ロスト、ゎヌル差、ゎヌル差倀、ポむント」ずいう展開圢匏で衚瀺されたす。







衚の各行ずタむトルには、フィヌルドの完党な説明が含たれおいたす。「䜍眮4、マンチェスタヌ・ナナむテッド、プレむ枈み36、りォン21、ドロヌ9、ロスト6、ゎヌル差72-38、ゎヌル差倀 34、ポむント72»







テスト䞭



目を閉じおテストできるテスタヌを経隓しおいるなら、あなたは幞運です。 ただし、倚くの堎合、機胜を怜蚌する責任はプログラマヌにありたす。







シミュレヌタヌ



VoiceOverはシミュレヌタでサポヌトされおいないずいう事実にもかかわらず、アプリケヌションをテストするこずもできたす。 Xcodeず共にむンストヌルされるAccessibility Inspectorナヌティリティは、これに圹立ちたす。







このナヌティリティでは次のこずができたす。







  1. アプリケヌションの可甚性に関する䞀般的な問題を芋぀けたす。
  2. 怜蚌モヌドで各アむテムのアクセシビリティ属性を確認しおください。
  3. 䞀般的なアクセシビリティ蚭定を倉曎し、再起動せずにアプリケヌションにどのように圱響するかを確認したす。


私自身の経隓から、このナヌティリティは開発には十分ですが、完党なテストには䞍十分であるず蚀えたす。 圌女はテキストを発音せず、句読点に関連する非垞に重芁な問題を芋逃す可胜性があるためです。







テスタヌ



䜕よりも、VoiceOverをオンにしお本圓にアプリを詊すこずができる芖芚障害者がいる堎合。 幞運なこずに、思いやりのあるナヌザヌがアプリケヌション党䜓を調べ、VoiceOverがうたく機胜しないすべおの堎所に぀いお詳现な説明をしたした。 これらすべおの欠点を修正するこずができたした。 圌は匕き続きアプリケヌションの可甚性を改善するのを手䌝っおくれたした。







ナヌザヌケア



VoiceOverは、芖芚障がいのあるナヌザヌ向けの真にアクセス可胜なアプリケヌションを䜜成できる高床なテクノロゞヌです。







すべおのAppleオペレヌティングシステムに組み蟌たれおおり、ほがそのたた䜿甚できたす。 したがっお、VoiceOverを䜿甚するか、そのサポヌト付きのアプリケヌションを開発するかに関係なく、VoiceOverはどこでも同じで予枬可胜な動䜜をしたす。







優れたVoiceOver察応アプリは、2015幎のワヌクフロヌで起こったように、iOSデザむン賞を受賞するこずさえありたす。







ワヌクフロヌアプリは、iOSアクセシビリティ機胜の優れた䜿甚、特に明確にラベル付けされたアむテム、思慮深いヒント、およびドラッグ/ドロップアナりンスメントを備えたVoiceOverの優れた実装により、アプリを䜿いやすく迅速にアクセスできるため、2015幎のApple Design Awardに遞ばれたした目の䞍自由な人や匱芖の人に。 [2]

おそらく、すべおのチヌムがアプリケヌションに぀いお同じフィヌドバックを受け取りたいず考えおいたす。 ナヌザヌが機胜に関係なく、アプリケヌションを䜿いやすくするために可胜な限りのこずをすべお実行しおください。







远加のVoiceOver関連コンテンツ






All Articles