Things We ❤️: Tools for Designing Accessible Websites

While browsing the web, a doodle says, “Whoa... This site is so accessible!” A web designer doodle gives a thumbs up and says, “Mission accomplished!”

Here at We ❤️ Health Literacy HQ, we’re always on the lookout for cool new tools to help us make the web a more accessible place. Today, we’re geeking out about tools that can help you make your site more accessible for users who are blind or have vision problems.

Use browser extensions for quick accessibility tips

Browser extensions are tools that you can add on to your internet browser. There are 2 free browser extensions that you can use to identify accessibility issues: Accessibility Insights for Web and WAVE Web Accessibility Evaluation Tool.

These extensions flag common issues like confusing links and missing alt text and offer practical tips to help you avoid those pitfalls. They can also help you understand how users might navigate your site using a screen reader.

Accessibility Insights for Web shows what it’s like to navigate the We ❤️ Health Literacy page using a keyboard. This image shows the path that the keyboard focus would follow to read the page content.

See what your users see

Seeing the web through your users’ eyes can help you better understand their needs. Google Chrome and Firefox offer built-in tools that can show you what it’s like to browse the web with different kinds of color blindness. Chrome also has a filter to simulate blurry vision.

Here’s how to access these tools.

In Google Chrome:

  1. Click the 3 dots in the top right corner of the Google Chrome window — then click More Tools > Developer Tools
  2. Hold down Command + Shift + P to open the Command Menu
  3. Click Show Rendering to open the Rendering Pane
  4. Choose an option from the Emulate Vision Deficiencies section
Google Chrome’s simulation tool shows what our homepage would look like for a user with blurry vision.
Google Chrome’s simulation tool shows what our homepage would look like for a user with blurry vision.

In Firefox:

  1. Click Tools > Web Developer Tools > Accessibility
  2. Choose an option from the Simulate drop-down menu

The bottom line: Find tools to help make your website more accessible for people with vision problems.

Tweet about it: Want to make your site more accessible for people with vision problems? Try these helpful tools, says @CommunicateHlth: https://bit.ly/3lagneD #a11y #HealthLit

 

Browse recent posts

Do you heart health literacy? We sure do! Sign up to get practical health literacy tips and tricks — delivered to your inbox every week.