Accessibility Tip 💡
Keep only one <h1> element in an HTML page for better accessibility.
Check this thread to know why 🧵 ↓
Keep only one <h1> element in an HTML page for better accessibility.
Check this thread to know why 🧵 ↓
Old HTML specification by WHATWG had mentioned allowing <h1> elements in multiple sectioning content elements (e.g. <section>, <article> etc.) and had a theoretical document outline model based on such sectioning content elements.
However, browsers and screenreaders didn't implement it.
Screenreaders prepare document outline based on heading (<h1>-<h6>) levels of the whole document.
Screenreaders prepare document outline based on heading (<h1>-<h6>) levels of the whole document.
When we write <h1> element in multiple <section> elements, screenreader considers them top-level heading only, which confuses users.
So, on 1st July 2022, WHATWG removed the document outline based on sectioning content elements from the specification and updated it to have it based on heading levels only.
Now, it is officially recommended to not write <h1> element in multiple <section> elements to comply with screenreaders.
Thanks for checking this out.
Follow @codewithshripal for getting daily tips/threads about web development ✨
Retweet/like the first tweet of the thread to help spread the word.
Follow @codewithshripal for getting daily tips/threads about web development ✨
Retweet/like the first tweet of the thread to help spread the word.
جاري تحميل الاقتراحات...