Accessibility/Help Page
WebTools and the standard California state template have been developed in compliance with California Government
Code 11135, located in Section D of the California Government Code. Code 11135
requires that all electronic and information technology developed or purchased by the
State of California Government is accessible to people with disabilities. There
are various types of physical disabilities that impact user interaction on the web.
Vision loss, hearing loss, limited manual dexterity, and cognitive disabilities
are examples, with each having different means by which to access electronic information
effectively. Our goal is to provide a good web experience for all visitors.
In an effort to keep all state websites accessible, the state of California provides web
based Accessibility training for webmasters through the Department of Rehabilitation
and a few computer-lab based Accessibility classes through various departments and
the Department of Technology Services Training Center.
Below you will find a list of some of the technology solutions we have integrated
to make our websites easy to navigate, fast-loading and accessible. To further improve
the ease of use and readability of this site, such as increasing the font size, please
review the section below on how to customize your browser.
Quick Links
What Makes Our Website Accessible?
- Clean, Simple and Consistent
By separating content display from styling attributes we keep the source code uncluttered,
a benefit for both webmasters and assistive technology. Our website uses simple information architecture with
uniform navigation and reliable headings throughout. Content layout and graphical
design are consistent on every page.
- "Skip To:" Menu
The "Skip to" navigation appears at the top of each page.
It allows the user to jump to the content area, accessibility page, or footer, and
skip the navigation and other header elements, which repeat on every page.
- The Navigation
The main navigation, located just below the title banner (California logo and branding
banner), uses lists <li> for navigation items. Lists make
it easier for screen readers to literally read down the list without having to sort
through unnecessary code. Lists also allow the users to use the tab key to move
from link to link.
- Breadcrumb Navigation
Breadcrumbs, located at the top of each page (except for the homepage) and directly
below the main navigation, let you know where you are and where you have been, or
where a particular file resides. Breadcrumbs make it easier to navigate your way
back to the root folder.
- Images With Alternative Text
Photographs and other relevant images on the site are accompanied by alternative
text (the ALT tag.) Alt tags provide a written description of the image, which is
accessible to screen readers, and it is visible when the mouse is placed over the
image. This is also useful for people who have images turned off on their browser,
in which case a description will display where the image used to be.
- Relative Font Sizing
Relative font size can be enlarged using magnification
tools or by changing your browser settings.
- Semantic Code
Descriptive semantic HTML code uses tags to describe the content of a document.
Example: <h1>Semantic Code</h1>. Browsers and computers
understand <h1> as a title. Furthermore, we have used a separate file called
Cascading Style Sheet (CSS) to further stylize and define that title.
NOTE: A non-semantic way to present this information would be: <font size="6"><b>Semantic
Code</b></font>. The browser displays it as a title, large and bold,
but there is nothing to describe it as title in the code. Therefore computer and
assistive technology can not identify it as a title.
- Style Sheets
Cascading Style Sheets (CSS) are used for content layout and graphical elements
(color, font styles, custom titles and subtitles, etc.) Using CSS for styling keeps
our HTML clean, streamlined, easier to maintain, and it downloads faster.
Style sheets can be replaced by the user's own styles.
To turn CSS off, and access the content without any formatting, download and install
the Firefox Web Developer
toolbar or the
Internet Explorer Developer toolbar. With these toolbars turning CSS
on and off is just a click away, plus they offer many other helpful tools. If you
use a different browser, do an Internet search for accessibility or web developer
add-ons for your particular browser.
- Fluid Sizing Display
The width of our pages changes and adapts to the width of your browser. This is
more noticeable if you have a large screen and/or use high resolution for your monitor.
Our website is viewed best at a minimum of 800 x 600 pixels.
- Accessible Via Mouse or Keyboard
You can use the mouse or keyboard to navigate through our information. The tab
key will move the cursor from link to link.
- Access Keys
Access keys are keyboard shortcuts that help you get around the site.
- Use "Alt" + "S" to access
search box
- No Sound, No Images, No Problem
Content is accessible without sound, color, scripts or graphics.
- Improved Search Engine
Google search engine provides more relevant results than our previous
state search application.
Customize Your Browser to Fit Your Needs
Change font size
In most browsers (example: Internet Explorer, Firefox, Netscape) you could change
the font size by following the steps below:
- Open your browser
- Click View button from top menu bar
- Click Text Size
- Select your option.
If your browser uses a different naming convention and you do not see this path,
please check the Help menu on your browser. The Help menu is usually the last option
on the top menu bar and it can often be accessed by pressing the keys "Alt"
+ "H."
In addition, newer browser versions have a magnifying tool that lets you zoom into
a page and display all elements at 150 percent, 200 percent, etc. Look for the magnifying
tool with a "+" character. This icon is typically located at the bottom
of your browser, on the right, or at the top, below the standard menu tools, on
the right. Furthermore, the keyboard shortcut to access this tool is: "Ctrl"
+ "Shift" + "+" to zoom in,
and "Ctrl" + "Shift" + "-"
to zoom out.
Shortcuts
- Keyboard shortcuts:
This is a list of the most common keyboard shortcuts in Firefox, and the equivalents
in Internet Explorer and Opera (from Firefox website.)
- Mouse shortcuts: This
is a list of the most common mouse shortcuts in Firefox, and the equivalents in
Internet Explorer and Opera. The shortcuts are for Windows, but most of the Firefox
shortcuts should work in Linux too (from FireFox website.)
-
Internet Explorer keyboard shortcuts
Add-ons
- Firefox accessibility
extension 1.01 (browser toolbar): The Mozilla/Firefox Accessibility Extension
makes it easier for people with a disability to view and navigate web content. Developers
can use the toolbar to check their structural markup to make sure it matches the
page content.
- List of popular Firefox
add-ons
- Firefox web developer
toolbar: Allows you to turn CSS on and off, disable javascript scripts and images,
view source code, etc.
-
Internet Explorer developer toolbar: Disable all CSS and images, resize window,
etc.
- Making Internet Explorer more accessible:
-
Internet Explorer accessibility options (from Microsoft.com.) - Internet Explorer
offers many accessibility options to help increase readability and to work better
with assistive technology.
The IE link above offers answers to some common questions about accessibility options
in Internet Explorer:
- Can I use the keyboard to surf the web?
- Can I customize the font size, formatting, and screen colors?
- How can I improve the way IE works with my screen reader or voice recognition software?
- How can I improve legibility when printing webpages?
Change CSS
- Below is the step by step on how to change the style sheet file in Internet Explorer.
For other browsers please check the Help menu.
- Click Tools from the top menu bar
- Select Internet Options
- Select the General tab (first tab)
- Click on Accessibility button (bottom section, Appearance)
- Click on checkboxes to ignore all colors and font styles and sizes and/or
- Click on checkbox: "Format documents using my style sheet"
- Browse to your personal style sheet and
- Click OK