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

Transcript

1. ©MNTSQ, Ltd. 2023.11.07 UI フレームワークからはじめる アク セシビリティ Vue Fes Japan 2023 After Meetup
2. ©MNTSQ, Ltd. 2 自己紹介 ナカシマアキラ 大学卒業後は各種デザインを中心に制作。 近年はフロントエンドエンジニア（とたまにデザイナー）として新規 サービスの企画・開発を行う。 前職で Design System を構築した縁から MNTSQ ではサービスを開発す る傍ら、 Design System の開発に参加するなどフロントエンドとデザイ ンの間をさまよう。 Vue Fes Japan 2023 After Meetup フロントエンドエンジニア @nksm / twitter a.k.a X
3. ©MNTSQ, Ltd. 3 ©MNTSQ, Ltd. 3 みなさん Vue Fes Japan 2023 いかがでした？
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
5. ©MNTSQ, Ltd. 5 ©MNTSQ, Ltd. 5 MNTSQ ってどんな会社？
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ナレッジの活用 ❏ 法務情報の自動分析 ベストな契約を自動化 案件状況を可視化・リスク検知
7. ©MNTSQ, Ltd. 7 Vision すべての合意をフェアにする MNTSQは、誰でも一瞬でフェアな合意ができる世界を目指します。 あらゆる取引が成立するまでのリードタイムを短くし、 誰もが搾取されることなく契約できる社会を実現します。
8. ©MNTSQ, Ltd. 8 ©MNTSQ, Ltd. 8 ん？フェアにする？🤔
9. ©MNTSQ, Ltd. 9 フェアとは？ 道義的に正しいこと。公平なこと。 また、そのさま。公明正大。 精選版 日本国語大辞典 より
10. ©MNTSQ, Ltd. 10 利用する人に公平な情報を提供し 搾取されることなく契約できるようにすること MNTSQ のサービスのおいてフェアとは？
11. ©MNTSQ, Ltd. 11 ©MNTSQ, Ltd. 11 現状どう？
12. ©MNTSQ, Ltd. 12 全然ダメです😢
13. ©MNTSQ, Ltd. 13 Vision に照らし合わせても、a11y 対応待ったなし💦
14. ©MNTSQ, Ltd. 14 検討した対応方法
15. ©MNTSQ, Ltd. 15 検討した対応方法 1. 最低限の部分から対応する 2. オリジナルのデザインシステムで対応する
16. ©MNTSQ, Ltd. 16 最低限の部分から対応する デジタル庁 • ウェブアクセシビリティ導入ガイドブック｜デジタル庁 freee • freeeアクセシビリティー・ガイドライン • [shared] アクセシビリティー・チェックリスト一般公開 用 SmartHR • アクセシビリティ | SmartHR Design System • ウェブアクセシビリティ簡易チェックリスト Ameba • Ameba Accessibility Guidelines Vue Fes Japan 2023 After Meetup アクセシビリティに対し積極的に対応している 企業やサービスの取り組みを参考に最低限の部分から対応する pros • 小さく始めることが可能 cons • 規模によっては対応に時間がかかる • どこから始めたらいいかわからない
17. ©MNTSQ, Ltd. 17 オリジナルのデザインシステムで対応する pros • a11y の適用基準等詳細に把握できる • 見た目も思い通り cons • デザインシステムがプロダクト初期からはない • 作るのに時間がかかる • 既存のコンポーネントのリプレースやトークンの適 用など工数がかかる Vue Fes Japan 2023 After Meetup 自社のプロダクトのパーソナリティ・デザイン原則を反映した デザインシステムで対応する デジタル庁デザインシステム 1.4.0
18. ©MNTSQ, Ltd. 18 ©MNTSQ, Ltd. 18 両方ともハードルは低くない
19. ©MNTSQ, Ltd. 19 • サービスの開始当初からデザインシステムがあることは稀 • 既存のフレームワークやライブラリを利用して MVP を作ることが多い • 最初から a11y 対応している UI フレームワークやライブラリを利用することで、まずはベースライン を上げることができる • 対応していないもの選択してしまうとなんらかの形でリプレースする必要がでてくる • 既存のコードから対応方法を学べる アクセシビリティに対応した UI FW やライブラリから始める 1・2 の pros と cons を考えると a11y に対応した FW やライブラリを選択することが現実的では🤔 Vue Fes Japan 2023 After Meetup
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 あり
21. ©MNTSQ, Ltd. 21 まとめ • 合理的な配慮の義務化などの考慮など a11y の対応が求められている • 最初から a11y 対応している UI フレームワークやライブラリを利用する • a11y に対応しているかは公式ドキュメントの他、issue・Pull Request や ソースで確認 • 導入後必要に応じて独自のデザインシステムにリプレース等検討する
22. ©MNTSQ, Ltd. 22 🙋最後にイベントの告知です ご清聴ありがとうございました
23. ©MNTSQ, Ltd. 23 イベントやります！ Vue Fes Japan 2023 After Meetup bukatsu-boardgame presents! MNTSQオープンオフィス LLMの採用と挑戦 企業のリアルな取り組みを知る 成長SaaSのQAマネージャーが語る！ 事業フェーズに合わせた プロダクト組織のありかた 申込みはこちらから