-
Notifications
You must be signed in to change notification settings - Fork 2.8k
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
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
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
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -15610,10 +15610,10 @@ interface <dfn>HTMLBodyElement</dfn> : <span>HTMLElement</span> {}; | |
<header> | ||
<h1 itemprop="headline">My Day at the Beach</h1> | ||
</header> | ||
<main itemprop="articleBody"> | ||
<div itemprop="articleBody"> | ||
<p>Today I went to the beach and had a lot of fun.</p> | ||
<em>...more content...</em> | ||
</main> | ||
</div> | ||
<footer> | ||
<p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p> | ||
</footer> | ||
|
@@ -15631,10 +15631,6 @@ interface <dfn>HTMLBodyElement</dfn> : <span>HTMLElement</span> {}; | |
</footer> | ||
</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> | |
</nav> | ||
<h1>We're adopting a child!</h1> | ||
</header> | ||
<main> | ||
<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.</p> | ||
</main> | ||
<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.</p> | ||
</article> | ||
</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 | ||
<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> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Should this say "single visible element" or does that add too much complexity? One exception to recommending a single There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. There was a problem hiding this comment. Choose a reason for hiding this commentThe 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> { | |
<p><img src="/usericons/1627591962735"> <b>Fred Flintstone</b></p> | ||
<p><a href="/posts/3095182851" rel=bookmark>12:44</a> — <a href="#acl-3095182851">Private Post</a></p> | ||
</header> | ||
<main> | ||
<p>Check out my new ride!</p> | ||
<strong><iframe src="https://video.example.com/embed?id=92469812" allowfullscreen></iframe></strong> | ||
</main> | ||
<p>Check out my new ride!</p> | ||
<strong><iframe src="https://video.example.com/embed?id=92469812" allowfullscreen></iframe></strong> | ||
</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><dialog> | ||
<h1>Add to Wallet</h1> | ||
<main> | ||
<p>How many gold coins do you want to add to your wallet?</p> | ||
<p><input name=amt type=number min=0 step=0.01 value=100></p> | ||
</main> | ||
<p><strong><label for=amt>How many gold coins do you want to add to your wallet?</label></strong></p> | ||
<p><input id=amt name=amt type=number min=0 step=0.01 value=100></p> | ||
<p><small>You add coins at your own risk.</small></p> | ||
<p><label><input name=round type=checkbox> Only add perfectly round coins </label></p> | ||
<p><input type=button onclick="submit()" value="Add Coins"></p> | ||
|
There was a problem hiding this comment.
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?There was a problem hiding this comment.
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.