Customising web pages

There are a number of ways in which a web page can be customised in order to make it easier to read and easier to see.

These customisation techniques may be employed on most modern browsers, however the implementation of the techniques for different browsers may vary.Here we provide details on how to change text size and how to change text colours as well as how to change the page colours. We also explain how to use Cascading Style Sheets (CSS) to change the appearance of a web site.

Descriptions are given for Internet Explorer (5, 6, 7), Netscape and Firefox (1.5 and earlier, 2, 3).Use the accessibility feature icon links left to jump straight to its description.

Changing Font Sizes and Zoom

Internet Explorer (5, 6, 7)

You can increase or decease the text size of a web page using the following steps:

  1. Access the View menu. This menu can be accessed using a mouse or by pressing Alt + V.
  2. From this menu use the mouse to navigate to the Text Size submenu or use Alt + X.
  3. From this menu you can change the text size. There are five options: Largest, Larger, Medium, Smaller, Smallest. With Medium being the default.

Please note that some web sites may use fixed sizes for their font (this web site doesn’t). This means that the following extra steps are needed before the above:

  1. Open the Tools menu with the mouse or press Alt + T.
  2. Click on the Internet Options option or press Alt + O.
  3. Click on the Accessibility option as the bottom or press Alt + E.
  4. Tick the Ignore font sizes specified on Web pages box using the mouse or Alt + Z.
  5. Click on OK or press Enter.
  6. Click on OK to return to the browser or press Tab and Enter.
  7. Use steps above to increase the text size.

Internet Explorer 7 Only

As of Internet Explorer 7, it is possible to increase the size of the whole web page using the zoom setting. This can be achieved using the following steps:

  1. Press Ctrl and + to zoom in.
  2. Press Ctrl and – to zoom out.

Netscape, Firefox (1.5 and earlier, 2, 3)

The text size can be increased in by following these steps:

  1. Click on the View menu item or use Alt + V.
  2. Click on the Text Size option or press Z (press S twice if using Firefox with version less than 1.5).
  3. Increase or decrease the text size by clicking on the Zoom In or Zoom Out option or by using the Up, Down Arrow Keys and Enter.
  4. Alternative while browsing use Ctrl and + or Ctrl and – to increase or decrease the text size.

Changing Text and Page Colours

Internet Explorer (5, 6, 7)

Both the text colours and page colours can be changed in Internet Explorer to colours of your choosing. This can be achieved by the following steps:

  1. Open the Tools menu with the mouse or by using Alt + T.
  2. In the tools menu click on Internet Options or press O.
  3. Click the Accessibility button at the bottom or press Alt + E.
  4. Tick the box Ignore Colors specified on web pages or press Alt + C.
  5. Click on OK or press Enter.
  6. In the Internet Options click on the Colors button at the bottom press Alt + O.
  7. Untick the box labeled Use Windows Colours if ticked by clicking on it or by using the W key.
  8. Click on either the coloured box next to Text or press T to change the text colour. Click on the Background box or press B to change the background colour. Click on the Visited box or press I to change the colour of visited links. Click on the Unvisited box or press N to change the colour of unvisited links. You can also change the colour links turn to when the mouse pointer is over them. This can be achieved by ticking the Use hover colour box or by pressing H. This will allow you to access and change the Hover colour by clicking on the box next to Hover or by pressing O.
  9. When you click on the coloured box a palette of colours appears. Choose the colour that you would like to use by clicking on it or by using the Arrow Keys. Once the colour has been chosen click on OK or press Enter.
  10. Once you have finished changing colours click on OK or press Enter and then click OK again or press Enter to continue browsing.

Firefox (1.5 and earlier, 2, 3)

Both the text colours and page colours can be changed in Firefox to colours of your choosing. This can be achieved by the following steps:

  1. Click on the Tools menu or press Alt + T.
  2. Select Options or press O.
  3. Select the Content tab or use the arrow keys to select it (General tab in versions earlier than 1.5).
  4. Click on the Colors button or press Alt + C (Font and Colors button or press F in versions earlier than 1.5).
  5. If the Use system colors box is ticked untick in by clicking on it or by using Alt + S (tab to it and press space in versions earlier than 1.5).
  6. Untick the Allow pages to select their own colors instead of my selections above box by clicking on it or use Alt + A.
  7. You can now set your own colour for text by clicking on the coloured box next to Text: or by pressing Alt + T. You can set your own colour for the background by clicking on the coloured box next to Background: or by pressing Alt + B. You can set your own colour for the Unvisited and Visited Links by clicking on the coloured box next to Unvisited Links: or Visited Links: respectively or by pressing Alt + L or Alt + V respectively.
  8. Clicking on the coloured boxes in step 7 will open a palette of colours. Select your desired colour and click on OK or use the Arrow Keys to navigate to the colour and press Space.
  9. Finally once all colours have been selected click on OK and then OK again or press Enter twice to exit. Click on the Reload current page button on the Navigation bar or press Ctrl + R to reload the page with your chosen colour settings.

Netscape

Both the text colours and page colours can be changed in Netscape to colours of your choosing. This can be achieved by the following steps:

  1. Click on the Edit menu or press Alt + E.
  2. Click on the Preferences option or press E to open the preferences selections.
  3. Click on the arrow/cross next to Appearance in the menu tree on the left or select it using the Arrow Keys and press the Right Arrow Key to open the menu item.
  4. Click on the Colors heading below the Appearance heading or select it using the Arrow Keys.
  5. Click the radio button next to Use my chosen colours ignoring the colors and background image specified or use the Tab Key to go to this section and select with the Arrow Keys.
  6. You can now change the colours as described in steps 7 and 8 above.
  7. Finally once all colours have been selected click on OK or use the Tab Key to select the OK button and press Enter to continue browsing.

Using CSS

The entire look of a web site can be changed using Cascading Style Sheets (CSS). CSS allow the style of a web site to be separated from the structure (Html). All accessible pages use CSS, including this one.

Here we describe how to use a custom CSS. A custom CSS, for example, can replace a site’s CSS to provide high contrast text and background colours which may be easier to read.

Internet Explorer (5, 6, 7)

To use a custom CSS (it is assumed that you have created one) follow these steps:

  1. Open the Tools menu with the mouse or press Alt + T.
  2. Click on the Internet Options option or press Alt + O.
  3. Click on the Accessibility option as the bottom or press Alt + E.
  4. Tick the box next to Format documents using my style sheet or use to Tab key to navigate to the box and the Space key to tick it.
  5. Enter the path to your CSS in the box under Style sheet:
  6. You can browse for a CSS by clicking on the Browse button or by using Alt + B.
  7. Once the file has been selected click on the OK button or use the Tab key to select the OK button and then press Enter.
  8. Click on OK or use the Tab key to select OK and then press Enter to continue browsing with the new CSS.

Firefox (1.5 and earlier, 2, 3)

In Firefox it is possible to turn off the page style sheet, which can make the page easier to read. In order to do this use the following steps:

  1. Click on the View menu item or press Alt + V.
  2. Click on Page Style or press Y.
  3. In the Page Style menu click on No Style or press N.
  4. The page is now displayed with no style.
Note that if the page does not use CSS, you will not notice any change in the page style. You can still use techniques above to change colours and text size.
For more useful information on web site accessibility please visit the BBC’s accessibility pages at http://www.bbc.co.uk/accessibility/. These pages provide in depth information on the many techniques that can be utilised to improve web site accessibility.