What’s Semantic HTML
Web accessibility (also referred to as a11y) is the design and creation of websites that can be used by everyone. Accessibility support is necessary to allow assistive technology to interpret web pages.
You may hear of “ Semantic HTML” if you’re working as a Front-End developer, But what does this thing actually mean?
Without any additionals, Semantic HTML is when the content & its label match
What does this mean? “ content & label matches “
Let’s explain this concept by these great images
Imagine the elements on the desk as HTML elements, for example, you can see the monitor as a text field, We have the text field & its label in the correct way!
What does a “Not semantic HTML” looks like?
Let’s explain this thing with another great image : )
As you can see here, We have all content that we need & they’re working properly & correctly, But their labels aren’t correct! they’re wrong.
Having wrong labels doesn’t really mess up your HTML code but you’ll have a “ Not Semantic HTML” code that is the opposite of the “ accessibility in a web applications” principle.
What’s “ Accessibility in a web applications ”
Using the various HTML elements to reinforce the meaning of information in our websites will often give us accessibility for free. MDN link
Accessibility in real life : D
Let’s move from abstracted images & write real-life code, The most place we miss this concept is in our HTML forms.
Every HTML form control, such as <input> and <textarea>, needs to be labeled accessibly. We need to provide descriptive labels that are also exposed to screen readers.
Useful links:
