 |
Accessible Information Websites – Text and Fonts |
Are you inadvertently playing, I have a secret? Is the purpose of your website to share and exchange ideas? Your users need to be able to read the webpage text for successful communication. The Americans with Disabilities Act (ADA) applies to websites. [1, 2] Are possible lawsuits in your future?
- Is your website multi-user friendly?
-
Can it be used by the eagle-eyed, the blind, the color blind, the bifocal visitor, the paraplegic, those with tremors, those with broken bones, those with serious illness, the deaf, the hearing impaired, those with slow connections, those with older computer equipment, etc? Did you wake up this morning and say, I want to write a website that only the special few can use? Why would you want your Web site difficult to use by your potential customers or clients?
- The following ideas are my thoughts regarding text issues for accessible information websites.
-
Example: I was building a cancer website. I added approved text and text color tags. Then I went to see the main doctor in his office at a large hospital. We looked at the site using the latest technology. He could not read the text. The browser could not override the encoded text styles. I sat up late that night ripping out the tags from 100+ webpages.
- Lessons learned:
-
1. Web browsers are not created to coddle puny websites. Features may or may not be supported by different browsers. Abandon the notion that appearance can be micromanaged down to the last pixel. In fact, the same website will look very different depending on the browser – Safari, Chrome, Explorer, Edge, Firefox, Opera, Lynx, etc. -- not to mention all the different versions. Moreover, what looks good on one PC may not look right on other PC's, UNIX/Linux machines, Macs, laptops, flat screen monitors, cellphones, and tablets to name a few. Don’t forget Macs display at 72dpi while most browsers and PCs display at 96dpi.
2. Beware of the latest web coding ideals promoted by so called experts. Keep in mind backwards compatibility. Are Cascading Style Sheets (CSS) in web development similar to Bloodletting in medical practice?
- Fonts and Font Color
-
In Accessible Information Websites – Overview I wrote about this example of disconnect between programmer and user. A blind organization web site, that no blind or visually impaired person could use. In this case, the programmer used nothing but pictures of text in tiny print. There was no alternative text (alt tag) code to read.
- Adjusting Font Size for Text Readability
-
Do not forget! - Although it is easy to enlarge the fonts in many formats, the visibility of the lettering also depends upon the browser that you are using. Browser settings may contain something like this false promise option - may support dynamic text will adjust to your preferred text size. The browser may or may not be able to override the CSS code. Users may be held hostage to a designer’s vision.
Keep your fonts (typefaces) scalable. Keep in mind readers wearing bifocals or those who are colorblind. Users will leave your website if they cannot read the information.
- The keyboard shortcut of holding down the Ctrl(control) key and press the + to increase the font size or - to decrease the font size.
- Using the mouse (or keyboard shortcut) to click on the zoom option under the browser View menu
- Advantages of the relative HTML font size as in Hello I am larger text
-
- May be more compatible with older browsers.
- When the user enlarges the page text this font option keeps the page text in proportion.
- Generic Font Families
-
Generic font families are built into CSS, not HTML unfortunately. All compatible browsers will automatically match an appropriate font to each generic family. Even older browsers have a default font. If they do not support generic font families they will support a default font: such as Times New Roman. Using generic font families is not a requirement when using fonts but is a good rule of thumb for those of you who are true designers and want to be sure that your design is rendered for each user as you intended. Be sure to test your design with the generic and default fonts to ensure that it is acceptable to you for your users.
- The five generic font families are:
-
serif, sans serif, monospace, cursive, fantasy
- Font Colors
-
Colors provide an artistic effect, but usually are not helpful on an informational site. Remember the user seeks information. Grey text on pale grey background may be aesthetically pleasing to you but frankly, is unreadable.
The background and text colors must have distinct contrast. This CSS example has too little contrast between the lettering and the background.
In this CSS example the background color is pale grey or hex color #eeeeee
body {
background-color: #eee;
font-family: "Roboto Slab", Georgia, Times, serif;
font-size: 15px;
font-weight: 300;
line-height: 27px;
color: #666;
}
and the text color is darker shade of grey or the hex color #666666
- Compare these two examples of color contrast:
The first is the dark grey(#666666) on a pale grey background(#eeeeee).
dark grey text on pale grey background
|
The second is black text(#000000) on a white background(#fffffff)
black text on white background.
|
An overlooked issue is page color display worldwide due to different devices, browsers, bandwidth, etc. In A New Proposed Website Citation Method , I suggested this quick test regarding how many shades of white exist.
Create a simple html page with the tag for body bgcolor = white or the #ffffff hex color. Display the page using different browsers and devices. Prepare to be amazed!
-
Text Pictures(Graphics)
Instead of regular text some sites choose to create a picture of the text. - - On the up side using graphic text boxes keeps the site tidy and inflates the number of hits.
- On the down side, the text in the graphic text box is unreadable.
-
The graphic font text usually has a fuzzy quality, like the middle of a photocopying job. This impacts many segments of the public. What about the senior citizen who needed some crucial information on their medical condition and is unable to read this text? What about the myopic reader who, even with eyeglasses on, is unable to read some of these sites?
One main problem is that the text box cannot change size. If the user enlarges the text on the web page for readability the text in the graphic text box never changes size.
Here is a simple example -
This graphic text box is 150px(pixels) by 60px(pixels), the enclosed font size is 15px or 11pt. No matter how large or small you make the web page, the graphic text box will not adjust and will remain 150px(pixels) by 60px(pixels). Attempting to enlarge the text box will result in degradation of the words.
this is graphic text box with the wording this is an example of graphic text at 11pt
- Alternative text (alt) tags
-
All graphics need alternate text (alt tags) Alt tags provide visible text. Uses for alternate text are - when users deny the load graphics option, a text browser for viewing the site and for screen readers. A screen reader is a device (similar to a talking book) which enables the blind to access the text on a website.
- Podcasts and Video Text problems
-
Many sites offer video lessons (youtube.com, Udemy.com, Udacity.com, etc.) The problem – If the text is too small, it cannot be enlarged. Some browsers offer a zoom extension. This feature may or may not work depending on the browser, or equipment. Holding a magnifying glass to a computer screen is awkward. Podcasts and Vodcasts need to have typescripts or close captions added. If not, those hearing or visually compromised are denied access to the NetCast.
- The Viewport problem
-
Some experts are promoting using the CSS viewport option to control page layout. Problem this tech toys option is not supported by all browsers, older equipment, desktops vs mobile, etc. The simple Always Responsive Accessible Web Page Display and Printing For Any Device works.
- What about printing?
-
Does your webpage display include generic fonts? There may be a special page to print. Do users need to play, Printer, printer where is the printer, to print the form or information? Can the page be printed straight from the net or not?
- Is there an alternate HTML for PDF documents?
-
If you are using PDF (portable document format)s is there an alternate version in either text or HTML? Always provide an HTML (hypertext markup language) version if you are using a PDF (portable document format) file. Use of a PDF alone is a violation of the Americans for Disabilities Act.
Sitting together, a pharmacist at a large hospital and I tried to access the then new Medicare site. We could not. The hospital internet connection and equipment was the very best. Now, imagine users with older equipment or slow connections attempting to read needed information. Log files were littered with the 206 partial content error. The problem was the PDFs used. There were no HTML/text alternate versions. This was my solution. My child was an intern for a US Representative. I wrote up what was wrong. My child translated my computerese into English. The US Representative ensured the site code was fixed and accessible. Team work!
- Backwards Compatibility
-
A website attracting global visitors must include backwards compatability in all page code.
- Conclusion
-
A thoughtfully designed website should be accessible to all. Always test your website using older equipment, slower connections, and older browsers. Never trust emulators. Fonts that can be adjusted in size to suit the viewer. Font color that is readable. A simple way to print the information. If your website is difficult or unusable for your potential customer or client, you have wasted your clever coding and complex graphics. Inaccessible sites are impractical.
-
Articles in this Series
Accessible Information Websites - Overview
http://www.cancerlynx.com/accessoverview.html
Accessible Information Websites – Colors and Graphics
http://www.cancerlynx.com/accesscolor.html
Links Of Interest
1. Introduction to Web Accessibility
- https://www.w3.org/WAI/fundamentals/accessibility-intro/
- 2. Americans with Disabilities Act (ADA)
- https://www.ada.gov/
- 3 Website Accessibility Under Title II of the ADA
- https://www.ada.gov/pcatoolkit/chap5toolkit.htm
- 4. The Internet Crisis in Rural America
- https://emergence.fbn.com/the-internet-crisis-in-rural-america
- 5. GSA Information Technology Policy
- https://www.gsa.gov/policy-regulations/policy/information-technology-policy
- 6. GSA Section 508.gov
- https://www.section508.gov
- 7. Lynx is the text web browser
- http://lynx.invisible-island.net
|
|
You are welcome to share this © article with friends, but do not forget to include the author name and web address. Permission needed to use articles on commercial and non commercial websites. Thank you. Search CancerLynx |
|
