WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Fixed font-sizes and WAI or 508

for

From: Terence de Giere
Date: Feb 3, 2004 3:44PM

Relative Versus Absolute Font Sizes

Lennart Borgman wrote:

...I believed that the [accessibility] guidelines said that you should
not use fixed font-sizes....

Graphic designers seem to prefer fixed size layouts and precise sizing
and positioning of fonts. That might be part of their psychology, with
their sense of composition, balance and color. I have been told that
designers tend to have excellent vision, although I am not sure this is
a fact. In any case, designers have tended to want to control the
appearance of web pages down to the n^th degree, and this is one actors
that historically led to the web becoming inaccessible.

The web is first and foremost information, and most of that is text,
although in some cases, for example, the current photographs of Mars
from the European orbiter and the United States's rover vehicles, are
pictures that are, at least for the common man, difficult to describe in
text.

I do not think graphic designers relate well to the idea that the web
browser user can control what they see, and shatter their carefully
conceived designs. For accessibility though, we need to consider that
the information in pages has to be presented in a manner that is
flexible, even extremely flexible.

Font size on web pages from a designer's viewpoint may have something to
do with the low resolution of computer screens. The stems on typefaces
at the usual sizes designers use are one pixel wide on screens. If one
goes one or two point or pixel sizes larger than browser defaults, the
fonts suddenly become two pixels wide. Visually it looks like the fonts
have become bold when in fact, they have not. Different fonts break to
two pixels stem width at different sizes. Thus, if a designer is using
fonts in the 12 to 18 point range, the visual appearance may be
uncontrollably ragged because of this effect. In print, with its higher
resolution the difference is slight, but on low resolution computer
screens it is significant.

Thus designers are, I believe, using smaller sizes to avoid this
unsightly appearance, and fixing sizes to prevent the user from messing
up their design. Another reason for small sizes is the way users set (or
not knowing how to set it, do not set) their monitor resolution. I have
typically observed that the screen resolution is usually set so the font
size and graphics are scaled larger than life size. For example on my
screen, a resolution of 1152 by 864 pixels reproduces the ruler in a
word processor very close to life size, but many other users with the
same size screen are usually using 800 by 600 pixels or at most 1024 by
768, with the result that point sizes in applications and web pages are
larger in appearance than specified. Using smaller fonts on web pages
redresses this issue, probably to the detriment of those who have their
machines set to a true 'What You See Is What You Get' size.

Go to http://www.proaxis.com/~ferris/docs/dpi-monitor.html for a chart
that correlates screen resolution and monitor size. Note that this chart
does not include Windows when set at the 'Large Font' setting, or 120
dots per inch.

By using smaller fonts, the average user will see more of the web page
'above the fold', that is, the bottom boundary of the web browser
window. Web browsers also initially began to give more control to the
designer, with the implementation of fixed font sizes. Note that the
first Cascading Style Sheet specification also gave control to the
designer by allowing them to specify a rule, '!important', that
controlled the size. If the user used the !important rule in a user
style sheet, the rule in the designer's sheet would override it. In the
second Cascading Style Sheet specification, this was reversed for
accessibility, giving control back to the user. The newer browsers
except for Internet Explorer are basically giving font size control back
to the user regardless of what the designer sets in HTML or in style
sheets. In Internet Explorer, there are more limited options for
overriding page display, and the user needs to find out how that is done
because they are buried in the menus.

Browsers also until recently rendered font sizes by reference to point
size, with the result that computer operating systems that displayed at
different resolutions would render fonts in a different proportion to
the size of images. If a page was designed on a Macintosh, the same page
on a PC would show images smaller in relation to fonts. The newest
browsers are using pixels to set font size internally, with the result
that proportion between image and font is constant across operating
systems. However, in this situation, a page displayed on a Mac will
appear larger than on a PC because a PC will be displaying the page at
96 or 120 dots per inch, and the Macintosh at 72 dots per inch, assuming
the screen is set for to What You See Is What You Get size. Some
browsers, such as Mozilla also correlate the screen resolution setting
(i.e., 72 or 96 dots per inch) with the font size, so that true
uniformity across operating systems is possible.

What You See Is What You Get really refers to the matching of the
computer screen's visual image to the image on a printed version of the
same information, first developed at Xerox PARC, and first commercially
applied to the Macintosh, or its precursor, the Lisa, in the 1980's. The
Internet has never been a What You See Is What You Get environment. What
each person experiences may be quite different from what the designer
visually thinks is appropriate. nonetheless designers continue to try to
make the web an environment like they have with printing.

The graphic designer's historical connection to the Macintosh (and it
seems still their preference) has perhaps tended to tie web page design
to the concepts of print design, maybe because this is the kind of
software designers are used to using. But web design requires design to
work with screen sizes on small cell phones up to monitors quite large,
some with browsers that show graphics and some which do not. Creating a
design that can flow, bend and change, drop out features such as
scripting, pictures, and multimedia, and still present themselves
satisfactorily goes against the design trend graphic artists are used
to. Designers working in multimedia in some ways are in a better
position because they deal with dynamic presentation in which page
elements move about. Designs using Macromedia Flash, however, are often
even worse than HTML designs, because it allows designers the ability to
use specific fonts in specific sizes, and the result is many extremely
difficult to read web sites, with interfaces that are sometimes hard to
fathom for site navigation and operation. The design in the mind of the
artist is executed more or less, but without reference to what happens
when it is used.by someone else. It is always easy to appreciate and use
a design one creates oneself, but a much different matter when more than
one person is involved.

An accessible design has to be thought through on many levels, and it is
difficult to draw such a design because a drawing represents only one
state of a reflowing design, that might be presented in many, many
different ways. A very typical method of design for web pages has been
for the graphic artist to draw the page in an application like Adobe
Photoshop, and then the developer cuts up the drawing, patches and
positions the graphics together with tables, and replacing some of the
drawn text with real HTML text, ususally fixed in size, finally ending
up with
a pretty, but often inaccessible web page.

Accessibility, if applied fully, means designing the information
structure of the page, using the proper HTML elements (tags) to describe
the document information as clearly as possible, and providing
alternatives for non text information. A good accessible page, in its
basic form, is really very dull looking as it has only default browser
format, which can be rather variable depending on the kind of browser
used. The challenge is then to make the page more visually attractive,
and visually usable for graphical browsers by graphic design - using
HTML and Cascading Style Sheets, images, and multimedia, but without
destroying the user's ability to get all the information in the page if
he or she cannot experience it through all the senses, or through the
technology being used. Visual design practices and accessibility
practices tend to be at opposite poles sometimes, so in most
organizations some kind of compromise is usually going on if
accessibility is supported. Quite a lot of emphasis in the last few
years has not been on how to design good accessible pages, but how to
retrofit and patch inaccessible, visually designed pages, a procedure
that results in poor usability for disabled users.

Most users are sighted and have something approaching average vision
(because the average is the norm of all these people) and just on the
basis of behavior, the typical person will approach thinking about the
web from a visual viewpoint, and never consider the ramifications of
design on blind, partially sighted, deaf, or motorically impaired users.
Graphic designers, programmers, administrators, and executives will all
as a group be visually oriented, and this situation provides great
inertia to overcome when considering accessibility, and usability.

Canada implemented almost all of the World Wide Web Consortium's Level
Double-A compliance accessibility guidelines, but interestingly, for
their 'Common Look and Feel' for government web sites, use a fixed font
size, rather than the relative font size required by the W3C guidelines.
The United State's Section 508 rules do not specify that one must use
relative font sizes, so as a whole the U.S. rules provide for less
accessibility in most cases.

Based on usability test results, font sizes on most major sites are too
small, designers usually setting the normal reading font 20 to 40
percent smaller than the browser default size. The default browser font
size as displayed in browsers on What You See Is What You Get displays
is adequate for most users, except for children and the elderly who read
more efficiently with fonts that are, compared to a printed document,
somewhere in the 14 to18 font size. This size is in the range mentioned
earlier where graphical browsers render fonts erratically moving from a
one pixel stem width to two.

Persons who are near sighted and wearing corrective glasses will see a
smaller image compared to normal sight, so a users in this situation may
have problems even with otherwise corrected vision. Many visual
impairments require larger sized fonts, sometimes huge sizes with large
monitors, and may also require the use of speech synthesized rendering
of the text in pages as well as an additional assist.

Thus just about everyone who has a monitor set 'correctly' for real life
display size, should have at least some trouble reading the text on
professionally, graphically designed web sites these days. Considering
all the variables of screen size, resolution, vision problems and their
correction, the ability for the user to adjust font sizes is really
necessary, even for normal users without vision problems. That most
sites seem to use too small sizes would lead to the conclusion that
these web sites' traffic would be less than if they were readable - lost
customers, more errors in completing tasks, and less success in finding
information. For a big commercial site, the lost revenue could be quite
large; for government sites, the usual problems dealing with government
employees and regulations would be conveniently translated to the web.
It is estimated billions of dollars are lost annually for reasons like
this.

We do know that graphically driven 'concept' oriented web sites that
have unusual design and atypical interfaces and weird fonts that look
striking, have often failed miserably in practice because of usability
and accessibility issues. Less evident issues such as one font size
smaller than needed for easy reading seem to slip by without notice.

There is only a certain range of features, layouts, typeface designs and
sizes that uniformly work well, and when we stray away from that, even
normal users start to have usability and accessibility problems with
sites. This situation is slowly improving, but very slowly. Considering
the negative effects this has on commerce and the efficiency of
government operations, the only explanation seems to be almost total
ignorance of these issues, or that the principles of design as
understood separately by various factions of web design, development,
marketing and so on, are considered more important than empirical
knowledge and success.

A hearing impaired user will not usually have problems with visual web
sites in the absence of a visual disability unless the content contains
audio information related to but not the same as the visual text or
graphics. Note that products like MAGic provide screen enlargement and
speech rendering of pages, that enlargement alone is not always
sufficient. Windows provides rudimentary speech rendering and
magnification. Presumably a user that was vision impaired and hearing
impaired could try enlarging fonts in Internet Explorer, and not knowing
how to override defaults or use the built in magnifier could not enlarge
the fonts on a web site, and might try the built in speech synthesis as
an aid, which if there is a hearing impairment might not work well
either. The only viable computer alternative to complete lack of vision
coupled with deafness is Braille used in conjunction with a very
accessible web site and appropriate assistive technology.

A note on the Bobby accessibility checker that came up in this
discussion. The Bobby license as written prevents the user from using
Bobby on any web sites they do not own. A great software license for a
consultant! Presumably one needs to buy a copy for each non owned web
site it is used on. Better would be for consultants to use the software
and recommend it to clients to set up an accessibility testing system
they could eventually use to monitor on their own. I asked WatchFire
about this and got no response. One might as well have a license say the
user may keep a copy on his computer, but not use it for any purpose
other than to take up disk space. I think they should rethink that
wording. Bobby 4.01 (the Java version) has trouble with some sites,
causing it to just leave the site; I do not know the cause, but it might
have to do with HTTP protocols and headers. Bobby 5.0 (Windows only) can
access sites that 4.01 seems to wink out on, as with the www.uu.se site.

As with any tool, Bobby is useful if one knows what it does and does not
do, what its strengths and weakness are. Jukka Korpela is fond of
pointing out that tools do not make a web site accessible, and that is
basically true. They are a sometimes very useful aid, and can tell you
where to look, but such tools are too unintelligent to cope with many
usability issues, and they miss many accessibility points or are
incapable of discovering them. I know of four accessibility errors Bobby
reports under certain circumstances when in fact no accessibility error
has occurred, and I do not use Bobby often. Accessibility software also
has these bugs we have to contend with. When first doing accessibility
using tools, we tend to rely on them very heavily, but with experience
we begin to discover they can be very stupid sometimes, and do not
reflect what the user is actually going to experience using a particular
site. Applying accessibility guidelines manually also can have the same
effect.

IBM has done some studies indicating that some simple accessibility
heuristics can be very effective in evaluating the accessibility of web
sites, even if a long list of technical guidelines is not used, perhaps
because these simple rules can be more easily followed than a complex
list of technical details. (Definition of heuristics: an aid to
learning, discovery, or problem-solving by experimental and especially
trial-and-error methods or self-educating techniques, such as the
evaluation of feedback, to improve performance)

Links to the IBM articles (my thanks to Dr. John Sorflaten at Human
Factors International for the tip) are:

Part One at h