Как помочь пользователям программы чтения с экрана быстро перебирать результаты на странице, не скрывая дополнительную информацию со страницы?

Question

Я ищу способ разметки страницы в HTML, чтобы позволить пользователям программы чтения с экрана быстрее перебирать результаты поиска.

Дизайн, в котором присутствуют только небольшие фрагменты информации и дополнительная информация скрыта использование сворачиваемого элемента было отклонено, так как это ограничивает восприятие зрячими пользователями.

Сейчас я рассматриваю возможность использования заголовков, чтобы пользователи вспомогательных технологий могли быстро переходить между блоками контента:

        <h2>Search results</h2>
        <div>
            <h3>Result 1 title</h3>
            <!–– some other longer information ––>
        </div>
        <div>
            <h3>Result 2 title</h3>
            <!–– some other longer information ––>
        </div>
           <!–– more search results ––>

Является ли это подходящая техника? Веб-сайты, такие как Google, делают это при возврате результатов поиска. Однако некоторые источники предостерегают от чрезмерного использования заголовков.

Answer 1

Заголовки являются одним из вариантов, однако, поскольку это результаты поиска, почему бы не сделать их ссылками?

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

Также для семантики и для предоставления дополнительной информации вы должны поместить каждый результат в <li> как часть упорядоченного списка <ul>

Это дает дополнительное преимущество, объявляя, сколько элементов в списке, и является хорошей практикой.

Таким образом, ваша страница результатов будет выглядеть следующим образом:

<h2>Search results</h2>
<ul>
    <li>
        <a href="results1">Result 1 title</a>
        <!–– some other longer information ––>
    </li>
    <li>
        <a href="results1">Result 1 title</a>
        <!–– some other longer information ––>
    </li>
       <!–– more search results ––>
</ul>

Это также предотвращает плохие практики, такие как добавление ссылок «читать дальше» после каждого элемента, и когда пользователь пропускает ссылки, текст ссылки имеет смысл.