+++ WEB DESIGN UPDATE. - Volume 22, Issue 08, August 16, 2023. An email newsletter to distribute news and information about web design and development. ++ISSUE 08 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. SECTION TWO: 11: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Designing Accessible Text Over Images: Best Practices, Techniques, And Resources (Part 2) By Hannah Milan. "In Part 2 of the series, Hannah Milan reviews in detail various accessible text over images techniques for designing your web and mobile app content, including framing the image, soft-colored gradients technique, text styles and text position, solid color shapes, and use of colored backgrounds. And finally, the emphasis will once again be placed on the accessibility aspect, which needs to be 'baked in' right from the start rather than being an afterthought in your design process…" https://www.smashingmagazine.com/2023/08/designing-accessible-text-over-images-part2/ Managing Multiple WCAG Failures By Ricky Onsman. "…Identifying the different kinds of multiple failures and understanding their nature will ultimately help web developers, designers, and content authors create more accessible web content and auditors to provide better guidance when they don't - which can only be a good thing." https://www.tpgi.com/managing-multiple-wcag-failures/ WCAG 3.0: Further On Up the Road By Ricky Onsman. "…look at what's in the new draft, and do what you can to provide positive, constructive feedback. In particular, look for the Editor's Notes sections with a green background that expand on the kind of feedback the AGWG is looking for…" https://www.tpgi.com/wcag-3-0-further-on-up-the-road/ For Review: Guidance on Applying WCAG 2.2 to Non-Web ICT (WCAG2ICT) By Shawn Lawton Henry. "W3C WAI invites you to comment on the updated Draft of: Guidance on Applying WCAG 2.2 to Non-Web Information and Communications Technologies…" https://lists.w3.org/Archives/Public/public-wai-announce/2023JulSep/0002.html Contextual Form Errors and ARIA By Marcus Herrmann. "…In this blog post, I will try to explain one section of 'Using ARIA' even further, namely the one that centers around providing context sensitive error messages in forms and using ARIA to associate error message and faulty field…" https://marcus.io/blog/contextual-form-errors-aria Empathy Prompts By Eric Bailey. "Ideas to help consider Inclusive Design principles when making things for others to use." https://empathyprompts.net/ On GitHub: https://github.com/ericwbailey/empathy-prompts#readme Accessibility Design Issues Beyond the Standards of Government E-Services for People With Low Vision By Aritz Sala, Myriam Arrue, J. Eduardo Pérez, Sandra M. Espín-Tello, and Lourdes Moreno. "…results obtained in this study confirmed that people with low vision face more barriers when using e-services. In addition, the most difficult steps were detected and the design of some web form elements which caused barriers was also discussed. As a conclusion of the study, essential guidelines are given to be followed by developers to create more accessible e-services…" https://www.tandfonline.com/doi/full/10.1080/10447318.2023.2241609 +02: CASCADING STYLE SHEETS. An alt Decision Tree Using Only :has() By Adrian Roselli. "I use the CSS :has() pseudo-class to provide an interactive alt text decision tree (from the W3C WAI Tutorial) that uses no script. It is progressively enhanced, so browsers without support for :has() still get all the content…" https://adrianroselli.com/2023/08/an-alt-decision-tree-using-only-has.html A Beginner's Guide to CSS Grid Layout By Ralph Mason. "The CSS Grid Layout Module has revolutionized the way websites are built. It offers tools that allow for advanced layouts without the tricky hacks and inventive solutions of the past…" https://www.sitepoint.com/introduction-css-grid-layout-module/ +03: EVALUATION & TESTING. Does Removing the Neutral Response Option Affect Rating Behavior? By Jeff Sauro and Jim Lewis. "Unless there is a compelling reason to do otherwise, we recommend using the standard versions of well-known items like UX-Lite, SEQ, and LTR that use five, seven, and eleven points respectively, for easier comparison across studies, especially since the presence of a middle option (for a neutral attitude) is reasonable and customary in most UX research…" https://measuringu.com/removing-the-neutral-response-option/ What, When, Why: Research Goals, Questions, and Hypotheses (Video) By Maria Rosala. "Research questions, research goals, and hypotheses are 3 devices used to focus user research studies." https://www.nngroup.com/videos/research-goals-questions-hypotheses/ +04: EVENTS. JAWS: Testing for Website Accessibility August 30, 2023. Online. https://accessingenuity.com/blogs/access-ingenuity-webinars/jaws-testing-for-website-accessibility-assistive-technology-webinar Real AI Solutions for Accessibility Challenges September 12, 2023. Online and New York, New York, U.S.A. https://www.meetup.com/a11ynyc/events/294741485/ Web Dev Conference October 20, 2023. Bristol, England, United Kingdom https://webdevconf.com/events/2023/ UX Virtual Training October 29-November 3, 2023. Online. https://www.nngroup.com/training/november/ +05: HTML. Progressively Enhanced HTML Accordion By Adrian Roselli. Adrian updated his article to give context why it does what it does and where WHATWG HTML is going with it. https://adrianroselli.com/2023/08/progressively-enhanced-html-accordion.html#Update01 Screen Readers Support for Text Level HTML Semantics By Steve Faulkner. Steve updated his article. The element semantics is not supported well. https://www.tpgi.com/screen-readers-support-for-text-level-html-semantics/ +06: JAVASCRIPT. Progressively Enhanced Form Validation, Part 2: Layering in JavaScript By Gerardo Rodriguez. "…This article takes that baseline experience and progressively enhances it by layering in ARIA attributes, JavaScript, and the Constraint Validation API…" https://cloudfour.com/thinks/progressively-enhanced-form-validation-part-2-layering-in-javascript/ An Intro to State-Based UI with JavaScript By Chris Ferdinandi. "…When you find yourself making lots of UI updates that require you to be aware of the current state of other UI elements, it might be time to consider using a different approach: state-based UI…" https://gomakethings.com/an-intro-to-state-based-ui-with-javascript/ +07: MISCELLANEOUS. Pushing Boundaries Beyond the Five Senses with Artificial Intelligence By Joe Devon. "Recap and video of Joe Devon's A11yNYC recent talk…" https://equalentry.com/accessibility-artificial-intelligence-senses/ What Legal Concerns Does Mozilla/the MDN Incur for AI Responses That Lead to Inaccessible Code? By Eric Bailey. "…The way LLM's interface operates in such a way that it can be interpreted as the MDN's opinion about how the code should be interpreted. Furthermore, the context of "AI" output presented in the larger context of the MDN makes the output seem objective and authoritative. To me, this represents legal and reputational risk…" https://github.com/orgs/mdn/discussions/413 It's Pretty Rude of OpenAI to Make Their Use of Your Content Opt-Out By Hidde de Vries. "OpenAI, the company that makes ChatGPT, now offers a way for websites to opt out of its crawler. By default, it will just use web content as it sees fit. How rude! The opt-out works by adding a Disallow directive for the GPTBot User Agent in your robots.txt…" https://hidde.blog/llm-theft-opt-out/ Good Riddance, GPTBot By Matthias Ott. Just like Google is constantly indexing the Web, OpenAI is now crawling the open Web to scrape content from websites for free to train their LLM (lucrative language model) 'AI' products. https://matthiasott.com/notes/good-riddance-gptbot Should I Add Braille to My Business Card? By Tom Babinszki. "…Even if only a few people benefit from braille on your card, the gesture speaks volumes…" https://evengrounds.com/should-i-add-braille-to-my-business-card/ Micro Benevolences By Estelle Weyl. "Many of us are unknowingly responsible for microaggressions in our everyday interactions, including when we write content and create examples for MDN. The Open Web Docs team has been working to reduce the occurrence of microaggressions and up the number of micro-benevolences throughout MDN…" https://openwebdocs.org/content/posts/micro-benevolences/ +08: NAVIGATION. The Verge's New Way to Display News Item Links Is a Terrible Idea By Christian Heilmann. "…they chose to use a new way to display links that are part of the news announcement. And they chose one that breaks every link convention and represents an accessibility nightmare…" https://christianheilmann.com/2023/08/14/the-verges-new-way-to-display-news-item-links-is-a-terrible-idea/ +09: TOOLS. 200 Web-Based, Must-Try Web Design and Development Tools By Jens Oliver Meiert. "Here are not 10, not 50, not 100, but-200 web-based and free tools that make your web design and web development life easier…" https://meiert.com/en/blog/200-tools/ +10: USABILITY. 3 Questions to Evaluate Design Patterns and Avoid Unnecessary Work That Degrades UX By Adam Silver. "There's a new form design trend going around: Buttons inside inputs…" https://adamsilver.io/blog/3-questions-to-evaluate-design-patterns-and-avoid-unnecessary-work-that-degrades-ux/ Balance in UX Design: Symmetry, Asymmetry, and Radial Balance By Huei-Hsin Wang. "The kind of balance you use in your visual depends on what you want to convey. Symmetry is quiet and static. Asymmetry creates energy and movement. Radial balance leads attention to the central point." https://www.nngroup.com/videos/balance-in-ux-design/ Nostalgia in UX Design By Maria Panagiotidi. "Trends, Benefits, and Ethical Considerations" https://uxpsychology.substack.com/p/nostalgia-in-ux-design [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.]