アクセシビリティを有効にする方法

# 目次
1. はじめに
1. 実装方法
1. 動作チェック
1. 最後に

# はじめに
Visualizerでは、アクセシビリティを有効にするための機能が備わっています。

> アクセシビリティとは、
「ユーザーの年齢、性別、身体的特徴、使用している機器の違いなどの影響をやわらげ
誰でも同じような使い勝手にする機能」のことをいいます。
具体的には、視覚が不自由な人向けにテキスト文字の読み上げなどを行う機能などです。
参考：https://koneta.nifty.com/koneta_detail/1141008006513_1.htm

iPhone等でも搭載されている機能で、
具体的な例がわかりやすいため、興味がある方はこちらもチェックしてみてください。

https://www.apple.com/jp/accessibility/

Visualzierでも簡単に実装を行うことができるため、
実装方法についてご紹介していきます。

# 実装方法

## アクセシビリティの設定を有効にする
まずは、アクセシビリティを有効にするための設定を行います。

Visualizerを開き、Project Settingsを開きます。

以下のような画面が開くので、
Accessibility Configにチェックをつけて、設定を保存しましょう。
（デフォルトではオフになっています）

![191672378-0317ed06-3d34-4bef-b212-96baba32e4fd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/28568114-23e2-3900-20e3-c5c93f3ca5f0.png)


設定を保存し、適当なWidgetを選択した状態で、
PROPERTIES->Looksタブの下の方をチェックすると、
Accessibility Configの設定欄が表示されるようになります:eyes:

![191672580-12cb5f52-443b-4f20-ad8c-5c0aeaf3c9f8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d0de0e16-f2c7-4d71-db6b-207b681c5fae.png)

これらの値を変更することで、
アクセシビリティの実装を行うことができるようになります:relaxed::raised_hand_tone1:


## アクセシビリティの値を変更する

各アクセシビリティの値の意味は公式ページに記載がありますので、
必要に応じて使い分けを行ってください。

https://docs.kony.com/konylibrary/visualizer/app_design_dev/Content/Accessibility_Visualizer.htm#Configur

今回はこのようなフォームを作成しました。
https://github.com/konyqiitadev/uploadImage/issues/4#issuecomment-1254597757

Widgetをフォームに配置したら、
各Widgetに対してAccessibilityの設定を行います。

目の不自由な人でも操作を完了できるように、以下のように設定を行いました。

Accessibility Config
|Widget|a11yLabel|a11yHint|
|--|--|--|
|ホーム画面|ホーム画面タイトル|これはホーム画面です|
|名前|名前入力ラベル|名前入力のタイトル文字です||
|住所|住所入力ラベル|住所入力のタイトル文字です|
|名前のテキストボックス|名前入力のテキストボックス|名前を入力してください|
|住所のテキストボックス|住所入力のテキストボックス|住所を入力してください|
|スイッチャー|-|パスワードを記憶する場合はオン、記憶しない場合はオフに設定してください|
|パスワードを記憶する|パスワードを記憶するラベル|パスワードを記憶する場合は、左端のスイッチャーをオンにしてください|

設定例はこちらになりますので、ご参考ください。  
![191679800-c588c7cb-2cce-4647-ba01-ff75e0c6b5cc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/5ff5cfcd-c20a-c78b-e88b-92793c4eb5a9.png)

ビルドを行い、
iPhoneでアクセシビリティのVoice OverをON（※）にして実際に動作をみていきましょう！
※iPhoneの設定->アクセシビリティ->Voice Overをオンにすると、設定が可能です。

https://support.apple.com/ja-jp/HT211899#:~:text=VoiceOver%20%E8%AA%8D%E8%AD%98%E3%82%92%E6%9C%89%E5%8A%B9%E3%81%AB,%E3%81%97%E3%81%A6%E3%82%AA%E3%83%B3%E3%81%AB%E3%81%97%E3%81%BE%E3%81%99%E3%80%82

# 動作チェック

設定前と後で比較できるように、動画を添付します。
音声が流れますので、音声をONにして確認してください。

設定前：  
<blockquote class="twitter-tweet"><p lang="zxx" dir="ltr"><a href="https://t.co/u3z3hBebAE">pic.twitter.com/u3z3hBebAE</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1576739304746807297?ref_src=twsrc%5Etfw">October 3, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

設定後：
<blockquote class="twitter-tweet"><p lang="zxx" dir="ltr"><a href="https://t.co/fFMdkQUamb">pic.twitter.com/fFMdkQUamb</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1576739376750424065?ref_src=twsrc%5Etfw">October 3, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

設定前は、iPhoneの読み上げ機能で、
Widgetに表示されている文字やテキストボックスの使い方の案内などを読み上げてくれますが、

設定後は、
**・テキストボックスに何の情報を入力すれば良いのか（名前か住所か）**
**・スイッチャーは何のためにON/OFFをするためのものなのか** 等、
目が不自由な方でも理解できるようなアプリになっているかと思います:blush::sunny:


:::note warn
コミットする際には、
各WidgetのAccessibility Configで変更した値に加えて、
Project SettingのGeneralで有効にした
**Accessibility Configの設定値も忘れずにコミットするようにしましょう！**

以下のような差分で表示されます。
![191685261-9500f6d2-8e15-4340-af84-d306798dd645.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2f5e054c-1b1d-b13c-6cb1-9820cb791d25.png)

Project Settingの設定値をコミットしないと、
各WidgetのAccessibility Configの設定欄が非表示になってしまうため、
ご注意するようにしてください。
（コミット忘れた場合でも再度ONにすれば、各WidgetのConfig値は再表示されます）

:::

# 最後に
2022/8に発表されたVisualizer Ver9.6でもAccessibilityの機能が一部追加され、
今後も機能が拡充されることが期待されます。

https://docs.kony.com/konylibrary/visualizer/viz_rel_notes/Content/V9SP6.htm#Accessibility

Accessibilityの機能により、
いろんな方に使ってもらえるアプリを作ることができるようになるため、
みなさんも是非活用してみてくださいね！

# 参考
https://docs.kony.com/konylibrary/visualizer/app_design_dev/Content/Accessibility_Visualizer.htm