For an enhanced digital experience, read this story in the ezine.
Accessible playgrounds, adaptive equipment and inclusive programs have become increasingly available in our park and recreation systems, but there’s still one area where accessibility often remains an afterthought — our digital spaces.
Just like our parks and open spaces, our websites should be places that are welcoming, engaging, easy to navigate, well-maintained and allow for a wide range of activities. They are, in essence, virtual park spaces; yet they’re often built without compatibility with assistive tools, like screen readers, video subtitles or keyboard controls, which are the digital equivalent of a public building without ramps or automatic doors.
Here’s a challenge for you. Switch on the screen reader on your computer or phone (Cmd+F5 on a Mac, windows+Ctrl+enter on a PC); go to your agency website and try navigating your website using only keyboard or voice controls. Try signing up for a program or watching a video on mute. If you find the experience difficult, or even infuriating and want to yell at your computer, then your website is, according to WebAIM, one of the 97 percent of sites on the internet that aren’t fully accessible.
This lack of web accessibility is a great example of the “social model” of disability in action. It’s not an individual’s physical, visual or cognitive impairments that disable them from using a website — it’s the web design that disables them. That design is a direct result of the choices made by web designers, developers and marketing professionals. It’s our responsibility, therefore, to ensure the right design choices are made to provide full digital access to everyone.
If you did discover issues with your website, the tools and strategies listed below can help you make improvements or can help you get started with baking in accessibility in your next website request for proposal.
What Is an Accessible Website?
Web accessibility is all about creating a barrier-free internet for users who have visual impairments, are deaf, are unable to use a mouse and more. While there aren’t any clear legal definitions for what constitutes as an accessible website, the industry standards are centered around the Web Content Accessibility Guidelines (WCAG). WCAG currently has three levels: A, AA and AAA. Most organizations strive to meet AA standards. (A new version of the guidelines, WCAG 2.2, is expected to be published soon.)
The WCAG standards cover every aspect of a website, from color contrast to animations, but the most important areas to focus on are compatibility with assistive technology (AT), such as screen readers; ensuring all pages and interactive
elements are accessible through keyboard navigation; and ensuring content and workflows are functional for users with impairments.
Testing Accessibility
There are several tools available to help test for issues. Many of them are free to use. These include:
Google Lighthouse Reports
Lighthouse is a Google plugin that can be added to Chrome web browsers and used to run a report on any website. Lighthouse scores sites out of 100 for performance, accessibility, search engine optimization (SEO) and best practices, and provides an overview of how scores can be improved.
Wave by WebAIM
To test a website using Wave, add its plugin or visit WebAIM and type in any web address. The tool scans individual pages and highlights major and minor accessibility errors.
Manual Testing
Most modern computers and smartphones have accessibility aides built in, so simply switching these on and navigating a website without a mouse or touch controls can help reveal key issues.
Common Accessibility Issues to Look For
Color Contrasts
For web users with visual impairments, the contrast between background colors and text colors can impact the legibility of text. Aqua-colored text on a white background, for instance, can make your content impossible to read. To test contrasts, add your hex color codes to a contrast checker. AA or AAA scores pass the test.
Image Alt Text
Images and graphics on websites often convey a lot of information to visitors, so well-written alternative text invites more people into the full experience (the same goes for social media and other digital marketing). So, if you add a photo of an oak tree to your site, don’t just write “photo of a tree” as your alt text — be more descriptive. Perhaps something like, “a single mature white swamp oak tree in a grassy meadow, the dark green leaves have rounded nodes and acorns are starting to grow.”
Empty Links
Every link on your website should have some context that tells users where you’re sending them. Links that simply say “click here,” “read more” or are icons or graphics often don’t give screen readers any information. These are known as “empty links.” To fix this issue, it’s important that links either describe their destination (e.g., “read more about fall sports leagues”) or that images or icons have a relevant label in the code. The best practice for accessibility is to include what are known as Accessible Rich Internet Applications (ARIA) labels. These provide additional contextual information for screen readers.
Web Page Navigation
Just like landmark buildings can help you navigate around a town, landmarks on a website help keyboard and voice control users navigate their way around a webpage. Important landmarks, such as header, navigation, footer, main, sections and articles, should be clearly labeled in your code.
The hierarchy of your headings on a web page also is a really important navigational aide. For instance, every page should only feature one H1 tag, and following header tags should follow a logical hierarchy order — H2, H3 etc. Often, these tags are only used for styling text, so it’s important not to overlook their use as a navigational tool.
Tab Order
A web visitor should be able to navigate a site and interact with buttons and forms using keyboard controls only — and using the tab key is the standard way to travel between content on a website. So, when the tab key misses content, or jumps to content out of order, it can render a page completely unusable. Manual testing is the ideal way of identifying which sections of your content are being missed, while adding “tabindex” code can correct the issue.
Interactive Elements
Using slideshows, tabs, toggles and animations might look great on your website, but these can all create big issues for keyboard controls. Often, these elements require a mouse click to navigate through them, and at worst, they can create “keyboard traps,” where keyboard control users get stuck in a particular section of a website. Excessive motion or animation also can cause issues, especially for users with cognitive impairments — so every design choice should be made with all web users in mind.
Online Forms
Poorly designed forms are one of the biggest challenges for assistive technologies. It’s essential that field labels (email, name, address, etc.) are not just visual labels, but also are coded correctly. Otherwise, screen readers are unable to tell the users what each input field is for.
Additional Recommendations
Accessibility Widgets
Several widgets and plugins are available for websites that can instantly add accessibility enhancements. For instance, UserWay is a paid service that can be added to most sites, and while it doesn’t fix any structural issues with a website, it does add front-end controls on your website, such as changing text size, color contrasts or even switching the text to a dyslexia-friendly font.
Video Captions
Every video on your website should have closed captions for deaf or hearing-impaired web users, or for anyone who doesn’t want the sound on.
Accessibility Statements
Every website should have an easy-to-reach accessibility statement or webpage. This statement can outline how people can find additional aides, such as contact phone numbers or emails, find additional accessibility resources at your organization, and provide a way to report accessibility issues on your website.
Skip Links
Having to tab through a webpage’s navigation every time you load a page gets dull very quickly. To solve this, a Skip Link can be hidden in your code at the start of your navigation. This allows keyboard users to quickly “skip to content” and bypass the navigation.
Hopefully, this short guide will help you get started with improving accessibility to your “virtual park spaces,” and of course, websites aren’t the only places that can benefit from accessibility improvements. Many of the principles can be applied across your marketing and communications platforms. By baking in simple steps, such as adding alt text to social media images, checking color contrasts on print pieces, or replacing PDF forms with online forms, we can all help make our parks more accessible and welcoming to everyone.
Ian Everett is Marketing Manager for Virginia Beach Parks and Recreation.