Chapter 13

Checklists

This final chapter contains checklists on some helpful topics. The checklists are not intended to be exhaustive and turn you into an expert on each of these topics (as there are entire books devoted to the subjects of these checklists). Rather, the purpose is to show the key points and bring together some of the things you have learned throughout the book. There are two checklists, covering

  • Search engine optimization
  • Accessibility

Search Engine Optimization Checklist

On any successful site, a good proportion of traffic comes from search engines. For people to find you on a search engine, you want to be as near the top of their search results as possible.

The techniques you can use to improve your visibility in search engines are known as search engine optimization, or SEO for short, and can be grouped in two ways:

  • Things you can do on the site (on-page).
  • Things that appear on other people’s sites (off-page).

Focus on the former because you have a lot more control over what appears on the pages of your own site. (Although, mentions will be made of off-page techniques.)

On-Page Techniques

Before you can start optimizing your site for search engines, you need to determine what terms users would type into a search engine to find your site; these are known as keywords and key phrases.

You then need to include these keywords and phrases in the copy for your site. It is important for these words and phrases to appear in four places:

  • Title of the page: This is specified in the <title> element, which you met in Chapter 1, “Structuring Documents for the Web.” It appears at the top of the browser window (above all the toolbars).
  • Description of the page: This is added using the <meta> tag. Although it is not visible on the page, it is often shown on the results pages of search engines.
  • Headings: You met the <h1> to <h6> tags in Chapter 1, which are used to help structure the page, providing headings that describe what will be found in the subsequent sections.
  • Body text: This is the copy that appears in the <body> of the page, for example, in paragraphs, lists, and links.

Search engines rely on text; they cannot see what is in images (other than in the alt text that you provide on images and in filenames). Therefore, if you can incorporate the keywords and phrases that you have identified into these four parts of your pages, your site is more likely to get picked up by search engines.

You can further help the search engines by carefully structuring your documents and using semantic markup. A good way to add structure to your pages is to organize the sections of pages using headings that describe what is in the following paragraphs, lists, images, and forms. Furthermore, elements such as the <address>, <cite>, <code>, and <em> elements help describe the information found inside those elements.

NOTE When working with search engines, you should not try to fool them. (For example, do not try to squeeze extra keywords onto your page by writing them in the same color as the background of the page.) Search engines know a lot of ways in which people try to fool them, and they will penalize you for this kind of behavior. You should also avoid free (or paid) tools that promise to submit your site to hundreds of search engines.

All the preceding information seems straightforward and easy to implement. For many people, the biggest problem about SEO is in identifying the keywords and phrases that they should use in the first place, and that is what this checklist focuses on.

Identifying Keywords and Phrases

When choosing keywords and phrases, in most cases, you must focus not just on attracting volumes of users but also on attracting the right kinds of visitors. For example, if you create a site for a service that is offered locally, such as slate roofing, you probably are not interested in people who

  • Do not live in the same geographic area you work in
  • Have a roof made of tiles or shingles
  • Live in apartment blocks (and do not have roofs to maintain)

Therefore, getting 10,000 people to visit you by searching for “new roof” is not likely to be as valuable to you as getting 100 people who are looking for “slate roof Chicago.”

The page people find in the search engine must have a title and description that relate to the keywords people use when they search, because the titles and descriptions are commonly displayed in search engine results. If users do not think the page looks relevant (by looking at the information the search engine returns), they are less likely to click the link to your page.

So, to determine the search terms you should use on your site, use the steps in the following sections.

Brainstorm for Words People Might Search On

List every individual word you think people might search under when looking for your site.

Select Five to Ten Major Keywords

From your brainstorming list, select 5–10 major keywords, most of which will be single words. (Although you may have a couple phrases, such as “slate roof.”)

Write these 5–10 major keywords in columns because you are going to create lists underneath them.

List Other Keywords and Phrases That Correspond to Your Major Keywords

Now that you have your list of major keywords, you can go back to your brainstorming session and expand upon the 5–10 major keywords you selected. List keywords and phrases that closely correspond to these major keywords. You might find it helpful to look up synonyms of words in your list and also the root words of terms. (For example, you might add “light” to a list that covers lighting.)

You must also consider more generic terms such as “buy,” “download,” “free,” “info,” or “tips,” if you think that potential visitors might be hoping for one of these.

You should look for a total of approximately 20–30 popular phrases that you think your target audience will search for.

NOTE If you have a phrase that contains words such as “the” or “and,” do not skip that word in the phrase. For example, “chicken and mushroom pie” should not become “chicken mushroom pie.”

Look Up Related Words (Not Exact Matches)

Sometimes, people search for terms that are not exactly what your site offers, but they are close enough for your site to be relevant to that visitor. For example, thinking back to the café example, you might add “restaurant” and “coffee shop” to the lists.

If there are some terms that are not exact matches but are relevant and related to the content of your site, add them under the major keywords.

Determine the Popularity of Terms

Use one of the following web-based tools to look up the words and phrases on your list.

These tools both show alternative options for search terms. They also show the number of times people have searched for these words.

When you look at the alternative options for search terms on these sites, you want to look at the top 10 variations to see how many are relevant—if several of the top 10 variations on the term apply to your site, this should be a core term and you should list the top 10 variations with it.

Prioritize the Core Terms

To determine the priority of the core terms that you have found, you need to look at the number of searches each core term received, and compare this number with how closely you think that search meets your target audience. At first this will require you to judge which terms you think might be most relevant to your audience, but as your site grows, you can use analytics software to discover how people are finding your site.

If a search term generates 10,000 visitors, but only 10 percent would be interested in the content of your site, that term is not as valuable as a term that attracts just 5,000 viewers of whom 50 percent would be interested in your content.

Location

If the information, service, or product your site offers is location-dependent, the location should be added to your core terms.

The location you choose to include might not just be the name of the town that your business is based in. If you have customers across the state, county, or region that you work in, you might want to use those names, too. (More people might search on the name of the region than on your specific town.)

Mapping Core Terms to Pages

Now you need to take the core terms (and their variations) and map them to the most relevant page.

Most of the core terms will match to internal pages. You might have more than one page focused on one core term, but you should not try to get more than one core term per page (or one core term plus location).

Homepages

The two or three most general (rather than specific) core terms and the most popular core terms should be prime targets for the homepage.

Whenever you look at your on-page techniques for search engine optimization, you must measure the success of your efforts. This involves not only looking at things such as your page rank in Google but also using analytics software like Google Analytics (http://www.google.com/analytics/) to see which terms people search on frequently to find your site.

Off-Page Techniques

When search engines calculate where to position your site on a list of search results, the major search engines consider the number of sites that link to you.

The search engines look not just for any site that links to you but rather for sites that contain terms similar to those that people enter into search engines to find your site. For example, a search engine would not consider a link from an acupuncture site to a site about slate roofing as having the importance of a link between a building projects site and a site about slate roofing.

Search engines also look at the words that appear between the opening <a> tag and the closing </a> tag. If the text in the link contains keywords, the search engines consider that link more relevant than one that just says something like “Click here.”

If you use analytics software on your site, you can see which sites link to you. You can then use this information to find more sites that cover similar topics to see if they would like to cover you, too.

Accessibility Checklist

Accessibility is about ensuring that as many people as possible can access your web pages. Traditionally, writing on accessibility has focused on people who may have disabilities such as vision impairments (and therefore use screen readers to read the content of websites to them). Others might have poor motor control and find it hard to use a mouse. However, it is increasingly becoming apparent that accessibility techniques apply to people who simply do not use a standard desktop PC to access web pages—for example, those on mobile devices who might not use a mouse or view as many images at the same time.

Entire books have been written on accessible design for the web, but this checklist can help ensure that your site meets basic accessibility requirements, and points you to the relevant part of the book where each of these topics was discussed.

Setting Up Your Document

When creating any new document, you should

  • Use a DOCTYPE declaration to indicate which version of HTML or XHTML you use.
  • Specify the language of your document on the <html> element. For example: 
    <html lang="en">
If the language changes in the middle of the text, specify it with another lang attribute indicating the new language on the element.

Structural and Semantic Markup

In Chapter 1, you met many elements used to mark up text. You should always try to use these elements to add structure and semantic information to the words on the page. Where possible

  • Use the different levels of headings <h1> through <h6> to organize and add structure to your pages.
  • Use elements for the purpose they were created, not just for visual effects. (Use CSS to control presentation of documents.)
  • Use any elements available that describe the purpose or meaning of words in your page; for example, use the <abbr> element when you have an acronym or abbreviation on the page, use the <address> element when you have a mail address to write out, and use the <code> element when you write code.

Links and Navigation

As you saw in Chapter 3, “Links and Navigation,” links are one of the key things that differentiate the web from other media. Your links need to be as accessible as possible so that people can navigate to your site. When you are creating links

  • Ensure that your links stand out on the page, so visitors can easily see where they should be clicking and thus can skim the page for links.
  • Use text or images inside the link that describe what visitors see if they click the link. (Do not just use terms such as “Click here.”) If you use images inside a link, ensure that the alt text describes what users see if they click the link.
  • You can use the title attribute on an <a> element to provide additional information to a visitor.
  • In Chapter 6, “Forms,” you saw how forms can make use of keyboard shortcuts to help visitors navigate the form. Keyboard shortcuts could also be used to link to other parts of pages.
  • Avoid opening links in new windows because this can often confuse users who either do not see the new window opening or end up with more windows open than they wanted.
  • Avoid links and interactive elements, such as cascading drop-down menus with many levels, which require a user to have fine control over the mouse (or other pointing device).

Images and Multimedia

Images, audio, and video (as you saw in Chapter 4, “Images, Audio, and Video”) can bring a page to life. But assistive technologies used by those who have vision impairments cannot describe the content of an image, audio file, or video. Therefore, there is one key rule for all kinds of multimedia content: Always provide a text description for nontext content. To achieve this

  • Provide an alt attribute for every image, and ensure that the text you specify as a value of the alt attribute describes the content of that image to a visitor. The only exception to this rule is when the image does not convey any meaning. (Perhaps it is just a decorative element.) In this case you still use the alt attribute, but you do not give it a value.
  • If the image is complex and the description does not fit nicely into the alt attribute (for example, if you have an information graphic), you can use the longdesc attribute to specify where a longer description is, or use a letter D inside a normal link that points to a longer description.
  • If you have video or audio track, provide a text-based transcript (on either the same page or a link to it).
  • If you use an image map, offer a text-based alternative to the image links.
  • If you provide any animated content, ensure that there is an easy way for the visitor to pause or stop that content.
  • You should also avoid using animated content that could induce a seizure (for example, strobed content). If you do want to include such content, there should be a clear warning before that content, which the user should be forced to read and agree to.

Color

Color is an important part of any website, but color blindness is far more prevalent than most web designers realize. When you are creating a page, color can help add information and organize the page; however,

  • No information on the page should be conveyed by color alone.
  • There must be sufficient contrast between backgrounds and text so that the user can read the content.

Tables

You looked at creating tables in Chapter 5, “Tables.” When you create a table, you should

  • Use <th> elements for all headings.
  • Describe the content of the table using the <caption> element.
  • Use the scope and header, in complex tables.
  • Use scope attributes to describe which cells each heading corresponds to.
  • Not use tables as a way to control the layout of entire pages.

Forms

Chapter 6 introduced forms, which you need to use if you want to collect information from visitors to your site. It then discusses them again in the chapters that cover JavaScript. Some instructions for their use follow:

  • Use the <label> element to indicate the label for each individual type of form element.
  • If a user makes an error, where possible write the error next to the appropriate form field, and give that form element focus, so the user can correct the element.
  • Make use of the <fieldset> and <legend> elements to group form controls into related functionality.
  • Access keys can help users navigate long forms.

Style Sheets

You looked at CSS in Chapters 7 (“Cascading Style Sheets”), 8 (“More Cascading Style Sheets”), and 9 (“Rounded Corners, Animations, Custom Fonts, and More with CSS3”). Using CSS to control the presentation of a document can automatically help improve accessibility of the page because style sheets can be overruled by a user when necessary. But you should still

  • Organize the page so it can still be read without style sheets.
  • Ensure that you have provided enough contrast in colors so that any text can easily be read.
  • Aim to design for device independence, or use CSS to provide alternative style sheets for multiple devices.

JavaScript

JavaScript was covered in Chapters 10 (“Learning JavaScript”), 11 (“Working with jQuery”), and 12 (“jQuery: Beyond the Basics”). Your pages must work even if the user does not have JavaScript enabled. Here are some instructions that help ensure your scripts do not compromise the accessibility of pages:

  • If you need to use JavaScript on your pages (and they will not work without it), you should use the <noscript> element to provide an explanation that the page will not work if the visitor does not have JavaScript enabled.
  • Do not automatically refresh pages. If you provide this feature, allow visitors the option to turn it off.
  • Do not use JavaScript to redirect people from one page to another.
  • Ensure that your scripts can be controlled with accessible/assistive technologies (such as screen readers).

Skip Links

One topic not covered in the main part of this book is the creation of skip links. These are links that enable people who use screen readers (rather than visual browsers) to skip over the common content that appears on every page, such as the header and main navigation. Imagine that you are browsing the web using technology that reads every page to you. You can see that on sites where you viewed many pages, it would not take long to get tired of hearing the same header repeated every time you moved to a new page.

The solution to this problem is a technique generally known as skip links or skip navigation. It simply involves creating links to specific parts of the page, such as the main content, and then hiding those links from users who browse visually using CSS. For example, look at the following links after the opening body element:

<body>
  <div class="skip-links">
    <a href="#content">skip to main content</a>
    <a href="#search">skip to search</a>
    <a href="#footer">skip to footer</a>
  </div>

These links correspond to id attributes of <a> elements in the relevant sections of the page. For example, the first <h1> element might look like this:

<h1><a id="#content">Introduction to Accessibility</h1>

The links at the top of the page are hidden using a CSS rule like this so that visitors using a normal visual browser do not see the skip links:

.skip-links {display:none;}

This makes browsing a site pleasant for those who have the site read to them.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset