Skip to main content

Accessibility

Last updated:
3/24/2025

Accessible design provides better user experiences for everyone.

Introduction

In recent years, governments have taken steps to insure that people of all abilities have access to digital services. Title III of the Americans with Disabilities Act (ADA) provides “regulations for private businesses and other entities to ensure access for people with disabilities within the realm of public accommodations.”

There has been a 177% increase in lawsuits filed in federal court under Title III from 2017 to 2018. More than 20% of new cases reference mobile sites or apps.

Conformance guidelines

Accessibility is not a feature — it is a requirement. At a minimum, all new or updated experiences must conform to the latest version of WCAG at Level AA. Wherever possible, experiences should conform to the latest version of WCAG at Level AAA.

Compliance does not necessarily equate to a great user experience, so making content, design, and code accessible should be the minimum goal. Push the boundaries to create experiences that users with diverse abilities will enjoy — not just experiences they merely tolerate.

Boston Scientific audiences

Boston Scientific is a global company that serves a diverse range of audiences. Its products and services are used to improve people's lives and should be made as accessible as possible.

Patients and caregivers

Sixteen percent of the global population and 26% of adults in the U.S. are currently living with a disability. That breaks down to 1.3 billion people globally, and around 21 million people in the U.S., making people living with a disability the largest non-majority demographic in the world. This number is also growing — according to World Health Organization (WHO), more than 3.5 billion people will need assistive products by 2050.

We also know that disability increases with age:

  • 3% of people 21 through 64 live with a disability
  • 40% of adults 65 and older live with a disability
  • 53% of people 75 and older live with a disability

The chance of a chronic illness also increases with age, with certain diseases or illnesses contributing to the likelihood of developing a disability. For example, the Center of Disease Control (CDC) found that adults with heart defects are eight times more likely to develop a disability than an adult without heart defects.

Health care professionals and administrators

Health care professionals are often disregarded in the discussion of accessibility. But, in fact, many health care professionals identify as having one or more disabilities. As stated above, age is another factor to take into account. The average age of a health care professional is 53.2 years old.

Depending on specialty, health care workers are also more likely to develop specific disabilities or illnesses. For example, radiation exposure is higher for people who work in cardiology. Radiation exposure can lead to a higher occurrence of cataracts, glaucoma, and macular degeneration. All three affect the ability to see.

Further reading

Our approach

Through our company-wide Digital Accessibility Program, we are increasing awareness and education, driving adoption of accessibility standards, and "shifting left" to move accessibility upstream in our processes.

Accessibility widget and overlay-based solutions

Accessibility widgets and overlays are not a solution for digital accessibility.

Accessibility widgets and overlay-based solutions have been marketed to companies as a “quick fix” for accessibility. However, these widget and overlay-based solutions are broadly discredited by users with disabilities and accessibility experts.

Users with disabilities have reported that widget and overlay-based solutions make the web worse for them. Some users have reported that they have to hack through the website and disable the widget or overlay so they can accomplish their tasks.

There are also hundreds of lawsuits (more than 250 in 2020) that are popping up against companies “solving” accessibility issues with widgets and overlays.

Screenshot of an accessibility widget interface

Further reading

For more information on widget and overlay-based solutions, please see the references below.

Color usage

For more information on color ranges, refer to the Color ranges section in Color.

Text

Text color must meet a minimum contrast ratio of 4.5:1 against its background color — 4.5:1 is required, but 7:1 is preferred. All states of the text (hover, visited, focused, active) should meet the minimum contrast ratio.

Check contrast ratios using these tools:

Icons

Colors used for icons, such as a menu or search icon, must meet a minimum contrast ratio of 3:1 — 3:1 is required, but 4.5:1 is preferred.

Color dependence

Do not rely entirely on color to convey information. Add another accessible indication of the information other than color. This indication can be another visual addition, such as text or an icon, or a programmatic addition.

Heading elements

HTML heading elements act as a table of contents or a document outline of sorts. Heading Level 1 (h1) is the highest level, and Heading Level 6 (h6) is the lowest. There must be one, and only one, h1 per page, and the h1 must be the subject of the page.

It is important to use heading elements in sequentially descending order without skipping levels — that is, an h6 should never come before an h1.

For more information, refer to the HTML spec on heading elements and headings and sections.

Page title

Page titles should be descriptive of the content on the page instead of marketing copy. At a glance, a user should be able to understand the subject of the page.

A page title should:

  • Identify the subject of the page
  • Make sense when read out of context, for example, by a screen reader or in a site map or list of search results
  • Be short

It may also be helpful for the title to:

  • Identify the site or other resource to which the page belongs
  • Be unique within the site or other resource to which the page belongs

The page title should be consistent across these elements:

  • Breadcrumb
  • H1
  • Sitemap link
  • Navigation link

SEO best practices

Page titles are very important for SEO. Here are some guidelines for writing effective page titles (tips taken from the SEO playbook, page 28):

  • Every URL needs a unique and compliant page title, similar if not identical to the h1
  • Page titles should contain the high-volume keywords that the URL is targeting at the front, while remaining natural and readable
  • Page titles should tell the user what to expect from the page’s content
  • Include the brand name if relevant, after the primary keyword if this is different
  • Page titles should be 60-70 characters in length

To align with best practices for accessibility and SEO, links must have unique and descriptive text that makes sense without the context of the surrounding content. This is so users know exactly what will happen if they click on the link, and so users who navigate our site with screen readers can tell links apart.

For more information, refer to WebAIM's article on links and hypertext and page 34 of BSC's SEO content playbook, p.34.

The title attribute’s purpose is to provide additional content beyond the link text. However, the title attribute has inconsistent browser support, is often misused to duplicate the visible link text rather than provide additional context, and is highly problematic for accessibility.

We do not recommend using the title attribute.

For more information, refer to the HTML spec on the title attribute, Mozilla’s documentation on accessibility concerns title, and TPG's article on the title attribute.

Images

Here are some image best practices:

  • Try not to use images of text or images with text — the only exception to this is labels on graphs and charts
  • Always add alternative text
  • Use descriptive file names — this will help with SEO

Scalable vector graphics (SVGs)

SVGs use an XML language to find vector images. SVGs are used to render vector-based graphics and can be rendered at any resolution or size without a loss of quality. This means that the user can zoom out or in on an SVG and it will never become blurry or pixelated. Because of this, SVGs are the most accessible image format for low-vision users. SVGs should be used for complex images whenever possible. Non-SVG images with text that cannot be highlighted with a cursor will not be readable by a screen reader.

The following should always be SVG files:

  • Icons
  • Logos
  • Text graphics
  • Diagrams
  • Charts
  • Maps
  • Graphs
  • Any vector-based graphic

Alternative (alt) text

Image alt text (text describing image, typically used by screen readers and search engines) is crucial for users who navigate the web with a screen reader. In the absence of alt text, the screen reader announces the file name (which is often unhelpful, at best). Alt text is also a key factor in search engine ranking, and it shows up in place of an image if it fails to load for any reason.

Things to consider when writing alt text:

  • Up to 125 characters
  • Objectively describes what user would see in image
  • Is applied to all non-decorative images (do not apply it to icons)
  • Does not include “image of” or “photo of” in the description
  • Uses keywords from your keyword research, especially those that are in the body copy
  • Includes product name(s), if relevant
  • Has a period at the end of the description

Tip: Try reading the text aloud to make sure it is helpful Anatomy, Boston Scientific's global design system, creates consistent and accessible digital experiences that empower our users' problem-solving.

Missing or inaccurate alt text can result in a massive amount of content/data loss.

Describe the image

Alt text must provide the textual equivalent of the image. This means that the alt text must describe the content and function of the image in context. When writing alt text, ask yourself "What will someone who can't see this image need to know?" For example, instead of saying "Doctors", say "Group of surgeons in the operating room." This is especially important for image-based infographics, charts, and tables.

Keep it concise

Alt text should be a description containing relevant keywords. Short, sweet, and to the point: alt text should provide an "at a glance" experience, unless describing charts or graphs.

Don’t say it’s an image

Screen readers add this by default. If necessary, end alt text by stating if the image is a certain type of image, like an illustration or infographic.

End with a period.

End the alt text with a period. This will make screen readers pause after reading the last word of the alt text.

Decorative images

If the image is purely decorative and does not contain important content, it should be marked as decorative so screen readers will skip over the image. This can be achieved by setting the alt attribute value to null or by using ARIA.

Resources

Refer to these alt text resources & writing guides for more information:

Videos

Videos with audio should be captioned, at minimum, an additional video transcript is preferred but not required. To meet Level A compliance, any recorded video must be captioned, to meet Level AA compliance, in addition to recorded video, any live video must also be captioned.

For more information on video best practices, refer to W3C's audio & media guide.

Captioning

Captioning should provide a text alternative of the speech and non-speech audio information that the user will need to understand the content.

Audio description

Audio description conveys any information that was displayed in the video visually rather than audibly. This description can be added via the video transcript or a separate audio track. Adding this information can be avoided by having the audio correspond closely to the video’s visuals.

Motion and animation

Motion and animation should be intentional and should help the user solve a problem or understand the page’s content better. Motion design can trigger nausea, vertigo, or dizziness in people who are motion sensitive. These side effects can be caused by excessive motion such as parallax scrolling, zooming, or flashing content. We also need to remember that people who rely on assistive technology will not experience motion or animation in the same way, if at all.

So while motion can be a great tool for understanding and interacting with content for a sighted, non-motion sensitive person, we also need to design for people who either can’t tolerate motion or can’t interact with it.

Here are some guidelines for designing with motion:

  • Never auto-play motion or animation; always allow the user to opt into the experience
  • Design the page with and without motion to ensure that all users will receive the same information regardless of their motion settings or devices
  • Make sure your motion design is solving a problem or helping the user in some way
  • Always include a pause button for all videos and gifs
  • Make sure the animation or motion does not overwhelm the rest of the page — try to stick to a third of the page at most
  • Avoid any flashing and limit bouncing to three times at most for any one second period
  • Ensure that motion animation can be disabled, unless the animation is essential to understand information on the page — and if that is true, make sure the user will be able to find that information another way (see first guideline)

Auto-play

At best, auto-play is an annoyance. At worst, it is an accessibility nightmare.

  • Sound that is automatically played can interfere with people who navigate the web by listening or through voice activation
  • Flashing media can cause seizures, dizziness, or nausea
  • People with attention deficit disorders or other cognitive disabilities may find auto-played content distracting or stress-inducing

Users, in general, don’t like losing control over what they listen to or watch. Give the user control over how and when they consume media. Always offer other ways to receive the same content, such as transcripts or closed captioning.

If auto-playing cannot be avoided, ensure the following:

  • The content lasts for five seconds or less
  • If the content is longer than five seconds, give the user a way to pause or stop the content
  • The content responds to personalized user settings, such as prefers-reduced-motion

Parallax scrolling

Avoid parallax scrolling. Studies show that parallax scrolling has a major impact on usability (especially on touch screen devices), accessibility, SEO, and performance. As many as 35% of users over the age of 40 are likely to be made nauseous or dizzy by parallax animation.

Further reading on the adverse effects of parallax scrolling:

File format

It is important to keep performance in mind when adding any animation as large animation files increase page load times. The best practice is to use mp4 files when adding animation files. GIFs can be ~5-10x larger than mp4 videos, making them the less efficient file format to use for adding animation.

Further reading on file format best practices:

Focus, tab, and content order

The source order, tab order, and reading order should all match.

The reading order of a page’s content should be logical and intuitive. The tab order should follow the reading order and the source order should follow the tab order. Consistent content order is important to deliver the same experience for sighted users and screen reader users.

Page content order should be maintained throughout all breakpoints. When faced with difficult ordering decisions, start designing for the smallest breakpoint and follow that order through to the largest breakpoint.

Here are some guidelines to follow when ordering content:

  • Ensure that the tab order follows the content’s reading order
  • Ensure that a user can navigate to all interactive elements using a keyboard
  • Ensure that content is not reordered depending on screen size