cognitive-ease

Notes and Resources for talk "Redesigning for Cognitive Ease" as presented at SUNY OLIS, UMN Accessibility Ambassadors, a11yTO and 3Play Media

SLIDES & RECORDINGS:

Redesigning for Cognitive Ease - SUNY OLIS - 2024, Alyssa Panetta https://livealbany-my.sharepoint.com/:p:/g/personal/apanetta_albany_edu/EWClM3HAvXVOots7oTbeoMoBY1P3DSw4nqhRbWAZhdvJog

Redesigning for Cognitive Ease - UMN - 2024, Alyssa Panetta http://tinyurl.com/cognitive-ease-umnaa

Redesigning for Cognitive Ease - a11yTO - 2023, Alyssa Panetta http://tinyurl.com/cognitive-ease-a11yTO

Redesigning for Cognitive Ease - 3Play Media - 2023, Alyssa Panetta http://tinyurl.com/cognitive-ease-3play

Recording: https://www.3playmedia.com/resources/recorded-webinars/wbnr-11-09-2023-cognitive-ease/

Possible Upgrades, slide 43 for SUNY OLIS; slide 51 UMN; slide 45 a11yTO and 3Play:

Convert Type and Spacing to Flexible Units

• LEARN

  • Generating font-size CSS Rules and Creating a Fluid Type Scale, Stephanie Eckles https://moderncss.dev/generating-font-size-css-rules-and-creating-a-fluid-type-scale/
  • Guide to CSS Units for Relative Spacing, Stephanie Eckles https://dev.to/5t3ph/guide-to-css-units-for-relational-spacing-1mj5
  • Accessible Typography Essentials (video - requires registration), Carie Fisher https://www.deque.com/axe-con/sessions/accessible-typography-essentials/
  • Responsive type scales with composable CSS utilities, Tobias Ahlin https://tobiasahlin.com/blog/responsive-fluid-css-type-scales/
  • Increase Readability, Reduce Cognitive Load: Freeing Working Memory for Processing Meaning, Meaghan Crowley-Sullivan https://readabilitymatters.org/articles/increase-readability-reduce-cognitive-load

• USE THESE UTILITIES

  • UTOPIA. Fluid Responsive Design, James Gilyead & Trys Mudford

    • 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
    • New Clamp() Calculator: https://utopia.fyi/clamp/calculator

  • Type Scale: A Visual Calculator: https://typescale.com/

  • clamp() Calculator: https://chrisburnell.com/clamp-calculator/

Convert a Page Layout to CSS Grid and Math

• LEARN

  • An Interactive Guide to CSS Grid, Josh W. Comeau https://www.joshwcomeau.com/css/interactive-guide-to-grid/

  • Grid by Example, Rachel Andrew https://gridbyexample.com/

  • Layout Land (youtube channel), Jen Simmons https://www.youtube.com/layoutland

  • 3 CSS Grid Techniques to Make You a Grid Convert, Stephanie Eckles https://moderncss.dev/3-css-grid-techniques-to-make-you-a-grid-convert/

  • Container Query Solutions with CSS Grid and Flexbox, Stephanie Eckles https://moderncss.dev/container-query-solutions-with-css-grid-and-flexbox/

  • Practical Uses of CSS Math Functions: calc, clamp, min, max, Stephanie Eckles https://moderncss.dev/practical-uses-of-css-math-functions-calc-clamp-min-max/

  • Solutions to Replace the 12-Column Grid, Stephanie Eckles https://moderncss.dev/solutions-to-replace-the-12-column-grid/

  • 3 Popular Website Heroes Created With CSS Grid Layout, Stephanie Eckles https://moderncss.dev/3-popular-website-heroes-created-with-css-grid-layout/

  • Use Cases For Flexbox, Rachel Andrew https://www.smashingmagazine.com/2018/10/flexbox-use-cases/

  • An Interactive Guide to Flexbox, Josh W. Comeau https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/

• USE THIS UTILITY

  • UTOPIA. Fluid Responsive Design, James Gilyead & Trys Mudford https://utopia.fyi/
    • Introduction Video: https://utopia.fyi/blog/an-introduction-video
    • Fluid Grid Calculator: https://utopia.fyi/grid/calculator
  • CSS Grid Generator, Kristjan Retter https://cssgridgenerator.io/

Add preference queries

• Preference Queries, Stephanie Eckles https://12daysofweb.dev/2021/preference-queries/
• Making Motion Inclusive, Val Head https://aneventapart.com/news/post/making-motion-inclusive-aea-video
• An Introduction to the Reduced Motion Media Query, Eric Bailey https://css-tricks.com/introduction-reduced-motion-media-query/
• CSS And Accessibility: Inclusion Through User Choice, Carie Fisher https://www.smashingmagazine.com/2023/08/css-accessibility-inclusion-user-choice/

Migrate from media queries to container queries

• A Friendly Introduction to Container Queries, Josh W. Comeau https://www.joshwcomeau.com/css/container-queries-introduction/
• The Guide To Responsive Design In 2023 and Beyond, Ahmad Shadeed https://ishadeed.com/article/responsive-design/
• A Primer On CSS Container Queries, Stephanie Eckles https://www.smashingmagazine.com/2021/05/complete-guide-css-container-queries/
• Use the Right Container Query Syntax, Miriam Suzanne https://www.oddbird.net/2022/08/18/cq-syntax/
• A CodePen collection of container query examples https://codepen.io/collection/XQrgJo
• CSS container queries are finally here, Ahmad Shadeed https://ishadeed.com/article/container-queries-are-finally-here/
• Beyond CSS Media Queries, Juan Diego Rodríguez https://www.smashingmagazine.com/2024/05/beyond-css-media-queries/

Clean up your headings

• <h1>–<h6>: The HTML Section Heading elements, MDN contributors https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

• HTML for Subheadings and Headings, Chris Coyier https://css-tricks.com/html-for-subheadings-and-headings/

Add texts to icons/icons to text

• Fontawesome https://fontawesome.com/
• The Noun Project https://thenounproject.com/
• Flaticon https://www.flaticon.com/
• Tooltips in the time of WCAG 2.1, Sarah Higley https://sarahmhigley.com/writing/tooltips-in-wcag-21/
• Introducing the popover API, Una Kravetz https://developer.chrome.com/blog/introducing-popover-api/
• Semantics and the popover attribute: what to use when?, Hidde de Vries
  https://hidde.blog/popover-semantics/

Add transform/transition where only changed color before

• transform, Sara Cope https://css-tricks.com/almanac/properties/t/transform/
• transition, Sara Cope https://css-tricks.com/almanac/properties/t/transition/
• CSS Transitions, W3C https://www.w3.org/TR/css-transitions-1/#animatable-properties

Improve “micro-interactions” like navigation switches

• No-hamburger Mobile Nav Toggle, Alyssa Panetta https://codepen.io/alyssapanetta/pen/OJwWvVX

• 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

NEWSLETTERS:

• The A11Y Project https://www.a11yproject.com/newsletter/

• Modern CSS Newsletter, Stephanie Eckles https://moderncss.dev/newsletter/

• CSS Weekly, Zoran Jambor https://newsletter.css-weekly.com/

• CSS Layout News, Rachel Andrew https://csslayout.news

• Frontend Focus https://frontendfoc.us/

• Webdev Newsletter (plain text listserv), University of Minnesota Deluth https://www.d.umn.edu/itss/training/online/webdesign/webdev_listserv.html

Links by Topic

COGNITIVE ACCESSIBILITY:

• 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

• Cognitive Load Theory Explained, IDOL courses https://www.youtube.com/watch?v=i1Gck0-tpno

• The Negative Impact of Mobile-First Web Design on Desktop, Kim Salazar, Tim Neusesser and Nishi Chitale [Nielsen Norman Group] https://www.nngroup.com/articles/content-dispersion/

• Content Dispersion: Study Methodology, Kim Salazar, Tim Neusesser and Nishi Chitale [Nielsen Norman Group] https://www.nngroup.com/articles/content-dispersion-methodology/

• Increase Readability, Reduce Cognitive Load: Freeing Working Memory for Processing Meaning, Meaghan Crowley-Sullivan, M.Ed., M.A. https://readabilitymatters.org/articles/increase-readability-reduce-cognitive-load

• 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

• UX Principles that include Cognitive Accessibility, Gareth Ford Williams https://uxdesign.cc/adhd-dyslexic-perspective-on-cognitive-accessibility-using-cognitive-ux-design-principles-f46349a609d6

• Accessibility Training Experience Lab: Cognitive Exercises, Minnesota IT Services https://mn.gov/mnit/about-mnit/accessibility/training/experience-lab/cognitive.jsp

• Neurodiversity Design System, Will Soward https://neurodiversity.design

• Accessible Target Sizes, Lupe, Craft CMS https://craftcms.com/blog/accessible-target-sizes

• Photosensitive Epilepsy Analysis Tool (PEAT), Trace RERC, University of Maryland https://trace.umd.edu/peat/

• Form accessibility and usability beyond the basics, Whitney Lewis https://blog.pope.tech/2023/09/26/form-accessibility-and-usability-beyond-the-basics/

• ARIA, the good parts, Hidde de Vries https://talks.hiddedevries.nl/hDiDOG

• Nine things automated accessibility tests can’t test, Dave Rupert https://daverupert.com/2023/10/nine-a11y-jobs-where-robots-suck/

• Voice User Interfaces: Seamless Interactions, Morrison Kristan https://www.uxmatters.com/mt/archives/2023/10/voice-user-interfaces-seamless-interactions.php

• Squint Test, Nielsen Norman Group https://www.nngroup.com/videos/squint-test/

• Making the Web Accessible: A Focus on Cognitive Disabilities, Melissa Morse https://www.tpgi.com/making-the-web-accessible-a-focus-on-cognitive-disabilities/

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

• New DIALOG Element

  • The New dialog HTML Element Changes Modals Forever, Web Dev Simplified https://www.youtube.com/watch?v=ywtkJkxJsdg
  • Dialog, Learn HTML! Chrome Dev Rel https://web.dev/learn/html/dialog/

CSS:

• 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
  • New Clamp() Calculator: https://utopia.fyi/clamp/calculator

• Visual design rules you can safely follow every time, Anthony Hobday https://anthonyhobday.com/sideprojects/saferules/

• The Guide To Responsive Design In 2023 and Beyond, Ahmad Shadeed https://ishadeed.com/article/responsive-design/

• Learn CSS Positioning, Ahmad Shadeed https://ishadeed.com/article/learn-css-positioning/

• Learn Box Alignment, Ahmad Shadeed https://ishadeed.com/article/learn-box-alignment/

• Designing better target sizes, Ahmad Shadeed https://ishadeed.com/article/target-size/

• 100 Days Of More Or Less Modern CSS, Manuel Matuzović https://www.matuzo.at/blog/2022/100-days-of-more-or-less-modern-css/

• Weekly front-end web development & design tips, tricks, and tutorials, Kevin Powell https://www.youtube.com/@KevinPowell

• Useful & Responsive Layouts, no Media Queries required, Kevin Powell https://www.youtube.com/watch?v=p3_xN2Zp1TY

• Conquering Responsive Layouts (free course), Kevin Powell https://courses.kevinpowell.co/conquering-responsive-layouts

• Every Layout, Heydon Pickering & Andy Bell https://every-layout.dev/ ($69 for full access)

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

CONTAINER QUERIES:

• A Primer On CSS Container Queries, by Stephanie Eckles https://www.smashingmagazine.com/2021/05/complete-guide-css-container-queries/

  • Use the Right Container Query Syntax, by Miriam Suzanne https://www.oddbird.net/2022/08/18/cq-syntax/

• A CodePen collection of container query examples by Miriam Suzanne https://codepen.io/collection/XQrgJo

• CSS container queries are finally here, by Ahmad Shadeed https://ishadeed.com/article/container-queries-are-finally-here/

• Day 56: container queries, by Manuel Matuzović https://www.matuzo.at/blog/2022/100daysof-day56/

INTEROP PROJECT:

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

See Also

• Living the UX: When a web developer develops a disability, Alyssa Panetta https://github.com/alyssapanetta/developing-a-disability/

  • SLIDES

  • 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

  • Modern CSS Notes and Resources start at:

  • https://github.com/alyssapanetta/developing-a-disability#modern-css-to-the-rescue

Feel free to reach out anytime

@alyssa@drupal.community on Mastadon apanetta.bsky.social

apanetta@albany.edu

Meet Talula

https://deartalula.com