Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

リアクティブWebアプリにのみ適用されます

 

 

OutSystems

アクセシビリティに関する問題のテストと修正

OutSystemsでは、アクセシビリティを備えたアプリケーションを開発する際は、アクセシビリティに関する問題のテストを早い段階で行うことを推奨しています。このセクションでは、WAVEアクセシビリティ評価ツールを使用して問題を特定し、Service Studioでそれらの問題に対処する簡単な例を示します。WAVEではページ上のマーカーによって問題が視覚的に表示されるため、ローコードアプローチによるアプリ開発に集中することができます。また、Chrome DevToolsに統合されているLighthouseでアプリを監査することもできます。

ページを作成する

Service Studioで画面を作成し、アプリをパブリッシュして、ブラウザでアプリの画面を開きます。以下はタイトルと画像を含む簡単な画面の例です。

サンプルページ

アクセシビリティをテストする

アクセシビリティに対応したページをテストするには、以下の手順を実行します。

  1. ページを読み込みます。
  2. WAVEエクステンション(1)をクリックして、テストを開始します。 ページ要素の上に存在する問題が表示されます。
  3. エラーマーカー(2)をクリックすると、注記を含むポップアップボックスが開きます。この場合、ページタイトルがありません。
  4. 参照リンク(3)をクリックして、問題が影響を及ぼす成功基準を参照します。この例では、レベルAの成功基準である「2.4.2 Page Titled」のルールに影響を及ぼしています(4)。

アクセシビリティのテスト

このページには他にも問題があります。ヘッダーがなく、画像の代替テキストがありません。

アクセシビリティ分析では、ページの構造要素とARIAの注釈が表示されます。デフォルトでは、これらの要素と注釈はOutSystems UIから取得されます。

アクセシビリティの問題を修正する

この例の問題をすべて修正するには、基本的なアクセシビリティ設定に関するセクションの手順に従います。簡単に編集して、ページのタイトル、言語の定義、画像のaltテキストを設定します。ページをもう一度チェックすると、レポートのエラー数が0になります。

アクセシビリティの問題の修正