Make it accessible
Hot Tip #69 is to make it accessible.
Providing people with health conditions or impairments, the ability to read and navigate your Landing Page easily is the right thing to do.
Here are five small tasks that can go a long way:
- Create a clear :focus state like this – keep hitting tab on your keyboard and see what happens in your Landing Page.
- Ensure your text color contrast isn’t weak – this text against this background – has a decent AAA accessibility score of 8.99.
- Increase your browser font size and see if your Landing Page layout breaks or anything become illegible.
- Correctly assign and order semantic headings (H1, H2, H3) – disabling your stylesheet or using a screen reader will quickly surface issues with your hierarchy.
- Describe all your non-decorative images using the alt tag – if an image is only there for graphic purpose you can let the screen reader skip it.
One hour tackling the above, could saves hundreds of frustrating hours for others.
The exercise will also strengthen your Landing Page by surfacing fundamental development issues.
- Chrome Lighthouse – Instructions how to run an accessibility audit for your Landing Page in Google Chrome.
- Contrast for Mac – Great tool I use to to ensure my text colors are within Accessibility standards.
- Accessible Color Generator – Useful to find the nearest accessible-passing color based on your color inputs (that are failing).
- Focusing on Focus Styles – Solid article by Eric Bailey covering :focus and :active CSS selectors.
- 10 Screen Readers – A curated round-up by UsabilityGeek.
- UserWay – A website accessibility solution for ADA & WCAG Compliance. Their widget sits in the corner of the browser where users can customize their browsing experience.
