Most of the guidance provided on this page is based on the work and standards created by the World Wide Web Consortium or W3C.
| Table of Contents | ||
|---|---|---|
|
Page Title
The page title is one of the first things anyone sees, including anyone using a screen - reader and search engines. Blind users cannot glance quickly at the content of a web page to see what the page is about, so they rely on the page title to give them this information. Web pages without titles waste the time of screen reader users because they force users to navigate through the web page past the main menu and into the content to find out what the page is about.
It is particularly helpful when a visitor has multiple tabs open. In tabbed browsers, the title displays in the tab, making it easy to identify open pages and quickly switch between them.
...
Note on Semantics
Both the title (<title>) and the top heading in the main content (ideally marked with <h1>) serve essentially the same purpose: to give the page a title. With this in mind, it usually makes sense to match the page title and the top heading with identical text, or at least very similar text.
...
If you have questions about headings (<h1>, <h2>, <h3>, <h4>,<h5>, and <h6>) we will talk about how they work and provide structure a little later.
| Multiexcerpt include | ||||||
|---|---|---|---|---|---|---|
|
Code Example
<head><title>Example
...
Title</title></head>
Titles, Search Engine Optimization (SEO), and Accessibility
...
In web circles, there is a lot of debate about which fonts are better than others, but one thing is clear: fonts with cursive, unusual shapes, or artistic features may look pretty, but they are harder to read than standard fonts like Times New Roman or Arial. Avoid them.
...
Serif v. Sans-serif
Serif stands for a stroke or line, and typically these fonts have an embellishment at the top and/or bottom of the letters. Common Serif fonts include Times New Roman, Garamond, Baskerville, Georgia, and Courier New.
This sentence uses Times New Roman
This sentence uses Courier New
Sans means without, and typically these fonts are plainer and without any embellishments. Common sans-serif fonts include Arial, Verdana, and Helvetica.
This sentence uses Arial
This sentence uses Verdana
Which of these two is better for the web is up for debate. These days, it is more common to see sans-serif fonts on the web than Serif. One of the caveats when using sans-serif is that it is the possibility of confusion between upper-case uppercase I (as in Idaho) and lower-case lowercase L (as in linger). Usually, the context prevents this, but if you are mixing letters and numbers it might be better to use a serif font.
...
The uneven spacing between words in fully-justified text can cause "rivers of white space" to run down the page, making reading difficult and, in some cases, impossible. Full justification can also cause words to be bunched too closely together, or stretched in unnatural ways, making it difficult for some users to locate word boundaries.
...
Use the line-height, word-spacing, and letter-spacing style attributes to help your visitors read content more easily. W3C has specific guidelines on text-spacing:
Line height (line spacing) to at least 1.5 times the font size;
Spacing following paragraphs to at least 2 times the font size;
Letter spacing (tracking) to at least 0.12 times the font size;
Word spacing to at least 0.16 times the font size.
This is usually accomplished via Cascading Style Sheets (CSS). WCAG provides some techniques you can use to accomplish this.
...
What follows are guidelines to keep in mind as you choose your color elements for your web pages.
Red/green color blindness is the most common. There is also blue/yellow and complete color blindness.
Avoid putting red or green text on black backgrounds, or black text on red or green backgrounds.
Color contrast should meet a 7:1 standard in order to be easily seen by anyone. Use this WebAIM contrast checker to assist.