サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020年10月20日 06:37
いつもお世話になっております。
Web Accessibilityを考慮した代替テキストをつけたいなと思っております。（まだ全然修正できていないのですけど。）
以下のページや、WordPress画面にリンクがあるWeb Accessibility Tutorialsのページで学びました。
すべての画像に
alt属性を指定する必要がありますが、常にテキストが必要とは限りません。重要な画像には画像の内容を説明する alt テキストを指定する必要がありますが、装飾的な画像には空の alt、つまりalt=""を指定する必要があります。
上記から、文字通り「 alt="" 」という状態にできると理解したのですが、そもそもその理解が間違っているのか・・・な？という可能性もあるんですけど★。
代替テキストを何もつけなければ空に（alt=""）なるのかと思っていましたが、WordPressが自動で「wp-image-n」という文字列を代替テキストに挿入する仕様のようです。（Cocoonと、Twenty...でテストして、両方同じになりました。）
テストページURL： https://blogstudynotes.com/test-page/
このページにある画像には、代替テキストを指定していません。（メディアライブラリ画面でも、編集画面でも未指定。）編集画面のコードエディター上では「alt=""」になっています。
ですが、公開して検証画面で見ると、添付ファイルのように、wp-image-13843という代替テキスト（？）が挿入されています。
これを「alt=""」に変換することは可能なのでしょうか。方法をご存知の方がいらっしゃいましたら教えていただけますでしょうか。
よろしくお願いいたします。
Topic starter
2020年10月20日 06:53
WordPressが自動で「wp-image-n」という文字列を代替テキストに挿入する仕様のようです。
すいません、この理解は多分間違って・・・ますよね、「クラス」の追加がされている？
「alt=""」の「="」が無くても「代替テキストは空」という扱いになるのでしょうか。
2020年10月20日 09:16
こんにちは。
音声ブラウザは利用したことがないので、実際の読み上げは分かりませんが、「alt=""」も「alt」も空の属性として記述できます。
https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
ただ装飾とかの明らかにaltが不要な場合を除き、記事内の画像にaltを入れない場面って、ほとんどないのではと思います。
Ikumi reacted
2020年10月21日 09:16
デベロッパーツール（右クリックの検証メニュー）では、「alt=""」が「alt」に省略されているようですね。
意味が同じなので、省略されているのかと思います。
リフィトリーさんのおっしゃる通り、実際のソースは「alt=""」となっています。
ソースコードの出力は、ブラウザに依存しませんので、結局WordPressは「alt=""」を出力しているようです。
Web Accessibility Tutorialsのページを読むと、「altがないと、画像ファイルを読む可能性がある」と言われているので、画像ファイルを読み上げるかどうかは、音声読み上げツール次第なのだと思います。
Ikumi reacted
Topic starter
2020年10月22日 05:32
たなかまさん、リフィトリーさん、
「ソースコード」について学べました、ありがとうございました！
代替テキストがある場合はその読み上げ。空の代替テキスト「alt=""」が設定されている場合は画像ごと無視、だけども、「alt=""」自体が無いと、「画像」と読み上げたりファイル名を読み上げたりするという情報はありました。とはいえ、おっしゃる通り「ツールによる」部分もあるんだろうなと思います。（実際、ブラウザのスクリーンリーダーでテストページを読み上げてみたら、代替テキストもファイル名も読まれず、キャプションだけが読み上げられました★。）
推測もまじりつつ、できる範囲になってしまいますが、考慮していけたらなと思います。
本当にありがとうございました！
This post was modified 4年前 by Ikumi
リフィトリー reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。