Nose to the Page (3) – Tools for Access to Reading

Screen  and Line Density

The average visual reader with low vision gets between 1/4 to 1/16 of the information per screen as compared to normal readers.  Web users with full sight can read between 400 to 500 words per screen effectively.  Visual readers with low vision who need enlargement to read will require between 25 to 125 words per screen.  I call this number thescreen density.  If you have full sight, think about the difference between screen density that you need to read a long document (15+ pages of 12 point text) on your computer, and the screen density you would need to read the same long document on your cell phone.

Screen density is a better measure than font size because it works as well for the enlargements needed by low vision users on a computer, and fully sighted users on a cell phone.  Many factors influence density: spacing (line, letter and word), margin size, font size and font face.  It measures the number of content units one screen delivers.

The Screen Density Principle: Every visual reader should have access to information that provide the screen densities needed for effective perception, and all information must be perceivable using vertical scrolling only.

By using built-in commands on your commercial browser, you should be able to enlarge a document to a density of 100 to 125.  That is a good benchmark.  If a page looks good with screen density of 100 to 125 then it is usually good to go.  If it looks funny at that density, then most of VR/LV will have difficulty reading it.

Compared to audio that delivers one word at a time, a visual screen density of 100 delivers a lot of information in one block. That is why many people with low vision use vision to read, or visual reading synchronized with audio.  Visual reading provides a larger content window than audio.

Another measure I use is the line density.  It is the square root of the screen density.  It measures the number of words (content units) in a line across a page.  If a page is double-column or single column with a screen density 100, then its line density will be the same value 10.  The single column page will average 10 words per line.  The double column page will have 10/2=5 words per column-line.  With four columns you get 2.5 words per column-line.  That is a ridiculously small number of words per column-line.  I recommend using no more that three columns on a page.

If you have a ragged page there may only be a few lines with text across the page.  Just count the number of words in an average line of text and square the result. That is the approximate screen density.  Remember, count all the way across the page if you have multiple columns.

Style Sheets for Testing

Below are some style sheets for testing.  The first style sheet below gives screen density of about 100-125. In terms of spacial management the layout gives a reasonable readable environment for many people in VR/LV. The second style sheet is a comfortable reading environment for fully sighted readers although the columns are a little wide.  Typically dense text uses multi-column format at the same density.  I used the "!important" operator so you can just overlay these style sheets on any web page to see how it looks at the given screen density.

For low density (larger print), adjust font size in the first style sheet.  Just change the constant value 2em on the line, "body > * {font-size: 2em !important;}", to whatever value you want. The value 4em will give you 25 words per screen approximately.

In the second style sheet I stripped the extra letter spacing because fully sighted readers do not need it.  I also increased the margin a little.  Change the 1em to some fraction for higher density.

These measures are approximations. The style sheets reduce everything to one uniform font size, but they give you a good look at screen and line density.  When in doubt, see how things look at screen density 100 and then use your gut.  Keep the Screen Density Principle in mind.

To try out these and other style sheets you might want to read on how to activate user stylesheets. Just copy the listings above; save them as .css files, and try them.

Bleeding Columns

Problem: Column bleeding occurs when the text from one column overwrites the text in the next column.  This happens frequently when you enlarge text (reduce screen density). Sometimes when you position columns with CSS, your text (especially link-text) will bleed across columns at low screen density. Overlapping text cannot be read. Bleeding is an ugly mess.

125–150 is the high end of screen density for most people who need enlargement.  A person may start in the morning on the high end with 125–150 screen density. By 10:00AM this drops to 100, and by the end of the day screen density can be down to 50 or less. Bleeding at low density blocks access.

Solution: You may want to use a multi-column format at high screen density, but as the user enlarges text with normal browser commands the screen should modify automatically to  one-column format. Layout tables cannot provide this access

Use "em" measures for column-containers.  Set up your layout to fit normal sizes perfectly. You use float to position your column-containers, and a tricky container tree for precision.  As text grows the page transforms to one column.  The user never needs horizontal scrolling.  A person can read just as well with a screen density range running from 400 to 25 words per screen.  The Screen Density Principle can be met for everyone.  (Exception: IE will only support screen density of 100–125 and higher.)  See the 2-to-1 example I have developed.

The structure outline of the webpage should look like this:

Do not stop using text alternatives or keyboard access just because people in VR/LV do not use them. Keep using semantic markup.  Do everything you did before, but also consider how things look at screen density 100.  Can you read the page reasonably?  Does your page meet the Screen Density Principle at screen density 100 or even less?  Would you like to interact with your page at screen density 100

Finally, do not code in accommodations.  Large text buttons are just silly. Just structure your website so it can be modified visually without a lot of change. 100 screen density is good because most bad structures break at that screen density.  It is a benchmark, not an accommodation.