Wabasha County Fair Website Accessibility Audit

Craig Orcutt Orcadia Labs, LLC March 17, 2016 11:30am

This document serves as the accessibility review for the website:

wabashacountyfair.org History When

Who

What

16.03.14.1600 Craig Orcutt Initial Draft - Accessibility Review #1 Orcadia Labs, LLC 16.03.15.1000 Craig Orcutt WCAG2 conformance testing Orcadia Labs, LLC 16.03.16.400

Craig Orcutt WCAG2 conformance testing and Orcadia Labs, LLC awarded AA by Google Chrome (source code only)

16.03.16.1600 Craig Orcutt WCAG2 accessibility review 1.1, 1.2 Orcadia Labs, LLC 16.03.17.500

Craig Orcutt WCAG2 accessibility review 1.3+ Orcadia Labs, LLC WCAG2 Level A certification

Accessibility Review #1 The following specific points cover each of the WCAG guidelines with the Orcadia Labs, LLC position on WCAG conformance of the wabashacountyfair.org website. 1.1.1 Non-text Content All images have alt text. The site has no time-based, test, sensory, CAPTCHA elements. 1.2.*

Alternatives for time-based media wabashacountyfair.org does not include any time-based media, audio or video, and so does not have need for alternatives, captions, text descriptions, sign language interpretations or extended audio.

1.3.*

Present content in different ways without losing information or structure The goal for the wabashacountyfair.org site is to provide an accessible semantic view to all users at all times, thus there is the single presentation.

1.4.*

Make it easier for users to see and hear content including separating foreground from background

1.4.1

Use of Color The site does not use color to convey information.

1.4.2

Audio Control The site does not use audio to convey information.

1.4.3

Minimum text contrast The site does have text contrast issues. For more information, see "Accessibility Challenges and Changes" #1, #2.

1.4.4

Resize text The site does have text resizing issues. For more information see "Accessibility Challenges and Changes" #6.

1.4.5

Images of Text The site does not employ any image of text. In all cases, text is text.

1.4.6

Enhanced text contrast The site does have text contrast issues. For more information, see "Accessibility Challenges and Changes" #1, #2.

1.4.7

Low or No Background Audio The site does not employ any audio.

1.4.8

Visual Presentation The site does have presentation issues. For more information, see "Accessibility Challenges and Changes" #7.

1.4.9

Images of Text The site does not employ any images of text.

2.1.*

Keyboard Accessibility All functionality of the site is operable through a keyboard interface without any reaction time requirements.

2.2.*

Timing

The site does not have any timing-sensitive functions. The user could be fast or not. 2.3.*

Seizures The site does not flash any content. It has no rapid color fluctuations.

2.4.*

Navigation The site follows the SPA pattern. As such, it does not employ blocks of content on multiple pages. In following this pattern, only small differences in pages are saved for each 'page.' Each sub-page is titled and employs a standard focus order. Each link, heading and label on each sub-page states its purpose within the context of the sub-page. The site does not support sets of sub-pages where navigation through sub-pages is meaningful within a set of them.

3.1.*

Content is Readable The language for each page, sub-page and sub-page part is specified (English.) The text does not contain any unusual words or abbreviations or pronunciations. It also does not require a more than elementary reading level.

3.2.*

Content is Predictable Focus, context, navigation and identification of the site site sub-pages are predictable and invariant. Changes in content occur only upon user requests (link clicks) and are completely consistent with standard navigation norms.

3.3.*

Input Assistance The sole form on the site is the contact form. The only input check is that some fields are required. These fields are clearly marked. The error mechanism is that built into the browser for required fields and is, as such, beyond the scope of the assistance mechanisms provided by the site. Otherwise, all labels and instructions are clear and unambiguous. Context sensitive help error prevention are not required.

4.1.*

Compatibility All site pages and sub-pages have syntactically-conformant HTML 5.0 and each tag in these files has a corresponding, and encapsulating end tag. Each element and form control has specifically-declared and semantically-meaningful attributes.

Accessibility Challenges and Changes The following specific notes detail each of the concerns, and subsequent alterations for the WCAG Accessibility Review #1 for wabashacountyfair.org by Orcadia Labs, LLC.

1) WCAG2 AA1.4.3 AAA1.4.6 The text-to-background contrast ratio of the site header "Wabasha County Fair" (#000) over the solid color, dark green, background (#344c37) is 2.23:1, which is less than 4.5:1 (AA) or 7:1 (AAA) for small text, and so is insufficient. Required contrast ratios for large text are 3:1 (AA) and 4.5:1 (AAA.) While the foreground text is black (#000,) the background colors are in the tent graphic which are white (#FFF) and light green (#55A064,) with contrast ratios 21:1 and 6.6:1 respectively. These contrast ratios are perfectly sufficient for large text, while wabashacountyfair.org is displayed in a large window on a large monitor, but the site header, displayed on a small screen (cell phone,) does not logically qualify for "large-scale" text. Recommendation: change the tent graphic so that the light-green color supports acceptable contrast ratio. A value of #5aa569 is still light green and would be sufficiently light to achieve a contrast ratio of 7.02:1, which would not prohibit the site from achieving WCAG2 AAA. Conformance: WCAG 2.0 AA 2) WCAG2 AA1.4.3 AAA1.4.6 The text-to-background contrast ratio, in the contact dialog, of the "required asterisk" (#F00) over the solid color, light green, background (#98FFA7) is 3.27:1, which is less than 4.5:1 (AA) or 7:1 (AAA) for small text, and so is insufficient. While the "required asterisk" should remain red to maintain that commonly accepted semantic, the goal would be to increase the contrast ratio between the "required asterisk" and the background color. Changing the "required asterisk" red to #830000 (darker, but still red) achieved a contrast ratio of 8.75:1, which is sufficient for achieving AAA conformance. Conformance: WCAG 2.0 AAA 3) WCAG2 2.4.4 The purpose of each link should be clear from the link text. This notice concerns the menu page. In this case, the links "2007" - "2015" have the name of the year for which to view "Fairboard" → "Past Meetings" information. It is not very, programmatically obvious to the observer that "2007" means "View Meetings from 2007" After changes, the above-mentioned links now state "2007 Meetings" underneath a "Fairboard" → "View Past Meetings" header, which makes each menu link action programmatically obvious. Conformance: WCAG 2.0 AAA 4) ARIA: These elements are focusable but either invisible or obscured by another element This comment refers to the each of the four upper-right icons menu, facebook, email and printer.

Recommendation: I will fine tune the Wabasha County Fair application with additional semantic information and keyboard and mouse interaction once I start implementing the ARIA specification for the site. 5) WCAG2 2.4.4 The purpose of each link should be clear from the link text This notification comes up for each of the Fairboard Meetings pages: 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015. Each year has links for both the previous and next years, for a total of 18 links. For instance, the page for 2010 has links for both years 2009 and 2011. The change requires the modification of each of the 18 links to include the action verb. For instance, "< 2010" became "< View 2010 Meetings". Conformance: WCAG 2.0 AAA 6) WCAG2 1.4.4 Text can be resized (without assistive technology) up to 200 percent without loss of content or functionality. Some text cannot be resized given the resize/zoom controls offered in some browsers. The header text "Wabasha County Fair" text is not zoomable, Recommendation: some user tools (browsers) offer zoom control and some do not. Provide a zoom control on the website so that text may be zoomed, unzoomed and normalized. Note that this zoom control will affect just text size, that a browser-support zoom control magnifies entire sites, text and non-text. Recommendation: all CSS that refers to font size or size of text should be expressed as percentages or in ems. This way, all text can be resized using the site zoom control as well as the browser zoom control. Ensure that no loss of content or functionality occurs. Conformance: WCAG 2.0 A 7) WCAG2 1.4.8 Presentation of text The site is already AAA compliant for text justification, text width and horizontal scrolling (through responsive reaction to the window width.) However, it does still violate some criteria concerning presentation of text: ◦ selectable foreground and background text colors. Recommendation: In some, though not all, cases, foreground and background text colors are explicit for the site and should rather use the user's text color specifications instead. Recommendation: The header text "Wabasha County Fair" over the green-and-white tent graphic explicitly specifies the user text foreground color (default black) over a transparent background color (so defaults to the tent graphic, itself.) If the user specifies a custom foreground text color, the header text will use it, but if the user specifies a custom background text color, the header text will not use it. It will. ◦ sufficient leading and paragraph spacing Recommendation: for all text, explicitly specify line-height at 150%.

Results of Accessibility Review Pursuant to the WCAG2.0 specification, the website wabashacountyfair.org meets •

all of the level A criteria,

•

most of the level AA criteria

•

some of the level AAA criteria.

The site is certified, at the time specified on the title page of this document,

WCAG2.0 A compliant by Orcadia Labs, LLC as of the official date on the title page of this document.

Action Plan In order for the website to achieve WCAG2 AA compliancy, the following actions will be taken: 1. Specify all text sizes as percentages or in ems to achieve sufficient scale of all text. See Accessibility Challenges (WCAG2 1.4.4.) 2. Provide a zoom control on the website, itself, supporting the relative resizing of all text. See Accessibility Challenges (WCAG2 1.4.4.) In order for the website to achieve WCAG2 AAA compliancy, the following actions will be taken: 1. Change the tent graphic background image so that the text contrast ratio between the solid black header text and the tent graphic background achieves a minimum text contrast ratio of 7:1. See Accessibility Challenges (WCAG2 1.4.3) 2. Change the CSS to use the user-specified text and background colors, for all but the header text and if specified by the user, instead of the default black-and-green text colors it currently specifies. The current color scheme will continue to be used if not overridden by the user in the browser. See Accessibility Challenges (WCAG2 1.4.8) 3. Change the CSS to use the user-specified text and background colors, for the header text and if specified by the user, instead of the default black-and-green text colors it currently specifies. The current color scheme will continue to be used if not overridden by the user in the browser. By using the user-specified text background color for this header text, a "large swath" of solid background color will need to be written across the tent graphic on the site. This change is deemed acceptable and will be visible in response only to the user specifying a new default text background color. See Accessibility Challenges (WCAG2 1.4.8) 4. Change the CSS to specify a line-height of 150%. See Accessibility Challenges (WCAG2 1.4.8) In order for the website to achieve full ARIA integration, the following actions will be taken: 1. Provide sufficient ARIA semantic information for assistive technologies. See Accessibility Challenges (ARIA.)