Articles, Links, and Tools From Online Together: Spring Summit
“The State of the Web” (Jeremy Keith)
In this perspective-setting talk, we’ll go on a journey to the past, present, and future of web design and development. You’ll laugh, you’ll cry, and by the end, you’ll be ready to make the web better.
Apollo 8
- Earthrise by Emmanuel Vaughan-Lee on Vimeo, 2018
- Earthrise by Amanda Gorman on YouTube, 2018
- They Saw Earth From Space. Here’s How It Changed Them by Nadia Drake in National Geographic, 2018.
- Seeing the Whole Earth from Space Changed Everything by Ahmed Kabil for The Long Now Foundation, 2018.
Hypertext
- As We May Think by Vannevar Bush in The Atlantic Monthly, 1945.
- The Demo by Douglas Engelbart, 1968.
- Information Management: A Proposal by Tim Berners-Lee, 1989.
The World Wide Web
- proposed new tag: IMG by Marc Andreessen to www-talk, 1993.
- What is a Polyfill? by Remy Sharp, 2010.
- Stop solving problems you don’t yet have by Rachel Andrew, 2012.
- Re: More granularity for font-weight? by Håkon Wium Lie to www-style, 2015.
- Clean advertising on adactio.com, 2020.
- 2021 Predictions for UX and Front-End Experts (PDF) by Ire Aderinokun et al. for An Event Apart, 2021.
NASA
- Poppy Northcutt: The Woman Who Took Us to the Stars by Apriya Rai, 2020.
- Katherine Johnson Biography by Margot Lee Shetterly, 2020.
- Margaret Hamilton interview by Zoë Corbyn in The Guardian, 2019.
“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
“HTML with Superpowers” (Dave Rupert)
The web has matured in the last 5 years and it might be time to start looking at how the Web’s native component system can give our HTML super powers.
- Chrome Platform Status - CustomElementRegistryDefine — Platform status data says Web Components have 10.3% usage, but combined with the outdated V0 spec containing DocumentRegisterElement it goes up to 11.2% usage
- Japan’s 2011 tsunami, then and now - in pictures — Real world example of a before and after photo essay
- two-up
- two-up example
- Sharing Podcasts — Post where I outline my opinions on podcast players.
- podcast-player — Check out the
lit-version
branch for latest. - podcast-player on shoptalkshow.com
- Generic Components
- generic-tabs
- 2004 proposal for tabbox element
- model-viewer
- A-Frame
- Basic A-Frame Example
- Agile Zen Whale
- Awesome Standalones ?
- LitElement
- Hybrids
- Haunted
- Stencil
- Full custom-alert example
- Custom Elements Everywhere
- Google Search Central - Follow best practices for web components
- Web Component Polyfills
- web.dev - More capable form controls
- Nolan Lawson - Managing focus in the shadow DOM`
- Open UI
“PWAs Five Years On” (Ire Aderinokun)
PWAs are truly installable, reliable, and capable. In this talk, we’ll look at how PWAs have matured over the years and just how capable they’ve become.
Talks
- What are Progressive Web Apps?
- Getting Started with Progressive Web Apps | Google Developers
- PWA in 2021
Capable
- Fugu API Tracker
- Make your PWA feel more like an app
- Introducing Background Fetch | Web | Google Developers
- Introducing Background Sync | Web | Google Developers
- Richer offline experiences with the Periodic Background Sync API
- The File System Access API: simplifying access to local files
- A contact picker for the web
Reliable
- Making Service Workers easier to debug for Progressive Web Applications and more - Microsoft Edge Blog
- Angular - App shell model
- Making a Progressive Web App | Create React App
- @vue/cli-plugin-pwa | Vue CLI
Installable
“Modern Tools, Modern Layouts, Modern Web” (Morten Rand-Hendriksen)
From paper sketches to full-fledged web experiences, you’ll discover new ways of thinking about web layouts and new opportunities to do things previously thought impossible.
Live code samples
Documentation
- grid - CSS: Cascading Style Sheets | MDN
- flex - CSS: Cascading Style Sheets | MDN
- Basic Concepts of Multicol - CSS: Cascading Style Sheets | MDN
- Subgrid - CSS: Cascading Style Sheets | MDN
- @supports - CSS: Cascading Style Sheets | MDN
Articles, videos, etc
- Responsive Web Design
- Resilient web design
- Grid by Example
- Layout Land
- Build a Classic Layout FAST in CSS Grid
- Ten modern layouts in one line of CSS
- Using CSS Grid Today
- CSS Grid Level 2: Here Comes Subgrid
- Get Ready for CSS Grid Layout
Esoterica
“Inclusive Design Systems” (Derek Featherstone)
An accessible design system is the single most under-utilized leverage for creating accessible products. Incorporate accessibility really well into your design system and your product is primed for success.
- The Most Exciting Design Systems Are Boring, Josh Clark
- Salesforce’s Lightning Design System
- Derek Featherstone, Inclusive, by design (An Event Apart, 2019)
- WAI-ARIA Authoring Practices 1.1
- Three types of relationships and what they mean for accessibility, Derek Featherstone
- Nathan Curtis, on design systems
- Authoring Tool Accessibility Guidelines (ATAG) 2.0
- Accessibility-flavored React Components, Kathleen McMahon
- Design Systems: Pilots & Scorecards, Dan Mall
- Atomic Design, Chapter 2, Brad Frost
- Building an Accessibility Library, Stephanie Hagadorn
- Accessibility Bluelines, Jeremy Elder
“High-Impact User Research” (Cyd Harrell)
If you can show your stakeholders engaged users coping with challenges in real time, you can generate a whole new level of impact for UX.
- Alba Villamil’s full talk Dear Designers…We Need to Talk About Race: How Colorblind User Research Produces Racist Design (free, but signup required)
- Sarah Fathallah on compensating participants
- User Interviews group interview on how research has changedduring COVID-19
- Steve Portigal on the complexities of large scale & B2B research, including getting access to users
“Habits of the Cross-Cultural Designer” (Senongo Akpem)
If we want to effectively design for modern, multicultural audiences, we have to be willing to challenge our usual strategies and processes. But what are the core actions of the cross-cultural practitioner?
- July 2019 report from We Are Social and Hootsuite Global Digital Reports on internet usage
- Cross-Cultural Design from A Book Apart
- Cultural Probes
- Obvi App
- Bollywood Method
- Jason Travis Persona photo series
- Redesigning the Grab app
- Mental models used by Taiwanese and American consumers when shopping online for home goods (PDF)
- Digital Green
- Database of Places, Language, Culture and Environment
- Other Valleys
- Tech Cabal
- Nava
“Broadening Your Design Vision: How DIBs Can Make You a Better Designer” (Sharon Steed)
In a time of global remote work, the tools learned from DIBs can be used for more than just better connecting with your teammates; they are also essential to you being more effective in creating, marketing and selling products.
- LinkedIn Learning — Communicating with Empathy
- eBook — Empathy at Work
- Website — communilogue.co
“Semantics to Screen Readers” (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
“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