PR TIMES のトップページのアクセシビリティ改善をしました。

2024年7月16日

URLをコピーしました！

こんにちは　PR TIMES開発本部のインターンの Chanoknan です。

PR TIMES のトップページのアクセシビリティ改善に取り組みました。具体的にどのような改善を行ったのかについてお話しします。

アクセシビリティとは？

アクセシビリティとは、ウェブサイトやアプリケーションをすべての人が利用できるようにすることを指します。ここで「すべての人」とは、視覚や聴覚に障害のある人、高齢者、身体的な制約のある人、さらには一時的な障害（例：腕を骨折している、騒がしい場所にいる）を持つ人々も含まれます。アクセシビリティの目標は、誰もが情報に平等にアクセスし、操作できることです。

what’s changed?

PR TIMES のトップページで行ったアクセシビリティ改善について、具体的な内容を紹介します。

PR TIMES のトップページはPHP, Smarty, jQuery からNext.jsにリプレスして、コンポーネントを設計する際にコンポーネントを細かく分割して実装していました。このアプローチは有益ですが、いくつかの課題も導入されています。コンポーネントを組み合わせると、ページレイアウト、見出しの順序、および全体の一貫性に問題が発生します。

調査した結果、修正前のトップページの構成に2つの主な問題があることが判明しました。

WAI ARIA Landmarks原則によれば認識されない領域

Landmarks は、Webページの組織と構造を明確にするための強力なツールです。ページの各セクションは、Landmarksの原則を使用して識別し、役割を割り当てることができます。視覚的に伝わる情報は、LandmarksのRolesを使ってマークアップでプログラム的に表現されるべきです。これにより、スクリーンリーダー利用者もキーボードでWebページの構造をナビゲートすることができます。

視覚を持つユーザーはページの要素を見て理解できますが、スクリーンリーダーを使用するユーザーはタグの属性と記述テキストラベルに完全に依存しています。彼らはサイズ、形状、色などの視覚的な属性を知覚することができません。もしこれらの情報が欠けている場合、その領域はスクリーンリーダーを使用するユーザーにとって実質的に見えなくなります。

以下の図は、修正前のトップページのレイアウトを示しており、斜線の箇所がスクリーンリーダーユーザーには認識されない可能性のある領域を示しています。

見出しの順序と一貫性に関する問題

web開発において、見出し（<h1>, <h2>, <h3>など）はページ上のコンテンツの構造と階層を定義するために使用されています。適切な見出しの使用は、アクセシビリティとSEOの両方に不可欠です。

以下は特定された問題と提案された修正点です。

不適切な見出しの階層

見出しは論理的な順序に従うべきです：メイン見出しには<h1>、サブセクションには<h2>、さらにそのサブセクションには<h3>というように。不一致や誤った見出しレベルの使用は、特にスクリーンリーダー利用者にとって混乱を招き、コンテンツの流れを妨げます。

見出しの欠如や飛ばし

見出しレベルを飛ばす（例：<h1>から<h3>に飛ぶ）や見出しが欠けていると、断片的な構造になります。これにより、ユーザーがコンテンツの階層をナビゲートし理解するのが難しくなります。

これらの問題は　見出しを並べ替えや見出しの追加によって修正できます。

以下は修正前の見出しリストです。

2 - 新着プレスリリース
    3 - 記事のタイトル
        4 - PR TIMESからのお知らせ
2 - プレスリリース・ニュースリリース配信サービスのPR TIMES
    5 - プレスリリース配信サービスの
2 - いま注目のキーワード
2 - カテゴリで検索
    4 - PR TIMES Story Banner
    4 - PR TIMES Magazine Banner
    4 - PR TIMES TV Banner
    4 - PR Editor Banner
    4 - Marph Banner
        5 - ニュースリリース配信サービス
        5 - レコメンドサービス
        5 - PR TIMES公式SNS

そして修正後の見出しリスト

1 プレスリリース・ニュースリリース配信サービスのPR TIMES
    2 旬速
    2 いま話題
    2 今日のランキング
    2 SNSで話題
    2 今週のランキング
    2 今月のランキング
        3 ランキング内の記事タイトル
    2 新着プレスリリース
        3 記事のタイトル  
    2 PR TIMESからのお知らせ
    2 プレスリリース・ニュースリリース配信サービスのPR TIMES
    2 サイドバー
        3 プレスリリース配信サービスの
        3 いま注目のキーワード
        3 カテゴリで検索
        3 PR TIMES Story
            4 記事のタイトル
        3 PR TIMES Magazine
            4 記事のタイトル
        3 PR TIMES Tv
            4 記事のタイトル
        3 PR Editor
            4 記事のタイトル
        3 Marph
            4 記事のタイトル
    2 フッター
        3 ニュースリリース配信サービス
        3 レコメンドサービス
        3 PR TIMES公式SNS

これにより、スクリーンリーダー利用者にとって、文書のアウトラインはこれで正く表示されています。しかし、追加の見出しは視覚的なデザインを台無しにします。追加の見出しが視覚的なデザインを台無しにしないようにするために、視覚的に非表示にすることができます。これは、視覚的に非表示のコンポーネントを作成することで実現しました。

type VisuallyHiddenProps<T extends ElementType> = {
  readonly tag?: T;
} & Omit<ComponentPropsWithoutRef<T>, 'tag'>;
export function VisuallyHidden<T extends ElementType = 'span'>({
  tag,
  children,
  ...props
}: PropsWithChildren<VisuallyHiddenProps<T>>) {
  const Tag: ElementType = tag || 'span';

  return (
    <Tag css={styles.visuallyHidden} {...props}>
      {children}
    </Tag>
  );
}

const styles = {
  visuallyHidden: css`
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  `,
};

要素を視覚的に隠しつつ、スクリーンリーダーにはアクセス可能な状態に保つことができます。特に、コンポーネント内で動的に隠し要素を追加する必要がある場合に便利です。

export function TopPageAside() {
  return (
    <aside css={styles.aside}>
      <div css={styles.container}>
        <VisuallyHidden tag='h2'>サイドバー</VisuallyHidden>
        <CommercialMessageBanner />
        <PopularKeywords css={styles.popularKeywords} />
        <CategorySearch />
        <StoryBanner />
        <MagazineBanner />
        <TvBanner />
        <PrEditorBanner />
        <MarphBanner />
      </div>
    </aside>
  );
}

以下はその使用例です：

この方法で、すべてのユーザーが適切で完全な文書アウトラインの恩恵を受けることができます。

以下は修正の実施前と実施後のトップページのページ構成の図です。