Testing Web Browsers

BOE 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

Resources for Testing Browsers
Resources for Testing Applications

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 () 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.