世界観や設定をきちんと踏まえていない多様性は，コンテンツを不自然なものにしかねない。ゲームにおけるDEI表現の意義と重要性，そして導入する際の留意点［CEDEC 2024］
世界観や設定をきちんと踏まえていない多様性は，コンテンツを不自然なものにしかねない。ゲームにおけるDEI表現の意義と重要性，そして導入する際の留意点［CEDEC 2024］ ライター：大陸新秩序 2024年8月22日，ゲーム開発者向けカンファレンス「CEDEC 2024」にて，セッション「『表現』でもグローバルを目指す！ DE＆Iに関する取り組み」が行われた。 このセッションでは，バンダイナムコオンライン 事業本部 品質保証部 大熊未来氏が，同社のオンラインゲームプロジェクトの海外展開を目指すうえで得たDE＆I（DEI）表現に関する知見と，それを社内へ浸透させるために行った取り組みを紹介した。 大熊未来氏 なぜDEI表現を重要視するに至ったか セッションの冒頭，大熊氏はバンダイナムコオンラインがなぜDEI表現を重要視するに至ったかについて，「コンテンツの間口を広げ，多種多様なゲームプレイヤ
先日、display:contents;というプロパティをはじめて知りました。 他のdisplayシリーズと比べるとあまり馴染みがなかったので、今回はdisplay:contents;とは何か、どんな場面で使えるのかについて紹介します。 1. 結論 display:contents;を指定した要素は、あたかも存在しないかのように扱うことができる これにより、グリッドレイアウトやレスポンシブデザインを作成する際に便利に活用できる ただし、アクセシビリティに課題が残るため、慎重に使用する必要がある 2. display:contents; とは？ 2-1. display:contents;の概要 display:contents;を指定した要素は、存在しないかのように扱われ、指定した要素の子要素が直接親要素内に挿入されます。 Mdn Web Docsでは以下のように説明されています。 これら
「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありません - Qiita
「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありませんHTMLアクセシビリティWAI-ARIA 最近、「アクセシビリティを向上させたいなら、HTMLの disabled 属性ではなく、aria-disabled 属性を使うべき」という主張を見かけますが、本当にそうなのでしょうか？ disabled属性を使っていても、スクリーンリーダーで要素を知覚できる そのような主張をしている人、それを受け止めた人の中には「 disabled 属性を使った要素はスクリーンリーダで読めなくなる」と誤解している人が少なからず存在するように思われます。しかしこれは正しい理解ではありません。 たしかに、disabled属性を付加している button 要素や input 要素、 select 要素、 textarea 要素は、Tabキーによるフォーカスはでき
はじめに 最近、ソフトウェアアーキテクチャを改めて勉強しようと2冊の本「ソフトウェアアーキテクチャの基礎 ―エンジニアリングに基づく体系的アプローチ」と「アーキテクトの教科書 価値を生むソフトウェアのアーキテクチャ構築」を読んだので要点と感想を備忘としてまとめます。 ソフトウェアアーキテクチャの基礎 ―エンジニアリングに基づく体系的アプローチ アーキテクトの教科書 価値を生むソフトウェアのアーキテクチャ構築 概要とポイント ソフトウェアアーキテクチャの基礎 ―エンジニアリングに基づく体系的アプローチ アーキテクチャには正解も間違いもない。ただトレードオフがあるだけだ。 この本はアーキテクチャを考えるための思考から、代表的なアーキテクチャスタイルの紹介やアーキテクトとしてのソフトスキル（対人スキルやチーム運営、キャリアパス等）まで網羅的にまとめられているものとなります。 アーキテクチャの技術
アクセシビリティが考慮された React Aria のドラッグアンドドロップ 2024.09.07 React Aria は Adobe により提供されている React 用のコンポーネントライブラリであり、アクセシビリティを最優先した設計となっています。本記事では、React Aria により提供されているドラッグアンドドロップ機能を紹介します。 ドラッグアンドドロップは、ユーザーが UI の要素をドラッグして別の場所に移動する操作です。Web アプリケーションにおいて、ドラッグアンドドロップはユーザーが直感的に操作できるため、多くの場面で利用されています。例えばタスク管理アプリケーションにおいて、タスクをドラッグして進行状況を変更したり、ファイル管理アプリケーションにおいてファイルをドラッグしてフォルダを移動する機能などがあります。 従来のドラッグアンドドロップ機能はマウス以外での操作
他社事例から考える、利用しやすいデザインシステムのためのガイドライン作り - enechain Tech Blog
はじめに enechainデザインシステムについて デジタル庁デザインシステム 特徴 Figmaファイル Webサイト GitHub Primer 特徴 Figmaファイル Webサイト Ameba Spindle 特徴 Figmaファイル Webサイト 各デザインシステムの構成まとめ enechainへの反映 Notionでのガイドライン まとめ はじめに こんにちは、デザイナーの渡邉と申します。私はenechainの業務委託メンバーとして、enechainの複数プロダクトを支えるデザインシステムの改善に携わっています。 この記事では、利用しやすいデザインシステムへと改善していく上でデザインチームが取り組んでいたことをまとめます。 enechainデザインシステムについて enechainでは10個以上のマルチプロダクトを開発・運用しており、デザイナーは各プロダクトでUIデザインを担当し
はじめに フロントエンドエンジニアのみなさん、 要素を非活性にする際、disabled=trueを使っていませんか？ アクセシビリティ的にそのやり方は良くないです。 最近、アクセシビリティに配慮したアプリケーションの開発に携わっています。 その中でシニアエンジニアから頂いたフィードバックについて共有したいと思います。 結論 disabled=true ではなく aria-disabled=true を使う disabledの場合 disabledが付与されている要素はフォーカスができません。 そのため、キーボードを用いて操作しているユーザーにとって、 要素の存在を認知しにくいものにしてしまいます。 （フォーカスできない要素は存在しない要素とほぼ同義だから） ちなみにテキストフィールドをdisabledにすると上記のように、ボタンのフォーカスがスキップされ、スクリーンリーダーでも検知すること
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
display:contents;って何？どんな時に使うと便利なの？ - Qiita
「ソフトウェアアーキテクチャの基礎」と「アーキテクトの教科書」の備忘と感想
アクセシビリティが考慮された React Aria のドラッグアンドドロップ
要素を非活性にするのに、まさか disabled を使ってないよね？ - Qiita