Должен ли я использовать якоря или кнопки в следующем кодовом блоке? - PullRequest
Новая
       36

Должен ли я использовать якоря или кнопки в следующем кодовом блоке?

0 голосов
/ 25 мая 2018

Я пишу веб-приложение и пытаюсь решить, будет ли более семантически правильным использование кнопок или якорей в следующем примере: 

<ul id="parent-list">
    <li id="parent-1" class="parent-list-item" value="1">
        <ul class="child-list">
            <li value="OPTION1" class="">
                <a href="javascript:void(0);" class="no-style-a">OPTION1</a>
            </li>
            <li value="OPTION2" class="">
                <a href="javascript:void(0);" class="no-style-a">OPTION2</a>
            </li>
            <li value="OPTION3" class="selected-child-list-item">
                <a href="javascript:void(0);" class="no-style-a">OPTION3</a>
                <span class="selected-child-span">✓</span>
            </li>
        </ul>
    </li>
    <li id="parent-2" class="parent-list-item" value="2">
        <ul class="child-list">
            <li value="OPTION4" class="">
                <a href="javascript:void(0);" class="no-style-a">OPTION4</a>
            </li>
        </ul>
    </li>

    ...etc

</ul>

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

Есть ли какая-то причина, по которой я должен использовать здесь вместо кнопок якоря?

Ответы [ 3 ]

0 голосов
/ 25 мая 2018

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

Если вы планируете использовать role="button" в своих тегах <a>, не забудьте добавить обработчик клавиатуры, чтобы пользователь мог нажать клавишу пробела на вашей ссылкечтобы активировать его, так как элемент «button» подразумевает, что клавиши Space и Enter будут работать.Если возможно, используйте нативный <button>, потому что тогда он будет обработан для вас.

0 голосов
/ 26 мая 2018

интерфейс обновляется динамически

Есть ли какая-то причина, по которой я должен использовать здесь вместо кнопок привязки?

перемещение фокуса куда-то еще?

  • Да: это ссылка
  • Нет: это кнопка

Если вы используете javascript для эмуляцииизменение страницы, тогда да, вы можете использовать привязки, пока пользователь воспринимает изменение страницы или перемещается внутри страницы.

0 голосов
/ 25 мая 2018

Поскольку вы нигде не ссылаетесь, вам не следует использовать ссылку.

При этом, если бы вы писали ненавязчивый JavaScript , вы бы ссылались на откат на стороне серверакогда сбой JS, в этом случае вы должны использовать ссылки.

...