How to Author a Super Accessible Website

Posted in Usability, Web Design3 years ago • Written by 15 Comments

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.

What is accessibility?

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:

  • Perceivable – Information and user interface components must be presentable to users in ways they can perceive
  • Operable - User interface components and navigation must be operable
  • Understandable – Information and the operation of user interface must be understandable
  • Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies

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’.

What are Accessibility guidelines?

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:

  • Perceivable
    • Guideline 1.1: Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language
    • Guideline 1.2: Time-based Media: Provide alternatives for time-based media.
    • Guideline 1.3: Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
    • Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background
  • Operable
    • Guideline 2.1: Keyboard Accessible: Make all functionality available from a keyboard
    • Guideline 2.2: Enough Time: Provide users enough time to read and use content.
    • Guideline 2.3: Seizures: Do not design content in a way that is known to cause seizures
    • Guideline 2.4: Navigable: Provide ways to help users navigate, find content, and determine where they are
  • Understandable
    • Guideline 3.1: Readable: Make text content readable and understandable
    • Guideline 3.2: Predictable: Make Web pages appear and operate in predictable ways
    • Guideline 3.3: Input Assistance: Help users avoid and correct mistakes
  • Robust
    • Guideline 4.1: Compatible: Maximize compatibility with current and future user agents, including assistive technologies.

Techniques for attaining accessibility

Importance of alternate text

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:

  • Alt text – ‘Alternate’ text (short text description) should be given for non-text elements, so that assistive technologies like screen readers can read the same and access the information. There are various instances where an alt text can be used
    • images
      Syntax: <img src=”path” alt=”alternate text comes here”/>
    • Submit buttons (since input type=”submit” is not accessible by text readers, it’s better to give images as submit buttons, so that we can give alt text to the same)
      Syntax: <input type=”image” name=”submit” src=”image path” alt=”alternate text comes here” >
  • Text-indent – while using CSS, it’s common to use text as images for headers and similar elements, where complex typography is involved, and in some cases, where the font is not available for a specific browser to be rendered. In such cases, we can make use of ‘text-indent’ property to increase accessibility of such elements. Here, we provide the text equivalent of the element as a normal HTML text, but hide it from being shown by giving a large negative indent value, so that it is out of the viewable area of the element.
    • Example:

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.

  • Longdesc – Though this is a poorly supported attribute, I believe this should be given more support in times to come. ‘Longdesc’ helps us to point to a URL, with a much detailed description of the non-text element.
    Syntax: <img longdesc=”url”/>

  • Audio / Video content – Every audio content (pre-recorded) link, should be followed by a text transcript, so that it is accessible to users with hearing disability. Also, if it’s a video-only content (pre-recorded), its recommended to have a synchronized sound track and subtitle which announces the relevant actions in the video.

Semantically and Sequentially correct markup

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:

Don’t rely on colors alone

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.

Keyboard Accessibility

All functionality of the content should be accessible by the user using a keyboard. Some instances where keyboard accessibility plays an important role are:

  • Access –key enabled pages: Access-keys are super useful in instances of repetitive workflows, where the user is required to do the same actions multiple times, and where there is a large amount of data. The technique is to assign functionality of moving the cursor to particular sections of the page, or to focus on various input elements of an HTML form.
  • Functionalities, which supports keyboard shortcuts like, Carousel navigation, Slideshow gallery

Related links:

Moving, Blinking, Scrolling content

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:

  • While using a carousel based slideshow. There should be a pause button, where the user can control the slides
  • Any gallery where there is an auto enabled moving set of content. The user should be given the option to stop the slide.

Don’t disable ‘outline’ of links

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.

Readable text

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:

  • Maintain a healthy line width (the no. of characters per line). Normally 65- 70 characters per line is considered readable. The key behind setting an optimal line width, is to make it easy for the reader to read a line and then locate the next line, which would be difficult, if the line is too wide in length
  • Make sure, you have an optimal line-height for your textual content. This is also referred to as “leading“. It’s always better to set the line-height 3-6 points larger than the type size. ie, if your font-size is 12pts, 17 pts would be an ideal line-height. Use the “line-height” property of CSS for this.
  • Always make it a practice to set your font-size using ‘em‘ CSS unit. This is for seamless rendering of the text-size when the page is zoomed in and out.

Some links that can shed some light on readable typography:

Usage of accessibility tools and services

There are a lot of tools and services available online, to keep a tab on the accessibility of your web page. Some are:

Conclusion

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 :)

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

12 Written ArticlesWebsite

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

15 Comments Best Comments First
  • Ian

    Sunday, July 3rd, 2011 14:32

    1

    Wonderful article, enjoyed reading this.

    0
  • Dennis

    Wednesday, July 6th, 2011 05:03

    6

    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.

    0
    • Ranjith Kumar

      Friday, July 8th, 2011 04:56

      11

      Thanks Dennis, Forms really is a miss in this article. Thanks for the link share :)

      0
  • Jennifer Sutton

    Wednesday, July 6th, 2011 06:17

    5

    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.

    0
    • Ranjith Kumar

      Friday, July 8th, 2011 04:55

      10

      Hi Jennifer, Will take care of this in the future. This post was published on the 3rd of July 2011 :)

      0
  • Realgear

    Tuesday, July 5th, 2011 21:49

    4

    Great article, really an interesting read, keep up the good work :)

    0
  • Helen

    Monday, July 4th, 2011 00:44

    2

    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.

    0
    • Ranjith Kumar

      Friday, July 8th, 2011 05:00

      13

      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.

      0
      • Rohini

        Wednesday, July 13th, 2011 15:40

        15

        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

        0
    • Mark wassmer

      Thursday, July 7th, 2011 00:48

      9

      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.

      0
    • Richard

      Wednesday, July 6th, 2011 09:08

      7

      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.

      0
      • Richard

        Wednesday, July 6th, 2011 09:11

        8

        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.

        0
  • Rochester Oliveira

    Monday, July 4th, 2011 05:39

    3

    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

    0
    • Ranjith Kumar

      Friday, July 8th, 2011 04:57

      12

      Hi Rochester, Thats a new info for me … will update myself :)

      0
  • Todd

    Tuesday, July 12th, 2011 18:02

    14

    What do you mean by input type=”submit” is not accessible by text readers? Can you provide more detail?

    0
  • Todd

    Tuesday, July 12th, 2011 18:02

    14

    What do you mean by input type=”submit” is not accessible by text readers? Can you provide more detail?

    0
  • Dennis

    Wednesday, July 6th, 2011 05:03

    6

    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.

    0
    • Ranjith Kumar

      Friday, July 8th, 2011 04:56

      11

      Thanks Dennis, Forms really is a miss in this article. Thanks for the link share :)

      0
  • Jennifer Sutton

    Wednesday, July 6th, 2011 06:17

    5

    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.

    0
    • Ranjith Kumar

      Friday, July 8th, 2011 04:55

      10

      Hi Jennifer, Will take care of this in the future. This post was published on the 3rd of July 2011 :)

      0
  • Realgear

    Tuesday, July 5th, 2011 21:49

    4

    Great article, really an interesting read, keep up the good work :)

    0
  • Rochester Oliveira

    Monday, July 4th, 2011 05:39

    3

    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

    0
    • Ranjith Kumar

      Friday, July 8th, 2011 04:57

      12

      Hi Rochester, Thats a new info for me … will update myself :)

      0
  • Helen

    Monday, July 4th, 2011 00:44

    2

    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.

    0
    • Richard

      Wednesday, July 6th, 2011 09:08

      7

      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.

      0
      • Richard

        Wednesday, July 6th, 2011 09:11

        8

        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.

        0
    • Mark wassmer

      Thursday, July 7th, 2011 00:48

      9

      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.

      0
    • Ranjith Kumar

      Friday, July 8th, 2011 05:00

      13

      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.

      0
      • Rohini

        Wednesday, July 13th, 2011 15:40

        15

        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

        0
  • Ian

    Sunday, July 3rd, 2011 14:32

    1

    Wonderful article, enjoyed reading this.

    0

Comments are closed.

54.204.163.26 - unknown - unknown - US