ウェブサイトとの会話を容易にする

公開: 2022-03-10
簡単な要約↬最新のWebサイトは、もはや画面から切り離せません。 電話アシスタント、ホームスピーカー、スクリーンリーダーの間で、Webを見なくてもWebを使用する人が増えています。 ウェブサイトは現物で進化する必要があります。

画面のないウェブサイトは正しく聞こえません。 ページのない本やハンドルのない車のように。 それでも、オーディオブック、ハンズフリー車両があります。 そして、ウェブサイトは、少なくとも人間には見られずに使用されることが増えています。

電話アシスタントとホームスピーカーは、インターネットエコシステムの成長している部分です。 この記事では、これが今後のWebサイトにとって何を意味するのか、デザイナーがそれに対して何ができるのか、そしてなぜこれが最終的にアクセシビリティへの飛躍になるのかを説明します。 結局のところ、視覚障害のある人はWebの3分の2以上にアクセスできません。 Webサイトを簡単に話せるようにする時が来ました。

ホームスピーカーの侵入

世界のスマートスピーカーの売上高は2019年に1億4700万を超え、パンデミックまたはパンデミックなしの傾向が高まっています。 結局のところ、話すことはタイプするよりも速いのです。 Google HomeからAlexa、スマートフォンアシスタント、車、さらには冷蔵庫に至るまで、ますます多くの人々がプログラムを使用して自分に代わってウェブを検索しています。

ジョージオーウェルの「1984」の映画版のスクリーンショット。
次世代のGoogleホームスピーカーのユーザーテスト。 （大プレビュー）

この傾向のかなり不吉なBigBrother Incの裏付けは別として、何億人もの人々が実際にWebを見ずに毎日すでにWebを探索していると言っても過言ではありません。 画面はもはやWebの閲覧に不可欠ではなく、サイトはこの新しい現実に適応する必要があります。 何億人もの人々から自分自身を切り離していない人々。

開発者、デザイナー、ライターは同様に、自分の作品がまったく表示されたりクリックされたりしない可能性に備えておく必要があります。それは聞いたり話したりします。

「「

不可視性の設計

ウェブサイトの話題性のトピックには、テクノロジーと言語という2つの主要なプロングがあります。 基本的なコンテンツ構造からセマンティックマークアップに至るまで、ガントレットを実行する技術から始めましょう。 私は誰よりも優れた執筆に熱心ですが、それは出発点ではありません。 ダニエルデイルイスのパフォーマンスにふさわしいウェブサイトのコピーを作成することもできますが、適切に配置およびマークアップされていなければ、誰にとっても価値がありません。

古くからの財団

ウェブサイトが見られずに理解されるという考えは新しいものではありません。 スクリーンリーダーは何十年も前から存在しており、ユーザーの3分の2が出力として音声を選択し、最後の3分の1が点字を選択しています。

この記事の焦点はこれよりもさらに進んでいますが、Webサイトをスクリーンリーダーに適したものにすることで、以下のより洗練されたものの強固な基盤が提供されます。 他の人がこのトピックについて広範囲に書いている限り（以下のリンク）、私はこれに長居することはありませんが、以下はあなたが常に考えるべきことです：

  • ページ内およびサイト全体のナビゲーションを明確にします。
  • DOM構造をビジュアルデザインに合わせます。
  • 画像に代替テキストが必要ない場合（たとえば背景の場合）、16語以内の代替テキストには、代替テキストではなく空の代替テキストがあります。
  • 説明的なハイパーリンク。
  • 「コンテンツリンクにスキップ」。

視覚的な思考は、実際には多くの設計上の失敗を私たちに盲目にします。 ユーザーは自分で断片をまとめることができ、多くの場合そうしますが、それは機械可読Webサイトにはあまり効果がありません。 Webサイトを話しやすくすることは、テキスト読み上げ（TTS）に対応することから始まります。 これは良い習慣であり、アクセシビリティを大幅に向上させます。 勝つ勝つ。

TTSの設計とアクセシビリティに関する詳細情報

  • W3Cによるテキスト読み上げ
  • フロントエンドノースポイント2：レオニーワトソンは私の心を吹き飛ばしました
  • AWSでのテキスト読み上げ（パート1）
  • テキスト読み上げとAWSでのやり直し（パート2）
  • クライアントがレンダリングするアクセシビリティに関する注記
  • W3Cによるラベリングコントロール
  • Mozillaによるaria-label属性の使用
  • スクリーンリーダーを使用して1日Webを使用しました
  • 専門家から：COVID-19中のグローバルデジタルアクセシビリティ開発

ファンシーなもの

強力な基盤を築くだけでなく、スクリーンリーダーとアクセシビリティのための設計はそれ自体のために良いことです。 それが最初にそれを言及するのに十分な理由です。 しかし、それは私がこの作品の冒頭で話した「ハンズフリー」ブラウジングの上昇を完全には提供していません。 音声ユーザーインターフェイス、またはVUI。 そのためには、セマンティックマークアップを掘り下げる必要があります。

Webサイトとの会話を容易にするということは、コンテンツにはるかにきめ細かいレベルでラベルを付けることを意味します。 人々がホームアシスタントに最新のニュースやレシピを尋ねたり、そのレストランが火曜日の夜に営業しているかどうかを尋ねたりするとき、彼らは自分の声を使ってWebサイトをナビゲートしたくありません。 彼らは情報を求めています。 今。 そのためには、Webサイトの情報に明確なラベルを付ける必要があります。

今年はセマンティックWebのうさぎの穴を転がり落ちたので、ここで繰り返すつもりはありません。 Webは、機械可読であることを目指すことができ、またそうすべきです。これには、おしゃべりも含まれます。

ジャンプした後もっと！ 以下を読み続けてください↓

このためのセマンティックマークアップはすでに存在します。 1つは「speakable」と呼ばれ、現在ベータ版のSchema.orgプロパティであり、「テキストから音声への変換に特に適した」Webページの部分を強調表示します。

たとえば、私と2人の友人は、趣味として1週間に1枚のアルバムをレビューしています。 最近、セマンティックマークアップが統合されたWebサイトを再設計しました。 以下は、実際に話せることを示すページの構造化データの一部です。

 { "@context": "https://schema.org", "@type": "Review", "reviewBody": "It's breathless, explosive music, the kind of stuff that compels listeners to pick up an instrument or start a band. Origin of Symmetry listens like a spectacular jam — with all the unpolished, patchy, brazen energy that entails — and all in all it's pretty rad, man.", "datePublished": "2015-05-23", "author": [ { "@type": "Person", "name": "Andre Dack" }, { "@type": "Person", "name": "Frederick O'Brien" }, { "@type": "Person", "name": "Andrew Bridge" } ], "itemReviewed": { "@type": "MusicAlbum", "name": "Origin of Symmetry", "@id": "https://musicbrainz.org/release-group/ef03fe86-b54c-3667-8768-029833e7e1cd", "image": "https://alpha.audioxide.com/api/images/album-artwork/origin-of-symmetry-muse-medium-square.jpg", "albumReleaseType": "https://schema.org/AlbumRelease", "byArtist": { "@type": "MusicGroup", "name": "Muse", "@id": "https://musicbrainz.org/artist/9c9f1380-2516-4fc9-a3e6-f9f61941d090" } }, "reviewRating": { "@type": "Rating", "ratingValue": 26, "worstRating": 0, "bestRating": 30 }, "speakable": { "@type": "SpeakableSpecification", "cssSelector": [ ".review-header__album", ".review-header__artist", ".review-sidebar__summary" ] } }

したがって、誰かがホームスピーカーアシスタントに、 AudioxideがMuseによるOrigin of Symmetryについてどう思ったかを尋ねた場合、speakableはそれをアルバム名、アーティスト、および一口サイズのレビューの要約に向ける必要があります。 便利で要領を得た。 （そして、私たちの完全な要約を聞くという試練を人々に免れさせます。）以前にはなかったものは何もありません。 正しくラベル付けされているだけです。 CSSクラスを選択するだけで十分であることに気付くでしょう。 簡単。

この種の機能は、特定の種類のサイトに他のサイトよりも適していますが、可能性は非常に大きいです。 レシピ、ニュースストーリー、チケットの入手可能性、連絡先情報、食料品の買い物…ウェブサイトを話しやすくする習慣を身に付ければ、すべてのページに明確に構造化されラベルが付けられた情報が用意され、待機しているので、これらすべてを改善できます。彼らが彼らの道に来たときに質問に答えるために。

それを超えて、グーグルやモジラのような場所の頭脳は専用のウェブスピーチAPIに熱心に取り組んでおり、フォームやコントロールのようなものとのより洗練されたユーザーインタラクションを可能にします。 このような技術はまだ始まったばかりですが、絶対に注目すべきものです。

ホームスピーカーの台頭は、古い世界と新しい世界が衝突していることを意味します。 一方を提供すると、もう一方が提供されます。 Webサイトは、何十年にもわたってスクリーンリーダー用に設計されていることになっていることを忘れないでください。

参考文献

  • 話すWebアプリ—音声合成APIの概要
  • MozillaによるWebスピーチの概念と使用法
  • 音声ユーザーインターフェイスとは何ですか？ インタラクションデザイン財団による

スピーキングのためのライティング

スクリーンリーダー、検索エンジン、その他すべての優れた機能によってWebサイトをよりよく理解できるようにするための措置を講じました。 おめでとう。 今、私たちはトーンと個性のより曖昧なトピックに到達します。

話すウェブサイトをデザインすることは、読むウェブサイトをデザインすることとは異なります。 ユーザーインタラクションの性質は異なります。 覚えておくべき重要な点は、音声クエリが関係している場合、Webサイトはほとんどの場合、質問への回答、レシピの提供、注文の確認など、応答性が高いということです。

Open NYTの調査によると、家庭のユーザーにとって、スマートスピーカーを操作すると、イライラしたり、面白かったりする交換が発生することがありますが、通知をプッシュする電話につながれるよりも良い体験のように感じます。

言い換えれば、問題を強制することはできず、強制すべきではありません。 ポップアップや広告、そして果てしないエンゲージメントという見た目の精神は、ここにはありません。 あなたの仕事は、コマンドに関する情報をできるだけ明確かつ簡潔に提供する優れたサイトを持つことです。 あなたがそうするなら、仮想執事。

これが言語学的に意味することは次のとおりです。

  • 簡潔な文章、
  • わかりやすくシンプルな言葉、
  • フロントロードされた情報（逆ピラミッドを考えてください）、
  • 答えを完全な文として表現します。

あなたが書いたものを大声で言い、TTSReacherのような無料のテキスト読み上げシステムにそれを返してもらいます。 言葉は、書き留めたものとは大きく異なって聞こえることがあり、その逆もあり得ます。 読みやすさのアルゴリズムについては予約がありますが、それらは明快さを測定するための便利なツールです。

参考文献

  • 離れたリストの「音声コンテンツの読みやすさテスト」
  • ウィリアム・ストランク・ジュニアによるスタイルの要素。

HAL、悪いビットなし

Webサイトとの会話は、チャネルにとらわれないWebエクスペリエンスへの幅広い移行の一環です。 ウェブサイトの性質は変化しています。 デスクトップからモバイルへ、そしてモバイルからスマートホームシステムへと、それらはより流動的になっています。 私たちは皆、「モバイルファースト」のインデックス作成について知っています。 「音声優先」になるまでどのくらいかかりますか？

厳格な制約から離れることは困難ですが、それも解放されます。 私たちはウェブサイトを見て、聞いて、話します。 それぞれが小さなHALのようなものであり、デザインに適していると思われる個性や殺人的な意図があります。

ゼロから構築する場合でも、古いプロジェクトを更新する場合でも、Webサイトとの対話を容易にするために実行できる手順は次のとおりです。

  • スクリーンリーダーを使用してサイトをナビゲートします。
  • 電話/ホームアシスタントを介して音声クエリを試してください。
  • セマンティックマークアップを使用します。
  • 話しやすいマークアップを実装します。

画面のない状況向けにWebサイトを設計すると、アクセス性が向上しますが、個性、目的、および有用性も向上します。 PrestonSoがAList Apartに書いているように、「これは、コンテンツが本当にチャネルに依存しないかどうかを分析し、ストレステストするための効果的な方法です。」

Webサイトを話しやすくして、チャネルに依存しないWebに備えることができます。これは、急速に現実のものになりつつあります。 画面上のテキストやビジュアルではなく、サイトは抽象的で柔軟性があり、増え続けるさまざまなデバイスと対話できるようにする必要があります。