Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

nksm
November 07, 2023

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

nksm

November 07, 2023
Tweet

More Decks by nksm

Other Decks in Technology

Transcript

  1. ©MNTSQ, Ltd. 2 自己紹介 ナカシマアキラ 大学卒業後は各種デザインを中心に制作。 近年はフロントエンドエンジニア(とたまにデザイナー)として新規 サービスの企画・開発を行う。 前職で Design

    System を構築した縁から MNTSQ ではサービスを開発す る傍ら、 Design System の開発に参加するなどフロントエンドとデザイ ンの間をさまよう。 Vue Fes Japan 2023 After Meetup フロントエンドエンジニア @nksm / twitter a.k.a X
  2. ©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
  3. ©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ナレッジの活用 ❏ 法務情報の自動分析 ベストな契約を自動化 案件状況を可視化・リスク検知
  4. ©MNTSQ, Ltd. 16 最低限の部分から対応する デジタル庁 • ウェブアクセシビリティ導入ガイドブック|デジタル庁 freee • freeeアクセシビリティー・ガイドライン

    • [shared] アクセシビリティー・チェックリスト一般公開 用 SmartHR • アクセシビリティ | SmartHR Design System • ウェブアクセシビリティ簡易チェックリスト Ameba • Ameba Accessibility Guidelines Vue Fes Japan 2023 After Meetup アクセシビリティに対し積極的に対応している 企業やサービスの取り組みを参考に最低限の部分から対応する pros • 小さく始めることが可能 cons • 規模によっては対応に時間がかかる • どこから始めたらいいかわからない
  5. ©MNTSQ, Ltd. 17 オリジナルのデザインシステムで対応する pros • a11y の適用基準等詳細に把握できる • 見た目も思い通り

    cons • デザインシステムがプロダクト初期からはない • 作るのに時間がかかる • 既存のコンポーネントのリプレースやトークンの適 用など工数がかかる Vue Fes Japan 2023 After Meetup 自社のプロダクトのパーソナリティ・デザイン原則を反映した デザインシステムで対応する デジタル庁デザインシステム 1.4.0
  6. ©MNTSQ, Ltd. 19 • サービスの開始当初からデザインシステムがあることは稀 • 既存のフレームワークやライブラリを利用して MVP を作ることが多い •

    最初から a11y 対応している UI フレームワークやライブラリを利用することで、まずはベースライン を上げることができる • 対応していないもの選択してしまうとなんらかの形でリプレースする必要がでてくる • 既存のコードから対応方法を学べる アクセシビリティに対応した UI FW やライブラリから始める 1・2 の pros と cons を考えると a11y に対応した FW やライブラリを選択することが現実的では🤔 Vue Fes Japan 2023 After Meetup
  7. ©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 あり
  8. ©MNTSQ, Ltd. 21 まとめ • 合理的な配慮の義務化などの考慮など a11y の対応が求められている • 最初から

    a11y 対応している UI フレームワークやライブラリを利用する • a11y に対応しているかは公式ドキュメントの他、issue・Pull Request や ソースで確認 • 導入後必要に応じて独自のデザインシステムにリプレース等検討する
  9. ©MNTSQ, Ltd. 23 イベントやります! Vue Fes Japan 2023 After Meetup

    bukatsu-boardgame presents! MNTSQオープンオフィス LLMの採用と挑戦 企業のリアルな取り組みを知る 成長SaaSのQAマネージャーが語る! 事業フェーズに合わせた プロダクト組織のありかた 申込みはこちらから