UI フレームワークからはじめる アクセシビリティ - Vue Fes Japan 2023 After Meetup

Transcript

1. ©MNTSQ, Ltd.
   2023.11.07
   UI フレームワークからはじめる アク
   セシビリティ
   Vue Fes Japan 2023 After Meetup
   

   View Slide

2. ©MNTSQ, Ltd. 2
   自己紹介
   ナカシマアキラ
   大学卒業後は各種デザインを中心に制作。
   近年はフロントエンドエンジニア（とたまにデザイナー）として新規
   サービスの企画・開発を行う。
   前職で Design System を構築した縁から MNTSQ ではサービスを開発す
   る傍ら、 Design System の開発に参加するなどフロントエンドとデザイ
   ンの間をさまよう。
   Vue Fes Japan 2023 After Meetup
   フロントエンドエンジニア
   @nksm / twitter a.k.a X
   

   View Slide

3. ©MNTSQ, Ltd. 3
   ©MNTSQ, Ltd. 3
   みなさん Vue Fes Japan 2023 いかがでした？
   

   View Slide

4. ©MNTSQ, Ltd. 4
   Vue Fes Japan 2023 いかがでした？
   個人的に気になったセッション
   Vue Fes Japan 2023 After Meetup
   株式会社フライル
   ソフトウェアエンジニア
   Svelteコアチームメンバー
   山下 裕一朗さん
   18営業日で350コンポーネント規模のVueアプリに
   デザインシステムを導入する方法
   画面遷移から考えるNuxtアプリケーションを
   アクセシブルにする方法
   https://vuefes.jp/2023/sessions/baseballyama
   株式会社クラウドワークス
   プロダクト本部プロダクト開発部プラッ
   トフォーム開発3グループ
   やまのくさん
   https://vuefes.jp/2023/sessions/yamanoku
   

   View Slide

5. ©MNTSQ, Ltd. 5
   ©MNTSQ, Ltd. 5
   MNTSQ ってどんな会社？
   

   View Slide

6. ©MNTSQ, Ltd. 6
   MNTSQ CLM のプロダクト概要
   Vue Fes Japan 2023 After Meetup
   ドラフト
   審査交渉
   締結
   集約
   管
   理
   分
   析
   MNTSQ
   自動ドラフティング
   MNTSQ
   案件管理
   MNTSQ
   Connect
   MNTSQ
   契約管理
   MNTSQ
   データベース
   ナレッジ共有を自動化
   リスク管理を自動化
   情報をデータベースに自動集約
   MNTSQ
   CLM
   ❏ 自社雛型＋NO&T雛型での自動ドラフト
   ❏ 交渉ポリシー・解説文登録
   ❏ 案件に応じた叩き台を自動提案
   ❏ 審査状況の「見える化」
   ❏ ノウハウの自動提案
   ❏ リスクの自動検知
   ❏ 審査履歴の自動登録
   ❏ メール連携
   ❏ 電子契約連携
   ❏ ストレージ連携
   ❏ 他システム連携
   ❏ 契約台帳の自動作成
   ❏ リスクの種類ごとに自動タグ付け
   ❏ 危険条項の自動抽出
   ❏ 契約期限などの自動アラート
   ❏ 契約特化のAI-OCR
   ❏ 自動タグ付け
   ❏ NO&Tナレッジの活用
   ❏ 法務情報の自動分析
   ベストな契約を自動化
   案件状況を可視化・リスク検知
   

   View Slide

7. ©MNTSQ, Ltd. 7
   Vision
   すべての合意をフェアにする
   MNTSQは、誰でも一瞬でフェアな合意ができる世界を目指します。
   あらゆる取引が成立するまでのリードタイムを短くし、
   誰もが搾取されることなく契約できる社会を実現します。
   

   View Slide

8. ©MNTSQ, Ltd. 8
   ©MNTSQ, Ltd. 8
   ん？フェアにする？🤔
   

   View Slide

9. ©MNTSQ, Ltd. 9
   フェアとは？
   道義的に正しいこと。公平なこと。
   また、そのさま。公明正大。
   精選版 日本国語大辞典 より
   

   View Slide

10. ©MNTSQ, Ltd. 10
    利用する人に公平な情報を提供し
    搾取されることなく契約できるようにすること
    MNTSQ のサービスのおいてフェアとは？
    

    View Slide

11. ©MNTSQ, Ltd. 11
    ©MNTSQ, Ltd. 11
    現状どう？
    

    View Slide

12. ©MNTSQ, Ltd. 12
    全然ダメです😢
    

    View Slide

13. ©MNTSQ, Ltd. 13
    Vision に照らし合わせても、a11y 対応待ったなし💦
    

    View Slide

14. ©MNTSQ, Ltd. 14
    検討した対応方法
    

    View Slide

15. ©MNTSQ, Ltd. 15
    検討した対応方法
    1. 最低限の部分から対応する
    2. オリジナルのデザインシステムで対応する
    

    View Slide

16. ©MNTSQ, Ltd. 16
    最低限の部分から対応する
    デジタル庁
    ● ウェブアクセシビリティ導入ガイドブック｜デジタル庁
    freee
    ● freeeアクセシビリティー・ガイドライン
    ● [shared] アクセシビリティー・チェックリスト一般公開
    用
    SmartHR
    ● アクセシビリティ | SmartHR Design System
    ● ウェブアクセシビリティ簡易チェックリスト
    Ameba
    ● Ameba Accessibility Guidelines
    Vue Fes Japan 2023 After Meetup
    アクセシビリティに対し積極的に対応している
    企業やサービスの取り組みを参考に最低限の部分から対応する
    pros
    ● 小さく始めることが可能
    cons
    ● 規模によっては対応に時間がかかる
    ● どこから始めたらいいかわからない
    

    View Slide

17. ©MNTSQ, Ltd. 17
    オリジナルのデザインシステムで対応する
    pros
    ● a11y の適用基準等詳細に把握できる
    ● 見た目も思い通り
    cons
    ● デザインシステムがプロダクト初期からはない
    ● 作るのに時間がかかる
    ● 既存のコンポーネントのリプレースやトークンの適
    用など工数がかかる
    Vue Fes Japan 2023 After Meetup
    自社のプロダクトのパーソナリティ・デザイン原則を反映した
    デザインシステムで対応する
    デジタル庁デザインシステム 1.4.0
    

    View Slide

18. ©MNTSQ, Ltd. 18
    ©MNTSQ, Ltd. 18
    両方ともハードルは低くない
    

    View Slide

19. ©MNTSQ, Ltd. 19
    ● サービスの開始当初からデザインシステムがあることは稀
    ● 既存のフレームワークやライブラリを利用して MVP を作ることが多い
    ● 最初から a11y 対応している UI フレームワークやライブラリを利用することで、まずはベースライン
    を上げることができる
    ● 対応していないもの選択してしまうとなんらかの形でリプレースする必要がでてくる
    ● 既存のコードから対応方法を学べる
    アクセシビリティに対応した UI FW やライブラリから始める
    1・2 の pros と cons を考えると a11y に対応した
    FW やライブラリを選択することが現実的では🤔
    Vue Fes Japan 2023 After Meetup
    

    View Slide

20. ©MNTSQ, Ltd. 20
    代表的なフレームワークやライブラリの対応状況
    Vue Fes Japan 2023 After Meetup
    フレームワーク a11y 対応 WCAG 対応状況 ドキュメント その他
    Vuetify ◯ - あり
    PrimeVue ◯ WCAG 2.1 AA あり
    ElementPlus ◯
    WCAG 2.0
    Section 508？
    特定のコンポーネ
    ントに記述
    a11y のドキュメントはないが a11y 関連
    の Issue みると WCAG 2.0 や Section
    508 に対応している
    BootstrapVue ◯
    WCAG 2.0 (A/AA/AAA)
    Section 508
    あり
    quasar △ - -
    コンポーネント自体はある程度対応し
    てそう
    NaiveUI △ - - 対応しているコンポーネントもある
    Oruga ✕ - -
    ライブラリ a11y 対応 WCAG 対応状況 ドキュメント その他
    tiptap ◯ WCAG 2.1 および 3.0 あり
    

    View Slide

21. ©MNTSQ, Ltd. 21
    まとめ
    ● 合理的な配慮の義務化などの考慮など a11y の対応が求められている
    ● 最初から a11y 対応している UI フレームワークやライブラリを利用する
    ● a11y に対応しているかは公式ドキュメントの他、issue・Pull Request や
    ソースで確認
    ● 導入後必要に応じて独自のデザインシステムにリプレース等検討する
    

    View Slide

22. ©MNTSQ, Ltd. 22
    🙋最後にイベントの告知です
    ご清聴ありがとうございました
    

    View Slide

23. ©MNTSQ, Ltd. 23
    イベントやります！
    Vue Fes Japan 2023 After Meetup
    bukatsu-boardgame presents!
    MNTSQオープンオフィス
    LLMの採用と挑戦
    企業のリアルな取り組みを知る
    成長SaaSのQAマネージャーが語る！
    事業フェーズに合わせた
    プロダクト組織のありかた
    申込みはこちらから
    

    View Slide

24. View Slide