+++ WEB DESIGN UPDATE. - Volume 23, Issue 23, December 4, 2024. An email newsletter to distribute news and information about web design and development. ++ISSUE 23 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: BOOKS. 03: CASCADING STYLE SHEETS. 04: EVALUATION & TESTING. 05: EVENTS. 06: HTML. 07: INFORMATION ARCHITECTURE. 08: JAVASCRIPT. 09: MISCELLANEOUS. 10: USABILITY. SECTION TWO: 11: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. A Link on a Logo in the Header, What Should the Alt-Text Be? By Rian Rietveld. "It's a common pattern to use a logo in the header as a link to the homepage. But what should be the alt-text of that image?…" https://htmhell.dev/adventcalendar/2024/1/ A11y 101: 1.2.3 Audio Description or Media Alternative (Prerecorded) By Nat Tarnoff. "…Audio descriptions reflect the important things happening visually that aren't spoken or announced in audio…" https://tarnoff.info/2024/11/26/a11y-101-1-2-3-audio-description-or-media-alternative-prerecorded/ A11Y 101: WCAG 1.2.4 Captions (Live) By Nat Tarnoff. "This week we're talking about captions in a live scenario…" https://tarnoff.info/2024/12/02/a11y-101-wcag-1-2-4-captions-live/ The Many Faces of Digital Accessibility (Video) By Adrian Roselli. "It's common to enter the digital accessibility industry somewhere in the audit and review pipeline, evaluating the same mistakes and providing the same guidance for years. Burn-out is common if that's all you do. But digital accessibility offers much more than that for a career and goal. Whether trying to enter the industry from a different angle, growing to a a different role, or moving on while still making better outcomes for your fellow humans a goal…" https://www.youtube.com/watch?v=_6Tu3TOMzQE A Rules-Based Approach to Designing Accessible Dark (And Light) Mode (Video) By Donna Spencer. "Designing and applying a UI colour scheme for both dark and light mode is hard. Designing one that is also accessible is even harder. And when you're not a great visual designer - well, you figure out a rules-based way that lets you design with logic…" https://www.youtube.com/watch?v=ymFGts5LcDA From Screen to Speech: A Screen Reader Journey (Video) By Sarah Federman. "…We'll cover the role of ARIA (Accessible Rich Internet Applications), accessibility APIs, the accessibility tree, and more. I'll include some examples of how this understanding led to better outcomes at Canva, my 'aha moments,' and how to inspect the accessibility tree in developer tools…" https://www.youtube.com/watch?v=uNVSe_3Urn0 A False Sense of Accessibility: What Automated Testing Tools Are Missing (Video) By Beau Vass. "…This presentation will explore these vital questions through a series of examples, illustrating the types of issues automated tools can and cannot identify, and will explain why this is the case. By understanding the strengths and weaknesses of these tools, you'll develop a better understanding of if and where automated tools fit into your accessibility strategy, and what other considerations you should be making in order to deliver an accessible experience for your users." https://www.youtube.com/watch?v=o-YRFzJWmFI Customer-Informed Accessibility in the CommBank App (Video) By Allison Ravenhall. The CommBank app got a new home page last year. The redesign included an accessibility technique that I personally recommended. It was a native mobile app pattern supported by both Apple and Android. It bombed in usability testing. We fixed it. A reminder of the need to stay humble, talk to your users, and don't assume the mobile platforms always know best when it comes to accessibility. https://www.youtube.com/watch?v=kH0rKC6O9yI Designing Your Own Accessibility Vendor Monitoring Program (Video) By Jaunita George. "…This session will go over everything from getting buy-in from internal stakeholders to navigating tough discussions with vendors about digital accessibility…" https://www.youtube.com/watch?v=sP2vVUQtV88 Jaunita's slides: https://drive.google.com/file/d/1YyvGaWErSAD8d0LHnjAVEDu3jCNYMlwI/view Dataviz Accessibility Principles, Demonstrated by the 2024 Presidential Election Dashboards By Sarah Fossheim. "…Just like in 2020, I discovered quite a lot of accessibility issues for all of the dashboards…" https://fossheim.io/writing/posts/2024-dataviz-a11y-elections/ State Websites Don't Meet Upcoming DOJ Accessibility Requirements By Keely Quinlan. "An audit of state government websites shows that none meets all accessibility requirements soon to be required by the Department of Justice…Gifford said he hopes to bring a sense of urgency to lower-ranking states and encourage more government officials to think about accessibility…" https://statescoop.com/state-websites-dont-meet-upcoming-doj-accessibility-requirements/ Stop Aiming for Compliance: Craft a Better Product Strategy Instead By Caro Sotillo Silva. "…What if we told you accessibility doesn't have to be a costly, time-consuming feature tacked onto your product? Or that it doesn't have to be an endless stream of fixes passed around like a hot potato? Accessibility can become a practice embedded in Product, Design, and Development; one that can supercharge your product strategy. Here's how…" https://thoughtbot.com/blog/stop-aiming-for-compliance-craft-a-better-product-strategy-instead 093: PDF Accessibility Tips and Traps on the Web with Ricky Onsman (Podcast) By Equalize Digital. "This episode is a recording of an October 2024 WordPress Accessibility Meetup where Ricky Onsman highlighted how PDF documents on the web can be made accessible as long as proper best practices are being observed…" https://accessibilitycraft.com/093-pdf-accessibility-tips-and-traps-on-the-web-with-ricky-onsman/ An Introduction to Standard Accessibility Reporting, Inc. (SAR) (Video) By Chris M. Law. "The idea has been around for decades: the development of a scoring and labelling system to let consumers know how accessible something is before they buy it. Informal conversations began at conferences in the late 1990s as the internet was gaining its foothold…" https://www.youtube.com/watch?v=dZf61tV5BkE Legal Update: November 2024 By Ken Nakata. "Wow, can you believe it's really December? Between national and personal events, I happy that November is in the rear view mirror. November also didn't bring us much in terms of web accessibility cases…" https://convergeaccessibility.com/2024/12/02/legal-update-november-2024/ +02: BOOKS. Keith, Jeremy. Going Offline. A List Apart, 2018. (Now available to read online.) https://goingoffline.adactio.com/ +03: CASCADING STYLE SHEETS. Smooth Multi-Page Experiences with Just a Few Lines of CSS By John Allsopp. "A single line of CSS can enable slick multi-page transitions for web applications (and web sites for those who maintain there's a difference), opening up new possibilities for web app architectures, and website experiences. So let's take a look at View Transitions, why we might want them, and how to get started with just that single line of CSS…" https://htmhell.dev/adventcalendar/2024/3/ How to Clamp the Lightness of a Relative Color in CSS By Angelika Cathor. "Let's say we have a color in a CSS variable…" https://angelika.me/2024/12/01/how-to-clamp-relative-color-lightness/ :has() Opens Up New Possibilities With CSS (Video) By Kevin Powell. "The :has() pseudo-class is here, and while it's often called the parent selector, it can actually do a lot more than that…" https://www.youtube.com/watch?v=OGJvhpoE8b4 +04: EVALUATION & TESTING. Response Instability in User Experience Questionnaires By Martin Schrepp and Jörg Thomaschewski. "…Our study reveals significant response instability in UX ratings. Fortunately, this doesn't affect the overall item or scale scores, as deviations are random and have a symmetrical, neutralizing impact on scale means with a large enough sample. However, this instability does increase the standard deviation, affecting its interpretation…" https://uxpajournal.org/response-instability-in-user-experience-questionnaires/ How to Usability Test Your Product (If You Want Bad UX) By Adam Silver. "On Friday, I met up with a friend for lunch. The day before, he'd been a research participant to taste-test 4 different brands of Jaffa cake. Let me tell you what happened (because this is exactly what you don't want to do if you want good UX)…" https://adamsilver.io/blog/how-to-usability-test-your-product-if-you-want-bad-ux/ +05: EVENTS. U.S. Access Board Presents Preliminary Findings on Artificial Intelligence (AI) for Disability Community and AI Practitioners December 12, 2024. Online https://www.access-board.gov/news/2024/11/07/u-s-access-board-presents-preliminary-findings-on-artificial-intelligence-ai-for-disability-community-and-ai-practitioners/ Accessibility Strategy and Goal-Setting Workshop with Amber Hinds December 16, 2024. Online https://us02web.zoom.us/webinar/register/9017296105799/WN_x6H9aBi9RQeSKNlSx3r-Zg#/registration Global Accessibility Awareness Day Call for Proposals Proposal Deadline: January 3, 2025. Online Conference: May 15, 2025. https://accessibility.umn.edu/gaad/2025-proposal-criteria UX Virtual Training March 10-21, 2025. Online https://www.nngroup.com/training/march/ devopsdays Chicago March 18, 2025. Chicago, Illinois, U.S.A. https://devopsdays.org/events/2025-chicago/ +06: HTML. #34 a Button is Not a Link By Moritz Gießmann. "…A button opening a link will be unexpected behavior for screen reader users. No matter how it is styled, Links disguised as buttons won't show up in the link list of a site in assistive technologies. Use links for navigation to other pages or sections, and buttons for actions performed on the current page or within the application…" https://htmhell.dev/34-a-button-is-not-a-link/ Starting Off Right: Where Autofocus Shines By Kilian Valkhof. "Focus is where the user is on your website. It's what makes it possible to navigate your site with the keyboard or other assistive technologies, and it's how a browser knows which form element you're typing in. It's vital to get right if you want to build good websites…" https://htmhell.dev/adventcalendar/2024/2/ +07: INFORMATION ARCHITECTURE. A Beginner's Guide To Information Architecture in UX By Joy Anderson. "…Information architecture is the arrangement and organization of information and content/material to enable users to easily locate what they require, clearly carry out tasks, and understand what they read. For websites, the information architecture shapes the metadata, navigation, and data structure…" https://www.loop11.com/a-beginners-guide-to-information-architecture-in-ux/ +08: JAVASCRIPT. Mastering Accessible Modals with ARIA and Keyboard Navigation By Caitlin de Rooij. "Frustrated by inaccessible modals? Learn how to leverage ARIA & keyboard navigation to build modal dialogs that comply with accessibility guidelines…" https://www.a11y-collective.com/blog/modal-accessibility/ If Not React, Then What? By Alex Russell. "Frameworkism isn't delivering. The answer isn't a different tool, it's the courage to do engineering…" https://infrequently.org/2024/11/if-not-react-then-what/ +09: MISCELLANEOUS. The Past, Present and Future of Web Accessibility with Léonie Watson (Podcast) By Bruce Lawson. "In this episode of For a Better Web, Bruce chats with Léonie Watson, accessibility advocate and director of TetraLogical…" https://vivaldi.com/blog/better-web/4-leonie-watson-for-a-better-web/ How to Make QR Codes More Accessible By Josh Crawford. "…As designers and communications professionals, we can make QR codes more accessible and user friendly…" https://www.digitalaccesstraining.com/pages/articles?p=how-to-make-qr-codes-more-accessible The Free Web - The History of the Web By Jay Hoffmann. "…I am going to continue to write this newsletter. I am going to spend hours and hours pouring over old books and mailing lists and archived sites. And lifeless AI machines will come along and slurp up that information for their own profit. And I will underperform on algorithms. My posts will be too long, or too dense, or not long enough. And I don't care. I'm contributing to the free web…" https://thehistoryoftheweb.com/the-free-web/ Interop and Hard Problems By Brian Kardell. "Let's talk about priorities, technical debt and hard problems in the Web Platform…" https://bkardell.com/blog/debt.html +10: USABILITY. Europeans Spend 575 Million Hours Clicking Cookie Banners Every Year By Legiscope. "Analysis of the economic and productivity losses caused by cookie banners in Europe, including country-specific estimates and legal insights into the outdated EU Directive 2002/58." https://legiscope.com/blog/hidden-productivity-drain-cookie-banners.html Design Rebels: Rethinking the Principles of Design for Better User Experiences (Video) By Charlii Parker. "…This engaging presentation will inspire designers to question the status quo, embrace unconventional ideas, and implement practices that cater to diverse user needs. Join Charlii to discover how breaking the mold can lead to transformative and user-centered design solutions…" https://www.youtube.com/watch?v=tU1chzoJ4zw UX and CX Merge: The Shift from Products to Journeys By Kim Flaherty. "Organizations are starting to merge user experience and customer experience into a single function, setting the foundation for a journey-centric-experience practice." https://www.nngroup.com/articles/ux-and-cx-merge/ Keynote - Designing DX (Video) By Chris Coyier. "We'll take a look at some of the jobs that web developers need to do and the experience of doing them. These jobs tend to be somewhat complex tasks involving many steps and plenty that can go wrong. This is both a challenge and and opportunity to make good tools. Done poorly, developers are losing time, getting frustrated, and potentially making worse products. Done well, great tools make developers faster, more productive, and creating better products themselves. There is satisfaction and money to be made in designing DX." https://www.youtube.com/watch?v=dRZL_tBv_zw Design Systems vs. Style Guides (Video) By Kelley Gordon. "A design system is a complete set of standards intended to manage design at scale, while a style guide is a piece of documentation that provides specific style guidance." https://www.nngroup.com/videos/design-systems-vs-style-guides/ [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.]