Макет на основе столбцов с сеткой ролей арии

Question

Мы создаем веб-приложение, похожее на канбан-доску, которое выглядит примерно так:

Итак, у нас есть дорожки с предметами.

В настоящее время у нас есть такой макет:

<ul>
    <ul class="swimlane">
        <li>Item a1</li>
    </ul>
    <ul class="swimlane">
        <li>Item b1</li>
        <li>Item b2</li>
        <li>Item b3</li>
    </ul>
    <ul class="swimlane">
        <li>Item c1</li>
        <li>Item c2</li>
    </ul>
</ul>

Итак, у нас есть список переулков, которые сами являются списками предметов.

Теперь мы пытаемся сделать навигацию по плате доступной, разрешив навигацию по таблице из nvda . Например: clt+alt+left идет к следующей * клетке на полосе слева.

Для этого мы рассмотрели роли арии grid, row и gridcell. Но кажется, что эти вещи поддерживают только макет на основе строк, но не на основе столбцов. У нас действительно нет рядов, которые охватывают все дорожки. Теоретически каждый предмет может иметь произвольную высоту.

Есть ли что-то вроде column роли или обходного пути для достижения аналогичной вещи?

* конечно, следующий не всегда легко определить, потому что дорожки могут иметь различное количество элементов, поэтому не у каждого элемента есть левый сосед (например, элемент b2 из примера)

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

Третье решение было бы использовать как-то аналогичные ярлыки, чем nvda. Но мы бы хотели этого избежать.

Answer 1

Просто мои два цента, не связанные напрямую с основным вопросом, но которые, я думаю, могут быть полезны: ваш код не будет проверяться в валидаторе w3c, например https://validator.w3.org

1) ul элементы разрешают только li или script-поддержка элементов, таких как скрипт или шаблон (как ранее @unor заявляет в своем комментарии).Вы не должны использовать ul как прямой ребенок для ul.Это сообщение, которое валидатор вызывает в этом случае:

Модель содержимого для элемента ul: ноль или более элементов li и элементов поддержки сценариев.

2) элементы ul могутРолевая сетка или таблица.Я не знаю почему, потому что это кажется разумным, но строго говоря, они не могут.Это ошибка, которую вызовет валидатор:

Ошибка: таблица неверных значений для роли атрибута в элементе ul.

Это можно проверить, например, на веб-сайте разработчика Mozilla:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

Или некоторые говорят об этом в этой теме переполнения стека:

HTML5 элемент nav против ролей = "navigation"

Но в вашем случае, если вы измените свой внешний ul на div, он подтвердит:

<div role="grid">
    <ul class="swimlane">
        <li>Item a1</li>
    </ul>
    <ul class="swimlane">
        <li>Item b1</li>
        <li>Item b2</li>
        <li>Item b3</li>
    </ul>
    <ul class="swimlane">
        <li>Item c1</li>
        <li>Item c2</li>
    </ul>
</div>

Хотя, имея список элементов ul, вам, возможно, лучше использовать их список, внутри div:

<div role="grid">
 <ul>
  <li>
    <ul class="swimlane">
        <li>Item a1</li>
    </ul>
   </li>
   <li>
    <ul class="swimlane">
        <li>Item b1</li>
        <li>Item b2</li>
        <li>Item b3</li>
    </ul>
   </li>
   <li>
    <ul class="swimlane">
        <li>Item c1</li>
        <li>Item c2</li>
    </ul>
   </li>
</div>

Возможно, слишком многословная разметка, и я хотел бы знать причину, по которой ul нельзя использовать с сеткой ролей или таблицей, поскольку многие люди считают это естественным,видя сетки как список строк.Трудно быть семантическим: /

Answer 2

Роли ARIA для имитации таблицы не позволяют указать, в каком столбце должен быть элемент. Роли ожидают, что DOM будет похож на то, как определяется реальная таблица - на основе строк.Поэтому вам придется изменить способ определения списков, чтобы они основывались на строках, а не на столбцах.

( Примечание: Ваша картинка не соответствует вашему примеру кода. Мой пример ниже ссылается на ваш пример кода.)

Поэтому вместо

<ul>
    <ul class="swimlane">
        <li>Item a1</li>
    </ul>
    <ul class="swimlane">
        <li>Item b1</li>
        <li>Item b2</li>
        <li>Item b3</li>
    </ul>
    <ul class="swimlane">
        <li>Item c1</li>
        <li>Item c2</li>
    </ul>
</ul>

Вам понадобится

<ul>
    <ul>
        <li>Item a1</li>
        <li>Item b1</li>
        <li>Item c1</li>
    </ul>
    <ul>
        <li></li>
        <li>Item b2</li>
        <li>Item c2</li>
    </ul>
    <ul>
        <li></li>
        <li>Item b3</li>
        <li></li>
    </ul>
</ul>

И тогда вы сможете использовать роли таблиц.

Примечание: В ARIA была добавлена ​​новая строка table1.1.Ранее был доступен только grid.Если ваша таблица не является интерактивной (т. Е. Просто статическим текстом), то следует использовать роль table (и роль cell).Если ваша таблица является интерактивной, как электронная таблица, в которой есть ячейки, которые можно редактировать, то следует использовать роль grid (и роль gridcell).Наличие ссылки в ячейке таблицы не считается интерактивной, даже если вы можете «взаимодействовать» с таблицей, щелкнув ссылку.Я использую слово «интерактивный» для обозначения ячеек, которые можно редактировать.

<ul role="table">
    <ul role="row">
        <li role="cell">Item a1</li>
        <li role="cell">Item b1</li>
        <li role="cell">Item c1</li>
    </ul>
    <ul role="row">
        <li role="cell"></li>
        <li role="cell">Item b2</li>
        <li role="cell">Item c2</li>
    </ul>
    <ul role="row">
        <li role="cell"></li>
        <li role="cell">Item b3</li>
        <li role="cell"></li>
    </ul>
</ul>

Кроме того, если вы определяете таблицу, у вас действительно должны быть заголовки столбцов.Заголовки столбцов могут содержаться в role="row" или role="rowgroup".rowgroup аналогичен <thead>, но rowgroup в настоящее время не передает никакой дополнительной семантической информации программам чтения с экрана.Я использую его, потому что он помогает выделять заголовки моих столбцов в коде.

<ul role="table">
    <ul role="rowgroup">
        <li role="columnheader">To Do</li>
        <li role="columnheader">WIP (2)</li>
        <li role="columnheader">Done</li>
    </ul>
    <ul role="row">
        <li role="cell">Item a1</li>
        <li role="cell">Item b1</li>
        <li role="cell">Item c1</li>
    </ul>
    <ul role="row">
        <li role="cell"></li>
        <li role="cell">Item b2</li>
        <li role="cell">Item c2</li>
    </ul>
    <ul role="row">
        <li role="cell"></li>
        <li role="cell">Item b3</li>
        <li role="cell"></li>
    </ul>
</ul>