Davy and Davy

Accessible Websites

I design and build accessible websites.  Accessibility often means making websites accessible to people with sight or mobility difficulties but it is much more than that.  Accessibility means reaching as wide an audience as possible in an effective manner no matter what web browser, user agent, screen size or individual settings that audience is using.

Access Keys

Access Keys are keyboard shortcuts to assist site navigation without a mouse.  The use of access keys, introduced into the HTML standard 4.0, is in much debate, particularly as over the years web browsers have introduced their own shortcuts that often conflict with access keys in use.  Nevertheless, this website uses access keys.  The use of these keys will depend on your browser.  For example users with Microsoft Internet Explorer for Windows need to click the access key while holding down the ALT key and follow this with the enter key.

There are no particular standards for which keys should be used although the UK Government has recommendations for its own websites with certain number keys.  I like the idea of underlining the appropriate access key letter on the visible page.  The access keys on this website are normally underlined and in addition some keys have a second, numerical, access key in line with UK Government recommendations.  The access keys are as follows:

S = Skip Navigation
0 or A = This Accessibility page.
1 or H = Home page.
B = About Davy and Davy.
9 or C = Our Contacts page.
W = What I do.
Y = What I can do for you.
P = Portfolio.
V = Privacy Policy.

Implementation of access keys is not consistent across browsers.  Some popular browsers implement access keys as follows:

Internet Explorer: Windows: Alt+AccessKey followed by Enter
Firefox Windows: Alt+AccessKey or Shift+Alt+AccessKey on Version 2
Firefox Mac: Ctl+AccessKey
Opera Windows: Shift+Esc followed by AccessKey
Safari Mac: Ctl+AccessKey

Text Sizes

A website should use "relative" not "fixed" sizes for text.  This means that a user can increase (or decrease) the size of the text using the browser's controls according to his own requirement, but unfortunately the methods and performance are not consistent across browsers.  This website uses relative sizes but for more reliable control we also have a facility within the website to change the text size.  Use the icons near the top right of the page to change the size of the main body text: decrease, increase or reset to "normal".  The setting should remain across all pages on the site until you leave it.

Some popular browsers implement text size changes as follows:

Internet Explorer 6 and 7: Open the 'View' menu, select the 'Text Size' option and choose your preferred text size.
In Internet Explorer 7 you can also use the zoom facility (Ctrl and the "+" key, or Ctl and the "-" key) to increase or decrease the size of the whole page, not just the text size.
Firefox: Open the 'View' menu and select the 'Text Size' option and choose your preferred text size.  Alternatively you can use Ctrl and the "+" key to increase the text size or Ctrl and the "-" key to decrease the text size.
Opera: Opera has a zoom feature similar to Internet Explorer 7.  Use the "+" or "-" keys to increase or decrease the page size or Ctrl and the "+" key, or Ctl and the "-" key to increase or decrease the page size in large increments.  (Actually Opera had "zoom" before Internet Explorer.)

The "zoom" features are good if you want to retain the overall look of the page but a zoom in can result in a page that is too wide for the browser width and thus necessitates horizontal scrolling.  Text size changes will normally just change the text and not the image sizes or page widths and so will change the look of the page.

Browser sizes

Screen sizes, and therefore the maximum size of the browser window, vary, and the actual size of the browser window within that screen size is down to the user's preference.

A website should try to accommodate these variations as far as is practically possible.  As a user of the World Wide Web for many years, my preference is that I should not have to scroll my browser left-right to see the width of the page. This is not too difficult to achieve.  Other people like a page to fit into the browser window without any scrolling.  This is particularly true of many graphics designers who are used to designing for the printed, static page, and also true of many clients who want the content to fit into their browser window!  Personally, and depending on the nature of the page content, I don't think that vertical scrolling is a big issue, but we can go some way to helping out in this regard.

Fluid layouts

To make the most of the user's available screen, or more accurately the browser's "view port", we should first look at some popular screen resolutions.  This is the screen width and height measured in pixels or px (picture elements) which are the basic dots that make up the picture on the screen.

Probably the most popular screen resolutions are currently 1280px wide and 1024px high, 1024x768 and 1152x864.  Browser resolutions will, of course, be less than these to fit on the screen and, in any case, many people will have their browsers set smaller.  At the lower end of the scale, the smallest practical screen resolution still in use is 800x600 and these days it's a fair bet that most people who have such screens will have their browser set to maximum size.  So, width wise and using my "no horizontal scroll" preference, it's not unreasonable to fix a web page width at, say, 750px to fit comfortably into an 800px wide screen but yet not look out of place on a 1280px wide screen, probably with a browser width set smaller than that.

However, there are an increasing number of screens in wider resolutions in "wide screen" formats and a 750px wide page could arguably look a bit lost in these larger screens if the browser width is set wide.  It's perhaps a shame not to make more use of the available width and thus bring up more page content into the visible area and reduce the amount of any vertical scroll.  This is where dynamic page sizing and "fluid layouts" can come in.

With fluid designs we can change the width of the page according to the browser size in use.  This means the page will look different to different people.  This can upset some "design" purists but since I've already said that the user should be able to change the text size to suit his preference, and that would usually change the look of the page, why not accept that a web page is not a piece of static printed paper and allow some element of variation.

By way of illustration this website uses fluid design.  It is generally accepted that reading text across a very wide page is difficult, hence newspapers having columns, and since this site is predominantly text I've restricted the maximum width of the page to 940px even if the browser is wider.  In the left hand snapshot you'll see how the Home page looks in a 1280x1024 screen with the browser set at maximum.  You'll see that the same format would fit nicely into the other two popular screen sizes as indicated by the red overlays.

The page is a simple 2 column affair with the right hand column having a fixed width image, or Flash movie, and the text dominated left hand column decreasing as the browser width decreases, and thus the page width decreases with it.  The header comprises two overlapping elements which allows it to decrease in width with the page.  A similar technique is used with the main images at the top of the left hand column.  The navigation bars will also wrap as the width comes in.  The right hand snapshot shows, as an overlay, the same home page but with the browser reduced in size to 800x600.  The page has got narrower and is now taller, squeezed off the bottom of the "browser window".  The minimum width on this implementation is 710px below which the page will scroll sideways.

Links to external sites

It is common for links on many website to cause the new page to open in a new window while the content of the current window is kept intact.  The WAI's accessibility guidelines recognise that this can cause confusion for some people and so recommend that any such links are accompanied by warnings.  The "Strict" flavour of HTML goes one step further and does not allow these actions, having marked the relevant commands as "depreciated", although all browsers will obey the command even when operating in Strict mode.

However, there can be good commercial as well as practical reasons for wanting another instance of the browser to open when the user activates certain links, and in such circumstances I usually give the appropriate warning and use techniques where the default is to open in a new window but where the user is able to turn off this feature, in line with WAI and in the spirit of HTML Strict - perhaps?  The symbol, when displayed next to a link, shows that the link opens the page in a new window and on Javascript enabled browsers this function can be disabled by clicking the icon which appears near the top right of every page.

Standards Compliance

Needless to say, to maximise the accessibility of this website to as many users and user agents (web browsers) as possible we strive to comply to standards set down by the World Wide Web Consortium.  These are XHTML 1.0 Strict, Cascading Style Sheets and the Web Accessibility Initiative Web Content Accessibility Guidelines.