Web Accessibility

State websites must meet both the web accessibility standards in California Government Code 11135, which adopted the Section 508 Technical Standards (SubPart B) issued by the United States Access Board, and the Priority 1 and 2 level checkpoints of the Web Content Accessibility Guidelines 1.0 (WCAG 1.0 "AA" Conformance Level) developed by the World Wide Web Consortium (W3C). In addition, federal courts have already begun to enforce WCAG 2.0 standards. It is highly recommended that state agencies adhere to WCAG 2.0 AA Guidelines and Success Criteria well to avoid legal ramifications, not only for the web but also for web applications, software, and documents. WCAG 2.0 Accessibility is organized under 4 principles:

Perceivable

  • Provide text alternatives for non-text content.
  • Provide captions and other alternatives for multimedia.
  • Create content that can be presented in different ways, including by assistive technologies, without losing meaning.
  • Make it easier for users to see and hear content.

Operable

  • Make all functionality available from a keyboard.
  • Give users enough time to read and use content.
  • Do not use content that causes seizures.
  • Help users navigate and find content.

Understandable

  • Make text readable and understandable.
  • Make content appear and operate in predictable.
  • Help users avoid and correct mistakes.

Robust

  • Maximize compatibility with current and future user tools

These additions increase the level of accessibility and empowerment to your audience to create fully accessible websites and documents for the enjoyment of all.

State Agency Web page developers, designers, programmers, and content providers must become familiar with the standards and guidelines for achieving universal Web accessibility and must apply these principles. Here are some resources for accessibility testing:

Public Access to Programs, Services and Facilities by Persons with Disabilities – Policy and Grievance Procedure

Public Access Policy

It is the policy of the California Department of Tax and Fee Administration (CDTFA) to provide access to its programs, services and facilities to persons with disabilities in accordance with Title II of the Americans with Disabilities Act of 1990 (ADA) (42 U.S.C. §§ 12131-12134), its implementing regulation (28 C.F.R., part 35), and other applicable federal and state laws. Relevant sections of the 28 C.F.R., part 35 are attached.

Documents in alternative formats and other reasonable accommodations may be requested by disabled members of the public or their representatives from CDTFA's ADA Coordinator, Kathleen Neal, California Department of Tax and Fee Administration, P.O. Box 942879, Sacramento, CA 94279-0051, 916-322-0064 (voice) or 711 (TTY). As necessary, the ADA Coordinator will direct appropriate CDTFA staff to assist in complying with CDTFA's public access policy.

This policy addresses public access by persons with disabilities. Inquiries concerning CDTFA's efforts to make its employment practices nondiscriminatory as to persons with disabilities under Title I of the ADA should be directed to CDTFA's Equal Employment Opportunity Office, California Department of Tax and Fee Administration, P.O. Box 942879, Sacramento, CA 94279-0051, 916-322-7639 (voice) or 711 (TTY). Procedures for employment discrimination grievances are found in Administrative Manual section 1635 et seq.

Public Access Grievance Procedure

In the event a request for access to programs, services or facilities cannot be resolved with the assistance of CDTFA's ADA Coordinator, a grievance may be filed with CDTFA's Equal Employment Opportunity Office, California Department of Tax and Fee Administration, P.O. Box 942879, Sacramento, CA 94279-0051, 916-322-7639 (voice) or 711 (TTY).

The steps of CDTFA's ADA Title II grievance procedure are set forth below:

Step 1. The grievance should be filed on the Americans with Disabilities Act (ADA) Title II Grievance Form (CDTFA-351), copy attached. If the grievance is not filed on CDTFA-351, it should nonetheless contain the following information:

  • The name, address, and phone number of the person filing the grievance;
  • The name, address, and phone number of the person alleging the ADA violation, if other than the person filing the grievance;
  • The name of the CDTFA service, program or facility allegedly in violation.
  • A description of the alleged violation and the remedy sought;
  • Information regarding whether a complaint has been filed with the Department of Justice or other federal or state civil rights agency or court.
  • If a complaint has been filed, the name of the agency or court where the complaint was filed, the date the complaint was filed, and the name, address and telephone number of a contact person with the agency with which the complaint was filed.

CDTFA's ADA Coordinator is available to disabled persons requiring assistance to file a grievance. CDTFA's communications regarding the grievance will be in a format accessible to the grievant.

Step 2. Consistent with Administrative Manual section 7600, the grievance will be either responded to or acknowledged within 12 working days of receipt.

Step 3. Within 60 calendar days of receipt, the EEO Office will complete the investigation necessary to determine the validity of the alleged violation. If appropriate, the EEO Office will arrange to meet with the grievant to discuss the matter and attempt to reach an informal resolution of the grievance. Any informal resolution of the grievance shall be documented in the EEO file.

Step 4. If an informal resolution of the grievance is not reached in Step 3, within 75 calendar days of receipt of the grievance, a written determination as to the validity of the complaint and description of the resolution, if appropriate, shall be forwarded to the Legal Division, Litigation Bureau and the EEO Officer for review and approval.

Step 5. CDTFA's determination and resolution shall be communicated to the grievant within 90 calendar days of receipt of the grievance, unless the EEO Officer authorizes additional time for further consideration of the grievance. Any authorized extension of time will be communicated to the grievant.

Step 6. Any request for reconsideration of CDTFA's response to the grievance shall be at the discretion of the Director.

If the grievant is dissatisfied with CDTFA's handling of the grievance at any stage of the process, or does not wish to file a grievance through CDTFA's ADA Title II Grievance Procedure, the grievant may file a complaint directly with the U. S. Department of Justice or other appropriate state or federal agency. Use of CDTFA's grievance procedure is not a prerequisite to the pursuit of other remedies.

The resolution of any specific grievance will require consideration of varying circumstances, such as the specific nature of the disability; the nature of the access to services, programs, or facilities at issue, the essential eligibility requirements for participation; the health and safety of others; and the degree to which an accommodation would constitute a fundamental alteration to the program, service, or facility, or cause an undue hardship to CDTFA. Accordingly, the resolution by CDTFA of any one grievance does not constitute a precedent upon which CDTFA is bound or upon which other complaining parties may rely.

File Maintenance

The EEO Office shall maintain ADA Title II grievance files for a period of three years.

Sources: WebAIM and Department of Rehabilitation (DoR)

What to Test

There are many sophisticated software tools that can be used to check for web accessibility. Any accessibility testing must be viewed as a process that combines automated software tools with human judgement. Below are checkpoints to ensure that what you are developing meets established accessibility standards.

  1. Use a Checklist:
    1. WebAIM WCAG 2.0 Checklist (pdf)
    2. WebAIM Section 508 Checklist (pdf)
  2. Test with Web Accessibility Checker, like WAVE – an evaluation tool that embeds inline accessibility feedback into your web content.
    1. Fix all "red" accessibility errors.
    2. Though not required other alert icons and warning indicators indicate other elements that should be reviewed and author should make every attempt to fix.
  3. Check Keyboard Accessibility
    1. Navigate the site using only the keyboard (Tab, Shift + Tab, Enter, etc.). Is all functionality available?
    2. Is a "skip navigation" link available? Activate the skip link and hit "Tab" again to ensure it functions correctly.
    3. Make sure the navigation order is logical.
    4. Is a visible keyboard focus indicator/outline present?
    5. Test dialog boxes that pop open. You should be able to navigate and close these using a keyboard. Esc should also close these boxes.
  4. Evaluate Form Accessibility and Usability
    1. Click on the form label. If the field gains focus, it is properly labeled.
    2. If a label is not visible, check for a hidden label or descriptive title attribute.
    3. Ensure that you can complete all forms with a keyboard.
    4. Are error recovery mechanisms present and easy-to-use?
    5. In WAVE, use the Code panel see the <label> for and <input> id values.
  5. Disable Styles and Linearize Tables
    1. Disable styles and remove tables so the visual reading order matches the code order. To do this in WAVE, select the "No Styles" view.
      1. Ensure the reading order is logical.
      2. Ensure content is understandable and usable.
  6. Check Images
    1. Ensure alternative text conveys the content and function of the image. It should be succinct, accurate, and useful.
    2. Using the Web Developer toolbar or WAVE, ensure the alternative text is equivalent and that it makes sense in context. In WAVE, alternative text is displayed next to the image.
    3. Look for images of text where the same presentation can be accomplished using true text.
  7. Verify Color and Contrast
    1. Contrast: WebAIM, WAVE or Snook
      1. WCAG 2.0 level requires a contrast ratio of 4.5:1 for normal text (14 point and bold or larger) and 3:1 for large text (18 point or larger).
      2. If links are not underlined, there must be 3:1 contrast between link text and body text and all text must still meet other contrast requirements. There also must be an additional change (e.g., underlining) when it is hovered over or receives keyboard focus.
    2. Ensure color is not used as the sole method of conveying content or distinguishing visual elements.
    3. Print on a grayscale printer to test contrast and color.
  8. Test Content Scaling
    1. Enlarge the font in your web browser to ~150%. Note that WCAG 2.0 requires 200%. Is the page readable and usable? Is horizontal scrolling minimized?
      1. Safari: View > Zoom Text Only
      2. Firefox: View > Zoom > Zoom Text Only
      3. Internet Explorer: View > Text Size
    2. Zoom the web page in your browser (enlarge fonts and images). Is text in images readable?
    3. See additional Browser Usability Features
  9. Check Headings
    1. Ensure that the main heading on the page is an <h1>.
    2. Look for skipped levels (e.g., <h2> to <h4>).
    3. In WAVE: Headings can also be viewed in the Outline tab in sidebar.
  10. Test with a Screen Reader
    1. Focus on navigation, forms, and dynamic content.
    2. Freedom Scientific JAWS 14+, AiSquared Window-Eyes 8.0+, NonVisual Desktop Access 15.2+, Apple VoiceOver (Built-in screen reader for OS-X), and/or Nuance Dragon NaturallySpeaking 12.5+
    3. See additional Testing Applications
  11. Validate HTML and CSS
    1. HTML
      1. W3C HTML, XHTML Validation Service
    2. CSS
      1. W3C CSS Validation Service

Other Issues

  1. Check videos and other multimedia for captions and transcripts.
  2. Ensure the page <title> is unique and descriptive.
    1. Look for links with generic link text like "click here."
    2. Verify that the page language is specified (e.g., <html lang="en">).
    3. Make sure instructions provided for understanding and operating content do not rely on shape, size, or location.
    4. Ensure that any content or media that animates or auto-updates can be paused and stopped by the user.
    5. Look for strobing content that could cause seizures.

CDTFA supports the latest versions of Internet Explorer, Firefox, Chrome and Safari, and one version behind. For example, as of July 19, 2016, we are supporting:

  • Internet Explorer v11 and 10
  • Firefox v47 and 46
  • Chrome v51 and 50
  • Safari for OS X, v10 and 9

Sources: WebAIM and Department of Rehabilitation (DoR)

The State of California (the State) websites strive to be a model of accessibility that meets the access needs of any site visitor. The State has implemented the strict guidelines set forth by the World Wide Web Consortium (W3C) and the US Department of Justice (DOJ). The websites meets most of the W3C Web Content Accessibility Guidelines 2.0 (WCAG 2.0 – AA Guidelines and Success Criteria) and all of the Section 508, Technical Standards (Subpart B).

One of the pillars of accessible web design is using defaults, and certain design elements that can be adjusted by the end user. This kind of design permits visitors to adjust font size, contrast, and customize other elements to meet their particular viewing needs. Information on some of our special access features, and how to work with custom settings, are described below.

  1. Contrast
  2. Fonts
  3. Keyboard Shortcuts for:

Contrast

High contrast is necessary for many users. The State's websites uses style sheets and some of the best contrast combinations, black on white, white on dark green, or blue on white. However, some users can see better using high contrast reverse types, such as white on black, or different colors. Below are guidelines for some common web browsers on how the user can customize their own web browser to better view all web pages.


Internet Explorer

Select the "Tools" menu. Select "Internet Options". Under the "General" tab, select "Accessibility". Place a check mark in the box to "Ignore colors specified on Web pages" and select the "OK" box. This will return you to the "General" tab. Select the "Colors" box and un-check the "use Windows colors" box. Use the "Text", "Background", "Unvisited Links", and "Visited Links" boxes to select the colors desired (example: white text and black background). Select the "OK" box and then the "OK" box on the "General" tab and the colors should change on the browser.


Firefox

Select the "Tools" menu. Select "Options". Select the "Content" tab. Select "Colors". Select colors desired for "Text", "Background", "Unvisited Links", and "Visited Links" (example: white text and black background) and uncheck "Allow pages to choose their own colors, instead of my selections above". Select the "OK" box, and then the "OK" box again. The colors should change on the browser.


Google Chrome

High Contrast and Custom Color Support – https://sites.google.com/a/chromium.org/dev/user-experience/low-vision-support

There are a number of steps you can take to configure Chrome to run with custom contrast and colors:

  1. Install a Chrome Extension which allows you to specify your own custom color combinations, for instance the Change Colors extension.
    • Quick page action to apply/remove styling overrides on a per page, per domain or global basis (overriding Web page colors)
    • Optional background, text, links and visited links color configuration
    • Option for showing/hiding images
    • Option for showing/hiding Flash objects
  2. Use a Chrome Theme for some control of the color scheme of the Chrome user interface. As an example, the BitNova Dark theme offers white text on a black background. The Chrome Extensions Gallery offers many other themes, with a variety of color combinations.

Safari

OS X Yosemite: Display pane of Accessibility preferences – https://support.apple.com/kb/PH18394?locale=en_US

Make items on the screen easier to see and the display easier to read.

To open this pane, choose Apple menu > System Preferences, select Accessibility, then select Display.

Invert colors
Invert the colors on your display. For example, text appears in white on a black background.
Use grayscale
Remove colors from the screen.
Differentiate without color
Use shapes, in addition to or instead of color, to convey status or information.
Increase contrast
Increase the contrast of items on the screen (such as borders around buttons or boxes) without changing the contrast of the screen itself.
Reduce transparency
Replace the transparent effect used on some backgrounds in OS X with a darker background, to improve contrast and readability.
Display contrast
Increase the screen contrast.
Cursor size
Increase the size of the pointer.

To quickly set some display options, press Option-Command-F5.

You can enable keyboard shortcuts for inverting colors and changing the contrast in the Accessibility section of the Shortcuts pane of Keyboard preferences. To open the pane, choose Apple menu > System Preferences, select Keyboard, then select Shortcuts.


Fonts

The fonts used on this site are a default size, which allows you to make adjustments according to your preference. The following is the easiest way to change the font size for some common web browsers.


Internet Explorer

Select the "View" menu. Highlight "Text Size". Default setting will be medium. By changing the settings between largest and smallest; the text displayed on the page will be modified.


Firefox

Select the "Tools" menu. Select "Options". Select the "Content" tab. Change the "Default Font" and "Size" values (for more advanced options, select "Advanced" next to the "Size" value). Select the "OK" box, and the fonts should change on the browser.


Google Chrome

Change text, image, and video sizes (zoom) – https://support.google.com/chrome/answer/96810

You can adjust the size of everything on the webpages you visit, including text, images, and videos.

  1. Select the Chrome menu (Burger Menu) on the browser toolbar
  2. Select "Settings."
  3. Select "Show advanced settings."
  4. In the "Web Content" section, use the "Page zoom" drop-down menu to adjust the zoom.

How to set zoom on your current page

Use the zoom options in the Chrome menu to make everything on a webpage larger or smaller.

  1. Select the Chrome menu (Burger Menu) on the browser toolbar.
  2. Find the "Zoom" section in the menu and choose one of the following options:
    • Select the plus sign (+) to make everything on the page larger. You can also use the keyboard shortcuts "Ctrl" and "+" (Windows, Linux, and Chrome OS), or the Command Key (⌘) and "+" on a Mac.
    • Select the minus sign (-) to make everything smaller. You can also use the keyboard shortcuts "Ctrl" and "" (Windows, Linux, and Chrome OS), or the Command Key(⌘) and "" on a Mac.
    • To go into full-screen mode, use the keyboard shortcuts F11 (Windows and Linux), or Command Key (⌘) – Shift-F on a Mac. If you’re using Chrome OS, you can also press the Maximize Window key (max window key) at the top of your keyboard.

How to set the font size for all webpages

You can adjust the size of text on webpages.

  1. Select the Chrome menu (Burger Menu) on the browser toolbar.
  2. Select "Settings."
  3. Select "Show advanced settings."
  4. In the "Web Content" section, use the "Font size" drop-down menu to make adjustments.

Some websites prevent the browser from changing just text size. For those sites, Chrome won't be able to adjust the font size.


Safari

Zoom in on webpages – http://help.apple.com/safari/mac/8.0/#/ibrw1068

You can make text and images larger so they're easier to view.

  • Make the webpage content larger: Choose View > Zoom In, press the Command Key (⌘) – Plus Sign (+), or pinch open on your trackpad. To make only text larger, choose View > Zoom Text Only before you zoom in.
  • To set a minimum font size for webpages: Choose Safari > Preferences, select Advanced, then select "Never use font sizes smaller than." Select the pop-up menu and choose the minimum font size you want.
  • Expand to full-screen view: Select the green full-screen button (green dot) in the top-left corner of the browser window, or press Control-Command Key (⌘)-F. To return to standard view, move the pointer to the top-left corner of the screen, then click the green full-screen button again, or press Control-Command Key (⌘)-F.

Another way to change the font size is with Cascading Style Sheets (CSS). However, this may require a programming class in CSS for the more intrepid individual.

Sources: WebAIM and Department of Rehabilitation (DoR)

Manual accessibility testing techniques can vary widely. Manual testing has the benefit of being highly accurate, provided the person doing the manual testing is sufficiently qualified. Manual testing allows finding accessibility problems which cannot be found in the automatic testing. DoR estimates that automatic tools can only find 25% to 30% of accessibility issues. Only a human can tell if the site is easy to use and navigate for a person who is using any assistive technology.

The resources provided below are for informational purposes only; the State of California does not specifically endorse the use of any particular site or tool over another.

Operating systems compatible with listed resources

Most used internet browsers, compatible with listed resources

Screen Readers

Voice Recognition Software

Magnification Software