Designing an ADA Compliant Healthcare website

1
Designing an ADA Compliant Healthcare website

• Since there are no rules about what "ADA
  compliance" means for healthcare websites right
  now, the best thing to do is fix any problems
  with accessibility on your site.
• Accessibility on the web is not a one-time
  project. It's a task that never ends, just like
  SEO and performance.
• Every time you make changes or add new content,
  you'll need to follow these best practices. It's
  helpful to work with designers and developers who
  know these rules.

2
Web Accessibility Best Practices for Doctors

• 1. Consistent Navigation
•  
• When making a new healthcare website, you usually
  go through a strategy process to find a
  healthcare website navigation that is both easy
  to use and complete.
• The navigation menu is an important part of how
  people use your site as a whole. Visitors use the
  navigation as a road map to get where they want
  to go on the site and find what they are looking
  for. 
• It's important for web accessibility that the
  menu stays the same across the whole site. The
  navigation also helps meet the WCAG requirement
  of having more than one way to do something. This
  means that a visitor can get to a healthcare
  website page in more than one way.
•  
• As a rule of user experience (UX) design, you'll
  often put links to important pages all over the
  home page. This helps because most people will
  automatically scroll when they land on the page.
  Visitors will find it easier to find the
  important pages on your site if the menus are
  clear and easy to use.
• You should also give each web page in the
  navigation a name that tells visitors what they
  can expect to see on the page.

3

• 2. Alternative Text
•  
• Alt text, which stands for "alternative text," is
  one of the most important parts of making a
  healthcare website accessible. People who use
  screen readers and other assistive technology to
  look at your healthcare website rely on the
  alternative text descriptions to understand the
  pictures on your healthcare website pages. When
  it comes to SEO, you'll often hear the terms "alt
  text" or "alt tags." This is because search
  engines also use alternative text to figure out
  what an image is for.
•  
• WCAG gives rules for when alternative text should
  be added to images. If an image on a healthcare
  website page is just for decoration and doesn't
  add any information, you don't need to add an
  alternative text.
•  
• If the image is useful or gives context to the
  content, it's best to include an alt text that
  describes the image for people who use assistive
  technology.
•  
• You could also have images that link to a
  different page on your site. For example, if you
  have a call-to-action image in a blog post and
  clicking on it takes the reader to a page with a
  form or service, the alt text should explain how
  this works. If you leave out these parts, some
  people won't know that the images serve two
  purposes.
•  
• Most healthcare websites today are built on a
  content management system like WordPress, which
  makes it easy to add the alternative text to each
  image as you add it to the site.

4

• 3. Keyboard Navigation
• Some visitors may need to use their keyboard
  instead of a mouse to move around the healthcare
  website. Even though all sites should be built so
  that they can be navigated with a keyboard, it's
  very common for them to have quality control
  problems and other barriers.
•  
• When a user moves the keyboard focus to a certain
  object and can't move to another element, this is
  called a "keyboard trap."
•  
• When testing keyboard navigation, start by going
  through your menu and making sure a visitor can
  use all of the elements, drop-down menus, and
  buttons in the top navigation.
• Your developer or team of developers should also
  make sure that focus styling is there. This means
  that when a visitor tabs from one element to
  another, they will see a clear outline of the
  element that is in focus at the moment.

5

• 4. Color Contrast
•  
• People with poor eyesight or even color blindness
  need to know and follow the best practices for
  color contrast.
•  
• The WCAG 2.1 says that the contrast between the
  color of the background and the color of the text
  should be at least 4.51. A 31 contrast ratio
  can be used for bigger text.
•  
• You can compare different color combinations on
  your site with WebAim's Color Contrast Checker.
  Color contrast is also a good UX design practice
  because you want calls to action and key messages
  to stand out..
•  
• A good web designer will make sure that the
  different parts of the site and the text stand
  out well from each other. But it can be hard to
  meet the WCAG ratio levels across the whole site,
  especially if the colors you use for your brand
  don't have different tones.
• In this case, you might want to add a visual
  toolbar to the site that users can use to change
  the contrast themselves. With the free One Click
  Accessibility plugin for WordPress, you can add a
  simple widget that has these tools.

6
Doc Marketo

• Get in Touch
• Get in touch to discuss if you are looking for
  new patients for your clinic. Please give us a
  call, drop us an email or fill out the contact
  form and well get back to you.
• Visit Us
• 14110 Dallas Pkwy, Ste 125 Dallas, Texas - 75254
• Mail Us
• info_at_docmarketo.com
• Phone Us
• 1 [phone]