alyssapanetta/developing-a-disability

Notes and Resources for talk "Living the UX: When a web developer develops a disability"

developing-a-disability

Notes and Resources for talk "Living the UX: When a web developer develops a disability"

SLIDES:

• Lightning Version (more succinct)

  • https://livealbany-my.sharepoint.com/:p:/g/personal/apanetta_albany_edu/ERiIOktjki5DkSG-R4k6u_MBI2lSN6LfkJCwTRSNhHCiSw?e=K4jHoL
  • Modern CSS Slides start at:
    • https://livealbany-my.sharepoint.com/:p:/g/personal/apanetta_albany_edu/ERiIOktjki5DkSG-R4k6u_MBI2lSN6LfkJCwTRSNhHCiSw?e=oJA16f&nav=eyJzSWQiOjM4NzQsImNJZCI6OTMwNzU4NjU5fQ

• 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

Links by Topic

Accessibility: Getting Started

• 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

Accessibility: Deep Dives

• 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

Browsers Interop Standards 2023

• 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/

Cognitive Disabilities

• 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

Semantic HTML

• 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

  • https://jen4web.substack.com
  • https://learnwithjen.com/l/30daysofhtml

Modern CSS

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-size CSS 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/

• 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

Twitter

• 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