Какова правильная разметка semanti c для статистического графика с элементами управления представлением рядом с - PullRequest
Новая
       38

Какова правильная разметка semanti c для статистического графика с элементами управления представлением рядом с

2 голосов
/ 26 апреля 2020

Я пытаюсь повторить разметку одного пейджера, включающего html5 элементов. Ключевым элементом страницы является график с логарифмическими c кривыми для каждой страны слева и справа. Вид управляет изменением того, что и как отображаются на графике слева. Моей первоначальной мыслью было: 

<main>
 <article></article>
 <aside></aside>
</main>

main, обертывающее ключевое содержание страницы - график и элементы управления его представлением. Я выбрал article для графика, потому что это автономная композиция и aside для представления управления, потому что его содержимое косвенно связано с основным содержанием . Выбор aside обусловлен отсутствием какого-либо выделенного элемента для элемента управления представлением в html5 (по крайней мере, я не знаю ни о каком правильном). Проблема с этим решением заключается в том, что Wave Tools указали, что перенос aside внутри элемента main не рекомендуется в качестве оптимальной практики, и его следует по возможности избегать. Тогда я выбрал второй вариант: 

<div>
 <main></main>
 <aside></aside>
</div>

Затем я получил возражение и отзыв о том, что aside подходит только для дополнительной связанной информации, а не в контексте элементов управления представлением. Так что я немного не в курсе, что было бы самым чистым и правильным способом разметки этой установки? Может быть, так? 

<main>
 <article></article>
 <div></div>
</main>

1 Ответ

3 голосов
/ 27 апреля 2020

С чисто HTML точки зрения (т.е. не включая WAI-ARIA) вы слишком усложняете эту проблему для себя.

Элементы управления связаны, поэтому <aside> не подходит. Изменение элемента управления приводит к изменению графика.

В этом случае все, что вам нужно, это <section> элементов.

Однако, хотя HTML может быть простым, WAI-ARIA и связанное с ним управление фокусировкой и т. Д. c. немного более вовлечен. Я добавил приличное количество информации ниже, чтобы вы начали, но это далеко не полный пример.

Грубый пример подходящих HTML и WAI-ARIA 

/*styling is just for demonstration, it is not relevant to the functionality*/
section.left{
    width: 58%;
    float: left;
    padding: 1%;
}
section.right{
    width: 38%;
    float: left;
    padding: 1%;
}
#graph{
    width: 100%;
    min-height: 25vw;
    background-color: #666;
    outline: 2px solid red;
}
label, input{
   display: block;
   padding: 0.5rem;
}
section{
   outline: 1px solid #333;
}
<main>
  <!--without seeing your actual page it is hard to know whether you should use role="figure" so you will need to research that yourself.-->
  <!--it should also be noted that if your site supports IE8 you should use `aria-label="heading 2 title"` instead of `aria-labelledby`.-->
  <section class="left" role="figure" aria-labelledby="graph-title">
    <h2 id="graph-title">Graph of country information</h2>
    <div id="graph"></div>
  </section>
  <!--toolbar is the best fit for explaining what the controls are. You should also use `aria-controls="IDofElement"` to associate it to your graph (you will need to double check this in a screen reader as it is intended for use on textareas but I don't see why it won't work for an accessible graph / chart.).-->
  <section class="right" role="toolbar" aria-controls="graph" aria-labelledby="controls-section" aria-orientation="vertical">
    <h2 id="controls-section">Graph Controls</h2>
    <label for="input1">graph x value</label>
    <input id="input1"/>
    <label for="input2">graph y value</label>
    <input id="input2"/>
  </section>
</main>

Объяснение примера

Вы заметите, что сам HTML очень прост.

Всего два региона с соответствующими заголовками.

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

Однако мы можем добавить некоторые атрибуты WAI-ARIA для улучшения вещей в программах чтения с экрана, которые их поддерживают.

Сначала мы помечаем разделы.

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

Другие пользователи предпочитают просматривать страницу с помощью заголовков (большинство пользователей на самом деле).

Используя aria-labelledby и указывая на заголовок, мы покрываем обе эти базы. (для максимальной обратной совместимости вы должны использовать aria-label="same text as the heading" и role="contentinfo" в регионе, чтобы он работал на IE8 и ниже, но я поддерживаю только IE9 и выше).

Далее мы добавляем соответствующие роли WAI-ARIA в каждый раздел. Я предположил, что роль фигуры подходит для графа. но вы должны будете решить это на основе вашего варианта использования.

Для элементов управления графиком мы даем этому разделу роль «панели инструментов» . Затем мы проясним, что элементы управления в этом разделе связаны с графиком с aria-controls.

Теперь еще раз я не могу видеть ваш график, поэтому может быть (и вполне вероятно) более уместным использовать aria-owns на вашей панели инструментов.

Наконец, мы добавляем aria-orientation="vertical", поскольку это атрибут, который применим к role="toolbar", когда элементы управления сложены.

Обратите внимание , что вам, вероятно, придется добавить управление фокусом и т. Д. c. сами. См. пример панели инструментов W3 C для идей о том, как реализовать это.

...