アクセス可能な反応カルーセルを構築する

ちょっとフロントエンド開発者!あなたの反応に取り組んでいます.JSスキル?反応フックを使用するプロジェクトをお探しですか?あなたがスクラッチから複数の項目でアクセス可能な反応カルーセルを構築する方法を学ぶためにしたい場合は、1つは、アクセス可能な、準備ができており、包括的な場合は、適切な場所にいる.
推定読書時間:10分
Original Post here.

アクセス可能な反応カルーセルプロジェクト

このビルドの背後にあるアイデアは、任意のデバイスを使用して任意のユーザーのための簡単でフレンドリーな経験を持つように構築された反応にアクセス可能なカルーセルです.
アクセス可能な反応カルーセルは、異なるユーザーが直面するこれらの特定の問題に取り組みます.
目撃されたユーザーのための視覚経験をつくる

非観視の、または、よりため息のないユーザー

のための音声経験をつくる

英語を話すことができないため息のない、ためらった、または、よりため息のないユーザーのための翻訳準備プロジェクトを構築する

は、前庭または感覚障害をもつユーザーのためにアニメーション同意を構築しました.

認知症のための

色、図像学とラベル.

この反応しやすいアクセス可能なカルーセルは、それを等しく経験するために、ため息をついて、非目撃のユーザーを許す機能で、箱から出ます.カルーセルは、それと対話することに同意している人々のために相互に作用するために造られます.
言い換えれば、感覚やバランスの問題に対処する人々は、カルーセルが最初にロードするときに動きを見ざるを得ないでしょう.代わりに、彼らはカルーセルと対話するかどうかを選択するようになる.
このカルーセルのすべての機能は、翻訳サービスを誰でも視覚的にこのカルーセルを体験できるように準備ができて翻訳です.
the build hereとsee it in action right hereをチェックしてください.

鍵概念

フォーカス管理とフィードバック-私はキーボードフォーカスについて考えていたとどのように私は別のデバイスから私のカルーセルにアクセスするユーザーにフィードバックを提供するためにそれを使用することができます.

👀 どうやってユーザーを指示するhow I use focusをチェックしてください.
👀 私がincorporate that focus into the feedbackの方法をチェックしてください.

同意-一部のユーザーのために予期せぬ動きは不快と動揺を引き起こすことができます.これらはあなたが構築したものに理想的な反応ではないので、なぜあなたのユーザーは、彼らが運動と対話するかどうかを選択する方法を提供しないのですか?

👀 カルーセルギャラリーコントロールでhow I manage consent をチェックしてください.

アプリケーションコンポーネント

我々はアプリケーションコンポーネントでカバーするつもりです主要な要素は、スライドコンポーネント、指示、およびギャラリーコントロールです.下の画像で見ることができますように
5無順序のリスト要素内のコンポーネントをスライドさせます.
以下の[アリアLabelledby ="ギャラリーラベル"]の要素は、命令divです
下に我々のギャラリーコントロールのdivどこで我々はボタンのコンポーネントを使用しています.

アプリケーションコンポーネントの状態と機能

Applicationコンポーネントは、USESTATE ()を使用して、モバイルユーザーのマウスタッチイベントを処理するために、主要素に対してフックを使用します.状態のこの使用の後のポイントは、命令コンポーネントの私達のラベリングが適切に移動するだけでなく、デスクトップ上で動作することを保証することです.
このような状態の使用を定義します.
const [触れられて、沈んだ] = USEstate (');
このようにメインの要素に状態を設定し、OnTouchStart関数を呼び出します.
次に、触れたときにメイン要素にクラス名を追加するOnmainTouchStart関数を作成します.

const onMainTouchStart = () => {
    setTouched('touched');
}`
Styling the touched class
We add the following style which is going to make a lot more sense when we build the instruction component:

`.touched #hover {
    display: block!important;
}

フォーカス管理

要素には、tabindex属性を0に追加します.これにより、ユーザーはカルーセルコンポーネントの本体に移動できます.
キーボードがこの要素に集中するとき、ユーザーがそれの上にそれをするならば、指示は異なるメッセージを出力します.それは、メッセージがデバイスに応じてより明確に役立ちます.

<div role="region" aria-labelledby="gallery-label" tabIndex="0" aria-describedby="focus">`

##Instructions
The instructions div contains a paragraph tags that explain to the user how to interact with the accessible carousel.

##Instruction HTML
    `<div className="instructions">
        <p id="hover">use buttons or scroll left or right for more</p>
        <p id="focus">use buttons, tab, or your left and right arrow keys for more</p>
    </div>

インストラクション

次に、これらの段落の各々をスタイルにする必要があるので、正しい指示だけがユーザからのデバイスとインタラクションによって現れます.我々は、ホバーとフォーカスメッセージの表示をNoneに設定することから始めます.
以下のようにします.触れたクラスは、ギャラリーのラベル要素がキーボードでフォーカスされているか、タッチデバイスによってタッチされたときに表示されます.

#hover, #focus {
    display: none;
    text-align: center;
    max-width: 50%;
    word-break: break-word;
    margin: 10px auto;
}
[aria-labelledby="gallery-label"]:hover + .instructions #hover, 
[aria-labelledby="gallery-label"]:focus + .instructions #focus,
.touched #hover {
    display: block!important;
}

キーボードが[アリアLabelledBy ="Gallery Label "]要素に集中するとき、段落はボタン、タブキー、または左または右の矢印ボタンを使用するユーザーに説明します.
ユーザーがマウスまたはタッチスクリーンを使っていて、この要素に集中するならば、パラグラフは彼らにボタンを使うか、左または右にスクロールさせるよう命令します.
これは部分的にフィードバックの重要な概念であり、部分的にフォーカスの概念です.ユーザーがコンポーネントにアクセスする方法は、与えられた指示の種類を通知します.

スライドコンポーネント

スライドコンポーネントは、リスト項目、図、イメージとリンクされたfigcaptionで構成されます.このコンポーネントの背後にあるアイデアは、イメージアイテムのギャラリーです.私たちは、これらのものを何でも欲しいものにすることができました、ポストカルーセルのように、しかし、このチュートリアルの目的のために、我々はイメージギャラリーをしています.
以下に、リスト項目、図、img、figcaption etcなどがスライドコンポーネントを構成します.

Unsplash APIドキュメンテーションによると、ギャラリーはアーティストのプロフィールへのリンクを持っていなければなりません.他にいくつか必要なアイテムがあります.
ギャラリーをアクセスできるようにするには、イメージもALTの記述を含める必要があります.Unsplashのいくつかのアーティストは、Altの説明を組み込むとunsplash APIを使用して、その情報を小道具にプルすることができます.

ギャラリーアイテムには次のように含める必要があります。

イメージURL

アーティスト名

のイメージが

でlazyloadedされるべきであるかどうか
我々は、カルーセルの負荷時間をスピードアップするためにクロムネイティブレイジーロードを使用するつもりです.最初の絵のイメージは、怠惰なロードされてはいけません.最初の2つの画像をデフォルトで表示するためにカルーセルを設計したので、最初の2つのスライドコンポーネントで怠惰な読み込み属性を取り出しました.

スライドコンポーネントの小道具

スライド成分の支柱は以下の通りである

私たちは{ url } propをイメージファイル

に渡します

ALT属性は{記述} prop

を取得します

アーティストの名前は{キャプション}プロップ

です

｛ユーザー｝柱

としてのアーティストの関連
“反応”から反応をインポート;

const Slide = ({url, description, caption, user, loading}) => {
return (
<li>
    <figure>
        <img loading={loading} width="700px" src={url} alt={`the photographer's desctipion is ${description}`} />
        <figcaption><a href={user} target="_blank" rel="noreferrer" title={`to ${caption} profile`}> By: {caption}</a></figcaption>
    </figure>
</li>
);
}

export default Slide;

一度スライドがアプリケーションコンポーネントに組み込まれていて、これらの小道具をunsplash APIから定義したら、次のようになります.

ギャラリーコントロール

我々は、2つのリストアイテムトグルボタンを含むギャラリーコントロールを構成します.ボタンはユーザーのカルーセルをスクロールします.あなたは、このカルーセルが自動的にスクロールしないことによって、今気づいたかもしれません.それは意図的です.

承諾管理

ペースの速い動きは、実際にいくつかのユーザーのための物理的な痛みや不快感を引き起こすことができます.ユーザーが彼らが望むとき、ギャラリーを動かすために完全な支配をすることは、要素のこれらのタイプを設計するより包括的な方法です.

ボタンコンポーネントの組み込み

Check out my accessible toggle buttons post hereこれらの非常に再利用可能なコンポーネントを構築する方法を学ぶ.私はこれらのボタンをとって、同じアプリ構成要素ファイルの中に彼らを置きました.

ボタンコンポーネントの小道具

このチュートリアルをチェックアウトすると、このプロジェクトのボタンコンポーネントで小道具の動作を変更したことに気付きました.

「ボタン」コンポーネントには、次の小道具が必要です。

{ボタンテキストとクラス名のラベル}、

適切なフォント素晴らしいアイコン

{ fonticon }、

アリアの状態を制御する

{ Aributton }は属性を押しました、そして、

{ Onevent }ボタンを使用するためのユニークなイベント処理を作成します.

「アプリケーション」コンポーネントと同じファイルに「ボタン」コンポーネントを含める

const Buttons = ({label, fontIcon, ariaButton, onEvent}) => {
    return (
        <div className="button-section">
        <button onClick={onEvent} className={label} aria-pressed={ariaButton} type="button">{fontIcon}{label}{fontIcon}</button>
        </div>
            );
}

私は別のタスクを実行するために私の前と次のボタンが必要に気づいた.前のボタンは、左にスクロールするために必要な次の右にスクロールするために必要.私は、Fonticon柱がボタンのために必要なアイコンを呼ぶことができたように、これらのボタンをリファクタリングすることができました.

ボタンコンポーネントの状態を利用する

私たちは、AIAが押された属性のために我々のボタンの機能とスタイルを扱う状態を定義しています.
faiconnextとfaiconprevの状態は、ボタンを使用するフォント素晴らしいアイコンを定義します.

//button hooks
    const [ariaPressed, setAriaPressed] = useState(false); 
    const [faIconNext, setFaIconNext]           = useState(<FontAwesomeIcon icon={faForward} />);
    const [faIconPrev, setFaIconPrev]           = useState(<FontAwesomeIcon icon={faBackward} />);

USEFフックでスクロール関数を利用する

アプリケーションコンポーネントで、GalleryRefを定義します

const galleryRef            =   useRef();
Back on the aria-labelledby="gallery-label" element, we utilize this ref:

<div ref={galleryRef} role="region" aria-labelledby="gallery-label" tabIndex="0" aria-describedby="focus">

スクロール関数

アプリケーションコンポーネントの内部では、次のスクロールを作成します.

const scrollNext = () => {
    galleryRef.current.scrollBy({
        top: 0,
        left: 625,
        behavior: 'smooth'
      });
}
const scrollPrev = () => {
    galleryRef.current.scrollBy({
        top: 0,
        left: -585,
        behavior: 'smooth'
      });
}

ボタンイベント

「ボタン」コンポーネントの各ボタンに対するOnEventプロップを定義します.

        <li>
        <Buttons ariaButton={ariaPressed} onEvent={onButtonPrevClick} fontIcon={faIconPrev} label="previous" />
        </li>
        <li>
        <Buttons ariaButton={ariaPressed} onEvent={onButtonNextClick} fontIcon={faIconNext} label="next" />
        </li>
Next inside the onButtonNextClick and onButtonPrevClick functions we’ll call the scrollNext or scrollPrev functions respectively, and set the state for the font icon.

//next click
const onButtonNextClick = () => {
    scrollNext();
   if (ariaPressed === false){
        setAriaPressed(true); 
       setFaIconNext(<FontAwesomeIcon icon={faThumbsUp} />);
       setTimeout(() => {
        setAriaPressed(false);
        setFaIconNext(<FontAwesomeIcon icon={faForward} />);
     }, 600);
     console.log("button clicked");

   } else {
      setAriaPressed(false);
      setFaIconNext(<FontAwesomeIcon icon={faForward} />);
}
}
//prev click
const onButtonPrevClick = () => {
        scrollPrev();
    if (ariaPressed === false){
         setAriaPressed(true); 
        setFaIconPrev(<FontAwesomeIcon icon={faThumbsUp} />);
        setTimeout(() => {
         setAriaPressed(false);
         setFaIconPrev(<FontAwesomeIcon icon={faBackward} />);
      }, 600);
  console.log("button clicked");
    } else {
       setAriaPressed(false);
       setFaIconPrev(<FontAwesomeIcon icon={faBackward} />);
 }
 }

What we end up withは、我々のボタンの各々の粘着性と正確なボタン行動です.

結論

うまくいけば、今、あなたは反応でアクセス可能なカルーセルの任意の種類を構築するために必要な基本的なビルディングブロックを持っている.js
ユーザーのより広い視聴者を利用し、あなたの反応にアクセス可能なカルーセルを楽しむことができます.
いくつかの重要な概念は、デバイスと現在の使用法に基づいて視覚的なフィードバックを作成する方法だった.我々は、目撃者のための簡単な認知負荷の色、図像、ラベリングを利用しています.我々は、目撃者ではなく、英語を話すことができないユーザーにラベリングを組み込むことによって、我々の聴衆を広げました.そして、フォーカス管理と同意を組み込むことによって、我々のアクセス可能な反応カルーセルは、ユーザーのすべてのタイプを含みます.
Unsplashの上のSerge Kutuzovによる写真
より反応プロジェクトをお探しですか?how to make an accessible To Do Listをチェックし、どのようにAccessible Toggle Buttonsを作成します.