Building Browsergames » accessibility http://buildingbrowsergames.com Ever wanted to build a browsergame? Mon, 29 Mar 2010 14:00:39 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 Making your game more accessible http://buildingbrowsergames.com/2009/02/05/making-your-game-more-accessible/ http://buildingbrowsergames.com/2009/02/05/making-your-game-more-accessible/#comments Thu, 05 Feb 2009 14:00:27 +0000 Luke http://buildingbrowsergames.com/?p=719 Recently, we talked about keeping your game accessible for those with disabilities. A few of the changes that we mentioned making to your game are fairly easy changes to make, but a few require some custom Javascript to implement. Today, we’ll be working through two simple tweaks you can make to improve the accessibility of your pages: changing the text size, and changing the color scheme.

We will be using the jQuery javascript library to accomplish both of these effects, along with some custom CSS.

First off, let’s say that the stylesheet for your page looks like this:

1

body {font: 75% verdana, sans-serif;color:black;background:white}

If you want to add some alternate color schemes to your page, you could add them in your CSS like this:

2
3
4
5

body.default {color:black;background:white}
body.red {color:red;background:green}
body.blue {color:blue;background:white}
body.green {color:green;background:black}

By setting up our CSS in this way, it is easy for your designer to make color scheme changes to the entire page whenever we modify the body’s class, simple by writing their CSS based on which class the body has:

body.red p.warning {/* this would only be applied under the 'red on green' color scheme*/}
body.green p.warning {/* this would only be applied under the 'green on black' color scheme*/}
p.warning {/* this would be applied regardless of color scheme */}

We will be using jQuery to dynamically add these classes to our document as necessary. We’ll start off with a basic HTML document – I’ve inlined the CSS so that you can see it all in one place; in a production environment you should make sure to keep your stylesheets separate.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>jQuery accessibility demo</title>
	<style>
		body {font: 75% verdana, sans-serif;color:black;background:white}
	    body.default {color:black;background:white}
		body.red {color:red;background:green}
		body.blue {color:blue;background:white}
		body.green {color:green;background:black}
	</style>
</head>
 
<body>
	<p>This is our page, with some filler content.</p>
	<p>
		<select id='body_colors'>
			<option value='default' selected='selected'>default (black on white)</option>
			<option value='red'>red (red on green)</option>
			<option value='blue'>blue (blue on white)</option>
			<option value='green'>green (green on black)</option>
		</select>
	</p>
</body>
</html>

With our document set up, we’ll add the Javascript code to toggle our body’s class for us:

27
28
29
30
31
32
33
34

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    $('#body_colors').change(function() {
        $('body').attr('class',$(this).val());
    })
})
</script>

If you’re new to jQuery, that will probably look like voodoo to you – but it’s actually a fairly simple piece of code. We’re selecting the element on the page with the ID #body_colors(just like you would with CSS – in this case it’s a <select> element), and then attaching an event handler to its onchange function – every time that the value of the <select> changes, our event handler fires. All it does is find our <body> tag, and then set it’s class to the class that the user just selected.

If you open up our tester page in your browser, you should be able to see that when you select something from the dropdown, the style of the page changes – which is exactly what we were going for. You can also see it in action at http://buildingbrowsergames.com/demos/accessibility-1.html.

Modifying the text size is a bit of an interesting change, as it will require you (possibly) to modify the way that you write your CSS. When we first defined the styles for our body, you’ll notice that we added the ‘font’ declaration, with the size of ‘75%’. What this has effectively done is made it so that the baseline size for all the text on the page is 12 pixels. By putting this declaration onto our body element, we can now use ems to size our text; if you wanted to make some text that was 12 pixels, you would give it a font-size of 1em – for 24 pixels, you would use 2em, and so on.

Now, at first blush you may be saying “this is kind of cool, but…why would I ever use it?”. The reason for this is simple: it makes writing our javascript much easier. Let’s add some stuff to our HTML page:

27
28
29
30
31
32
33
34
35

	<p>
	    Change font size:
	    <select id='text_size'>
	        <option value='50%'>smaller (8px)</option>
	        <option value='75%' selected='selected'>default (12px)</option>
	        <option value='100%'>big (16px)</option>
	        <option value='125%'>bigger (20px)</option>
	    </select>
	</p>

With our font-size dropdown added, we will be writing a little bit more javascript:

42
43
44

    $('#text_size').change(function() {
        $('body').css('font-size',$(this).val());
    })

This piece of jQuery is even simpler than the earlier one – all we do is modify the ‘font-size’ attribute on our <body> tag with the value of the selected option.

If you take a look at your page in the browser now, you should notice that selecting different options in the dropdown also alters the text-size on your page. As long as you use em’s for all of your font-sizes in your document, that means that altering the text-size will transform the text across your entire site – making it much easier to read for users who have a hard time reading small text. If you’d like to see the entire page in action, you can take a look at http://buildingbrowsergames.com/demos/accessibility-2.html.

As you can see, making it so that users can alter the color scheme or text size of your page isn’t particularly difficult – but for users who need to be able to make those changes, it will make the difference between playing your game, and playing a different game that caters to their needs better. Here’s the entire source for our demo page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>jQuery accessibility demo</title>
	<style>
		body {font: 75% verdana, sans-serif;color:black;background:white}
	    body.default {color:black;background:white}
		body.red {color:red;background:green}
		body.blue {color:blue;background:white}
		body.green {color:green;background:black}
	</style>
</head>
 
<body>
	<p>This is our page, with some filler content.</p>
	<p>
		<select id='body_colors'>
			<option value='default' selected='selected'>default (black on white)</option>
			<option value='red'>red (red on green)</option>
			<option value='blue'>blue (blue on white)</option>
			<option value='green'>green (green on black)</option>
		</select>
	</p>
	<p>
	    Change font size:
	    <select id='text_size'>
	        <option value='50%'>smaller (8px)</option>
	        <option value='75%' selected='selected'>default (12px)</option>
	        <option value='100%'>big (16px)</option>
	        <option value='125%'>bigger (20px)</option>
	    </select>
	</p>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $('#body_colors').change(function() {
            $('body').attr('class','');
            $('body').addClass($(this).val());
        })
        $('#text_size').change(function() {
            $('body').css('font-size',$(this).val());
        })
    })
    </script>
</body>
</html>
]]> http://buildingbrowsergames.com/2009/02/05/making-your-game-more-accessible/feed/ 2 Keep your game accessible http://buildingbrowsergames.com/2009/02/02/keep-your-game-accessible/ http://buildingbrowsergames.com/2009/02/02/keep-your-game-accessible/#comments Mon, 02 Feb 2009 14:00:53 +0000 Luke http://buildingbrowsergames.com/?p=717 A Building Browsergames reader by the name of BlindAngel recently got in touch with me to talk a little bit about accessibility in browsergames – namely, the fact that it’s something a lot of browsergame developers tend not to think about when they are developing their games.

In the interest of transparency, I should clarify something here; BlindAngel is blind. So she, more than anyone else I know, is well qualified to talk about accessibility in browsergames; it’s a topic that applies directly to her.

One of the first groups she mentioned to me with accessibility concerns was people with vision loss; for people with less-than-perfect vision can have problems with text sizes on websites. Take a look at any website you run – how big is the text? Would you be able to read it from a meter away?

Another group that can have problems with games is those that are color blind, or have trouble distinguishing colors – sometimes simple combinations like black text on a white background can look blurry, and be difficult for them to read.

The biggest accessibility challenge for people who are blind is that, in BlindAngel’s words, “people forget that we have to use an automated program to access anything on the computer”. She mentions that captcha’s are a big problem for screen readers(and you shouldn’t be using them anyway, because they don’t work). In her case, she has actually ended up not playing games that she was interested in that used captchas.

Another problem that blind people face when playing games is with images in general; BlindAngel gives the example of a game she plays with cyphers in it:

Some games and site rely on the person being able to see to be able to play sections of their game, for example In one game I play there are missions to do and they include cyphers, this is where a word is comprised of individual letters that are 1 letter per graphic and then scrambled. As I am unable to see, this is completely skipped by my screenreader…

Another issue she has is that alt tags on images are not always used correctly; the description needs to be “clear and concise”:

…there is nothing worse than a description that tells you it’s a person – are they doing something? is it male or female, adult or child, dressed or not…

Javascript is also not very well-suited to screen readers; BlindAngel mentioned that she has encountered dropdown menus that contain links – and as soon as she scrolls down the list so that her screen reader reads them, they redirect her to the page that they are linked to, instead of allowing her to read them.

Using accesskeys for some of the links on your page is a simple but effective accessibility tweak; for someone relying on a screen reader, they are not going to be able to instantly look at all the links on the page – instead having to read through them one by one. By consistently making it so that the ‘h’ key goes to home, and the ‘p’ key goes to the user’s profile, they no longer have to read through all the links on the page when all they want to do is go to their profile page.

These are some of the bigger accessibility problems encountered by people with disabilities who want to play browsergames; but as developers, we can fix them. It’s easy enough to add more descriptive alt text to your images, and basic accesskeys to the important links in your game. You want players for your game, right? There are thousands of disabled people out there; and making even just a few of these accessibility changes will propel your game to the forefront of their ‘to-play’ lists.

]]> http://buildingbrowsergames.com/2009/02/02/keep-your-game-accessible/feed/ 7