Responsive Web Design and Google’s “Mobile-Friendly” Compliance Rating

Google lists the City of Leavenworth website as “Mobile-Friendly” (accessible to smartphones, tablets, and other touch-screen devices), and indexes it as such. “Mobile-Friendly” compliance is based on the use of Responsive Web Design (RWD), which allows access to all website elements without the use of separate, limited mobile-only themes or templates.

Accessibility and Usability

Accessibility Guidelines and Web Standards

Accessibility applies to:

  • Those who are vision, hearing, or motion impaired, and may be required to use alternate web-browsing devices or technologies.
  • Those whose web browsers don’t support flash, javascript, or image rendering.

Design and development of this website adheres to the following:

  • U.S. Federal Government Section 508 (1194.22) Accessibility Guidelines
  • W3C Web Accessibility Initiative (WAI), Web Content Accessibility Guidelines (WCAG 2.0), Priority 2
  • Web Standards Validation as XHTML5, per the W3C Markup Validation Service

Accessibility guidelines and web standards compliance:

  • Allows those who rely on alternate web browsers and assistive technologies to interact with this website.
  • Opens the website to search engines and language translation services.
  • Insures compatibility with modern web browsers such as Internet Explorer, Firefox, Safari, Android, and iOS among others.
  • Provides enhanced compliance with future web standards and technologies.

Note: External links will exit City of Leavenworth.
The City of Leavenworth is not responsible for external website content.

More information about general website accessibility, usability, and standards compliance may be found on the Web Accessibility Initiative website.

Accessibility guidelines and web standards compliance is demonstrated throughout this website as follows:

  • Presentation
  • Content
  • Visual Design
  • Images
  • Links
  • Forms
  • Scripts

Presentation

Page Layout or Design

Tableless page layout is specified using CSS (Cascading Style Sheets). Layout consists of the following design characteristics:

  • Header
  • Left Column
  • Right Column
  • Main content area
  • Footer

When CSS are not applied to a page or are otherwise disabled, the five presentation areas are displayed in linear fashion, in the above order.

Page Templates

Page templates are used throughout the site to provide branding and commonality, and to properly support content areas.

Content

Content is website information conveyed with text, such as headings, titles, and paragraphs.

Semantic Markup

All pages on this site use semantic markup. Hierarchical H1 through H5 tags are used to define content area titles, subtitles, and headings.

Layout Independence/Disable CSS

Content is independent of page layout, and will properly display if CSS are not available or disabled.

The Web Accessibility Initiative website has instructions to disable CSS (render a basic display) in the major web browsers

Visual design

Font Size

A dynamic font-size utility is present at the extreme upper-right of every page. Its use allows a user to increase the font size for just one page, or for all pages until manually returned to the default.

Alternately, the Web Accessibility Initiative website has instructions to change text size in the major web browsers.

Color

Color is used to enhance site appearance, however the site is usable without color. Key elements are identified by other means (such as underlined links).

Color contrast is used throughout the site to define text against the background.

The Web Accessibility Initiative website has instructions to change text color in major web browsers.

Images

Images as Text

Images are not used to display text. Reliance on images as text may look pleasing to the eye, but implied text meaning is useless to search engines, translation services, or alternative web browsers, and breaks independent content display when CSS are disabled.

Image Definition

Images have suitable alt attributes, and display title attributes when necessary to further define the image. Images used for color or layout applications will display a null alt attribute.

Links

Use of Keyboard

Links may be tabbed-through (and identified by link focus) with the keyboard, allowing mouse-free navigation.

Other “skip” or “return” links may be present depending on requirements.

Link Identification

Navigation bar links are identified by placement in a defined navigation bar, and change in color on hover or keyboard focus.

Title links are identified by with the » symbol directly to the right of the title, and change in color on hover or keyboard focus.

Other links are readily identified by an underline that disappears on hover or keyboard focus (replaced by a light-color font/dark-color background combination).

When links aren’t properly identified in context or by surrounding text, title attributes describe the link and/or target in greater detail.

External Links

External links are identified by link title text, and this icon at the end of the link. If an accessibility issue is known, an “Accessibility Note” will precede the link.

The Accessibility Note identifies the link target as an external website, and gives troubleshooting advice when accessibility is limited or compromised. The visitor is given alternative ways to retrieve the information.

Document Links

Document links open .pdf or .doc files in a new window. They’re identified by link title text “Document Link Opens in a New Window”, and this icon at the end of the link.

Forms

Keyboard Navigable

All form controls are appropriately and explicitly labeled, and are keyboard navigable.

Specified Form Alternatives

A contact email address and telephone number is provided as an alternative form of access for online forms.

Scripts

JavaScript

Content of this web site is rendered, in a more basic form, without JavaScript support. Examples include:

  • A visitor’s web browser may not support JavaScript.
  • JavaScript may be turned off in the visitor’s web browser.

We Would Like to Hear From You

Contact us if you have questions about our website’s accessibility, usability, or why a particular feature is present (or not present, as the case may be).

Additional information about general website accessibility, usability, and standards compliance may be found on the Web Accessibility Initiative website.

Close Search Window