DIVI 5を使用したアクセシビリティ属性のテスト

アクセシビリティ属性はDIVI 5と完全に互換性があるようになり、ビルダー内にARIAの役割、ラベル、その他のスクリーンリーダーヘルパーを追加するコードなしの方法が得られます。 Divi 5を使用している場合は、ワークフローやデザインを変更せずにサイトにアクセシビリティを構築する最も簡単な方法です。

ヨーロッパのアクセシビリティ法が6月28日に施行され、Googleがアクセシビリティのベストプラクティスをますます支持しているため、今が前進する時です。アクセシビリティ属性の仕組みと、サイトが最新のアクセシビリティ基準を満たすのに役立つ方法は次のとおりです。

DIVI 5のアクセシビリティ属性

アクセシビリティ属性は、コードを作成せずにDiviビルダーから直接WebページにAriaの役割、ラベル、その他のアクセシビリティヘルパーを追加できるDiviプラグインです。 ARIA（アクセス可能なリッチインターネットアプリケーション）属性は、特にDIVI 5にカスタムレイアウトを構築する場合、独自のコンテキストを提供しない要素に意味を追加するのに役立ちます。

たとえば、テキストモジュールを使用して、見出しまたはボタンモジュールを視覚的にスタイリングしてアクションを促進する場合、画面読者は自分の役割を自動的に理解しません。 ARIAの役割とラベルを使用すると、各要素とは何か、視覚的なデザインを変更せずに、支援技術がどのように解釈すべきかを定義できます。これにより、Divi 5サイトにアクセスしやすく柔軟になります。

プラグインをインストールすると、セクション、行、モジュール、およびその他のDIVI要素にカスタム入力フィールドを自動的に追加します。 （ARIAフィールドにアクセスするには、任意の要素をクリックして、その詳細なタブに移動します。）

これで、役割を定義し、ARIAラベルを追加し、Diviビルダーから直接すべての要素のスクリーンリーダーのサポートを改善できます。アクセシビリティ属性は、Diviワークフローにスムーズに適合し、年間19ドルの費用がかかります。アクセス可能なWebサイトを構築するためのシンプルで手頃な価格の方法を提供します。

アクセシビリティ属性を取得します

アクセシビリティがもうオプションではない理由

アクセシビリティは以前はあなたが先送りすることができるものでしたが、もうそうではありませんでした。現在、法的安全、検索パフォーマンス、ユーザーの信頼に影響を与えます。

あなたのサイトがアクセスできない場合、あなたはちょうど遅れているわけではありません - あなたは危険にさらされています。その理由は次のとおりです。

• 法的措置は増加しています。 2025年6月28日から、欧州アクセシビリティ法が施行されます。あなたのウェブサイトがアクセスできず、EUの人々がそれを使用する場合、罰金やその他の罰則に直面する可能性があります。法律は、10人以上の従業員を持つほとんどの企業に適用され、年間200万ユーロ以上を稼いでいますが、それに従うことも奨励されています。
• アクセシビリティはランキングに影響を与える可能性があります。アクセシビリティはランキング要因ではありませんが、アクセス可能な機能の多くは間接的にSEOに影響を与える可能性があります。 ALTテキスト、適切な見出し構造、説明ラベルなど、ユーザーと検索エンジンの両方が理解しやすくなります。したがって、サイトをナビゲートするのが難しい場合は、検索結果に静かに遅れる可能性があります。
• アクセスできないサイトはユーザーを追い払う：サイトがアクセスできない場合、障害のある人はそれを使用できない可能性があります。彼らがすぐに出発すると、それはエンジンを検索し、ランキングを傷つけるために不十分なユーザーエクスペリエンスを知らせます。クリア構造、読み取り可能なフォント、簡単なキーボードナビゲーションなどの変更により、サイトはすべての人が使用可能になります。

アクセシビリティは大企業にとってのみ重要であると仮定するのは簡単ですが、それを無視することは、あなたがより小さなブランドであってもあなたを傷つける可能性があります。

DIVI 5のアクセシビリティ属性のセットアップ

このセクションでは、Divi 5 Webサイトにアクセシビリティ属性のツールをインストールおよびアクセスすることをお勧めします。

プラグインのインストール

アクセシビリティ属性を購入すると、プラグインのzipファイルが届きます。 WordPressのプラグインにアップロード>プラグインの追加>プラグインのアップロード。

次に、zipファイルを追加し、 [今すぐインストール]をクリックします。

最後に、それをアクティブにします。

アクティブ化されると、すべての要素の高度なタブに追加のARIAフィールドが追加されます。

これらのアクセシビリティ属性をページ上の各要素に、Diviビルダーから直接簡単に追加できるようになりました。わずか1分でカバーします。その前に、アクセシビリティ属性ダッシュボード内で利用可能なすべてのオプションをすばやく確認しましょう。

アクセシビリティ属性ウォークスルー

DIVIサイトでプラグインがアクティブになると、 WordPressサイドバーにアクセシビリティタブが追加されます。それをクリックして、管理、モジュール、要素、製品の4つのタブがあるダッシュボードにアクセスします。

各タブのオプションを確認しましょう。

[管理]タブ

このタブでは、サブスクリプションの管理（サポートを有効にする） 、プラグインのステータスの確認、アンインストール時にデータを削除するかどうか、すべての設定をデフォルトにリセットするなど、アカウントレベルのコントロールが提供されます。

[モジュール]タブ

DIVIモジュールで有効にするARIA属性を決定できます。選択したオプションのみが、Advanced Tabにフィールドとして表示されます。それらをすべてオンにしておくことをお勧めします。

すべてのモジュールにアクセシビリティ属性が必要なわけではありません。たとえば、スクリーンリーダーに意味のあるコンテンツを追加しないため、キャプションやリンクのない、仕切り、アニメーションアイコン、画像ギャラリーなどの装飾的な要素を安全にスキップできます。

モジュールを除外するには、互換性セクションにモジュールスラッグ（ET_PB_IMAGEなど）を入力します。これにより、ARIAフィールドを追加するときにプラグインがスキップし、実際にアクセシビリティサポートが必要なモジュールのみに焦点を合わせるようにプラグインが指示されます。

[要素]タブ

あなたのウェブサイトの一部はDiviモジュールで構築されていません。彼らはあなたのテーマ、他のプラグイン、またはプレーンHTMLから来るかもしれません。 [要素]タブを使用すると、CSSセレクターを使用してサイトの部分にARIA属性を追加できます。メニュー、アイコン、ボタン、Diviビルダー内に作成されていないフォームフィールドなどのグローバル要素を含めることをお勧めします。

• Aria Main：メインコンテンツがどこから始まるかをスクリーンリーダーに伝え、メニューやサイドバーをスキップできるようにします。
• Aria Hidden：装飾的な要素を隠すので、Assistive Techは大声で読み上げられません。
• ARIAリンク：リンクとして実際のリンクではないマーククリック可能な要素。これにより、読者がそれらを正しく識別するのに役立ちます。
• Ariaボタン：ボタンの役割を追加して、ボタンのように機能するアイコンまたはスタイルのテキストリンクを切り替えます。
• ARIAが必要： HTMLがそう言っていなくても、必要に応じてカスタムフォームフィールドをマークします。
• タブインデックス： Tabキーを使用して重要な要素に到達可能になります。これは、キーボードのみのナビゲーションに役立ちます。

各設定を使用すると、CSSセレクターを使用してこれらのロールを追加または削除できます。どこから始めればよいかわからない場合は、Aria MainとAriaのボタンは最初のピックです。

製品タブには、同じ作成者の他の製品があります。

Divi 5内のアクセシビリティ属性を使用します

セットアップ後、実際の作業はビルダー内で行われます。各ARIAフィールドには目的があります。それが何をするか、いつ使用するか、実際のレイアウトでのアクセシビリティにどのように役立つかを見てみましょう。

1. ARIAの役割を持つ要素に役割を割り当てます

ARIAロールフィールドを使用すると、コードでは明らかではない要素に目的を割り当てることができます。たとえば、Blurbモジュールを使用して行動を促進することを作成した場合、スクリーンリーダーはそれをボタンとして自動的に認識しません。音声コマンドまたはキーボードショートカットでナビゲートするユーザーがその機能を明確にするために、ロールボタンを割り当てる必要があります。

以下のこの場合のように、この宣伝文句にはボタンが含まれています。

ARIAの役割を追加するには、オプションを切り替えてこれらの値を割り当てます。

• WidgetロールとしてのARIAロールタイプ（これは、ボタンやスライダーなどのインタラクティブな要素がライブであるカテゴリです）。
• ボタンとしてのARIAロール値
• ARIAロールセレクターAS .ET_PB_BUTTON （これはボタンモジュールにDiviが使用するクラスです。）

2. ARIAラベルを使用してスクリーンリーダーにクリアラベルを追加する

ARIAの役割は支援技術に要素とは何かを伝えていますが、ARIAラベルはそれが何をするかを説明しています。これは、要素にアイコン、カスタムスタイルのボタン、またはインタラクティブに見えるように設計されたものであるが、それほど大声では言わないような目に見えるテキストがない場合に特に便利です。同じ例を使用してそれを分解しましょう。

私たちはすでに役割を追加しましたが、ボタンのテキストには「今すぐ寄付してください」と書かれています。視覚ユーザーにとっては問題ありませんが、スクリーンリーダーを使用している人は、ボタンが複数回表示されるため、さらに多くのコンテキストが必要になる場合があります。

このボタンにラベルを割り当てるには、ARIAラベルを切り替えて短いラベルを追加します。

これで、ボタンはまだ画面上で「今すぐ寄付」と書かれていますが、スクリーンリーダーは完全なラベルを読んで、ユーザーがボタンが何をし、どこにつながるかを正確に理解できるようにします。

3. ARIAの説明で追加のコンテキストを提供します

ARIAの説明は、レーベルが説明できるよりも、要素についての詳細をスクリーンリーダーに提供します。ラベルは何かが何であるかを示していますが、説明はそれが重要な理由を説明しています。

たとえば、1つのページに複数の「寄付」ボタンがあり、それぞれが沿岸の浄化、海洋教育、生息地の修復などの異なる原因の下に配置されたとします。スクリーンリーダーのユーザーは、ボタンに直接着地し、近くのコンテンツを見逃す可能性があります。これは、ARIAの説明が役立つ場所です。

最初のカードを取りましょう：沿岸のクリーンアップ。よりコンテキストを追加するために、「この寄付は海洋クリーンアップと野生生物保護をサポートしている」などの説明をARIAの説明テキストとして追加できます。

他のボタンについても同じことを行います。そのため、全員が視覚的に「今すぐ寄付」と言っても、スクリーンリーダーはそれぞれのさまざまな説明を発表します。これにより、ユーザーは画面に表示されるものを変更せずに完全なコンテキストを提供します。

4。スクリーンリーダーから装飾的な要素を非表示にします

Aria Hiddenは、アイコンや背景画像など、視覚的に何かを表示したい場合に役立ちますが、画面読者に発表したくないです。これにより、エクスペリエンスは、支援技術に依存しているユーザーにとってより集中し続けます。

たとえば、カモメの写真のように、キャンペーンのプレビュー画像を取ります。デザインをサポートしますが、すでに見出しや説明にあるものを超えて新しい情報を追加しません。ここでは、Aria Hiddenを使用してスクリーンリーダーから隠すことができます。

5. ARIAの詳細を含む追加情報へのリンク

ARIAの詳細を使用すると、ある要素を別の要素に接続できます。これにより、追加の情報が提供されます。たとえば、ボタンが何であるかを説明する近くの段落にボタンをリンクすることができます。クリックされた要素の一部ではないより多くのコンテキストを読み取るために、支援技術が必要な場合に役立ちます。

海洋教育セクションを見てみましょう。段落テキストに「今すぐ寄付」ボタンを説明するとします。 ARIAの詳細を使用して、ボタンを段落にリンクできます。

まず、段落に一意のIDを追加します。説明を含むテキストモジュールをクリックして、 Advanced> CSS ID＆Classesに移動します。 CSS IDフィールドに一意のIDを入力します。マリンエドに入りましょう。

これで、このテキストモジュールには、スクリーンリーダーが参照できるIDがあります。

次に、ボタンにARIA詳細属性を追加します。ボタンモジュールをクリックして、 Advanced> Ariaの詳細に移動します。 IDフィールドにMarine-Eduを入力します。

これにより、ボタンがID「Marine-Edu」を使用して段落のより多くの情報にボタンが接続されていることを支援技術に示します。また、同じボタンテキストをさまざまな場所で使用する場合にも役立ちますが、それぞれが異なることを意味します。

ARIAラベル、ARIAの説明、およびARIAの詳細はすべて、さまざまな方法で追加のコンテキストを追加することに気付いたかもしれません。すでにページで何かを説明している場合は、新しいラベルや説明を書く代わりに、ARIAの詳細を使用してそのテキストにリンクすることを検討してください。

アクセシビリティの属性により、Diviビルダーから直接ARIAの役割、ラベル、その他の主要なアクセシビリティ機能を簡単に追加できる方法がわかりました。コーディングなしでウェブサイトにアクセスできるようになります。

アクセシビリティ属性を取得します

Divi 5の追加のDivi-modulesのアクセシビリティツール

アクセシビリティ属性は、アクセシビリティの技術的な側面を処理します。また、キーボードナビゲーションや視覚コントロールなどの追加機能を提供して、より完全で包括的なソリューションを提供するアドオン（アクセシビリティバンドル）が付属しています。

1。アクセシビリティサイドバー

アクセシビリティのサイドバーには、ユーザーがブラウジングエクスペリエンスをカスタマイズできるフローティングツールバーを追加します。モビリティ障害のある訪問者は、フォントサイズを調整し、ハイコントラストモードに切り替え、グレースケールを有効にし、キーボードを使用してナビゲートできます。サイトのデザインに合わせてカスタマイズすることもできます。

2。アクセシビリティの調整

アクセシビリティの微調整は、ユーザーがサイトをより簡単にナビゲートできるようにする実用的な機能を追加します。これらには、より良いナビゲーションのためのスキップリンク、キーボードユーザーがどこにいるかを見るのを助けるためのフォーカスのアウトライン、およびサイトのレイアウトを変更せずにユーザビリティを向上させる他の微妙な機能強化が含まれます。

アクセシビリティバンドルをご覧ください

Divi 5 Webサイトを今日アクセスできるようにします

アクセシビリティ属性は、Diviサイトをより包括的にするための簡単で視覚的な方法を提供します。コーディングも回避策もありません - ビルダーに直接構築された適切なツールだけです。

積極的にサポートされており、6月28日まで50％オフになっているDivi 5と完全に互換性があります。オファーが実行される限り、サイドバーや微調整を含むフルアクセシビリティバンドルを年間36ドルで入手できます。すべての人のためにサイトをより良くする準備ができている場合、これは開始する最も簡単な方法です。

アクセシビリティバンドルを50％オフにします