イイダリョウのブログ。API」というのがあることを知った!どんな風に読み上げられるのか、実際にやってみた。APIとはこれまでTone.jsでブラウザで音を鳴らしたりしいた。API」という機能を使っている。API」はどんな機能?こちらの解説が詳しい。CodeGridサンプルではinputタグに入れた文字が読み上げられる。etcページ読み上げボタン完成品inputタグではなく、ページのテキストを読み上げたい実装してみた。CodePen.ヘッダーにある「テキスト読み上ボタン」を押すとテキストが読み上げられる。なんだか「モヤモヤさまぁ~ず」みたいな喋り方wテキストトゥスピーチってやつですな。変数textでspeechの中のテキストを取得(textContentプロパティ)console.logはtextが取得されたかのテスト用btnをクリックしたときのイベント変数msgでSpeechSynthesisUtteranceインスタンスを作成msgのtextプロパティにtextを入れるmsgのlangプロパティを日本語に指定windowオブジェクトのspeechSynthesisプロパティのspeak()メソッドを実行。引数はmsgポイントになるはSpeechSynthesisUtteranceインスタンス、speechSynthesisプロパティ、speak()メソッド!ネット上の記事では最初の記事のようにinputタグに入れた中身を喋らせる事例が多いのだが、自分がやりたいのはページ本文の読み上げ。VanguardHTMLコード(いろんな要素の読み上げ実験)実際に読み上げられた部分。読み上げボタン読み上げボタンはこちら。←テキスト読み上ボタン</header>headerタグの中のinputボタン。class名が.btn。id="speech"><h1>テキスト読み上げテスト</h1><p>うまくいけばここのテキストが再生される。されるんじゃないかな。まちょと覚悟はしておけ。</section></div>まずは見出しと段落が読み上げられるかテスト。読み上げられた!ルビ(rubyタグ)「生ゴミ生ゴメ生タマゴ」と読ませたら「せいごみせいごめせいたまご」と「なま」が「せい」と読まれた。ルビタグを入れたらそっちが優先されるかと思い、やってみた。<p>※読み間違えたまま二重で読まれる。</section>rubyタグでルビを書く。たまご」と二重で読まれるだけだった。<p>※リスト間は間髪なく読まれる。</section>結果、リストは句読点がないので間髪なく一気に読まれた。「間髪」は「あいだかみ」と読まれたwテーブル(tableタグ)テーブルがどのように読まれるか。<p>※一行ずつ左から右に読まれる。</section>trタグの1行ごとに読まれ、tdタグの列を左から右の順に読まれる。これは意図通りの読まれ方でイイ!画像(alt属性とfigcaptionタグ)画像のalt属性を読んでくれるか。<p>※alt属性は読まれない。</section>結果、alt属性は読んでくれない!alt属性を読ませるにはtextContentプロパティをaltプロパティにする必要がある。それをすると他の本文テキストが取得できない。(テキストとalt属性が混在したページを書かれた順番に取得する方法があるかもしれないが、よくわからず)画像の説明はfigcaptionタグで書いた方が良さそう。ちなみに、ダミー画像の配置は「Placehold.jp」を利用した。モック用画像作成ウィジェット埋め込み(Twitter)最後に、SNSのウィジェット埋め込みなどが読みあげられるか。</section>結果、アカウント名の部分は読み上げられたが投稿部分のテキストは読まれなかった。その他のスクリーンリーダーchromeブラウザにはテキスト読み上げ機能がある。ヘルプMac、iOsにはテキスト読み上げ機能VoiceOverがある。サポートWindows10にテキスト読み上げナレーター機能「ナレーター」があるようだ。※参考:https://support.microsoft.com/ja-jp/help/22798/windows-10-complete-guide-to-narratorWindowsのフリーソフトはいくつかあるようだ。フリーソフト100全部は試せていないが、VoiceOverはテキストとalt属性が同時に読まれた!ただし「せいごみ」とかの読み違いは同じだった。日本語は音読み訓読みがあるので、実際に試しながら他の言葉に書き換える(または仮名文字に開く)必要がありそう。最後にということでテキスト読み上げボタンを実装できました!ソフトを入れたりブラウザ機能を使うのは少し手順が増えるので、ボタン1つで簡易的にでも実装したかった。目が見えない方向けのページを作る時に有能だと思います。これに加えて、文字サイズの大中小ボタンなど、ユニバーサルデザインなサイトを作っていきましょう!ちなみにWebアクセシビリティの仕様書を「WCAG」。このページ自体が膨大なテキスト量でハードルの高さを感じてます。先日、Youtubeで初ライブ配信を行いました!いつも愛用している...2019-08-22【Vue.js】コンポーネントにpropsオプションで値を渡すVue.jsシリーズの続きです。前回はコンポーネントにカウンター...2019-05-29【Vue.js】v-bindでclass名を動的に追加、削除する!(北斗の拳の名言編)Vue.jsの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。