WCAG - Benefits of Making Your Bank Website Accessible for Visually Impaired Users
When planning your new website, did you consider how easily visually impaired users can interact with your technology? If not, then you may have missed an important opportunity to service valuable members. Web site teams often overlook the need to make the site accessible for those members with disabilities, especially those who are visually impaired.
Keeping users with disabilities in mind when designing your web site will not only allow you to serve more customers, but it may also help to build loyalty amongst this important user group. Similar to adding sidewalk ramps to your building, you can also add “ramps” to your web site.
Audience analysis should be your first step
The most important element in planning an e-branch system, or any website, is to thoroughly identify and analyze your target audience. One characteristic that’s helpful to know is whether you have any members who are visually impaired. According to the National Federation for the Blind, in 2014 there were over 7 million visually impaired people in United States over the age of 16. This means most large banks and credit unions are likely to have members with a visual impairments.
How Blind Users Experience the Web
Can you imagine how helpful it would be for a blind member to be able to conduct her banking on-line from the comfort of her home? Now, imagine how disappointing it would be for that same member to learn that your site is not compatible with her text-to-speech software. For example, elements such as fly-out menus are often not compatible with speech readers. If your site uses this type of navigation, your visually impaired members may not be able to use your site! The benefit of improving accessibility isn’t only a benefit to your member. You may find these members may be the most frequent users of your e-branch system, and could be immensely valuable in helping to improve the site for other members.
Tips for making your website accessible for visually impaired users
Ok, so we’ve determined that most bank and credit union web sites are not built with emphasis on accessibility. We’ve also determined that accessibility is important because it provides a great benefit to some of your disabled members. We also know that based on current statistics, it’s likely that you have members who will benefit from a more accessible website. How do you make your site accessible to visually impaired members?
First, it’s important to recognize that creating an accessible website will not hamper your creative methods or advanced HTML usage. In fact, HTML specifications provide special accessibility tools. A primary goal when creating your HTML is to ensure that it is compatible with popular screen readers. A screen reader converts elements of a web page, including text, graphics and navigation into speech and reads aloud to the user.
Many screen readers will work well with popular browsers such as Internet Explorer, Chrome, and Firefox. Alternatively some people use text only browsers such as Lynx, or specialized browsers like JAWS. In most instances, there is no need to radically change your website appearance or learn special programming techniques. The most important key to designing an accessible website is to identify the need early, understand the requirements and limitations of screen readers, program your site accordingly and test often. If you follow these simple steps from the beginning of your site development process, you can develop an accessible site with minimal extra cost.
How do you actually make websites more accessible?
One aspect of many websites that causes them to be inaccessible to visually impaired users is the use HTML that is not screen reader friendly. Within HTML programming, there are often many ways to accomplish one particular task. For example, there are multiple methods to tell a browser to display a particular word in bold-faced type. While most popular browsers can interpret all of the methods, screen readers aren’t as forgiving. Unfortunately, many screen readers aren’t able to distinguish between all of these methods, and thus can either skip, add or even mispronounce a word when the wrong tag is used.
Tips when working with plain text on your site:
- Instead of using physical tags such as <b> or <I> use logical tags like <strong> and <cite>
- Keep your links short
- Keep your links descriptive, never use “click here”
- Use a period (.) or pipe (|) when separating text links. This will cause the screen reader to pause giving your links more clarity
- Use text with high contrast to the background color
For complete accessibility when working with images:
- Describe all images with ALT tags, even design elements. This will help the user to get an idea of the look of your site
- Never us an image map, these are incompatible with screen readers and accessibility controls. If you must, make sure to use alternative text links below
- Never use images of text in place of actual text
- If you have PDFs available for download or viewing, make sure to include a link to Adobe’s Accessibility web site for help reading PDFs
- Audio and Video items should include a transcript
- Make sure to not separate form field labels from the actual form element. For example: Name:<input type=”text” name=”name”>
- Provide alternatives for tables
- Layout pages with style sheets instead of tables
How much extra cost will WCAG compliance add to a website?
Keeping these guidelines in mind when designing will add some extra development time and testing time, but the additional cost is an investment into helping your website reach a wider audience. In our experience, it will add about 20% more time to building a page for the additional testing and coding time. This will vary based on how strictly you wish to adhere to accessibility standards. There may also be SEO benefits if Google, Yahoo, Bing, and other search providers give preference to accessible sites.
Video: Introduction to the Screen Reader with Neal Ewers
Accessible Web Design
WCAG 2.0 Design Principles
IBM Accessibility Center
JAWS Screen Reader Application