Silverlight Accessibility

Saqib Shaikh, Software Developer
Microsoft

Speaker: Robin Christopherson

Thank you for being prompt. Next speaker of the afternoon is Saqib Shaikh, a software developer at Microsoft. Recently joined the search engine team and he is also very passionate about universal design, so please welcome him who will talk about the accessibility of Silverlight. (applause}.

Speaker: Saqib Shaikh

I work at Microsoft but I have a joke. People talk about the 20 per cent time in their job; I talk about the 120 per cent of the time because after I get home accessibility is my passion. I do a lot of accessibility work, largely for fun but also I have a vested interest in it, being blind since a child. It is one of those things. I have always wanted to use the same application to perform the same tasks that all my colleagues and friends do so I really want the accessible experiences like everyone else.

Today I will talk about Silverlight and rich Internet applications and I will talk for no more than 15 minutes then have some time for questions, if you can think of any.

Saying the "A" word

So, I'm sure most of you are aware of rich Internet applications. These are instead of web pages online, more and more we are seeing whole applications online and the accessibility of these has to be done through different ways, we heard, with ARIA, HTML 5. And before working in my current position, I worked as a consultant again at Microsoft working with lots of different types of customers ranging from large banks, insurance companies and often I would bring up the topics of accessibility and you would be sitting there with a room of designers, and developers, being very creative thinking, brainstorming, thinking of new ideas, new ways of solving the customers problems and then suddenly say "Accessibility! You would mention the accessibility word and suddenly the life would go out of the party!

Plaintext 1.0

So, to so many people accessibility is this thing which is to be feared almost to be, the minute you mention accessibility it is like "No no no we can't do that, we do nice stuff, we do pretty usable applications, we don't do accessibility, that is plain text". And you laugh but in the big world out there people still associate accessibility with a "Wacko 1.0 plaintext" with the word accessibility that is why I try to use universal design, the idea of creating software that anyone and everyone should be able to use, people with permanent or temporary disabilities or no disabilities just preference.

Separate versions from scratch

So, these customers just to relate a few anecdotes before I get on to Silverlight. The type of thing I talk about as I went to work with a large customer trying to advise them about approach they should take with accessibility and I'm sure many of you will be familiar with it. They were talking about actually having 2 separate versions of their site. Strategy going forward to use Silverlight to have a rich Internet application, which everyone could use with all bells and whistles and they were bidding for a large contract which required accessibility and suddenly they were like "What shall we do?" I think we shall make 2 version. This is 2008, they were still talking about making 2 versions of their sites from scratch with 2 sets of developers.

I think we all know that accessibility, you can make accessible applications which are rich and pretty and can be used by anyone and to reiterate these points, all these things you can have accessible applications in Ajax and Flash and Silverlight at the end of the day there is technology and at of the day all we want is good solutions. Again going back to my case of being blind that is one disability but when I perform a task for fun or work all I care about is performing that task. I don't mind what technology it is in.

What is Silverlight

But having said that, I am here to talk about Silverlight, we have heard about ARIA earlier today. So, what is Silverlight? Working within Microsoft and with lots of Microsoft Partners you sometimes forget... But the other day someone was talking about Silverlight accessibility and then they said "What is Silverlight?", as a bit of a whoops moment. It is a technology for creating these rich web sites, it is a plug in similar to Flash and that is the best way to think of it, it is another way for a developer to be able to create a websites as opposed to using HTML and JavaScript and it integrates well as a part of the whole Internet. It is cross platform, it works on Mac, Windows, Linux, thanks to Novell, who helped make it work on Linux, which is an open standard; it works in Firefox, IE and Safari. And it is particularly comfortable for developers who have come from a desktop background or a server developer background. They can use the languages they are familiar with.

So one of the things about accessibility on traditional websites going back to WCAG 1 days, there are a common set of things we think about, things like getting the right colour contrasts for people with low vision, or with cognitive disabilities, keyboard access for physical disabilities and screen reader users, accessible video and semantics, again using your lists and headings instead of just making things look correct. And really those are the same kind of things that I am going to talk about in relation to Silverlight.

High contrast

So, I am going to start off by talking about high contrast. Again, as I said just now, the challenges, the accessibility challenges are very much the same, and I will go through each of those and see how Silvelight approaches those. With high contrast, there is a feature in Silverlight which allows you to detect whether a user is running in high contrast mode or not. And it allows, as with desk top windows application you are able to see which colours the user has chosen on the high contrast scheme. Some people prefer a very high contrast, light colours on dark, others dark on light. And related to high contrast and partially sighted users for example, is this idea of zooming. All browsers have a zoom functionality and Silverlight will zoom the text for you free, but there is a nice feature where as developer again using very simple APIs that the developer will be familiar with, you are able to subscribe for notification and when the zoom changes you can scale your whole user interface because it is using scalable graphics. I am going show you a quick demo of how that works in case the explanation is not so clear. I am opening up a website here. I wish I could spell today...Whoops...

Problem with demos. So it is really simple application. But if I open up another window as comparison, you will see the notepad, common programme everyone uses on Windows is the normal colour but if I turn on high contrast here, give it a second, it should change to the lighter and darker high contrast colour scheme. Except it hasn't, and this is what is wrong with doing live demos. I should give it a second otherwise I shall move on: This is my application and by reloading it it has taken on the system colours that a person using a Windows computer or a mac would define for them. So if they turn it off and refresh the screen it should go back to the old colour. So that illustrates the point of how to do high contrast.

Accessible video

I am going to move quickly on, I am aware of time, to the next point, accessible video. Three points talking about accessible video. Audio description for hose for example who are blind or as I prefer to say, watching TV in a noise free environment. It could be someone doing the house work, having TV on in the background. You will have a narrator describing what's going on and often fade the audio so that, the two audio streams don't get mixed. We heard from Lisa earlier about captioning and signing. There is another demo to show you. Hopefully this one will work better. Just loading NVDA screen reader we have heard about today. (Electronic voice of screenreader).

Accessible media player is the name of the application, it is open source and available for free. I am just typing error here. (Electronic voice - accessible media player: "accessible media player, lower volume, turn down volume." It is reading controls as we tab through and the accessible help descriptions which have been labelled. (Electronic voice). I will press play video it is a Microsoft advert, unfortunately

(On video : " Windows I am a PC. I am a PC. Woman in casual clothing stands in front of white board (audio description) windows.com overlaid. Bill Gates - audio description on--- Now you are seeing closed captioning. NEW SPEAKER: I wear glasses. NEW SPEAKER: I wear jeans. I design jeans.

Signing and captioning

I hope you can see the signing and captioning. Being blind I can't verify that. This an accessible media player which one of my colleagues in the US created and it is using text over lays, the text is at the HTML so indexible and using a display, rather than being part of the video. So a Braille user can use it. The signing is also overlaid. The reason why I want to show the accessible video sample is because a lot of sites are using Silverlight 4 and as a user I care it should be accessible. Tesco announced last week they are starting a net flick style on line streaming of movies sometime in the future so I hope they have audio description and they have signing, etcetera, available.

Semantics

I am going to go back to the slides now. Talk a little about the final point, which is semantics. In terms of HTML I am sure all of you have heard in the context of ARIA but also more generally, the importance of having semantics for screen readers, for speech recognition also and, again, this is the same concept that you have to think about, when designing a Silverlight application. For example, all the controls in Silverlight are what they cool look less, it is a Microsoft term, it just means the presentation is separated from the control itself. I have seen really good examples of this where, a speedometer for a car as a control on a website implemented using a progress bar because the semantics of a progress bar are similar to that of a speedometer, likewise check box and thumbs up and down symbol and radio buttons a set of three radio buttons. That's just to illustrate having semantics in the application giving user interface meaning while it can look however you want. Using UI automation the Microsoft API from a developer's point of view is just another API that they should be familiar with. If you want to create a custom control that's not like anything provided and nothing you can restyle then it is possible to do that using these APIs. I won't get into much detail but if you have questions I can talk about that. So I am just going to show you one last demo. Waiting for the video to come up.

The gods are not shining on me today. Did it crash? If I turn screen reader off so it would not be talking in the meantime. I am going to go ahead without core NVDA. This is my demo of a map of the world which I developed as the list box. This is what goes back in semantics that I was talking about. That visually what you see on the screen is a map of the world, fully keyboard accessible and the way I did it and the reason it works , I took a list box with list box items and restyled them to look like a map of the world. Silverlight doesn't have to take up the whole screen. I think it is good practice to to continue using good old HTML and CSS and just using Silverlight for separate controls. if a designer doesn't want a combobox with all the countries of the world you can still create a visually compelling example like this, a map of the world, you can hover with the mouse and select countries like that or use the keyboard. A screen reader like NVDA would be reading each country as you cursor through. So that is all semantics.

Accessibility doesn't have to be ugly

I really wanted to leave time for questions. I am going to close by saying, remember my key take aways from this would be that user interface, preaching to the choir but user interfaces don't have to look ugly. When we talk about what technology to use to provide accessible video, bridge Internet applications are we just talking about a combobox because that's all screenreaders or speech recognition can work with, the take away is, no, there are technologies out there to produce accessible solutions that work for everyone. (Applause)

New speaker: Just time for one question. Any other questions.

Questions from the floor

I am interested in the - I really like the multi-layer of the videos. Just how well accepted is that with people who would be end users of Silverlight? Is it quite a common application that people are aware of, or is it still something new that as organisations we need to market out to people? Sorry, multi-layer of. Having subtitles, BSL.

Speaker: Saqib Shaikh

The example out there, it is open source, is really to get - because NBC, Olympics and Silverlight a lot of sports channels in the US are using Silverlight for streaming. So it is getting awareness out there that you can do things like subtitling signing, audio descriptions, and there are examples for customers to use.