2012-06-25 11 views
29

Sui siti Web dimostrativi ARIA, role="contentinfo" viene in genere aggiunto sull'elemento footer.Dovrebbe essere sempre aggiunto il ruolo = "contentinfo" sull'elemento footer?

Tuttavia, footers in modern web design può essere creativo in modo che possano anche contenere elementi come collegamenti di navigazione supplementari, collegamenti a siti Web sociali o anche moduli di newsletter.

Prendendo ad esempio i seguenti codici di footer. È necessario aggiungere role="contentinfo" allo footer o all'elemento p?

<footer> 
    <nav> 
     <ul> 
      ........ 
      ........ 
      ........ 
      ........ 
      ........ 
     </ul> 
    </nav> 
    <form> 
     ........ 
     ........ 
     ........ 
    </form> 
    <p>© 2012 Website.com. All rights reserved.</p> 
</footer> 


EDIT: mi aveva fatto questa domanda utilizzando la mailing list del W3C ARIA, e Steve Faulkner, membro del W3C HTML Working Group ha risposto. Il seguente è il suo suggerimento:

Vorrei anche prendere in considerazione il modo in cui i browser mappano l'elemento footer alle API di accessibilità.
In Firefox il piè di pagina è mappato su ARIA role = contentinfo
In Webkit/safari/chrome il footer è mappato su ARIA role = group se è contenuto all'interno di una sezione o di un articolo, altrimenti è mappato a role = contentinfo
In IE non è mappata

Così facendo questo:
< ruolo div = "ContentInfo">
        alcuni contenuti
        < footer> alcuni contenuti </piè di pagina>
</div>

porterà a punti di riferimento ContentInfo annidati essere annunciati nei browser che già mappano piè di pagina ContentInfo.

Suggerirei quindi di aggiungere role = contentinfo al piè di pagina principale, senza preoccuparsi troppo dei contenuti che si ritiene potrebbero non essere appropriati nel footer.


Quindi l'approccio suggerito è l'aggiunta role="contentinfo" alla principale footer.

risposta

8

penso che dovrebbe essere sul tag piè di pagina nel tuo caso.

E 'pensato per dare informazioni relative al documento principale, quindi vorrei utilizzarlo se gli elementi footer danno un buon contesto del genitore.

http://www.w3.org/TR/wai-aria/roles#contentinfo

+0

Grazie a @bcm. Sì, questo è l'approccio suggerito. –

+0

Anche se questa potrebbe essere la soluzione giusta, è in conflitto con le specifiche. Contentinfo è "Un'ampia regione percepibile che contiene informazioni sul documento principale". Se ho dei collegamenti social o un modulo di iscrizione alla newsletter nel mio footer, ovviamente questo va contro le specifiche. –

2

vorrei andare con l'elemento <p>. Voglio dire, il punto di HTML è dare contesto al tuo testo. Quindi dai un contesto appropriato facendo un markup appropriato.

Dare il ruolo per l'elemento più appropriata, non è un attributo limitato a piè di pagina elementi.

+0

Grazie a @Truth per la tua preziosa opinione. Questa risposta è stata contrassegnata come utile. –

5

Per ora non v'è alcuna risposta definitiva a destra.

Se si va dalle specifiche: http://www.w3.org/TR/wai-aria/roles#contentinfo, contentinfo è descritto come:.

"una grande regione percepibile che contiene informazioni sul documento genitore Esempi di informazioni inclusi in questa regione della pagina sono i diritti d'autore e collegamenti alle dichiarazioni sulla privacy. "

Quindi, in questo caso deve essere inserito nel tag <p>.

Tuttavia, fingere di essere l'utente che utilizza questi punti di riferimento. Se tutti collocano lo role="contentinfo" su footer, questo è ciò che l'utente si aspetta. All'utente non importa cosa dice una "specifica", vogliono solo un'esperienza coerente mentre navigano da un sito Web all'altro. Probabilmente si aspettano link ai piè di pagina e tali sono nella sezione contentinfo, perché è così che viene implementato su molti siti e, come hai detto, è il modo consigliato per molti esperti di accessibilità.

preferisco per soddisfare l'utente, e quindi mi applico sull'elemento footer, però io continuo nella parte posteriore della mia mente che questo va contro la spec (o almeno la mia interpretazione di esso) e che l'implementazione di questo potrebbe cambiare in quanto i browser e altre tecnologie accessibili iniziano a implementare l'accessibilità in modo più coerente.

+0

Grazie per la tua opinione. –

1

È informazioni ridondanti la semantica sono già convogliati attraverso le specifiche HTML5 https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html#the_difference_between_html5_and_aria

Generalmente è possibile saltare i ruoli ARIA se si sovrappongono con la comprensione semantica dell'elemento HTML5.

Penso che sia giusto, ma è necessario testare dai lettori di schermo per determinare che questo è accurato.

+0

Ma l'elemento 'footer' può anche essere in elementi di sezionamento. Non sono sempre le informazioni sul contenuto. –

+0

Vero. Grazie! Quindi immagino dipenda solo da ... –

+0

Questo dovrebbe ancora essere esposto diversamente nell'albero di accessibilità dai browser a seconda che il 'footer' sia un elemento figlio diretto di' body' o di un elemento 'section'. –