Inadequate page titles
- Page titles should effectively describe the page's content
- The title should change across pages, so the user can quickly distinguish one page from another
- Unique and identifying information should come first in a title
- Bad examples:
- Welcome to home page of Acme Web Solutions, Inc.
- Acme Web Solutions, Inc. | About Us
- Acme Web Solutions, Inc. | Contact Us
- Acme Web Solutions, Inc. | History
- Good examples:
- Acme Web Solutions home page
- About Acme Web Solutions
- Contact Acme Web Solutions
- History of Acme Web Solution
Image text alternatives ("alt text")
- Add "alt text" for any media file (photographs, charts, etc.)
- The text should convey the same meaning as the image; not necessarily just describing what it looks like.
- Decorative images (horizontal line breaks, borders, etc.) don't need alt text
Headings
- All pages should contain at least one heading element
- The heading hierarchy is meaningful. The content should start with "h1" — which is usually similar to the page title — and should not skip levels
Color contrast
Web pages need a minimum contrast by default: a contrast ratio of at least 4.5:1 for normal-size text (14pt normal or smaller) or 3:1 for large text (14pt and bold or larger, or 18pt normal and larger)
There are basically three ways to check contrast, each with strengths and weaknesses.
- Table with contrast ratio - The tool displays a table with all the possible contrast ratios in the web page. With some tools, you can click in the table and it will show where that color combination is on the web page.
- Pro: Comprehensive.
- Con: Can be inaccurate, specifically, it can show some color combinations that are not really on the displayed page.
- Eye-dropper to select colors - The tool lets you select a text color and a background color, then it shows you the contrast ratio.
- Pro: Accurate.
- Con: Can only test one item at a time. Need to be able to see and use a mouse.
- Turn off color. The tool shows the page in grayscale.
- Pro: Gives you direct experience.
- Con: Imprecise, does not provide contrast ratio value.
Resize Text
- Text on a web page should scale as a user zooms in and out. Make sure the text doesn't disappear, get cut off on the edge of a page, or get covered up by other elements.
- All buttons, form fields, and other controls should be visible and usable at any size.
- A user should not have to scroll horizontally in order to read sentences or "blocks of text". As the text size increases, all the text in a given sentence should be visible. It is acceptable to have to scroll horizontally to get to different sections of a page. (The same principle applies for top-to-bottom languages.)
Keyboard access and visual focus
- All elements, such as links, form fields, buttons, and media player controls, should be accessible by just pressing the "tab" key. (A common problem is that you cannot tab to media player controls.) Chrome keyboard shortcuts.
- Check that you can tab away from all elements that you can tab into. (A common problem is the keyboard focus gets caught in media controls and you cannot get out; it's called the "keyboard trap".)
- Check that the tab order follows the logical reading order (e.g., for left-to-right languages: top to bottom, left to right) in sequence.
- As elements are selected with the tab key, there should be an obvious visual cue to tell which element has focus, e.g., a focused link would have an outline or be highlighted in a certain color.
- Check that you can do everything with the keyboard; that is, you don't need the mouse to activate actions, options, visible changes, and other functionality. (A common problem is that some functionality is available only with mouse hover, and is not available with keyboard focus.)
- Drop-down lists: Check that after you tab into a drop-down list, you can use the arrow keys to move through all the options without triggering an action. (A common problem for drop-downs used for navigation is that as soon as you arrow down, it automatically selects the first item in the list and goes to a new page — you cannot get to other items in the list.)
Write meaningful text and link text
The text your visitor sees should immediately tell users if they’ve arrived at the right place, and helps them do what they need to do.
- Be concise - If you can say it in fewer words, do so. One idea per paragraph.
- Put the most important information first - Users and search engines scan to find the information they need and move on.
- Make bulleted lists - Improves scannability. If your sentence has more than two commas, it may be a list.
- Avoid acronyms - They’re confusing and/or meaningless to outside users. If you must use an acronym on the page, be sure to use its full name on first reference and include the acronym in parentheses. e.g. Climate and Space Sciences and Engineering (CLaSP).
Hyperlink text should provide some description about the link itself. e.g. Michigan Engineering website, NOT Click Here.