Get Help

Online: Request Help
Phone: (707) 826-4357 • Hours
Email: help@humboldt.edu
Walk-In: Library 101 • Hours
Reset HSU Password
System Status

Google Apps :: Sites and Blogger :: Accessibility Best Practices

Printer-friendly version

Web accessibility is the practice of making websites usable by people of all abilities and disabilities. Any instructional material being posted must adhere to the same web accessibility guidelines that are in place for faculty sites on HSU's web server.  It's a good practice for all of your web sites to meet these guidelines!

While personal sites do not require compliance with web accessibility guidelines, a few brief steps will help expand the potential audience of your web site.

Accessible sites include the use of alt text, section headings, appropriate use of tables, and appropriate text formatting (using <strong> and <em> instead of <b> or <i>).  We've provided information about each of these below. 


Alternative Text (alt text)

Adding Alternative Text to Google Sites is a breeze.

1. Log into Google Sites, click Insert, and select Image.

Uploading images

2. Either upload or link to the graphic you desire. You can add ALT text for your image.

Adding Alt text to images

 Users with visual impairments who are using a screen reader will hear the alternative text in place of the image.

Alternative Text: Related Links


Section Headings

Section headings denote text size at different levels. <h1> delimits the highest-level heading, <h2> the next level down (sub-section), <h3> for a level below that, and so on to <h6>. Most visual browsers show headings as large bold text by default. Heading elements are not intended merely for creating large or bold text — they describe the document’s structure and organization. 

Instead of increasing the font size of text you wish to emphasize, it's good practice to use headings instead. With proper section headings, Assistive Technology User Agents such as talking browsers used by users with visual impairments users can use document headings to offer their users a navigation mechanism. Here's how this is accomplished:

1. Click Edit Page in the top right-hand corner.

2. Select the text you wish to apply a section heading to, click Format, and select your choice of heading.

Applying headings to text

3. Save your changes to the page.

Section Headings: Related Links


HTML Tables

The table element is a means of presenting data, for example timetables, tabular information about weights, measures, prices, etc. Best practices involve using the caption tag for the table title and the the summary tag for table purpose.

1. Click Edit Page in the top right-hand corner.

2. Go to Tables, select Table > Insert Table, and choose your table's amount of cells. In the example below, the Google Sites user is generating a 3x2 table.

Insert Table

3. As Google Sites does not have any built-in functionality to provide caption text to tables, you will need to edit the HTML code. This is accomplished by clicking Edit HTML button at the right in the web page layout menu

Edit HTML on Google Sites

4. In this example, the Google Sites user has added a table summary and a caption to their table. The table summary is not displayed on the screen by graphical browers, but can be outputted by screen readers and Braille displays to assist users of these devices to understand the table. The caption will be placed in the center immediately above the table.

Adding captions and summary to HTML table

5. Click the Update button at the bottom of the HTML edit window, then save the changes to the page. The table is now properly captioned and has a summary for screen readers.

Caption for Table

HTML Tables: Related Links

Additional Accessibilty Best Practices

Depending on the layout of your site, you may also want to use methods to make your site friendlier to screen readers, such as skipping over navigation links and using the tags STRONG and EM (emphasis) instead of the bold and italic tags.

Additional Accessibilty Best Practices: Related Links