+++ WEB DESIGN UPDATE. - Volume 19, Issue 12, September 16, 2020. An email newsletter to distribute news and information about web design and development. ++ISSUE 12 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: COLOR. 04: DRUPAL. 05: EVALUATION & TESTING. 06: EVENTS. 07: HTML. 08: JAVASCRIPT. 09: MISCELLANEOUS. 10: TOOLS. 11: USABILITY. SECTION TWO: 12: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. A WCAG Overview - Web Content Accessibility Guidelines (WCAG) 2.1 and 2.0 Explained (Video) By Eric Eggert. "Hello! In this episode, I'll explain the structure to the Web Content Accessibility Guidelines (WCAG) and how you can start following their requirements…" https://www.youtube.com/watch?v=rIebSHUZz_w Latest Public Draft of WCAG 2.2 Features Nine New Success Criteria, Other Updates By Bureau of Internet Accessibility. The Web Content Accessibility Guidelines will soon be enhanced with the updates pending in WCAG 2.2. On August 11, W3C published its latest draft of WCAG 2.2, revealing a number of new success criteria since the first public draft published in February…" https://www.boia.org/blog/latest-public-draft-of-wcag-2.2-features-nine-new-success-criteria-other-updates Let's Make Accessibility Sustainable at Scale By Neil Milliken. "When you hear the word 'sustainability', do you immediately think of the environment, green energy and windmills…" https://atos.net/en/blog/lets-make-accessibility-sustainable-at-scale What to Look for in an Accessibility Audit By Glenda Sims. "If your organization is completely new to digital accessibility, an audit or assessment is a great place to start to see where your organization stands." https://www.deque.com/blog/what-to-look-for-in-an-accessibility-audit How to Talk to Stakeholders about Web Accessibility: A Presentation Template By Rachel Gallucci. "Hint: It's more emotion than logic…" https://uxdesign.cc/how-to-talk-to-stakeholders-about-web-accessibility-a-presentation-template-19bd512e805 +02: CASCADING STYLE SHEETS. Interaction Media Features and Their Potential (for Incorrect Assumptions) By Patrick H. Lauke. "…The Media Queries Level 4 Interaction Media Features - pointer, hover, any-pointer and any-hover - are meant to allow sites to implement different styles and functionality (either CSS-specific interactivity like :hover, or JavaScript behaviors, when queried using window.matchMedia), depending on the particular characteristics of a user's input devices…" https://css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions/ content-visibility: The New CSS Property that Boosts Your Rendering Performance By Una Kravets and Vladimir Levin. "Improve initial load time by skipping the rendering of offscreen content…" https://web.dev/content-visibility/ How to Use CSS Masking By Rachel Andrew. "When you clip an element using the clip-path property the clipped area becomes invisible…" https://web.dev/css-masking/ How to Use CSS Clipping By Rachel Andrew. "Elements on web pages are all defined inside a rectangular box. However that doesn't mean that we have to make everything look like a box. You can use the CSS clip-path property to clip away parts of an image or other element, to create interesting effects…" https://web.dev/css-clipping/ +03: COLOR. Accessible Color Standards - Designing in the Browser (Video) By Una Kravets. "Welcome to Designing in the Browser with our host, Una Kravets. Today we're talking about color contrast! We'll go over what the A, AA, and AAA conformance levels mean and how to ensure proper accessibility compliance for your own site. We'll go over how to use Chrome Developer Tools and preference media queries, such as 'prefers-color-scheme,' to make the right choices for your applications and design systems…" https://www.youtube.com/watch?v=sEDnmNtEaqQ +04: DRUPAL. Drupal 8 Migration: Migrating Hierarchical Taxonomy Terms By Kevin Porras. "When you migrate relations between two different entities, you usually migrate the target entities first and then the source entities…" https://evolvingweb.ca/blog/drupal-8-migration-migrating-hierarchical-taxonomy-terms +05: EVALUATION & TESTING. 7 Steps to Benchmark Your Product's UX By Alita Joyce. "Benchmark your UX by first determining appropriate metrics and a study methodology. Then track these metrics across different releases of your product by running studies that follow the same established methodology." https://www.nngroup.com/articles/product-ux-benchmarks/ Design Inquiry Through Data By P. Kun et al. "…The main research question we pursue in this dissertation is 'How can designers integrate data practices into design inquiry?' We address this question through conducting a Research-through-Design program to gain, on the one hand, a better understanding of how the fields of design and data science intersect, and on the other hand, to develop methodological contributions for future data-rich design practices. The resulting conceptual framework of Design Inquiry Through Data has been constructed throughout a series of empirical studies in which data-rich design practices are studied…" https://repository.tudelft.nl/islandora/object/uuid:7e914dd9-2b53-4b2c-9061-86087dbb93b9?collection=research When Remote Workshops Fail By Therese Fessenden. "For a successful remote workshop, pick the tools with low entry cost, plan timing carefully, and create the expectation for active participation." https://www.nngroup.com/articles/remote-workshop-fail/ +06: EVENTS. Inclusive Design 24 (#id24) September 17, 2020. Online https://inclusivedesign24.org/2020/ Accessibility Design Slam September 21, 2020. Online https://www.eventbrite.com/e/accessibility-design-slam-tickets-118866501907 Drupal GovCon September 24-25, 2020. Online https://www.drupalgovcon.org/ Angular and Accessibility Webinar September 29, 2020. Online https://accessibility.deque.com/angular-accessibility-webinar Accessibility: Why it Matters & What You Can Do September 29, 2020. Online https://www.meetup.com/Saint-Louis-Digital-Accessibility-Inclusive-Design/events/273155000/ UX Writing - A New Role for Technical Communicators? September 30, 2020. Online https://www.eventbrite.com/e/ux-writing-a-new-role-for-technical-communicators-tickets-118878445631 12 Things You Need to Know About WCAG 2.1: How it Impacts Your Work & Laws Around the Globe October 1, 2020. Online https://go.3playmedia.com/wbnr-10-01-2020-wcag Upgrading Your Drupal 7 Website: The Time is Now October 1, 2020. Online https://www.eventbrite.com/e/upgrading-your-drupal-7-website-the-time-is-now-tickets-117806734113 An Event Apart, Online Together - Fall Summit October 26-28, 2020. Online https://aneventapart.com/event/online-1020 +07: HTML. Tooltips: Investigation into Four Parts (Video) By Sarah Higley. "Tooltips are both ubiquitous and originally designed on a fundamentally inaccessible premise: that all users can see and primarily navigate with a mouse. We're going to take a look at why tooltips continue to have so many accessibility problems, where the standards fall short, and some concrete recommendations and alternatives…" https://www.youtube.com/watch?v=lb0_v7D4kbs Source Order Viewer in Edge 86 By Adrian Roselli. "Edge 86 has introduced a feature that shows the source order of a page…" https://adrianroselli.com/2020/09/source-order-viewer-in-edge-86.html +08: JAVASCRIPT. Callbacks vs. Custom Events in Vanilla JS By Chris Ferdinandi. "In your websites and web apps, you may occasionally want to run some code in response to something that happens…" https://gomakethings.com/callbacks-vs.-custom-events-in-vanilla-js/ +09: MISCELLANEOUS. AVIF has Landed By Jake Archibald. "…AVIF is a new image format derived from the keyframes of AV1 video. It's a royalty-free format, and it's already supported in Chrome 85 on desktop. Android support will be added soon, Firefox is working on an implementation, and although it took Safari 10 years to add WebP support, I don't think we'll see the same delay here, as Apple are a member of the group that created AV1. What I'm saying is, the time to care about AVIF is now…" https://jakearchibald.com/2020/avif-has-landed/ Mobile Devices are Too Expensive for Billions of People - and It's Keeping Them Offline By Teddy Woodhouse. "Mobile devices, once seen as consumer luxuries, are today the essential first step to getting online. But for billions of people around the world, they remain too expensive. That's the conclusion of new research from the Alliance for Affordable Internet and the Web Foundation, looking at the affordability of mobile devices in 70 low and middle-income countries…" https://a4ai.org/mobile-devices-are-too-expensive-for-billions-of-people-and-its-keeping-them-offline/ +10: TOOLS. No Mouse Days By Marcy Sutton. "Ever wanted a package that disables the mouse cursor one day a week so you can test keyboard accessibility as a team? No? Well here you go anyway. This package can be installed into a modern JavaScript app to inject a CSS styling developer tool that disables the mouse cursor. It's intended to encourage development of better keyboard support through browser testing (you are testing, aren't you?)…" https://github.com/marcysutton/no-mouse-days A Simple, Accessible Modal Dialog Web Component By Filament Group. "This modal is built to be easy to use, dependency-free (aside from feature polyfills), and accessible. It can be opened and closed programatically or via links in a page, contains behavior to gracefully support keyboard use (including focus management, focus isolation, and closing via escape key), and is tested for optimal accessibility for assistive technology. It also supports chaining of modals, meaning that if you link to another modal from within a modal, the new modal will cause the prior modal to close when it opens…This modal is built to be easy to use, dependency-free (aside from feature polyfills), and accessible. It can be opened and closed programatically or via links in a page, contains behavior to gracefully support keyboard use (including focus management, focus isolation, and closing via escape key), and is tested for optimal accessibility for assistive technology. It also supports chaining of modals, meaning that if you link to another modal from within a modal, the new modal will cause the prior modal to close when it opens." https://filamentgroup.github.io/fg-modal/demo/ +11: USABILITY. Component Driven User Interfaces By Component Driven. "The development and design practice of building user interfaces with modular components. UIs are built from the 'bottom up' starting with basic components then progressively combined to assemble screens…" https://www.componentdriven.org/ How to Simplify Your Design By Taras Bakusevych. "Companies are in constant pursuit of building simple and usable products. More features, new technologies, and advanced capabilities but still in a lightweight and simple to use format. More often than not, making it simple is the hardest thing there can be…" https://uxmag.com/articles/how-to-simplify-your-design Mask Interaction Delays with Progress Indicators (Video) By Katie Sherwin. "In case of slow response times in a user interface, indicate that the wait time will soon be over by showing an animation. For longer delays use a percent-done indicator." https://www.nngroup.com/videos/progress-indicators/ [Section one ends.] ++ SECTION TWO: +12: 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 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.]