Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎
Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎 2023.02.18 ウェブアプリケーションエンジニアを対象に、アクセシビリティの対応について解説した記事。アクセシビリティを向上させるためには、正しいHTMLの書き方が必要である。HTML要素には、アクセシビリティに関する機能が元々備わっているため、適切なHTMLを選択し使用することが大切だ。複雑なUIの場合はWAI-ARIAを使用し、ARIA Authoring Practices Guideに基づき適切に実装する必要がある。UIライブラリ選びの際には、WAI-ARIAに従った実装を行っているかが基準の1つとなる。 この記事は、ウェブアプリケーションエンジニアとして仕事をされているほうを対象に書かれています。日々のウェブフロントエンドの開発の中で意識しておきたい基礎的な内容をメインに記載しています。 そのため、ここ
なぜ、ハイパーリンクは青色なのか?
Mozillaブログより。 エリーゼ・ブランチャード インターネットは私たちの生活のあらゆる場面に浸透していますが、デジタルの世界では当たり前のように使われているものがあります。それは、多くのリンク、特にハイパーリンクが青色であることに気づいたことがありますか? 同僚が何気なく「なぜ、リンクが青いのか」と聞かれた時、私は戸惑いました。2001年からウェブサイトを制作しているユーザ・エクスペリエンス・デザイナーの和tがしは、常にリンクを青くしてきました。私は青の特定の色調を提唱してきました。しかし、「なぜリンクが青なのか」と疑問に思ったことはありません。それはただの事実でした。草は緑で、ハイパーリンクは青です。文化的に、私たちはリンクを青色に関連付けているため、2016年にGoogleがリンクを黒に変更したときには、かなりの混乱が生じました。 しかし今、私は「なぜ、リンクが青なのか」と言う疑
Firefoxは強制的に右クリックメニューを表示できる - はりをきば
【追記 2016/12/24】 カスタム右クリックメニューの挙動に関する情報更新 WHATWGのリンク切れ修正 テスト画像差し替え 今年最後だってのによりにもよってこのタイミングでこんなしょうもない記事… …それがはりをきばクオリティ。 （ちなみに去年の大晦日に投稿した記事はこちら） 前置き考えるのも面倒なので本題。 知らない人があまりにも多過ぎるので記事にする。 Firefoxは、Shiftキーを押しながら右クリックすると強制的にコンテキストメニューを表示できる。 以下の画像で試してみるとわかる。 普通は右クリックが禁止されていて何も起きないが、 Firefoxに限り、Shiftを押しながら右クリックすると普通にメニューを呼び出せる。 これはFirefoxの独自機能ではなく、HTML5の仕様策定などをしているWHATWGによって定められている標準仕様だったりする。 User agents
Jeff Croft「web標準が成功しhtml名人は用済みになった」 - 以下斜め読んだ内容
jeffcroft.com 2014.1.3のブログエントリ 2014.2.13追記。結び（diversify or die）を誤解してた Web Standards Killed the HTML Star – JeffCroft.com 「html/cssが得意なだけでは飯が食えない」という周知の事実について 「名人」としての活動歴（書籍、登壇）のある人が現状について書いたエントリ 「あの名人はいま」風で面白く読んだ 以下斜め読んだ内容 2003年にJeffrey Zeldman「Designing With Web Standards」を出版した頃の話 html/cssかくあるべし、と議論されてた レイアウトはtable要素でなくcssで 画像置換のテクニック。これはアクセシビリティを守るため semanticなマークアップ - などなど カンファレンスも何度もあった。本を書いた人も
Internet Explorer 11におけるtitle属性 - Unreviewed
お断り：この記事はInternet Explorer Advent Calendar 2013、あるいはYet Another Internet Explorer Advent Calendar 2013のゲリラ投稿、ではありません。 Internet Explorer 9以降といえば、HTML5やCSS、SVGといったものへの対応が注目されがちですが、他のブラウザーが長い間対応してこなかった基礎的な部分への対応も進んでいます。この記事ではInternet Explorer 11（IE11）におけるtitle属性について書きます*1。 title属性 HTMLにはtitle属性という謎の属性があります。多くのブラウザーではtitle属性を設定した要素にマウスを重ねると値をツールチップとして表示します。しかし、ほとんどのブラウザーは、キーボードだけを使ってtitle属性を表示する方法をユーザ
全日本＜label＞要素マークアップ検定
Web入力フォームの縁の下の力持ち、Label要素をマスターするための検定試験です。 仲間内の勉強会で、ちょっと遊びすぎましたｗ
パスワードがmaxlengthを超えてもユーザーは気づかない | 水無月ばけらのえび日記
公開: 2013年3月11日11時25分頃 三菱UFJニコスから、「パスワードの入力桁数に関するご案内」というPDF文書が出ています。 パスワードの入力桁数に関するご案内 (www.cr.mufg.jp)「三菱UFJニコス」という名前の通り、複数の会社が合併し、サービスも統合されたわけですね。従来はログインフォームが別々で、パスワードの長さもまちまちだったものを、ひとつのログインフォームに統合……したところ、ログインできなくなる人が現れたという話のようで。 原因は以下のように説明されています。 ①リニューアル前のMUFGカード(UFJカード含む)、DCカード、NICOSカードのWEBサービスの(ID登録及び)ログインの際、パスワードは下記「パスワード規定桁数」を超えて入力することができませんでした。 ②リニューアル後のNEWS+PLUSログインページでは、弊社のどのブランドWEBサービスに
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
第2回アクセシビリティBAR『秋の文字サイズ変更ボタン祭り』に行ってきた - ただのにっき(2011-10-11)
■ 第2回アクセシビリティBAR『秋の文字サイズ変更ボタン祭り』に行ってきた 前回の『初夏のパンくず祭』に続き(ちゃんと続いたとは!)、今回は『文字サイズ変更ボタン』がテーマ。Webサイトの右上あたりにある「小中大」とか書いてあるボタンで、押すと文字サイズが変わるという、なんの役に立つのかよくわからんアレが題材である。 例によって飲み食いに忙しくしつつも、太田さんが力の入った(入りすぎた?)プレゼン資料を用意してきてくれたので、それをネタにして18人でしゃべりっぱなしの2.5時間。みなさん一家言あって面白い。 太田さんの事例調査によって、自治体や公共団体のサイトはともかく、企業サイトについている「文字サイズ変更ボタン」は本当に飾りにすぎないことがわかってなかなか面白かった。やはりこういう「肴」があると盛り上がる(笑)。JISが決めている「最低200%まで拡大」という基準を満たせてないばかり
拡大・縮小機能からみるブラウザの課題
拡大・縮小はレガシー機能？ JIS X 8341-3:2004 には、ブラウザの機能で文字の拡大・縮小ができるようにしたり、ユーザースタイルシートで変更できるようにすることを推奨しています。当時多く方が利用していた IE6 は、ピクセル指定の文字の拡大縮小が出来なかったこともあり、ブラウザの機能とは別に JavaScript で実現した文字サイズ UI が実装されてたのだと推測しています。もちろん、JIS規格が IE 中心で見ていたとは思っていませんが、ブラウザによって拡大・縮小の解釈が様々でした。その名残もあって今でも Web サイトに文字サイズ変更の UIが設置されている場合があります。 今は時代も変わりほとんどのブラウザがピクセル指定がしてあってもレイアウトも文字も拡大・縮小出来る機能を実装しています。こうした時代の変化を考慮して JIS X 8341-3:2010 では、文字に関す
Webページの見栄えにどこまでこだわるのか
その昔、「美しい人は美しく、そうでない人はそれなりに」という某フィルムメーカーのテレビコマーシャル（CM）が話題になった。このCMになぞらえて言うと、「高機能なWebブラウザでは見栄えよく、そうでないWebブラウザではそれなりに」というコンセプトが、Web制作者の間で注目されている。それが、Progressive Enhancementである。 非クロスブラウザを許容する Progressive Enhancement（PE）の基本的なコンセプトは、「情報やサービスへのアクセシビリティを確保しつつ、ブラウザやデバイスの特徴を活かしたデザインや技術を実装する」（アドビシステムズのthe Edge newsletter2009年2月より）ことである。後半の「ブラウザやデバイスの特徴を活かしたデザインや技術を実装する」は、例えば、HTML5やCSS3といった最新技術を実装しているWebブラウザ（
マウスポインタの形状に関する私見 | Accessible & Usable
公開日 : 2010年8月15日 (2014年10月5日 更新) カテゴリー : アクセシビリティ / ユーザーインターフェース (UI) 枝葉末節ではありますが、ウェブサイト閲覧中におけるマウスポインタの形状について、のお話です。 各ブラウザでは、リンク箇所ではない HTML テキストにマウスオーバーすると、マウスポインタの形状がI字型になります。一見問題なさそうですが、テキスト部分にマウスポインタが置かれている状態で、いざマウスポインタを探そうとしたとき、やや見つけにくいかな、という気がします。 たとえば Google の検索結果ページで、テキスト部分にマウスポインタが置かれている場合。I字型になったマウスポインタをすぐに見つけられるでしょうか？ そもそもなぜI字型なのか？ そもそも、HTML テキスト上でマウスポインタがI字型になるのはなぜなのでしょうか (テキストをドラッグ選択でき
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptをまじめに考えました+
インターンシップ：採用・インターンシップ：日立
FUJITSUサイト トップページ展示室 - 富士通