Helping Redmond Make Their Website Accessible to All

A few years ago, Romega designed Redmond Regional Medical Center’s residency website, focusing on their internal medicine residents. Later, we reworked the site to serve their new transitional year residency. Recently, Redmond came back to us to make sure their website was usable by people with disabilities. In other words, they wanted to make their website more accessible.

What Accessibility Means for Users

When we talk about accessibility, we’re talking about how well a website serves people with challenges like blindness or vision issues, hearing loss, and fine motor control issues. For those with various disabilities, there are different solutions. People with vision issues often use screen readers, which read a website to them. Those with fine motor control issues may navigate a website using a keyboard instead of a mouse. And for users with hearing loss, you want to make sure any videos or audio have text versions available too.

When we build a site, we try to follow general best practices. However, we can also do a deep dive into each component of accessibility if you need or want to make sure your site sufficiently serves those with disabilities. This can be especially important for websites that would be considered a public resource, such as healthcare.

This website has a bookmarklet you can use to check your own site for how well it meets accessibility standards.

How We Make This Happen

First, we look at the site as it currently stands to see how well it meets accessibility standards. Then we fix any issues and re-test. We provide a report with each accessibility standard and how well the website meets it after our work.

For Redmond, we looked at the following areas:

• Contrast: The ratio between color and its background. Good contrast on text is important for anyone with vision challenges.
• Alternative text for images: Alt text is the first principle of web accessibility. When a screen reader comes upon an image on a website, it will read this (hopefully) descriptive text to give context to the user.
• Form labels: Every input on a form should have a corresponding label to make clear what that form field does.
• Link text: Links should have title attributes and be readable out of context to make screen readers more effective. For example, a link that simply says “Click here” with no descriptive title is not very useful for screen readers.
• Headings: Wherever possible, make headings consecutive (e.g., H2 following H1). This helps screen readers understand the structure of a page.
• ARIA landmarks: Accessible Rich Internet Applications is a set of attributes we can apply to HTML elements to make them more accessible for users.
• Skip links: Keyboard and screen reader users generally must navigate a long list of navigation links and other elements before ever arriving at the main content. A ‘skip link’ allows them to get directly to the main part of the page.

Making Redmond Accessible

Here are some highlights of what we improved for Redmond Regional Medical Center.

Contrast
We found a few places where the contrast between text and background color was a little lower than the recommended standard. For example, Redmond’s website originally had gold buttons with white text. Now, those buttons have a charcoal gray text.

Alt Text
The site’s code already had alt text set for images used in the design, but because you can also add pictures through the content management system, we updated descriptions for all pictures in the media library. We also trained Redmond’s staff how to ensure alt text is added to all pictures in the future.

ARIA Landmarks
We ensured there were ARIA attributes in place to help screen readers understand each section of a given page. If you can see a website, you can intuit that the big block of text on the left is the main article, and the info on the right is a complementary sidebar. However, a screen reader doesn’t have that visual context, so we might mark the article as role=”main” and the sidebar as role=”complementary”. If you’re still curious, here’s more about ARIA.

Skip Link
Before we did this special project for Redmond, people using their keyboards to navigate the site would have had to hit the tab key through all the navigation links before getting to the main content. To avoid this, we added a link (that only shows up when you tab) that will skip straight to the main content.

Redmond prioritizes accessibility because of the nature of their work. No matter your job, we believe it’s necessary to design websites that anyone can use. If you agree, let us know so we can help you reach more people, no matter their needs.