問題
- DocumentsとMediaのウィジェットにテーブルビューが設定されています。
- モバイル画面でページを表示すると、テーブルが収まらない
- すべての列を見るためのスクロールバーがあるが、小さくて使いにくい
- アクセシブルデザインとして認められるかどうか心配です
- 縦長のデザインに期待
Environment
- Liferay DXP 7.4+
解決策
現在のデザインはレスポンシブで、テーブルが横方向に思い切りリサイズされるようになっています。
モバイルビューポート上ではテーブルが切り取られ、テーブルをスクロールさせるための水平スクロールバーが表示されます。 しかし、ブラウザのDev Toolを開き（F12）、Toggle deviceツールバー（Ctrl + Shift + M）を開き、画面のリサイズを始めると、テーブルが狭まり始め、列間のスペースが小さくなっていることが確認できます。
横型と縦型のデザインを検討し、現在の景観を意識して決定しました。
この動作は、シンプルでわかりやすいからこその設計判断の結果だと思います。 縦長のデザインにはデメリットもあり、例えば、データが多い場合、縦にスペースを取りすぎてしまいます。
スクロールエリアはキーボードで操作可能です。
現在のソリューションでは、アクセシビリティの観点から重要なチェックポイントは、スクロールエリアがキーボードでアクセス可能かどうかということです。
タブを使えば、ボタンやリンクなど、 インタラクティブ のコンポーネントから別のコンポーネントに移動することができます。 Chromeのスクリーンリーダー拡張機能を使うことで、テーブル内のリンク間をタブでつなぐことができるようになりました。 この場合、リンクの名前がリードで読み上げられ、そのリンクの中をナビゲートすることで、リンクと対話することもできます。
テーブル内のボタンやリンク、インタラクティブ・コンポーネントから次/前のインタラクティブ・コンポーネントへのジャンプ モバイルビューでは期待通りに動作します
一方、スクリーンリーダーは通常、コンテンツをブラウズするために矢印を使い、 セマンティック コンテンツのタイプ間をジャンプするためにローター/ショートカットを使います。 セマンティックデータはタブで読むことはできませんが、他の クイックナビゲーションで読むことができます。 そのため、VoiceOverやJAWSなどのスクリーンリーダーを使用することができます。 この場合、最も単純な例は、テーブルのヘッダー、ステータス、日付などの意味的な情報を矢印キーで移動できることです。
スクリーン・リーダーを使用すると、表の中の画面外のデータも操作できるようになります。
追加情報
- また、Documents and MediaウィジェットのListやCardビューを使用することで、モバイルでも画面に収まるようにすることも検討できます。