+++ WEB DESIGN UPDATE. - Volume 19, Issue 31, January 27, 2021. An email newsletter to distribute news and information about web design and development. ++ISSUE 31 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: JAVASCRIPT. 07: MISCELLANEOUS. 08: TOOLS. 09: USABILITY. 10: WEBWASTE & SUSTAINABILITY. SECTION TWO: 11: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. WCAG 3 FPWD Published By Jeanne F. Spellman. "The Accessibility Guidelines Working Group (AG WG) announces the First Public Working Draft of W3C Accessibility Guidelines (WCAG) 3.0…" https://www.w3.org/blog/2021/01/wcag-3-fpwd/ WCAG 3 Introduction Shawn Lawton Henry, Editor and Jeanne F. Spellman, Contributor. "This page introduces the in-progress W3C Accessibility Guidelines (WCAG) 3.0 Working Draft. It explains how WCAG 3 is related to WCAG 2…" https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/ An Insider Look at WCAG 3.0 By Jeanne Spellman. "The First Public Working Draft of W3C Accessibility Guidelines (WCAG) 3.0 is ready for public feedback…" https://jspellman-77432.medium.com/an-insider-look-at-wcag-3-0-276e9b964a33 Silver (WCAG 3.0) First Public Working Draft Released By Sheri Byrne-Haber. February 26, 2021, is the deadline to submit comments. https://sheribyrnehaber.medium.com/silver-wcag-3-0-first-public-working-draft-released-15f765b9525e What to Expect From The First Public Working Draft of WCAG 3.0 By Wilco Fiers. "…WCAG is the most important standard in digital accessibility, so a new version is certain to shake things up. This article is the first in a series of two. In this first article, we take a closer look at what the W3C is proposing to change in WCAG 3.0. In part 2, we will give some of the background on WCAG, and how this new version came to be…" https://www.deque.com/blog/first-public-working-draft-wcag-3/ First Public Working Draft of WCAG 3.0, A Brief History By Wilco Fiers. "…To really understand why some of the changes are the way they are, it is worth understanding how they came about. In this article, we will explore what got WCAG to where it is today, and what the goals are for WCAG 3.0…" https://www.deque.com/blog/public-working-draft-wcag-3-history/ My Priority of Methods for Labeling a Control By Adrian Roselli. "Here is the priority I follow when assigning an accessible name to a control…" https://adrianroselli.com/2020/01/my-priority-of-methods-for-labeling-a-control.html Accessibility Specialists Need to Look Beyond Conformance By Julie Romanowski. "Too many accessibility specialists understand Web Content Accessibility Guidelines (WCAG) but don't understand how conformance issues may or may not impact people with disabilities (PwD)…" https://www.lireo.com/accessibility-specialists-look-beyond-conformance/ Takeaways from So, How Do I Know if my WordPress Website is Accessible? By Deborah Edwards-Onoro. "Last week I joined hundreds of WordPress bloggers, designers, developers, digital marketers, and content specialists around the world at WordFest Live 2021, an online celebration of WordPress…" https://www.lireo.com/takeaways-wordpress-website-accessible/ Let's do a quick #a11y review… By Eric Bailey. "…of the first website for each voting category for @AWWWARDS' best of 2020…This isn't a call out of the websites featured, in that I'm just grabbing them off the top of the stack. It is, however, a condemnation of best-of lists that don't take accessibility into account…" https://twitter.com/ericwbailey/status/1351243179060768778 Are Accessibility Overlays Overbaked? By Lynn Wehrman. "Our Accessibility Team and Client Relations Specialists deal with many confused clients, wondering why they can't just pop an accessibility overlay or a user tool, on their website and call it 'accessible.'…" https://theweco.com/overlays-are-overbaked/ Did You Know? Audio Description is Required by Law By Elisa Edelberg. "…It's important to be aware of the current audio description laws so that you can get in compliance, provide accessible content, and avoid any future legal action. There are 253 million people living with vision impairment who are waiting for you to take the next step. When all is said and done, providing AD and accessible video is the right thing to do…" https://www.3playmedia.com/blog/did-you-know-audio-description-is-required-by-law/ Making a Proposal and Grant Management System Accessible for All By Michael Lind Varien. "Building a system that meets the state digital accessibility standard for all users…" https://mn.gov/mnit/media/blog/?id=38-463816 What Does the Biden Presidency Mean for Accessibility? By Karl Groves. "… predict that the Biden DOJ will do two important things: 1. Kickoff renewed efforts around Project Civic Access and; 2. Go through with a Final Rule clarifying the technical requirements for ADA conformance for the Web and Mobile apps…" https://blog.tenon.io/what-does-the-biden-presidency-mean-for-accessibility +02: CASCADING STYLE SHEETS. A Simple Custom By Steve Faulkner. "For whatever reason some people don't like the standard HTML checkbox and radio button, they seek to jazz 'em up and in the process the often jizz up the usability/accessibility of these controls…" https://html5accessibility.com/stuff/2021/01/24/a-simple-custom/ CSS "Scroll-linked animations" By Alastair Campbell. …Is exactly the kind of animation where devs should use the reduce-motion media query…" https://twitter.com/alastc/status/1353859992579923971 CSS Cascading and Inheritance Level 5 First Public Working Draft By Miriam Suzanne. "The CSS Working Group has published a First Public Working Draft of CSS Cascading and Inheritance Level 5. This CSS module describes how to collate style rules and assign values by way of cascading and inheritance…" https://www.w3.org/blog/CSS/2021/01/22/css-cascading-5-fpwd/ HTML and CSS Still Isn't About Painting With Code By Chris Heilmann. "…HTML isn't about look and feel. It is about structure. It means giving text content structure and link the web. We should use HTML elements not because how they look. We should use them for what they represent. And what functionality they should trigger in a browser…" https://christianheilmann.com/2021/01/21/teaching-html-and-css/ +03: EVALUATION & TESTING. Evaluating NPS Confidence Intervals With Real-World DATA By Jim Lewis and Jeff Sauro. "The Net Promoter Score (NPS) is a popular business metric used to track customer loyalty. It uses a single likelihood-to-recommend (LTR) question ('How likely is it that you will recommend our company to a friend or colleague?') with 11 scale steps from 0 (Not at all likely) to 10 (Extremely likely)…" https://measuringu.com/nps-three-confidence-intervals/ Measuring Design Quality With Heuristics By Jasmine Friedl. "…To evaluate, a small group of us sat down after every product launch and did a lightweight review of the work that was shipped. We answered a simple yes or no to each question and implemented a formula to give a quality percentage score (100 for yes, 0 for no)…" https://uxdesign.cc/measuring-design-quality-with-heuristics-44857efa514 +04: EVENTS. TheJam.dev 2021 January 28-29, 2021. Online https://cfe.dev/events/the-jam-2021/ UXCamp DC January 30, 2021. Online http://uxcampdc.com/ Interaction 21 January 31-February 5, 2021. Online https://interaction21.ixda.org/ Web Con 2021 April 7-9, 2021. Champaign, Illinois, U.S.A. http://webcon.illinois.edu/ WAS Series: Designing an Accessible User Experience February 11, 2021. Online https://www.meetup.com/A11YPrinceton/events/275685793/ National ADA Symposium On Site: July 25-28, 2021 Phoenix, Arizona, U.S.A. Online: August 2-5, 2021 http://www.adasymposium.org/ UXPA International 2021 Conference August 30-September 2, 2021. Baltimore, Maryland, U.S.A https://uxpa.org/uxpa-2021/ HighEdWeb Annual Conference October 3-6, 2021. Buffalo, New York, U.S.A https://2021.highedweb.org/ +05: HTML. Responsible Web Applications By Joy Heron. "Luckily, with modern HTML and CSS, we can create responsive and accessible web apps with relative ease. In my years of doing software development, I have learned some HTML and CSS tips and tricks, and I want to present these in this post. This list is not exhaustive, but these are tried and true patterns that I frequently use in different projects…" https://responsibleweb.app/ HTML: The 16 Content Categories and Their Elements By Jens Oliver Meiert. "HTML puts elements in categories, so-called content categories. The specification describes these in the sections on kinds of content and element content categories.…" https://meiert.com/en/blog/html-content-categories/ Intent to Prototype: HTMLPopupElement - By Mason Freed. "Summary - A new HTML element, , which can be used to build transient user interface (UI) elements that are displayed on top of all other web app UI. These include user-interactive elements like action menus, form element suggestions, content pickers, and teaching UI. This new element is similar to , but has several important differences, including light-dismiss behavior, anchoring, and the lack of a "modal" mode. " https://groups.google.com/a/chromium.org/g/blink-dev/c/9y-Thg9UCxY/m/hJAobRTIAQAJ +06: JAVASCRIPT. Destructing in Vanilla JS By Chris Ferdinandi. "Yesterday, we looked at the spread syntax. Today, we're going to take a look at another cool modern JS feature: destructuring…" https://gomakethings.com/destructing-in-vanilla-js/ The for...of Loop in Vanilla JS By Chris Ferdinandi. "…Today, I want to look at a simple, humble modern feature: the for...of loop…" https://gomakethings.com/the-for...of-loop-in-vanilla-js/ Creating Comic Book Speech Bubbles With SVG and Javascript By Paul Spencer. "…The trickiest part of this experiment was how to accessibly render comic book dialogue, most commonly presented as text in speech bubbles. Webcomics have traditionally steered clear of this obstacle by making the text part of the image, but we wanted to explore whether it could be done using SVG and javascript. Short answer: It CAN be done. And here is how we did it…" https://humaan.com/blog/creating-comic-book-speech-bubbles-with-svg-and-javascript/ +07: MISCELLANEOUS. Letters of Exclusion By Jeremy Keith. "I think my co-workers are getting annoyed with me. Any time they use an acronym or initialism-either in a video call or Slack-I ask them what it stands for. I'm sure they think I'm being contrarian…" https://adactio.com/journal/17770 Q&A With Sharron Rush, Executive Director, Knowbility By Equal Entry. "…I would like to see new and emerging tools and technologies that are born accessible - usable on both the front end and the back end so that people with disabilities can be online producers as well as consumers…" https://equalentry.com/qa-with-sharronrush-executivedirector-knowbility/ The Biden administration quickly revamped the White House website. Here's how. By Bryan Pietsch. "…An accessibility statement on the site reads: 'This commitment to accessibility for all begins with this site and our efforts to ensure all functionality and all content is accessible to all Americans." https://www.nytimes.com/2021/01/20/us/politics/biden-white-house-website.html +08: TOOLS. ButtonBuddy By Stephanie Eckles. "Accessible button contrast generator. Learn what it takes to ensure your buttons or button-styled links have accessible contrast across all states and surfaces, then use the generator to check and adjust your button palette." https://buttonbuddy.dev/ Privacy-Aware JPEG Optimizer By Tommaso Pifferi. "The images you upload never leave your device: all the processing is done entirely in the browser…" https://jpeg.rocks/ +09: USABILITY. Design for the Elderly (Video) By Don Norman. "Problems arise when people get older, but that just means opportunities for better design to support elderly users. The very best designs will help the elderly, but also be adapted by everybody else." https://www.nngroup.com/videos/design-elderly/ Aesthetic and Minimalist Design (Usability Heuristic #8) By Therese Fessenden. "Aesthetically pleasing designs can provide memorable experiences that differentiate a brand. However, interfaces should only include necessary elements, with high informational value. Clarity will always win over visual flourish." https://www.nngroup.com/articles/aesthetic-minimalist-design/ Mapping User Stories in Agile By Anna Kaley. "User-story maps help Agile teams define what to build and maintain visibility for how it all fits together. They enable user-centered conversations, collaboration, and feature prioritization to align and guide iterative product development." https://www.nngroup.com/articles/user-story-mapping/ Understanding Mobile E-Commerce UX: 5 Overarching Issues By Edward Scott. "…These 5 issues are foundational to understanding the mobile user experience, particularly regarding how it differs from desktop, and highlight the unique challenges mobile users face when shopping online: 1.) A Lack of Page Overview, 2.) A Sense of Disorientation, 3.) Tech Issues and Quirks, 4.)Inadvertent or Unregistered Taps or Selections, 5.)External Interruptions…" https://baymard.com/blog/mobile-commerce-design +10: WEBWASTE & SUSTAINABILITY. Embracing Sustainable Digital Design (Part 3) By Gerry McGovern. @gerrymcgovern "…We must shift to a culture of information maintenance. 'Valuing the time that people put into managing stuff, deleting stuff,' as Beth Stensen, CEO of Netlife explains. 'Finding out what's the most important things-the top tasks-and getting rid of all the other stuff. It often means deleting 90% of stuff…" https://gerrymcgovern.com/embracing-sustainable-digital-design-part-3/ [Section one ends.] ++ SECTION TWO: +11: 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.]