ページネーションのアクセシビリティ対応

コンテンツ一覧ページでは、複数のページに分割し、ページ番号ごとに一定の数を出すページネーションが主流ですが、最近では、アクセシビリティ対応だけではなく、ユーザビリティ向上を目的として、代替手法を使ったサイトも増えてきています。

コンテンツ一覧を1ページにして、ユーザーがページを下にスクロールするにつれて、さらにコンテンツを継続的に読み込んでいく無限スクロールや、「もっと見る」ボタンを置いてユーザーのクリックにより、追加コンテンツを表示させていく手法などです。

この手法では、サイトに再訪した時に、コンテンツを見つけにくいデメリットがある反面、直感的にスムーズにコンテンツを表示させることができ、ページの回遊率を高めることができるといったメリットもあります。

Googleでは、ユーザビリティ向上として、モバイルの検索結果ページで、ページネーションの代わりにコンテンツを1ページにする手法も使い始めています。

３つの手法のメリットデメリットはこちらになります。

ページネーションには、移動する回数も増え、操作性の部分では、デメリットもありますが、他の手法に比べて、1ページの読み込むコンテンツ量は少なくなり、表示速度の向上も期待できます。

ページネーションだけの実装ではなく、サイトに合った手法も検討すると良いでしょう。

一般的なページネーションでは、何もアクセシビリティを考慮しないと、視覚的には簡単に理解できる内容も、スクリーンリーダーを使ってウェブサイトを操作している人には、音声に頼っているためわかりにくくなってしまいます。

例えば、記号部分（「«」「‹」）の役割や現在のページ位置などを正しく理解できない状態になっているケースが多いです。

ページネーションの要素が何を示しているのか理解できるページネーションを実装することで、誰もが快適に利用できるウェブサイトとなり、サイトの回遊率やコンバージョン率（CV率）の向上も期待できますので、しっかりとアクセシビリティ対応を考えることをおすすめします。

今回は、Reactのライブラリ「react-paginate」でページネーションを実装して、必要なアクセシビリティ対応について、確認していきます。

react-paginateは、出力される番号の数、各タグへのクラス名の付与によって、とてもカスタマイズ性、自由度も高いのが特徴で、すでに下記でご紹介しているように様々なプロパティが用意されています。

プロパティ一覧

詳細は、公式ページをご確認ください。

https://www.npmjs.com/package/react-paginate

実際の出力方法

今回は、https://jsonplaceholder.typicode.com/posts(post総量:100)からテストデータを取得して、ページネーションを出力する手順をご紹介していきます。

# npm installで「react-paginate」導入
npm install react-paginate

詳細は、公式ページをご確認ください。

https://www.npmjs.com/package/react-paginate

コード

# モジュールのimport
import ReactPaginate from 'react-paginate';

export default function Pagination() { 
         useEffect(() => { 
         　const getPosts = async () => { 
                  await fetch('https://jsonplaceholder.typicode.com/posts') 
                  .then((res) => res.json())
                  .then((posts) => setPosts(posts)); 
               }; 
               getPosts(); 
         }, []);         
 
         const [posts, setPosts] = useState<post[]>([]);
         const itemsPerPage = 10;
         const [itemsOffset, setItemsoffset] = useState(0); 
         const endOffset = itemsOffset + itemsPerPage;
         const currentPosts = posts.slice(itemsOffset, endOffset);
         const pageCount = Math.ceil(posts.length / itemsPerPage);
         const handlePageClick = (e: { selected: number }) => { 
              const newOffset = (e.selected * itemsPerPage) % posts.length; 
              setItemsoffset(newOffset); 
          };          

       return (
          <ReactPaginate className={styles.pagination} 
                pageCount={pageCount} 
                onPageChange={handlePageClick} 
                 containerClassName='pagination' 
                 pageClassName={styles['page-item']} 
                 pageLinkClassName={styles['page-link']} 
                 activeClassName={styles['active']} 
                 previousLabel='＜' 
                 nextLabel='＞' 
                 previousClassName={styles['page-item']} 
                 nextClassName={styles['page-item']} 
                 previousLinkClassName={styles['page-link']} 
                 nextLinkClassName={styles['page-link']} 
                 disabledClassName={styles['disabled']} 
                 breakLabel='...' 
                 breakClassName={styles['page-item']} 
                 breakLinkClassName={styles['page-link']} 
            /> 
        ); 
   }

今回は、取得したデータの総量(100)を1ページあたり10個の表示とし、itemsPerPageに値を挿入しています。

また取得してきたpostの総量を[itemsPerPage]で割り、pageCount (表示する番号数)のプロパティに代入しています。

const itemsPerPage = 10;
const pageCount = Math.ceil(posts.length / itemsPerPage);

ブラウザの表示状態

出力されるDOM

<ul class="page_pagination__xCT8N" role="navigation" aria-label="Pagination">
    <li class="page_page-item__pOTSF page_disabled__Q_o3_">
        <a 
              class="page_page-link__ERh_0 " 
               tabindex="-1" role="button" 
               aria-disabled="true" 
               aria-label="Previous page" 
               rel="prev">
              ＜
            </a>
    </li>
    <li class="page_page-item__pOTSF page_active__pmrpD">
       <a 
             rel="canonical" 
             role="button" 
              class="page_page-link__ERh_0" 
              tabindex="-1" 
              aria-label="Page 1 is your current page" 
              aria-current="page">
              1
        </a>
    </li>
    <li class="page_page-item__pOTSF">
       <a 
            rel="next" 
            role="button" 
            class="page_page-link__ERh_0" 
            tabindex="0" 
            aria-label="Page 2">
          2
       </a>
     </li>
    <li class="page_page-item__pOTSF">
       <a role="button" class="page_page-link__ERh_0" tabindex="0" aria-label="Page 3">3</a>
    </li>
    <li class="page_page-item__pOTSF">
       <a class="page_page-link__ERh_0" role="button" tabindex="0" aria-label="Jump forward">...</a
    </li>
    <li class="page_page-item__pOTSF">
       <a role="button" class="page_page-link__ERh_0" tabindex="0" aria-label="Page 8">8</a>
    </li>
    <li class="page_page-item__pOTSF">
       <a role="button" class="page_page-link__ERh_0" tabindex="0" aria-label="Page 9">9</a>
    </li>
    <li class="page_page-item__pOTSF">
        <a role="button" class="page_page-link__ERh_0" tabindex="0" aria-label="Page 10">10</a>
     </li>
     <li class="page_page-item__pOTSF">
        <a 
             class="page_page-link__ERh_0" 
              tabindex="0" 
              role="button" 
              aria-disabled="false" 
              aria-label="Next page" 
              rel="next">
            ＞
         </a>
     </li>
</ul>

今回「react-paginate」のアクセシビリティ対応について、ポイントに沿って確認してきます。

スクラッチでの実装や、プラグイン対応した際など、ページネーションがしっかりとアクセシビリティ対応されているかの確認にも役立ててみてください。

※【表記】は、「react-paginate」で実装されている表記となります。

aria-label属性

ページ番号や、次へ前へのaria-label属性は、スクリーンリーダーを利用するユーザーには、非常に重要な情報となります。

【表記】

aria-label="Page 2"

aria-label="Previous page"

aria-label="Next page"

aria-current属性

スクリーンリーダーを利用するユーザーに対して、aria-current属性の付与することで、その要素が「現在表示されているページ」を示していることが伝えられます。

【表記】

aria-current="page"

◾️aria-currentの属性値別の説明

aria-disabled属性

1ページ目での前へボタン、最終ページでの次へボタンや、スクリーンリーダー等での読み上げをスキップさせる配慮が、ユーザーを効率良くページを遷移させることができます。

【表記】

aria-disabled="true"

(aria-disabled="false"は読み上げられる状態)

キーボード操作への配慮

キーボード操作を行う方は、特定の場所まで、クリックして進むしかありません。

現在地(カレントページ)のボタンや、最終ページでの次へボタンなど、操作上、一時的に不要になるボタンへは、tabindex を適宜付与することで、遷移させない配慮が必要となります。

【表記】

tabindex="-1"

最適なページネーションの個数

ページネーションの個数が多すぎると、視覚的にも操作的にも効率の悪いものになってしまいます。

キーボード操作で説明したように、クリック操作を行ってサイトを閲覧するユーザーには、リンクの数を減らして効率良く遷移させることが必要です。

「react-paginate」では、marginPagesDisplayedやpageRangeDisplayedで、表示個数のコントロールができます。

marginPagesDisplayed={1} //先頭と末尾に表示するページの数 
pageRangeDisplayed={3} //選択位置の前後で表示する番号の件数

またより最適なページネーションのために、PCとスマホで、番号の表示個数を変更して、ユーザビリティの向上を行うことも効果的です。

今回、ページネーションについて、重要な対応ポイントや、現状について、説明してきました。

「react-paginate」では、アクセシビリティ対応がしっかりとされている状態でしたが、何気なく、導入したCMSでのプラグインなど、アクセシビリティへの配慮ができていない場合もあります。

また昨今WEBサイトは、スマホからのアクセスが非常に多くなってきており、このような背景から見ても、ページネーションだと、ボタン数が多く、アクセシビリティだけでなく、ユーザビリティを低下させてしてしまう場面もあります。

サイト規模や、サイトのコンテンツによって、最適な手法は一つには限られませんが、Googleのように、PCとスマホのUIを変更することで、ユーザビリティも向上させる一つの対策になりますので、ぜひ検討してみてください。

デパート採用情報

株式会社デパートでは一緒に働く仲間を募集しています