Almost every project on the web is written with HTML, Hypertext Markup Language. HTML is the standard markup language for web pages. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages and/or JavaScript.
Semantic HTML is the key toward good accessibility practices. A semantic HTML introduces meaning to the web page rather than just presentation.
When a screen reader or any sort of assistive device scans a web page, it gets information about the Document Object Model (DOM), or the HTML structure of the page. No styles or JavaScript will be read by a screen reader. Many screen readers have functionalities that allows a user to select to read only the headings on the page or only the links. Giving precedence to the way headings and links are written is a significant way we can make browsing the web easier for these users.
A great deal of web content can be made accessible just by making sure the correct Hypertext Markup Language elements are used for the correct purpose at all times. HTML should be coded to represent the data that will be populated and not based on its default presentation styling.
Some of the benefits from writing semantic markup are as follows:
- Search engines will consider its contents as important keywords to influence the page’s search rankings (see SEO)
- Screen readers can use it as a signpost to help visually impaired users navigate a page
- Finding blocks of meaningful code is significantly easier than searching through endless
divs with or without semantic or namespaced classes - Suggests to the developer the type of data that will be populated
- Semantic naming mirrors proper custom element/component naming
When approaching which markup to use, ask yourself, “What element(s) best describe/represent the data that I’m going to populate?” For example, is it a list of data?; ordered, unordered?; is it an article with sections and an aside of related information?; does it list out definitions?; is it a figure or image that needs a caption?; should it have a header and a footer in addition to the global site-wide header and footer?; etc.
Headings
- Use one H1 per page, matching the page title.
- Do not skip heading levels when increasing, but you can skip levels when decreasing (h1, h2, h3, h2, h3, h4, h2, h3, h4).
- The headings taken out of context should logically represent the page content for screen readers and users who choose this option as a way to scan the page.
Semantic elements
These are some of the roughly 100 semantic elements available:
<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>- <blockquote>
One of the best accessibility aids a screenreader user can have is an excellent content structure with headings, paragraphs, lists, etc. An excellent semantic example might look something like the following:
<h1>My heading</h1>
<p>This is the first section of my document.</p><p>I’ll add another paragraph here too.</p><ol>
<li>Here is</li>
<li>a list for</li>
<li>you to read</li>
</ol><h2>My subheading</h2><p>This is the first subsection of my document. I’d love people to be able to find this content!</p><h2>My 2nd subheading</h2><p>This is the second subsection of my content. I think is more interesting than the last one.</p>
Most times people write headings, paragraphs, etc. using presentational HTML and line breaks, something like the following:<font size="7">My heading</font>
<br><br>
This is the first section of my document.
<br><br>
I'll add another paragraph here too.
<br><br>
1. Here is
<br><br>
2. a list for
<br><br>
3. you to read
<br><br>
<font size="5">My subheading</font>
<br><br>
This is the first subsection of my document. I'd love people to be able to find this content!
<br><br>
<font size="5">My 2nd subheading</font>
<br><br>
This is the second subsection of my content. I think is more interesting than the last one.
Tools & Resources
Semantics on MDN
HTML: A good basis for accessibility on MDN
Semantic Html
