デザイン＆エンジニアリング

本

YUIDEAのデザイナー・エンジニアによる共同マガジンです。クリエイティブの考え方、ノウハウ、制作ストーリーなど発信していきます。

運営しているクリエイター

#ウェブアクセシビリティ

代替テキストをChatGPT-4oと一緒に考える｜webアクセシビリティ

こんにちは。YUIDEAでアートディレクターをしているTottiです。 webアクセシビリティに対応したサイト制作を行う中で、地味につまづく"代替テキスト"。この身近で奥深い問題をAIと一緒に考えてみました。そもそも代替テキストって何？代替テキストは、htmlで画像要素<img>に追加される属性の一つ（alt属性）で、画像が読み込まれない場合や、ユーザーがスクリーンリーダーを使用している場合などに、代替テキストが画像の代わりに表示されたり読み上げられたりします。そ

アクセシビリティ対策用カンニングコード

以前ポストした「コーディング視点からの、ウェブアクセシビリティ対応」を基に、実際どう組んでいたか、（自分が）特に忘れやすい部分を思い出すため用のカンニングコードをまとめてみました。フォントの相対指定直観的に記述するなら、ベースとなるサイズ指定の時点で10px相当のサイズを指定し、rem指定で調節。 /* CSS */html { font-size: 62.5%;}/* 10px = 16px * 0.625 *//* 以降 10px = 1rem *//* 14px

民間企業40社のアクセシビリティ方針を調査してみた

こんにちは。YUIDEAでアートディレクターをしているTottiです。前回、ウェブアクセシビリティの基礎知識についてまとめてみました。今回は、ウェブアクセシビリティに取り組むにあたって必要なアクセシビリティ方針について、民間40社を調査してみたのでご紹介したいと思います。アクセシビリティ方針とはウェブアクセシビリティ基盤委員会では、ウェブアクセシビリティを高めるプロセスとして、以下の流れでPDCAを回し、継続的に取り組んでいくことを推奨しています。ウェブアクセシ

対応義務化？ウェブアクセシビリティ基本の「き」

こんにちは、YUIDEAでアートディレクターをしているTottiです。 2024年4月に「障害者差別解消法」の一部改正法が施行され、全事業者を対象に「合理的配慮の提供」が義務化されることになりました。それに伴い、ウェブアクセシビリティの対応について話題になっていますよね。私たちもサイト制作の中で問い合わせを受けることがあります。この法改正はwebサイト制作にどんな影響があるのでしょうか。「JISのレベルAAに準拠？一部準拠？それって何すればいいの？」と慌てる前に、

コーディング視点からの、ウェブアクセシビリティ対応

ウェブアクセシビリティについて、コーディングするときに実際に意識した点、体感した点を以下に覚書。 HTML構造アクセシビリティのみならずSEO的にも必ず意識する、基本中の基本要素。デザインにもよるが、構成は以下の流れを踏襲。 header navigation main-contents footer 一通りコーディングが完了したら、バリデータにかけてエラーをつぶす。ブロックスキップの追加スクリーンリーダー使用するユーザー等に対して、「本文へ」といったメ