+++ WEB DESIGN UPDATE. - Volume 19, Issue 38, March 17, 2021. An email newsletter to distribute news and information about web design and development. ++ISSUE 38 CONTENTS. SECTION ONE: New references. What's new at the Web Design Reference site? https://www.d.umn.edu/itss/training/online/webdesign/ New links in these categories: 01: ACCESSIBILITY. 02: CASCADING STYLE SHEETS. 03: EVALUATION & TESTING. 04: EVENTS. 05: HTML. 06: INFORMATION ARCHITECTURE. 07: JAVASCRIPT. 08: MISCELLANEOUS. 09: NAVIGATION. 10: TYPOGRAPHY. 11: USABILITY. 12: WEBWASTE & SUSTAINABILITY. SECTION TWO: 13: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Good, Better, Best: Untangling The Complex World Of Accessible Patterns By Carie Fisher. "How do we know which patterns are good, better, best when it comes to accessibility? Is it better to use an established pattern/library or create new ones? With the myriad of choices available, we can quickly become caught up in a web of confusion on this topic…" https://www.smashingmagazine.com/2021/03/good-better-best-untangling-complex-world-accessible-patterns/ Tooltip Accessibility Demo By Sarah Higley. "A few examples of simple tooltips serving as the name or description of buttons and form fields. They work with mouse and keyboard, and are dismissable with Escape or by clicking the "x". This allows the tooltips to meet WCAG 2.1 Content on Hover or Focus…" https://codepen.io/smhigley/pen/KjoerX Adobe Inclusive Design Workshop By Adobe. (Hat tip to Matt May) "Content for a full-day workshop on inclusive design, including workbook modules, exercises, and (eventually) slides…" https://github.com/adobe-inclusive-design/id-workshop Re-Upped: Short Note on the Disabled/Aria-Disabled Attributes By Steve Faulkner. "The HTML disabled attribute can be used on a limited set of HTML elements: button, input, select, textarea, option, optgroup, fieldset, or form-associated custom elements (currently supported in Chrome only)…" https://html5accessibility.com/stuff/2021/03/15/re-upped-short-note-on-the-disabled-aria-disabled-attributes/ Axe-con: Yes, Virginia, PMs Are Responsible for Accessibility By Deborah Edwards-Onoro. "…In her Yes, Virginia, PMs are Responsible for Accessibility presentation at the axe-con two-day conference, Angela Hooker discussed how PMs can take responsibility for producing accessible projects and provided actionable tips. Here are my notes from her talk…" https://www.lireo.com/axe-con-project-managers-responsible-for-accessibility/ Axe-con: The Future of Accessibility with Vint Cerf By Deborah Edwards-Onoro. "Making a piece of software accessible to people with a broad range of disabilities is hard, says Vint Cerf, widely recognized as one of the 'Fathers of the Internet.'…" https://www.lireo.com/axe-con-the-future-of-accessibility-with-vint-cerf/ There's No Such Thing as a Website or Web App That Doesn't Need to be Accessible By Chris Ferdinandi. "…Today, I wanted to unpack some presumptions and misunderstandings about accessibility, and what our job as web professionals is…" https://gomakethings.com/theres-no-such-thing-as-a-website-or-web-app-that-doesnt-need-to-be-accessible/ How (Not) to Make Accessible Data Visualizations, Illustrated by the US Presidential Election By Sarah L. Fossheim. "…Let's take a look at some important aspects of accessible data visualizations, based on what The New York Times, CNN, FiveThirtyEight, The Guardian and Fox News are doing right and wrong…" https://fossheim.io/writing/posts/accessible-dataviz-us-elections/ Overlay Fact Sheet By Karl Groves, et al. "Overlays are a broad term for technologies aimed at improving the accessibility of a website by applying third-party source code (typically JavaScript) to make improvements to the front-end code of the website…" https://overlayfactsheet.com/ +02: CASCADING STYLE SHEETS. User Preference Media Features - CSS Polyfill By Niklas Schildhauer. "In the scope of my bachelor thesis about 'CSS Media Queries Level 5 - Potentials for personalisation and implementation as polyfill', the new prefers- media features from the Media Queries Level 5 were examined. In addition, further user preference media features were investigated. These are taken from the List of personalization media features of the W3C APA working group…" https://gitlab.mi.hdm-stuttgart.de/ns107/ba-mq5 Takeaways from "If It's Interactive, It Needs a Focus Style" By Deborah Edwards-Onoro. "At the March 2020 Chicago Digital Accessibility and Inclusive Design virtual meetup, Eric Bailey explained the importance of inclusive design in creating focus styles for interactive web elements…" https://www.lireo.com/takeaways-interactive-needs-focus-style/ Good News About display: Contents and Chrome By Rachel Andrew. "Using display: contents should allow us to use semantic elements to ensure that our content is understandable by accessibility technology, while also not displaying boxes for those elements…" https://rachelandrew.co.uk/archives/2021/03/11/good-news-about-display-contents-and-chrome/ CSS Grid Cheat Sheet Illustrated in 2021 By Joy Shaheb. "Let's refresh Our CSS Grid Memory. Here's a Cheat Sheet of everything you can do with Grid to get started in 2021️…" https://dev.to/joyshaheb/css-grid-cheat-sheet-illustrated-in-2021-1a3 Eric in Igalia, What's Coming, CSS Nesting and Cascading Layers (Podcast) By Bruce Lawson, Vadim Makeev, and Eric Meyer. 'Bruce, Vadim, and Eric on what's coming, CSS Nesting and Cascading Layers. https://f-word.dev/episodes/10/ +03: EVALUATION & TESTING. Four Reasons Why Research Participants Forget By Jeff Sauro and Jim Lewis. "…Groves et al. (2009) describe four types of memory problems that can affect the accuracy of answers to questions…" https://measuringu.com/four-reasons-for-forgetting/ Comparing Qualitative and Quantitative UX Research (Video) By Sarah Gibbons. "Qualitative and quantitative are both useful types of user research, but involve different methods and answer different questions for your UX design process. Use both!" https://www.nngroup.com/videos/qual-vs-quant-ux-research/ The State Of Mobile And Why Mobile Web Testing Matters By Kelvin Omereshone. "With mobile traffic accounting for over 50% of web traffic these days, leaving your mobile performance unoptimized isn't really an option. In this article, we'll discuss the complexity and challenges of mobile, and how mobile testing tools can help us with just that…" https://www.smashingmagazine.com/2021/03/mobile-app-web-testing/ +04: EVENTS. Web Accessibility Testing Tools March 25, 2021. (AEDT) Online https://events.humanitix.com/digital-access-free-webinar-web-accessibility-testing-tools The Direction of Accessibility Guidelines - What UX Pros Need to Know March 31, 2021. Online https://www.eventbrite.com/e/the-direction-of-accessibility-guidelines-what-ux-pros-need-to-know-tickets-144058991321 UX Camp - Chicago April 3, 2021. Online https://chicagocamps.org/events/2021/ux-camp-spring-home-edition/ TechAccess Oklahoma 2021 April 20-22, 2021. Online https://techaccessok.org/ EduALL Virtual Summit April 22, 2021. Online https://info.verbit.ai/eduall-virtual-summit-april-2021 WAS Series: Multimedia, Animations, and Motion April 22, 2021. Online https://www.meetup.com/A11YPrinceton/events/275686120/ Document Accessibility Virtual Workshop April 28-29, 2021. Online https://webaim.org/training/virtualdocs/ Cultivating Accessible Cultures in Associations May 4, 2021. Online https://www.accessibilityassociation.org/content.asp?admin=Y&contentid=751 +05: HTML. Focus Management and inert (Updated Article) By Eric Bailey. "…The inert attribute is a global HTML attribute that would make removing, then restoring the ability of interactive elements to be discovered and focused a lot easier…" https://css-tricks.com/focus-management-and-inert/ Testing fieldset and legend with div and spaninside it, with JAWS and NVDA By David MacDonald. "…Using JAWS or NVDA tab into the first or second radio groups, the legend is not announced. Tab into the third group and the legend is announced…" https://www.davidmacd.com/blog/fieldset-div-span.html +06: INFORMATION ARCHITECTURE. Crisis Information Architecture By Peter and Claire Morville. "…The first step is to build shared understanding of the problem. Only then can we design solutions that fit, given a particular cultural context and the nature of information in systems. Language and classification are pivotal to both problem and solution, because crisis management is built on communication and collaboration. We're at a turning point, and the stakes are high. The time is right for crisis information architecture." https://semanticstudios.com/crisis-information-architecture/ Asset Mapping for Experience Consistency By Anna Kaley. "Asset maps display and organize the screens and elements users encounter along workflows and journeys. They provide a systematic way of analyzing the consistency of an organization's experience across channels." https://www.nngroup.com/articles/asset-mapping/ +07: JAVASCRIPT. React Aria By Adobe. (Hat tip to Matt May) "A library of React Hooks that provides accessible UI primitives for your design system…" https://react-spectrum.adobe.com/react-aria/ Rethinking the JavaScript Ternary Operator By James Sinclair. "More than just a 'clever' hack used by people who prefer brevity to clarity." https://jrsinclair.com/articles/2021/rethinking-the-javascript-ternary-operator/ The Difference Between Attributes and Properties in Vanilla JS By Chris Ferdinandi. "In JavaScript (the DOM, really), an element has attributes and properties. The terms are often used interchangeably, but they're actually two separate things…" https://gomakethings.com/the-difference-between-attributes-and-properties-in-vanilla-js/ My Last O'Reilly Book By Shelley Powers. "I sometimes miss the simpler days when an alert was your JavaScript best friend…" https://burningbird.net/my-last-oreilly-book/ +08: MISCELLANEOUS. AT Banter Episode 230 - Mike Gifford (Podcast) By AT Banter. "Things get off to a rocky start this episode with a cowbell malfunction, and things don't get much better as the boys rant about accessibility problems with the US vaccine websites. Luckily, long time listener, Accessibility Specialist, and Senior Strategist at Civic Actions Mike Gifford saves the day and infuses the show with some much needed positivity about the work he's involved in around digital accessibility and what the future may hold…" https://atbanter.com/2021/03/09/at-banter-episode-230-mike-gifford/ Web History Chapter 7: Standards By Jay Hoffmann. "It was the year 1994 that the web came out of the shadow of academia and onto the everyone's screens. In particular, it was the second half of the second week of December 1994 that capped off the year with three eventful days…" https://css-tricks.com/chapter-7-standards/ +09: NAVIGATION. How to Make "Read More" Links Accessible By Matt Putland. "Read more links are commonly used on websites, but they aren't very descriptive when read outside of their surrounding context. This isn't a problem for the majority of users on the web, but viewing links outside of their surrounding context is very common for blind screen reader users…" https://www.visionaustralia.org/services/digital-access/blog/how-to-make-read-more-links-accessible +10: TYPOGRAPHY. Stop Using Icon Fonts By Michael Irigoyen. "…icon fonts on the web were fundamentally flawed from the beginning. And now, with full SVG support at our disposal, it's time to put a stop to their use, once and for all…" https://www.irigoyen.dev/blog/2021/02/17/stop-using-icon-fonts/ +11: USABILITY. What Super Mario Taught Us About UX Design By Ward Andrews. "…your collection of UX skills learned from Mario becomes the design patterns, flows, information structures, and user observation skills to burn any monster UX challenge between you and your user's successful experience. Time to be the hero and save the day!" https://mediatemple.net/blog/design-creative/what-super-mario-taught-us-about-ux/ A Framework for CX Transformation: How to Operationalize CX at Scale By Kim Salazar. "To deliver high-quality omnichannel experiences, companies must develop an operational ecosystem that enables crossfunctional collaboration and quick reaction to customers' needs." https://www.nngroup.com/articles/framework-cx-transformation/ +12: WEBWASTE & SUSTAINABILITY. From Digital Unsustainability to Digital Sustainability By Gerry McGovern. "The homepage for my website (customercarewords.com) used to weigh 957 KB. Through a series of design decisions, we were able to bring the size down to 70 KB. With the exact same amount of content. With the exact same visual design. A 93% saving in the CO2 pollution that page created…" https://gerrymcgovern.com/from-digital-unsustainability-to-digital-sustainability/ [Section one ends.] ++ SECTION TWO: +13: What Can You Find at the Web Design Reference Site? Accessibility Information. https://www.d.umn.edu/itss/training/online/webdesign/accessibility.html Association Information. https://www.d.umn.edu/itss/training/online/webdesign/associations.html Book Listings. https://www.d.umn.edu/itss/training/online/webdesign/books.html Cascading Style Sheets Information. https://www.d.umn.edu/itss/training/online/webdesign/css.html Color Information. https://www.d.umn.edu/itss/training/online/webdesign/color.html Drupal Information. https://www.d.umn.edu/itss/training/online/webdesign/drupal.html Evaluation & Testing Information. https://www.d.umn.edu/itss/training/online/webdesign/testing.html Event Information. https://www.d.umn.edu/itss/training/online/webdesign/events.html HTML Information. https://www.d.umn.edu/itss/training/online/webdesign/html.html Information Architecture Information. https://www.d.umn.edu/itss/training/online/webdesign/architecture.html JavaScript Information. https://www.d.umn.edu/itss/training/online/webdesign/javascript.html Miscellaneous Web Information. https://www.d.umn.edu/itss/training/online/webdesign/misc.html Navigation Information. https://www.d.umn.edu/itss/training/online/webdesign/navigation.html PHP Information. https://www.d.umn.edu/itss/training/online/webdesign/php.html Sites & Blogs Listing. https://www.d.umn.edu/itss/training/online/webdesign/sites.html Standards, Guidelines & Pattern Information. https://www.d.umn.edu/itss/training/online/webdesign/standards.html Tool Information. https://www.d.umn.edu/itss/training/online/webdesign/tools.html Typography Information. https://www.d.umn.edu/itss/training/online/webdesign/type.html Usability Information. https://www.d.umn.edu/itss/training/online/webdesign/usability.html WebWaste & Sustainability Information. https://www.d.umn.edu/itss/training/online/webdesign/webwaste.html XML Information. https://www.d.umn.edu/itss/training/online/webdesign/xml.html [Section two ends.] ++END NOTES. + SUBSCRIPTION INFO. WEB DESIGN UPDATE is available by subscription. For information on how to subscribe and unsubscribe please visit: https://www.d.umn.edu/itss/training/online/webdesign/webdev_listserv.html The Web Design Reference Site also has a RSS 2.0 feed for site updates. + TEXT EMAIL NEWSLETTER (TEN). As a navigation aid for screen readers we do our best to conform to the accessible Text Email Newsletter (TEN) guidelines. Please let me know if there is anything else we can do to make navigation easier. For TEN guideline information please visit: http://www.headstar.com/ten + SIGN OFF. Until next time, Laura L. Carlson Information Technology Systems and Services University of Minnesota Duluth Duluth, MN U.S.A. 55812-3009 mailto:lcarlson@d.umn.edu [Issue ends.]