Semantics, Accessibility, & SEO

Semantic Markup is Key for Accessibility and Search Engine Optimization

'Semantic markup' and 'separating style from content' are key concepts for making the content at websites understandable by blind people, search engines, and everybody else. It's operationalized in HTML by limiting markup in content to headings (<h1> - <h7>), paragraphs (<p>), lists (<ul>, <ol>, <li>), and a couple levels of emphasis (<em> and <strong>). HTML5 and CSS3 add more tags for semantics including: <main>, <nav>, <aside> <header>, <footer>, <article>, and <section>.

Semantically marked-up html should not use plain <div>s with classes or ids named like nav, header, or menu!

Semantically marked up content is read in the order it appears in the document. It can be styled to be attractive to those with good vision and easy on the eyes for people with vision impaired by refractive or macular issues. CSS allows content to be placed on the page the best way for people who _can_ see, while the HTML is organized the best for 'web page readers' used by blind people. Search engines like Google or Bing can't 'see' the pages, and semantic markup helps them to index the content to lead people to the desired pages.

Semantic Markup

Semantics literally means the use of meaningful language. This means that when doing web development, the developer uses tags and identifiers which describe the content which they contain. In previous years, developers would use tables and other tags of the such to format their web pages and so if someone was looking at code or trying to read the page, the tags didn't necessary show what they were used for. Now with semantics, web pages are written using tags with their proper use such as h1, h2, h3, etc being used for heading and p tags being used for their paragraphs.

Semantics are important with SEO because search engines need the semantic markup so that they can understand what a website means so they can show it when someone searches for the site.

Semantic markup is also important for people with page readers who can't see the page but need to be able to read it. Without semantics, the page would read as something crazy rather than how it is seen to people who don't need to use page readers.


Section 508 of the Rehabilitation Act made it mandatory for Federal agencies to make their electronic and information technology information accesible to disabled people.

Accessiblity for HTML and the web means making sure that web pages and applications are available to everyone including people with disabilities. People with disabilities have to use assistive devices such as screen readers which read the contents of the page out loud so that people without sight can still access the information on the internet. People with mobility impairments that can't use typical mouse and keyboards have to use voice command software that allows them to move around the web.

One of the most key steps to accessbility is good design. This includes semantics and making sure that all tags and content is used where it should and not abused to make things work just for looks. In cases of using tables, the screen readers have a hard time deciphering what is written on the page and therefore the page is inaccessible to people who can't see. Good design is also key as the web site should be easy to navigate around even for people who use voice command software. Another key thing is having alt text to images. Without alt text, the screen readers can't tell the user what the image is without a caption and if the user doesn't know what the image is or if there eevn is an image then that takes away from the website.

Search Engine Optimization

Google's guidelines require 'honest markup' and their web crawlers now detect abuses such as hiding tags under images or text the same color as the background. The best way to get top placement is for one, use semantic markup. Since Google's web crawlers can see abuse of tags, not using semantics will only hinder you results. Using semantic tags makes your website more friendly to all people, whether disabled or not, and therefore make it more likely to show up higher in the search. Another way to optimize your websites search engine results is to publish relevant content. This means, have good quality content that is specific to your viewers and to one topic rather than having many different topics that don't go together or make sense. As well as having relevant content, updating your content regulary also helps your search engine optimization. By updating and posting relevant content regularly, the web crawlers can see that you website is still active and it should be listed higher in the search engine compared to websites that are no longer updated. Metadata is also a big help to search engine optimization. By having title, description, and keywords metadata, Google has proper information to show in search results. Without this metadata, people won't know what they're clicking on when they see the result and therefore are less likely to click on it.

Valid HTML & CSS

None of this works reliably unless the HTML is valid! Invalid HTML puts browsers 'quirks mode' and confuses web crawlers and visually handicapped folks.

Valid HTML & CSS goes hand and hand with semantics. By using proper HTML tags and proper CSS you give the users a better experience and can cater to all people using your website including disabled people.