Блог

Главная - Вопросы по программированию - установите фокус на теге области в angular

установите фокус на теге области в angular

#angular #accessibility #area

#angular #Специальные возможности #область

Вопрос:

В настоящее время у меня есть разные прямоугольные изображения в теге области внутри тега карты.

 <map name="test" style="z-index:99999">
            <area href="javascript:void(0);"
                  [shape]="'rect'" *ngFor="let coords of imagesCoords"
                  [coords]="coords.AreaCoordinates.manipulatedCoords"
                  [target]="'_self'" 
                  [ngStyle]="{'top': coords.customTop 'px', 'left': coords.customLeft 'px', 'width': coords.customWidth 'px', 'height': coords.customHeight 'px'}"
                 
                 />
          </map>

В принципе, я хочу, чтобы фокус отображался визуально, когда пользователь обращается к каждому изображению с помощью клавиатуры / мыши.
Как мы можем установить фокус на каждое изображение в теге области?

Комментарии:

1. Какую информацию пользователь программы чтения с экрана ожидает услышать, когда он фокусирует этот элемент? Какова цель сделать элемент интерактивным. Нам нужно знать это, чтобы предложить лучший совет, но короткий ответ tabindex="0" : даст вам функциональность для фокусировки обычно не фокусируемого элемента.

2. 1. Пользователь программы чтения с экрана ожидает услышать название / описание товара, например, скидку 20% на продукт abc. 2. Цель создания — сделать доступным для пользователей клавиатуры (ADA) надеюсь, это прояснит мои требования @GrahamRitchie

3. Извините, я не понял, из приведенного примера нет доступной информации, вам нужно использовать alt aria-label или aria-labelledby или что-то подобное, чтобы area у вас был текст, который может считывать программа чтения с экрана. Я также имел в виду, что происходит, когда пользователь нажимает на элемент, поскольку у вас есть a javascript:void в качестве href . javascript:void(0) в href коде часто чувствуется, что вы делаете что-то не совсем правильно с точки зрения доступности, поскольку гиперссылка всегда должна указывать на URL-адрес и быть частью навигации, если это должно отображать всплывающее окно, могут быть лучшие и более семантические способы достижения этого.

4. Есть ли у вас общедоступная версия страницы, чтобы мы могли посмотреть, есть ли лучший способ сделать то, что вы делаете (или подтвердите, что вы делаете это правильно, и помогите с проблемой фокусировки). Как я уже сказал, это tabindex="0" добавит элемент в порядок фокусировки на странице, чтобы ответить на вопрос, как установить фокус. Затем вам просто понадобится индикатор фокуса CSS area:focus{outline: 2px solid #333;} , например.