Howto: Make Supernova/HAL 6.2 (and older) Screen Reader Deal With Tableless HTML and CSS Layouts

Written September 9. 2003, at 11:45 GMT.

[The CSS file was last updated on October 7th, 2004]

The Supernova/HAL screen reader from Dolphin Software seems to have problems with reading web pages that are programmed with tableless HTML and columns made with CSS techniques. (Wired.com is a famous example, and here's a list of other sites.) This problem is found in Supernova/HAL version 5.2 and older on Windows. [Update: version 6.2 is slightly better but not much.] Future versions of Supernova/HAL may not have this problem.

The core of the problem is that Supernova/HAL seems to only read what Internet Explorer displays on the screen, without even looking at the HTML source code of the web page at all. This makes widely acceped accessibility methods, such as embedding a hidden "Skip Navigation" link in the HTML code, useless and furthermore creates a wide range of problems on pages that use various column-based page layout techniques (only <table> based columns work properly). Needless to say, this makes my media-specific stylesheets useless as well.

To work around this problem, Supernova/HAL users must do the following:

  1. Create a text file, called "halfix.css", on your computer and paste the following CSS code into it (you can also download it from here):

    * {
      line-height : inherit !important;
      position : static !important;
      width : auto !important;
      height : auto !important;
      display : inline !important;
      float : none !important;
      font-weight : normal !important;
      font-style : normal !important;
      margin : 0 !important;
      padding : 0 .5em 0 0 !important;
      background-image : none !important;
      border : none !important;
      text-transform : none !important;
      text-align : left !important;
      background-color : #fff !important;
      color : #000 !important;
      font-size : 1em !important;
    }

    html, body { font-size : 100% !important; }
    body { padding : 1em !important; }
    body * { overflow : visible !important; }

    h1, h2, h3, h4, h5, h6, p, form, div, ul, li, ol, dl, dt, dd, pre, address {
      margin-bottom : .5em !important;
      display : block !important;
      line-height : 1.67em !important;
      _height : 1em !important;
    }

    h1 { font-size : 2em !important; }
    h2 { font-size : 1.5em !important; }
    h3 { font-size : 1.25em !important; }
    h4 { font-size : 1.1em !important; }
    h5, h6 { font-size : 1em !important; }

    h1, h2, h3, h4, h5, h6, b, strong { font-weight : bold !important; }
    i, em, cite { font-style : italic !important; }

    input, select, textarea { border : .15em inset #999 !important; }

    ul { list-style : disc !important; }
    ol { list-style : decimal !important; }

    ul, ol, dt { padding-left : 2em !important; }

    a:link, a:visited { color : #00c !important; text-decoration : underline : !important; }
    a:hover, a:focus, a:active { color : #f00 !important; text-decoration : underline : !important; }
  2. In Internet Explorer, open the "Tools" menu and select "Internet Options". In the Internet Options window select "Accessibility".
  3. Select the "Format documents using my stylesheet" option and click "Browse".
  4. Locate and select the file halfix.css that you created in step 1 and click "Open" to use it as your "personal stylesheet". (Note: if you're already using a personal stylesheet, then you need to add the CSS code in Step 1 above to that stylesheet file)
  5. Now close both the "Accessibility" and "Internet Options windows", and restart Internet Explorer. (Make sure you close all Internet Explorer windows.)

After you've done this, many webpages will look kind of funny, but at least HAL should be able to read them properly.

Note: This is not a real solution to the problem. It's just a hack that can be used until the Supernova/HAL screen reader starts to properly support websites built with tableless HTML and CSS layout.

Updated on February 13th, 2004: I made some major updates to the CSS code to ensure better readability for sighted users. Here's the old version archived for prosterity.

Updated on October 7th, 2004: Simple bug fix, plus some further updates for increased readability for severely dyslexic and visually impaired users.


More like this: English Entries, Accessibility, HTML/CSS.


Reader Comments (1)

  1. Már Örlygsson: Fregnir úr heimi blindra

    "Arnţór Helga stađfestir ađ CSS reddingin fyrir HAL skjálesarann virkar. Ţađ eru góđar fréttir. Ţessi lausn mín hefur veriđ kynnt fyrir starfsmönnum Dolphin og á notendapóstlista Dolphin. Einhverjir á ţeim lista bentu líka á hugbúnađ sem heitir WebForma..." Read more

    September 17. 2003 kl. 09:34 GMT | #

Ţessum svarhala hefur veriđ lokađ. Kćrar ţakkir til ţeirra sem tóku ţátt í umrćđunni.


 

Flakk um vefsvćđiđ



 

Nýleg svör frá lesendum

  • Rich (Req.js - javascript lazy-loading and dependency managment made easy)
  • Rich (Req.js - javascript lazy-loading and dependency managment made easy)
  • Rich (Req.js - javascript lazy-loading and dependency managment made easy)
  • Már (Req.js - javascript lazy-loading and dependency managment made easy)
  • Rich (Req.js - javascript lazy-loading and dependency managment made easy)
  • Már (Req.js - javascript lazy-loading and dependency managment made easy)
  • Dinesh (Req.js - javascript lazy-loading and dependency managment made easy)
  • Már (Taubleyjur í nútímanum - lítill leiđarvísir handa hrćddri ţjóđ)
  • Ada (Taubleyjur í nútímanum - lítill leiđarvísir handa hrćddri ţjóđ)
  • notandi (Taubleyjur í nútímanum - lítill leiđarvísir handa hrćddri ţjóđ)
  • Geir (Lausnin á efnahagsvandanum)
  • Jenný (Lausnin á efnahagsvandanum)
  • Óli Jens (Lausnin á efnahagsvandanum)
  • Már (Lausnin á efnahagsvandanum)
  • Kjartan S (Lausnin á efnahagsvandanum)

 

 

Yfirlit yfir ţetta skjal

(Atriđin í listanum vísa á ákveđna kafla ofar á síđunni.)