Webstandards banner

Forms, Graphics, Charts, File Size & Linking

Forms

HTML Forms

HTML forms are easy to maintain and make accessible. Therefore, HTML forms are preferred over PDF fillable forms in most circumstances.

However, HTML online forms can pose a unique security risk if not coded properly. For that reason, all HTML forms will be created and maintained by the Web Team. Please submit a Web Services Request to ISD-ServiceDesk.

PDF Forms

PDF forms are preferred only if the expectation is for the completed form to be printed and delivered by fax or U.S. Mail.

Complex fillable forms need extensive work to be made accessible

Graphics

Image File Size

Once your graphics have been created, you will need to use software tools to reduce the size of graphics to the screen resolution (72 pixels per inch) to improve download speed and improve picture quality for the screen.

Extremely detailed graphics (particularly photographs) should be optimized using a product such as Photoshop or Fireworks. This type of software will allow you to modify the display size as well as reduce the file size of the graphic to improve download times.

Graphics need to be sized prior to inserting into a web page. Do not resize your graphics by changing the width and height attributes of the image tag. Resizing your images in this way does not reduce the file size and will blur or pixilate the image online and present problems when the page is printed.

If you insert images into documents that have not been properly sized it might also cause your file to be several Mebabytes instead of a few kilobytes.

Alt Text/Tags

Make sure each image has an alternate (alt) text included within the image tag, limit the alt text to five words separated by commas if needed.

Linking to Images

There may be instances when you would want to link a thumbnail image to a larger representative image, or link to a large image that could be printed.

Do not link directly to an image file. All images should be placed in an HTML page even if the larger image is the only purpose to the page.

Graphs and Charts

Below is an example of an accessible image. In this case it is a pie chart that requires a text explanation. Note the "D-link" immediately at the corner of the chart:

sample chart

d

Source Code Example

alt="Percent of Employment, by Industry "
width="350 " height="235"
longdesc="longdesc_chart.htm" />

title="Link to full description of image
entitled, "Percent of Employment,
by Industry">

Explanation

When the "alt" attribute cannot adequately describe the function or purpose of the image, Web Accessibility Initiative (WAI) Guidelines state that content authors must provide descriptive text using the "longdesc" attribute.

At present, however, the "longdesc" attribute is not widely supported by most browsers. Until it is, content authors must add "d-links" to all documents employing "longdesc" to ensure that visitors have access to the description. A description link or "d-link" inserts a small image, often invisible, providing a link to a more complete explanation or description. Because it is a true link, it will be read by screen readers and users can tab to it.

The advantage of including "longdesc" in current web documents is that when newer browsers deprecate d-links, the "longdesc" attribute will ensure the description remains accessible.

The linking HTML text file should:

  1. Have a name that includes the name of the the image it explains, in this case "longdesc_chart.htm".
  2. Open in the same window (as opposed to a "blank" window).
  3. Have content that is as simple and as free of HTML formatting as possible.
  4. Provide a simple linking back to the previous page.
  5. Example

Use both longdesc attributes and d-links on images that require a long description.

See HTML Techniques for Web Content Accessibility Guidelines 1.0 for more information.

Links to External Sites and Opening New Windows

The County of Sonoma is in the process of developing a policy on linking to external sites.

It is best practices to open all links and documents in the same window. This practice is more accessible and usable than opening a new window without the visitor´s permission. This standard of opening within the same window includes linking to PDFs.

But it is a good idea to inform the user where the link will go by using the anchor title. Examples:

  • <a href="http://www.external-website.com" title="External Link">
  • <a href="example.pdf" title="PDF Document">

Tool

FILEminimizer Suite

Compress PowerPoint, Word, Excel, PDF files, images and photos. Optimize these files by 50-90% without zipping. Including integration with Microsoft Outlook and Lotus Notes.

Contact Information

Web Services Team
Information Systems Department
County of Sonoma
Address
2615 Paulin Drive
Santa Rosa, CA 95403
38.466385, -122.722706

Related Policies

Official Use of Social Media Sites
Administrative Policy Manual, 9-1

Website Accessibility Policy
Administrative Policy Manual, 9-3

Accessibility Resources

Web Accessibility
Introduction to Web Accessibility

Converting
Converting Documents to PDF's

Word
Creating Accessible Word Documents

PowerPoint
PowerPoint Accessibility

Regulatory Compliance Resources