Keep Accessibility in Mind with Your Utility Website

Web accessibility benefits everyone, not just people with disabilities. Making sure to include certain accessibility features will make the site easier for everyone to use. When getting a site redesign by Powerful, you have several options. We offer a variety of blueprint floor plans – check out our Which Website Floor Plan is Right for Your New Utility Website? blog post. But no matter which blueprint you choose to go with, we always design with accessibility in mind. We’re sharing the secret on the features that we use across all our different blueprints.

Color Contrast

Whether you have branding colors already or are open to a palette, we make sure your colors stay compliant. We check the color contrast ratio between the text color and background, meeting the WCAG 2.1 AA standard. This ensures that it is accessible for a person who may be visually impaired and that your content can be read by every person coming to your site. This is true for the content on the webpage, as well as hyperlinks and buttons.

Fonts

Whether we follow your branding or hand-pick the fonts, we use google fonts. This ensures that the font is open source and will display the same across all browsers and computers. Everyone will have the same visual experience when coming to your site.

If we choose google font alternatives to your branding font, we make sure to select fonts that are a matching substitute.

Sidebar Menus & Navigation Tiles

All our interior pages have sidebar menus located on the left-hand side which serves several purposes.

The sidebar navigation menu offers an accessibility benefit. Those that may have trouble hovering over the links in a dropdown menu will have an easier time clicking through this option.

The sidebar menu also displays the nested child pages which offers a deeper navigation structure than the main dropdown menu. It also highlights the page that your site visitor is currently on. They are also able to see and navigate to all the pages within their current section.

We use navigation tiles on our top-level pages. A person may have mobility issues and struggles to click on the small links in dropdown menus. They will have an easier time navigating your site with the large buttons of the navigation tiles.

Breadcrumb & Font Size Links

All our interior pages contain breadcrumb links. This allows site visitors to see how they arrived to a certain page, and how they are able to navigate backwards.

We also provide a Font Size link. People with vision impairments can increase font size and are still able to easily access information on your site.

Translation Tool

All our sites will come equipped with the Google Translate Tool. It appears at the bottom of all pages and supports 133 languages.

This removes access barriers for:

• Site visitors who speak a language other than English
• Multilingual visitors who prefer to read in a language other than English

Text Links

With hyperlinks on your site, we make sure to use 2 methods to differentiate them from the surrounding text:

• Color – making sure that the link is a different color from the rest of the text
• Underline – the most intuitive and commonly used way for people to understand it is a link

The underline is a non-color designator. Site visitors who have low vision or color vision deficiency will still be able to identify the link from the surrounding text.

Photos

We avoid using photos with text embedded within the image. Screen readers and translation tools are not able to read or translate text in images. Remove text from an image and put it directly on your site whenever possible. This will ensure compatibility and reduce clutter visually.

Avoiding Automatic Sliders

Automatic sliders pose a variety of problems. Most site visitors associate them as ads and tend to ignore them. It also poses an accessibility issue. The slider often moves too quickly. Someone using a screen reader, or a person with a lower literacy rate who needs more time, will not be able to finish reading before the slider moves to the next screen. This will cause confusion as well as frustration for your site visitor.

Conclusion

Whatever blueprint you choose, you can rest assured that we design with accessibility in mind and that your website will be recognizably powerful.