Implementing Digital Accessibility Baird Miller, CIO, Accessibility Coordinator Tammy Pelletier, Accessibility Architect Washington State Department of Ecology

Agenda What? Who? How?

What? OCIO Policy 188 – purpose, intent and scope Covered technology acquired, procured, developed, substantially modified/enhanced Covered technology provides accessible content or provide equivalent access Policy and standards Accessibility Plan Information technology accessibility coordinator

Who? Accessibility Steering Committee Communications Director Human Resources Director Environmental Program Manager Deputy Director Chief Information Officer

Who? Accessibility Work Group Enterprise Application Manager Enterprise Architect Accessibility Architect Environment Program Application Manager ADA Coordinator Information Governance Manager

How? Created the organization Developed a policy Developed a plan

How – The Policy Purpose Definitions Commitment Reference plan and its implementation

How – The Plan Scope Technology Covered: Ecology’s websites, web applications, software systems, electronic documents, e-learning, multimedia and programmable user interfaces content Technology Not Covered: Content users encounter after leaving Ecology’s covered technology 

How – The Plan User Feedback Process – Need a clear path for accessibility related requests and complaints Communications and Training Assessment, Monitoring, Reporting Progress Application architecture and development standards Application portfolio inventory Testing tools Application testing

How – The Plan Prioritization Process Public facing first New services and content – developed or contracted Critical, frequently accessed Known barriers and content important for individuals with disabilities

We are making progress... Procurement includes accessibility requirements

Transforming Ecology’s Web Site… Accessibility designed in from the start Standards, awareness and training Procured a CMS that aids in creation of accessible content Tools and testing Usability testing by individuals with disabilities. Governance, guidance, enhanced QA

Old site: Lots of small dense text, hard to read WCAG 2.0, Level AA: 2.4.6: Headings and labels are clear and consistent Whitespace and proximity to make relationships between content more apparent. Headings to group content, reduce clutter, and make it easier to scan and understand.

1 2 3 New site: Headings and spacing aid comprehension WCAG 2.0, Level AA: 2.4.6: Headings and labels are clear and consistent Whitespace and proximity to make relationships between content more apparent. Headings to group content, reduce clutter, and make it easier to scan and understand.

Old site: contrast errors Ecology’s old site contained WCAG 2.0 contrast errors in navigation and other key areas.

New site: Contrast Level AAA, exceeds state standard Site contrast checks pass Level AAA, exceeding state standard WCAG Level AA. By providing enhanced contrast: we engage visually impaired users – and also people who read our content on mobile devices, in bad lighting conditions, and on lower quality monitors. Many of Ecology’s customers are over 50. Half of people over the age of 50 have some degree of low-vision condition. WCAG 2.0 Level AA, 1.4.3 Contrast (Minimum) Visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; WebAIM: Color contrast checker http://webaim.org/resources/contrastchecker/ NCU: Accessible Color Palette Analyzer: generates report https://accessibility.oit.ncsu.edu/tools/color-contrast/

1 2 3 4 Multiple ways to navigate the site Multiple ways to navigate the site, including: top navigation, site map, search box, main navigation, and footer. WCAG 2.0 Level AA: More than one way is available to locate a Web page within a set of Web pages - including a site map.

Navigation accessible by keyboard, screen reader Check: Main top navigation navigable by keyboard only and screen reader. WCAG 2.0 Level A, 2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. WCAG 2.0, Level A, 2.1.2 No Keyboard Trap: If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface. WebAIM: Keyboard accessibility: http://webaim.org/techniques/keyboard/ WebAIM: Using the NVDA screen reader to evaluate Web accessibility: http://webaim.org/articles/nvda/ WebAIM: designing for screen reader compatibility: http://webaim.org/techniques/screenreader/

New site: colors pass color vision deficiency check Because we had excellent contrast in the overall web site design, strong contrast held up well to a color vision deficiency check. Lesson: Good contrast helps individuals with color challenges – as well as those with low vision. WCAG 2.0 Level A: 1.4.1 Color is not used as the only visual means of conveying information https://www.w3.org/TR/WCAG20/#visual-audio-contrast-without-color VisCheck: color vision check http://www.vischeck.com/examples/ WebAIM simulations: low vision, dyslexia, screen reader, distractibility http://webaim.org/simulations/

Contrast check for site color palette WCAG 2.0 Level AA, 1.4.3 Contrast (Minimum) Visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; WebAIM: Color contrast checker http://webaim.org/resources/contrastchecker/ NCU: Accessible Color Palette Analyzer: generates report https://accessibility.oit.ncsu.edu/tools/color-contrast/

Contrast check for site icons FAILS Level AA PASSES Level AA FAILS Level AAA WCAG 2.0 Level AA, 1.4.3 Contrast (Minimum) Visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; WebAIM: Color contrast checker http://webaim.org/resources/contrastchecker/ PASSES Level AAA

Low vision check: zoom in 200% WCAG 2.0, 1.4.1 Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window. WebAIM: Quick reference: Testing Web Content for Accessibility http://webaim.org/resources/evalquickref/

Questions?