こんにちは！
Wixを専門とするホームページ制作会社、アクトワン代表の和田英也です！
今回もウェブアクセシビリティについて発信いたします。
WixLearn第9回の「高度なアクセシビリティオプションを確認する」を詳しく解説いたします。
このレッスンではW3Cアクセシビリティ宣言作成ツールを使って、アクセシビリティ宣言を書く方法を紹介します。
まず 「設定」を開き 下にスクロールして「アクセシビリティ設定」に移動します。
「もっと見る」ボタンを クリックします。
「高度なアクセシビリティ設定」に 移動します。
ここには4つのオプションがあります。「視覚インジケータ」「メインコンテンツにスキップ」「自動 DOM 順序」「アクセシビリティ開発ツール」です。
今回はこれら4つの機能について詳しく解説いたします。
それでは早速本題に進みましょう！
今までのWix Learn アクセシビリティ講座要約
第六回Write alt text for imagesはこちら
SECTION1Visual Indications and 'Skip to Main'
まず説明するのは「視覚インジケータ」と「メインコンテンツにスキップ」についてです。
この2つのオプションはデフォルトでオンになっています。
(もしオフにしているなら、確実にオンにしておいてください。)
オンにすることでアクセシビリティに 非常に役立ちます。
少し長くなりますが、その理由をご紹介します。
「プレビュー」に移動すると、ページを公開したときにどのように見えるかがわかる プレビューが表示されます。
中にはキーボードを使って、ホームページ内を移動する人もいます。 マウスを使わずにキーボードだけ使っているときに自分がホームページのどこにいるのか どうすれば わかるでしょうか？
そのためにあるのが 「視覚インジケータ」です。
Tab キーを押すと、ホームページの中のリンクやボタン、メニュー項目などのすべてのインタラクティブ要素を移動でき、現在位置が強調表示されます。
それがこの小さな青い四角形の正体です。
逆向きに移動したい場合は Shift+Tab を押すと、すべてのオプションの中を逆向きに移動します。
最初に表示されるのは「メインコンテンツにスキップ」です。 これはすばらしい機能です。
Wix エディタにはこの機能が追加済みですが、多くのサイトにはこのオプションがまだありません。
メインコンテンツにスキップ機能を使うと、ホームページのメインコンテンツにすぐに移動できます。
ページ数が少ないホームページではこの機能はそれほど効果はないかもしれません。
Tabで移動しなくてはならないオプションが 5 - 6個ほどしかないからです。
しかし、たとえば政府のページなどは メインコンテンツにたどり着くまでにメニューオプションが 50ほどある場合もあります。
だから これらの機能は常にオンにしておいてください。
視覚インジケーターを有効・無効にする方法
エディタを開きます。
上部のツールバーで「設定」を選択します。
「アクセシビリティ設定」を選択します。
ウィザード右上の「その他のアクション」アイコン をクリックします。
「高度なアクセシビリティ設定」を選択します。
「視覚インジケーター」を選択します。
「キーボードユーザーがサイト内を移動できるようにします。」横のトグルを確認します：
有効化：キーボードを使用してサイトを移動する訪問者には、ページ上の位置を示す青いボックスが表示されます。
無効化：訪問者はページ上で自分の位置を確認できません。
SECTION2Automatic DOM order
他のオプションも見てみましょう。 「自動 DOM 順序をオフにする」というオプションもあります。
DOM 順序とは一体何なのでしょうか?
DOM とはドキュメントオブジェクトモデルの略です。 これはすべてのコンテンツのツリー構造になっています。 HTMLの中のようなものです
サイト訪問者の中には、スクリーンリーダーなどの支援技術を使用してサイト内を移動する人もいます。 スクリーンリーダーは、視覚障がいのある人が使用するアプリです。 サイトのコンテンツをスキャンし、訪問者に「読み上げ」を行います。 スクリーンリーダーを使用する訪問者は、クリックする場所を確認できない可能性があるため、通常は Tab キーを使用してサイト内を移動します。
サイトの DOM 順序は、スクリーンリーダーと Tab キーがハイライトしたり、ページのコンテンツを「読む」順序です。
訪問者がサイト上で最高の体験ができ、コンテンツを理解して楽しむことができるように、論理的な順序に従う必要があります。
※モビリティに問題がある訪問者など、一部の訪問者はスクリーンリーダーを使用せずに Tab キーを使用してサイト内を移動することがあります。 したがって、サイトの DOM 順序が正しいことを常に確認することをおすすめします。
サイトのDOM順序について
DOMは、サイト上のパーツの順序です。 サイト訪問者がスクリーンリーダーやTab キーを使用している場合は、論理的な順序でサイト内を移動できる必要があるため、特に重要となります。
たとえば、サイトメニューが最初に表示され、次にヘッダー内の残りのパーツ、ページタイトル、ページコンテンツの順で表示されるべきです。 DOMの順序が正しくない場合、スクリーンリーダー / Tab キーはページコンテンツをスキップまたはジャンプする可能性があります。
Wix は自動的にDOM順序を設定します。 順序はパーツの視覚的な順序（左から右へ、そして上から下へ）を使用します。 アクセシビリティツールを開発する際、Wix では以下のスクリーンリーダーを使用して製品をテストしています：
Windows + Firefox または Chrome の場合：NVDA（無料のリーダー）
iOS + Safari の場合：Voiceover（内蔵リーダー）
これは、上記のアプリケーションの機能を念頭に置いて、サイトの自動DOM順序を作成したことを意味します。
キーボードの Tab キーまたはライブサイトのスクリーンリーダーを使用して、サイトの自動DOM順序をテストできます。
サイトのDOM順序を変更する
サイトのDOM順序をテストし、順序が論理的でないことに気付いた場合は、アクセシビリティウィザードで手動で変更することができます。
アクセシビリティウィザードは、サイトをスキャンし、潜在的なアクセシビリティの問題を特定し、これらの問題を修正するための実用的な解決策を提供するツールです。 これに加え、サイトの高度なアクセシビリティ設定を変更することもできます。
※サイトのタブ順序が論理的であれば、何もする必要はありません。 既に正しい順序を変更してしまうと、スクリーンリーダーや Tab キーを使用する訪問者に問題が発生する可能性があります。
DOM 設定を変更する方法
ポップアップ画面で「オフにする」を選択します。
エディタ左下で「レイヤー」アイコン を選択します。
リストを確認し、重複するパーツを削除します。 これには、スクリーンリーダー使用者を混乱させる可能性のある不必要な重複パーツを含みます。
残りのパーツをドラッグし、希望の順序に変更します。
※DOM 順序をどうすればいいか わからない場合は、絶対にオフにしないでください。新しい要素を追加するたびに手動で順序を並べ替えなくてはならないからです。 順序を把握するのが大変ですし、ページで慣習から外れたことをしていない場合はオフにしても何のメリットもありません。 ただし 順序をどうすればいいかわかっていて DOM 順序をオフにする必要がある理由もわかっている場合はオフにしても構いません。
※Tab キーを使用してサイトを移動すると、テキストなどの静的なパーツではなく、インタラクティブなパーツのみを移動できます。 テキストなどの静的なパーツでスクリーンリーダーをテストする場合、キーボードを使用してウェブサイトを適切に移動する方法について、ご利用スクリーンリーダーのヘルプセンターの指示に従ってください。
※画面に固定されたパーツは、タブ順序の最後に自動的に配置されます。 順序の早い段階で表示するには、パーツの固定を解除してヘッダーに配置することをおすすめします。
SECTION3Accessibility dev tools
最後に「アクセシビリティ開発ツール」があります。
これを使うとエディタの中に高度なアクセシビリティツールが表示されます。 この機能はデフォルトではオフになっています。
しかし、オンにすると カスタム要素に高度なアクセシビリティオプションが 追加されます。
上のストリップを右クリックすると アクセシビリティのオプションが表示されるようになりました。
クリックしてすると、属性を追加するオプションが 表示されます。
属性とは何でしょうか？ 多くの属性があり、クリックした要素によって 異なります。 今回の場合 aria-label tabindex aria-live role などさまざまな ARIA 要素を追加できます。
もう 1つの注意事項として ARIA 属性が何なのか わからない場合は、使わないほうがいいです。
ARIA 属性は アクセシビリティにおいてとても重要ですが、Wix ではすべてのデフォルト要素にすでに ARIA 属性が追加されています。
カスタムの ARIA 属性を追加する場合はやり方を十分に理解しておく必要があります。
ARIA が不適切に設定されているよりも ARIA がまったくないほうがまだいいからです。
不適切に設定されていると、スクリーンリーダーのユーザーのストレスになります 。
tabindex やその他の属性を 追加するオプションもあります。
これは非常に便利です。
SECTION4Accessibility tool bars
最後にもう 1つ、アクセシビリティオーバーレイツールバーについて触れます。
アクセシビリティツールバーを使用すると、訪問者はフォントやテキストサイズなど、サイトの特定の側面を操作することができます。 Wix には組み込みのアクセシビリティツールバーはありませんが、サードパーティプロバイダが提供するコードを使用してサイトに追加することができます。
これを使用しないでくださいとは言いませんが、、Wix のアクセシビリティチェックリストに従って、アクセシビリティウィザードでサイトをスキャンして訪問者の体験を向上させられていれば、あまり使う必要はないかと思います。
※ウェブコンテンツアクセシビリティガイドラインにある通り、アクセシビリティツールバーの追加は規格に到達するための必須条件ではありません。
サードパーティコードを使用してアクセシビリティツールバーを追加する方法
サイトダッシュボードの設定にアクセスします。
「上級設定」下の「カスタムコード」タブを選択します。
画面右上より「＋カスタムコードを追加」を選択します。
テキストボックスにコードスニペットを貼り付けます。
コードの名前を入力します。
ヒント：後で簡単に識別できるように、認識しやすい名前を付けましょう。
「コードを追加するページを選択：」下でオプションを選択します：
すべてのコードを読み込む：これにより、今後作成する新しいページを含め、サイトのすべてのページにコードが追加されます。訪問ごとに一度だけコードを読み込むか、訪問者が開いたページごとに読み込むかを選択します。
ページごとにコードを読み込む：ドロップダウンメニューを使用して、該当するページを選択します。
コードを配置する場所を選択します：
ヘッド
ボディ - 開始
ボディ - 終了
「適用」を選択します。
今までのWix Learn アクセシビリティ講座要約
第六回Write alt text for imagesはこちら
Wix Tech Salon
アクトワンではWixクリエイターを中心としたオンラインサロンを運営しております！
Wixの知識のシェアや、ビジネスの課題解決、メンバー同士の交流を目的にしています。 ご興味がある方はぜひ覗いてみてください！
Wix Tech Salon >>
Comments