お問い合わせを送信いただきありがとうございます!当社のスタッフがすぐにご連絡いたします。
予約を送信いただきありがとうございます!当社のスタッフがすぐにご連絡いたします。
コース概要
法的文脈とアクセシビリティの基本
モジュール1: アクセシビリティ法とその重要性への導入
- 新しいアクセシビリティ法(6月28日施行)の概要
- 法的要件と期限
- 公的セクター、民間企業、開発者への影響
- アクセシビリティがなぜ重要か: 社会的、倫理的、ビジネス的な観点から
- 適用外の罰則
- アクセシビリティ基準(WCAG 2.1/2.2、ARIA)の概要
- 障害者のカテゴリー
モジュール2: アクセシビリティ原則とガイドライン
- POUR原則(認識可能、操作可能、理解可能、堅牢)
- WCAGガイドラインの紹介
- ARIAロール、状態、プロパティ
- アクセシビリティにおける意味論的HTMLの役割
モジュール3: アクセシブルな開発環境の設定
- ツール: ブラウザデベロッパーツール、スクリーンリーダー(NVDA、VoiceOver)、アクセシビリティ拡張機能
- ライターと自動化されたアクセシビリティテストツールの設定
- 一般的なアクセシビリティテストツールの概要
- スクリーンリーダー(VoiceOver/TalkBack)、Android Accessibility Scanner、Xcode Accessibility Inspectorを使用したモバイルエミュレータと実機でのアクセシビリティテスト設定。
モジュール4: 実践的なコーディング – 意味論的HTMLとキーボードナビゲーション
- アクセシビリティのための意味論的なマークアップの作成
- 完全なキーボードナビゲーションの確保
- フォーカス管理技術
- アクセシブルにフォームとインタラクティブ要素を扱う方法
ネイティブモバイルアプリのアクセシビリティ(オプション追加モジュール 1.5時間)
- 主要プラットフォームガイドライン(Google Material、Apple Human Interface)
- モバイル上でナビゲーション、ボタン、フォームをアクセシブルに作成する方法
- 一般的なモバイルアクセシビリティの問題と解決策
- スクリーンリーダー(VoiceOver、TalkBack)での実践的なテスト
上級コーディングと支援技術
モジュール5: アクセシブルなCSSとビジュアルデザイン
- 色コントラストとテキストサイズの最善実践
- フォーカススタイルと可視フォーカスインジケータ
- アクセシビリティに配慮したレスポンシブデザインの考慮点
- アニメーションとトランジションにおけるアクセシビリティの落とし穴を避ける方法
- モバイルスクリーン向けの色コントラストとサイズガイドライン。
モジュール6: 動的コンテンツと豊かなインターネットアプリケーションのためのARIA
- ARIA属性を使用するタイミングと方法
- スクリーンリーダー用にライブ領域を管理する方法
- アクセシブルなウィジェットとカスタムコンポーネントの作成
- SPA(シングルページアプリケーション)におけるARIAの役割
- モバイルでは、ネイティブプラットフォームでのアクセシビリティロールとラベル(AndroidのcontentDescription、iOSのaccessibilityLabelなど)について説明します。
モジュール7: 実践的なコーディングラボ: アクセシブルなコンポーネントの構築
- アクセシブルなボタン、モーダル、ドロップダウン、タブを作成する
- アクセシブルなフォームバリデーションとエラーハンドリングを実装する
- ARIAと意味論的HTMLを使用して実世界のUIコンポーネントを作成する
テスト、準拠、継続的なアクセシビリティ
モジュール8: アクセシビリティテストと監査
- スクリーンリーダーとキーボードのみを使用した手動テスト技術
- axe、Lighthouse、pa11yなどのツールを使用した自動化されたテスト
- QAチーム向けのアクセシビリティテストケースの作成方法
- CI/CDパイプラインでのアクセシビリティテストの統合
- ネイティブモバイルアプリでのアクセシビリティ監査方法(手動テスト、Accessibility Scannerなどの自動化されたツール、AndroidのEspresso、iOSのXCTest)
モジュール9: 修正と継続的なアクセシビリティ
- 常見のアクセシビリティ問題とその解決方法
- レガシーコードベースでのアクセシビリティ管理
- 機能更新やリファクタリング時のアクセシビリティの維持
- モバイル、デスクトップ、ウェブなどのマルチプラットフォームアプリにおけるアクセシビリティ
モジュール10: 最終的な実践演習とまとめ
- アクセシビリティ基準を満たす小さなアプリ/モジュールの構築またはリファクタリング
- ピアレビューとグループディスカッション
- Q&Aとフィードバックセッション
- 今後の学習と準拠アップデートのリソース
要求
- HTML、CSS、JavaScriptの基本から中級までの知識
- Android、iOSなど、モバイルアプリケーション技術の基本から中級までの知識
- フロントエンドフレームワーク(React、Angular、Vueなど)へのなじみがあると尚可
- モバイルアプリ開発へのなじみがあると尚可
- ウェブ/モバイル開発ライフサイクルの基本的な理解
- 開発環境がセットアップされたラップトップ(コードエディタ、ブラウザデベロッパーツール)
対象者
- フロントエンド/バックエンド/モバイル開発者
- コーディング知識を持つUI/UXデザイナー
- アクセシビリティテストに焦点を当てたQAエンジニア
- アクセシビリティ準拠に関与する製品オーナーとプロジェクトマネージャー
21 時間
お客様の声 (5)
私たちの講師、ヤシャンクは非常に知識が豊富でした。彼はカリキュラムを私たちが必要な学習内容に合わせて調整し、素晴らしい学習経験を提供してくれました。彼が教えている分野への理解は印象的で、実際の経験に基づく洞察を共有し、仕事で直面している実際の問題を解決するために支援してくれました。
Ahmed Nazeem - Maldives Pension Administration Office
コース - Multimodal AI for Enhanced User Experience
機械翻訳
「講師がリアルタイムで私たちのチームがヒューマンセントリックデザイン(HCD)をプロジェクトにどのように適用できるかを示した方法は、非常に感謝しています。また、講師がプロジェクト全体を理解するために時間を費やしてくれたことも素晴らしい点でした。これにより、UXとUIへのアプローチをより良く行うための明確で実践的なガイダンスを提供することができました。」
Nichole Bryant Joven - Grundfos
コース - Human-Centered Design (HCD)
機械翻訳
内容に実践的な例が含まれていたこと
Smita Hanuman - Standard Bank of SA Ltd
コース - Basel III – Certified Basel Professional
機械翻訳
講師が Figma について非常に詳しそうな点が気に入りました。
January Oliva - Eko Health
コース - User Experience Design with Figma
機械翻訳
- 演習は実践的です - 講師は私たちの具体的な質問に答えるのに役立ちます
Germaine Choi - The Hong Kong Jockey Club
コース - User Experience (UX) Design
機械翻訳