Notes and Resources for talk "Living the UX: When a web developer develops a disability"
-
Lightning Version (more succinct)
-
Full Version as presented at DrupalCon 2022 (more verbose)
- https://livealbany-my.sharepoint.com/:p:/g/personal/apanetta_albany_edu/ESemNeRs_HdAhp0AL51CilcBiwafpNlDEhYdqy3U-RZRqg?e=4cAX0B
- Modern CSS Slides start at:
- https://livealbany-my.sharepoint.com/:p:/g/personal/apanetta_albany_edu/ESemNeRs_HdAhp0AL51CilcBiwafpNlDEhYdqy3U-RZRqg?e=maGuCP&nav=eyJzSWQiOjM4NzQsImNJZCI6OTMwNzU4NjU5fQ
-
Guidance on Web Accessibility and the ADA, US Department of Justice Civil Rights Division, https://www.ada.gov/resources/web-guidance/
-
Web Accessibility, Developing with Empathy, Free Course, Udacity https://www.udacity.com/course/web-accessibility--ud891
-
Keys To An Accessibility Mindset https://www.smashingmagazine.com/2023/02/keys-accessibility-mindset/
-
Quick and Small Accessibility https://bite-sized-a11y.com
-
Designing for Accessibility, UK Home Office https://github.com/UKHomeOffice/posters/blob/master/accessibility/dos-donts/posters_en-UK/accessibility-posters-set.pdf
-
Web accessibility checklist (how to test), Magentaa11y (T-mobile) https://www.magentaa11y.com/web/
-
Inclusive Design Principles, Contributors: Henny Swan, Ian Pouncey, Heydon Pickering, Léonie Watson https://inclusivedesignprinciples.org
-
Federal Plain Language Guidelines, plainlanguage.gov https://www.plainlanguage.gov/guidelines/
-
Write good Alt Text to describe images, Harvard University Information Technology https://accessibility.huit.harvard.edu/describe-content-images
-
Using CSS to Enforce Accessibility, Adrian Roselli https://adrianroselli.com/2021/06/using-css-to-enforce-accessibility.html
-
Accessible Components, Scott O'Hara https://github.com/scottaohara/accessible_components
-
Accessible Brand Colors, Use All Five https://abc.useallfive.com/
-
Simple Guidelines When You Design for Mobile, Interaction Design Foundation https://www.interaction-design.org/literature/article/designing-for-the-mobile-environment-some-simple-guidelines
-
Percentage of screen readers users in USA?, Stack Exchange https://ux.stackexchange.com/questions/57340/percentage-of-screen-readers-users-in-usa
-
How to Champion Accessibility and Foster Systemic Change, Webinar, Greg Williams, Deque https://accessibility.deque.com/how-to-champion-accessibility-and-make-systemic-change
- Dashboard: https://wpt.fyi/interop-2023
- Chrome https://web.dev/interop-2023/
- WebKit (Safari) https://webkit.org/blog/13706/interop-2023/
- Microsoft https://blogs.windows.com/msedgedev/2023/02/01/microsoft-edge-and-interop-2023/
- Mozilla https://hacks.mozilla.org/2023/02/announcing-interop-2023/
- Mozilla’s vision for the evolution of the Web, Mar 2022 https://www.mozilla.org/en-US/about/webvision/full/
-
An Introductory Guide to Understanding Cognitive Disabilities, Glenda Sims and Jennie Delisi https://www.deque.com/blog/an-introductory-guide-to-understanding-cognitive-disabilities/
-
Making Content Usable for People with Cognitive and Learning Disabilities, Axe-con 2022 video, Rain Michaels https://www.deque.com/axe-con/sessions/making-content-usable-for-people-with-cognitive-and-learning-disabilities/
-
Making Content Usable for People with Cognitive and Learning Disabilities https://w3c.github.io/coga/content-usable/
-
Cognitive Overlords, Alex Tait, a11ytalks October 2022 https://a11ytalks.com/posts/2022-OCT
-
Building for the Brain: designing for cognitive inclusion, Microsoft Ability Summit 2023. Presenters: Cathy Bodin | Coleman Institute for Cognitive Disabilities, Christina Mallon | Microsoft, Doug Kim | Microsoft, Jen White-Johnson https://abilitysummit.event.microsoft.com/#sectionOuter11
-
Neurodiversity Design System, Will Soward https://neurodiversity.design
-
Accessibility Training Experience Lab: Cognitive Exercises, Minnesota IT Services https://mn.gov/mnit/about-mnit/accessibility/training/experience-lab/cognitive.jsp
-
Designing for Accessibility: How Text Resizing Works in Different Web Browsers, Ian Savchenko https://medium.com/paypal-tech/designing-for-accessibility-how-text-resizing-works-in-different-web-browsers-bed9e424e071
-
Accessible Target Sizes, Lupe, Craft CMS https://craftcms.com/blog/accessible-target-sizes
-
UX Principles that include Cognitive Accessibility, Gareth Ford Williams https://uxdesign.cc/adhd-dyslexic-perspective-on-cognitive-accessibility-using-cognitive-ux-design-principles-f46349a609d6
-
Learn HTML! web.dev course, Estelle Weyl with input and review from Rachel Andrew and Jhey Tompkins https://web.dev/learn/html/
-
Beginners’ Guide To Writing Good HTML, Bruce Lawson https://websitesetup.org/html-tutorial-beginners/
-
HTML Tutorial, W3Schools https://www.w3schools.com/html/
-
15 Days of HTML, Jen Kramer
organized by author
-
Michelle Barker https://css-irl.info
-
New CSS Features in 2022 https://www.smashingmagazine.com/2022/03/new-css-features-2022/
-
Exciting Times for Browsers (and CSS) https://css-irl.info/exciting-times-for-browsers-and-css/
-
-
Stephanie Eckles https://thinkdobecreate.com/
- Generating
font-sizeCSS Rules and Creating a Fluid Type Scale https://moderncss.dev/generating-font-size-css-rules-and-creating-a-fluid-type-scale/ - Guide to CSS Units for Relative Spacing https://dev.to/5t3ph/guide-to-css-units-for-relational-spacing-1mj5
- Practical Uses of CSS Math Functions: calc, clamp, min, max https://moderncss.dev/practical-uses-of-css-math-functions-calc-clamp-min-max/
- Minimal CSS Solutions to (Previously) Complex Problems | CSSCafe (video) https://www.youtube.com/watch?v=dz6aFfme_hg
- Desktop Reflow and Zoom https://moderncss-axecon2022.netlify.app/demos/desktop-reflow-and-zoom/
- Modern CSS Upgrades To Improve Accessibility (video - requires registration) https://www.deque.com/axe-con/sessions/modern-css-upgrades-to-improve-accessibility/
- Preference Queries https://12daysofweb.dev/2021/preference-queries/
- A Primer On CSS Container Queries https://www.smashingmagazine.com/2021/05/complete-guide-css-container-queries/
- Standardizing Focus Styles With CSS Custom Properties https://css-tricks.com/standardizing-focus-styles-with-css-custom-properties/
- Generating
-
Carie Fisher https://cariefisher.com
- Accessible Typography Essentials (video - requires registration) https://www.deque.com/axe-con/sessions/accessible-typography-essentials/
-
Miriam Suzanne https://oddbird.net
-
CSS is Rad! from Design 4 Drupal, Boston 2020 (video) https://www.youtube.com/watch?v=JTzYGWYjQdg
-
Use the Right Container Query Syntax https://www.oddbird.net/2022/08/18/cq-syntax/
-
A CodePen collection of container query examples https://codepen.io/collection/XQrgJo
-
-
Adrian Bece https://codeadrian.github.io/
- Modern Fluid Typography Using CSS Clamp https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/
-
Rachel Andrew https://rachelandrew.co.uk/
- Grid by Example https://gridbyexample.com/
-
Jen Simmons https://jensimmons.com/
- Layout Land (youtube channel) https://www.youtube.com/layoutland
-
Ahmad Shadeed https://ishadeed.com/
- The Guide To Responsive Design In 2023 and Beyond https://ishadeed.com/article/responsive-design/
- CSS container queries are finally here https://ishadeed.com/article/container-queries-are-finally-here/
- Defensive CSS https://ishadeed.com/article/defensive-css/
- Learn CSS Positioning https://ishadeed.com/article/learn-css-positioning/
- Learn Box Alignment https://ishadeed.com/article/learn-box-alignment/
-
Anthony Hobday https://anthonyhobday.com
- Visual design rules you can safely follow every time https://anthonyhobday.com/sideprojects/saferules/
-
Manuel Matuzović https://www.matuzo.at/
- 100 Days Of More Or Less Modern CSS https://www.matuzo.at/blog/2022/100-days-of-more-or-less-modern-css/
- Day 56: container queries https://www.matuzo.at/blog/2022/100daysof-day56/
-
Kevin Powell https://www.kevinpowell.co/
- Weekly front-end web development & design tips, tricks, and tutorials https://www.youtube.com/@KevinPowell
- Useful & Responsive Layouts, no Media Queries required https://www.youtube.com/watch?v=p3_xN2Zp1TY
- Conquering Responsive Layouts (free course) https://courses.kevinpowell.co/conquering-responsive-layouts
-
Heydon Pickering & Andy Bell https://heydonworks.com/ https://andy-bell.co.uk/
- Every Layout ($69 for full access) https://every-layout.dev/
- Freebies:
- The Stack https://every-layout.dev/layouts/stack/
- The Sidebar https://every-layout.dev/layouts/sidebar/
- The Cover https://every-layout.dev/layouts/cover/
- Rudiments https://every-layout.dev/rudiments/boxes/
-
James Gilyead & Trys Mudford https://twitter.com/j98 https://www.trysmudford.com
- UTOPIA. Fluid Responsive Design https://utopia.fyi/
- Introduction Video: https://utopia.fyi/blog/an-introduction-video
- Fluid Type Scale Calculator: https://utopia.fyi/type/calculator
- Fluid Space Calculator: https://utopia.fyi/space/calculator
- Fluid Grid Calculator: https://utopia.fyi/grid/calculator
- UTOPIA. Fluid Responsive Design https://utopia.fyi/
- most have moved to mastadon's @front-end.social instance: https://front-end.social/
- @springbroken (me)
- @5t3ph
- @TerribleMia
- @jensimmons
- @MicheBarks
- @chriscoyier
- @cariefisher
- @SaraSoueidan
- @annaecook
- @racheleditullio
- @mmatuzo
- @Spellacy
- @ScopicEngineer
- @jen4web
- @shadeed9
- @TearyneG
- @bolonio
- @b_atish
- @click2carney
- @djkalbert
- @yeahshewrites
- @A11YProject
- @dequesystems
- @webaim
- @htm_hell
- @css (CSS-tricks.com)
- @CSSInRealLife
- @CSSWeekly