Making your game more accessible

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>

Wish there was more?

I'm considering writing an ebook - click here.

.

Luke is the primary editor of Building Browsergames, and has written a large portion of the articles that you read here. He generally has no idea what to say when asked to write about himself in the third person.

Tags: , ,

Thursday, February 5th, 2009 accessibility, code
blog comments powered by Disqus

About

Building Browsergames is a blog about browsergames(also known as PBBG's). It's geared towards the beginner to intermediate developer who has an interest in building their own browsergame.

Sponsors

Got Something to Say?

Send an e-mail to luke@buildingbrowsergames.com, or get in touch through Twitter at http://twitter.com/bbrowsergames