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

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

0 голосов
/ 10 января 2019

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

Я могу легко сделать это с помощью столбцов Bootstrap, но будет ли это семантически правильным? (т. е. иметь заголовок и связанный контент в разных элементах div)? Будет ли это плохо для стандартов 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>

Ответы [ 3 ]

0 голосов
/ 10 января 2019

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

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

0 голосов
/ 11 января 2019

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

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

0 голосов
/ 10 января 2019

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

...