Web Accessibility (often abbreviated as a11y) is the practice of ensuring your website can be comfortably used by absolutely everyone, regardless of hardware, software, language, location, or physical / cognitive ability.
For example, visually impaired users often rely on software called "Screen Readers" which literally read the HTML code of your website out loud to them. If your code is messy, the user's experience will be completely broken.
As you learned in the Semantic Elements lesson, a screen reader cannot tell what a <div> is supposed to be. Is it a menu? A footer? A button?
By using the correct tags for the job, you get built-in accessibility for free.
<div class="fake-button"
onclick="submit()">
Submit form
</div>A screen reader will just say "Submit form". The user won't know they can click it, and they cannot navigate to it using their keyboard's Tab key.
<button type="submit">
Submit form
</button>A screen reader announces "Submit form, Button". The user instantly knows they can interact with it, and it is fully keyboard friendly!
We covered this in the Images lesson, but it cannot be overstated. Every single <img> tag must have an alt attribute describing what the image looks like.
<!-- A blind user will hear: "A golden retriever playing in the snow" -->
<img src="dog.jpg" alt="A golden retriever playing in the snow">
<!-- If the image is purely decorative, leave alt empty so it is ignored -->
<img src="spacer.png" alt="">ARIA stands for Accessible Rich Internet Applications. It is a set of special HTML attributes designed specifically to attach meaning to custom elements when native semantic tags aren't enough.
Sometimes you have a button that just has an icon inside of it (like an "X" to close a modal). A sighted user knows what it means, but a screen reader sees no text!
<!-- Screen reader announces "Close Dialog, Button" -->
<button aria-label="Close Dialog">
<svg>... (X icon code) ...</svg>
</button>If you have a decorative element that would only confuse a screen reader (like an aesthetic background graphic that happens to be an SVG), you can hide it from the reader completely.
<i class="fa fa-star" aria-hidden="true"></i>Used to tell a visually impaired user if a dropdown menu or an accordion panel is currently open or closed.
<!-- A dropdown menu toggle -->
<button aria-expanded="false">
Settings Menu
</button><input> instead of a fake span) over trying to bolt-on ARIA attributes to fix bad code. ARIA is a last resort tool.
Never rely solely on the placeholder attribute inside a text input. Screen readers need a dedicated <label> tag tightly linked to the input via the id attribute so they know exactly what data the user is supposed to type.
<label for="username">Enter your Username:</label>
<input type="text" id="username" name="user_id">