+++ WEB DESIGN UPDATE. - Volume 20, Issue 25, December 14, 2021. An email newsletter to distribute news and information about web design and development. ++ISSUE 25 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: NAVIGATION. 09: TOOLS. 10: USABILITY. 11: WEBWASTE & SUSTAINABILITY. SECTION TWO: 12: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Testing WCAG 2.1 Level AAA By Ian Pouncey. "In our second post on WCAG 2.1 Level AAA, we discuss how to test against various Level AAA success criteria…" https://tetralogical.com/blog/2021/12/09/testing-wcag-level-aaa/ WCAG 2.2: What We Know Till Now By Aditya Bikkani. "In this post, we are discussing the latest updates on WCAG 2.2 as we hear and know…" https://www.digitala11y.com/wcag-2-2-what-we-know-till-now/ Explainer for W3C Accessibility Guidelines (WCAG) 3.0 Jeanne Spellman, Shawn Lauriat, Michael Cooper, Editors. "This Explainer accompanies the drafts of the W3C Accessibility Guidelines (WCAG) 3.0…" https://www.w3.org/TR/wcag-3.0-explainer/ WCAG 3 is Not Ready Yet By Eric Eggert. "And it won't be for quite some time…" https://yatil.net/blog/wcag-3-is-not-ready-yet WCAG 2 is What We Have By Kilian Valkhof. "…It's clear that WCAG 3 is the future, but what WCAG 3 is is not clear yet and won't be clear for years to come. Anything that's currently part of the draft is not based on consensus (yet) and can change at any moment. That's not something you want to use. Right now, WCAG 2 is what we have, and there are tons and tons of resources on using it well. So let's make good use of it." https://kilianvalkhof.com/2021/accessibility/wcag-2-is-what-we-have/ Building The Most Inaccessible Site Possible with Manuel Matuzović (Video) By Smashing Magazine. Manuel's Smashing Meets For All December 2021 presentation. https://vimeo.com/showcase/9087993/video/654497457 Under-Engineered Dependency Questions By Adrian Roselli. "A common interface pattern allows users to choose one item from a pre-defined set of choices, while still allowing them to add a custom selection if nothing else fits…" https://adrianroselli.com/2021/12/under-engineered-dependency-questions.html Small Steps: Celebrating Two Accessibility Wins in One Week By Deborah Edwards-Onoro. "If you're a longtime reader of my blog, you know I've been asking online publishers for years to improve the accessibility of their images, videos, and audio…" https://www.lireo.com/small-steps-celebrating-two-accessibility-wins-in-one-week/ Why Cognitive Function Tests Create Accessibility Issues By Bureau of Internet Accessibility. "…In the context of digital accessibility, a cognitive function test refers to a task that requires a user to remember, manipulate, or transcribe information. Some people have conditions that make these tasks difficult or impossible…" https://www.boia.org/blog/why-cognitive-function-tests-create-accessibility-issues 'Inclusive design' has become so widely used that it's meaningless. That has to change. By Aaron Chu. "…While inclusivity is undeniably important, the definition and implementation of inclusive design can be problematic. It often fails to treat disabled people as equals…" https://www.fastcompany.com/90697288/inclusive-design-has-become-so-widely-used-that-its-meaningless-that-has-to-change The ADA Lawsuit Settlement Involving an Accessibility Overlay By Sheri Byrne-Haber. "What the settlement agreement included, and what does it mean for the industry…" https://sheribyrnehaber.com/the-ada-lawsuit-settlement-involving-an-accessibility-overlay/ Component Libraries, Accessibility and Transparency By Bruce Lawson. "…my boss had asked to write up how to evaluate third party libraries (indeed, any third party software). Here's some of what I wrote…" https://brucelawson.co.uk/2021/component-libraries-accessibility-and-transparency/ 2021 Digital Accessibility Legal Update with Lainey Feingold (Video) By Lainey Feingold. A recording and interactive transcript of Lainey's December 9 webinar. https://www.3playmedia.com/resources/recorded-webinars/wbnr-12-09-2021-legal-update/ +02: CASCADING STYLE SHEETS. Experimenting with Text and CSS background-clip By Adrian Roselli. "The CSS background-clip property controls how much a background extends under a box…" https://adrianroselli.com/2021/12/experimenting-with-text-and-css-background-clip.html Alternative Text for CSS Generated Content By Adrian Roselli. Adrian updated this article (new example, more browser testing, updated results). https://adrianroselli.com/2020/10/alternative-text-for-css-generated-content.html#Update01 Standardizing Focus Styles With CSS Custom Properties By Stephanie Eckles. "Take two minutes right now and visit your current project in a browser. Then, using only the Tab key, you should be able to navigate between interactive elements including buttons, links, and form elements…" https://css-tricks.com/standardizing-focus-styles-with-css-custom-properties/ Defensive CSS By Ahmed Shadeed. "Oftentimes, we wish that there was a way to avoid a certain CSS issue or behaviors from happening…" https://ishadeed.com/article/defensive-css/ Responsive iframes with the CSS aspect-ratio Property By Chris Ferdinandi. "Today, I want to show you can use a few lines of CSS to make your embedded iframes fully responsive…" https://gomakethings.com/responsive-iframes-with-the-css-aspect-ratio-property/ Breaking Out of the Box By Patrick Brosset. "What can we do with just thirty pixels? With Progressive Web Apps blurring the lines between apps and websites, Patrick Brosset helps us think outside of the rectangular box. Learn how Windows Controls Overlay can free us from forty years of design constraints telling us how applications should look. Thirty pixels, it turns out, are full of exciting design opportunities." https://alistapart.com/article/breaking-out-of-the-box/ +03: EVALUATION & TESTING. Select-All-That-Apply Versus Yes/No Forced Choice Items By Jim Lewis and Jeff Sauro. "…The main takeaway from the previous research summarized here is that a previously unexamined variable, forced choice grids versus a forced choice series, might account for differences in how closely selection frequencies match when collected with SATA and yes/no forced choice items…" https://measuringu.com/sata-vs-yes-no-forced-choice/ Test Your Product on a Crappy Laptop By Eric Bailey. "There is a huge and ever-widening gap between the devices we use to make the web and the devices most people use to consume it. It's also no secret that the average size of a website is huge, and it's only going to get larger. What can you do about this? Get your hands on a craptop and try to use your website or web app…" https://css-tricks.com/test-your-product-on-a-crappy-laptop/ Recognize Strategic Opportunities with Long-Tail Data By Evan Sunwall. "Be a strategic thinker by recognizing opportunities at scale with seemingly small and insignificant data." https://www.nngroup.com/articles/long-tail/ +04: EVENTS. Accessibility Mentoring Program January 2022. Online https://accessiblecommunity.org/mentoring/ Web Accessibility Techniques and Testing March 1-22, 2022. Online https://events.humanitix.com/web-accessibility-techniques-and-testing-virtual-march-vision-australia-2022 DrupalCon April 25-28, 2022. Portland, Oregon U.S.A. https://events.drupal.org/portland2022 +05: HTML. ARIA in HTML Steve Faulkner, Scott O'Hara, and Patrick H. Lauke, editors "W3C Recommendation 09 December 2021" https://www.w3.org/TR/2021/REC-html-aria-20211209/ Visual Styling vs. Semantic Meaning By Manuel Matuzović. "…in this very first episode I want to discuss a layout I found online…" https://www.youtube.com/watch?v=52eL1CCJdi8 +06: JAVASCRIPT. Hey Devs: live regions (aria-live, role=status, alert)… By David MacDonald. @davidmacd "…should be in the DOM at least 300ms before you inject the status message. Its best if live regions are parents to the injected div/span…" https://twitter.com/davidmacd/status/1469043390499201026 A Few Neat Things You Can Do with the Vanilla JS Spread Syntax Operator By Chris Ferdinandi. The spread syntax operator (...) takes an array or object (or other iterable) and expands its items into their own individual values. https://gomakethings.com/a-few-neat-things-you-can-do-with-the-vanilla-js-spread-syntax-operator/ +07: MISCELLANEOUS. Q&A With Alycia Anderson, TEDx Speaker and Corporate Inclusion Consultant By Equal Entry. "Alycia Anderson is an accomplished TEDx motivational speaker, published writer, corporate inclusion consultant, and founder of The Alycia Anderson Company…" https://equalentry.com/accessibility-activist-alycia-anderson/ +08: NAVIGATION. The Endless Search for "Here" in the Unhelpful "Click Here" Button By Eric Bailey. "Accessibility advocate Eric Bailey explains how 'click the button below' can be confusing to those of us who use the web differently. What if you're using a screen reader? What if there's no 'click' on your device?…" https://www.getstark.co/blog/the-endless-search-for-here-in-the-unhelpful-click-here-button Designing Better Links For Websites And Emails: A Guideline By Slava Shestopalov. "There are so many websites out there that have not considered the overall usability of their visually impaired users. When it comes to designing better links and sending better emails, Slava Shestopalov has a few tips on how to improve your website's experience while accessibility in mind." https://www.smashingmagazine.com/2021/12/designing-better-links-websites-emails-guideline/ +09: TOOLS. Analytics Tools Can't Track Screen Readers - and Shouldn't By Bureau of Internet Accessibility. "When beginning an accessibility initiative, there's a strong temptation to collect and analyze data…" https://www.boia.org/blog/analytics-tools-cant-track-screen-readers-and-shouldnt taba11y (Chrome Extension) By Peter Gould. "Visualise tab order with ease. taba11y calculates the tab order of all elements and displays it visually…" https://chrome.google.com/webstore/detail/taba11y/aocppmckdocdjkphmofnklcjhdidgmga +10: USABILITY. UX-Maturity Stage 5: Integrated By Kara Pernice. "Organizations at this stage are in an excellent position, with successful, sustainable UX practices and committed people." https://www.nngroup.com/articles/ux-maturity-stage-5/ What Rage Clicks Can Tell Us About User Experience By Jessica Graham. "Interacting with apps and websites can sometimes be frustrating. Have you ever encountered a link, button, or image that just won't respond the way you want it to, no matter how many times you click or tap? If so, you'll understand the concept of rage clicking…" https://www.uxbooth.com/articles/what-rage-clicks-can-tell-us-about-user-experience/ +11: WEBWASTE & SUSTAINABILITY. CO2 Caused by Developing a Software Feature By Gerry McGovern. "How much CO2 does creating a typical software feature cause? It's a complex question but that doesn't mean we can't get some CO2 guide figures…" https://gerrymcgovern.com/co2-caused-by-developing-a-software-feature/ Hat tip to Mike Gifford for the following: Reduce Your Website's Environmental Impact With a Carbon Budget By Michelle Barker. "As I write this, world leaders are gathering in Glasgow for COP26, the international climate change conference, in the attempt to halt (or at least slow down) catastrophic climate change by pledging to end their countries' dependence on fossil fuels…" https://css-tricks.com/reduce-your-websites-environmental-impact-with-a-carbon-budget/ A Sustainable Internet for All By Branch. Autumn 2021 Issue. https://branch.climateaction.tech/issues/issue-3/ Privacy-First, Carbon-Aware Web Analytics By Normally. "Cabin is a privacy-first, carbon-aware web analytics service. Built from the ground up on three core principles of respecting visitors' privacy, respecting the environment and having a beautiful product…" https://branch.climateaction.tech/issues/issue-3/cabin-privacy-preserving-carbon-aware-web-analytics-program/ Carbon Footprint of Unwanted Data-Use by Smartphones By CE Delft. "This article is an excerpt from a report commissioned by Greens/EFA and conducted by CE Delft called 'How Carbon footprint of unwanted date use by smartphones'…" https://branch.climateaction.tech/issues/issue-3/carbon-footprint-of-unwanted-data-use-by-smartphones/ We Need a Fossil-Free Internet by 20300 By Chris Adams. "A fossil free internet is an internet that has transitioned away from burning fossil fuels as its primary source of electricity and towards renewable sources in its place. In this piece, Chris Adams of the Green Web Foundation outlines why we need a fossil-free internet by 2030 and how to get there…" https://branch.climateaction.tech/issues/issue-3/we-need-a-fossil-free-internet-by-2030/ Beyond Single-Dimensional Metrics for Digital Sustainability By Abhishek Gupta. "Have you ever been working towards greening a piece of software, and then you check it against a tool to see if it made an impact and you end up disappointed?…" https://branch.climateaction.tech/issues/issue-3/beyond-single-dimensional-metrics-for-digital-sustainability/ Tech4Bad: When Do We Say No? By Ian Brooks, Minna Laurell Thorslund, Aksel Biørn-Hansen and Elena Somova. "Existing IT systems are enabling company activities that are unsustainable and damaging to the environment…" https://branch.climateaction.tech/issues/issue-3/tech4bad-when-do-we-say-no/ Green Tech: What Solutions Are Being Advocated? By Anne Currie. "Coming up with solutions for climate issues is far from easy-everyone has their own opinion on the right and wrong way to go about things. Green tech is no different…" https://branch.climateaction.tech/issues/issue-3/green-tech-what-solutions-are-being-advocated/ Web Performance Calendar A project by Stoyan Stefanov. https://calendar.perfplanet.com/2021/ [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 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.]