I try to redo the markup of a one pager incorporating html5 elements. The key element of the page is a graph with logarithmic curves per country on the left and on the right the view controls to alter what and how things are displayed in the graph on the left. My initial thought was:
<main>
<article></article>
<aside></aside>
</main>
main wrapping the key content of the page - the graph and its view controls. I chose article for the graph cuz it is a self contained composition and the aside for the view controls cuz its content is indirectly related to the main content. The choice of the aside is due to the lack of some sort of dedicated element for a view control in html5 (at least I am not aware of any proper).
Problem with this solution is that Wave Tools pointed out that wrapping an aside inside the main element isn't recommended best practice and should be avoided if possible. My second choice then was:
<div>
<main></main>
<aside></aside>
</div>
Then I got the objection and feedback that aside is only suited for additional related information and not in the context of view controls. So I am a bit out of ideas what would be the cleanest and semantic proper way to markup that setup? Maybe that way?
<main>
<article></article>
<div></div>
</main>
From a purely HTML perspective (i.e. not including WAI-ARIA) you are over complicating this problem for yourself.
The controls are related so an <aside> is not appropriate. Changing a control changes the graph.
In this case all you need is <section> elements.
However although the HTML may be simple, the WAI-ARIA and associated focus management etc. is a little bit more involved. I have added a decent amount of information below to get you started but it is by no means a complete example.
/*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>You will notice that the HTML itself is very simple.
Just two regions with appropriate headings.
This will make it pretty accessible by itself as the headings indicate clearly what each section is for.
However we can add some WAI-ARIA attributes to improve things in screen readers that support them.
First we label the sections.
This is useful as some screen reader users prefer to navigate / explore a page via sections.
Other users prefer to explore a page via headings (majority of users actually).
By using aria-labelledby and pointing to the heading we cover both of these bases. (for maximum backwards compatibility you should actually use aria-label="same text as the heading" and role="contentinfo" on a region for it to work on IE8 and below but I only support to IE9 and up).
Next we add appropriate WAI-ARIA roles to each section. I have assumed the figure role is appropriate for the graph. but you will have to decide that based on your use case.
For the controls for the graph we give that section the role of "toolbar". We then make it clear that the controls in that section are related to the graph with aria-controls.
Now yet again I cannot see your graph so it may be (and is quite likely) more appropriate to use aria-owns on your toolbar.
Finally we add aria-orientation="vertical" as that is a attribute that is applicable to role="toolbar" when controls are stacked.
Please note that you will probably have to add focus management etc. yourself. See the W3C toolbar example for ideas on how to implement this.