Help us understand the problem. What is going on with this article?

Expand-html HTMLの拡張という発表を聞いた時のメモ

More than 3 years have passed since last update.

前置き

htmlの属性には元々role(役割)というものがあり、それを拡張するものとしてWAI-ARIAというものが定義されている。

WAI-ARIA

アクセシブルでリッチなアプリケーション作成に関する仕様を定義する。ホスト言語に不足している要素を拡張する補助輪のようなもの

ホスト言語

SVGやマークアップ言語のこと

不足しているものって?

  • 役割
  • ステート
  • プロパティ

どうやって拡張してるの?

JS(HTMLの取得)

DOMツリーの生成

アクセシビリティAPI(WAI-ARIAなど)

支援技術(アクセシビリティAPIを使用できるアプリケーション)
例)Slack,Facebookなど

使い方

役割(role)

要素の役割を定義する
メニューに何があるのか・いくつあるのかなどを伝える
静的に使用する

ステート・プロパティ(aria)

要素sの状態を定義する
setattributeなどで開いている・閉じているなどを伝える

実装上の注意点

  • 無理して使わない
  • 元々のやり方(属性など)を変更しない(上書きしない)
  • デフォルトのものとの暗黙の衝突を防ぐ

デバッグツール

  • chrome-accesibility developer tool
  • firefox-dom inspecter
  • vin-viewer
  • cssでセレクタを用いてスタイルを変更する
  • dipslay-wai-aria

Micromedia

itemscopeでアイテムを作り、itemtypeで定義する
目的や環境に応じて仕様を参照し、拡張する

ここまでして、HTMLを拡張する意味は?

  • リッチスニペット

リッチスニペット

Google検索を例にとって説明すると、
検索結果の中に存在する「食べ物のサイトにおける食べ物の画像」や
「サイト内検索ができる検索窓」、「商品の場合に存在するレビュー」などを表示する技術のこと
  • AMPにも対応

AMP

Accelerated Mobile Pageのこと。
表示に時間がかかるページを(モバイルからに限るが、)高速に表示するために定義されたフォーマット。
  • WebサイトをAPI化できる

どういうものなの?何が違うの?

  • Microdata →HTMLの記法
  • schema.org →語彙
  • Google rich snipet  →Googleのオリジナル仕様
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした