search

reepolee / svelte-routify-windi-vite

Svelte Starter template with Routify file-based router, WindiCSS Tailwind compiler and Vite
52 stars 10 forks source link

HTML Accessibility/Spec issue with <main> element #12

Closed colinaut closed 3 years ago

colinaut commented 3 years ago

I noticed that the current code uses the <main>element as a container in the _layout.svelte file and on the index.svelte. According to W3C spec:

There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.

There are a few solutions to this. The easiest is just to use a generic<div> on the index.svelte page or on the layout page or both. You could get way more specific with the semantic html but as this is more of an example code starter it's probably best just to use the generic <div>, rather than restructure everything with perfect semantic html. Leave the latter to the person using it.

alesvaupotic commented 3 years ago

Thanks for noticing, my bad. Changed the layout to <div>, left <main> in index to showcase CSS on element without classes. Remember, this is an experimental starter which started as my own playground to test out Vite & Windi. I assume everybody will adapt the HTML and CSS to their liking after cloning, there is no use of this starter in its basic form.