Неправильный порядок фокусировки на клавиатуре - a11y - PullRequest
Новая
       26

Неправильный порядок фокусировки на клавиатуре - a11y

0 голосов
/ 29 апреля 2020

Я создал приложение в React. js, удовлетворяющее всем требованиям WCGA. Но в настоящее время я сталкиваюсь с некоторыми проблемами, такими как

  1. Фокус клавиатуры всегда начинается с первого интерактивного элемента (кнопка назад), независимо от положения курсора / курсора в документе.

Чтобы понять эту проблему, я добавляю часть исходного кода, где пользователь может ввести свое имя и фамилию. Я также добавил кнопку «Назад» в левом верхнем углу той же страницы. Пожалуйста, найдите код ниже: 

<section >
  <button onClick={()=>this.goback()>Back</button>
</section>
<section >
        <form className="form-example">
            <fieldset>
                <legend>User Details:</legend>
                {this.state.errors && this.state.errors.length?  <section>
                    {this.state.errors}
                </section> : null}
                <section className='input-fields'>
                <label> First Name:
                <input
                    type="text"
                    aria-label='First Name'
                    id = 'name'
                    aria-required="true"
                    onChange={this.onchangeHandler}
                    value={this.state.firstName}
                    name="firstname"
                    />
                </label>
                <label> Last Name:
                <input
                    type="text"
                    aria-label='Last Name'
                    aria-required="true"
                    onChange={this.onchangeHandler}
                    id='lastName'
                    value={this.state.lastName}
                    name="lastName"
                    />
                </label>

                <button type="button" id='submit' onClick={()=>this.submitForm()}>Login</button>
            </section>

            </fieldset>
            </form>
    </section>

Люди с нарушениями зрения могут стать дезориентированными, когда вкладки фокусируются на неожиданном месте или когда они не могут легко найти контент, окружающий интерактивный элемент. Это означает, что когда пользователь помещает курсор в поле «имя» и нажимает кнопку «вкладка», фокус переходит к кнопке «назад» (которая является первым интерактивным элементом на странице), но ожидается, что go в поле «фамилия».

сценарий - Страница html содержит несколько интерактивных элементов. Пользователь с некоторыми нарушениями зрения помещает курсор в элемент в середине страницы и нажимает клавишу табуляции , чтобы переместить фокус на следующий элемент.

Issue - Основное внимание уделяется началу страницы (первый интерактивный элемент).

Кто-нибудь может предложить решение, чтобы решить эту проблему?

...