Accessibility is one of the most crucial factors in determining the success of a website. And accessibility does not limit to making it easier for people to get to your website.
Accessibility is one of the most crucial factors in determining the success of a website. And accessibility does not limit to making it easier for people to get to your website. Rather it also includes making all people able to get to your website easily. And this includes people with low vision as well.
You would be surprised to know how of your target audience consist of people with low vision. And failure to make your website accessible to them can result in significant withdrawal in your website traffic.
There is a difference between people who are blind and those who have low vision. While blind people have absolute zero visibility,
people with low vision can see but only read text with very large fonts.
Modern web browsers do allows internet users to zoom in on the online text in order to facilitate easy reading. However, there is a problem with columnar layouts. This is because when you zoom in too much, columns can get pushed off the screen or become illegible altogether in case of fixed-width layouts.
Here are some tips to overcome this problem:
• Create Text Only Pages – By creating ‘text-only’ versions of your web pages, you can make it easier for your visitors to magnify the pages and view the text or get the pages printed.
• Magnify Text Buttons – You can provide your website visitors with a ‘magnify icon’ that can increase the font size of the web page and make it easier for the readers to read the contents.
However, these solutions are not without a set of problems. With both the solutions there are accompanying setbacks. Some common problems are:
• High Maintenance – It is very difficult to maintain ‘text-only’ versions of web pages. Moreover, visitors don’t get the original page of the website.
• Magnification Errors – As it happens with browser magnification, the text might not fit into the screen and columns can scroll off the screen to either left or right and disappear altogether.
• Difficulty to Distinguish Headers – When the text contents are magnified, what happens is the headlines and bold characters look just the same. This makes it difficult for website readers to distinguish between the two.
• Color Confusion – Black text on white background is the most popular color scheme on the Internet. However, this is not very readable on a zoomed in version.
How to Create Zoom Layouts with CSS
Creating a zoon layout with CSS is easy. Just create a second style sheet, called ‘zoom.css’ and make sure it includes the following features:
• Single Column – Put all your content into a single column. This would enable website visitors to read all he content and not miss out anything, even if they are reading magnified versions of the page.
• Liquid Layouts – By making the layouts liquid and columns with flexible width, you can be sure that the website contents are readable even if your website visitors magnify the font sizes.
• Large Fonts – To make sure that your website layout is accessible to people with low vision, use proportional font sizes like ems or percentages so that your website visitors can easily bloat the font sizes.
• Inverted Screen Colors – Instead of reversing the traditional ‘black-on-white’ format and making it ‘white-on-black’ try soothing color combinations like blue or green on white.
• Simplify Navigation – Keep you navigation very simple. You can use classes to hide the sub-navigation links and keep only one or two basic levels of navigation on the top and bottom of the page.
• No Content Changes – Making content changes defeats the whole purpose of zoom layouts. So, don’t change anything of the page contents and let it be just as the original page.
