As I've mentioned before, designing for accessibility has benefits far beyond disabilities. One benefit is how an accessible website could actually help your SEO (Search Engine Optimisation). A website designed with semantic markup and accessibility in mind not only increases your potential market but can also place you at a higher position in search engines giving you a higher chance of a higher number of people finding your business – that’s one extremely valuable benefit! So here's one quick tip for creating high accessibility and high visibility on your website.
Quick Tip – Create a Clear Hierarchy Using Headings
Think of your website as a book which is broken down into chapters, and arranged under headings, sub headings and paragraphs. Break your page content into reasonable 'chunks' for readability and use the predefined HTML heading and paragraph tags to arrange your content.
Structure example – always start with an ‹h1› tag and move through the other levels sequentially:
‹h1›Topic of the page‹/h1›
‹p›Paragraph overview of the page‹/p›
‹h2›Major topic 1‹/h2›
‹p›Paragraph about the major topic‹/p›
‹h3›Sub Topic 1‹/h3›
‹p›Paragraph about the sub topic‹/p›
‹h3›Sub Topic 2‹/h3›
‹p›Paragraph about the sub topic‹/p›
‹h2›Major topic 2‹/h2›
‹p›Paragraph about the major topic‹/p›
Using heading tags help structure your documents and make them easier to read and if you use these tags properly, web browsers, search engines and assistive technology will use these tags to gain a quick breakdown of your web page. Many assistive technologies use heading tags as anchors to quickly jump to different parts of a page.
Make sure your headings contain relevant, useful information – search engines will give more weight to the text inside the headings so they should also include some of your keywords or key phrases for your site.
Finally, don’t use headings purely to style your text. If you want something to be bold for example, you should use ‹strong› which will add emphasis using the correct method.
Headings should reflect the logical structure of the document; they should not be used simply to add emphasis, or to change the font size- W3C
