Why not print out these pages for easier reading ?
Explained - Inclusive Web Design
Everyone’s talking about Accessiblity in web page design, and the notion of inclusivity, which has resonance from a political point of view, but also makes good web design sense (mostly). But what are the technical measures a web designer must take to achieve this, and how can they be measured?
Download Speed
If most of your audience (web page visitors) do not have the benefit of broadband it will be frustrating to them if the web pages take too long to display. Studies say people leave these pages quickly. Reducing the size (file size) of graphics and avoiding other content that is ‘demanding’ on the connection speed or ‘bandwidth’ will help. It is also an option to provide a ‘bypass’ of the demanding content such as ‘flash’, proving that the same information can be communicated another way.
While broadband is becoming affordable and available, by far the majority of the world's users are limited to low-bandwidth connections because of geographical isolation, underdeveloped communications infrastructure, or economic limitation. Even those living in areas with access to high-bandwidth infrastructure (like broadband) may still be limited to low-bandwidth applications because of the technology they have chosen to use (such as mobile phones for web browsing, Personal Digital Assistants PDA’s, etc.) or are forced to by economic circumstances (e.g. older systems and less capable devices.)
Font Sizes, Colours and Style Sheets
Changing font size or foreground / background colour is best provided by the use of a ‘style sheet.’ A visitor can then change style according to their own particular needs and preferences and this is the preferred method outlined in the W3C Accessibility Guidelines. Technically, there are different ways technically to achieve a change of size and or colour, either with a java script page (non dynamic) or server page (dynamic), the later is usually a more expensive but better solution.
Providing an ‘engineered way’ for a visitor to modify the way a web page looks shows a commitment to the ‘cause’, typically a ‘control’ available to the user will enable a change of font size and / or colour, or it will enable an advocate to make the adjustment. It is also acceptable to direct the visitor to a web browser’s (like Microsoft Explorer) ‘inbuilt’ way of changing styles, although this may highlight a web page designer’s lack of real attention to the issue. In this same way, a user can carry around there own particular style sheet, and load it via settings in the Browser, although this takes a little technical know how, but would ensure the user always encountered the same settings as they require.
Changing the font size / colour has implications for the way the page will transpose and the way information is conveyed, consideration of this issue is needed at the beginning of the design process. Colour on its own cannot be used as a way of providing or highlighting information, because not everyone is able to recognise ‘colour.’ Contrasting colours for page background against text make for easier reading generally. Dark text on a light background (normal contrast) is usually the best combination for non-visually impaired, but allow users to choose the best combination for their needs and current environment. ‘High contrast’ is usually a light text on a dark background. 8% to 10% of the male population in many countries exhibit some form of colour blindness.
Another advantage to the style sheet approach is that if the web page content is ‘intimately linked’ with one particular display or internet access device, the content is likely to be inaccessible or unusable on other devices. The ideal situation is one in which the content (structure and semantics) is separated from the presentation of the information (the style sheet approach). It is then easier to create alternate layouts for different web devices, alternate views that can be chosen by the client, or let the differing web devices render the content in the way that best suits their capabilities.
A master style sheet (a files on your server containing style markup relating to all pages on a site) allows quick and comprehensive changes to the overall look and feel of a web site. A style sheet file can contain display instructions for numerous display technologies. This means that instead of having to reedit every content page of a site to meet the needs of a new technology, only the master style sheet files need to be changed. Style sheets also allow different presentation to be made available for different devices or end purposes such as screen and printer or report and lecture presentation.
Use of xhtml - use of the latest language specifications (in conjunction with the appropriate use of style sheets) will make automatic conversions of content for alternative display devices as easy as it can be.
Using style sheets avoids the ‘deprecated’ features of html - many of the earlier markup features of html have been dropped in later releases in favour of controlling these aspects of the presentation though styles or style sheets. Applying valid html assists the re purpose of content for future formats and devices.
Clear content and Navigation
Significant numbers of people do not share the same level of literacy as the professionals who design the Web sites or / and write the content. Users with low literacy levels and those people for whom the language of your Web site is not their first are assisted with Clear Navigation and adopting a clear, consistent and logical navigation style across your entire Web site assists all users to understand your site and accelerates their familiarity. Provision of navigation bars, site-maps and linked lists of contents will increase the chances that your visitors will find what they are looking for. Users often avoid a web site after an initial visit because they encounter difficulties navigating complex collections of information or cannot find again the item they wanted. Clear and consistent navigation will help reduce this problem. Many studies have shown that most people do not ‘read’ web pages, but ‘scan’ them. With this in mind, the use of simple clear content and language rather than marketing or technical jargon will increase comprehension and satisfaction.
Non-text elements such as illustrations and graphs should be relevant to the text, placed nearby the relevant text, and described or introduced within the text. Separating structure from presentation with style sheets provides a clear and consistent meaning and structure and will assist your visitors in comprehending your site and locating the information of interest or importance to them.
Aids for blind and low vision users
Screen Readers
A standard computer (laptop or desktop) can be adapted for a blind or low vision user by adding a screen reader, which enables the user to hear a ‘voice’ (speech output, through speakers or head phones) describing the options of the operating system (such as Windows) and the programs it supports, such as word processors, email and web browsers. Users can then ‘navigate’ around these systems, in an alternative way to a normally sighted user, through the usual menus, dialogue boxes, fields and so on. The screen reader also reads back the text contained within the email or word processor application. Voice recognition is a method of ‘input’ rather than ‘output’, where a user can talk (through a microphone) to control and input data as a more convenient method.
Some users can use a Braille display, which translates information from the screen to a tactile display, sitting underneath the keyboard.
Typically a screen reader will consist of two components:
- A speech synthesizer which ‘speaks’ the text sent to it from the screen-reading program installed on the computer. The speech synthesizer is usually a software program that works with a sound card.
- A screen-reading program sends text displayed on the screen to be spoken by a speech synthesizer. Common features include the ability to speak the full screen, part of the screen, a line, a word, individual letters or the phonetic equivalent of a letter, capital letters, punctuation, symbols and system messages.
Screen readers are well established with experienced blind and low vision computer users, and the software is installed on a computer and permanently based on that computer on which it is installed and licensed. These users are therefore very familiar with the tools that allow them access, typically for a totally blind person they are essential, rather than just assisting.
There are various types of screen readers available and some are more popular in different environments. Some more sophisticated products are designed to work best in an education or employment situation as they can be configured to work with a variety of different programs. Others are more for home use as they may offer restricted features in comparison with more expensive screen readers.
Some of the screen readers on the market include ‘JAWS’, ‘Hal’ and ‘Window Eyes’ Price range can vary from £100 - £1000 depending on the product. Most start at about £500 - £600.
The RNIB information sheet goes into more detail if required.
Text-to-speech programs
A text-to-speech program differs from a screen reader in flexibility and price, it is cheaper and restricted in what it can read back from the screen. It may not provide complete access to a PC and applications in the same way. This is because it was not originally designed for people with visual impairment, but for users with dyslexia or learning difficulties. Text-to-speech programs will also vary between each other in what features they can offer. Some are designed purely for use on the web and read back web pages, or might just read the contents of a word processor file.
Software such as Browsealoud offers ‘talking’ web pages (speech enabled web sites) and must be first downloaded in a ‘client form’ and then setup on a computer. It works in conjunction with technology operating on the web page itself, which has been arranged by the web page designer. Such ‘enabled’ web pages have a ‘special arrangement’ with ‘Browsealoud’, and a subscription is paid to keep the arrangement. The use of such client / server software will neither be as widespread or flexible as a screen reader, but may be suitable for mild visual impairment, dyslexia or low literacy skills or where English is not a first language, as the learning curve and setup are easier.
Yet another option is to make pieces of text on a web page audible and a ‘pre canned’ voice can be played by a ‘control’ (clicked with a mouse). This is sometimes called ‘flash content’ and is more flexible for users in that they need no special software, because it users the built in features of the web browser. However, some ‘older computers’ (and older versions of Windows in the case of Microsoft) may have a problem in recognising it, in which case it will be ignored. Flash content is also inflexible for changing the message content quickly. Useful for dyslexia.
Web sites will when attention has been paid to ‘standards’ in the design process.
Access keys / text alternatives
When blind or low vision users are without their usual screen reader style tools or for those who not have the benefit of such tools, there still remain ways to navigate or read a Web page or document, without a mouse. In fact, most Web users are familiar with ‘Access Keys’, where the computer is controlled by a standard keyboard using key ‘combinations’ , also called ‘keyboard shortcuts’ , ‘hot keys’ or ‘shortcut keys’, instead of a mouse. Other ‘housekeeping’ functions can be achieved such as ‘Save’, ‘Copy’ and ‘Paste.’
Some of these are defined below, and apply ‘universally’:
- ‘CTRL-HOME’, which takes you to the top of the page
- ‘CTRL-END’, takes to end of page. (note, older versions of some web browsers may not recognise access keys and so they will be non functional.)
- ‘CTRL-F’ often overlooked, will find / search a web page (any browser) or word processor document. Particularly useful when a web page is very long (the length of a web page does not contravene any guidelines)
- ‘CTRL —S’ will save your work
- ‘CTRL-X ‘(cut), ‘CTRL-V’ (paste), ‘CTRL-C ‘(copy.)
Screen readers will set up there own ‘definitions’ for Access Keys, for example to go to the top of the page, may be programmed as ‘CTRL-H’. This will override existing functionality or designation for a particular key.
Key combinations can be defined in the design of a web page and are a strong part of guidelines and the ‘access key’ attribute is programmed into the html of a web page Any designation can be given to keys, and this will help partially sighted and indeed many ‘mainstream’ users use key combinations (if known) when their mouse batteries are low! The web site should clearly state what the definitions are.
Complex graphics such as photographs and diagrams may not be immediately obvious to (or even viewable by) some visitors, so a clear text description of what the image means or conveys is required, and this is achieved with a ‘text description attribute’. The screen reader will read this back to those who need it, if the attribute is clearly given in accordance with standard and guidelines.
Web Browsers
Web Browsers (the software)
A web browser is a computer program that allows users to access information across the World Wide Web and to see web pages. The capabilities of different browsers vary and so they will typically ‘render’ a Web page differently, according to their capabilities. Many browsers only partially support the latest revisions of recommended html and CSS standards —this is not ideal for getting accessibility standards recognised. In the past, Browser manufacturers added their own, proprietary html (the language of web pages) into the web ‘melting pot.’ This is one issue which has helped undermine the successful application of a standard for accessibility from the start.
So what does a web browser do? Every information resource accessible on the Web has a unique ‘address’ or URL (uniform resource locator.) The user enters the URL of a ‘web page’ into the browser address box and the browser locates or ‘fetches’ the resource, this includes any other files that are dependent including external script and CSS files, images and other embedded content. When the browser receives the file and associated files, it interprets the html and CSS within and uses these to format the file for display, so rendering it as a ‘page’ on the screen or other output device.
Every Browser has a number of common features that facilitate the retrieval of information from the web by the user:
- There is an address box for entering URL's
- ‘Forward’ and ‘back’ buttons allow the user to move back and forth among the documents previously downloaded in a session
- A ‘print’ button allows the user to print the web page that is currently displayed
- A ‘Bookmark’ button allows the user to save the URL of a displayed page for easy retrieval at a later date
Older browsers
Another issue concerns the ‘age’ of browser software. Browsers ‘age’ because such as Internet Explorer undergoes continual development to enable them to deal with security issues, and to be able to display ‘richer’ and more imaginative web pages. Older Browsers (or older ‘versions’) effectively get left behind. However, the common dictate is that they should be able to display or render to a minimum acceptable level, for those users who may still be (stuck) using them, and this ability is reliant on the construction of the web page. That said, for practical reasons, most developers will work to a cut off points, except in exceptional circumstances. If the current version of a browser is 7.0, maybe versions 1.0 and 2.0 are no longer ‘usable’, on today’s Web. However, a web page that is ‘standards based’ can still ensure a ‘backwards compatibility’, so that older browsers can be used. Web pages should not be designed any less adventurously but thought must be given for alternatives for giving the information. A text-based description must be provided for ‘flash content’ which may not display. ‘Multimedia’ (section below) content can also be limited by an older browser. Audio content (where present) may not be accessible to all users and so providing alternative textual content or captioning will meet the accessibility requirements.
Browser manufacturers
By far the most popular is Internet Explorer because it has been around longest, and has enjoyed continual development from Microsoft. Also today, it comes ‘ready to use’ on your computer with Microsoft Windows. However, and many web users may not be aware, there are alternatives which have been developed for reasons other than satisfying the mass market, and they can offer advantages of accessibility and usability, even if a short changeover period must be endured while ‘weaning’ away from Explorer. Alternatives include Netscape, Mozilla, Firefox, Lynx (text only) Opera and AOL, some of these browsers are more well known in ‘atypical’ or ‘peripheral’ groups as well as devotees who can see the benefits of not necessary using the indigenous ‘mainstream’ technology. There are other computer platforms and devices running different operating systems each with browser development strands that are different to the Personal Computer / Microsoft combination. Also, versions of Internet Explorer and Netscape Navigator are available for Apple Macintosh and the UNIX system family. However, there tend to be subtle and not so subtle differences between the way they render HTML and CSS.
Because designing for the Microsoft Browser will reach the widest audience, anomalies between displaying web pages on alternative browsers will often be described as ‘quirks’, when it is maybe unfortunate that Explorer is the most widely used Browser! A web designer should consider how the page will look on a variety of the latest browsers (the ‘cross browser support issue’.) Again standards help with this issue, because browser manufacturers will be mindful of adherence to the latest, especially with they consider future developments. Even so, there can still be minor ‘quirks’ noticed between different Browsers, an issue set to decline as Browsers comply with standards and use web languages like xhtml to the exact specification.
Some web users prefer to see a ‘text only’ site, and it is good to test how the web site looks when used in it’s text form, i.e. stripped of things like graphics, and indeed all of the formatting which should be supplied by CSS. The Opera Web Browser for one has a ‘text only’ viewing for this. Opera has several useful ‘style’ settings including ‘emulate a text browser’, ‘accessibility layout’, ‘show images and links only’ (as opposed to ‘text only’), a ‘high contrast white on black’, and to cap it all, certain combinations of the above! You can also see a ‘small screen view’ to emulate the look on a small browsing device, and you can change the text size as a percentage of the original. If your web page is built to ‘standard’, the Opera Browser can give you all these viewing options for free!
A Government office scenario
Most government organisations would have Microsoft Internet Explorer or Netscape Navigator installed as their standard office web browser used to access their departmental intranet (internal private web pages). Typically, the same browser and version of it is installed on all computers within the organisation and because all use the same browser and version of it, all users see an identical view of their Intranet. This common view will have obvious advantage. However, the same conditions do not exist in every office or home, where a diverse range of browsers of varying ‘vintages’ are in use. Although the pace of browser development is fierce and competitive, not all users or indeed offices elect to install every new version that is released. Latest releases tend to work best on contemporaneous versions of their corresponding operating systems and the underlying computer hardware. This may act as a disincentive or even a barrier to updating browsers, but is a fact of life for users. On the large scale, many organisations have deployed a standard platform ‘package’ of hardware, operating system and applications software suite that have all been tested and verified to work together. The complexity and cost of the package integration and testing work is such that it may not be appropriate to install every new browser release that comes along.
Web Browsers (hardware) and screen sizes
Devices such as electronic personal organisers and cellular mobile telephones are increasingly capable of browsing the web. The display screens on these devices are very small compared with those on desktop computers and their browsers are modified versions of those found on desktop computer, and so use modified versions of the html. There are a number of ‘special’ browsers, add-ons to standard browsers and purpose-built computer hardware devices available for users with any of a wide range of disabilities to access the web.
Not everyone is using the same size monitor or resolution capability and this has an effect on how the page displays. Most web users now have access to monitors and display adapters that can display 800 x 600 pixels and although this can be taken as the default standard it is still important to ensure that your web site is legible at 480 x 640 pixels. Hand held devices (small screen and limited support for JavaScript) use the Internet as does Web TV (560 pixels wide and no horizontal scrolling), which might be widely available to your target audience. A Very wide screen is 1600px wide.
When different screen sizes are used (from a large monitor to a small PDA) content should ‘flow’ into the appropriate size reasonably well. When ‘absolute position and length’ units are used, this will not happen. Users need to be able to change the size of text, to compensate for the resolution or size of their device. This is not possible if a font is fixed in size.
Multimedia elements
Multimedia effects, or animated effects, usually small animations on web pages, but sometimes a whole introductory sequence for the audience (called flash content, because typically produced with Macromedia flash program and needs the flash plug in installed for the browser) which typically you are given the option to ‘skip’. A bypass is fine (to avoid a wait), but under the rules of accessibility the same information must be communicated another way and be suitable for the requirements of an accessible web page as already discussed.
Search engines submission
Most important in terms of 'where you rank' for a commercial organisation. A typicall CVS Organisation will certainly wish to appear in the various Search Engines. These comes in different 'varieties', and have there own algorithms for determining your 'status' within their records. Generally speaking, if the CVS wishes to be found on specific search criteria, then the web designer may 'design in' key wording, such as to achieve the recognition.
HTML / XHTML
HTML / XHTML, languages of the web -xhtml is the ‘union’ of two web languages, html and xml. It came into being as a recommendation released by the W3C in January 2000, and is a reformulation of html, the original language of web pages, and it is designed to meet the future needs of the web. It looks familiar to anyone who has already used html, which makes life easy for the web designer
A ‘standards compliant’ web page can still be produced with the latest version of html (ver. 4.01, there will be no more versions produced) and this is though of as flexible with the application of the ‘rules’, which in turn allows some ambiguities which can play havoc with devices with minimal processing power like mobile phones and PDA’s
xhtml on the other hand, is easier for a ’computer’ to process because it does not have this ‘flexibility’ and so xhtml web pages are more easily and conveniently read and displayed by devices other than a conventional web browser, such as screen reading software, web enabled phones, Braille readers and search engines.
Just when you thought you understood, xhtml has two flavours, ‘strict’ and ‘transitional’! As the terms suggest, transitional allows flexibility by keeping a ‘link with the past.’ One reason for this might be a need to retain a working web page for an old web browser, such as Netscape Navigator 4.0. Such a web page would have ‘document type’ of ‘XHTML transitional’. The benefits of adopting xhtml now ensure forward compatibility for your web pages. xhtml will set the standard for a web page language for years to come, so future-proofing your work early will save you trouble at some stage. As the web inevitably moves forward, future browser versions might stop supporting ‘deprecated elements’ from old html, and these pages may start displaying incorrectly and unpredictably.
A well-written xhtml page can be thought of as more accessible than an ‘old style’ html page, and is guaranteed to work in any standards-compliant browser (which the latest round have finally become) due to the insistence on rules and sticking to accepted W3C specifications. Also as mentioned, xhtml allows greater access to configurations other than a computer and browser. This interoperability is another aspect of xhtml's greater accessibility.
Validation and Testing
Falls into several areas, a ‘prototype’ or early test of the web site with representative users might be a good idea, but this does not circumvent the use of specific ‘accessibility validators’ (software tools, usually to be found on the web). The web page editing software used to create the web page usually provides some form of grammatical check, and might also provide an accessibility feature check. However, the ‘authoritative checks’ are performed on the internet (on-line), where there is a validation service for html as against the exact specification (provided by W3C), and a validation test of the suitability of the applied grammatically correct language for ‘accessibility’ (typically ‘Bobby’.)
Most Web pages are written using languages like (x)html and CSS which have technical specifications and a ‘formal grammar and vocabulary’. The act of checking a document against these constraints is called ‘validation’, and this is what the W3C Markup Validator does. Validating Web pages helps to improve and ensure quality. However, Validation is neither a full check for quality, nor is it equivalent to checking conformance to the accessibility guidelines. The Markup Validator is a free service by W3C.
'Bobby' Testing
Always remember that the W3C WAI is not a ‘standard’ but a set of guidelines. There is no ‘automatic’ way in a web site can be validated against the guidelines. A page can be compared against the guidelines to raise awareness of certain issues. Having checked for ‘grammar’ and ‘vocabulary’ with the W3C mark-up validation service, the next ‘testing’ or validation is for ‘accessibility’, and tools available include ‘Bobby’. The Centre for Applied Special Technology’s (CAST) are responsible for Bobby software, and it is considered a leading tool in the field. Individual pages can be run through or submitted to the Bobby service by visiting the site and typing the page URL. The service will scan the page and then return an automated report highlighting areas of ‘concern’ and suggesting what could be done to rectify them. These reports can look extremely daunting at first because of their length and quantity of detail but it is a service worth persevering with, and typically when one issue has been addressed, many other related issues will be dispersed. It must be noted that this application has a number of limitations:
- It will highlight areas that need to be looked at, but will not correct the submitted page
- It also suggests using attributes that are not supported by any web browser at present
- It does not validate a web page. This should be done using the W3C validator
- A Bobby approved certification does not necessarily mean it is usable by all
- If required the Bobby logo can be displayed on the organisation’s web site to show that the test has been completed and that the web site complies
- The procedure cannot invigilate on ‘un quantifiable issues’ of design, those that cannot be determined by the validation mechanism, e.g. how good is the logical flow or layout of the web pages, or the use of colour. Also it is for American legislation, usually follows three levels with conformance to level 3 being the highest
- This does not provide a definitive answer for the ‘well being’ or otherwise of a web page
Accessible and Inclusive web site design. Cost effective IT solutions for 'non profit' organisations or a small business.