2 日前

Wix Learn スマホサイトのアクセシビリティを設定する

更新日：1 日前

こんにちは！

Wixを専門とするホームページ制作会社、アクトワン代表の和田英也です！

今回もウェブアクセシビリティについて発信いたします。

ついに今回で最終回、WixLearn第11回の「スマホサイトのアクセシビリティを設定する」を詳しく解説いたします。

このレッスンでは、アクセシビリティのためにモバイルサイトを最適化する方法を紹介します。

アクセシビリティを必要とするユーザーがスマートフォンを使用していないと想定することは、まずありえません。

必ず最適化しておきましょう！

また、モバイルサイトも最適化することはサイト全体のSEO (検索エンジン最適化) の向上にも繋がります。

それでは早速本題に進みましょう！

今までのWix Learn アクセシビリティ講座要約

第一回Understand web accessibilityはこちら

第二回Set up navigation and pagesはこちら

第三回Play Make an accessible themeはこちら

第四回Add content and heading tagsはこちら

第五回Write for accessibilityはこちら

第六回Write alt text for imagesはこちら

第七回Add alternative media and animationsはこちら

第八回Write an accessibility statementはこちら

第九回Check out advanced accessibility optionsはこちら

第十回Audit your websiteはこちら

SECTION1 Make your mobile site accessible
最後に

SECTION1 Make your mobile site accessible

モバイルエディターにアクセスするには、小さなモバイルアイコンをクリックします。

すると、アルゴリズムで最適化されたモバイルサイトが表示されます。

以下の3点に注目してモバイルサイトを修正していきましょう。

①無駄なスペースがないかをチェックする

「Buy gluten-free spelt」の部分が下の画像と重なってしまっています。

タブとストリップを調整すると、簡単に修正できます。

➁詰め込まれているコンテンツがないかをチェックする

ここまできちんとアクセシビリティ対策を行っていれば問題はありませんが、怠っていると、テキストが長くなっている可能性があります。

デスクトップで5行～6行だったコンテンツの多くが10行～12行ほどになってしまうこともあります。

これはかなり詰め込まれています。

ユーザーは 1つのテキストブロックで、そこまで多くの文字を読みたくはありません。

その場合はモバイルエディタに戻って、文章を書き直すか、もっと多くのブロックに分割する必要があります。

③DOM順序を最適化する

エディタは DOM 順序をアルゴリズムで最適化します。その順序が気に入らないときや、少し変えたいときも簡単に編集できます。

たとえば「Sourdough bread」をサワードウブレッドの写真の下に移動させ「Cold brew coffee」や「Pretzel paradise」も同じように移動させたいとします。

そうするには「ツール」「レイヤー」の順に移動し、DOM順序の中でその要素を見つけるだけです。

この順序がモバイルサイトにあるすべての要素同じ順序であることを確認します。

今回は以上です。

最後に

ウェブサイトのアクセシビリティとは、個人がウェブサイトを十分に利用することを妨げる障壁を取り除き、他の誰もが利用できるのと同じ優れたユーザーエクスペリエンスを提供することです。

Wixで制作された各Webサイトを、次のような人々にとっても、より使いやすくすることは大切です。

視覚障害
運動障害
聴覚障害
認知障害
状況的または一時的な障害

誰もが受け入れられるウェブサイトを設計すること、インターネットを誰もが受け入れられる場所にすることは、ウェブサイトの訪問者と所有者の両方に利益をもたらします。

オンラインストア、ビジネスウェブサイト、オンラインポートフォリオの管理など、どのようなサイトを運営している場合でも、アクセシビリティの高いサイトはブランドを強化し、パフォーマンスを向上させ、法的リスクを最小限に抑えます。

サイトのアクセシビリティを向上させる取り組みと SEO (検索エンジン最適化) への取り組みは、相互に排他的ではありません。

実際のWixでのWeb デザインに実装されているWebアクセシビリティ機能の多く (代替テキストや見出しタグなど) により、Google の検索結果におけるサイトのパフォーマンスも向上しています。

包括的であることは、オーディエンスと顧客基盤も拡大することを意味します。

障害を持つ多くの買い物客がオンラインに移行し、6 兆ドルを超える購買力を持つ市場が生まれています。

つまり、オンラインで存在感を示す企業は、潜在的な顧客に平等なアクセスを提供することが重要です。

また、アクセシビリティに注意を払うことで、ブランドのイメージが好転し、ユーザーエクスペリエンスと満足度が向上します。

多様性をミッションの一部とするWebサイトとブランドは、顧客との良好な関係とブランドロイヤルティを育む鍵となります。

さらに、訪問者に対して、社会の変化と包括性を重視していることを示すことができます。

アクセシビリティツール、機能、製品は、すべてのサイト訪問者にメリットをもたらす予期しない問題を解決します。これには、完全なキーボード機能、スマートフォーカスリング、スクリーンリーダー用のコンテンツのフォーマットなどが含まれます。

Wix では、Webアクセシビリティの業界標準を確立し、Web クリエイター、デザイナー、開発者、さらには競合他社に刺激を与えて、誰もが Web を十分に体験し、操作できる革新的なソリューションを推進することを目指しています。