公開日 : 2014年8月28日 (2018年1月20日 更新) カテゴリー : アクセシビリティ ウェブデザインにおいて、アイコンを配置することは多いと思います。最近では、画像アイコン (.gif、jpg、.png など) ではなく、Font Awesome のようなアイコンフォントを用いるケースも増えてきました。 「アイコンフォント」の例 (Font Awesome) アイコンフォントには、画像アイコンよりも読み込みが速い、ベクターデータゆえに高解像度の画面でもきれいに表示できる (ピンチ＆ズームしてもジャギーにならない)、手軽に実装できる (わざわざアイコンを作る必要がなく、豊富なアイコンから選択して所定のコードを埋め込むだけ)、といったメリットがあります。このように、とても便利なアイコンフォントですが、ウェブアクセシビリティの観点で考えると、実装において若干の工夫が必要です。 代替

目次 はじめに HTMLレンダリング HTMLレンダリング ：ブラウザでHTMLを受け取り画面表示 HTMLレンダリング ：JavaScriptでレンダリングして画面表示 HTMLレンダリング ：WEBページの初期表示の各段階 サーバーサイド側の処理 サーバーサイド側：Node.jsという実行環境＆開発環境 クライアントサイトレンダリング クライアントサイトレンダリング：リアルDOMと仮想DOM サーバーサイドレンダリング おまけ：参考にしたリンクなど はじめに Web開発で「フロントエンドはモダンな感じでやりましょう。jQueryではなしに。」ということになったのですが、その時の僕は「モダンな感じ」なるものが示す「最新の技術動向」に疎くて話についていけませんでした、。 反省し、WEBフロントエンドとサーバーサイドあたりの技術動向のアウトラインをざっくりと整理してみることにしました。 よく

AMP（Accelerated Mobile Pages＝アンプ）とは、2016年2月にGoogleが導入した、モバイル端末（スマートフォン・タブレット）でのウェブページの表示を高速化するためのプロジェクトです。AMP対応のウェブページは従来に比べ平均4倍程の速度で表示できるため、さまざまなメリットがあります。 本記事ではAMP導入のメリットと作り方を紹介します。AMP対応することによってアクセス数が増大した話もありますので、記事のシリーズで紹介します。 導入の利点① ページ表示が超高速になる モバイルブラウザで、AMPページにアクセスしたときにものすごいスピードでウェブページが表示されます。読み込み待ちのイライラがなくなるため、ユーザーストレスの軽減につながります。 導入の利点② 検索結果でAMP（稲妻マーク）が表示される モバイルでのGoogle検索で、AMP対応のウェブページは稲妻マ

エンジニア不足と言われて久しいですが、できる経験者を採用するのはますます難しくなっていますね。 そんななか、弊社ではひょんな縁からエンジニア未経験の新人をエンジニアとして採用することになりました。未経験とはいえ、弱小企業の弊社には悠長に育てている余裕がないため、7日間で現場投入を目指してカリキュラムを組みました。 だいたいうまくいったので、メモがわりに晒しておきます。 前提条件 誰でも7日間でエンジニアになれると言っているわけではありません。あくまで一例として捉えていただければ幸いです。 担当してもらう予定の領域 HTML/CSS コーディング JavaScript はそこそこで（動きのエフェクトやカルーセルを仕込める程度） concrete5 テーマの開発（PHPファイルに foreach を入れていくイメージ、WordPress と変わらない） 流石にアプリケーション開発で7日間は無理

主にユーザー側の視点から語られることが多いアクセシビリティですが、制作という側からはどのように捉えることができるのでしょうか。2つの切り口から考えてみます。 # アクセシビリティという文脈において、何のためにHTMLを書くかという話になると マシンリーダビリティのため スクリーンリーダーのアクセシビリティのため というように、ユーザーが利用するため、というところにフォーカスした語られ方が多いように感じています もちろんユーザーのために作るというのは正しいのですが、今回はあえて視点を変えて、制作者自身の作るというところに視点を合わせて話してみたいと思っています 僕がどういうものなのかというと、 # 参照: 全部入りHTML太郎(@_yuheiy)さん | Twitter ツイッターでは「全部入りHTML太郎」という名前でやっています # 参照: シフトブレイン／スタンダードデザインユニット

今年、携わった案件のほとんどがレスポンシブWebデザインでした。 今更ですが、私がレスポンシブWebデザインのコーディングでやっていることや気を付けていることを整理してみたいと思います。 User Agent Style Sheetの対応 ブラウザのデフォルトで設定されているスタイルシートの差異を埋めるCSSは「Normalize.css」をよく使います。 デザインによっては、Eric Meyer’s的なRest CSSの方がやりやすい場合もあるので、そこは見た目に臨機応変に対応してます。 CSS Flexible Box 私が受け持つ案件では、最新ブラウザ、及びInternet Explorer 11（IE11）のみの対応が増えたため、近年では、Flexible Boxをカジュアルに使用できるようになりました。 個人的には、広い画面では横並びだったものを、displayプロパティを変更す

Home > Others > 構造化データをまとめてみた(JSON-LD + schema.org) 構造化データをまとめてみた(JSON-LD + schema.org) 構造化データ書くとき、毎回調べて記述してるので、いい加減まとめようと思ってまとめました。 間違ってるぞバカヤローとか、こうの方がいいでとか、何でもご意見あれば喜びます。 書いた後はSchema Markup Validatorかリッチリザルトテストツールでチェックしてくださいね。 ちなみにheadタグの一番下とかに書いていただければ。（bodyの閉じタグの上とかでもいいです） 日付の書き方は、2018-06-27な感じです。 求人情報を追加しました websiteってやつ（トップページかな） トップページにはこれを書けばいいんじゃないでしょうか？ ローカルビジネスとかはローカルビジネスでいいのかな コード <scri

ウェブページの表示速度は、離脱率やコンバージョン率にもっとも影響する重要なポイントです。Googleが公表した調査結果では、「表示に3秒以上かかると、約53%のユーザーは離脱する」「表示速度が1秒から6秒に落ちると、直帰率は106%上昇する」というデータが出ているようです。 表示速度を改善する施策は色々とありますが、本記事では「AMPアンプ（Accelerated Mobile Pages）」を作成する際に利用するJavaScriptライブラリーを使って、簡単に表示速度を改善する手法を紹介します。 AMPとはウェブページの読み込みを高速化させる技術 「AMPアンプ（Accelerated Mobile Pages）」とは、名前の通りモバイルでのウェブページの読み込みを高速化させる技術です。 本サイト（ICS MEDIA）では以前「AMPの利点と対応HTMLの作り方」で導入方法を紹介していま

iPhone7（iOS 10.3.2）でTwitterの公式ウィジェットを貼り付けたサイトを確認したところ、iframeが親要素の幅を超えてはみ出す事象に出くわしました。 iPod touch 5th（iOS 10.3.2）では発生しないという不思議な現象・・ ググると同様の報告がいくつかあり、おそらくiOS特有のバグとのこと。 おそらくそうでしょうし、safariのバージョンやら何やら調べたところで崩れた原因の特定に至ることはなさそうと判断し、修正方法を模索することにしました。 同様の報告のあるサイトの情報によると、iframe に width:100%; を指定すると崩れる（拡がる）とのことで、確かにiframeのstyleにその記述が出力されている・・（公式ウィジェットが出力するソース）。 他の方の解決方法は、メディアクエリーで固定幅にしてしまう、というものでしたが、レイアウトの都合

2017年10月19日 Webコンテンツの推奨実装方法集「WAI-ARIA Authoring Practices 1.1」 UI開発者 宇賀 Webサイトに登場するUIの中には、HTMLに予め用意されている要素だけでは対応しきれないものが少なからず存在します。 たとえば、ユーザーが閲覧しているページがサイト内のどの位置に当たるかを示すパンくずリストなどは、それ自体を表すための要素は存在していないことから、人によって異なるマークアップで実装されています。 JavaScriptウィジェットも同様に、モーダルウィンドウやカルーセル、タブUIなどを表すための要素が仕様に定義されていません。それらをセマンティック且つアクセシブルに制作するためには、WAI-ARIAの知識や複雑なキーボード操作を自力で実装する時間が必要です。 元々HTMLの仕様では想定されていなかったコンテンツに限らず、制作するコン

こんにちは！2017年1月25日（水）にAccSellメール・マガジン第106号を発行しました！ ［連載］植木 真の「こんなブログ記事見つけました！」 第57回: Using the aria-current attribute！ ［寄稿］技術の進化によって広がる選択肢をどう活かすか 伊敷 政英 ［連載］植木 真の「こんなブログ記事見つけました！」 第57回: Using the aria-current attribute！ aria-current属性、コレいいかもしんない！ このメルマガの読者の皆さんなら「WAI-ARIA」のことは既にご存知のことでしょう。そして、実際の案件で aria-*属性やrole属性を使っていることもあるのではないでしょうか。 ワタクシも「WAI-ARIA」を何らかの形で使うことが、ここ最近かなり増えてきました。今年は「WAI-ARIA」の実装がますます進ん

2017年12月4日 著 みるく姐さん@milk54さんが、Web Accessibility Advent Calendar 2017の2日目のために、Re: A Responsive Accessible Tableという記事を書いてくださいました。その中で、A11YJ Slackの#q_and_aチャンネルにおける自分の発言を引用してくださったのですけど、それでふと思ったのがアクセシビリティオブジェクトの存在って実はあまり認知されていないかもしれない、ということです。別の表現をするなら、CSSをどう書こうともマークアップで意図したセマンティクスが変わることは無いと信じて疑わない人が少なく無いかもしれない、ということ（自分もかつてはその一人でした）。 @milk54さんの立てた「NVDAがなぜCSSでdisplay: blockにすると「テーブル」と読み上げないか？」という問いの裏には

HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで

2017年11月17日の「まぼろしのマークアップ勉強会 #1」でお話したスライドです #mbrs_markup_study

Webアプリのアクセシビリティを追求せよ！「インクルーシブ」なマークアップを議論しながら学んでみた 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、freeeの伊原力也さんと、ビジネス・アーキテクツの太田良典さんです。 お二人のセッション「多様なユーザーニーズに応えるフロントエンドデザインパターン〜書籍「インクルーシブ HTML + CSS & JavaScript」より」に関するスライド資料は、こちらで公開されています。 「インクルーシブ」に込

HTML5 の説明でよくでてくるのがセマンティクスの強化。 ここでひとつの疑問が浮かぶ。「はて、セマンティクスとはなんじゃろうか?」 これをひとに聞かれた時、案外言葉に詰まるので、ここはひとつ、セマンティクスとはなにかを簡単に説明する方法を考えてみる。 セマンティクスの意味 セマンティック HTML を考える前に、そもそもセマンティクスとはどういうものなのか。 セマンティクスとは言語学の領域のひとつで、日本語にすると意味論になる。 意味論はざっくり言うと言葉と意味の関係を扱う。 例えば食事中に「そこの醤油差しとって」と言われたとする。そしてその醤油差しが仮に空だったとする。 これを意味論的に解釈すると、醤油差しが欲しいという要求に応えるために空の醤油差しをとって相手に渡すことになる。 もうひとつの領域である語用論で「そこの醤油差しとって」を解釈すると、醤油差しが欲しいのは食べ物に醤油をかけ

来週遅めの夏休みをいただき、東北へ旅行の予定を立てている kouraku です。おはこんばんちは。 さて今回は、とある案件でアクセシビリティ：AA レベルのサイト制作を行ったとき、専門の方から色々と指摘をいただいて、その対応に苦労したり、そんなことしないといけないのか！と思った内容のいくつかを忘れないようにメモしておこうと思います。 ・・・とその前に、アクセシビリティって何？ 「アクセシビリティ」の意味と混同しがちな言葉が「ユーザビリティ」です。ユーザビリティとは、W3Cでは次の内容で定義されています。 Extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specifie

昔「◯◯な動画100選」っていう記事を開いたら1ページにYoutubeが100個掲載されていて、 パソコンが爆発した事があったので、これ以上被害者を増やさない為に紹介をします。 動作 iframeタグを見つけたら全てその動画のサムネイル(img)に置換する。 サムネイルをクリックすると、その動画のiframeが呼び出されてimgがiframeに置換される。 コード $(function (){ var movies = []; var images = []; //全てのiframeタグに対して処理を実行する。 $('iframe').each(function(index, element) { //iframeの中のsrc(埋め込みタグのURL)を取得。 var movie_src = $(this).attr('src'); //取得したURLはmovies配列に格納。 movies