Building a Boston.gov that is accessible for all

We’ve mentioned this before, but our work on Boston.gov is never done. Thanks to an ongoing partnership with a small, local business, Iterators LLC, we have conducted the City’s first-known Voluntary Product Accessibility Template (VPAT). This point-in-time report uses four modes of accessibility (perceivable, operable, understandable, and robust) and 61 testable success criteria. These metrics verify online and digital accessibility efforts completed by the City to-date, and document future work that should be done.

You can find a complete copy of the report online, but we’re sharing some highlights.

Accessibility snapshot

We’re happy to report that the City’s website maintains a AA standard. But, throughout this project, it was clear that software cannot replace the quality of human review. When the first review was done, we found out that we only partially met the full list of criteria. About 50 of the 61 testable success criteria were either partially or fully met, but this gave us clarity on what to do next.

So far, we’ve focused on enhancing:

We made some tweaks to our colors a while back for better color contrast and increased readability. We realized through this project that these updates weren’t quite reflected across the entire site. Now they are.

Parsing issues often lead to errors with page layout and wrong html tags. We want to focus on getting this right, so that assistive devices like screen readers can accurately navigate Boston.gov. We’ve started this work on some portions of our site, but have more work to do.

We want to ensure that all links and buttons have titles, alternative (alt) tags, and names.

We plan to make sure tables, lists, and iFrames on the site have captions, titles, and summaries. We will also be adding labels to input fields, such as form fields. These enhancements will make the online experience better for everyone, but particularly for those who use assistive devices, like screen readers.

We’ve changed many icons from being “background images” to being images recognized by all devices. By making this change, folks who use screen readers and similar devices are able to more easily access the “alt” text of our icons to give them more context on Boston.gov. 

Making sure everything has appropriate html markup is a start. But, we have more work to do to ensure that all those labels have meaningful content and a set hierarchy on the page. This work is ongoing.

Creating accessible experiences outside of Boston.gov

While this isn’t a part of our recent VPAT report, we think it’s important to highlight some of the accessibility work we’ve been adding to our other digital tools, specifically social media. Among our responsibilities, we manage the City of Boston’s main social media accounts, and even in this medium, accessibility is key. When displaying text in graphics in our posts, we either add “alt text” for those graphics, or we make sure the text in the actual post is the same as the text in the graphic. We also post multilingual graphics and text when we have that information available, especially during major events like the 2020 Election and the COVID-19 pandemic. 

When creating videos for sharing on YouTube and other social media platforms, we prioritize including caption files. Our YouTube videos also provide transcripts and contextual video descriptions, whenever possible. For Instagram, where a separate caption file isn’t possible, we often add the captions directly into our videos. We do this by adding burned-in subtitles (they appear as part of the video file itself). When critical and available, we also create multilingual videos in the City of Boston’s top languages.

Any questions or feedback? Send us an email at digital@boston.gov. We’re also in constant partnership and communication with our colleagues at the Disabilities Commission and the Office of Language and Communication Access. If you write to them about your experiences on Boston.gov or with any of our digital tools, they will also make sure to share your feedback with us.

If you want to learn more, check out some other posts about our work in creating an accessible City of Boston:

• A message from Commissioner McCosh: Improving digital accessibility (October 2020)
• Why it’s critical that your website is keyboard accessible (August 2020)
• Designing a violation envelope that's easier to understand (June 2020)
• Digital Storytelling team elevating Boston voices (November 2019)
• Creating accessible information for returning citizens (July 2019)
• There’s more than meets the eye to web accessibility (April 2019)