Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Align <main> a bit with contemporary AT #3326

Merged
merged 1 commit into from
Jan 15, 2018
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Align <main> a bit with contemporary AT
The various examples changed here do not lead to a good experience in existing AT and there's no reason to believe AT will change so it seems best to give different advice.
  • Loading branch information
annevk committed Jan 5, 2018

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit cef3df144a608850333b7435a993e58588e6f48d
46 changes: 17 additions & 29 deletions source
Original file line number Diff line number Diff line change
@@ -15610,10 +15610,10 @@ interface <dfn>HTMLBodyElement</dfn> : <span>HTMLElement</span> {};
&lt;header>
&lt;h1 itemprop="headline">My Day at the Beach&lt;/h1>
&lt;/header>
&lt;main itemprop="articleBody">
&lt;div itemprop="articleBody">
&lt;p>Today I went to the beach and had a lot of fun.&lt;/p>
<em>...more content...</em>
&lt;/main>
&lt;/div>
&lt;footer>
&lt;p>Posted &lt;time itemprop="datePublished" datetime="2009-10-10">Thursday&lt;/time>.&lt;/p>
&lt;/footer>
@@ -15631,10 +15631,6 @@ interface <dfn>HTMLBodyElement</dfn> : <span>HTMLElement</span> {};
&lt;/footer>
&lt;/body></pre>

<p>Notice the <code>main</code> elements being used to wrap all the contents of the page other
than the header and footer, and all the contents of the blog entry other than its header and
footer.</p>

<p>You can also see microdata annotations in the above example that use the schema.org vocabulary
to provide the publication date and other metadata about the blog post.</p>

@@ -17249,11 +17245,9 @@ Space is not the only void</pre>
&lt;/nav>
&lt;h1>We're adopting a child!&lt;/h1>
&lt;/header>
&lt;main>
&lt;p>As of today, Janine and I have signed the papers to become
the proud parents of baby Diane! We've been looking forward to
this day for weeks.&lt;/p>
&lt;/main>
&lt;p>As of today, Janine and I have signed the papers to become
the proud parents of baby Diane! We've been looking forward to
this day for weeks.&lt;/p>
&lt;/article>
&lt;/html></pre>

@@ -17270,8 +17264,8 @@ Space is not the only void</pre>
</ol>
</ol>

<p>Also worthy of note in this example is that the <code>header</code> and <code>main</code>
elements have no effect whatsoever on the document outline.</p>
<p>Also worthy of note in this example is that the <code>header</code> element has no effect
whatsoever on the document outline.</p>

</div>

@@ -19165,17 +19159,15 @@ included with Exhibit B.
<dd>Uses <code>HTMLElement</code>.</dd>
</dl>

<p>The <code>main</code> element can be used as a container for the dominant contents of another
element. It <span>represents</span> its children.</p>
<p>The <code>main</code> element can be used as a container for the dominant contents of the
document. It <span>represents</span> its children.</p>

<p class="note">The <code>main</code> element is distinct from the <code>section</code> and
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this mention of no effect on the document outline for <main> be removed like line 17273?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I only removed it there because I removed main from the example. This example still uses main though.

<code>article</code> elements in that the <code>main</code> element does not contribute to the
document <span>outline</span>.</p>

<p class="note">There is no restriction as to the number of <code>main</code> elements in a
document. Indeed, there are many cases where it would make sense to have multiple
<code>main</code> elements. For example, a page with multiple <code>article</code> elements might
need to indicate the dominant contents of each such element.</p>
<p class="note">While there is no restriction as to the number of <code>main</code> elements in a
document, web developers are encouraged to stick to a single element.</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

web developers are encouraged to stick to a single element

Should this say "single visible element" or does that add too much complexity?

One exception to recommending a single <main> could be in a layered web application where background <main> elements are properly rendered inert from AT. Blackboard has a good example of this type of UI. https://www.youtube.com/watch?v=6tmBd9USe6g

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this is just advice, leaving out the edge cases where multiple elements makes sense to me.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I was hoping to leave more detailed advice up to a future iteration, once we have more agreement on the edge cases.


<div class="example">

@@ -29891,10 +29883,8 @@ interface <dfn>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
&lt;p>&lt;img src="/usericons/1627591962735"> &lt;b>Fred Flintstone&lt;/b>&lt;/p>
&lt;p>&lt;a href="/posts/3095182851" rel=bookmark>12:44&lt;/a> &mdash; &lt;a href="#acl-3095182851">Private Post&lt;/a>&lt;/p>
&lt;/header>
&lt;main>
&lt;p>Check out my new ride!&lt;/p>
<strong>&lt;iframe src="https://video.example.com/embed?id=92469812" allowfullscreen>&lt;/iframe></strong>
&lt;/main>
&lt;p>Check out my new ride!&lt;/p>
<strong>&lt;iframe src="https://video.example.com/embed?id=92469812" allowfullscreen>&lt;/iframe></strong>
&lt;/article></pre>

</div>
@@ -57117,15 +57107,13 @@ interface <dfn>HTMLDialogElement</dfn> : <span>HTMLElement</span> {

<div class="example">

<p>This dialog box has some small print. The <code>main</code> element is used to draw the user's
attention to the more important parts.</p>
<p>This dialog box has some small print. The <code>strong</code> element is used to draw the
user's attention to the more important part.</p>

<pre>&lt;dialog>
&lt;h1>Add to Wallet&lt;/h1>
&lt;main>
&lt;p>How many gold coins do you want to add to your wallet?&lt;/p>
&lt;p>&lt;input name=amt type=number min=0 step=0.01 value=100>&lt;/p>
&lt;/main>
&lt;p>&lt;strong>&lt;label for=amt>How many gold coins do you want to add to your wallet?&lt;/label>&lt;/strong>&lt;/p>
&lt;p>&lt;input id=amt name=amt type=number min=0 step=0.01 value=100>&lt;/p>
&lt;p>&lt;small>You add coins at your own risk.&lt;/small>&lt;/p>
&lt;p>&lt;label>&lt;input name=round type=checkbox> Only add perfectly round coins &lt;/label>&lt;/p>
&lt;p>&lt;input type=button onclick="submit()" value="Add Coins">&lt;/p>