+++ WEB DESIGN UPDATE. - Volume 21, Issue 38, March 15, 2023. An email newsletter to distribute news and information about web design and development. ++ISSUE 38 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: INFORMATION ARCHITECTURE. 09: JAVASCRIPT. 10: MISCELLANEOUS. 11: NAVIGATION. 12: PHP. 13: USABILITY. 14: WEBWASTE & SUSTAINABILITY. SECTION TWO: 15: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Evolving Custom Sliders By James Edwards. "This article demonstrates a hybrid technique for creating custom sliders, combining the accessibility and usability benefits of a native range input, with the markup and design flexibility of a pure custom slider…" https://www.tpgi.com/evolving-custom-sliders/ My Ideal Accessible Components Resource Is Holistic, Well Tested and Easy to Use By Hidde de Vries. "It would be easier to have an accessible web if all we did with it was publish documents. Blobs of text, images here and there. But modern sites (or 'applications') do a lot more than documents. Often for better, sometimes for worse. To improve accessibility of the web as it is today, I feel we dearly need accessibility guidance that is holistic, well tested and easy to use…" https://hidde.blog/ideal-a11y-guidance/ Design Is Not Art… By James Edwards. "No, I don't mean that design isn't artistic. I mean that when you ask the questions 'what is art?' and 'what is design?', you get fundamentally different answers. Art has no function, it's pure form. Design has form and function, where the first priority is function. So, to complain that accessibility is a creative barrier to good design, is like complaining that nutrition and hygiene are barriers to good cooking." https://mastodon.social/@siblingpastry@mastodon.world/109994402236870366 Just like we should always ask, 'Could this meeting have been an email? We should always ask…' By Adrian Roselli. "Could this PDF have been a web page?" https://mastodon.social/@aardrian@toot.cafe/109990005517078279 Inclusive Design for Cognition Guidebook (PDF) By Microsoft. "Building on the Microsoft Inclusive Design toolkit…" https://inclusive.microsoft.design/tools-and-activities/InclusiveDesignForCognitionGuidebook.pdf Ability Summit (Videos) By Microsoft. Presentations from the 2023 Ability Summit are available. https://abilitysummit.event.microsoft.com/ Prevent Focused Elements From Being Obscured by Sticky Headers (Updated) By James Edwards. "After this article was published, a conversation on the bird site introduced me to an alternative approach…" https://www.tpgi.com/prevent-focused-elements-from-being-obscured-by-sticky-headers/#an-alternative-approach Adding Sign Language to Videos By Henny Swan. "…As part of our ongoing effort to meet the Web Content accessibility Guidelines (WCAG) 2.1 and 2.2 Level AAA, we've created British Sign Language (BSL) versions of our video and created BSL playlists in our TetraLogical YouTube channel. In this post we explore our process for adding BSL to videos and share some tips…" https://tetralogical.com/blog/2023/03/07/adding-sign-language-to-video/ A Deaf Person's Dream of Seeing Captioned Broadway Show Realized … Or Was It? By Meryl K. Evans. "…I wasted a lot of time troubleshooting and getting frustrated instead of fully enjoying the show…" https://equalentry.com/deaf-person-attends-captioned-broadway-show/ My Retirement From College Basketball By Terrill Thompson. "…I'm *not* hosting my Accessible NCAA Tournament Bracket this year, but hosting Men's and Women's groups on the Yahoo Tourney Pick'em site. Yahoo has made progress on a11y and has expressed a commitment to continue improving. Details on my blog…" https://terrillthompson.com/1545 How Do You Add Alternative Text and Metadata to glTF Objects? By Celso Yamashita. "The Web Content Accessibility Guidelines require all non-text content to have a text alternative provided. Though this requirement has existed for over 20 years, there is no official way to add it to 3D content. This article proposes a method…" https://equalentry.com/accessibility-gltf-objects/ Best Practices for Structuring Accessibility Testing: Part 1 By Aaron Farber. "Accessibility is a mindset and a set of actions-it's ensuring people of all abilities have an equivalent experience…" https://www.tpgi.com/best-practices-for-structuring-accessibility-testing-part-1/ Ask AI - Accessibility Scanners vs Manual Testing By Jeff Singleton. "…Many often turn to accessibility scanners as the first step to evaluate a website for accessibility. Is this the most efficient and useful approach? Apparently not…" https://convergeaccessibility.com/2023/03/13/ask-ai-accessibility-scanners-vs-manual-testing/ The Importance of Adding Accessibility Design Reviews to the Design Process By David A. Kennedy. "To create accessible and inclusive experiences, you need to pay attention to accessibility throughout your design process, not just at the end. That's accessibility-first thinking…" https://adhoc.team/2023/02/22/the-importance-of-adding-accessibility-design-reviews-to-the-design-process/ +02: CASCADING STYLE SHEETS. We Don't Need .visually-hidden By Dennis E. Lembrée. "…in the big picture, a native visually-hidden should be much, much lower on the priority list. So low that it's a bit discouraging to hear folks requesting it…we don't want to encourage the use of visually hidden text but discourage the use - in favor of universal design, creating the same design and experience for all users…" https://www.webaxe.org/we-dont-need-visually-hidden/ Some Simple Ways to Make Content Look Good By Andy Bell. "Something non-designers understandably struggle with is how to make things look good. One of those things is long form content that's well set and readable. Luckily, CSS makes this easy, you just have to know what to change. That's exactly what we're going to teach you in this article…" https://set.studio/some-simple-ways-to-make-content-look-good/ I No Longer Understand prefers-contrast By Kilian Valkhof. "The prefers-contrast media query indicates whether someone prefers more or less contrast within the boundaries of your sites design. At least, that's what I thought it meant…" https://kilianvalkhof.com/2023/css-html/i-no-longer-understand-prefers-contrast/ Content is Your Content? By Stef Nia. "I saw a developer using the content property for adding extra text to a label, because why not, he said. Sadly, this raises several issues…" https://csshell.dev/posts/content-is-your-content/ Playing with a Blockquote Using Modern CSS Features (Video) By Chris Coyier. "Features like: Native CSS Nesting, Logical Properties, text-decoration-*, OKLCH, text-wrap: balance; Inline SVG background as a data URL…" https://chriscoyier.net/2023/03/11/playing-with-a-blockquote-using-modern-css-features/ +03: COLOR. Understand, Test, Solve: Color Contrast (Video) By Aaron Farber. "…Color contrast testing involves a blend of manual and automated tools. We'll evaluate these methods and specifically discuss ARC Toolkit, Colour Contrast Analyser, and the browser's built-in Developer Tools. We'll review the basics of color contrast testing and address three color contrast issues using our three-step method: Understand, Test, and Solve.…" https://www.youtube.com/watch?v=dqXxfaCp4Vg +04: DRUPAL. Accessibility and Open Source (Video) By Mike Gifford. "Drupal has been a leader in digital accessibility for over an decade, and open source has played a key role. Mike Gifford has been spearheading accessibility in Drupal, and working with an open community has allowed us to pioneer some new design challenges. Working in the open has allowed us to tap expertise outside of our community. It has also given space for people with disabilities to become involved in a variety of roles. Accessibility best practices make it clear that accessibility needs to be considered at all levels of a project. This talk will draw on the Drupal community but also engagement with other open communities, particularly through the We4Authors Cluster initiative of Funka with the European Commission." https://fosdem.org/2023/schedule/event/accessibility_and_open_source/ Mike's Slides: https://docs.google.com/presentation/d/1lkUM9mkBSgH0-8pf-kDtPp-FxTCxKEaWd7ze8wA3NA0/ +05: EVALUATION & TESTING. Introducing a Participant to a Usability Test: A Demonstration (Video) By Maria Rosala and Kate Moran. "Facilitation experts demonstrate how to prepare a participant for the test session. Use a facilitator's script to help remember the important information that participants need to know." https://www.nngroup.com/videos/introducing-a-usability-test/ +06: EVENTS. Accessible and Assistive Technology Across the Globe March 23, 2023. Online https://www.meetup.com/a11ytokyo/events/292003822/ Agile Accessibility: Socure's Journey to Prioritizing Online Inclusion March 23. Online https://www.levelaccess.com/earesources/webinar-agile-accessibility-socures-journey-to-prioritizing-online-inclusion/ Using Click Testing to Answer UX Research Questions March 29, 2023. Online https://measuringu.zoom.us/webinar/register/4916776959900/WN_rqX_mKGQTEG7UqeoP_FRFA Léonie Watson - CSS Speech March 30, 2023. Online https://www.meetup.com/css-cafe/events/291837233/ I Never Know - Security Solutions and Accessibility Challenges April 11, 2023. Online https://www.accessibilityassociation.org/s/webinar-details?id=a0A4z000018Qg76EAC Web Accessibility Training April 26-27, 2023. Logan, Utah, U.S.A. https://webaim.org/training/ Virtual Web Accessibility Training May 3-4, 2023. Online https://webaim.org/training/virtual/ Deep Dive on Accessibility Testing with Manuel Matuzović June 7-8, 2023. Online https://smashingconf.com/online-workshops/workshops/accessibility-testing-manuel-matuzovic/ +07: HTML. File Uploads for the Web (1): Uploading Files with HTML By Austin Gil. "This is the first post in a series all about uploading files to the web. In this post, we cover the steps needed to upload files using only HTML…" https://austingil.com/uploading-files-with-html/ +08: INFORMATION ARCHITECTURE. Do Images Change Card Sort Results? By Jeff Sauro and Jim Lewis. "…In this article, we look at potential qualitative and quantitative differences in the output of card sorting: organizational structures visualized in dendrograms, the number of categories used by participants, and the category names generated by participants…" https://measuringu.com/do-images-change-card-sort-results/ +09: JAVASCRIPT. The Ternary Operator in JavaScript By Chris Ferdinandi. This week, we're looking at variables and functions, and some intermediate JavaScript features that make working with them a bit nicer. https://gomakethings.com/the-ternary-operator-in-javascript/ When JavaScript Fails By Jason Godesky. "JavaScript failure can be a difficult thing to study.…" https://medium.com/@jason.godesky/when-javascript-fails-52eef47e90db +10: MISCELLANEOUS. Synthe Size Me By Matthias Ott. "Leonie Watson just shared an interesting audio snippet on Mastodon: (https://front-end.social/@tink/110007014963441869) What sounds like her speaking about accessibility is actually not Leonie, but an AI-generated synthetic voice, a cloned version of Leonie's voice based on audio training data…" https://matthiasott.com/notes/synthe-size-me +11: NAVIGATION. How to Build Accessible Main Navigation? By Tim Dujardin. "This article contains a guide to building an accessible main navigation of a website in 5 steps. The key takeaways of this guide are HTML semantics, WAI-ARIA, CSS, and JS for accessibility…" https://techhub.iodigital.com/articles/how-to-build-accessible-main-navigation +12: PHP. Quick Tip: How to Cache Data in PHP By Claudio Ribeiro. "In this quick tip, we'll talk about what caching is and how we can use it in PHP…" https://www.sitepoint.com/php-cache/ +13: USABILITY. How Much UX Do You Need? (Video) By Jakob Nielsen. "Spend more on UX design projects that have a higher risk of failure from bad design or a higher payoff from great design." https://www.nngroup.com/videos/how-much-ux/ UX Stakeholder Engagement 101(Video) By Sarah Gibbons. "Engaging with stakeholders is a requirement if we want to ship great experiences. It should be integrated with your team's routines, tools, and methods - so that it feels sustainable and effective." https://www.nngroup.com/videos/ux-stakeholder-engagement-101/ UX Strategy: Study Guide By Sarah Gibbons and Anna Kaley. "Unsure where to start? Use this collection of links to our articles and videos about UX visioning and strategy." https://www.nngroup.com/articles/strategy-study-guide/ +14: WEBWASTE & SUSTAINABILITY. How Slimmed-Down Websites Can Cut Their Carbon Emissions By Sean McManus. "'I'm horrified,' says Valentina Karellas. 'I know grams because I work with them every day and I know how much 10g weighs. And that's just one page'…" https://www.bbc.com/news/business-64623955 Modern Economies are Based on Waste By Gerry McGovern. The secret to the 'success' of modern economies has been the deliberate creation of the maximum quantity of waste. https://gerrymcgovern.com/modern-economies-are-based-on-waste/ [Section one ends.] ++ SECTION TWO: +15: 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.]