Wunderkind Web Accessibility Overview
Table of Contents
Introduction
Wunderkind is committed to web accessibility. We believe in the uniqueness of each individual, and that the internet should be usable by all people, regardless of circumstance or ability. We have integrated accessibility into our process when developing products, designs and campaigns -- and have professionals on staff who have been trained in web accessibility best practices.
In addition to our in-house staff, Wunderkind works with Perkins Access, a division of Perkins School for the Blind, to address the accessibility and usability of our product. Perkins Access provides ongoing accessibility support, including inclusive design reviews, WCAG audits, expert standards guidance and remediation support.
This document outlines our current accessibility features and practices, specifically addressing the accessibility of Wunderkind experiences & campaigns. Our ongoing accessibility effort works towards conforming to the Web Content Accessibility Guidelines (WCAG) version 2.1, level AA criteria.
That said, if your company has legal requirements above and beyond what's included herein, please flag those to your Wunderkind team. Wunderkind encourages each of our clients to work with their own legal counsel to ensure that their strategies accurately represent their understanding of any applicable website accessibility laws, policies and regulations. In the absence of website accessibility standards adopted by U.S. government regulators (e.g., DOJ), the currently accepted de facto website accessibility guidelines are the Web Content Accessibility Guidelines “WCAG”) 2.1 Levels A and AA or jurisdictional derivatives indicated by the World Wide Web Consortium (“W3C”) (https://www.w3.org/TR/WCAG21/).
Design Specifications
Our Design Studio creates on-brand experiences that drive performance, utilizing our knowledge of design, technical, and marketing best practices. Web accessibility principles are baked into our team’s best practices.
Web accessibility for design deals mainly with color contrast (when our client brand guidelines allow) and font sizes, for folks who are color blind or have low vision, as well as an emphasis on minimal design to reduce distraction and cognitive load.
Email Coding Specifications
Using simple, established HTML principles, we develop email campaigns that can be accessed from a variety of devices and assistive technologies:
- HTML text wherever possible (rather than embedded in images)
- Alternative text on content-containing images
- Semantic elements with logical heading hierarchies
- Presentation roles on table elements
- Content-type specification for special characters
- Language attributes
- Document titles
- When suitable, use CSS hover effects on CTAs and links to indicate clickability
Website Technical Specifications
Our onsite experiences are coded in HTML5 and supplemented with Accessible Rich Internet Applications (ARIA) when needed (WAI-ARIA Authoring Practices 1.1). Like our emails, they are built to be accessed by a variety of devices and assistive technologies, including screen readers.
Designed for Readability
- Alternative text applied to non-decorative images (e.g. logo)
- Accessible labels applied to interactive elements (e.g. form field)
- Text and graphical objects have contrast ratios greater than 4.5:1 with surrounding elements and background colors, when the client’s brand guidelines allow
- Legible font families and sizes
- Links are visually identifiable (e.g., underlined, bolded, italicized, etc).
- All caps applied in CSS (instead of HTML file)
Navigation
- Before campaign impression: campaigns are hidden from screen readers and not navigable by keyboard.
- On impression: campaigns become visible to screen readers and navigable by keyboard. For overlays, site content behind overlay is hidden from screen readers and unreachable by keyboard.
- On close: reverses changes made on impression (above) back to "before" state.
- Tabbing settings for overlays:
- Tabbing on the last focusable element in a step will loop you back to the first focusable element of that step.
- Tabbing in reverse on the first focusable element in a step moves focus to the last focusable element of that step.
- In addition to providing close buttons with accessible names, users can dismiss the overlay at any time by pressing the escape key.
- A highly visible focus indicator is implemented on all actionable components (e.g. links, form controls, buttons, etc.)
- Focus is programmatically moved on each new step
- On overlay close:
- Focus is returned to the website element that had focus before the campaign impressed. This is helpful for people who were browsing, to get back to what they were doing.
- If no element was previously focused, the focus is set to the <body> element
Input Assistance
- Form field labels are properly associated with their corresponding inputs
- Fields with invalid entries identify errors visually in text (not relying on color alone) and programmatically so that assistive technology users are informed; focus is moved to the first input with an error
- Error messages are programmatically associated with their corresponding field and do not rely solely on visual presentation
Compatibility
- Correct and complete markup language is used (ex: no duplicate ids, etc.).
- The order of content in the campaign’s source code matches the visual presentation of content
- Modal dialogs follow the modal dialog design pattern as defined by WAI-ARIA.
- Close (X) buttons are given accessible labels that describe purpose ("close dialog").