È possibile utilizzare un elemento <aside> all'interno di un elemento <section role = "main">?

Question

Sono in procinto di migliorare l'accessibilità nel mio HTML utilizzando HTML5 e WAI-ARIA.

È OK avere la seguente configurazione?

<!-- main content --> 
<section id="main" role="main"> 
    <h1>The main content</h1> 

    <!-- This div needs to be here for styling reasons --> 
    <div class="the-content">  
     <p>All the text that goes with the main content</p> 
    </div> 

    <!-- the sidebar --> 
    <aside id="sidebar" role="complementary"> 
     <h2>A title</h2> 
     <p>Some text</p> 
    <aside> 
</section> 

La cosa non sono sicuro di è se dovrei avere l'elemento <aside> esterno del <section> e il contenitore role="main". È importante?

Answer 1

È importante sì. Dove metterlo è definito da come il contenuto nel tag aside si riferisce al principale section.

Ad esempio:

Se il contenuto del aside è legato l'articolo principale, dovrebbe essere all'interno del main section. Tuttavia, se il contenuto all'interno della sidebar aside tag è diverso da main avrei messo al di fuori della main section

http://html5doctor.com/aside-revisited/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside

Answer 2

Sì, è il <aside> all'interno del <section> è markup perfettamente valido e passerò la validazione W3C , se è questo che ti preoccupa.

L'elemento <section>allows flow content inside che può includere l'elemento <aside>, tuttavia se si utilizzano solo le sezioni per motivi di stile, è preferibile utilizzare invece un div.

A parte questo (gioco di parole) ho i miei dubbi da parte role=main essere valida - according to this, l'unico ruolo attribuisco valori accettati <section> elementi sono riportati di seguito: la semantica ARIA

predefinite:

role=region.

Quali altri ruoli, stati e proprietà ARIA possono essere utilizzati?

alert, alertdialog, application, contentinfo, dialog, document, log, marquee, search o status.

Qualsiasi attributo globale aria-* e qualsiasi attributo aria- * applicabile a i ruoli consentiti.

Che in particolare non include il ruolo main.

Answer 3

Concordo con Darren riguardo a dove si rilascia l'etichetta. Inoltre, il tuo tagging è un po 'strano. Vari tag hanno i ruoli WAI-ARIA in modo nativo, mentre sì è possibile sovrascrivere i ruoli nativi, ma perché dovresti?Questo post about WAI-ARIA sul blog del Gruppo Paciello ne parla di più. Es:

Insstead di utilizzare

<section id="main" role="main"> 

si potrebbe utilizzare <main>, il che significa la stessa cosa, e una migliore pratica. Il tag <aside> ha il ruolo complementare aggiunto in modo nativo, quindi è come dire che il mio nome è Ryan, in realtà il mio nome è Ryan.

Answer 4

La specifica (editor's draft che comprende già main) non permette di nido all'elemento main all'interno article, aside, footer, header o nav, ma non dice nulla di nidificazione questi elementi all'interno main. Fornisce inoltre due esempi che utilizzano article e nav (navigazione tra documenti) all'interno di main. Quindi almeno aside, nidificato nello article o section (e quindi con scope al suo livello), dovrebbe essere consentito anche. Posso anche immaginare il caso in cui parte del contenuto con alcune informazioni supplementari all'interno (come nello aside usage examples nella Wiki WCAG) potrebbe formare insieme il contenuto principale della pagina, quindi non credo che ciò sia del tutto inaccettabile.

D'altra parte, l'algoritmo di contorno (che ora sembra essere il motivo principale per l'esistenza di tutti sectioning content, compreso aside) è ancora segnato as being 'at risk', quindi la definizione di questi elementi può cambiare e qualche chiarimento possono essere aggiunti .

Probabilmente dovremmo fare questa domanda agli editor di specifiche HTML5?