+++ WEB DESIGN UPDATE. - Volume 21, Issue 51, June 14, 2023. An email newsletter to distribute news and information about web design and development. ++ISSUE 51 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: EVALUATION & TESTING. 05: EVENTS. 06: HTML. 07: JAVASCRIPT. 08: MISCELLANEOUS. 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. Accessibility Beyond Compliance: What Baking Teaches Us By Meryl K. Evans. "Accessibility guidelines are the minimum requirement. They don't ensure a good user experience. It's like a chocolate chip cookie recipe. Five people can follow the same recipes and get five different outcomes. Some will be better than others. To ensure a great user experience that's accessible, involve people with disabilities." https://meryl.net/accessibility-beyond-compliance/ The Problem With Automatically Focusing the First Input and What to Do Instead By Adam Silver. "…automatically focusing the first input causes 5 specific problems that degrade UX…" https://adamsilver.io/blog/the-problem-with-automatically-focusing-the-first-input-and-what-to-do-instead/ Sticky Content: Focus in View By Joe Lamyman. "Sticky content helps prioritise important content so it's always visible, but it can create issues for sighted people who use a keyboard, or a keyboard-like device, as focused controls become hidden behind the sticky content. This post discusses how you can keep controls behind sticky content visible and usable when they receive focus.…" https://tetralogical.com/blog/2023/06/08/focus-in-view/ Front End Nerdery Podcast - Season 3, Episode 2 with Carie Fisher (Video) By Todd Libby and Homer Gaines. "In this episode of the podcast, Homer and I talk to Carie Fisher, Director of Digital Accessibility, accessibility professional, author, and one of the content creators of the Learn Accessibility course at web.dev. We talked with Carie about all things accessibility and what is going on in the world of accessibility today." https://www.youtube.com/watch?v=L00lCFQ20KA Testing Sites And Apps With Blind Users: A Cheat Sheet By Slava Shestopalov and Eugene Shykiriavyi. "Yeah, plugins and services for checking accessibility are great, but have you ever observed a real person with a disability walk through your site or app? While compliance with accessibility checklists is essential, it doesn't necessarily mean a pleasant experience. That's why live sessions can give you lots of priceless insights…" https://www.smashingmagazine.com/2023/06/testing-sites-apps-blind-users-cheat-sheet/ Web Accessibility Guidance Project By New Zealand Government. "Note: This guidance is in continual development…" https://govtnz.github.io/web-a11y-guidance/ Accessibility and Artificial Intelligence By Joe Dolson. "…The problems I see with AI and accessibility are only when it's used directly on the end product. This is the same as the problems with AI in any field. If you only look at examples where a lawyer uses AI to generate their court brief or an overlay that uses AI (or at least markets their product as using AI), then you're finding some of the most questionable situations…" https://www.joedolson.com/2023/06/accessibility-and-artificial-intelligence/ No, 'AI' Will Not Fix Accessibility By Adrian Roselli. "…Accessibility is about people. It is not strictly a technical problem to be solved with code. It is not the approximation of human-like ramblings produced by complex algorithms generally branded as 'AI'. LLM chatbots and computer-generated images are already creating an uncanny valley of spam. We don't need them to contribute to the analogous uncanny accessibility already extant on the web…" https://adrianroselli.com/2023/06/no-ai-will-not-fix-accessibility.html CAN-ASC-6.2: Accessible and Equitable Artificial Intelligence Systems - Notice of Intent "…The purpose of standard CAN-ASC-6.2 is to ensure the technical requirements for artificial intelligence systems are equity-based. This requires going beyond minimum technical specifications…" https://accessible.canada.ca/creating-accessibility-standards/can-asc-62-notice-intent Northwestern University Class Action Claims Website Inaccessible to Blind, Visually Impaired Users By Anne Bucher. "Northwestern University operates a website that is not fully accessible to and independently usable by blind or visually impaired individuals, according to a class action lawsuit filed May 25 in New York federal court…" https://topclassactions.com/disability-class-action-lawsuit/northwestern-university-class-action-claims-website-inaccessible-to-blind-visually-impaired-users/ UserWay Will Stop Lying to WAVE: 9 June 2023 By Adrian Roselli. Adrian updated his "#UserWay Will Get You Sued" article. https://adrianroselli.com/2021/09/userway-will-get-you-sued.html#WAVESpoofUndo +02: CASCADING STYLE SHEETS. New CSS Color Spaces and Functions in All Major Engines By Rachel Andrew. "All major engines now support the new CSS color spaces and functions. Find out how they can bring vibrancy to your designs…" https://web.dev/color-spaces-and-functions/ The Gotchas of CSS Nesting By Kilian Valkhof. "I've written before about the problems you can run into with CSS nesting (keep in mind that article uses an older syntax but the point still stands) and the question that @ChallengeCSS tweeted out today made me realize there's actually a few more gotcha's.…" https://kilianvalkhof.com/2023/css-html/the-gotchas-of-css-nesting/ Modern CSS in Real Life By Chris Coyier. "…This is a blog-itized version of a presentation I created…" https://chriscoyier.net/2023/06/06/modern-css-in-real-life/ Syntax Podcast Episode 623: 'Nothing in CSS' Errata By Manuel Matuzović. "…an element with opacity set to 0 is still accessible to screen readers. Also, interactive items within an element with visibility set to hidden are not focusable. On the other hand, items within an element with opacity set to 0 are…" https://www.matuzo.at/blog/2023/syntax-fm-623-errata/ +03: COLOR. Never Rely on Color Alone By Elaine Lau, Ellen Liebert, Linda Bradley, Matthew Russell, Rachael Bradley Montgomery. "We often use color to convey meaning. But using color by itself to communicate information can cause barriers for many people. People who are color blind, or have low or limited vision will not always be able to distinguish between colors. Many people lose the ability to see colors well as they age. And people who are blind will not see color at all. Adding at least one other indicator when the color has meaning ensures that everyone can have the same understanding of the information…" https://www.ta11y.org/learning/topic?key=contrast.color_alone +04: EVALUATION & TESTING. Bottom Sheets: Definition and UX Guidelines By Page Laubheimer. "A bottom sheet is a user-interface pattern used commonly in mobile apps for providing contextual details or controls in the lower area of the screen." https://www.nngroup.com/articles/bottom-sheet/ Proto Personas (Video) By Samhita Tankala. "Proto personas capture a team's existing knowledge or assumptions about who their current users are. These should be used with caution because they are created with no new research." https://www.nngroup.com/videos/proto-personas/ Measuring Tech Savviness with Technical Activity Checklists By Jeff Sauro and Jim Lewis. "…In this article, we use Rasch analysis to understand the measurement properties of three versions of a technology activity checklist that we have used to measure tech savviness; one with sixteen activities, one with nine, and one with ten…" https://measuringu.com/rasch-analysis-of-three-technical-activity-checklists/ How to Measure UX Research Impact: A Multi-Level Framework By Karin den Bouwmeester. "You might be very busy conducting research, but what if most of your work collects dust in someone's drawer…" https://uxinsight.org/how-to-measure-ux-research-impact-a-multi-level-framework/ +05: EVENTS. Accessibility First Thinking for Developers June 14, 2023. Online https://a11ytalks.com/posts/2023-JUN/ Failing Fast June 22, 2023. Online https://uxpamn.org/event-5310237 Building the Business Case for Accessibility June 23, 2023. Online https://www.mutua11y.org/2023/05/26/building-the-business-case-for-accessibility/ Virtual Web Accessibility Training July 5-6, 2023. Online https://webaim.org/training/virtual/ Fronteers Conference September 21-22, 2023. Utrecht, The Netherlands https://fronteersconf.org/ +06: HTML. Datalist Over ARIA Combobox By Dennis E. Lembrée. "…This article suggests that the custom select dropdown is overused. The ARIA combobox pattern to create one is very complex and has inconsistent support. Instead, the native HTML datalist element should be leveraged to create a similar UI control, and its support is pretty good. Code snippets, keyboard testing results, and basic screen reader testing results are provided…" https://www.webaxe.org/datalist-over-aria-combobox/ Semantic Code in HTML: What Is It and Does It Still Matter? By Paul Boag. "Semantic code in HTML is still important in modern web development. It can improve accessibility, SEO, maintainability, cross-device compatibility, future-proofing, collaboration, and page load times. In this post, I explain how you can ensure your code is semantic even if you are using a framework or website builder app…" https://boagworld.com/dev/semantic-code-in-html/ The Modern Way of Serving Images By Jacob 'kurtextrem' Groß. "Responsive & performant …" https://kurtextrem.de/posts/modern-way-of-img +07: JAVASCRIPT. WAI-ARIA 1.2 is a Web Standard By Shawn Lawton Henry. "We are pleased to announce that Accessible Rich Internet Applications (WAI-ARIA) 1.2 is now a 'W3C Recommendation' Web Standard…" https://lists.w3.org/Archives/Public/public-wai-announce/2023AprJun/0005.html Positioning Anchored Popovers By Hidde de Vries. "…if your popover needs to be anchored to something, like a button or a form field, you can't 'just' use absolute positioning. Instead, you can use JavaScript (today), or, excitingly, anchor positioning (in the near-ish future…" https://hidde.blog/positioning-anchored-popovers/ Web Developer Ground Hog Day By Chris Ferdinandi. "…JavaScript is great. I love using it, and it does amazing things. But maybe it's time we stop repeating these same patterns of development over and over again. Maybe we can use JavaScript more responsibly, and focus more effort on HTML and CSS…" https://gomakethings.com/web-developer-ground-hog-day/ +08: MISCELLANEOUS. 48 Laws, Rules, and Principles of Web Development By Jens Oliver Meiert. "In anticipation of the upcoming release of The Web Development Glossary 3K (the new edition of The Web Development Glossary), here are four dozen laws, rules, and principles related to web and software development. How many do you know?…" https://meiert.com/en/blog/48-laws-rules-and-principles/ Today's AI is Unreasonable By Anil Dash. "…we can tell the traditional tech industry (the handful of giant tech companies, along with startups backed by the handful of most powerful venture capital firms) is in the midst of building another "Web3"-style froth bubble because they've again abandoned one of the core values of actual technology-based advancement: reason…" https://www.anildash.com/2023/06/08/ai-is-unreasonable/ 10 Things You Need to Think About Before Your Organization "Celebrates the ADA" July 26th By Sheri Byrne-Haber. "…Here are ten situations all organizations should think about and avoid when celebrating any disability-related holiday or event…" https://www.linkedin.com/comm/pulse/10-things-you-need-think-before-your-organization-ada-sheri A History of Metaphors for the Internet By Josh Dzieza. "When I wrote about this web surfing competition, it got me thinking about different metaphors for the internet. Surfing seemed like an odd one, an artifact from a very particular time in the mid-1990s when people used terms like 'information superhighway' and 'cyberspace' unironically. Where did these metaphors come from, and where did they go?…" https://www.theverge.com/2023/5/17/23727584/a-history-of-metaphors-for-the-internet +09: TOOLS. Five Accessibility Bugs GitHub Copilot Offers to Create By Matthew Hallonbacka. "…You shouldn't accept code suggestions from GitHub Copilot if you don't understand them. If you're expecting a certain type of suggestion, and you get one with extra attributes, you need to look them up. Don't use the code until you understand what every part of it does…" https://mallonbacka.com/blog/2023/04/github-copilot-accessibility/ +10: USABILITY. Exploring Universal And Cognitive-Friendly UX Design Through Pivot Tables And Grids By Yuliia Nikitina. "…A good user experience will prevent cognitive overload for everyone. It's just that we have to remember that many out there are more sensitive to such noises and loads…" https://www.smashingmagazine.com/2023/06/universal-cognitive-friendly-ux-design-tables-grids/ How to Highlight Required and Optional Form Fields By Adam Silver. "…these little asterisks (and other techniques used to denote required) fields can be a real problem…" https://adamsilver.io/blog/how-to-highlight-required-and-optional-form-fields/ +11: WEBWASTE & SUSTAINABILITY. Marketing Vanity Metrics Are Driving E-Waste in Data Centers By Gerry McGovern. "How many websites need a guarantee that they will be available 99.9% of the time…" https://gerrymcgovern.com/marketing-vanity-metrics-are-driving-e-waste-in-data-centers/ Rebuilding a Solar Powered Website By Kris De Decker, Marie Otsuka, Roel Roscam Abbing, and Marie Verdeil. "You're looking at a completely rebuilt version of the solar powered website, which now allows you to turn off the dithering compression and see the original images." https://solar.lowtechmagazine.com/2023/06/rebuilding-a-solar-powered-website/ [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.]