Total Followers 132,503
Helen Keller, the deaf-blind and renowned American author and lecturer, who became world-famous for her passion towards preaching the importance of living a good life, conveyed an important message to the world through her life by overcoming the odds of sight and hearing deprivation. Hers was truly an outstanding case of determination and confidence. There are thousands of Helen Keller’s with hearing, sight, movement and cognitive disabilities out there in the world, dreaming and striving to lead a normal life as others.
With internet now becoming a necessity in the modern life, it’s really important to create applications that are easy to use for all equally – yes those Helen Kellers too. As a web designer we create experiences for the users and put them in the front seat, with our decisions relating to the interface. Equally important as following best practices and standards is to design UI for systems that are accessible to all types of users – Accessible Design, is what we should be aiming for.
Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. For this to happen, the system should be:
This is a really important aspect of web design, and making your site accessible to all the users means you are seriously supporting the concept of ‘Universality’.
The governing body of web standards and best practices – W3C, have recommended some guidelines, that each web author should be aware of in order to create interfaces that are accessible to all. These guidelines cover some important challenges towards making a web page accessible, and recommends some techniques which can help us to overcome them.
Creating a system that follows all these guidelines may not be feasible, due to the wider array of technologies and constraints that exist from time to time. But a sincere effort should be made to stick to these guidelines and let’s try to make things easier for all users alike.
Following are the 12 accessibility guidelines set forth by the www consortium, categorized upon the 4 principles:
Internet is evolving fast and so is the type of content on it. Every day millions of video, audio, graphics are generated and uploaded to the web. Making this huge amount of data accessible to users with some kind of disability is certainly a challenge. Most of the disabled users access web pages, with the help of some kind of assistive technologies / devices (eg. Screen readers, Speech synthesizers, Braille display etc), and the most widely absorbed/recognized content type for such assistive technologies is, ‘Text’.
So its important to provide text equivalent alternatives to such content, and following are some techniques that can be used to achieve this:
HTML markup:
<h3>This is the html text for the header</h3>
CSS markup:
h3{text-indent:-999px; background:url(path to the text as image) no-repeat left top;}
Another advantage of using such a technique is, it gives more semantic meaning to the markup, as this text gets rendered to the page, when viewed without CSS, and hence will help search engines to index the content properly. Therefore this is a SEO technique too.
Choose the right markup for the right scenario. Semantic correctness of a markup plays an important role when the page is being accessed by other assistive means like screen readers and similar tools. Eg, a header which is being rendered to the browser by using a bg image looks fine for a normal user, but for a user dependent on a screen reader the information will not be conveyed unless the element is rendered using a header (h1 – h6) HTML tag, with the relevant text in it (you could use the text-indent technique to use the bg image and still retain the text in the markup).
This would require the author to be well versed with the meanings of the markup tags, so as to implement it in a scenario that is suitable.
Also, it’s important to maintain the logical flow of the content in the markup. ie, content should be marked up in the flow in a way which is meaningful. Eg. A visual design may have the footer in the top near to the header, depending on the designer’s imagination, but logically a footer should be the last part of a page, and should be the last element in the DOM. The same should be positioned to the top, using CSS, which also means, there should be a clear separation between the content and presentation of the page!
Here are some tools that would help you to validate and make sure the markup is neat and correct:
Color is a good design element to communicate ideas, but it’s not always a good idea to rely only on colors to communicate something to the user, as there may be users with partial or complete color blindness who would find it difficult to differentiate certain contrast ratios.
Therefore, it’s recommended to use other visual cues like border, bg image, prefix text etc. for differentiating elements, in addition to using colors. Also, W3C has recommended a minimum contrast ratio of 4.5:1, for a visual presentation of text and images of text (logos, large-scale text and decorative text are exceptions).
There are a plethora of tools to validate the contrast ratio and other color related accessibility issues.
All functionality of the content should be accessible by the user using a keyboard. Some instances where keyboard accessibility plays an important role are:
Related links:
User should be able to pause, stop, or hide content which moves, blinks or scrolls, thereby giving the user enough time to read and use content.
Some instances where this guidelines will come handy:
The links by default have a dotted line around it, in case it is active. CSS can disable this property of an anchor tag, by using :focus{outline:none;}. This would compromise the accessibility of the page, by removing the visual cue that helps to make the content navigable.
It’s important to have the content of your page readable, and when I talk about content, I am referring to textual content specifically. Following are some tips for readable text:
Some links that can shed some light on readable typography:
There are a lot of tools and services available online, to keep a tab on the accessibility of your web page. Some are:
With the help of all these guidelines, tools and techniques, we should be able to build impressive and accessible online experiences that constantly push the boundaries of existing technologies all the time. Time and again, the change in technology forces more and more additions and deletions to the guidelines, and it is bound to happen. Whatever the guidelines may be, lets just make sure that the content available on the internet is accessible to all users out there … after all, that’s what the concept of universality tells us to do :)
Get The Only Freelancer crash course you will ever need to read!
A User Experience designer with specialized experience in front-end engineering, i have over time developed a strong passion in being associated with product-based teams. The unified goal and challenges that a product's life cycle offers is simply unbeatable! For me, proficiency in tools takes the back seat when it comes to User Experience Design, and i believe one has to be passionate and equally agile to be a key part of the team. I bring to the table the diverse hands-on experience on various facets of experience design, and have played key roles in the team bridging the gap between design, dev and biz groups within product teams. My vision is to be the key hand behind the UX design of a world-class product in a team of passionate and uber-smart techies and designers! Specialties: Information Architecture, Wireframing, Heuristic Evaluation, Web standards, Interaction design, Semantic markup, OO CSS, Usability Review
Tuesday, July 12th, 2011 18:02
What do you mean by input type=”submit” is not accessible by text readers? Can you provide more detail?
Wednesday, July 6th, 2011 05:03
Good article. Glad you made keyboard access a main point, I think that’s one of the biggest issues. Forms is another important issue, which wasn’t mentioned.
Friday, July 8th, 2011 04:56
Thanks Dennis, Forms really is a miss in this article. Thanks for the link share :)
Wednesday, July 6th, 2011 06:17
I was disappointed not to see a date, either on the post or on any of the three currently visible comments. Dates are important in terms of determining whether the claims are still valid and whether the tools are up-to-date.
Friday, July 8th, 2011 04:55
Hi Jennifer, Will take care of this in the future. This post was published on the 3rd of July 2011 :)
Tuesday, July 5th, 2011 21:49
Great article, really an interesting read, keep up the good work :)
Monday, July 4th, 2011 05:39
Hey Ranjith,
Grat article!
One nice tip is NEVER using visibility:hidden or diisplay: none for hidden content. This is because most of screen readers can’t access this content. So you should use position: absolute; top:-100000px instead :)
[]‘s
Friday, July 8th, 2011 04:57
Hi Rochester, Thats a new info for me … will update myself :)
Monday, July 4th, 2011 00:44
Picture-headlines with text-indent is not a measure for SEO. This technique is deprecated by Google. There is a video from Matt Cutts from Google, where he explains why it is better to put the text in the alt-attribute of the picture. Headline-text in alt-attributes works fine from screen readers.
Moreover, I don’t understand what kind of handicap could have an advantage of outlined links. Blind people? No. People with severe visual impairment? Can they see the dots? Deaf People? No.
If there is a clear strucutre of headlines in a document, accesskeys are not necessary. It is a lot of work to maintain accesskeys, beause everytime you change something, you have to re-enumerate them.
People with visual impairment usually have own high-contrast CSS-files which change every website into huge, yellow letters on black ground.
Wednesday, July 6th, 2011 09:08
Helen, outlined links (or at least some clear visual indication of focus) are most important for those who cannot use a mouse or have difficulties using a mouse (ie rely on keyboard access) and therefore need to follow the focus as they tab through the page. If the focus order is logical then it can be relatively straightforward to follow but it does depend on other factors like the complexity of the page, learning disabilities, visual impairment (not necessarily severe, just mild visual difficulties can make the dots of an outline become invisible).
The vast majority of people with a visual impairment have no idea how to change colours or font sizes, even the page zoom function on pages is beyond most peoples understanding of how they can improve viewing experience.
Wednesday, July 6th, 2011 09:11
Helen,
Just to clarify, I am only defending outlining of links by the browser default as the MINIMUM requirement for making focus obvious. I would much rather see a solid multipixel outline appear on focus or some other obvious change like reversing the text and background colours.
Thursday, July 7th, 2011 00:48
Outlined links are essential for keyboard users. I recommend you visit CNN.com and navigate just using the keyboard – you’ll get a better understanding of the issue of removing the outline on a:focus rule. A plague from CSS resets in my opinion. Also I think your statement “People with visual impairment usually have own high-contrast CSS-files” is somewhat misguided – most users have no real knowledge of applying own CSS to a website.
Friday, July 8th, 2011 05:00
Hi Helen,
The text-indent is definitely deprecated by google, and perhaps it should nt have been mentioned in this article. I just wanted to explore the options available, and thanks for pointing out. Actually the outlined links can turn out to be great timesavers (ofcourse not for blind users, but normal ones), when one is navigating to and fro a huge list of links, and i have experienced it. Also, we should be ultra careful in implementing access keys, and confine them to the most sensitive and important function.
Wednesday, July 13th, 2011 15:40
Hi Ranjith Kumar
I dont think we can use text-indent in any functional items that has been replaced by Images. As in certain cases the CSS can be applied but images are turned off. If the text-indent is used, there will be a heading which is not visible. Same for the links/buttons or any actions.
Rohini
Sunday, July 3rd, 2011 14:32
Wonderful article, enjoyed reading this.
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Ian
Sunday, July 3rd, 2011 14:32
Wonderful article, enjoyed reading this.
Dennis
Wednesday, July 6th, 2011 05:03
Good article. Glad you made keyboard access a main point, I think that’s one of the biggest issues. Forms is another important issue, which wasn’t mentioned.
Ranjith Kumar
Friday, July 8th, 2011 04:56
Thanks Dennis, Forms really is a miss in this article. Thanks for the link share :)
Jennifer Sutton
Wednesday, July 6th, 2011 06:17
I was disappointed not to see a date, either on the post or on any of the three currently visible comments. Dates are important in terms of determining whether the claims are still valid and whether the tools are up-to-date.
Ranjith Kumar
Friday, July 8th, 2011 04:55
Hi Jennifer, Will take care of this in the future. This post was published on the 3rd of July 2011 :)
Realgear
Tuesday, July 5th, 2011 21:49
Great article, really an interesting read, keep up the good work :)
Helen
Monday, July 4th, 2011 00:44
Picture-headlines with text-indent is not a measure for SEO. This technique is deprecated by Google. There is a video from Matt Cutts from Google, where he explains why it is better to put the text in the alt-attribute of the picture. Headline-text in alt-attributes works fine from screen readers.
Moreover, I don’t understand what kind of handicap could have an advantage of outlined links. Blind people? No. People with severe visual impairment? Can they see the dots? Deaf People? No.
If there is a clear strucutre of headlines in a document, accesskeys are not necessary. It is a lot of work to maintain accesskeys, beause everytime you change something, you have to re-enumerate them.
People with visual impairment usually have own high-contrast CSS-files which change every website into huge, yellow letters on black ground.
Ranjith Kumar
Friday, July 8th, 2011 05:00
Hi Helen,
The text-indent is definitely deprecated by google, and perhaps it should nt have been mentioned in this article. I just wanted to explore the options available, and thanks for pointing out. Actually the outlined links can turn out to be great timesavers (ofcourse not for blind users, but normal ones), when one is navigating to and fro a huge list of links, and i have experienced it. Also, we should be ultra careful in implementing access keys, and confine them to the most sensitive and important function.
Rohini
Wednesday, July 13th, 2011 15:40
Hi Ranjith Kumar
I dont think we can use text-indent in any functional items that has been replaced by Images. As in certain cases the CSS can be applied but images are turned off. If the text-indent is used, there will be a heading which is not visible. Same for the links/buttons or any actions.
Rohini
Mark wassmer
Thursday, July 7th, 2011 00:48
Outlined links are essential for keyboard users. I recommend you visit CNN.com and navigate just using the keyboard – you’ll get a better understanding of the issue of removing the outline on a:focus rule. A plague from CSS resets in my opinion. Also I think your statement “People with visual impairment usually have own high-contrast CSS-files” is somewhat misguided – most users have no real knowledge of applying own CSS to a website.
Richard
Wednesday, July 6th, 2011 09:08
Helen, outlined links (or at least some clear visual indication of focus) are most important for those who cannot use a mouse or have difficulties using a mouse (ie rely on keyboard access) and therefore need to follow the focus as they tab through the page. If the focus order is logical then it can be relatively straightforward to follow but it does depend on other factors like the complexity of the page, learning disabilities, visual impairment (not necessarily severe, just mild visual difficulties can make the dots of an outline become invisible).
The vast majority of people with a visual impairment have no idea how to change colours or font sizes, even the page zoom function on pages is beyond most peoples understanding of how they can improve viewing experience.
Richard
Wednesday, July 6th, 2011 09:11
Helen,
Just to clarify, I am only defending outlining of links by the browser default as the MINIMUM requirement for making focus obvious. I would much rather see a solid multipixel outline appear on focus or some other obvious change like reversing the text and background colours.
Rochester Oliveira
Monday, July 4th, 2011 05:39
Hey Ranjith,
Grat article!
One nice tip is NEVER using visibility:hidden or diisplay: none for hidden content. This is because most of screen readers can’t access this content. So you should use position: absolute; top:-100000px instead :)
[]‘s
Ranjith Kumar
Friday, July 8th, 2011 04:57
Hi Rochester, Thats a new info for me … will update myself :)
Todd
Tuesday, July 12th, 2011 18:02
What do you mean by input type=”submit” is not accessible by text readers? Can you provide more detail?