HTML Validators and Browser Checking
These Web sites will check Web pages for browser compatibility:
W3C Markup Validation Service - Checks documents for conformance to W3C recommendations and other standards
The Web Standards Project - A grassroots coalition fighting for standards that ensure simple, affordable access to Web technologies for all. A very important site with lots of good information about how to ensure the accessibility of your site now and in the future.
Anybrowser.com - Make your Web site viewable, usable, and informative for the majority of your visitors.
NetMechanic's HTML Toolbox - Check links, HTML code, rate your page load time, and check spelling.
Bobby Online Service - Comprehensive Web accessibility tool designed to help expose and repair barriers to accessibility and encourage compliance with existing accessibility guidelines, including the U.S. Government's Section 508.
Section 508 Standards - Federal usability standards
Browser Share
To make sure your Web site is accessible to as many users as possible, testing on multiple browsers is a good idea, especially since different browsers employ slightly different versions of HTML.
See: W3Schools Browser Statistics
Screen Resolution
According to recent estimates, the average computer screen resolution is 1024 x 768 (51% of users). However, 35% of users still are using a resolution of 800 x 600. So by designing for 1024 x 768, beware that many users will have to scroll to view the entire page. Be cautious in making this decision as it is important to not alienate users.
Also keep in mind that the average browser takes up approximately 30 pixels.
See: W3Schools Browser Statistics
Note: The safe width for printing is 535 to 560 pixels.
More Tips on How to Improve Accessibility
Dive Into Accessibility - 30 days to a more accessible Web site by Mark Pilgrim
Criteria for optimal Web design - designing for usability by Michael L Bernard
W3C's Web Accessibility Initiative - learn more about accessibility in five different areas of work: technology, guidelines, tools, education and outreach, and research and development
useit.com: Jakob Nielsen's Web site - Information on Internet usability
top of page
READABILITY
| Readability should be a high priority on every Web site. According to the Poynter Institute, users are twice as likely to fixate on text rather than images on their initial visit to a site. It actually took two or three visits until users looked at the images. (Source: Poynter.org, 2000) |
|
| Never let design overtake the importance of readability. |
|
|
Use Relative Font Sizes
Relative font sizes allow users to change the size of text, if it is too large or small for them. As a guideline, body text should be 10 or 12 point for most readers.
Use Well-Contrasted Colors
Web pages with high readability use well-contrasted colors. Choose a high contrast between text and its' background for the best readability.
| High Contrast between text and background |
Not so good Contrast between text and background |
Can you read this? |
Where is the aspirin? |
In general, avoid light text on a dark background. This effect has been show to lower readability in numerous studies. Additionally, if a user tries to print a page, the printer will not print the background, but just the white text! Viewers can change this by changing their browser setups, but might not know how. (Source: Readability Of Websites by Dr. Lauren Scharff)
Avoid All Capitals
Avoid putting blocks of text in all capitals. THE LETTERS IN ALL CAPS TEXT END UP HAVING THE SAME BLOCKY SHAPE. In normal text, the letters of each word form a distinct shape and aids in readability. ALL CAPS SLOWS READABILITY. It also may seem as if you are yelling at the user.
Use San Serif Fonts
Use sans serif fonts (Arial, Verdana, Geneva, Palatino) for maximum readability. San serif fonts are those without the fine lines projecting from the main strokes of letters, like Times.
Avoid Excessive Use of Italics
Avoid excessive use of italics. It may look nice but is hard to read when used for large amounts of information. Confine italics use to emphasis only.
Make Text Left Align
Make most text flush left justified. Text that is centered is harder to follow because the reader must search for the start of each line. Text aligned "flush right" can also be hard to read.
Avoid Blinking or Flashing
Blinking or flashing text should not be used. Items that blink quickly become annoying. Ask yourself, "Are you using blinking items for a purpose or just because you can?" How can text be read when it's not there half the time?
Use Cool Colors
The background screen colors recommended by most Web designers are pastels, especially cooler colors (pale gray, blue, green). Green is considered the easiest on the eyes, hence the use of that color in accounting ledgers, for example. White is not considered a good color to use as a background for Web pages as it is highly reflective and causes eyestrain from the amount of light the viewer has to squint through to read screen text, although this point is highly debated. For example, most books have white pages and black text.
top of page
WRITING FOR THE WEB
| Edit and then edit text again. Do not forget that any text on the Internet is in a sense "published." Make sure all text is free of grammar and spelling errors. Edit text as if it were for a term paper. Make drafts, have others read and critique it. Who knows who is printing it out and reading it all over the world? |
|
| Treat writing on the Web, as if you were writing a term paper. |
|
|
Use a Spell Checker
It is always a good idea to spell check before uploading files. Since most HTML editors and simple text editors don't have very good spell checkers, copy and paste any text into Microsoft Word. It will catch most spelling errors and will save you some possible embarrassment.
How to Spell Check text in a HTML document:
- View the page in a Web browser.
- Select the entire page with your mouse, and then select "Copy" from the "Edit" menu.
- Open a simple text editor, such as Notepad, WordPad, or Simple Text.
- Paste the text. This will remove all formatting, images, and tables, leaving just the text.
- Select all the text and copy it.
- Open Microsoft Word, or any text editor with a good spell checker.
- Paste the text into Microsoft Word
- Spell check to find any spelling errors.
Condense and Write Less
Reading text on a computer screen has been found to be 25% slower than reading on paper. A good rule of thumb is to write 50% less text when writing for the Web. (Source: Be Succinct! (Writing for the Web) by Jakob Nielsen, March 15, 1997)
For sentences containing a long series of words or phrases separated by commas, use bulleted or numbered lists instead of paragraphs.
Make Pages Easily Scan-able
Studies show that users scan text on Web sites, since it is uncomfortable to read text on a computer monitor. Therefore, make all text easily scan-able.
- Structure text with two or three levels of headlines. Nested headings also provide access for blind users with screenreaders.
- Use meaningful headings (not funny or cute) that describe what a section is actually about.
- Use highlighting and emphasis to draw the user's attention to important words and phrases.
Use Short Line Lengths
Don't let a single line of text number more than 50 to 60 characters (about 400 pixels) across the page. Long lines of text make readability difficult, because the eye must travel a long distance to find the next line. This slows down reading and comprehension speeds. If all else fails, consider using two columns of. Again, think about print media such as books and magazines as a guideline. (Source: Be Succinct! (Writing for the Web) by Jakob Nielsen, March 15, 1997)
Quote Sources
Just because this is the Internet, doesn't mean that plagarism is allowed. Treat writing on the Web, as a term paper and quote sources.
More on Writing for the Web
What is good hypertext writing? by Jutta Degener
Be Succinct! (Writing for the Web) by Jakob Nielsen, March 15, 1997
top of page
DON'T ALIENATE THE USER
Don't confuse, annoy, or alienate the user. They will leave the Web page if you do!
Tell the User What is Going to Happen
No explanation is needed for a simple text or image link. But, if the link is going to open a new window or large file, make sure the user knows what is going on. Warn them, they will appreciate it!
Keep Links and Information Current
Keep all information and Web links updated. One outdated piece of information makes you and your entire site look unprofessional and not credible.
Link rot describes the process by which links on a Web page become obsolete over time. Since links change address and disappear quite often, check any external links on your site frequently.
Provide Link Summaries
For any external links (links not located within your domain name), provide a description of where you are sending the user. A 2002 study by Baker, Bernard, and Riley found that links that contained summaries were the most usable and preferred. Participants in the study stated that when there is only a link, they felt as if they were "jumping blindly." (Source: Criteria for optimal Web design (designing for usability) by Michael L Bernard)
Avoid "Click Here"
Make text links descriptive. A text link can be so much more helpful to a user than a simple "click here."
Provide a Date and Author
Provide a date and author on each Web page. Sometimes the information is of no use if the date and author are unknown. If the information is time sensitive, put the date and author at the top or bottom of the page.
Don't Underline, Except for Hyperlinks
Don't underline unless it is a hyperlink. Users will perceive underlined words as links. Use italics for book and magazine references.
Provide Text Alternatives For All Non-Text Content.
People who are blind, have low vision, are deaf, or hard of hearing will benefit from providing text descriptions of non-text items. Try turning off the images in your browser and test how your Web site functions. Can you still figure out the meaning of links, charts, animations, and audio files? Offering an alternative to multimedia (such as a transcript or captioning) or simply clarifying "alt" tags will greatly improve the accessibility of your Web site.
Additional Annotations For Screen Readers
Identify words that are in a foreign language so that a speech synthesizer can voice text with the appropriate accent and pronunciation.
| HTML code: |
with a certain <span lang="fr" xml:lang="fr">
je ne sais quoi</span> |
|
| In a browser: |
with a certain je ne sais quoi |
Identify acronyms, so they will be read by a screen reader as the letters of the acronym one at a time instead of attempting to prounounce it as a word.
| HTML code: |
<acronym title="World Wide Web Consortium">W3C</acronym> |
|
| In a browser: |
W3C |
top of page
All information compiled and researched by Katie Kleinman (Miller), last updated October 24, 2006. Sources are given when available. |
