【HTML】aria-hiddenってなに？読み上げスキップ指定の書き方｜Web Work Plus
WEBページ制作で、とってもベンリなアイコンフォント。 検索窓のアイコンや、ちょっとしたアクセントに大活躍してくれますよね。 特に『Font Awesome』は無料で使えるありがたーいアイコンフォントなので、愛用している方も多いのではないでしょうか。 今回は、そんなベンリなアイコンフォントを使うとき、一緒に指定しておきたいHTMLタグ「aria-hidden」について、その効果や使い方をざっくりとまとめてみました。 「aria-hidden」の効果 HTMLタグである「aria-hidden」は、WEBページで音声読み上げを利用しているとき、アイコンフォントなどを「文字」として読み上げてしまうのを防止できるタグです。 「aria-hidden="true"」と指定することで、その部分だけ「読み上げをスキップ（読み上げない）」してくれます。 「ウェブページの音声読み上げ機能」は、目が不自由な
imgタグのwidthとheightを省略したらダメ！ 画像によるレイアウトシフトを回避する最近登場した2つの優れた解決方法
レイアウトシフトとは、Webページがロードされる時に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうことです。 このレイアウトシフトを回避するために10年以上もの間、アスペクト比を手動で適用する必要がありました。しかし、現在ではそんな馬鹿げたハックは必要ありません。最近登場した2つの優れた解決方法を紹介します。 Avoiding <img> layout shifts by Jake Archibald (@jaffathecake) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レイアウトシフトとは aspect-ratioプロパティによるレイアウトシフトの回避方法 widthとheightによるレイアウトシフトの回避方法 どちらの方法を使用すべきか レイアウトシフトとは デフォルトでは、<im
CSSのデフォルトとして記述しておくと便利、img要素に設定するスタイルのまとめ
最近ではモダンブラウザをターゲットにした場合、リセットCSS自体は必要ないかもしませんが、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 その中の一つとして、img要素に設定しておくと便利なスタイルを紹介します。 最近のリセットCSS、また設定しておきたスタイルや一部のブラウザ用に設定しておきたスタイルは、下記をご覧ください。 2023年、現在の環境に適したリセットCSSのまとめ img要素に設定しておきたスタイルは、こちら。 img { max-width: 100%; /* 1 */ height: auto; /* 1 */ vertical-align: middle; /* 2 */ font-style: italic; /* 3 */ background-repeat: no-repeat; /* 4 */ background-size:
Lighthouseのスコア改善で100点を目指した対策 | Web制作に関するブログ | 株式会社シロクロ
Web制作会社 シロクロ Web制作に関するブログLighthouseのスコア改善で100点を目指した対策 Lighthouseのスコア改善で100点を目指した対策 2020年6月17日 Lighthouseとは、Googleが提供しているChromeの拡張機能で、指定したURLのパフォーマンスに関する採点とレポートを生成してくれるツールです。スコアは一つの基準なので、高ければ良い、低ければ悪いとまでは思いませんが、パフォーマンス項目はページの読み込み速度に、アクセシビリティ項目は扱いやすさに影響しますので、ユーザーの操作・体感に関わる部分は対応しておくべきだと思います。 似たサービスのPageSpeed InsightsはPerformanceだけを分析してくれますが、LighthouseはPerformance、Accessibility、Best Practices、SEO、Prog
ReactでYouTube埋め込むとLighthouseスコア低下する問題の改善手法まとめ
YouTube埋め込みって、するだけでLighthouseスコアが低下して悲しい気持ちになりますよね。なので研究としてLighthouseスコアを低下させない対策を調べたり試しました。最終的に、特定のケースでのみ低下不可避という結論に至りました。 結論 YouTube埋め込みがファーストビューにあり、スマホ対応も必須な場合、Lighthouseスコアの低下は避けられない ※もし回避する方法を見つけている方がいれば教えてください 検証結果 以下のサイトとGitHub Repoに公開済みです。サイト内、コード内に説明は特に無いので本記事の内容と合わせて見ていただければと思います。 前提知識 YouTubeをiframeで埋め込んだだけで、Lighthouseのスコアは大幅に低下する Playerに関するJavaScriptがダウンロードされ、LCPに影響するため しかもファイル数も多く、1ファ
Accessible SVGs | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Scalable Vector Graphic (SVG) is emerging as the preferred graphic format to use on the web today. Are you abandoning the icon font or replacing old pg, gif and png graphics for the well-supported SVG, too? Let’s see how this will impact users of assistive technology (AT) and what is needed
Largest Contentful Paintとは─その仕組みと改善方法を解説
Largest Contentful Paintとは─その仕組みと改善方法を解説 ウェブサイトでのLargest Contentful Paintの改善方法についてお悩みではありませんか？あるいは、Largest Contentful Paintが何を意味するのか、そもそもなぜそれを気にする必要があるのかがわからないでしょうか。 この記事を読めば、Largest Contentful Paintについて知っておくべき基本がすべてわかります。 Largest Contentful Paintの意味、重要性、測定方法、改善方法などを扱います。 以下の目次から、知識レベルに応じて特定のセクションにジャンプしていただいてかまいません。また、最初から全て読み進めることもできます。 LCP/Largest Contentful Paintとは Largest Contentful Paintは、ウェブ
WordPressでcanonicalを設定する方法・注意点｜タグを使うべきケース
WordPressで構築したWebサイトを設定する中で、「canonical（カノニカル）」という用語を知ったものの、必要性や使い方がわからない方も多いのではないでしょうか。canonicalはSEO対策において重要な設定の1つで、Webサイトの検索順位に影響を与えるため、正しく理解することが大切です。 当記事では、WordPressにおけるcanonicalの概要や、canonicalを設定するべき4つのケース、具体的な設定方法について解説します。SEOに強いWebサイトを構築したい方や、Webサイト運営を担当している方はぜひ参考にしてください。 canonicalは「標準的な」という意味を持つ言葉です。Webサイトのソースコードに使用されるcanonicalタグは、内容が似ている複数のページについて主要なページを示す機能があります。 Webサイト内に内容が似ている複数のページがあると、
アクセシビリティとSEO共通の最適化――「文字サイズと色コントラスト」「リンクとアンカーテキスト」 | Moz - SEOとインバウンドマーケティングの実践情報
この記事は、前後編の2回に分けてお届けしている。「隠しテキスト」「キーワードの詰め込み」について紹介した前回に引き続き、今回は「テキストのサイズと色のコントラスト」「リンクとアンカーテキスト」について見ていこう。 →まず前編を読んでおく テキストのサイズと色のコントラストページを美しく見せたいという目的のためだけに、フォントのサイズが小さく低コントラストのテキストが使われることが、よくある。 SEO担当者も、他のコンテンツに影響を与えずにキーワードを追加しようと、低コントラストでフォントサイズを小さくしたテキストを使うことがある。 ちなみに、ここで詳しく取り上げる話ではないが、検索エンジンはフォントのサイズと色を考慮できる。検索エンジンはこちらの考えていることなどお見通しなのだ。 だが、サイズやコントラストはSEOに留まらない問題を引き起こす可能性がある。色覚異常や色覚に問題がある人は、一
クローキング、不正な JavaScript リダイレクト、誘導ページ - ウェブマスター ツール ヘルプ
フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Google ウェブ検索のスパムに関するポリシー Google のスパムに関するポリシーは、ユーザーを保護し、検索結果の品質を高めることを目的としています。Google ウェブ検索の検索結果（Google がウェブ全体から検出したウェブページ、画像、動画、ニュース コンテンツなどのコンテンツ）に表示されるようにするには、Google 検索の全体的なポリシー、またはこのページに記載されているスパムに関するポリシーに準拠している必要があります。これらのポリシーは、Google 独自のプロパティに表示されるものも含め、すべてのウェブ検索結果に適用されます。 Google では、自動システムと、必要に応じて行われる人間による審査によって、ポリシーに違反しているコンテンツおよび動作の両方を検出して
WebAIM: CSS in Action - Invisible Content Just for Screen Reader Users
CSS in Action Invisible Content Just for Screen Reader Users You are here: Home > Articles > CSS in Action: Invisible Content Just for Screen Reader Users Introduction There are occasional instances where content should be made available to screen reader users but hidden from sighted users. In the vast majority cases, content that is available visually should be available to screen reader users, a
「Google検索は死んでいる」がバズったので「まとも検索」を作った。：村上福之の「ネットとケータイと俺様」：オルタナティブ・ブログ
「Google検索は死んでいる」がバズったので「まとも検索」を作った。 今のGoogle検索の結果は広告とSEOだらけだ。 まとめサイトも広告も出ません。 まとも検索は色々オプションをつけてGoogle検索にリダイレクトしますが真面目な検索結果しかでません。スマホでは検索オプションが面倒くさすぎるのでデフォルトでつけてます。 仮想通貨が買いたくなくなる 「まとも検索」で「仮想通貨」で検索すると、ビットフライヤーでもコインチェックでもなく消費者庁のこのページが出てくる。まともですね。 ダイエットもしたくなくなる。 まとも検索で「ダイエット」で検索すると、ダイエット食品のアフィカス記事だらけ...にはならない。厚労省のページがトップでヒットしダイエットのネガティブ情報ばかり出てくる。 「極端な摂取制限は、リバウンドの恐れがあるだけでなく健康に害を及ぼす。」「若い女性の[やせ]や無理なダイエット
【重要】コアウェブバイタルとは? LCP/FID/CLSをわかりやすく解説【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ
ウェブにおけるユーザー体験の向上を目的とした取り組みをグーグルが始めた。「Web Vitals（ウェブ バイタル）」と名付けている。 「バイタル」とは「重要なもの・本質的なもの」という意味で、ウェブ バイタルは「ユーザー体験を良くしていくのに必須の指標に関する総合的なアドバイス情報」として提供していく。 そのウェブ バイタルのなかでも特に重要なものとして、次の 3つの指標を「Core Web Vitals（コア ウェブ バイタル）」として設定している（具体的な基準となる数値は後述する）。 LCP（Largest Contentful Paint） 「最大コンテンツの描画」の意味で、ユーザーの認識としてのページ表示速度を測る指標。 ブラウザの表示範囲内で、最も大きなコンテンツ（画像・動画の初期表示画像・背景画像のある要素・テキストを含むブロックレベル要素など、そのページでメインとなるコンテン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コアウェブバイタル（Core Web Vitals）とは？3つの指標LCP・FID（INP）・CLSや計測ツール、改善方法を解説