How to use a custom style sheet (CSS) with Firefox

Modern internet browsers have the ability to use a custom style sheet to override the styles on all websites.

This feature can be used to make websites more accessible for people with vision impairments that require specific a background-font contrast.

To do this in Firefox you need to create a separate CSS file, call it userContent.css and save it in your Firefox profile.

The steps below detail how to do this.

  1. To start you will need a CSS style sheet with the customisations you require – see below if you do not have one. The style sheet must have the file name of userContent.css.
  2. Open My Computer and in the address bar enter the following address and press enter
  3. %APPDATA%\Mozilla\Firefox\Profiles\
  4. Firefox-CustomCSS1
  5. In here you will see the folder for you Firefox profile – open it
  6. The Firefox profile will contain several files and folders
  7. You should see a folder called ‘Chrome’ – if you do not create a new folder and call it ‘Chrome’
  8. Open the Chrome folder and save the userContent.css style sheet there.
  9. Firefox-CustomCSS2
  10. All websites will now display using the styles specified in the userContent.css style sheet.
  11. Firefox-CustomCSS3

Example accessible CSS

Download: userContent.css

The code below has two parts-

  1. the asterisk that applies to all elements – the styles are black backgrond, white font and size 20px font.
  2. and a that applies to all links – the style makes links show with the underline, making links clearly displayed.
/* these styles will apply to ALL pages */
    *{
        background:black!important;
        color:white!important;
        font-size:20px!important;
    }

    a{
        text-decoration:underline!important;
    }

/* these styles will apply to all pages on the w3.org website */
@-moz-document domain(w3.org) {
    *{
        background:grey!important;
        color:white!important;
        font-size:20px!important;
    }

    a{
        text-decoration:underline!important;
    }
}

/* these styles will apply only to the https://www.w3.org/standards/ page */
@-moz-document url(https://www.w3.org/standards/) {
    *{
        background:purple!important;
        color:white!important;
        font-size:20px!important;
    }

    a{
        text-decoration:underline!important;
    }
}

How to use a custom style sheet (CSS) with Internet Explorer

Modern internet browsers have the ability to use a custom style sheet to override the styles on all websites.

This feature can be used to make websites more accessible for people with vision impairments that require specific background-font contrasts.

With Internet Explorer you need to create a separate CSS file, for example MyStyle.css and configure Internet Explorer to use it.

The steps below detail how to do this.

  1. To start you will need a CSS style sheet with the customisations you require – see below if you do not have one.
  2. Save the custom style sheet to a safe location, somewhere it can stay without being deleted, for example in the C:\ directory.
  3. InternetExplorer-CustomCSS1
  4. With Internet Explorer open, click on the cog icon at the top right of the window then select ‘Internet options’
  5. InternetExplorer-CustomCSS2
  6. Click on the ‘Accessibility’ button
  7. InternetExplorer-CustomCSS3
  8. Place a tick next to ‘Format documents using my style sheet’
  9. Use the ‘Browse’ button to browse and select the custom style sheet.
  10. InternetExplorer-CustomCSS4
  11. Click ‘OK’ and ‘OK’ again to save the changes and close the windows.
  12. All websites will now display using the styles specified in the MyStyles.css style sheet.
  13. InternetExplorer-CustomCSS5

Looking for how to do with with Firefox? Check out How to use a custom style sheet (CSS) with Firefox

Example accessible CSS

Sample (right-click and choose ‘save as’): MyStyle.css

The code below has two parts-

  1. the asterisk that applies to all elements – the styles are black backgrond, white font and size 20px font.
  2. and a that applies to all links – the style makes links show with the underline, making links clearly displayed.
* {
 background: black !important;
 color: white !important;
 font-size: 20px !important;
 }
a {
 text-decoration: underline !important;
 }

How to use a custom style sheet (CSS) with Google Chrome

Modern internet browsers have the ability to use a custom style sheet to override the styles on all websites.

This feature can be used to make websites more accessible for people with vision impairments that require specific background-font contrasts.

Google Chrome dropped support for custom style sheets in version 32 in early 2014, fortunately a third-party has created an extension for Google Chrome, allowing users to continue to use custom style sheets.

  1. Using Google Chrome, go to the extension page for Stylish by userstyles.org – https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en
  2. Click in the blue ‘Free’ button at the top left hand corner
  3. Then click ‘Add’ 
  4. Chrome-CustomCSS1
  5. The icon for Stylish can now be seen at the top right of the browser.
  6. Click on the Stylish icon then click on ‘Manage installed styles’
  7. Chrome-CustomCSS2
  8. On the left hand side, click on the ‘Write new style’ button
  9. Chrome-CustomCSS3
  10. In the ‘Name’ field enter a name for the custom style sheet, for example ‘MyStyle’
  11. In the ‘Code’ box enter the custom CSS you want applied to every page you visit – make sure to add !important to each style to ensure it’s always applied. If you’re new to CSS there’s an example template below you can use as a start.
  12. Chrome-CustomCSS4
  13. Click ‘Save’ and check that the websites are displaying as you want.
  14. Chrome-CustomCSS5
  15. You can now close the Stylish window.

 Example accessible CSS

The code below has two parts-

  1. the asterisk that applies to all elements – the styles are black backgrond, white font and size 20px font.
  2. and a that applies to all links – the style makes links show with the underline, making links clearly displayed.
* {
 background: black !important;
 color: white !important;
 font-size: 20px !important;
 }
a {
 text-decoration: underline !important;
 }

ZoomText Quick Reference Guide

ZoomText Magnifier Commands

Task Command
Enable ZoomText Alt + Insert
Disable ZoomText Alt + Delete
Increase Magnification Alt + Numpad Plus
Decrease Magnification Alt + Numpad Minus
Toggle Colour Scheme Ctrl + Shift + C
Toggle Pointer Scheme Ctrl + Shift + P
Toggle Cursor Scheme Ctrl + Shift + R
Toggle Focus Scheme Ctrl + Shift + O

ZoomText Speech Commands

Task Command
Toggle Speech Alt + Shift + S
Stop current speech Ctrl
Toggle App Reader Alt + Shift + A
Toggle Doc Reader Alt + Shift + D
App or Doc Reader – Stop Automatic Reading Enter
App or Doc Reader – Stop Automatic Reading Escape
Navigation – beginning of document Ctrl + Home
Navigation – Say previous / current / next word Left / Space / Right
Navigation – Say previous / next sentence Alt + Left / Alt + Right
Navigation – Say previous / next paragraph Alt + Up / Alt + Down
Enable Speak-it Tool Alt + Shift + I
Disable Speak-it Tool Escape
Say Window Title Ctrl + Alt + W
Say Current Time Ctrl + Alt + I
Say Current Date Ctrl + Alt + Y

 

To save the configuration for the next time ZoomText is used: use the ‘File’ menu and choose ‘Save as Default’.

JAWS Windows XP Modifications

The following is a list of recommended changes which can be made to make Windows XP more accessible for visually impaired or blind users. This can be particularly helpful for people which are using a screen reader like JAWS.

Changes to the Start Menu

  1. Enabled ‘Classic Start menu’
  2. Disabled ‘Use Personalised Menus’

  3. Disabled ‘Hide inactive icons’

  4. Disabled ‘Group similar taskbar buttons’

Changes to Microsoft Word

  1. Disabled Reading Layout View

Changes to Microsoft Outlook

  1. Disabled ‘Navigation Pane’
  2. Disabled ‘Reading Pane’

Changes to Internet Explorer

  1. Automatic prompting for file downloads ‘enabled’

Changes to Windows Explorer

  1. Changed view to ‘details’
  2. Disabled ‘Show in Groups’ for icons

  3. Enabled Status bar

  4. Enabled ‘Use Windows classic folders’

  5. Disabled ‘Hide extensions for known file types’

  6. Changed Explorer search behaviour to ‘Advanced’

JAWS Key Commands Quick Reference Guide

Below are some common keyboard commands which can be used to control the computer using just the keyboard.

The ‘Jaws’ ones are only available when the Jaws application is installed and configured.

Windows Environment

Task

Command

Open Windows Explorer

Windows key + E

Navigation

‘Arrow’ keys

Select the next section

Tab

Go back a folder

Alt + Left arrow

Switch between windows

Alt + Tab

Copy selected item

Ctrl + C

Cut selected item

Ctrl + X

Paste selected item

Ctrl + V

Open Start menu

Windows key or Ctrl + Esc

Close Window

Alt + F4

Select address bar

Alt + D

Quiet key

Ctrl

Say Window name

JAWS + T

Say Time

JAWS + F12

Say Date

JAWS + F12 (Twice quickly)

Using Microsoft Word

Task

Command

Toggle Bold

Ctrl + B

Toggle Italic

Ctrl + I

Toggle Underline

Ctrl + U

Save Document

Ctrl + S

Print Document

Ctrl + P

Say previous word

JAWS + Left arrow

Say next word

JAWS + Right arrow

Create new document

Ctrl + N

Say previous paragraph

Ctrl + Up arrow

Say next paragraph

Ctrl + Down arrow

Spell check

F7

Read from point to end of document

JAWS + Down arrow

Say where the cursor is positioned

JAWS + Delete

Using Internet Explorer

Task

Command

Switch between tabs

Ctrl + Tab

New tab

Ctrl + T

Close tab

Ctrl + W

Select address bar

Alt + D

List headings

JAWS + F6

List links

JAWS + F7

List form fields

JAWS + F5

Enter/Exit forms mode

ENTER

ClearNote Quick Reference Guide

clearnote
The ClearNote application allows the ClearNote to be displayed on a computer screen through Windows.

By default the application won’t start automatically, to start the program open the green ‘ClearNote’ shortcut on the desktop.

In addition to the buttons on the ClearNote device, the following commands can be used to control the ClearNote.

 

Task

Command

Zoom in

UP arrow

Zoom out

DOWN arrow

Increase Brightness

B

Decrease Brightness

Shift + B

Increase Contrast

C

Decrease Contrast

Shift + C

Change display scheme

S

Reset display scheme

Ctrl + R

Rotate window 180°

Ctrl + M

Change window position

D

Toggle horizontal reading line

L

Move horizontal reading line up

Page Up

Move horizontal reading line down

Page Down

Enable/Disable light

Ctrl + L

 

Windows XP Accessibility Wizard

Starting the Accessibility Wizard

  1. Click the Start button,

  2. Point to All Programs,

  3. Point to Accessories,

  4. and then point to Accessibility.

  5. From the list, select Accessibility Wizard.

 

1. Text Size

The first question is to set the size of the fonts, when selected it will automatically modify the fonts for the rest of the Wizard.

2. Display Settings

Depending on the setting selected in the previous page, some of these options might be pre-selected.
a. Change Font Size
This option customises the font size within the Windows environment; it does not enlarge the text inside of windows.
b. Switch to a lower screen resolution
Screen resolution refers to how many dots (pixels) physically make up the computer screen, for most computers it is 1024 x 768. By selecting this option Windows will change what is being sent to the monitor to 800 x 600. This allows for the text and other objects to be drawn larger on the monitor, but has the disadvantage of giving less ‘working space’ on the screen, the display might also appear slightly blurry due to the mismatch in screen resolutions (between the software and hardware).
c. Use Microsoft Magnifier
Is a simple Magnifier that creates a separate window which displays a magnified copy of the screen. The magnifier can be customised to allow for 2-9 times magnification, inverting colours and for the magnifier to follow the mouse or the focus of the keyboard.
d. Disable personalised menus
Personalised menus is a feature which allows Windows to ‘hide’ menu items which haven’t been used for awhile, this affects the Start menu and other Microsoft Office applications. For a sighted user this can be confusing, as items are hidden until you click the ‘unfold’ double arrows at the bottom of the menu, it might also be a benefit because it automatically ‘de-clutters’ the menus. For a screen reader user this option can stop the screen reader from being able to find the menu option, for these users it is recommended personalised menus are disabled.

3. Set Wizard options

Here you are given four scenarios, this will customise the options given to you in the future steps. For this guide we will select ‘I am blind or having difficulty seeing things on the screen’.
a. Scroll bar and Window Border Size
Changes the size of the scroll bars within applications like Microsoft Word, Internet Explorer, and My Computer (Windows Explorer).
b. Icon Size
Changes the size of the icons on the desktop and in My Computer (Windows Explorer). Please note that for My Computer (Windows Explorer) the icon size will only increase if the View setting is set as ‘Icons’. This feature also tends to crowd the icons on the desktop, this can be corrected by customising the display settings.

4. Display Colour Settings

Allows you to select from four high contrast display settings.

5. Mouse Cursor

Allows you to choose through three schemes (White, Black and Inverting) and three sizes (Regular, large and Extra Large) for the mouse cursors.

6. Cursor Settings

Allows you to modify the Cursor blink rate and the cursor width. Please note that this option only affects Widows text areas (edit boxes, address bar etc) and not Microsoft Word.