Używanie nagłówków (h1,h2.....)

Question

Mam stronę w react wykorzystująca react-router-dom i zastanawiam się nad używaniem nagłówków.

Jak ich użyłem:

• Mam stronę główną z h1 na której są różne sekcje z nagłówkami h3.
• Podstrony zaczynają się od nagłówka h2.
• Navbar zawiera nagłówek h3

Czy ten układ jest poprawny?

Answer 1

h1 określa tytuł danej podstrony i zawsze powinien być jeden na podstronę. Czyli zarówno na stronie głównej, jak i podstronach powinna się hierarchia zaczynać od h1.

Co więcej, hierarchia powinna być po kolei, zatem po h1 powinno następować h2 a nie h3.

Navbar wgl nie potrzebuje nagłówka, bo sam w sobie jest landmarkiem.

Swego czasu napisałem artykuł o nagłówkach.

Comments

Tylko czy używając react-router ta sytuacja się nie zmienia?

<Switch>
          <Route path="/" exact component={Start} />
          <Route path="/galeria" component={Galeria} />
          <Route path="/logowanie" component={Logowanie} />
 </Switch>

 

---

A co to zmienia? Strona przecież dalej jest renderowana do podobnej struktury co "normalna".

Answer 2

To czy to react czy nie to nie ma znaczenia. Zawsze na każdej stronie powinieneś dopasowywać tagi do odpowiednich sytuacji. Nie widzę całej strony aby ocenić czy w danej sytuacji powinieneś użyć h1, h2.. Do nawigacji używam tagu nav.

Tutaj masz kilka ciekawych przykładów użycia tagów może coś znajdziesz dla siebie.

Answer 3

Polecam korzystać z narzędzia WAVE dla przeglądarki 
WAVE - np jako EXTE

WAVE is a web accessibility evaluation tool developed by WebAIM.org. It provides visual feedback about the accessibility of your web content by injecting icons and indicators into your page. No automated tool can tell you if your page is accessible, but WAVE facilitates human evaluation and educates about accessibility issues. All analysis is done entirely within the Chrome browser allowing secure valuation of intranet, local, password protected, and other sensitive web pages.

 

https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?hl=pl