React アクセシビリティガイド: フロントエンドアプリケーションのアクセシビリティを確保する方法-jsチュートリアル-php.cn

React アクセシビリティガイド: フロントエンドアプリケーションのアクセシビリティを確保する方法

王林

リリース： 2023-09-26 16:34:50

オリジナル

672 人が閲覧しました

React アクセシビリティガイド: フロントエンドアプリケーションのアクセシビリティを確保する方法

インターネットの発展に伴い、ますます多くの人が Web アプリケーションに依存し始めています。彼らのさまざまなニーズに応えます。ただし、視覚、聴覚、または運動障害を持つ一部のユーザーにとって、Web アプリケーションの使用は簡単ではない場合があります。私たちのアプリケーションを誰でも確実に使用できるようにするために、アクセシビリティはフロントエンド開発の重要な側面となっています。

React は、ユーザーインターフェイスの構築に広く使用されている人気の JavaScript ライブラリです。この記事では、React を使用してフロントエンドアプリケーションのアクセシビリティを確保する方法に焦点を当て、いくつかの具体的なコード例を示します。

セマンティックタグを使用する

React コードを作成するときは、div 要素だけを使用するのではなく、セマンティックタグを使用するようにしてください。セマンティックタグは、より多くのコンテキスト情報を提供できるため、スクリーンリーダーがアプリケーションの構造をよりよく理解して解釈できるようになります。たとえば、

、

サンプルコード:

import React from 'react';

function App() {
  return (
    <div>
      <header>
        <h1>网站标题</h1>
      </header>
      <nav>
        <ul>
          <li>首页</li>
          <li>产品</li>
          <li>关于我们</li>
        </ul>
      </nav>
      <main>
        <h2>欢迎来到我们的网站</h2>
        <p>这是一个关于我们的网站的描述。</p>
      </main>
      <footer>
        <p>版权所有 © 2021。</p>
      </footer>
    </div>
  );
}

export default App;

ログイン後にコピー

アクセス可能なフォームコンポーネントを提供する

フォームコンポーネントの場合、各フォームフィールドがラベルに関連付けられていることを確認し、明確な説明。 htmlFor 属性を使用して、ラベル要素を対応するフォームフィールドに関連付けます。また、aria-label または aria-labelledby 属性を使用して、より詳しい情報を提供します。

サンプルコード:

import React, { useState } from 'react';

function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleUsernameChange = (e) => {
    setUsername(e.target.value);
  };

  const handlePasswordChange = (e) => {
    setPassword(e.target.value);
  };

  return (
    <div>
      <label htmlFor="username-input">用户名:</label>
      <input
        id="username-input"
        type="text"
        value={username}
        onChange={handleUsernameChange}
      />

      <label htmlFor="password-input">密码:</label>
      <input
        id="password-input"
        type="password"
        value={password}
        onChange={handlePasswordChange}
      />

      <button type="submit">登录</button>
    </div>
  );
}

export default LoginForm;

ログイン後にコピー

意味のある対話プロンプトを提供する

ユーザーがアプリケーションを操作するときに、意味のある対話プロンプトを提供する必要があります。ユーザーの理解を助けるプロンプト情報彼らは何をやってるの。たとえば、ボタンの機能をより明確に説明するには、ボタンに aria-label 属性を追加します。間違った入力ボックスの横にエラーメッセージを表示して、ユーザーをガイドします。

サンプルコード:

import React, { useState } from 'react';

function SignupForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errorMessage, setErrorMessage] = useState('');

  const handleEmailChange = (e) => {
    setEmail(e.target.value);
  };

  const handlePasswordChange = (e) => {
    setPassword(e.target.value);
  };

  const handleSignup = () => {
    // 执行注册逻辑，并处理错误
    if (password.length < 6) {
      setErrorMessage('密码至少需要6位字符');
    } else {
      setErrorMessage('');
      // 注册成功的逻辑
    }
  };

  return (
    <div>
      {errorMessage && <p>{errorMessage}</p>}

      <label htmlFor="email-input">电子邮件:</label>
      <input
        id="email-input"
        type="email"
        value={email}
        onChange={handleEmailChange}
      />

      <label htmlFor="password-input">密码:</label>
      <input
        id="password-input"
        type="password"
        value={password}
        onChange={handlePasswordChange}
      />

      <button type="button" onClick={handleSignup} aria-label="注册按钮">注册</button>
    </div>
  );
}

export default SignupForm;

ログイン後にコピー

概要:

上記は、React を使用してアクセシビリティ機能を実現するサンプルコードです。セマンティックタグを使用し、フォームフィールドとラベルを関連付け、明確な説明を提供し、フレンドリーな対話プロンプトを提供することで、フロントエンドアプリケーションをよりアクセスしやすくすることができます。これらのガイドラインが、よりアクセスしやすい React アプリケーションの構築に役立ち、より多くの人が障壁なくアプリケーションにアクセスして使用できるようになることを願っています。

参考リンク: