アクセシビリティーに考慮するHTMLコーディング - WAI-ARIAでスクリーンリーダーの読み上げがこう変わる - ICS MEDIA
ナビゲーションリスト ナビゲーションリストは、主にメニューやリンクの一覧を整理して表示するためのUI要素です。自分が今どのページを訪れているのかを示すことによって、ユーザーはウェブサイトの構造や階層を理解しやすくなります。 ▼ 実装例（一部抜粋） <li><a href="#">CSS</a></li> <li><a href="#" aria-current="page">JavaScript</a></li> <li><a href="#">その他</a></li> ▼ スクリーンリーダー（VoiceOver） aria-current="page"を指定した要素は「現在のページ、リンク、JavaScript」と読み上げられます。また、リンクが一度でもクリックされていたら、「閲覧済み」という音声が追加されます。 ▼ スクリーンリーダー（ナレーター） 「リンク、JavaScript」と読
CSSを活用してHTMLのセマンティックエラーを指摘する方法 - ICS MEDIA
CSSはWebページの見た目を整えるものですが、ちょっと違う使い方もできます。たとえば、予期せぬ横スクロールが発生した時、以下のようにすることで全ての要素のアウトラインが表示され、不用意にはみ出している部分が視覚的に分かりやすくなります。 * { outline: 2px solid red; } これを応用してタグの不適切な利用部分をハイライトできます。 このような不適切なタグ利用を検知して警告する「デバッグCSS」を作ってみました。このようなCSSをLintのようにする使い方は#lintHTMLwithCSSのハッシュタグで海外でも考案されています。仕様上許可されないものは赤色で点滅、ダメではないが、やらない方がベターなものは黄色で点滅するようになっています。 当記事では下記のデモを見ながらだと理解を深めやすいので、合わせて読むことをオススメします。 サンプルを別ウィンドウで開く コー
IE11のサポートを切ると使えるようになるCSSとか一覧 - Qiita
Windows7のサポートが終了し、今後は動作対象にIE11を含めないことも増えるでしょう。 IEをサポートしないことにより、使えるようになるHTMLとCSSをまとめました。 JavaScriptはきりがないので調べてません。 Can I Useをもとにまとめています。 分かりやすいように簡単な説明をつけています。厳密に正しい説明ではありません。 『使いやすさ』は利用頻度が高そうなものを勝手にレベル付しています。 この記事は2020年3月に作成したのものです。 HTML rel=“noopener" リンク元の文書へアクセスできないようにすることをブラウザーに指示します。 これを指定しないと、target=”_blank”利用時にJavaScriptで元のページにアクセス出来てしまうので脆弱性に繋がります。
nofollow属性を順守するのはやめるとGoogleが発表、新たに2つのリンク属性も登場
by Charles 広告やスポンサーコンテンツを検索結果に影響させないようにするためや、リンク先へのページ評価の受け渡しを無効化するためのnofollow属性が進化するとGoogleが発表しました。新たに「sponsored」「ugc」という2つのリンク属性も発表されています。 Official Google Webmaster Central Blog: Evolving “nofollow” – new ways to identify the nature of links https://webmasters.googleblog.com/2019/09/evolving-nofollow-new-ways-to-identify.html nofollow属性は、もともとスパムに対抗する手段であり、信頼できないサイトへのリンクに対してnofollowを設定することで検索エンジン
HP概要資料に使える！Googleアナリティクスでわかるユーザーの属性 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。ディレクターのなっちゃんです。 本日よりWebディレクター＆アドマスターきょうへいの新連載「”とりあえず入れてるだけ”になってない？ 解析ツールGoogleアナリティクスを活用しよう」が始まります。 この連載は「Googleアナリティクス入れたけど正直使いこなせていないなあ……」と悩んでいる人たちのGoogleアナリティクス Lifeがちょっぴりgoodになるような連載を目指します。流れとしては、Googleアナリティクスの左カラムのメニュー項目ごとにLIGブログのアクセスを見ながら数字の見方や資料への活用例、事例などをご紹介していきます。 第1回目は「ユーザー」についてです。「集客」「行動」に関しては、本連載の第2回、3回で紹介していきますのでお楽しみに。 きっと中には「データ解析」と聞いただけで構えてしまう人も多いかと思いますが、数字の見方さえ分かると説得性の高いHPの概要
Google+ ウィジェットの JavaScript コードに async / defer 属性がついた件
Google+ プラットフォームで配布されている、「+1 ボタン」 や、「バッジ」 などの JavaScript コードすべてに、async / defer 属性が付与されるようになりました。 Google+ プラットフォームで配布されている、「+1 ボタン」 や、「バッジ」 などを Web サイトに設置する際に使用される JavaScript のソースコードがありますが、これらソースコードに、script 要素の async / defer 属性が付与されるようになりました。 Googleの Ilya Grigorik 氏が自身の Google+ に投稿しているほか、実際のソースコードにもすでに反映されています。 All Google+ widgets have been updated to use the script[async + defer] pattern!... ： Ily
Firefox の srcset 属性実装は sizes 属性を省略すると正常に動作しないらしい
1つ前の記事で picture 要素 や srcset 属性に関して書いた課程で知ったんですが、Firefox （テストしたのは Firefox Nightly 34.0a1） の srcset 属性実装に関して、sizes 属性を省略したときに正しく動作しない問題があるようです。Bugzilla@Mozilla に報告されていました。 1052417 - Default `sizes` attribute value for `srcset` should be 100vw ： Bugzilla@Mozilla srcset 属性の実装状況 srcset 属性は、近々正式リリースされる、Firefox 32 で試験的に実装されていますが、今回テストしたのは Firefox Nightly （34.0a1） です。まだ試験的な実装のため、dom.image.srcset.enabled お
HTML5 Image Description Extension （longdesc 属性） が W3C 勧告候補に
画像に対する長文の説明へのリンクを提供する属性、longdesc 属性に関する HTML5 拡張仕様、「HTML5 Image Description Extension」 が、勧告候補として公開されました。 HTML5 拡張仕様として策定が進んでいる、「HTML5 Image Description Extension」 が、勧告候補 （Candidate Recommendation / CR） として公開されました。 HTML5 Image Description Extension は、画像に対する、（alt 属性だけでは難しいレベルの） 長文の説明へのリンクを提供する属性、longdesc 属性の仕様を策定するものです。longdesc 属性自体は HTML 4.01 の時代から存在していたものの、HTML5 の仕様には含まれなかったのですが、アクセシビリティ上の理由から必要性が
HTML5 で追加された属性の中からマイナーっぽいのを紹介してみる
HTML5 から追加された属性の中から、まだあまり広く使われてなさそうな属性さんたちに日の目を見て頂くための紹介記事を書いてみようかと思います。 この記事は、HTML5 Advent Calendar 2013、11日目の記事です。 去年の HTML5 Advent Calendar 2012 では、Microdata 関連の記事を書いたんですが、今年も登録してみたものの、見事にネタが無いのでどうしようかなと...... ということで、HTML5 から追加された属性 （要素じゃなく属性の方） の中から、まだあまり広く使われてなさそうな属性さんたちに日の目を見て頂くための紹介記事を書いてみようかと思います。 ちなみに、「あまり広く使われていなさそうな」 は完全に私の独断と偏見ですのでよろしくお願いします。 placeholder 属性 最初なのであまりマイナーっぽくないやつから。その名の通り
jQueryでチェックボックスの状態をうまく取れない、設定出来ないときは、attr()ではなくprop()を使ってね。（JavaScriptおれおれAdvent Calendar 2013 – 02日目） | Ginpen.com
JavaScriptおれおれAdvent Calendar 2013 – 02日目 チェック状態は$checkbox.attr('checked')ではなく$checkbox.prop('checked')で得る必要があります。 検証 初期状態で確認すると c1: attr=undefined prop=false c2: attr=checked prop=true チェックを入れ替えて確認すると c1: attr=undefined prop=true c2: attr=checked prop=false というわけで .attr() … 変わらない .prop() … 変わる（こっちを使う） 仕組み .attr()はattribute、つまり（HTMLの）属性を得るメソッドです。HTMLにのタグにchecked属性を記載したらその値checkedが得られます。していなければ、存在し
WordPressの固定ページにフォームを設置する際の落とし穴 - リスティング広告運用代行｜カルテットコミュニケーションズ
WordPressで作成したブログやサイトに自分で設置したメールフォームで、フォームを送信しようとすると何故か404エラーになったという経験はありませんか？ よくあるケース この現象、多くの場合原因はフォーム項目のname属性に”name”という名前を使っていることです。 例えば、下記は一般的な問い合わせフォームの「お名前」入力欄です。 [html] <th>お名前</th> <td><input type=”text” name=”name” value=”” /></td> [/html] このフォームのsubmitボタンをクリックすると、おそらく404エラーになるでしょう。 この場合、name=”full_name” などのように、変数名を変えてあげれば問題なく動作するようになります。 原因 どうやらこの現象は、WordPressのフレームワークで予約されているパラメータ変数名を使っ
HTMLにおけるimg要素のalt属性
HTML Standardの4.8.1.1 Requirements for providing text to act as an alternative for imagesをざっと把握できるように日本語で箇条書きにしただけのものです。最終的には原文をしっかりと読むべきでしょう。 基本 必ず定義されるべきである その値は空であってはならない その画像に代わりになる最適な文字列である ページ上の全ての画像をそのalt属性の値で置き換えてもページの意味合いが変わってはならない 画像のキャプションや題名、銘とみなされるような補助的な説明を意味するものであってはならない 前後で解説されている情報の繰り返しであってはならない 画像以外に何も含まれていないリンクやボタンで使われる場合 リンクやボタンの目的を明確に伝える文字列を指定する わかりやすく説明するために文章ではなく画像のチャートやグラフを
【WordPressで文字列を出力する際のエスケープ「esc_html」「esc_attr」の違いについて】｜今村だけがよくわかるブログ
変数に格納された値を出力することはよくあると思いますが、エスケープについては、ちゃんと意識しないといけないですよね。それで、WordPressでよく使う、 esc_htmlesc_attrこれについて、はっきりとした使い分けがあるのでメモしました。お時間がありましたら、ご覧くださいませ。 「esc_html」とはCodex英語版のみ見つかりましたので、引用いたします。Function Reference/esc html Escaping for HTML blocks. ・・・もう少し説明が欲しいところではあります。 「esc_html」の使い方サンプルはこうです。 <?php esc_html( $text ) ?>「esc_attr」とはこちらもCodex英語版から。Function Reference/esc attr Encodes < > & ” ‘ (less than, g
iframeのseamless属性を試してみた
「WordPressで学ぶPHP(1)変数・制御構造編」が発売されました。 「WordPressで学ぶPHP」シリーズの第1巻で、WordPressを通してPHPを学んでいく本です。 この本では、PHPの基本となる変数と制御構造について解説します。 Kindle本で、定価500円です。 以前に、当ブログで「iframe要素のseamless属性」という記事を書きました。 seamless属性の仕様を見た限りでは、Ajaxで要素のinnerHTMLを書き換えるのと同じように、Webページの中に他のファイルからHTMLを流し込むようなイメージになるように読めたので、ぜひ使ってみたいと思っていました。 しかし、その当時は、まだseamless属性に対応したWebブラウザはありませんでした。 久々にseamless属性のことを思い出して、最近はどうなっているか調べてみました。 すると、Webkit
:before, :after擬似要素 の使い方を基本からマスターするためのチュートリアル | コリス
擬似要素はCSS1から存在するもので、ここで解説する「:before, :after擬似要素」はCSS2.1でリリースされたものです。 CSS1では「:first-letter, :first-line」です。 擬似クラス、擬似要素 擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。 コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3ではコロンを二つにした「::before, ::after」などがあります。 サポートブラウザブラウザ 「:before, :after擬似要素」をサポートするブラウザは下記の通りです。 IE8+ Firefox3.5+ Chrome Safari4+ Opera6+ IE8+とすべてのモダンブラウザと言ってよいでしょう。 非サポートブラウザへの対応 IE7にも「:before, :after擬似要素」を利
iframe 要素の seamless 属性を試してみた
WebKit Nightly Buildsが iframe 要素に追加された seamless 属性に対応したとのことなので、早速どんな感じになるのか確認してみました。 Last week in WebKit: Inspector's sources panel and private names ： Surfin' Safari Add seamless layout code (and pass most of the remaining seamless tests) ： Changeset 118291 WebKit 現在公開されている WebKit Nightly Builds の最新版、及び Google Chrome も、開発者向けビルド （Dev channel） の最新版 「21.0.1155.2」 で動作しているのが確認できました。インストール済みの方は下記にデモページ
jQuery Mobileを触りながら覚えよう！ [Japanese Version Only] - jsdo.it - Share JavaScript, HTML5 and CSS
サンプルを用意しました！フォークしてjQuery Mobileを体験してみよう！ スマートフォンサイトをプレビューするには、エディタ画面の「Smart Phone Preview」ボタンをクリックしてください。 こんなことを試してみるとオススメ！ aタグに data-transition 属性を付加するとトランジションのエフェクトを選ぶことができます。 Footer要素を画面下に固定することができます。data-position="fixed" フォーム周りの要素もjQuery Mobileで表示できます！ そもそもjQuery Mobileってなんだっけ？ jQuery Mobileはモバイルサイト構築のためのフレームワークです。 スマートフォンサイトやWebアプリを作成する際に利用します。 非常に手軽に利用でき、少し勉強するだけでそれなりのものが作れてしまうんですよ！ ということで、j
[Wordpress] サムネイル（アイキャッチ）画像の設定いろいろ | nm705.com
サムネイルを表示させる方法は比較的簡単に見つかったのですが、 alt や title が画像名になってしまい、不恰好だったので、調べてみました。 まず、サムネイルの表示方法から説明します。 1.サムネイルを表示させる サムネイルとは、上記画像のように、 画像挿入の時に「アイキャッチ画像として使用」をクリックした時に表示される画像です。 上記サイトに詳しく書いてあるのですが、初心者の私が試したところ、 function.php で設定したとおりにならなかったので、別の方法でサイズ指定しています。 とりあえず、function.php に、 add_theme_support( 'post-thumbnails' ); と記載するところまでは、同じです。 （記載箇所はfunction.phpの一番最後でいいと思います。） 次に、set_post_thumbnail_size( 50,
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://petitec.com/2012/06/wordpress%E3%81%A7%E5%89%8D%E5%BE%8C%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%B8%E3%81%AE%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%92%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%81%99%E3%82%8B/
seotemplate.biz