+++ WEB DESIGN UPDATE. - Volume 22, Issue 31, January 24, 2024. 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: TYPOGRAPHY. 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. Mind the Accessibility Gaps - Most of Accessibility Issues Originate in Design and How to Fix That By Bogdan Cerovac. "Studies show that 67% of accessibility issues originate in design…" https://cerovac.com/a11y/2024/01/mind-the-accessibility-gaps-most-of-accessibility-issues-originate-in-design-and-how-to-fix-that/ Inspecting WCAG 2.2: Target Size with David Cox and Kelly Lee (Video) By Government Digital Service. "This is the second in a series of workshops focusing on the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, run by the GOV.UK Design System team. This workshop explores the 'Target Size' criteria in more detail…" https://www.youtube.com/watch?v=91O_DzoLM3U Inspecting WCAG 2.2: Accessible Authentication with Steve Messer, David Cox, and Kelly Lee (Video) By Government Digital Service. "This is the third in a series of workshops focusing on the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, run by the GOV.UK Design System team. This workshop explores the 'Accessible authentication' criteria in more detail…" https://www.youtube.com/watch?v=9h5aLCS3wJQ Understanding WCAG SC 3.3.7 Redundant Entry (Level A) By Sathish Kumar. "…The goal of this success criterion is to make the processes where repeated steps are found easier by…" https://www.digitala11y.com/understanding-wcag-sc-3-3-7-redundant-entry-level-a/ Basic Accessibility Mistakes I Often See in Audits By Chris Ferdinandi. "…Today, I wanted to share eight of the most common accessibility issues I see when I run these audits…" https://gomakethings.com/basic-accessibility-mistakes-i-often-see-in-audits/ Creating Accessible and Inclusive Presentations with AmyJune Hineline (Video) By A11yTalks. "In this session, we'll go over what we can do as presenters to ensure inclusivity for all our attendees regardless of how they consume the content, beyond the basics of captions and color contrast. We'll briefly cover accessibility definitions, standards, and guidelines and then share practical tips and examples to help make presentation slide decks and the presentations more accessible." https://www.youtube.com/watch?v=hRR2VNFFLek The Web Accessibility Framework By Pope Tech. "The Web Accessibility Framework is designed to adapt and adjust to the needs of your organization. Use parts that make sense for your current state and adjust as you continue on your web accessibility journey…" https://blog.pope.tech/2024/01/17/the-web-accessibility-framework/ How the Web Accessibility Framework Was Designed By Jay Pope. "Pope Tech launched V1 of The Web Accessibility Framework. We designed The Web Accessibility Framework to give any sized organization in any industry a way to improve the accessibility of their website by helping them define their unique goals, scope, risk appetite, gaps, processes, and desired state…" https://blog.pope.tech/2024/01/17/how-the-web-accessibility-framework-was-designed/ What Is the California Assembly Bill on Website Accessibility? By Thomas Logan. "California is considering adopting a new law (AB-1757) that adopts Web Content Accessibility Guidelines (WCAG) 2.1 level AA as the level of accessibility that websites and mobile apps providing products or services must follow…" https://equalentry.com/website-accessibility-california-assembly-bill/ Key Takeaways from UsableNet's 2023 Year-End Digital Accessibility Lawsuit Report By Rebecca Klein. "…In this blog post, we'll cover the key takeaways from UsableNet's year-end report and what trends to consider as you navigate 2024…" https://www.3playmedia.com/blog/key-takeaways-usablenets-ada-web-app-report/ +02: CASCADING STYLE SHEETS. The Complex But Awesome CSS border-image Property By Temani Afif. "The CSS border-image property is one of those properties you undoubtedly know exists but may not have ever reached for. Or maybe you have reached for it but found all of its slicing logic difficult and cumbersome. That's because it is! But the property is also capable of some really interesting things if we take the time to understand its syntax. In this article, Temani Afif demonstrates different approaches for using border-image to create clever decorative accents and shapes…" https://www.smashingmagazine.com/2024/01/css-border-image-property/ +03: EVALUATION & TESTING. Heuristic Evaluation Template By Jason Ogle. "Jason has created a very useful Excel template for recording an evaluation of a user interface according to the 10 usability heuristics." https://docs.google.com/spreadsheets/d/1Skb-K0MfiNzgCeF02eUo02DNAmBAHuoDhLvS9qieexY/ Introduction + Walk-Thru - Heuristic Evaluation Template, Part 1 of 2 (Video) By Jason Ogle. "In this video I will go through: * What are Heuristics? * Why are they important? * Why do a Heuristic Evaluation? * Introduce and walk through my powerful new cloud-based template…" https://www.youtube.com/watch?v=ZFl_4vsXCOQ Introduction + Walk-Thru - Heuristic Evaluation Template, Part 2 of 2 (Video) By Jason Ogle. "In this video I will: * Conduct a live Heuristic Evaluation * Show you firsthand how to use and get the most out of my new Heuristic Evaluation Template…" https://www.youtube.com/watch?v=N3p69NdlEKc&t=0s Practical Guide to Usability Testing By Nomensa. "If user centricity is not your core focus, your visually appealing digital product is destined to flop. User experience (UX) has become the cornerstone of successful design, so usability testing with your target audience is an essential tool in your toolbox…" https://www.nomensa.com/blog/practical-guide-to-usability-testing/ Three Ways to Score the UX of Products By Jeff Sauro and Jim Lewis. "…These methods are examples of three major types of UX studies: behavioral (task-based), attitudinal (retrospective), and analytic/inspection (PURE)…" https://measuringu.com/three-ways-to-score-the-ux-of-products/ Tree Testing Part 2: Interpreting the Results By Page Laubheimer. "Analyze tree-testing results including success, first click, and directness to improve information architecture and navigation labels…" https://www.nngroup.com/articles/interpreting-tree-test-results/ +04: EVENTS. How to Enforce Accessibility for Material UI Components January 25, 2024. Online https://accessibility.deque.com/how-to-enforce-accessibility-for-material-ui-components If Memory Serves: Creating Unforgettable User Experiences with David Swallow https://accessibility.day/ February 8, 2024 https://www.tpgi.com/webinar-february-8-at-12pm-et-if-memory-serves-creating-unforgettable-user-experiences/ Designing Search UX In 2024 with Vitaly Friedman February 29, 2024. Online https://smashingconf.com/online-workshops/workshops/search-ux-vitaly-friedman/ devopsdays Denver April 29-30, 2024. Denver, Colorado, U.S.A. https://devopsdays.org/events/2024-denver/welcome/ +05: HTML. The Anatomy of Accessible Forms: The Problem with Placeholders By Sarah Arnold. "…we will see why using a placeholder is not great from an accessibility standpoint and how to use a placeholder attribute successfully…" https://www.deque.com/blog/accessible-forms-the-problem-with-placeholders/ Repetition Avoidance By Steve Faulkner. "In cases where there is a title="something" and an alt="" on an along with the same text in text, to avoid the text being announced twice (in Firefox+screen reader combo) set aria-hidden="true" on the or even better avoid using the title attribute." https://codepen.io/stevef/pen/wvOeOqz +06: JAVASCRIPT. Accessible Notifications with ARIA Live Regions (Part 1) By Sara Soueidan. "In this chapter, we're going to learn about ARIA live regions - the accessible notifications system that enables us to make dynamic web content more accessible to screen reader users…" https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-1/ Accessible Notifications with ARIA Live Regions (Part 2) By Sara Soueidan. "…we're going to discuss what live regions are not suitable for and why, and we're going to discuss more robust ways to implement some common UI patterns that you might otherwise consider using live regions for…" https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/ +07: MISCELLANEOUS. Under-Supported and Underpaid By Adrian Roselli. "…the real experts toil away without blogs or praise or much visibility. Often acknowledging the squishiness that is WCAG and the human impact it has as a crappy baseline." https://adrianroselli.com/2024/01/under-supported-and-underpaid.html Disability Related Holidays By Rachael Bradley Montgomery. "We have provided a listing of the 2024 disability awareness days, weeks and months at ta11y.org. Each period celebrates or raises awareness for a specific disability or disability-related topic…" https://www.ta11y.org/learning/topic?key=plan.z_holidays +08: TYPOGRAPHY. Can We Selectively Attend to the Top Halves of Letters and Ignore the Bottom Halves? By David Březina and Mary Dyson. "…We may conclude that designers and non-designers process letters in the same way. However, an alternative interpretation is that, although the outcomes are the same, they are achieved by using different strategies……" https://designregression.com/article/can-we-selectively-attend-to-the-top-halves-of-letters-and-ignore-the-bottom-halves +09: USABILITY. Accordions: 5 Scenarios to Avoid Them (Video) By Huei-Hsin Wang. "Avoid using accordions when: 1. Users need access to most content; 2. There's little visible content on the page; 3. Content is complex with multiple levels; 4. Content can't be effectively chunked; 5. An uninterrupted reading flow is prioritized." https://www.nngroup.com/videos/avoid-accordions/ Memory Recognition and Recall in User Interfaces By Raluca Budiu. "Recalling items from scratch is harder than recognizing the correct option in a list of choices because the extra context helps users retrieve information from memory." https://www.nngroup.com/articles/recognition-and-recall/ Indicators, Validations, and Notifications: Pick the Correct Communication Option By Kim Salazar. "Status feedback is crucial to the success of any system. Knowing when to use 3 common communication methods is key to supporting users." https://www.nngroup.com/articles/indicators-validations-notifications/ Agile Anti-Patterns That Will Harm UX - Part 2 By Neil Turner. "This is the second article in a two part series covering the 10 most common Agile anti-patterns that can really harm UX. Part one of Agile anti-patterns that will harm UX covered anti-patterns such as zero upfront design, planning only a sprint ahead and not iterating after releasing. This second part will cover 5 more Agile anti-patterns to avoid. For each you'll learn what the anti-pattern is and how to avoid it…" https://www.uxforthemasses.com/agile-anti-patterns-part-2/ Always Allow Users to Combine Multiple Filtering Values of the Same Type - an 'OR' Logic (15% of Sites Don't) By Iva Olah. "When users can't select multiple options, they have to redo the filtering process for each option - an even more difficult process on mobile…" https://baymard.com/blog/allow-applying-of-multiple-filter-values +10: WEBWASTE & SUSTAINABILITY. Vitaly Friedman: Cleaner Web Design for a Better Environment (part 2) By Gerry McGovern. "…During a moment when our environment is under incredible stress, the Web and digital industry is absolutely focused on growing data production at an exponential rate. An entire industry trapped in the cult of volume and obsessed with growth at all costs, no matter what gets broken." https://gerrymcgovern.com/vitaly-friedman-cleaner-web-design-for-a-better-environment-part-2/ [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.]