Using and heading section headings

Menus, content, sidebars, footers, and so on are all clearly separated and defined. When you visit the same site using a text-to-speech or a text-only browser, the experience is completely different. 

You no longer have visual cues as to where the section begins and ends, and you don't necessarily know what they are for. To fix this, we can add section headings and descriptions that are only visible or hearable when you're using a non-visual browser. These headings and descriptions can then provide more information about the different sections.

The reason why you want to add section headings is to provide information about each section for the non-visual browsers, so text-only or text-to-speech browsers.The accessibility benefit is obvious. These section headings define and explain separate sections, providing additional information to the person visiting the site. 

The web design SEO Manchester UKbenefit is more hidden. By adding this information in, the search engines can see what content is on the page and also what sections are defined so that it understands the content more easily, because though the primary focus of the search engines and social networks is to index just the title and description tags, they also read the rest of the page, and adding these section headings will give the search engine further information about what's on the page. 

Adding and hiding section headings is a two-step process. First, we go into the HTML page itself and add a section heading. So I will scroll down here to header navigation and then I'll add a section heading here. So I'll say h1, because this is a heading, and then I'll end my h1, just so it looks nice and clean, and then in here I will say, Main Menu. So now I have a heading that says Main Menu, so you can see that this is the main menu. I will also add a class to this so that I can style it. So I will say class, and I will call that section heading. 

If I save this now and open the page in my browser, you'll see we now have a section heading here for Main Menu. The problem is, as I did that, I broke the layout of my site because now the menu shifted down, and everything looks weird. The next step is to hide this heading, so it only appears if we turn the CSS off. There are several ways you can hide content from a browser using CSS, but in this case I don't really want to hide it from the browser; I just want to hide it from the person looking at the content in the browser. 

So instead of setting the display value to none, which means the text simply disappears and the browser can't see it, I want to take the text out of the context and shift it away from my screen, so I can't see it. So we will use absolute positioning to lift the text out of the stream of the rest of the content and then use a text indent to shift it all the way off to the left of the screen. To do this, I will open the styles.css file in Notepad and I will go down until I find my Global styles, and here at the very top I will add a new style for that class I just created.

So I will say class section-heading, and then first I will set the position to absolute, and I will just close this. If I save this and reload the page, you will see that now Main Menu has been taken out of the general stream of the content and just put all the way to the left. Now what I want to do is take the text and shift it so far to the left that you will never see it, no matter how big your screen is. So I'll go back, I will add another line, and then I will say text-indent, and then I will indent: -9999 pixels. That means the text will be indented 9999 pixels to the left of where it normally is, which means only if you have a screen that had 10,000 pixels of extra space to the left would you ever see the text.  

When I save this and reload the page, you will see Main Menu is gone, but if I go into CSS and disable styles Main Menu is right there. That means if someone is visiting a site using a text-only browser or text-to-speech browser they will see the section heading for the Main Menu, but if they're using a regular browser that shows CSS, they don't see it. That was a section heading. We can also go further by adding another section like a description, and simply add that same style to it and that'll be shifted off too. 

So we could go in to our HTML file, create a new div with the same class, we call it section-heading, and then write some text. Now when I save that, go back and reload, you'll see nothing changed when I am viewing it with CSS. When I disable the styles, we now also have description. By adding and hiding section headings and descriptions, you make it easier for people and search engines to navigate and understand your site without adding extra unnecessary content for those who have standard visual browsers.