In this lesson, we review the design and accessibility of our site, and tune it to make sure it’s fully accessible — so all site visitors, including those who are Blind, low vision, visually disabled, Deaf, hard of hearing, or who have cognitive, learning, or mobility disabilities, can use our site. Learn more about how to make your site accessible and follow our Webflow Accessibility checklist when creating your site.
00:00 — Introduction 00:13 — 1/16 (Add hover on the nav links) 01:01 — 2/16 (Link destinations) 03:05 — 3/16 (Remove perfect and exactly. Add link to button) 03:59 — 4/16 (Change size of H1. Set H1 line height to unitless) 04:52 — 5/16 (Change text on Body to pure black) 05:42 — 6/16 (Change size of Hero paragraph. Set Body line height to unitless) 06:35 — 7/16 (Center Trusted by in Logos section) 06:57 — 8/16 (Optically balance logos) 07:49 — 9/16 (Edit Success and Error messages in Form) 08:27 — 10/16 (Adjust logo section to 3 x 2 grid in Tablet) 08:49 — 11/16 (Reduce card section grid gap to 10px in Tablet) 09:17 — 12/16 (Optically align logo and menu icon in navbar) 10:31 — 13/16 (Add margin to Submit button in Mobile landscape) 10:52 — 14/16 (Add alt text to all images) 12:40 — 15/16 (Clean up unused classes) 12:51 — 16/16 (SEO Settings and Open Graph Settings) 15:09 — Outro 15:33 — CTA: Thank you for watching
This is part of the Freelancer's Journey site build series. This video covers the design review and accessibility pass for the Freelancer course site — going through the site before launch to check for design consistency, catch issues, and verify that the site meets basic accessibility standards.
Topics covered include reviewing the site at different breakpoints, checking for missing alt text using the Audit panel, verifying heading structure, and reviewing interactive elements for keyboard accessibility. This is the pre-launch quality check stage of the site build project.