Заголовки и содержание в отдельных столбцах

У меня есть дизайн, в котором заголовок идет слева, а абзацы справа, как показано ниже.

Я могу легко сделать это с помощью столбцов Bootstrap, но будет ли это семантически правильным? (т.е. иметь заголовок и связанный контент в разных разделах)? Будет ли это плохо для стандартов WCAG 2.0? Из того, что я прочитал на w3.org, информация об этом немного сомнительна.

Пример HTML:

<div class="row">
    <div class="col"><h2>Section 1 Title</h2></div>
    <div class="col">
        <p>Seciton 1 paragraph 1</p>
        <p>Seciton 1 paragraph 2</p>
    </div>
</div>
<div class="row">
    <div class="col"><h2>Section 2 Title</h2></div>
    <div class="col">
        <p>Seciton 2 paragraph 1</p>
        <p>Seciton 2 paragraph 2</p>
    </div>
</div>

html accessibility html-heading semantic-markup
person geochanto    schedule 10.01.2019    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Можете ли вы опубликовать HTML и CSS? Быстрый ответ - нет. Если вы не делаете что-то сумасшедшее, например, все еще используете таблицы для форматирования макетов, скорее всего, это не проблема. Я предполагаю, что заголовок и соответствующий абзац находятся в контейнере и перемещаются с помощью CSS? Если это так, то это соответствует стандартам WCAG 2.0. Но без вашего кода я не могу дать вам определенный ответ.

person abourne    schedule 10.01.2019

arrow_upward
2
arrow_downward

Важно, чтобы каждый заголовок + абзац отображался в DOM по порядку (то есть заголовок 1, затем соответствующий абзац, затем заголовок 2, затем соответствующий абзац и т. д.).

Но наличие лишнего div между ними, помогающего в макете, не проблема. Так что то, что вы сделали, совершенно нормально.

person Leimi    schedule 11.01.2019

arrow_upward
1
arrow_downward

Я согласен с @abourne, нам нужно больше кода. Пользователь программы чтения с экрана может перейти к заголовку с помощью клавиши «H» или «1», «2», «3» и т. д. для H1, H2, H3 соответственно. Как только они это сделают, если они нажмут стрелку вниз, они перейдут к следующему элементу в дереве доступности (которое часто отражает DOM). Если следующий элемент является не текстом абзаца, а следующим заголовком, тогда да, это будет проблемой доступности.

Но это зависит от того, как вы это реализовали.

person slugolicious    schedule 10.01.2019
comment
Идеальный. Код у вас хороший. Порядок DOM важен для программ чтения с экрана. Если вы перемещаете вещи с помощью CSS, программе чтения с экрана все равно. - person slugolicious; 12.01.2019