HTML Accessibility
Write HTML with accessibility in mind. Provide the user a good way to navigate and interact with your site. Make your HTML code as semantic as possible, so that the code is easy to understand for visitors and screen readers.Semantic HTML
Semantic HTML means using correct HTML elements for their correct purpose as much as possible. Semantic elements are elements with a meaning; if you need a button, use the
<button> element (and not a <div>)
Semantic
<button>Click Me</button>
Non-semantic
<div>Click Me</div>
which read the contents of a web page out loud.
With the button example in mind:
- buttons have more suitable styling by default
- a screen reader identifies it as a button
- focusable
- clickable
A button is also accessible for people relying on keyboard-only navigation; it can be clickable with both mouse and keys, and it can be tabbed between (using the tab key on the keyboard).
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.
Headings Are Important
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Alternative Text
<img src="img_chania.jpg" alt="Flowers in Chania">
