WAI-ARIA の基本 - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — ウェブの構造化HTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化マルチメディアと埋め込みマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML 表HTML 表HTML の表の基本HTML 表の高度な機能とア
Accessible Rich Internet Applications (WAI-ARIA) 1.0 (W3C Recommendation 20 March 2014)
Accessible Rich Internet Applications (WAI-ARIA) 1.2 W3C Recommendation 06 June 2023 More details about this document This version: https://www.w3.org/TR/2023/REC-wai-aria-1.2-20230606/ Latest published version: https://www.w3.org/TR/wai-aria-1.2/ Latest editor's draft:https://w3c.github.io/aria/ History: https://www.w3.org/standards/history/wai-aria-1.2 Commit history Implementation report: https
WAI-ARIA(ウェイ エリア)とは？初めて制作する方向けに解説！ | 東京のホームページ制作 / WEB制作会社 BRISK
アクセシビリティとは可能な限りの多くの人々が利用できるようにする状態のことを指します。 ウェブサイトで言えばスクリーンリーダーを利用している人や、モバイルデバイスで見る人、キーボード操作のみ行う方などすべての人が利用できるような状態です。 例えば、ハンバーガーメニューで「≡」のアイコンデザインをよく見かけませんか？あのアイコンにtabキーで移動でき、キーボード操作だけでメニューの開閉ができるサイトはアクセシビリティを意識しているのだなと思います。 首相官邸ホームページを見てみるとtabキーでメニューを移動できます。また画像の黄色い線で引いたところは、WAI-ARIAを使用していました。 アクセシビリティを高めて、多くの人に情報を届けようとしているなあと思いました。 首相官邸ホームページ アクセシビリティの向上には、HTMLの適切タグを使用したマークアップやWAI-ARIAの手法が挙げられま
今日から始める負担にならないWAI-ARIA - Qiita
WAI-ARIAとはなにか 「Web Accessibility Initiative - Accessible Rich Internet Applications」 の略で、 「ウェイ・アリア」 と読みます。 WAI-ARIAをつかえば、HTMLだけでは不足している セマンティクス（意味） を属性で補完することができ、 支援技術（スクリーンリーダーなど）を通じて、障害をもつ人に対し適切な情報を伝えられる ようになります。 WAI-ARIAの注意点 あくまでも 「必要な場合のみ使用する」 技術です。 HTML5タグのセマンティクスで解決できるのであれば、 HTMLで対応するのが基本 です。 WAI-ARIAのつかいかた 決められた 「属性」 をHTMLタグに追記して使用します。 以下、すぐにでも導入が可能で効果が期待できそうな項目を挙げてみました。 （その他、詳細については参考サイトをご
キーボード操作を意識したHTML/CSSコーディング
この記事は 「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。 アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作ることは訪れてくださるユーザーの方々だけでなく、クライアントにとってもユーザーの機会損失を防ぐことができるので多大なるメリットがあります。（よくコードが適当でもデザインが見えていれば良いって意見を聞くけれどそんなことはない） ただ、アクセシビリティを意識したHTML/CSSコーディングについてのまとめだと内容量が非常に多くなりZennなら記事より本で出したほうがベターになってしまうので、今回は数あるアクセシビリティの視点から「キーボード操作で
ここをクリック - Wikipedia
「ここをクリック」（Click here）とは、ウェブページ上で、ハイパーリンクのリンクテキスト（アンカーテキスト）として、あるいはハイパーリンクとして使われる画像中によく現れる動詞句である。 多くのウェブ製作者が、閲覧者を自分たちのサイトの別の部分や他のウェブ上のどこかに誘導するために、この直観的な「ここをクリック」「○○についてはこちら」などのリンクテキストを使っている。これは紙媒体での「ここをチェック」と同じものである。 いずれにしても、指示語・代名詞または歪曲表現を用いて直接的な表現を避ける傾向を示している点が共通している。 ウェブデザインの権威らは長らくこの用語を批判しており、多くの人はこの言葉を勉強不足なウェブデザイナーの目印とみなしている。これらの批判は、アクセシビリティやデバイスへの依存性、情報の欠如、印刷上の不合理、記述の余分さ、検索インデックス、荒らしでの悪用などを根拠
MDN Web Docs
Resources for Developers, by DevelopersDocumenting web technologies, including CSS, HTML, and JavaScript, since 2005. //////////// //////////// //////////// //////////// //////////// //////////// //////////// ++++++ ++++++ ++++++ ++++++ ++++++ ++++++ ++++++{{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} ../../ ../../ ../../ ../../ ../../ ../..
視覚障害者のインターネット利用特性と問題分析：みんなのウェブ
(1) 一目でトップページの全体像を判断することができないので、まずは自分の目的とするサイトかどうか、どのような内容・機能のサイトかを把握する。 初めて訪れるサイトでは、トップページをひととおり読み上げ、ページの内容や、サイトの機能（サイト内検索ができるか等）、サイト全体の構造を把握する。この際以下のような問題が発生する。 フレームに対応していない音声読み上げソフトでは、フレームのページを別々にしか読めないため、構造が理解しにくい上、操作が困難となる。 広告などが自動的に別の子ウィンドウで表示されると、操作できるアクティブなページが子ウィンドウに移ってしまい、操作が困難となる。 各フレームにタイトル名が入っていないため、フレームの内容がわからず、どのフレームに飛べばよいのかわからない トップページのメニューリンク数があまりに多いと、全体像を把握するのに膨大な時間を要する。 １ページ内の情報
メタ情報をXHTMLに埋め込むRDFa | Web標準Blog | ミツエーリンクス
6月20日に、RDFa構文仕様の勧告候補が公開されました。順調に進めば、今年中にも勧告されるのではないかと予想しています。 さて、勧告となってはいないものの、試験的にWeb標準仕様 日本語訳一覧にRDFaを導入してみました。今回はこのページをサンプルに、簡単なRDFaの解説をしようと思います。 RDFaとは RDFaは、メタ情報をXHTMLで表現する仕様です。RDFをデータモデルに用いることで、より柔軟で多彩なメタ情報を埋め込むことができます。メタ情報を埋め込む方法は何通りかありますが、もっともシンプルなものは、従来のmeta/link要素による指定とほぼ変わりません。 たとえば、ページの説明を記述するとき、XHTMLやHTMLではこう記述します。 <meta name="description" content="ページの説明" /> RDFaでは、新しく導入されたproperty属性を
HTML5のMicrodataとは何か？
HTML5では、HTML文書の中にメタデータを埋め込むための「Microdata」という仕様が含まれています。 最初に簡単なMicrodataの具体例を紹介します。HTML文書の中で明示的に人名であることを示したい内容があるとき、Microdataでは次のように書くことができます。 <div itemscope> <p>僕の名前は<span itemprop="name">山田太郎</span>です。</p> </div> この文書をWebブラウザで表示しても、 僕の名前は山田太郎です。 と表示されるだけで、特に何か変わったことが起きるわけではありません。しかし、このHTML文書を検索エンジンが読み込むと「山田太郎という文字列はnameである」と理解してインデックスしてくれる、といったことができるようになります（というのはあくまで例です）。 Microdataとは、文書の内容に対して機械に
ステキエンジン » タグ空間（rel-tag）を実装してみる
ブログなどでは記事に「タグ」もしくは「ラベル」付けし、その記事がどのような種類の内容を含んでいるかを明示的に示す機能が付いています。 Movable Typeでもタグ付けの機能はありますが、Microformatsの仕様にそったものではありません。具体的には「mt-search.cgi」に設定したタグの値を引っかけて検索させる仕組みになっています。 Movable Type標準のタグ部分URLソースは以下のようになっており、 <a href="javascript:void(0)" onclick="location.href='http://www.example.com/mt/mt-search.cgi?blog_id=1&tag=%e3%82%bf%e3%82%b0&limit=20';return false;">タグ</a> これはこれで機能として良いと思うのですが、汎用性に乏し
Microformats Wiki
初めての方は、Microformats の手引きからどうぞ。編集を始める前に、how-to-play-jaを読んでください。 はじめに この wiki は microformats コミュニティの中心的なリソースです。発表済みの microformats 仕様、仕様ドラフト、発表パターンの現在のバージョンを見つけることができます。新しいフォーマットのプレインストーミングページや、認められたフォーマットや開発中のフォーマットの問題追跡ページといった開発用のリソースもあります。 スタートするには Microformats を始めるには… まず、自分のページやアプリケーションで、意味的に豊かで説明的で、'POSH' な HTML を書くことに慣れましょう。 「microformats について」のページ、ブログ、メディア紹介例やプレゼンテーション、microformats に関する書籍、ポッドキ
リッチ スニペットの導入について
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
XMLサイトマップを検索エンジンに送信するとクロールがどう変わるのかテストしてみた | Web担当者Forum
人間誰でもそうだけど、いいものも悪いものも含めて、僕にはいろんな癖がある。この間、あるクライアントのWebサイトに取り組んでいるとき、いつものようにXMLサイトマップを作って検索エンジンに送信したんだけど、そのときに考え始めたんだ。XMLサイトマップって本当にサイトの役に立っているんだろうかってね。XMLサイトマップを検索エンジンに登録すると、どんな効果があるんだろうか。 そこで、そこそこ人気のあるブログを運営していて、WordPressとGoogle XML Sitemaps Generator for WordPressというプラグインを使っているクライアントに頼んでみたんだ。僕が作ったトラッキング用のスクリプトをサイトにインストールして、検索ロボットの動きを追跡させてくれないかってね。Google XML Sitemaps Generatorがどんなものか知らない人のために説明すると
「日経パソコン」企業サイトランキング 2007---主要500社のWebサイトを評価：ITpro
「日経パソコン」は、国内の主要企業500社を対象に、Webサイトの有用度を比較する「企業サイトランキング 2007」をまとめた。「基本情報」「ブランディング」「リスク管理」「使いやすさ」「アクセシビリティ（アクセスの容易さ）」の5分野、71個の調査項目への対応度を検証。その結果を得点化して、ランキングを算出した。 首位は、100点満点で91.0点を獲得した出光興産。同社のWebサイトは、事業内容、財務・IR、環境活動などの豊富な情報を掲載。各ページの上部に共通のナビゲーションボタンや検索機能を配置するなどして、使い勝手の向上を図っている。また、テレビCMと連携したページで自社の歴史や技術を紹介するなど、ほかのメディアと企業サイトとの連携にも積極的に取り組んでいる。2位は89.0点の富士通、3位には87.0点の日本板硝子が入った。 「企業サイトランキング」の調査、発表は今回が初めて。日経パソ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://japan.internet.com/busnews/20120206/2.html
Microformatsリファレンス beta
Microformats « ステキエンジン
Google Sitemaps Generator, Editor and Keyword Analyzer Free Online
ユーザビリティランキング2006 調査項目：ITpro