Reflection

Do you plan to continue in this job for the foreseeable future?

I went to a relatively unusual school.It was small (there were only sixty of us from the ages of six through eighteen) but had a large campus set in the shadow of a large mountain, next to a  forest. The forest was filled with leopards, jackals, bears (we found a dead one and proudly carried it back to school to dry out the carcass), lots of snakes and of course, a multitude of birds, trees and plants.

Is your current job related to aspirations or dreams that you had as a young person?

Among the many unusual things that CFL does is their practice of retaining strong ties with their alumni. It is perhaps unsurprising given the strong relationships that build up over the years between teachers and students and I assumed it to be the norm but was soon disabused of that notion.

Do you think anyone from any socio-economic background could be in your job today?

A couple weeks ago, as part of their General Studies program, a high school student (Class XI) asked whether he could interview me as part of their course. The module is called Livelihoods, and the questions took me aback and set me a-thinking. The questions demand unflinchingly facing some hard truths and are perhaps ones that I should ask myself on a more regular basis. I reproduce them below.

  1. What does your job involve? What is a typical day in your working life?
  2. What were the steps that you took before you ended up in your current job?
    1. How long have you worked in your current job?
    2. Have you changed many jobs? If so why?
    3. Do you plan to continue in this job for the foreseeable future?
    4. What was the process/training that you needed to get to where you are currently?
    5. Is your current job related to aspirations or dreams that you had as a young person?
    6. Do you think anyone from any socio-economic background could be in your job today?
  3. What are the main factors that have influenced you in your choice of work?
    1. Status
    2. Meaning/Fulfilment/Enjoyment
    3. Financial Security
  4. Was your choice of work associated with ideas of leading a particular lifestyle?
    1. Has this turned out in the manner you anticipated?
    2. Do you feel that you are economically stable?
    3. How has the recent economic recession affected your work?
  5. What is your relationship to your work with regard to how you define yourself?
  6. Is every moment of your job exciting and enjoyable? If not, how do you deal with the work that is
    1. monotonous, repetitive
    2. stressful
    3. other challenges
  7. How do you balance your work life and personal/social life?
  8. Do you think your job contributes to the community around you, or to the greater good?
  9. How do you describe your work environment?
    1. Is there a hierarchy in your workplace and where do you place yourself in this hierarchy?
    2. What is your relationship with your colleagues?
  10. Do you consider your job as part of a larger economic network? How do you see this network?
  11. What are the social and environmental impacts that you see of your job? Are social and environmental impacts important in making your livelihood choice?

They provided me with an opportunity for reflection; also prompted me to take a very hard look at what I currently do. I want to be able to look this seventeen-year old in the eye and tell him my work, that I spend upwards of sixty hours a week on, is meaningful and fulfilling, and that it contributes positively to the community around me.

It is, isn’t it?

Needles in the Haystack

One of the most fun parts of my job is that I get to meet people who are solving interesting, real, problems in new markets on a regular basis. I’ve had the pleasure of seeing excitement go to idea to design to product and have participated in a small way in a few.

However, the chronic problem that I have in runnning a small, boutique studio, is the inability to take on all of the potential work that comes my way. At this point in time, I turn away about nine out of ten of the enquiries. We are typically booked out months in advance, which is frustrating for me, as I often get excited and energised about an idea or the people behind it, but aren’t able to match timelines. This is partly because of the way in which we work (one client at a time, minimum two-week billing cycles) but mostly because we haven’t been able to scale up.

Since good digital designers are in such short supply, it is doubly frustrating to see potentially amazing products shelved or worse still, mangled into oblivion by poor design choices.

To partly address that gap, and having had the privilege of working with a few exemplary designers and developers, I’m creating this list to serve as a starting point for anyone seeking design assistance in India (and further).

Bardo

Sathish Kumar’s modest website belies the depth of experience and quality of work that he does. He was one of my first design teachers, and I am more grateful than I can say for his advice and patience over the years.

Path Seventeen Now uncommon

Pratul Kalia and Prateek Saxena are two of the most talented guys I know. It’s unfortunate that they almost always refuse to take up client work anymore, as they are working on their own products, but if you can convince them that what you are doing is worth their time…

I learned a lot and was extremely grateful for the attention to detail, and the strong aesthetic sense that @lut4rp brought in as I helped @Flipkart design their mobile applications.

Miranj

Prateek (@rungta to his friends) and Souvik Das Gupta (@souvikdg) run Miranj, a web design and development studio based in Delhi. I worked with them whilst designing RubyMonk for the amazing folks at C42 Engineering (who do things with a text editor which should be illegal). Prateek and Souvik are some of the most thoughtful *people* I know, and their work is exemplary. Go hire them.

3 Sided Coin Now uncommon

Tejas Bhatt runs 3 Sided Coin, and every single project he shows me nearly convinces me that I should hang up my boots and go home. They are constantly pushing the boundaries of what can be done within a browser, and their craft shows a deep understanding of the medium that is the internet. I have especially enjoyed the websites that they did for the Monkey Bar (also a favourite place to eat) and Like That Only, a restaurant, which as it’s name indicates, could only be in Bangalore.

Horde Design Now uncommon

I have tried hard to get @arpancj to move to Bangalore and work with me, but to no avail. It was a pleasure working with him on the Idea Device website — it was a relief to be able to paint broad brush strokes and to have someone else fill in the details. He is not just a designer, but an extremely competent web developer. See some more of his work here.

nth Loop

I letched at the beautiful pixels that nth Loop puts out. I was lucky enough to be able to catch @Srivatsan while I was visting Bombay, and was super-impressed by the work he showed me. I’m looking forward to seeing more of their work.

Wink

@arjunchetna and Pallavi Manchi run Wink, a cheeky design studio based here in Bangalore. I’ve worked with them on graphic design projects and can attest to their promptness and professionalism. Their repertoire spans graphic design as well as design for physical products. My endorsement of them has nothing to do with the many boxes of chocolate they have sent me.

Beard Design (AKA, the artist formerly known as PPT Salon)

Based just off the beach in Goa (the lucky bastards), Beard Design turns “home-made saunf vodka” into beautiful branding and design projects. They have helped me out on a number of projects and I appreciate their graphic design skills.

Ninan Joseph

Part of the first batch of students to graduate from the Srishti School of Art and Design, Ninan has been an old friend. He is an extremely skilled print and branding designer with a deep understanding of the intricacies of the medium. His website, while “Coming Soon” has his contact details.

Automatically downloading .magnet links using an iOS device, Dropbox, Applescript and Hazel

People who have had the misfortune of encountering me anytime in the last two months will know that I have been on a computer automation spree; to that end have automated the process of downloading, encoding, renaming and filing all manner of media files – both audio and video. However, there was one chink in this process – which I spent the morning fixing, and have, for your viewing pleasure dear reader, outlined below.

The Setup

I’ve got a Macbook Pro (lyssa) running 10.7, an iPhone and an iPad. I want to be able to trigger a torrent download from any of these devices and have Transmission on the Macbook Pro start the download, after which the file is kicked into a workflow for encoding/categorising which ensures that it is (theoretically) available on all my devices and in a format that allows for streaming, syncing etc.

The Problem

Some of the larger torrent sites have, however, moved to using only .magnet URLs, which poses problems for my hitherto perfect system for automating torrent downloads (tl;dr, Transmission watches a Dropbox folder which gets .torrent files dropped into it). The problem arises as Mobile Safari doesn’t understand how to handle .magnet links (and IMO, is unlikely to understand how to handle them anytime soon) — and even if it did, it would not allow me to start the download on my Macbook.

The Solution

The Macbook Pro has Hazel (which I cannot recommend strongly enough — GO BUY), Dropbox for syncing and Transmission as my torrent client. The iOS devices both have PlainText, which is a neat little program that lets you write plain text files and stores them in your Dropbox account. All these programs (except for Hazel) are free. I have a file saved in PlainText called, fittingly, “torrents.txt”.

Whenever I want to download something that catches my eye, or a file which someone has recommended, I now copy the .magnet link, and paste it into the “torrents.txt” file. Magnet URIs are simply plain text, and look similar to this:

magnet:?xt=urn:btih:bbb6db69965af769f664b6636e7914f8735141b3&dn=Ubuntu-12.04-desktop-i386.iso&tr=udp%3A%2F%2Ftracker.openbittorrent.com%3A80&tr=udp%3A%2F%2Ftracker.publicbt.com%3A80&tr=udp%3A%2F%2Ftracker.ccc.de%3A80

Hazel is set to monitor the folder which contains “torrents.txt”, with the following simple rule:

If the filename is “torrents.txt”, and if the contents of the file contain the word “magnet”, then run the following Applescript, which I have spent the morning putting together. There are probably better ways to write this, more efficient ones, but this seems to work just fine for me.

Hazel Rules for Downloading .magnet URIs


open for access theFile
set fileContents to read theFile using delimiter {linefeed}
close access theFile

tell application "TextEdit"
set theString to fileContents
end tell

tell application "Finder" to set the clipboard to theString as text

tell application "Transmission" to activate
tell application "System Events"
tell process "Transmission"
keystroke "u" using {command down}
keystroke "v" using {command down}
delay 1
keystroke return
end tell
end tell

set eof of theFile to 0

This bit of code takes the content of the text file, copies it to the clipboard, and adds it to Transmission’s “Open Internet Address” dialog box, and starts the download. It then erases the file, leaving it ready for me to add another magnet link.

…there you have it. It’s neither complex, nor terribly elegant, but it’s reliable and scratches this little itch that has been bothering me for a while. I hope to extend this to being able to handle multiple .magnet URIs (requires parsing the text file as a list and looping/repeating the process — too much for a Saturday morning!).

Building Accessible Websites with HTML5, CSS3 and Related Technologies

Techshare 2008 was perhaps the first conference in India on Electronic Accessibility for People with Disabilities. For me, personally, Techshare was an important landmark as it was the first time that I met and engaged with the Indian accessibility sector — before that, I was just a name on a mailing list!

My proposal for a workshop session at Techshare 2012 is on building accessible websites in 2012, with the technologies that we have and which are slowly becoming mainstream. It will be a continuation, for me, of the thoughts that I started to enunciate at Doctype HTML5, where I spoke on CSS3 and on Accessibility.

The abstract for my proposal follows:

Ever since Zeldman’s seminal Designing with Web Standards, the body of literature on designing accessible websites has steadily increased. Techniques for creating accessible, attractive and usable websites are plentiful and in an extremely encouraging trend, popular web frameworks and libraries now come with accessibility support built in.

HTML5 has been called “the most important technology of 2011”. Native support for audio, video and many presentation-layer techniques (such as transformations and transitions) along with strong support from browser vendors has led to strong developer interest and user-adoption.

This workshop intends to examine (among others), the new syntactical features, native audio, video and canvas elements in HTML5 and their implications for accessibility. Participants will be walked through a step-by-step guide for building an accessible HTML5 website.

Specific techniques for ensuring mobile accessibility and usability will be dwelt upon. The challenges and opportunities that touch interfaces offer will also be looked at in some detail, with practical techniques for accessibility being discussed and shared.

Disability Access and the Internet

I presented this paper in September 2008 for the National Conference on ICT for People with Disabilities, an event organised by the Computer Society of India. To do: add links and references.

Abstract

Anybody who has ever used the internet will agree that it is an immensely useful tool; it acts as a constantly updated storehouse of information, provides societal information (and is thus an agent of democracy), facilitates interaction between people and provides recreational possibilities.

For people with impairments, the internet is doubly useful; many impairments make simple tasks, social interaction and participation in civil society extremely difficult, expensive or both. Thus access to the internet for all, regardless of ability, is a prerequisite for a democratic society. However, poor coding practices and a lack of awareness on the part of web content authors on how to design for accessibility together render  large portions of the internet, in its current form, inaccessible to people with impairments.

This paper will examine ways in which people with various impairments – both physical and mental – engage with online content, and will demonstrate practical ways in which authors can make online content accessible to people with disabilities.

Impairments

While impairments span a broad spectrum, for the purpose of this paper, they fall into five broad categories: visual, hearing, speech, mobility and cognitive. Within these categories, there are broad ranges – the following section will examine them and their implications for authors in some detail.

Visual Impairments

Visual impairments may be subdivided into three distinct categories: users with mild vision impairments (someone who requires reading glasses, for instance), users with severe vision impairments or who are completely blind and those who are colour blind, in whatever form. The different methods by which online content may be made accessible to each of these groups takes into account their differing requirements.

Poor Vision and Scalable Fonts

Users with poor vision may find using alternate fonts or larger font sizes helpful (or essential). Most of the popular operating systems have built-in accessibility features that allow a user to magnify part of the screen – Microsoft Windows has the Windows Magnifier and Apple’s OS X has a built-in, operating system level feature called Zoom. Most web browsers also have the ability to increase the font size and the latest versions of Microsoft Internet Explorer, Mozilla Firefox and Opera have a feature called ‘full-page zoom’, which allows not merely text but images and videos as well to be magnified.

Completely Blind Users and Screen Readers

Users who are completely blind use special software programs called ‘screen readers’, which convert the on-screen text into spoken audio. Popular screen readers are Freedom Scientific’s JAWS, GW Micro’s Windows Eyes and Apple’s VoiceOver (built in to OS X). There are several ways in which website authors can enhance a screen reader user’s experience online – I shall go into some of them at length later in this paper.

Colour Blindness

Lastly, colour-blindness, or the inability to distinguish adequately between different groups of colours, is a problem which affects approximately 13 out of every 1000 people. The most common forms of colour blindness are protonopia, deuteranopia, and tritanopia. People with protonopia and deuteranopia are both unable to distinguish reds and greens; in addition, for protonopes, shades of red appear darker than other comparably bright colours while tritanopes have difficulty distinguishing between blue and green.

Problems arise while building websites, when an author uses colour as a means of attaching meaning. Most commonly, colour is used as a means of distinguishing between ordinary and hyperlinked text. Colour is also used to distinguish between state changes; links change colour when hovered over, and visited and unvisited links are often differentiated solely on the basis of colour. Furthermore, the use of colour as a means of reference (fix the errors highlighted in red) is not uncommon. Thus in cases where colour is used to convey information, care should be taken to ensure that the colour combinations used are such that they allow users with colour blindness to perceive the difference. Furthermore, merely using colour to indicate an item will lead to problems – using additional markup (like the strong or em tags), or explaining the situation using text is recommended.

Auditory

Deaf visitors to a website are often the easiest to cater to, from a website author’s perspective. Very little content on a normal website is rendered as sound – however, there are exceptions to this rule. YouTube, an online video sharing site is (as of June 2008) the third-most popular website in the world and allows visitors to upload and share videos with each other. Adding captioning, or a textual description to the audio component of videos on these and similar sites is a massive undertaking in terms of labour but there are few, if any, technical barriers to doing so. On rare occasions – though increasingly so, with web applications becoming widespread – sound is being used as a means of alerting users to changes on a website. Google’s webmail service has a built-in chat facility which alerts users of a new message via a chime. Deaf users, or users with their sound turned off, need to be catered to by an additional visual alert, which Google incorporates, by helpfully changing the text in the title bar to read “Rahul says…”.

Speech

Visitors with speech impairments will rarely, if ever, find it difficult to navigate through a website, as there are practically no websites which require a user to use speech as an input mechanism.

Mobility

While the wheelchair as a symbol of a person with disabilities is near universal, wheelchair users are of little significance in the discourse on online accessibility. Other mobility impairments, however, do impede a visitor’s ability to access websites – visitors who are unable to move one or more parts of their body (perhaps a visitor who is quadriplegic) – use a range of other devices: on-screen keyboards, sip-and-puff straws, head-sticks, trackballs and so forth to engage with computers. While these devices differ significantly in the way they are operated, the important thing to remember is that they are keyboard analogues, and thus if a webpage is keyboard accessible, users of these devices are likely to be able to navigate through it. Authors should ensure that all parts of a website are keyboard accessible, including forms and rich media components.

Cognitive

Cognitive disabilities, often termed learning disabilities, are the least understood of the various impairments, and are consequently the hardest to account for. Very broadly, they refer to difficulties that people have with comprehending or dealing with time, space, quantity, quality and cause (Kylen, 1985). The Web Content Accessibility Guidelines 1.0 sidesteps this decidedly non-trivial limitation with the anemic “Ensure that documents are clear and simple so they may be more easily understood”. The newer 2.0 Guidelines (technically, the Candidate Recommendation) are equally cryptic, specifying that if textual content require reading skills greater than the lower secondary education level, an alternate version be made available. There is some evidence to show that webpages that can be personalised to a user’s preferences, which do not contain more than ten to fifteen different elements on the same screen and which facilitate the users ability to go back to the starting point, are easily navigable by people with cognitive disabilities. In this context, links which open in different windows (the infamous “target: _blank” code) are confusing, as they disrupt the linear navigation style that users are used to, and ‘break’ the Back button. Care should be taken that if links open in new windows, this behaviour is clearly and unambiguously described.

With a clearer understanding of the various types of disabilities and their implications for web content authors, we can now move to specific technical steps that may be taken to facilitate online accessibility.

Screen readers and supplementary benefits

Earlier in this paper, we talked of screen readers, which are software programs which blind users use to navigate web pages. Screen readers parse the content of a web page in a linear manner (top to bottom, left to right), and ‘read out’ the contents. They may be customised, both in the type of voice and how fast they ‘speak’. It is not uncommon for an advanced screen reader user to have theirs’ set to read out content at 300 words-per-minute.

In the following section, we examine whether it is possible to provide a more efficient experience to screen reader users by taking into account the linear manner in which screen readers parse web pages, and altering existing coding practices accordingly. Designing for screen readers has numerous spillover benefits for users with cognitive impairments as well as for search engine optimisation – after all, Google, the world’s largest search engine, is blind.

Images and Alternate Text

WCAG 2.0 Guideline 1.1 reads: “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”

Images, videos and other “non-text” content cannot be parsed, in their original form, by non-visual user agents, or assistive technology devices, such as screen readers, text-to-speech software and text-to-Braille hardware devices. The HTML specifications require all images to have an ‘alternate text’ or an ALT attribute. Furthermore, the HTML specification also includes an optional ‘long description’, or LONGDESC attribute, which specifies a link to a a longer description of the same content. Reading the description of an image from the ALT tag is often the only way in which people with visual impairments can engage with an image. Thus, web content authors should ensure that if an image conveys meaning, that meaning should be conveyed in text form via either the ALT attribute or the LONGDESC attribute.

Figure 1, image with HTML markup showing correctly specified ALT 

<img src=”images/Geese.jpg” alt=”A flock of geese in flight over snow-capped mountains” />

Source Ordering

WCAG 2.0 Guideline 3.2 specifies that web pages should “appear and operate in predictable ways”.

All website users rely on preconceived notions of how web-pages are ordered or must quickly form mental maps of the ordering of information on a particular web-page in order to navigate through it effectively. Visually impaired users (or those using text-browsers or screen-readers) cannot rely on the visual arrangement of content to help them navigate a website and thus these pre-conceived notions are especially important.

Non-visual user agents parse web-pages in a linear manner, based on the order of the HTML source code; therefore, if navigation elements appear above informational content within the source code, the user will be exposed to the navigational elements before the primary, or informational content. By separating website content from presentational data – typically achieved by using Cascading Style Sheets or CSS to lay out webpages – one can affect the way a page is laid out visually while retaining a different order within the HTML source code. The advisability of this technique has sparked debate in some fora, with some arguing for informational content to be displayed first in the source code and for navigation elements to be displayed last, and others preferring the reverse.

A study of 23 text-browser and screen-reader users (Hudson et al.) states that non-visual users unequivocally expect that “[...] the main site navigation will be presented before the informational content of the page”. This result seems to support the conclusion that navigation elements should be specified prior to the informational content of a document; however, further research with a larger study size is urgently needed.

Structural Markup and Structural Labels

The use of structural markup is one of the best means of ensuring that an HTML document  is accessible. Structural markup refers to the appropriate use of HTML tags – for example, using a header tag to denote a heading, and a blockquote tag to denote a quotation. This allows user-agents to attach different meanings to different groups of content; visual user-agents (i.e, web browsers) often denote quotations marked up as a blockquote by indenting and italicizing the quotation, or rendering text marked up in a “strong” tag, bold. “[JAWS] …announces when long quotations, marked with the HTML ‘Blockquote’ tag are entered and exited”. Similarly, most screen readers have distinctive mechanisms to announce and navigate to different levels of headings, lists and data tables.

Structural labels identify different blocks of content using descriptive labels. While not required by the WCAG, these have been noted to enhance non-visual users’ experience. They may be ‘hidden’ from visual user agents by positioning them off-screen.

Skip Links

WCAG 2.0 Guideline 2.4 states that authors should “provide ways to help users with disabilities navigate, find content and determine where they are”, with 2.4.1 specifying that blocks of content which are repeated over multiple web pages be bypassable. Intra-page hyperlinks, often called ‘skip links’ are used to to bypass navigational elements, or to skip to different sections within an HTML document.

Many screen-reader and assistive technology devices have built-in mechanisms that allow for intra-page navigation based on the document structure; however, familiarity with these mechanisms is usually restricted to more experienced users. Web content authors would do well to ensure that they add these skip links to pages which have a large list of navigational items on them.

Tables

HTML originated within the scientific community and was originally intended for displaying and sharing scientific documents. In its original form it had few features to control the way a web page looked, and so as the Internet started becoming mainstream, early web designers used data tables to lay out pages. This has accessibility implications, as screen readers have to navigate complicated data tables and extract information from them. Furthermore, while screen readers parse content in a linear manner, the visual layout may be non-linear (a two-column layout, for example) leading to a disorienting experience for screen reader users.

Cascading Style Sheets today allow for non-linear page layouts without affecting the underlying source code, and thus web content authors should use CSS for presentation, and ensure that both visual users and screen reader users have optimal online experiences.

Conclusion

These are merely some of the methods web content authors can use to ensure that online content is made accessible to screen reader users. As mentioned earlier, these methods have numerous external benefits – web pages built with structural markup will automatically be ranked higher by search engines and there are significant and demonstrable usability enhancements that are obtained ‘for free’ as it were, when building for accessibility. Furthermore, designing for accessibility has significant benefits for mobile devices which are increasingly being used to access the internet, especially in developing economies.

The internet can be a powerful force for empowerment, more so for people with disabilities. Web content authors need to be aware of methods by which websites may be made accessible; not only is there a strong social case for doing so but the subsidiary benefits in terms of usability and search engine ranking ensure that there is a strong business case as well for doing so. Furthermore, by becoming a signatory to (and ratifying) the United Nations Convention on the Rights of Persons with Disabilities, India is likely to introduce legislation that will require all electronic communication to be accessible.

References

  • Stock, S. E., Davies, D. K. and Wehmeyer, M. K.  (2000).  Enhancing Independent Internet Access for Individuals with Mental Retardation through Use of a Specialized Web Browser: A Pilot Study, Education and Training in Mental Retardation and Developmental Disabilities, 2001, 107-113.
  • Harrysson, B.  (2003).  Web Design for Cognitive Accessibility. Division of Ergonomics and Aerosol Technology, EAT. Department of Design Sciences, Lund University, Sweden.
  • Kaye, H.S.  (2000).  Computer and Internet Use Among People with Disabilities. Disability Statistics Report. U.S. Department of Education, National Institute on Disability and Rehabilitation Research.
  • Sutherland, E.  (2008).  Counting mobile phones, SIM cards and customers. LINK Center, South Africa, for the International Telecommunications Union.

Acknowledging the Elephant in the Room – Moving Toward Media Accessibility

Note: This article was originally written in August 2008, for A3, a newsletter published by Barrier Break Technologies Ltd.

Accessibility evangelists have long touted the ease with which inaccessible online content may be made accessible – merely convert your nasty, table-based website to spanking clean HTML and CSS, sprinkle on a few skip links and and you were home scot free. The argument was a compelling one – multiple groups of people with impairments (screen reader, keyboard and assistive technology device users) benefit from these technical fixes, it makes for an elegant and easily-digested business case and more over, can be carried out relatively cheaply.

However, the accessibility of online media – videos, audio and interactive presentations which combine the two – has been carefully ignored and cannot be solved via technical means alone. No amount of tinkering with source code is going to make them accessible to people who cannot see, hear or who are deaf-blind. The solution is obvious – captioning is needed for those who cannot hear while text descriptions which can be both accessed on a Braille device and converted to speech are required for the deaf-blind and the blind respectively.

Three problems exist: firstly, adding captions and writing text descriptions involves a significant amount of effort; secondly, it is often unclear – even in countries where accessibility legislation exists – whose responsibility it is to provide these alternatives; and lastly, even in the rare case where there are content authors who are willing to add captioning to media, there are further technical issues which harken back to the Dark Ages of web design – multiple, incompatible (proposed) standards, fragmented or non-existent application support and little or no adoption by content creators.

What is urgently needed is to standardise on a file format for captions, encourage application vendors to adopt it and to ensure that tools that produce these files exist and are used. The World Wide Web Consortium’s proposed standard, Synchronized Multimedia Integration Language (SMIL), an XML-based language that allows authors to “describe multimedia presentations”, is one possibility. It uses an XML-like syntax and is thus easy to repurpose existing editors to generate these files.

Secondly, there is a need to educate content authors on best practices for captioning. Captioning is a far more comprehensive exercise than subtitling (which merely involves translating dialogue for hearing viewers who do not understand the original language). Captioning describes sound effects, moves to indicate who is speaking (thus requiring the ability to add layout or positioning information, which SMIL provides) and may be displayed on an assistive technology device (text-to-speech convertor, refreshable braille device, etc).

Media accessibility is often carefully swept under the carpet; however, there is an urgent need to start addressing it’s absence. Large portions of the internet otherwise risk becoming unavailable including incredibly popular websites like Youtube (currently ranked the third-most popular website in the world) – to visitors with impairments.

Most people with impairments would benefit greatly from the greater social participation that access to these resources would give them. Furthermore, the United Nations Convention on the Rights of Persons with Disabilities has been signed and ratified by a large number of countries, India included. It is time for accessibility evangelists to move away from the low-hanging fruit of web standards towards advocating rich media accessibility and for content creators to embrace media accessibility best practices.

Redesigning KLP’s Reports

When my old nemesis, Gautam John asked me to help out and make the school assessment reports that the Karnataka Learning Partnership generates a little bit more attractive, I jumped at the chance to volunteer some time and do some information design.

A bit about the Karnataka Learning Partnership, where all of this number crunching and report-making happens:

The Karnataka Learning Partnership is a is a public platform where all the stakeholders involved in primary education can participate and contribute to the cause of ensuring better schools and education for all children in Karnataka. This effort envisages a system where a network of non-profits working across multiple verticals – education, health, nutrition etc., will bring their data together to present a factual assessment and this will be used to galvanize community led ownership of the public schooling system to drive change.

A screenshot of the current reports, generated by KLP (click to see larger):

 

KLP Report (Current)

Some of the complications of this redesign were that while the reports were being generated into HTML/CSS  and Google Charts making the fancy graphs and pie-charts, the primary goal with the reports was to bring out printed copies to distribute to the various stakeholders on the ground, including (I assume), elected representatives, school authorities, teachers, parents and students.

However, translating an HTML/CSS layout into a print layout is an exercise which is at best filled with frustration for all parties involved and at worst can lead to data simply not being visible. Background images, some types of generated content and critical layout elements (such as floats) are simply omitted; page breaks are difficult to control and can lead to situations where the division of information makes understanding what’s going on very difficult.

Having said that, this is what I came up with (as before, click to see larger):

KLP Report (Redesigned)

Design Notes

I find that the 960 grid system a very useful aid to rapidly add order to chaos; it is especially suited for web applications or information design as it allows one to divide your page conveniently into groups of 12/16 columns (and therefore, 2, 3 and 4-column layouts) are natural outcomes. Cameron Moll was the first person (that I remember) advocating a 960 grid system, and the wonderfully named 960.gs has a whole horde of resources for you to use.

Colour

Since this report was primarily intended for print, I looked at using a very restrained colour palette — given that it will often be photocopied/printed out in black and white, it doesn’t make sense to use colour as the primary way to convey information. This is a core principle of online accessibility guidelines as well (see WCAG 2.0 1.4.8, Visual Presentation for more information).

Information Design

I have drawn on work that Dave McCandless (of Information is Beautiful fame) did for KLP, to represent student demographics. I’ve used icons from the lovely Noun Project (which I keep going back to); my only complaint is that they don’t have enough. I wasn’t able to find one for “School” or “Mother”. I have blatantly reused information design for comparing progress between two different districts (or with a larger super-group, in this case, the city of Bangalore) from the exquisite, Ben Fry-designed NBC Education Network Scorecard website.

Implementation Tips

There are only two parts of this redesign which might prove slightly complex to implement. The first is depicting the number of students using icons (I apologise for the hackneyed use of pink and blue for girls and boys).

Depicting Demographics

For each gender, create an empty <div> with a height equal to the icon’s height (in this case, 50px), and a width equal to the ratio of boys/girls. I have taken to depicting 10% of the population with one “person” icon (23px wide), with some padding after (12px) to ensure even spacing, for a total width of 35px for 10% of each demographic respectively. Adding this width into your HTML from the KLP CMS/database should be fairly simple — it might look something like this:

<div id="demographics">

<h2>Student Demographics</h2>

<span id="female" width="($FemalePercentage*3.5)px"></span>

<h3>$FemaleCount</h3>

<span id="male" width="($MalePercentage*3.5)px"></span>

<h3>$MaleCount</h3>

<h3>$MaleCount+$FemaleCount students</h3>

</div><!-- #demographics -->

In your CSS, you merely specify the icon to be a repeating background image and it should fill up the appropriate amount of space.
span#female {background: url('images/Icon-Female.png') repeat-x 0 0;}

Assessing Assessment

The next section is equally simple, though it might be done more easily with the <canvas> element. I haven’t used <canvas> much, so will leave that for someone better versed with the tech.

Pulling in the percentage data from your database, merely change the image name that you call. Have a bank of 100 images with variable amounts of fill, as shown below:

Assessment Fill Sprite

That’s it for now. I look forward to your feedback and to building on this.