Financial institutions (FIs) and their vendors/partners are currently caught up in what can certainly feel like a tidal wave of activity regarding user accessibility, specifically access to FI websites. Seemingly every day a new article or blog-type post is being written <blush> trying to inform us, direct us, chastise us, or sell us a product to help us. Based on the research our team has completed, and the lessons learned that we now have under our belt as we work through this evolving issue, I wanted to share what we have come to believe are the four pillars to be addressed in order to pursue an excellent experience for ALL consumers of the digital channel.
First, I feel compelled to editorialize just a bit. In all of this, stuff, please don’t lose sight of the fact that regardless of the methods employed by some of the participants in the legal community, and despite the fact that it just doesn’t feel very “right” to be held accountable for regulations that by most accounts don’t yet exist for the digital channel, the end result is a noble goal. Better accessibility for all users. We ALL want that. Who wouldn’t want that? So let’s all take a collective cleansing breath and talk about what this really means for us today and moving forward.
Our perspective is different of course as a technology partner. We are abstracted from the end user. That responsibility of communicating and accommodating ultimately falls to our clients. But what we are passionate about doing, what we MUST do to stay in a position of market leadership, is to provide our clients with the proper tools and structure to enable them to fulfill their obligation to their clients. Because of the volume of relevant content, we are going to break this in to three posts to be shared over the next few weeks. In part one we will focus on the elements that you MOST depend upon your vendor to accomplish, Design and Construction.
Knowledgeable Design and Site Construction
Designing and building a new website that meets accessibility standards is easier than modifying a current website to meet them, in the same way that it's easier to build a new building than to bring an older one up to code. I think that’s why we are seeing a lot of clients opting to redesign their sites as a response to the heightened awareness of their need to meet usability needs of all their clients. Regardless of whether you are starting fresh or not, here are some things you should be aware of regarding the design and construction of a standards-conforming website:
Color contrast is one of the largest design concerns for accessibility. The conformance standards require background and foreground colors used throughout the website to meet specific contrast ratios. This primarily applies to colored text and hover states on white or pale gray backgrounds (or vice versa), but may also apply to symbols, icons, and buttons a user must be able to identify to navigate your site. In addition, there is also a separate contrast requirement for hyperlinks that sit within normal (non-hyperlinked) text, and hyperlinks must also have another non-color visual indicator that they are links, such as being underlined.
An organization's chosen brand colors may not meet these required conformance ratios when combined with each other and/or additional accent colors. Our ProfitStars' web design team works frequently with our clients to find shades of brand colors that meet conformance guidelines while still speaking to your brand. Our designers can also make suggestions of how brand colors can be incorporated in alternative ways throughout the site, such as border accents. An example of a darkened color palette that can be used against white might look like this:
The logical flow of information on the page is another key construction concern when building a website to meet conformance standards. Following a logical flow of screen elements means that screen readers and keyboard users will reach and understand content in the same logical way that a sighted user will view these items. Tab order, the order in which you visit screen elements when using the tab key, is one example of logical flow: someone using a screen reader or keyboard to navigate through the website should be able to accomplish the same goals as a user who clicks with a mouse.
For example, if a button opens a modal window area, such as a shadowbox or lightbox, the screen reader and keyboard focus should move to the elements within that modal window and not be able to leave that window until it is closed. When the modal is closed focus should move back to the element that opened the modal.
Our ProfitStars development team evolved our build practices to use logical flow, but we see some that do not. Logical flow is something you can and should test once you receive your website. Tab through the website and see if it works as you expect it to. If it doesn’t, it likely will not respond as a user with visual impairment expects either.