7. Accessibility & SEO
What is Web Accessibility?
Web accessibility ensures that all users, including those with disabilities, can access and navigate your website. This includes screen reader users, keyboard-only users, and people with visual or cognitive impairments.
Alt Text and ARIA Roles
Images should always include descriptive alt text. ARIA roles help screen readers understand complex elements like menus, modals, or navigation bars.
<img src="logo.png" alt="Company logo">
<nav role="navigation">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>Heading Structure
Proper heading hierarchy helps screen readers and improves SEO. Use <h1> for the main title, <h2> for sections, <h3> for subsections, and so on.
<h1>My Portfolio</h1>
<h2>Projects</h2>
<h3>Web Design Project</h3>Meta Tags for SEO
Meta tags provide information about your page to search engines. Important ones include title, description, viewport, and keywords (optional).
<head>
<title>My Portfolio</title>
<meta charset="UTF-8">
<meta name="description" content="My Portfolio, showcasing web projects">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>Performance Best Practices
Fast-loading pages improve SEO and user experience. Optimize images, use lazy loading, and minimize unnecessary scripts.
Mini Project Step 7: Accessible Portfolio Page
Take your multimedia profile page and make it fully accessible and SEO-friendly.
- Add meaningful alt text to all images.
- Use ARIA roles for navigation, sections, or forms.
- Ensure proper heading hierarchy (<h1>, <h2>, <h3>) throughout the page.
- Add meta title, description, and viewport tags.
- Optimize images for faster loading and use lazy loading where possible.
- Check keyboard navigation works for all interactive elements.