アクセシビリティのための音声のウィジェットコード: すべての訪問者に「聞く」選択肢を
読むより聞くほうが好きな訪問者もいます。音声ウィジェットならコード1行で音声の選択肢を用意できます。配慮の行き届いた設定方法を紹介します。
公開日:
すべての訪問者が同じ方法でページを読むわけではありません。視力の弱い人、読むことに困難がある人、目が疲れている人、そして単にほかの作業をしながらの人は、聞くほうを好むことがよくあります。テキスト読み上げウィジェットは、既存のコンテンツの横で、必要なときにその選択肢を提供します。
音声ウィジェットはあくまで追加の選択肢であり、アクセシブルなHTMLの代わりにはなりません。適切な見出し、代替テキスト、コントラスト、キーボード操作は引き続き重要で、スクリーンリーダーの利用者はそれらに頼っています。ウィジェットはその上に、便利な音声の経路を加えるものです。
ウィジェットを追加する
ウィジェット で 音声 ウィジェットを作成し、コードをコピーします。
<script src="https://api14.com/widget.js" data-widget="YOUR_WIDGET_ID" async></script>
長い記事やヘルプページの上部付近に、「このテキストを聞く」のような短いラベルと一緒に置くのがおすすめです。訪問者が文章を貼り付けるか入力すると読み上げられ、音声を保存したい人のためにダウンロードリンクも用意されます。
役立つ設定
- わかりやすいラベル: 何が起きるかを正確に伝えるタイトルとボタンの文言にしましょう。例: 「読み上げる」。
- 親切なプレースホルダー: 何を貼り付ければよいかを伝えます。例: 「段落を貼り付けると読み上げます」。
- やさしいエラーメッセージ: 問題が起きたとき、訪問者には技術的なエラーではなく、あなたのメッセージが表示されます。
- テーマ: 訪問者に合わせる テーマは、訪問者のライトまたはダークの設定に従います。快適さのためにこれを設定している人は多くいます。
- 落ち着いた声: はっきりとして速さが適度な声を選び、自分のテキストで試しましょう。
安定して動かす
止まってしまうアクセシビリティ機能は、ないよりも悪いものです。安全策を整えておきましょう。
- APIキー: すべてのウィジェットは、あなたのAPIキーのいずれかで動作します。専用のキーを使い (エディターのキーリストの最後の選択肢が 新しいAPIキーを作成 です)、無理のない1日の利用上限を設定しましょう。
- 通知: 設定、ウィジェットの管理 で ウィジェットに問題が起きたらメールで知らせる をオンにします。残高切れなど自分で解決できる問題が起きると、ウィジェットごとに1日最大1通のメールが届きます。
- 状態をひと目で確認: ウィジェット一覧には、各ウィジェットの最終利用日時と直近のエラーが表示されます。
サイトを許可する
設定、ウィジェットのサイト に、ウィジェットを動かすドメインを登録します。ローカルでテストする場合は、localhost:3000 または使っているポートを追加してください。