Articles, Links, and Tools From Online Together: Fall Summit 2021

• Dew of the Gods
• Ryan Dubs TikTok
• Drunk Elephant
• Innocent Smoothies
• Gary Vaynerchuck
• Molly Mae
• Aglet
• Burger King Stevenage

• Precise control over responsive typography
• min(), max(), and clamp(): three logical CSS functions to use today
• Responsive Type and Zoom
• Failure of Success Criterion 1.4.4 due to incorrect use of viewport units to resize text
• Practical CSS Scroll Snapping
• Understanding positioning in CSS
• Scrolling box definition in CSSOM View Module
• Native CSS Masonry Layout In CSS Grid
• Container Query Proposal & Explainer

We do CSS and our own productivity a disservice if we continue to take a piecemeal approach to the language. By learning the key elements that underpin this system, you will find that the rest of CSS falls into place.

• Incomplete list of mistakes in the design of CSS
• Flow layout and writing modes
• Logical properties and values
• How to learn CSS
• Styling empty cells with generated content and grid layout
• Understanding CSS Layout and the block formatting context
• Everything you need to know about CSS margins
• Alignment in flexbox
• Understanding sizing in CSS Layout
• Researching a property in the CSS specifications

Intrinsic Web Design

• Cascading HTML style sheets by Håkon Lie
• Object Oriented CSS by Nicole Sullivan
• CSS Systems by Natalie Downe
• Responsive Web Design by Ethan Marcotte
• Everything You Know About Web Design Just Changed by Jen Simmons

W3C

• CSS Working Group Github
• Web Platform Tests
• wpt.live | wpt.fyi

Cascade Layers

Specification

• Layers Proposal
• Layers Explainer
• Layers Github Project
• Layers Editor’s Draft
• Layers Working Draft

Implementation

• Mozilla Layers (about:config » layout.css.cascade-layers.enabled)
• Webkit Layers (Develop/Experimental Features » CSS Cascade Layers)
• Chromium Layers (run-time flag » --enable-blink-features=CSSCascadeLayers)

Resources

• MDN Layer Docs by Rachel Andrew
• The Future of CSS: Cascade Layers (CSS @layer) by Bramus Van Damme
• Layers CodePen collection

Scope

Specification

• Scope Proposal & Explainer
• CQ Github Project
• CQ Editor’s Draft

Container Queries

2020 Proposals

• David Baron: @container
• Brian Kardell: switch()

Specification

• CQ Proposal & Explainer
• CQ Github Project
• CQ Editor’s Draft

Implementation

• Chrome Canary (chrome://flags » CSS Container Queries)

Resources

• MDN Documentation by Rachel Andrew
• Container Queries: a Quick Start Guide by David Herron
• A Primer On CSS Container Queries by Stephanie Eckles
• Say Hello To CSS Container Queries by Ahmad Shadeed (annotated on CSS Tricks by Robin Rendle)
• CSS Container Queries For Designers by Ahmad Shadeed
• Container Queries in Web Components by Max Böck
• Container Queries are actually coming by Andy Bell
• CSS Container Queries: A First Look + Demo by Bramus Van Damme
• Next Gen CSS: @container by Una Kravets
• CSS Container Queries: Use-Cases And Migration Strategies by Adrian Bece
• CQ Twitch live-stream highlights & summary by Stephanie Eckles
• CQ CodePen collection

Query Units

• CSS Container Query Units by Ahmad Shadeed
• Container Units Should Be Pretty Handy by Chris Coyier

See Also

• Awesome-Container-Queries by Stuart Robson

Zero Waste Living

• Urban Ore
• Zero Waste Home blog by Bea Johnson
• Trash is for Tossers blog by Lauren Singer
• How People Make Only a Jar of Trash a Year by Stephen Leahy, National Geographic

Books & Resources

• Sustainable Web Design by Tom Greenwood
• World Wide Waste by Gerry McGovern
• ESP Design sustainable product design guide (archive)
• Google Material Design
• The Mobile Performance Inequality Gap 2021 by Alex Russell

Tools

• Website Carbon Calculator
• CSS Stats
• Safari Energy Impact dev tool
• Font Subsetting tool from Everything Fonts
• Lottie animation library from AirBnB
• B Impact Assessment for B Corp Certification

Lightweight Analytics

• Minimal Google Analytics
• Fathom Analytics
• Plausible Analytics
• NPO case study of removing personalised ad tracking

Hosting

• Cloudflare Workers
• Strattic static WordPress hosting

• Farnham Street (2021) Regression To the Mean
• L. Hogan (2018) Feedback Equation
• K. Scott (2016) What is Radical Candor?
• J. Zenger, J. Folkman (2017) Why Do So Many Managers Avoid Giving Praise?
• E. Casali (2019) Good and Bad Positive Feedback
• E. Casali (2021) Asynchronous Design Critique: Giving Feedback
• E. Casali (2021) Asynchronous Design Critique: Getting Feedback
• E. Casali (2020) Motivating Motivation: from reward to recognition
• E. Casali (2018) The Asymmetry of Safe Spaces
• E. Casali (2015) Rudeness Blindness

Sara shares some frustrations, many lessons learned, and a lot of practical tips and tricks for building accessible front-end foundations that you can take and apply in your own projects right away.

• Making the Web Sweeter with Food Network and Cupcakes - YouTube
• Microsoft Design
• We’re Just temporarily Abled
• Dragon Naturally Speaking software
• Web Accessibility 101: Dragon NaturallySpeaking Demo
• Accessible Icon Buttons
• Inclusively Hiding and Styling Checkboxes and Radio Buttons

Recent blog posts about voice

• Behind the scenes of my newest book Voice Content and Usability, A Book Apart’s first voice title
• Personality for voice interfaces: Humanizing the most human of user experiences
• How to classify interactions for conversational interfaces
• Register, diglossia, and why it’s important to distinguish spoken from written conversational interfaces
• How we integrated Alexa with Drupal for Ask GeorgiaGov, the first voice interface for residents of Georgia
• Can voice assistants displace screen readers?
• Conversational maxims and the cooperative principle in voice interface design
• Can your content speak for itself? Introducing Voice Content and Usability from A Book Apart
• Voice interface design is about good writing, not just good design
• Affordance and wayfinding in voice interface design

My conversational content strategy series

• Building usable conversations: How to approach conversational interfaces
• Building usable conversations: Conversational information architecture
• Building usable conversations: Effective conversational design
• Building usable conversations: Conversational content strategy
• Building usable conversations: Conversational usability testing
• Building usable conversations: The story of Ask GeorgiaGov

A List Apart and CMSWire articles

• Usability Testing for Voice Content
• Immersive Content Strategy
• How to Let Your Customer Experience Speak for Itself With Voice Content

Selected talks about voice and voice content

• Design 4 Drupal 2021 (July 23, 2021)
• VOICE Summit (July 25, 2018)
• Frontend United (June 1, 2018)

General resources for designing for safety and related issues in tech

• The Inclusive Safety Project - working to end tech-facilitated interpersonal harm
• Operation Safe Escape is a non-profit that helps survivors safely escape their abusers by erasing their digital footprint and protecting themselves in the real world. If you work in security, you can help with this work
• The Coalition Against Stalkerware unites advocacy groups, survivors, technologists, and security firms to combat technology-facilitated stalking and abuse
• The Algorithmic Justice League fights for equitable and accountable artificial intelligence (AI)

Workshops from Creative Reaction Lab

• Cultivate Your Mindset for Equity-Centered Practices

Recommended reading

• Design for Safety by Eva PenzeyMoog -
• “As Technology Evolves, so Does Domestic Violence: Modern-Day Tech Abuse and Possible Solutions”
• Design Justice by Sasha Costanza-Chock
• Design for Real Life by Eric Meyer & Sara Wachter-Boettcher
• Design for Cognitive Bias by David Dylan Thomas
• The Body Keeps the Score by Bessel Van Der Kolk
• Race After Technology: Abolitionist Tools for the New Jim Code by Ruha Benjamin
• Algorithms of Oppression by Safiya U. Noble

• Faster Integration with Web Components
• Mighty Morphin’ Web Components by Tyler Sticka
• Champion Power Equipment Design System
• Atomic Design by Brad Frost
• 2021 Design System Survey by Sparkbox
• Crafting Component API, Together by Nathan Curtis
• Web Platform Design Principles by the W3C
• Fabric Design System by Alation
• Design Systems — Designing UI Component APIs by Eduardo Ferreira
• Component-Specific Design Tokens by Danielle Romo
• Principles of Component API (Prop) Design by Chris Schmitz
• Make Impossible States Impossible by Kent C. Dodds
• CSS Shadow Parts by Ionic
• Styling in the Shadow DOM With CSS Shadow Parts by Ollie Williams
• Design System UI is More Expensive Than a Product Team’s UI by Nathan Curtis
• Guidelines for creating web platform compatible components by W3C TAG
• Web Components Best Practices by WebComponents.org

• Degree Inclusive, Wunderman Thompson case study
• Indi Young, on the problem space and solution space
• Indi Young, books
• Just Ask, Shawn Lawton Henry
• Degree Inclusive, Unilever Feature
• Web Content Accessibility Guidelines 2.1, Quick Reference
• Indeed/Stephanie Hagadorn, Accessibility Annotation Kit for Figma
• GitLab Product Design team, Accessibility Bluelines for Figma
• Microsoft, Accessibility Annotation for Figma
• Twitter, Accessibility Annotation Library for Figma
• Web Accessibility Evaluation Tools List

How does markup become something that screen readers (for example) can understand and interact with on behalf of the user? Together we’ll dive into how assistive tech integrates with the experiences that you create.

How This Works

Accessibility APIs

• Android: Various APIs in android.view.accessibility, e.g. AccessibilityNodeInfo
• Chrome OS: Proprietary API closely related to Chromium’s internal accessibility API
• Linux/Gnome: User apps: Accessibility Toolkit (ATK). Assistive tech: Assistive Technology Service Provider Interface (AT-SPI)
• MacOS, iOS: NSAccessibility (AXAPI)
• Windows: Microsoft Active Accessibility + IAccessible2 (MSAA + IA2) or UI Automation (UIA)

Accessibility API Mappings

• Accessible Name and Description Computation
• Core AAM
• Digital Publishing AAM
• Graphics AAM
• HTML AAM
• SVG AAM

Accessibility Tree

• Chromium: Element not exposed to accessibility tree when it is set to display: contents
• Tweet thread on Webkit’s list-style heuristics
• Exposing attributes that do not directly map to accessibility API properties: cheatsheet to identify items that might take longer for assistive tech to pick up (same in HTML AAM)

Text Interfaces

• IA2: IAccessibleText
• NSAccessibility > “Configuring Text Elements” section
• UI Automation Support for Textual Content

Events

• Android AccessibilityEventSource
• Core AAM: Events
• IA2EventID
• MSAA: WinEvents and Active Accessibility
• NSAccessibility notifications
• UI Automation Events

Testing

Checkers and Linters

• Accessibility Insights
• ARC Platform
• axe Tools
• Lighthouse
• Tenon
• WAVE (Web Accessibility Evaluation Tool)
• Webhint
• Web Accessibility Evaluation Tools List
• WebAIM Million
• WebAIM surveys and other projects

Manual Testing

• A11y Project Checklist
• Dragon speech recognition tools (check out Accessible Text Labels For All for thoughts on naming elements for speech recognition access)
• Emulate vision deficiencies
• forced-colors
• How to Meet WCAG (Quick Reference)
• prefers-color-scheme
• prefers-contrast and Styling for Windows high contrast with new standards for forced colors
• prefers-reduced-motion
• prefers-reduced-transparency
• The Importance Of Manual Accessibility Testing
• Testing with Screen Readers
• Web Accessibility Perspectives: gives some quick tips on what to think about for particular scenarios
• Screen Reader Keyboard Shortcuts and Gestures

Some Screen Reader Actions to Try

• Read line by line
• Read continuously from a point
• Jump by headings, landmarks, and links
• Search the page
• Interact with tables using table commands
• Jump by form field
• Interact with all interactive elements
• Testing any changes in content or context

Testing with Users

• Involving Users in Evaluating Web Accessibility
• Professional testers

Bug Sleuthing

Mappings

• ARIA Specification
• Accessible Name and Description Computation
• Core AAM
• Digital Publishing AAM
• Graphics AAM
• HTML AAM
• HTML Living Standard
• SVG AAM

Debugging Tools

Browser Dev Tools

• Chrome DevTools: Accessibility features reference
• Microsoft Edge (Chromium) DevTools: Accessibility reference
• Firefox Accessibility Inspector
• Safari Webkit Audits
• Safari Webkit Node Inspector (may be outdated)

Desktop OS API Debuggers

• Accessibility Insights for Windows: for UIA Automation
• AccProbe for MSAA + IA2
• Testing for Accessibility on OS X for AXAPI (a little outdated but should still be pretty accurate; refer also to these WWDC videos)

Where to Report Bugs

• Apple Accessibility Support Communities
• Chromium accessibility bugs (all Chromium-based browsers, including MS Edge)
• Gecko accessibility bugs
• Google accessibility
• JAWS / VFO accessibility bugs
• Microsoft Disability Answer Deck
• NVDA bugs
• Webkit accessibility bugs

Miscellaneous

• 24 Accessibility
• A11y Project Resources
• A11y Style Guide
• Accessibility Object Model: unofficial draft spec
• Accessibility Object Model: explainer
• Accessibility on iOS
• Adrian Roselli’s blog
• An adventurer’s guide to W3C specs
• ARIA Authoring Practices
• Deque University
• Eric Bailey’s blog
• HTML5 Accessibility
• Inclusive Components
• Inclusive Design Principles
• Marco Zehe’s blog
• Sarah Higley’s blog
• Scott O’Hara’s blog
• Tink (Leonie Watson’s blog)
• W3C Web Accessibility Initiative: Accessibility Fundamentals Overview
• WebAIM Articles
• Web Content Accessibility Guidelines (WCAG) 2.2

Browser Rendering Engine Documentation

• Chromium: Accessibility Technical Documentation
• Chromium: Accessibility Overview
• Gecko/Mozilla Accessibility
• Webkit blog: accessibility

It’s one thing to know what your organization should be doing, but that’s not always enough to convince the people who sign the checks. How do you get them on board?

Websites

• Please use the following resources to continue your inclusive design journey. You can learn more about me and my work (and my book!) at daviddylanthomas.com.
• Radical copyeditor
• Textio
• Humane by Design
• Designer’s code of ethics
• Ethical Decision Making
• The Never Again Pledge
• Tarot Cards of Tech
• 52 UX Cards to Discover Cognitive Biases
• Design justice principles
• Inclusive design framework
• Cards Against How Might We
• GitHub Blind Screening tool
• Center for Humane Technology
• Feminist research methods
• Algorithmic Justice League
• Equity Centered Community Design
• Black UX resource list
• A11y Rhymes
• Another Lens conscientious research tool
• Cards for Humanity
• Decentering Whiteness in Design History Resources
• Blendoor: Tool for anonymized hiring
• Spotify Ethics Assessment Worksheet
• How LinkedIn uses Red Team/Blue Team
• Tech Workers Coalition
• Data & Society
• Ethical Litmus Test
• Tech Risk Zones
• City of Philadelphia approach to participatory design
• vTaiwan design approach to collaborative decision-making for public policy
• Spectrum (Adobe’s design system) inclusive UX writing guidelines
• New_Public - Community for better digital public spaces
• 18F hiring guide with core values and bias check built in

Books

• Technically Wrong by Sara Wacther-Boettcher
• Artificial Unintelligence by Meredith Broussard
• Thinking, Fast and Slow by Daniel Kahneman
• Predictably Irrational by Dan Arielly
• Ruined by Design by Mike Monteiro
• Data Feminism by Catherine D’Ignazio and Lauren F. Klein

Podcasts

• The Cognitive Bias Podcast
• You Are Not So Smart
• Tech for Good Live

Video

• Iris Bohnet | What Works: Gender Equality by Design

Slack

• We Evolve
• Content + UX
• Simply Secure
• Prosocial Design Network
• Tech Workers Coalition