Доступна сетка из двух столбцов с использованием role=table ⇐ Html

[Anonymous]

Ситуация
Раньше у нас был компонент описания-сетки, который представлял собой нашу собственную интерпретацию визуального представления списка пар ключ-значение с использованием div и role="table". У нас были «режим с одним столбцом» и «режим с двумя столбцами», в которых отображалась сетка с одним или двумя столбцами шаблона. Содержимое каждого столбца представляло собой элементы div с использованием role="rowheader" и role="cell" соответственно.
Проблема
Из-за проблем с программой чтения с экрана нам пришлось отключить вариант с двумя столбцами. Поскольку элементы не читались должным образом.
Но теперь мы как бы застряли в этом скучном макете, который в некоторых случаях является просто пустой тратой места. Поэтому мы ищем альтернативу, удобную для специальных возможностей.
Попытайтесь решить проблему
Один вариант, который я только что рассмотрел, заключается в том, что мы можем добавить дополнительную разметку и использовать aria-hidden="true" в реальной таблице и использовать .sr-only, чтобы предоставить вариант с одним столбцом для программы чтения с экрана. Но хотя это помогает читателю, это не кажется разумным решением, поскольку теперь нам не хватает визуального представления текущего выбранного элемента.
Что нам нужно
Есть ли у кого-нибудь идеи, как мы могли бы это улучшить? Цель состоит в том, чтобы иметь список/сетку пар ключ-значение, которые мы можем отображать доступным способом и которые приятны визуально, т. е. иметь две строки рядом друг с другом, не нарушая поток/читабельность. На узких экранах он должен отображаться в виде макета в 1 столбец.
Примеры
Вот как мы хотим, чтобы это выглядело:


Пример кода:

Код: Выделить всё

.kv-table {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid black;
}

.kv-table [role="row"] {
display: flex;
flex-flow: row nowrap;
gap: 0.5rem;
padding: 0.5rem;
}

.kv-table [role="rowheader"] {
font-weight: bold;
}

Код: Выделить всё

Label 1
Value 1


Label 2
Value 2


Label 3
Value 3


Label 4
Value 4

Подробнее здесь: https://stackoverflow.com/questions/798 ... role-table