入力欄のプレースホルダーって結局どうなの - Qiita
入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders
HTMLのチェックボックス（<input type="checkbox">）やラジオボタン（<input type="radio">）をCSSで装飾したいというのはよく聞く話です。2024年現在は、HTMLの記述は簡単なまま、CSSで自由度の高い装飾も実現できるようになっています。 結論 従来の手法 appearanceプロパティを使う手法 外枠の配置 未チェックとチェック済みの切り替え 強制カラーモードへの対応 透明なボーダーやアウトライン 内向きの影や背景グラデーション 画像やテキスト ブラウザ組み込みの外観 状態に応じたスタイルの指定 参考文献 結論 単に色調を整えられればよいという場合は、accent-colorプロパティを使います。 input[type="checkbox"], input[type="radio"] { accent-color: #d31; } くだもの や
こんにちは！UXデザイン会社ajikeが提供するUX改善サポート＆UIUXデザイナー育成サービスのDods（@Dods_ajikeInc）です。 ChatGPTの新モデルで「ブラウジング機能（インターネットから最新情報を取得して提供する機能）」が無料ユーザーにも使えるようになりました。そこで、今回はWEB上に公開されているサイトをChatGPTにヒューリスティック診断してもらうことができるのでは…？と思って試した結果や実際に使用したプロンプトをご紹介したいと思います！ ※ヒューリスティック診断：ウェブサイトやアプリのUI・UXを特定の評価基準に基づいて分析し、潜在的な問題点や改善点を特定するもの ChatGPTのヒューリスティック診断結果実際にChatGPTで行ったヒューリスティック診断結果がこちら！ 今回はアジケのサイトで診断をしてみましたが、きちんとウェブサイト上の情報を参照した結果が
Rethinking Text Resizing on Web
Airbnb has made significant strides in improving web accessibility for Hosts and guests who require larger text sizes. This post takes an in-depth look at: The problems encountered on mobile web when relying solely on browser zoom.The challenges of introducing changes that would impact the workflow of all frontend engineers.The benefits seen since launching these accessibility improvements.by: Ste
CFP CFP の募集には fortee を使ってみようと思います。まだ慣れてないので色々と失敗すると思いますが、多めにみてください。(参加募集は fortee ではなく、慣れてる connpass を使う予定です) また、採択は fortee のプロポーサルのスターを第一基準にするので、聞きたいのはスターしてください。(なので、多分応募は早い方が有利です) 募集は Session と LT の 2 枠です。 Session 40 分枠 x 12 Web 開発に関わることならなんでも可 終わったら感想戦会場に移動、そこで QA CFP を Fortee で募集 基本は Fortee のスター数で選定 LT - 「1 分 de Web 標準」 1 人 1 分 1 スライドの LT x 50 人 主催が用意したスライドの 1 ページだけ割り当てられそのページを好きにできる 主催が表示するスライ
資料を受け取ったときに、見えにくさや読みにくさを感じたことはないでしょうか。 「プレゼン資料の色がわかりにくい」 「オンライン会議の画面共有で文字が見えにくい」 「資料がごちゃごちゃしていて読む気にならない」 見やすく読みやすい資料作成のためには、資料を受け取る相手の見え方や環境の理解が不可欠です。この記事では、資料作成でよくある色と文字の問題と改善方法を、書籍『見えにくい、読みにくい「困った！」を解決するデザイン』の著者であり、デザイナーの筆者が具体例を交えて解説します。 今回の記事は、アドビの「みんなの資料作成」企画に参加して執筆しています。 みんなの資料とユニバーサルデザイン 「みんなの資料作成」の“みんな”とは誰のことでしょうか。皆さんの職場やお客様にも、さまざまな人がいると思います。 日本人男性の約20人に1人の割合で、多数派の色覚とは異なる色の見え方をしている人がいます（*1）
アクセシビリティの祭典2024 スポンサーセッション 「発達障害当事者デザイナーとウェブアクセシビリティ」 株式会社トルク 山﨑悠
米国で急増するウェブアクセシビリティ訴訟 グローバル展開するなら、知っておきたい海外情報 | いますぐ始める！ ウェブアクセシビリティの基本
障害者の権利を守り、差別を解消することを目的とする法律が日本でも動き始めていますが、海外の多くの国・地域では日本よりも法整備が進んでいます。法整備が進んでいる国ではどのようなことが起きているのでしょうか。 米国ではアクセシビリティ関連の問題で企業が訴えられるケースが年々増えています。EU各国でも罰金が科せられるケースもあります。日本企業がアクセシビリティ対応をしないまま海外に事業展開するのはリスクがあり、実際に大企業に対し訴状が送られた例もあります。 グローバル展開を目指す企業では、より一層ウェブアクセシビリティ対応を実施する必要があります。今回はそんな海外のウェブアクセシビリティの現状について解説します。 海外のウェブアクセシビリティ事情前回の記事では、簡単に日米のウェブアクセシビリティに関する法律の違いについて触れました。今回はさらに欧米の状況も踏まえながらウェブアクセシビリティ事情を
Remix v3 の今後についてなど : Cybozu Frontend Weekly (2024-05-21号)
こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024 年 5 月 21 日 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 HTML attributes vs DOM properties HTML attributes と DOM properties の動作の違いについて解説している記事です。 Validation、値のチェック、デフォルト値、フレームワークに応じた挙動などについてまとめられています。 Deep Dive into React Stream/Serialize React の Stream/Serialize
これは何 Qiitaでは現在アクセシビリティ改善プロジェクトを立ち上げて、アクセシビリティ改善の取り組みを進めています！ この記事では、具体的にどのように改善を進めてきたのかと、実際やってみてどうだったかを紹介します。 背景 アクセシビリティ改善プロジェクトを立ち上げる前から、UIデザインや実装時に、クリックできる要素のタップエリアや、背景と文字色のコントラスト、画像やアイコンに適切な読み上げが設定されているかなどなどアクセシビリティ対応自体は行なっていました。 社内でも「アクセシビリティ」という言葉は浸透しており、デザインや実装、レビュー時に「アクセシビリティ対応の観点で〜」といった会話が自然に起きるような状態でした。 一方で明確なルールや基準は設けられていなかった為、漏れが生じたり人によって対応に差が出たりしてしまっていました。 また、インタラクションのある複雑な動きのUIではアクセシ
本日は世界各地でアクセシビリティを考える一日、GAAD（Global Accessibility Awareness Day）の日ですね！ アクセシビリティはWebサイトやアプリケーションのデザインや実装に関わるデザイナーやエンジニアはもちろん、サービスのコンテンツ作成や資料作成においても配慮が必要であり、さまざまな職種の人に関わるものです。 グッドパッチでは、しばらく前から社内の有志を中心にアクセシビリティ向上の取り組みを行っており、その活動の一環として、全職種向けにアクセシビリティの理解を深めるための社内勉強会を実施しました。 今回の勉強会では、社内でも特に関心があるUIデザイナーやエンジニアに、アクセシビリティの基礎知識から具体的な取り組みや事例などをLT形式で発表していただきました。勉強会はランチタイムに開催したのですが、多くの参加者が集まってくれました！ この記事では、それぞれの
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSでチェックボックスやラジオボタンをカスタマイズする 2024年版: Days on the Moon
ChatGPTにヒューリスティック診断させてみた｜Dods｜UIUX改善支援
Web Developer Conference 2024 開催告知 #wdc2024 | blog.jxck.io
赤は目立つ？ UDフォントを使えばOK？ デザイナーが解説するユニバーサルな資料作成のコツ
accfes2024_torque_yamasaki
Qiitaでアクセシビリティ改善プロジェクトを進めるためにやったこと - Qiita
全職種向けに開催！組織で理解を深める「アクセシビリティ社内勉強会」レポート｜Goodpatch Blog グッドパッチブログ