+++ WEB DESIGN UPDATE. - Volume 22, Issue 27, December 28, 2023. An email newsletter to distribute news and information about web design and development. ++ISSUE 27 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. 03: DRUPAL. 04: EVALUATION & TESTING. 05: EVENTS. 06: HTML. 07: JAVASCRIPT. 08: MISCELLANEOUS. 09: USABILITY. 10: WEBWASTE & SUSTAINABILITY. 11: XML. SECTION TWO: 12: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. AD Support in HTML Video By Adrian Roselli. "One of the primary challenges of using the browsers' default video player is its lack of support for additional audio tracks. Whether those tracks are referenced from a 1) separate media file, 2) synthesized by the browser, or 3) in the video file itself, browsers overall today do a poor job of exposing them. This is a particular concern when trying to satisfy WCAG Success Criterion 1.2.5 Audio Description (Prerecorded)…" https://adrianroselli.com/2023/12/ad-support-in-html-video.html The Road to Accessible Drag and Drop (Part 2) By James Edwards. "…To make drag and drop - or any complex widget - more widely accessible, it helps to step back and think of it in terms of what it achieves, rather than what it does…" https://www.tpgi.com/the-road-to-accessible-drag-and-drop-part-2/ The Road to Accessible Drag and Drop (Part 3) By James Edwards. "Concluding our three-part series on accessible drag and drop, this article is detailed documentation for the DragAct codebase. Everything you need to configure and use the script is here…" https://www.tpgi.com/the-road-to-accessible-drag-and-drop-part-3/ How to Write Accessible Descriptions For Interactive Charts By Huw Alexander. "In this detailed tutorial, you will learn how human-generated descriptions complement Highcharts and enhance the accessibility and user experience for everyone. Read more about textBOX toward the end of this post…" https://www.highcharts.com/blog/tutorials/accessible-descriptions-for-interactive-charts/ Word and PowerPoint Accessibility Evaluation Guide By WebAIM. "This guide combines automated checks from the Accessibility Checker in Microsoft Office 365 with a series of manual checks to help you evaluate and repair common accessibility issues in Word and PowerPoint…" https://webaim.org/resources/evaloffice/ Form Accessibility By Digital Accessibility Office, University of Colorado Boulder. "…Creating accessible PDF forms will always require a significant amount of work. Creating accessible forms requires more than simply dropping form elements into a PDF document…" https://www.colorado.edu/digital-accessibility/accessibility-newsletter/accessibility-minute-december-2023 How to Make PDFs Accessible - Episode 10: Clovis Community College By Shawn Jordison. "Welcome to episode 10 on community college PDF accessibility. Today, we focus on two documents from Clovis Community College. The first was already accessible, while the second required complex fixes…" https://theaccessibilityguy.com/how-to-make-pdfs-accessible-episode-10-clovis-community-college/ The Top Accessibility Errors Found in 2023 By Sarah Lavery. "…the following 10 issues were the most commonly found by our ARC automation tools. We hope this list helps guide your team to avoid some of this year's most common barriers…" https://www.tpgi.com/the-top-accessibility-errors-found-in-2023/ An Intopia Carol - Past, Present and Future (Video) By Intopia. "This webinar was recorded in December 2023, reflecting on the highlights of digital accessibility in 2023, and what our practice and service delivery leads expect in 2024. This webinar was facilitated by Chris Pycroft, and featured Russ Weakley, Julie Grundy, Charlii Parker and Neil Jarvis…" https://www.youtube.com/watch?v=oMxpUfQ6Qew Strengthening Digital Accessibility and the Management of Section 508 of the Rehabilitation Act By Shalanda D. Young, U.S. Office of Management and Budget (OMB). "This memorandum provides guidance to help agencies advance digital accessibility by maintaining an accessible Federal technology environment, promoting accessible digital experiences, and continuing the implementation of accessibility standards in accordance with Section 508 of the Rehabilitation Act of 1973, as amended (Section 508)…" https://www.whitehouse.gov/omb/management/ofcio/m-24-08-strengthening-digital-accessibility-and-the-management-of-section-508-of-the-rehabilitation-act/ OMB Issues Digital Accessibility Guidelines, Tells Agencies to Set Up Public Feedback Mechanism By Justin Doubleday. "…'This is something that I think the accessibility community working with government has been looking for, for a long time,' Mike Gifford, a senior strategist at the digital services firm CivicActions, said in an interview…" https://federalnewsnetwork.com/technology-main/2023/12/omb-issues-digital-accessibility-guidelines-tells-agencies-to-set-up-public-feedback-mechanism/ +02: CASCADING STYLE SHEETS. CSS Nesting By Kilian Valkhof. "With CSS Nesting native in browsers, the amount of CSS you need to write can be lowered drastically while making it easier to maintain and reason about…" https://12daysofweb.dev/2023/css-nesting/ We Can :has It All By Ryan Mulligan. "The functional :has() CSS pseudo class is now shipping in all evergreen browsers…" https://ryanmulligan.dev/blog/we-can-has-it-all/ How Do You Vertically Centre an Element in CSS? (Even More) Easily! By Michelle Barker. "Rachel Andrew shared a snippet of good news for CSS layout on her blog the other day: it'll soon be possible to vertically centre an element inside a parent without the parent needing to be a flex or grid container, using the align-content property. Gone are the days when developers lamented they couldn't center a
…" https://css-irl.info/how-do-you-vertically-centre-an-element-in-css/ +03: COLOR. How APCA Changes Accessible Contrast with Andrew Somers (Video) By Colleen Gratzer. "APCA calculates contrast differently from WCAG…" https://www.youtube.com/watch?v=E-CZial5VkU +03: DRUPAL. Pulling Content From External API into Drupal 10 By Chen Hui Jing. "If you had read my previous blog post, you'll have found out that I'm somehow unable to escape Drupal…" https://chenhuijing.com/blog/pulling-content-from-external-api-into-drupal-10/ +04: EVALUATION & TESTING. The Goldilocks Principle for Prototyping (Video) By Megan Brown. "The Goldilocks Principle says to aim for prototypes that are just right for your user research needs and will get an honest reaction from participants." https://www.nngroup.com/videos/goldilocks-principle/ Navigating Biases in User Research: Focus on Note-Taking and Data Analysis (Part 1) By Stéphanie Walter. "Understanding cognitive biases is crucial in user research. While many articles explore how biases impact researchers and users during studies, the research journey extends beyond. From collecting data (taking notes) to analysis and project decision-making with stakeholders, biases can subtly influence the entire process…" https://condens.io/blog/biases-in-user-research-note-taking-and-data-analysis/ Comparing SEQ and Click SMEQ Sensitivity By Jeff Sauro and Jim Lewis. "…we compared the responses from a traditionally administered seven-point SEQ with the responses from a click Subjective Mental Effort Questionnaire (SMEQ) across five tasks of varying difficulty. We wanted to know whether we'd get both comparable results (similar mean differences) and higher precision (lower standard deviations)…" https://measuringu.com/comparison-of-standard-seq-and-click-smeq-sensitivity/ +05: EVENTS. Using Screen Reader Testing Tools to Evaluate the Accessibility of a User Journey - Part 1 January 16, 2024. Online https://www.tpgi.com/webinar-january-16-at-11am-et-using-screen-reader-testing-tools-to-evaluate-the-accessibility-of-a-user-journey-part-1/ Creating Accessible and Inclusive Presentations January 17, 2024. Online https://a11ytalks.com/posts/2024-JAN/ What's New in WCAG 2.2 January 31, 2024. Online https://abilitynet-org-uk.zoom.us/webinar/register/6017024695655/WN_UMzaJFZbSNeVaLDqXhr3VA#/registration Jacobus tenBroek Disability Law Symposium March 21-22, 2024. Baltimore, Maryland U.S.A https://nfb.org/programs-services/legal-program/jacobus-tenbroek-disability-law-symposium +06: HTML. The Devil is in the Details: A Look Into a Disclosure Widget Markup By Cristian Diaz. "Disclosure widgets are one of the most common component patterns you can find on the web. It consists of a button that can hide or show information when you click it. It's also one of the straightforward components to make from a technical standpoint…" https://www.htmhell.dev/adventcalendar/2023/23/ Never Underestimate HTML By Lara Aigmüller. "…What follows now is an article about thoughts that came to my mind in the last couple of years when working together with different people from different teams with different backgrounds in HTML and frontend technologies in general. This is an article about the many 'whys' in my head and possible answers…" https://www.htmhell.dev/adventcalendar/2023/24/ The Implied Web By Halvor William Sanden. "People don't need call-to-action buttons. Interface elements made to get attention and herd people towards clicks increase cognitive effort because they obscure themselves and reduce interfaces to clickable surfaces…" https://www.htmhell.dev/adventcalendar/2023/21/ Boosting Testing Efficiency: How Semantic HTML Transforms End-to-End Testing By Stefania Mellai. "Semantic and accessible HTML serves as a powerful tool, enhancing not only human interaction but also the efficiency of software systems…" https://www.htmhell.dev/adventcalendar/2023/19/ Design Pattern for Custom Tooltips By Jan Hellbusch. "Should we use tooltips to convey information?…" https://www.htmhell.dev/adventcalendar/2023/20/ Accessible Components By Melanie Sumner. Melanie's collection of accessible components and patterns. https://codepen.io/collection/nVPGQL "HTML First" is Not HTML First By Jens Oliver Meiert. "…the foundation is not difficult to argue about: * HTML that is actual HTML, i.e., that is valid (common sense, until you start checking) * HTML that makes full use of HTML features, i.e., that's not XHTML-HTML * HTML that is used according to purpose (aka semantic HTML) * HTML that is accessible…" https://meiert.com/en/blog/true-html-first/ +07: JAVASCRIPT. ARIA Live Regions By Andrea de Souza. "ARIA stands for Accessible Rich Internet Applications. It is a set of roles and attributes that makes web page elements accessible to users who require assistive technology, like screen readers, when native HTML alone is not enough. One of these sets of roles and attributes is aimed at defining live regions…" https://www.htmhell.dev/adventcalendar/2023/22/ Classes vs. Prototypes in JavaScript By Chris Ferdinandi. "One of the core technologies in creating a Web Component is JavaScript classes…" https://gomakethings.com/classes-vs.-prototypes-in-javascript/ +08: MISCELLANEOUS. The Expanding Dark Forest and Generative AI / ffconf 2023 (Video) By Maggie Appleton. "The web is already an eerily lifeless place filled with automated predators like bots, advertisers, clickbait attention-grabbers, SEO-optimisers, and angry twitter mobs - and they now have a generative AI hammer to swing. When language models can churn out millions of human-like words, images, and videos in seconds, what happens to human creation and connection on the web…" https://www.youtube.com/watch?v=QPoM-h1fK8M +09: USABILITY. The State of UX in 2024 By Fabricio Teixeira and Caio Braga. "This is the 9th edition of The State of UX report by the UX Collective: a critical look at our industry based on more than 1k articles published and shared with our 500k+ subscribers in 2023.=…" https://trends.uxdesign.cc/ Pacing Ourselves for a More Humane Web By Marketa Benisek. "…This blog aims to explore the profound impact of pacing on user experience, highlight the challenges that come with fixed or fast pacing and advocate for pacing as one of the key principles of a more humane web…" https://www.wholegraindigital.com/blog/pacing-for-humane-web/ Tables of Contents on Mobile (Video) By Raluca Budiu. "Tables of contents show mobile users an overview of the information on the page and allow them to easily access the piece of content that is relevant to them. Two possible implementations involve in-page links and accordions…" https://www.nngroup.com/videos/mobile-table-of-contents/ +10: WEBWASTE & SUSTAINABILITY. Why AI is a Disaster for the Climate By John Naughton. "Amid all the hysteria about ChatGPT and co, one thing is being missed: how energy-intensive the technology is…" https://www.theguardian.com/commentisfree/2023/dec/23/ai-chat-gpt-environmental-impact-energy-carbon-intensive-technology +11: XML. Pixelating Live with SVG By Eric A. Meyer "For reasons I'm not going to get into here, I want be able to pixelate web pages, or even parts of web pages, entirely from the client side…" https://meyerweb.com/eric/thoughts/2023/12/21/pixelating-live-with-svg/ Responsive SVGs By Nils Binder. "Stretch your knowledge of working with SVGs for scalable, responsive experiences." https://12daysofweb.dev/2023/responsive-svgs/ [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.]