带有视图控件的统计图的正确语义标记是什么

Question

我尝试重新做一个包含html5元素的寻呼机的标记。该页面的关键元素是一个图表，该图表的左侧和右侧是每个国家/地区的对数曲线，视图控件用于更改左侧图形中的内容和显示方式。我最初的想法是：

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

main包装页面的关键内容-图形及其视图控件。我为图cuz选择了article，它是self contained composition，而视图控件的aside选择了cuz，其内容是indirectly related to the main content。 aside的选择是由于缺少html5中的视图控件的某种专用元素（至少我不知道有什么适当的元素）。此解决方案的问题在于，Wave Tools指出，不建议在aside元素内包装main，这是最佳实践，应尽可能避免。我的第二个选择是：

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

然后，我得到了异议和反馈，认为aside仅适用于其他相关信息，而不适用于视图控件。因此，我有些想法，标记设置的最干净和语义正确的方法是什么？也许是这样吗？

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

Answer 1

从纯粹的HTML角度（即，不包括WAI-ARIA），您自己已经使这个问题复杂化了。

控件是相关的，因此<aside>不适用。更改控件会更改图形。

在这种情况下，您只需要<section>个元素。

尽管HTML可能很简单，但是WAI-ARIA和相关的焦点管理等要多一些。我在下面添加了很多信息，以帮助您入门，但这绝不是一个完整的示例。

适当的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;
}

<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属性来改善支持它们的屏幕阅读器的功能。

First我们标记这些部分。

这非常有用，因为某些屏幕阅读器用户更喜欢通过部分来导航/浏览页面。

[其他用户更喜欢通过标题（实际上是大多数用户）浏览页面。

通过使用aria-labelledby并指向标题，我们覆盖了这两个基数。 （为了获得最大的向后兼容性，您实际上应该在区域上使用aria-label="same text as the heading"和role="contentinfo"使其在IE8及更低版本上可以运行，但我仅支持IE9及更高版本。）>

Next

我们将适当的WAI-ARIA角色添加到每个部分。我假设figure role适合该图。但您必须根据用例来决定。

对于图形的控件，我们为该部分指定role of "toolbar"。然后，我们清楚地表明该部分中的控件与带有aria-controls的图形有关。

现在我仍然看不到您的图表，因此（[很有可能）更适合使用aria-controls。

最后

我们添加aria-owns，因为当控件堆叠时，该属性适用于aria-owns。

请注意

，您可能必须自己添加焦点管理等。有关如何实现此操作的想法，请参见aria-orientation="vertical"。