React でアクセス可能なプログレスバーを作成する方法

プログレスバーは、達成すべき目標を提供するため、ユーザーエンゲージメントに最適です。リソースを待機している Web ページをじっと見つめる代わりに、進行状況バーがいっぱいになるのがわかります。プログレスバーは目の見えるユーザーだけに限定されるべきではありません。誰もがプログレスバーを簡単に理解できるはずです。

では、React を使用してアクセシブルなプログレスバーを作成するにはどうすればよいでしょうか?

今日のメイク動画

プログレスバーコンポーネントを作成する

ProgressBar.js という新しいコンポーネントを作成し、次のコードを追加します。

const ProgressBar = ({progress}) => { 
    return ( 
        <div> 
            <div role="progressbar" 
                 aria-valuenow={progress} 
                 aria-valuemin={0} 
                 aria-valuemax={100}> 
                <span>{`${progress}%`}</span> 
            </div> 
        </div> 
    ); 
}; 
   
export default ProgressBar;

最初の div 要素はコンテナーで、2 番目の div 要素は実際の進行状況バーです。 span 要素は、プログレスバーのパーセンテージを保持します。

アクセシビリティの目的で、2 番目の div には次の属性があります。

プログレスバーの役割。
aria-valuenow は進行状況バーの現在の値を示します。
プログレスバーの最小値を示す aria-valuemin。
プログレスバーの最大値を示す aria-valuemax。

プログレスバーの最大値と最小値が 0 と 100 の場合、HTML のデフォルト値がこれらの値であるため、aria-valuemin 属性と aria-valuemax 属性は必要ありません。

プログレスバーのスタイリング

インラインスタイルまたは styled-components のような CSS-in-JS ライブラリ .これらのアプローチは両方とも、コンポーネントから CSS に props を渡す簡単な方法を提供します。

進行状況バーの幅は props として渡される進行状況の値に依存するため、この機能が必要です。

次のインラインスタイルを使用できます。

AndroidTVボックス2018の最高のランチャー

const container = { 
    height: 20, 
    width: "100%", 
    backgroundColor: "#fff", 
    borderRadius: 50, 
    margin: 50 
} 
  
const bar = { 
    height: "100%", 
    width: `${progress}%`, 
    backgroundColor: "#90CAF9", 
    borderRadius: "inherit", 
} 
  
const label = { 
    padding: "1rem", 
    color: "#000000", 
}

以下に示すように、コンポーネントの戻り部分を変更して、スタイルを含めます。

CB91C07329D9D2A9F1AE877C5FDECF9045636CB

プログレスバーを次のようにレンダリングします。

<ProgressBar progress={50}/>

これにより、50% 完了した進行状況バーが表示されます。

React でコンポーネントを構築する

アプリケーションの任意の部分で再利用できるパーセンテージ付きのアクセス可能なプログレスバーを作成できるようになりました。 React を使用すると、このような独立した UI コンポーネントを作成し、複雑なアプリケーションのビルディングブロックとして使用できます。

プログレス バー コンポーネントを作成する

プログレスバーのスタイリング

React でコンポーネントを構築する

プログレスバーコンポーネントを作成する