2013-07-09 22 views
16

Jestem w trakcie ulepszania dostępności w moim kodzie HTML za pomocą HTML5 i WAI-ARIA.Czy można użyć elementu <aside> w elemencie <section role = "main">?

Czy można skonfigurować następujące ustawienia?

<!-- 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> 

Rzecz nie jestem pewien, czy powinien to mam element <aside> poza tym <section> i pojemnik role="main". Czy to ma znaczenie?

+0

Tytuł tego pytania jest mylący. Oznacza to, że pytasz o umieszczenie elementu '

+0

Zaktualizowałem tytuł, dzięki za splamienie. – shrewdbeans

Odpowiedz

17

To ma znaczenie tak. Gdzie umieścić, określa się, w jaki sposób treść w tagu aside odnosi się do głównej section.

Na przykład:

Jeżeli zawartość w aside jest związany z głównym artykułem, powinno być wewnątrz main section. Jednakże jeśli zawartość wewnątrz sidebar aside tag różni się main chciałbym umieścić go na zewnątrz main section

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

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

7

Tak go <aside> wewnątrz <section> jest całkowicie poprawny znaczników i przejdzie weryfikacji W3C , jeśli o to się martwisz.

Element element, który może zawierać element <aside> - jednak jeśli używasz tylko sekcji do celów stylizacji, prawdopodobnie powinieneś używać div.

Poza tym (pun przeznaczone) mam wątpliwości na role=main część jest ważna - according to this, jedyna rola wartości dopuszczalne <section> elementów atrybutu są przedstawione poniżej:

domyślnych semantykę Aria:

role=region.

Jakie inne role, stany i właściwości ARIA można wykorzystać?

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

Dowolne globalne atrybuty aria-* i dowolne atrybuty aria- * mające zastosowanie do dozwolonych ról w przypadku .

Które raczej nie obejmuje roli main.

2

Zgodzę się z Darrenem w odniesieniu do miejsca, w którym upuścisz etykietę. Co więcej, Twoje tagowanie jest trochę zwariowane. Różne znaczniki mają role WAI-ARIA natywnie, podczas gdy tak, możesz zastąpić natywne role, ale dlaczego?Ta post about WAI-ARIA na blogu Grupy Paciello mówi o tym więcej. Ex:

Insstead korzystania

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

można po prostu użyć <main>, co oznacza to samo, i lepsze praktyki. Znacznik <aside> ma uzupełniającą rolę dodaną natywnie, więc to tak, jakby powiedzieć: "Nazywam się Ryan", naprawdę mam na imię Ryan.

+0

Słyszałem gdzieś, że sensowne jest dodawanie ról do elementów HTML5 dla maksymalnej kompatybilności, czy to prawda? – shrewdbeans

+0

Jedynym, o którym słyszałem ten argument, jest "

+0

Przypadkowo właśnie czytałem artykuł o elemencie

autorstwa Bruce'a Lawsona, a on wspomina, że ​​nadal jawnie dodaje role do elementów takich jak nav i main: http://www.brucelawson.co.uk/2014/should-you- use-html5-header-and-footer/# comment-1869844 – crdunst

3

Spec (editor's draft który już zawiera main) nie pozwala zagnieździć element main wewnątrz article, aside, footer, header lub nav, ale nie mówi nic na temat gniazdowania tych elementów wewnątrz main. Zawiera również dwa przykłady, które używają article i nav (nawigacja wewnątrz dokumentu) wewnątrz main. Dlatego też powinno być dozwolone co najmniej aside, zagnieżdżone w article lub section (a zatem ustalone na poziomie). Mogę sobie również wyobrazić przypadek, w którym część treści z pewnymi informacjami uzupełniającymi w środku (jak w aside usage examples na Wiki WCAG) może tworzyć razem główną treść strony, więc nie sądzę, że niedopuszczenie do tego byłoby uzasadnione.

Z drugiej strony, algorytm konspektu (który teraz wydaje się być głównym powodem istnienia wszystkich sectioning content, w tym aside) jest nadal oznaczone as being 'at risk', więc określenie tych elementów może się zmienić, a niektóre wyjaśnienia mogą być dodawane .

Prawdopodobnie powinniśmy zadać to pytanie redaktorom specyfikacji HTML5?