Drop <main role=main> example; refine explanation (mdn#2410)

files/en-us/web/html/element/main/index.html

@@ -22,19 +22,19 @@
  <tbody>
   <tr>
    <th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">Content categories</a></th>
-   <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Flow content</a>, palpable content.</td>
+   <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#flow_content">Flow content</a>, palpable content.</td>
   </tr>
   <tr>
    <th scope="row">Permitted content</th>
-   <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Flow content</a>.</td>
+   <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#flow_content">Flow content</a>.</td>
   </tr>
   <tr>
    <th scope="row">Tag omission</th>
    <td>None; both the starting and ending tags are mandatory.</td>
   </tr>
   <tr>
    <th scope="row">Permitted parents</th>
-   <td>Where <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">flow content</a> is expected, but only if it is a <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#hierarchically-correct-main-element" id="the-main-element:hierarchically-correct-main-element">hierarchically correct <code>main</code> element</a>.</td>
+   <td>Where <a href="/en-US/docs/Web/Guide/HTML/Content_categories#flow_content">flow content</a> is expected, but only if it is a <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#hierarchically-correct-main-element" id="the-main-element:hierarchically-correct-main-element">hierarchically correct <code>main</code> element</a>.</td>
   </tr>
   <tr>
    <th scope="row">Implicit ARIA role</th>
@@ -92,7 +92,7 @@ <h2 id="Accessibility_concerns">Accessibility concerns</h2>
 
 <h3 id="Landmark">Landmark</h3>
 
-<p>The <code>&lt;main&gt;</code> element behaves like a <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Main_role"><code>main</code> landmark</a> role. <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">Landmarks</a> can be used by assistive technology to quickly identify and navigate to large sections of the document. Prefer using the <code>&lt;main&gt;</code> element over declaring <code>role="main"</code>, unless there are <a href="/en-US/docs/Web/HTML/Element/main#Browser_compatibility">legacy browser support concerns</a>.</p>
+<p>The <code>&lt;main&gt;</code> element behaves like a <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Main_role"><code>main</code> landmark</a> role. <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">Landmarks</a> can be used by assistive technology to quickly identify and navigate to large sections of the document. Prefer using the <code>&lt;main&gt;</code> element over declaring <code>role="main"</code>, unless there are <a href="/en-US/docs/Web/HTML/Element/main#browser_compatibility">legacy browser support concerns</a>.</p>
 
 <h3 id="Skip_navigation">Skip navigation</h3>
 
@@ -117,7 +117,7 @@ <h3 id="Skip_navigation">Skip navigation</h3>
 
 <h3 id="Reader_mode">Reader mode</h3>
 
-<p>Browser reader mode functionality looks for the presence of the <code>&lt;main&gt;</code> element, as well as <a href="/en-US/docs/Web/HTML/Element/Heading_Elements">heading</a> and <a href="/en-US/docs/Web/HTML/Element#Content_sectioning">content sectioning elements</a> when converting content into a specialized reader view.</p>
+<p>Browser reader mode functionality looks for the presence of the <code>&lt;main&gt;</code> element, as well as <a href="/en-US/docs/Web/HTML/Element/Heading_Elements">heading</a> and <a href="/en-US/docs/Web/HTML/Element#content_sectioning">content sectioning elements</a> when converting content into a specialized reader view.</p>
 
 <ul>
  <li><a href="https://medium.com/@mandy.michael/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9">Building websites for Safari Reader Mode and other reading apps.</a></li>
@@ -154,12 +154,7 @@ <h2 id="Specifications">Specifications</h2>
 
 <h2 id="Browser_compatibility">Browser compatibility</h2>
 
-<p>The <code>&lt;main&gt;</code> element is widely supported. For Internet Explorer 11 and lower, it's suggested that an {{glossary("ARIA")}} role of <code>"main"</code> be added to the <code>&lt;main&gt;</code> element to ensure it is accessible (screen readers like JAWS, used in combination with older versions of Internet Explorer, understand the semantic meaning of the <code>&lt;main&gt;</code> element when this <code>role</code> attribute is included).</p>
-
-<pre class="brush: html notranslate">&lt;main role="main"&gt;
-  ...
-&lt;/main&gt;
-</pre>
+<p>To support Internet Explorer 11 and lower, you can add an {{glossary("ARIA")}} role of <code>"main"</code> to the <code>&lt;main&gt;</code> element. But understand that the ARIA in HTML specification states that <code>role="main"</code> shouldn't actually be used with the <code>&lt;main&gt;</code> element, and the W3C validator will report a warning for it. However, Internet Explorer 11 and lower will otherwise not correctly expose the <code>&lt;main&gt;</code> element to screen readers such JAWS unless the element also has a <code>role="main"</code> attribute.</p>
 
 <p>{{Compat("html.elements.main")}}</p>