Færslur Þriðjudaginn 9. september 2003

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

[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.

Reader comments (1) | Permalink

Kl. 09:49: HAL prófanir 

Hér eru nokkrar einfaldar prufusíður til að skoða í HAL lesvafranum.

HAL er lesvafri/skjálesari frá Dolphin Software, sem sístækkandi hópur blindra og sjónskertra tölvunotenda á Íslandi notar. Enn sem komið er er JAWS lang algengasti kosturinn, en íslenski framburðurinn í honum ku ekki vera eins góður og hjá HAL, auk þess sem mörgum finnst HAL vera þjálli í notkun.

Ég er núna að kanna hvernig HAL vinnur með CSS stílblöð á vefsíðum - sér í lagi hvort hann skilji media reglurnar og hvernig hann les vefsíður sem nota float og position : absolute til að skipa innihaldinu í dálka.

Niðurstaða (viðbót)

HAL 5.2 (nýjasta útgáfan) les ekki vefsíður með því að lesa gegnum innihald HTML skjalsins, heldur les hann einfaldlega bara það sem sést á skjánum. Þetta er stór galli, og veldur í ofanálag því að vefsíður sem eru skrifaðar með töflulausu HTML og eru dálkaskiptar með CSS skipunum verða algjörlega óskiljanlegar. (Dæmi um svoleiðis síður: 1, 2, 3, 4, 5.) HAL les töflulausar síður nefnilega svona:

1. efsta línan í vinstri dálki
efsta línan í miðju dálki
2. efsta línan í hægri dálki
3. önnur línan í vinstri dálki
4. önnur línan í miðju dálki
5. önnur línan í hægri dálki
6. o.s.frv...

Þetta er náttúrulega alveg vonlaust og þarf að laga. Ég mun verða í sambandi við tengilið Dolphin Software í Svíþjóð og vonandi tekst mér að sannfæra þá um að gefa út lagfæringu hið fyrsta. Þangað til geta íslenskir HAL notendur notast við þessa "user-stylesheet" reddingu.

Svör frá lesendum (1) | Varanleg slóð