Child Inclusion & Accessibility with Mr. Rogers

Maggie Stewart aka Mayor Maggie of Westwood & Mr. Rogers Dancing Gif.

It’s incredible how something you experience as a child 👦🏽 can leave such wonderful memories. Anytime I hear the name Mr. Rogers I get this nostalgic feeling and am reminded of this sweet and empathetic man who I grew up with. Even almost 3 decades later there are times when I’m taking off my shoes or putting away my coat and he comes to mind. In the wake of celebrating 50 years since his first show aired I wanted to show my appreciation by doing a short accessibility (a11y) audit of The Fred Rogers Company homepage to help them reach more people with their wonderful mission.

“The Fred Rogers Company strives to build on Fred Rogers’ legacy by creating quality children’s media that models an enthusiasm for learning and earns the trust of parents and caregivers.”

Now, with all that being said, let’s dig in. (See Fig. 1)

The Fred Rogers Company — Homepage (Fig. 1)

There are typically three things that I can do “quickly” to see how accessible a site is.

  • The first is tabbing through the website to see if there are visual cues to help people who might need them to navigate the site.
  • The second is to look at the colors and visuals to see if there are any potential issues with contrast as some color combinations could be difficult to see.
  • The last thing is to look at the source code to make sure it is semantically structured. This is important for devices, such as screen readers to properly read content in a way that makes sense to the reader.

Here are some of the nifty 👍🏽 web accessibility features The Fred Rogers Company is doing on their homepage:

👍🏽 When tabbing through most links there are outline borders set giving a link a highlight for better visibility. (See Fig. 2)

Image showing blue outline around link when link is focused on(Fig. 2)

👍🏽 The majority of the content is coded semantically which is great for screen reader users to make sense of the content they are reading. (See Fig. 3)

Image of source code showing good semantic code (Fig. 3)

Now here are some small and easy fixes 🛠 I’d recommend to make the site even more accessible to users with auditory, cognitive, physical, speech, and visual disabilities:

The Links:
There were a few things I found when tabbing through that are simple fixes.

⚠️ There are several links in various drop-downs in the main navigation that could delay a user using assistive technology such as a screen reader to access the page’s content quickly if they are tabbing through a page.
✅ Recommendation: Include a hidden “Skip to Content” link on all pages to help users get directly to the page content. Here’s how you would add the link and here’s how you would be able to hide it with CSS. (See Fig. 4)

Image of main navigation drop-down opened (Fig. 4)

⚠️ There are no visual cues when tabbing through the <a> tags aka anchor links for this section of the website making it challenging for some users with visual disabilities who may need them to access content. (Fig. 5)
✅ Recommendation: Add some CSS to make the links have cues. Here is a CodePen example of how to do this.

Image of links that need visual cues (Fig. 5)

Color Contrast:
With regards to color contrast, there are a few other small things.

⚠️ The main navigation’s white #FFFFFF text on the light blue #8496e1 background for the main navigation needs more contrast (See Fig. 6)
✅ Recommendation: Making the white text a darker color or darkening the light blue. Here is an example of a blue that would work.

Image of low contrast text links (Fig. 6)

⚠️ The main navigation dropdown that is white #FFFFFF on a light grey #95A1AA background needs more contrast (See Fig. 7)
✅ Recommendation: Making the white text a darker color or darkening the light grey. Here is an example of a grey that would work.

Image of low contrast text links in drop-down navigation (Fig. 7)

⚠️ Social Media footer links that are red #E51937 on a red #D4353E background needs more contrast (See Fig. 8)
✅ Recommendation: Making the red text a lighter color. Here is an example of a red that would work.

Image of red footer links with low contrast (Fig. 8)

⚠️ The donate button that is white #FFFFFF text on a green #3DAC29 background needs more contrast (See Fig. 9)
✅ Recommendation: Making the white text black or green background darker. Here is an example of black text that would work.

Image of green donate button with low contrast (Fig. 9)

Here are a few images that have simple fixes.

⚠️ Images that should contain alt attribute (alt text) to help describe them to users who are using assistive technologies such as a screen reader, include “The Fred Rogers Company” logo, arrows used to navigate through the slide show, social media icons in the footer and “Watch Episodes!” header image also in the footer (See Figs. 10–13)
✅ Recommendation: Add descriptive alternative text in the code for each image.

Image of Fred Rogers Company logo missing alt attribute (Fig. 10)
Image of slide show navigation arrows missing alt attribute (Fig. 11)
Image of social media icons missing alt attribute (Fig. 12)
Image of episode images missing alt attribute (Fig. 13)

The Code:
I came across someone thing that would be an easy fix.

⚠️ The Slider headers aren’t actual headers but instead wrapped in a <div> which make it difficult for a user using assistive technologies such as a screen to make easy sense of what this content is. (Fig. 14)
✅ Here I would recommend making the <div><h> tags, making it easier for users to find content through the semantic structure.

Image of slide show header and code snippet (Fig. 14)

I hope this post will help you, developers, designers, and product managers when it comes to building your digital products. May this help you better understand how you can build a solid foundation using simple methods for your products. The ultimate goal is to make your products accessible to the able body and disabled people, which in turn will save you money and make your product even better.

See you very soon for another quick-fix accessibility audit! Can we fix it? Yes, we can!

Interested in donating to The Mr. Rogers Company today? Donate here now

About me:
I’m a Full-Stack Designer at Flight Studio 1, where I focus on accessibility (a11y) as part of the user experience, front-end development, and graphic design. While understanding the interconnectedness and impact on society–which in turn, can help your business grow sustainably.

You can also catch me working with my good friends at Equal Entry where we partner up with organizations to ensure technology provides equivalent access to people of diverse abilities.

Hi 👋🏽, I’m Rodrigo Sanchez (He/Him).

Accessibility to the MAX! Curated by @RodrigoSanchez /