デジタル庁では「誰一人取り残されない、人に優しいデジタル化」を実現するため、継続的に「ウェブアクセシビリティ」の向上に取り組んでいます。この度、ウェブアクセシビリティに初めて取り組む行政官の方や事業者向けに、ウェブアクセシビリティの考え方、取り組み方のポイントを解説する、ゼロから学ぶ初心者向けのガイドブックを公開します。 優しいサービスのつくり手になる一助として、ぜひご活用ください。 公開の背景ウェブアクセシビリティの向上に取り組むには、非常に専門的な複数の規格とガイドラインをそれぞれ確認する必要があります。そのため、適切なやり方がわからないままに、現在は間違っている対応の踏襲、不要・過剰な対応、不適切な対応をしてしまうことがあります。ウェブサイトだけではなく、申請・手続等のデジタルサービスの重要性が増す中で、最新の技術動向を踏まえた、初心者が学習できる行政機関向けの研修資料が不足していま

ペースト出来ないID/パスワード欄 4つに分割されてるクレジットカード番号入力欄 入力した後で記号は使えませんとか言ってくるパスワード欄 あと一つは？

画像の代替テキストについては、Webアクセシビリティの文脈で注目されることが多く、これまでに当Blogでも関連した記事をいくつか掲載しています（例：代替テキストはなぜ簡潔にすべきか）。今回は、社内で少し話題となったQRコードへの代替テキストの設定について考えてみたいと思います。 QRコードは英数字や漢字、記号など、さまざまなデータを格納できる2次元のバーコードです。Webページやチラシなどに、スマートフォンでアクセスするためのURLの情報として掲載されていることも多く、実際に利用したことのある方もいるのではないかと思います。以下は、ミツエーリンクスのトップページのQRコードです。 そんなQRコードですが、特に全盲のユーザーがWebページ上のQRコードを読み取る場合、画面上のQRコードの位置を正確に把握してスマートフォンなどで読み取るのは難しく、時間がかかってしまうことがあります。 こうした

ウィリアムEB. @WilliamEB1 @soundquest_jp 他のデザイン案、①だと「色を認識しづらい」、②だと「フォローボタンが小さくなった」という苦情が出てきそうですね… 悪いデザインではないですが 2021-08-13 11:15:18 さざめき @samezakichan フォロー済みボタンより「フォローボタン」のほうが重要だから黒くは、わからんでもないけど、「フォローボタン」より重要なのは、実際のツイート欄なんですよね。なのにフォローボタンが黒になったことでパソコン勢は、関連性の強いアカウントっていう黒が連なる右側にばかり視線が行くように……。 twitter.com/soundquest_jp/… 2021-08-13 11:43:54

たくさんのショッピングサイト、オンラインショップがあります。良心的なサイトもたくさんありますが、意図しない購入や申込に誘導・欺くサイトもあります。利用者として、そして制作者として、気をつけたいダークパターンを紹介します。 料金に手数料が加えられていたり、メール配信が知らない間に申し込まれていたり、登録は簡単なのに退会が難しかったり、キャンセルがクリックできないみたいに表示されてたり、さまざまなダークパターンが存在します。 Dark Patterns at Scale by プリンストン大学とシカゴ大学の研究者によるレポート 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Sneaking -スニーキング Urgency -アージェンシー Misdirection -ミスディレクション Social proof -ソーシ

キャンセルボタンをデザインする時に、カラーで悩むことはありませんか？ キャンセルボタンに色をつけてはいけない理由、ニュートラルなグレーが適している理由を紹介します。 キャンセルボタンのデザインがアクションボタンと同じだと、ユーザーは迷ってしまいます。キャンセルできることを明確にすることで、認知速度が上がります。また、ボタンが3個以上だったり、ラベルが違っていると、ユーザーは余計に戸惑います。 Why Cancel Buttons Should Never Have a Color by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 キャンセルボタンに色をつけてはいけない理由 ニュートラルボタンのためのニュートラルカラー キャンセルに適したラベルとは グレーを使う時は十分に暗くする キャンセルボタンはニュ

道路工事中の赤ランプ、踏切、非常口のマーク――　2018年4月、JIS（日本工業規格）の改訂に伴い、こういった場所に使われている「安全色」が変わったことをご存じでしょうか。 設備の入れ替わりに時間がかかるため、ひょっとしたら、まだ“新色版”を目にしていない人もいるかもしれません。ですが、仮に見ていたとしても、多くの人は気付かないままでしょう。というのも、一般的な色覚を持つ人には、“小さな違い”しか分からない調整が行われているからです。 上下どちらが改訂前、改訂後なのか分かりますか？ しかし、この改訂により、あるタイプの色弱者には「色味が感じられなかった標識がカラーになる」など“大きな変化”があるのだといいます。安全色に起こった小さくて大きな変化とは、どのようなものなのか。CUDO（カラーユニバーサルデザイン機構）副理事長・伊賀公一氏に話を伺いました。 本記事はテーマ別に分けた3編構成となり

KNNポール神田です。 いよいよ、東京五輪の大会ボランティア募集が開始となった。 『ブラックボランティア』などとネットでいくら言われようとも、ボランティアする側が納得していれば、それはブラックなボランティアではないと思う。母国の五輪のボランティアで得られる経験は、人生のうち、何度もあるものではないからだ。 ボクが1963年の東京五輪の聖火リレーを見たのは神戸市の兵庫区だった。たった２歳であったが、あの雨の日の聖火リレーは、しっかりと脳裏に焼き付いている。だからこそ、ボランティアでも五輪に参加したいと考えている。 1963年10月神戸市兵庫区上沢通3丁目　出典:神田友治撮影11万人のボランティアが必要とされている大会ボランティアが８万人（組織委員会）、そして、都市ボランティアが３万人（東京都）の募集が昨日（2018/09/26）より開始となった。それぞれの申し込みページが公開された。 大会ボ

忙しい年の瀬ですが、皆さま如何お過ごしでしょうか。 さて、皆さんは「グッドデザイン賞はあるのにバッドデザイン賞が無いのはおかしい」という風に思ったことはありませんか？私は職業柄、日常生活で見かけた良いデザイン事例と悪いデザイン事例を写真に撮ってストックしているのですが、その中には「本当にこれギャグじゃないの？」というレベルのバッドデザインがあったりするんですよね。 良いものを良いと評価することも大切ですが、良くないものを無視するのは人類の進歩に大きな影を落としているような気さえします。ということで、勝手にアワード化してしまいました。2017と付いてますが、私が見つけたのが2017年だったというだけで製造年度などとの相関性はなく、特に意味はないです。あくまでジョークコンテンツとしてお楽しみください。 【追記】Twitterの方で一部画像が自分で撮影したものではないのでは？とご指摘頂きました。

世の法人にとっての６月は、税金や労働保険の申請の時期。坂の上にある渋谷税務署、労働基準監督署に通う日々にも飽きてきた昨今、坂の上にある渋谷法務局へ電子署名を取りに行った。 昨今の申請は電子政府e-Govや地方税ポータルシステムeLtax（画像はこれ）を使えば実質事務所から出ずとも終えられる。はずだった。 Javaのセキュリティレベルの例外サイト(javaコントロールパネル、javacpl.exe。ctrじゃなくてcplなんだよね・・・コントロールパネル)とIEの信頼済みサイトにもれなく必要なURLを突っ込んだ我々が引っかかった罠を備忘録として対処法を載せる。行政のサイトが危険なの？ってツッコミはしちゃいけないんだと思う。 使用できない文字が含まれています含まれている限り何人たりとも通さない仕事の真面目さ素敵です。 スペース：よくある全角半角問題。氏と名の間に入れるのは全角スペースです。半角

1: アルゼンチンバックブリーカー(大阪府)＠＼(^o^)／ 2014/07/06(日) 18:32:54.28 ID:jtlvCqZS0.net BE:151728184-PLT(13121) ポイント特典

ビスケットは，開発して新しい機能を追加したときなど，必ず子どもたちが使っている様子を自分目で見てどんな風に使っているかを見てきます（最近はその暇が無くて他人に任せていたりして，かなりまずいんですが）．3年前くらいの面白いエピソードをご紹介しましょう． ちょうど，Androidタブレットで動くビスケットを開発していて（これはまた一般には配布していません．実験環境だけです），それがどのように子どもたちに使われるか見に行きました．僕としても指で直接操作するタブレットのUIの開発は初めてで．実は，マウスとタッチペンの操作は結構似ています．どちらも，非常に小さいエリアを結構正確にポイントできて，ドラッグもできますから．どちらかというと，ペンの方がドラッグが得意でしたね．小さい子はマウスクリックが全然出来ないとか（ボタンを押すときに指先だけ押すということができないので，手を握ってしまって，その結果マウ

Float Label Patternはかっこよくて、単にラベルをプレースホルダーにするよりはマシなので使いたくなる。しかしラベルとプレースホルダーは別に提供してやりたい。機能も違うものなので、その方がきっと良いはずだ。そこで別解として、ラベルが斜めに動くものを考えた。もちろんCSSのみで実装している。 Demo: Alternative Float Label Pattern 入力フォームにフォーカスすると、左にあるラベルが斜め右上に少し移動すると同時に入力フォームが左へ拡大する。これによりFloat Label Patternと同じような結果になるが、デフォルトの状態ではラベルとプレースホルダーを両立させることができる。 ラベルを入力フォームのフォーカスと連携させるには、隣接兄弟セレクターを使うくらいしか方法はなさそうなので、マークアップは入力フォーム→ラベルの順にする必要がある。また

Googleでヒドすぎる検索バグが発生中、リンクテキスト消滅やHTMLタグの表示など──検索結果ページのデザイン変更と関連か Googleの検索結果で一部ユーザにバグが発生中 先月末ごろより、PCからGoogle検索を利用した場合の検索結果ページ（SERP：Search Engine Result Page）にバグが発生している。 筆者が確認した限りでは、リンクのテキストが消滅し「...」に置き換えられたり、文字数が多すぎるリンクの省略表示が異常なものになることが多々見受けられる。 また、その他にもリンクテキストに明らかに不自然なタグが挿入されるケースもある。 このようにHTMLタグである<b>タグ（強調表示）や<wbr>タグ（改行してもよい位置を示す）が露出してしまっている。 これらのバグの発生原因は確定していないが、現在Googleが実施している新しいデザインの検索結果ページの導入テス