带有视图控件的统计图的正确语义标记是什么
What is the proper semantic markup for a statistical graph with view controls alongside
我尝试重做包含 html5 元素的一页纸的标记。该页面的关键元素是一个图表，左侧是每个国家/地区的对数曲线，右侧是视图控件，用于更改左侧图表中显示的内容和方式。我最初的想法是：
<main>
<article></article>
<aside></aside>
</main>
main 包装页面的关键内容 - 图形及其视图控件。我为图形选择了 article，因为它是 self contained composition and the aside for the view controls cuz its content is 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>
纯粹从 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;
}
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 属性来改进屏幕 reader 中支持它们的内容。
首先我们标记部分。
这很有用，因为某些屏幕 reader 用户更喜欢通过部分导航/浏览页面。
其他用户更喜欢通过标题浏览页面（实际上是大多数用户）。
通过使用 aria-labelledby 并指向标题，我们涵盖了这两个基础。 （为了获得最大的向后兼容性，您实际上应该在一个区域上使用 aria-label="same text as the heading" 和 role="contentinfo" 以使其在 IE8 及以下版本上工作，但我只支持 IE9 及更高版本）。
接下来 我们向每个部分添加适当的 WAI-ARIA 角色。我假设 figure role 适合图表。但你必须根据你的用例来决定。
对于图表的控件，我们为该部分提供 [=22=]。
现在我又一次看不到你的图表，所以在你的工具栏上使用 aria-owns 可能（而且很可能）更合适。
最后 我们添加 aria-orientation="vertical" 因为这是一个属性，当控件堆叠时适用于 role="toolbar"。
请注意您可能需要自己添加焦点管理等。请参阅 the W3C toolbar example 以了解有关如何实现此功能的想法。
我尝试重做包含 html5 元素的一页纸的标记。该页面的关键元素是一个图表，左侧是每个国家/地区的对数曲线，右侧是视图控件，用于更改左侧图表中显示的内容和方式。我最初的想法是：
<main>
<article></article>
<aside></aside>
</main>
main 包装页面的关键内容 - 图形及其视图控件。我为图形选择了 article，因为它是 self contained composition and the aside for the view controls cuz its content is 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>
纯粹从 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;
}
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 属性来改进屏幕 reader 中支持它们的内容。
首先我们标记部分。
这很有用，因为某些屏幕 reader 用户更喜欢通过部分导航/浏览页面。
其他用户更喜欢通过标题浏览页面（实际上是大多数用户）。
通过使用 aria-labelledby 并指向标题，我们涵盖了这两个基础。 （为了获得最大的向后兼容性，您实际上应该在一个区域上使用 aria-label="same text as the heading" 和 role="contentinfo" 以使其在 IE8 及以下版本上工作，但我只支持 IE9 及更高版本）。
接下来 我们向每个部分添加适当的 WAI-ARIA 角色。我假设 figure role 适合图表。但你必须根据你的用例来决定。
对于图表的控件，我们为该部分提供 [=22=]。
现在我又一次看不到你的图表，所以在你的工具栏上使用 aria-owns 可能（而且很可能）更合适。
最后 我们添加 aria-orientation="vertical" 因为这是一个属性，当控件堆叠时适用于 role="toolbar"。
请注意您可能需要自己添加焦点管理等。请参阅 the W3C toolbar example 以了解有关如何实现此功能的想法。