Articles, Links, and Tools From Online Together: Fall Summit 2021
“Building Brands Online” (Sarah Parmenter)
“Our Stylish Future” (Hui Jing Chen)
- 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
“How to Understand CSS” (Rachel Andrew)
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
“Styling the Intrinsic Web with Cascade Layers & Container Queries” (Miriam Suzanne)
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
Cascade Layers
Specification
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
Container Queries
2020 Proposals
- David Baron:
@container
- Brian Kardell:
switch()
Specification
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
“Applied Accessibility: Practical Tips for Building More Accessible Front-Ends” (Sara Soueidan)
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.
“Elements Heard, Not Seen: Moving from Web Design to Voice Design” (Preston So)
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)
“Speaking of Accessibility: How Screen Readers Present Your Content” (Melanie Richards)
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
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
Image Credits
- Keeler Oak Tree - distance photo by Msact
- Scarlet Oak in Oakwood Park, N14 by Christine Matthews
- Selective Focus Photography of Green Fern Plant by Avinash Patel
- Photo of Snow Field Near Trees by Burak K
- Sakura Tree by Oleg Magni
- Trees With Pathway by Felix Mittermeier
- Bamboo Tree by Alexandr Podvalny
- Dragon made of tyres in yard by Ryutaro Tsukata
“We're All Writing Our Own Web Standards Now” (Jason Grigsby)
- 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
“Built In, Not Bolted On: How to Get Accessibility Right From the Start” (Derek Featherstone)
- 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
“That’s Great, but How Do I Convince My Boss?” (David Dylan Thomas)
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