legacy-knowledge-base
公開されました Jul. 2, 2025

[CKEditor] 画像に代替テキストを追加する

written-by

Rita Schaff

How To articles are not official guidelines or officially supported documentation. They are community-contributed content and may not always reflect the latest updates to Liferay DXP. We welcome your feedback to improve How To articles!

While we make every effort to ensure this Knowledge Base is accurate, it may not always reflect the most recent updates or official guidelines.We appreciate your understanding and encourage you to reach out with any feedback or concerns.

legacy-article

learn-legacy-article-disclaimer-text

問題

  • WCAG アクセシビリティ ガイドラインに準拠するために、Documents & Media ギャラリーにアップロードされた画像に代替テキストを追加したいと考えています。 どうすればそれができますか?

Environment

  • DXP 7.0+

解決策

Image 要素で新しい構造を作成しようとすると、要素の Image Description フィールドが代替テキストを提供します。
structure_imageelement.png

  1. サイト→コンテンツ & データ→Web コンテンツ→構造タブ→追加 (+ 記号) に移動します。

  2. [フィールド] の下で、 画像 要素を灰色の領域にドラッグします - フィールド 画像 および 画像の説明が必要です。

  3. 構造を保存する

  4. それを使用して新しい Web コンテンツ記事を作成する

  5. [選択] ボタンをクリックして、画像をアップロードします

  6. 画像の説明を [画像の説明] フィールドに書き込みます altTextTestと入力しました

  7. Webコンテンツのタイトルを入力→公開

  8. [サイトに移動] をクリックし、新しい Web コンテンツをページにドラッグします。

  9. 画像を右クリック→検査(Chromeを使用)

  10. alt="altTextTest" が表示されることをアサートする

HTML_altTextTest.png

注: CKEditor を使用している場合は、手順が異なる場合があります。

多数の画像を含む大規模なデータベースがある場合は、このプロセスを自動化することをお勧めします。 役に立つかもしれない古いサードパーティの記事があります。Liferay 6.1 で画像に代替テキストを追加する 参照してください。 これはベスト エフォート型のカスタマイズであり、Liferay によって管理されていないことに注意してください。追加の支援は、当社のグローバル サービス チームによって提供されます。

追加情報

did-this-article-resolve-your-issue

legacy-knowledge-base