+++ WEB DESIGN UPDATE. - Volume 18, Issue 34, February 18, 2020. An email newsletter to distribute news and information about web design and development. ++ISSUE 34 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. ARIA Labels By Amber Wilson. "Recently, I've been chatting about accessibility with two of the biggest experts on the subject…" https://amberwilson.co.uk/blog/aria-labels/ Making Social Media Accessible: The Basics By Lynn Wehrman. "This post is one of a series we'll be offering on how to make social media accessible. It includes the basics you can apply to all of your platforms, in seven short points…" https://theweco.com/accessocialmediabasics/ Teching Out: Accessibility with Alex Tait (Podcast) By buzzsprout. "This episodes takes a look at accessibility in tech with special guest Alex Tait…" https://www.buzzsprout.com/842749/2718562-accessibility-with-alex-tait XR Accessibility User Requirements Joshue O Connor, Janina Sajka, Jason White, Michael Cooper (Editors). "This document lists user needs and requirements for people with disabilities when using virtual reality or immersive environments, augmented or mixed reality and other related technologies (XR). https://www.w3.org/TR/xaur/ The Digital Courseware Accessibility Problem By Lindsay McKenzie. "High-tech instructional materials are gaining popularity with instructors, but they can be problematic for students with disabilities. Colleges and publishers say there's no easy fix…" https://www.insidehighered.com/digital-learning/article/2019/12/02/professors-colleges-and-companies-struggle-make-digital PDF Accessibility Merging Tables (Video) By Dax Castro. "Learn how to merge tables that have repeat headings that span across multiple pages. In this video I will walk you though all the steps you need to create an accessible PDF that contains tables that bridge more than one page. Properly remediated PDF documents should contain a single table with a single set of heading rows and/or columns with all the corresponding data rows." https://www.youtube.com/watch?v=ykP9KAAVhSg Make Technology Work for Everyone: Introducing Digital Accessibility (Video) By Citizens Online. "This short animated film provides: A short introduction to digital accessibility, Some reasons why digital inclusion is important, 15 tips to help you start making your digital technology more accessible, usable, and inclusive." https://www.youtube.com/watch?v=8Ik_LHmZx8Y +02: CASCADING STYLE SHEETS. While You Weren't Looking, CSS Gradients Got Better By Ana Tudor. "…I recently discovered most people aren't even aware that double position for gradient stops is something that actually exists in the spec, so I decided to write about it…" https://css-tricks.com/while-you-werent-looking-css-gradients-got-better/ Understanding CSS Grid: Grid Template Areas By Rachel Andrew. "Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a look at how to use grid-template-areas to place items…" https://www.smashingmagazine.com/2020/02/understanding-css-grid-template-areas/ Toward Responsive Elements By Brian Kardell. "In this piece I'll talk about the 'Container Queries' problem, try to shine some light on some misconceptions, and tell you about the state of things.try to shine some light on some misconceptions, and tell you about the state of things…" https://bkardell.com/blog/TowardResponsive.html +03: EVALUATION & TESTING. Three Goals of Usability Testing By Jim Lewis and Jeff Sauro. "…In this article, we'll first revisit the common distinction between formative and summative usability testing and dig deeper into how they work together to progress toward improved usability. We then distinguish between the three primary goals of usability testing: discovering problems, comparing against benchmarks, and comparing against other interfaces. We also show how these evolve from the classic view of formative and summative testing." https://measuringu.com/three-goals/ Top Tasks for UX Design: How and Why to Create Them By Kara Pernice. "Top Tasks are a tool used to focus a design team on the same, best set of user tasks. It comprises a list of 10 or fewer activities that users should be able to achieve using a design. If people can't do these things, the design has failed. It takes a small amount of effort to create Top Tasks lists, but their impact is great." https://www.nngroup.com/videos/top-tasks-ux-design/ Intentional Silence as a Moderation Technique (Video) By Kate Kaplan. "When conducting user interviews or running usability studies, don't rush to talk as soon as the user stops speaking. Deliberately staying silent for longer than it feels comfortable will often prod users into saying more." https://www.nngroup.com/videos/intentional-silence-moderation-technique/ +04: EVENTS. Featherstone & Friends: The Current State of Web Animations with Val Head of Adobe February 18, 2020. Online https://levelaccess.zoom.us/webinar/register/2515811000106/WN__0dxk5TWS2qImgOFEIdFHA What's New in Mobile Accessibility for iOS and Android February 18, 2020. Austin, Texas, U.S.A. https://www.meetup.com/a11yATX/events/268515060/ Engaging People with Disabilities in Usability Studies February 27, 2020. Philadelphia, Pennsylvania, U.S.A. https://www.meetup.com/a11yphl/events/268061372/ The Art of the Alt Tag March 30, 2020. Minneapolis, Minnesota, U.S.A. https://www.meetup.com/Accessibility-Twin-Cities/events/267302427/ Is Your Website Reaching A11Your Users? June 25-July 1, 2020. Anaheim, California, U.S.A. http://aem.cast.org/about/events/2020/06/website-reaching-a11your-users.html Human-Computer Interaction (HCI) 2020 July 19-24, 2020. Copenhagen, Denmark http://2020.hci.international/ Open Source Software Conference (OSCON) July 13-16, 2020. Portland, Oregon, U.S.A. https://conferences.oreilly.com/oscon/oscon-or Design & Content Conference July 15-17, 2020. Vancouver, British Columbia, Canada https://content.design/ +05: HTML. The Guide to Accessible Web Components By Erik Kroes. "Web Components are a newly supported standard. They're a great match for Design Systems because they're futureproof and work with any framework. Building proper UI Web Components can be quite a task though, especially if you want them to be accessible. Here are some pointers on what to look out for…" https://www.erikkroes.nl/blog/accessibility/the-guide-to-accessible-web-components-draft/ A Complete Guide to Links and Buttons By CSS-Tricks. "Our complete guide to links, buttons, and button-like inputs in HTML, CSS, and JavaScript…" https://css-tricks.com/a-complete-guide-to-links-and-buttons/ A Complete Guide to Data Attributes By Chris Coyier. "HTML elements can have attributes on them that are used for anything from accessibility information to stylistic control…" https://css-tricks.com/a-complete-guide-to-data-attributes/ +06: JAVASCRIPT. FOUC and the Death of Progressive Enhancement (Video) By Kyle Simpson. "…It's time to peel back the layers and re-envision how the web is assembled… we should be making users lives better and we should demonstrate that our technology choices don't do any harm… there really are human beings on the other side of these pixels… in the history of the web no one has ever pulled up your site and pulled out a little measure and said oh that one's one pixel lower on this browser than that one. I'm going away they bounced off… Long live People Empathy and #ImprintableDesign." https://www.youtube.com/watch?v=HVSkcnIJEC0 Kyle's Slides: https://speakerdeck.com/getify/fouc-and-the-death-of-progressive-enhancement Accessible JavaScript Patterns (Video) By Garance Flore Vallat. "…This talk will show you how great JavaScript can improve the accessibility of your website. We'll walk through common interaction patterns such as navigation menus, modals, or custom form elements…" https://www.youtube.com/watch?v=yKrCUwqK19g Garance's Slides: https://www.youtube.com/watch?v=yKrCUwqK19g Garance's Demo Code: https://github.com/garancev/accessible-javascript-patterns Why JavaScript is Eating HTML By Mike Turley. "Web development is always changing. One trend in particular has become very popular lately, and it fundamentally goes against the conventional wisdom about how a web page should be made…" https://css-tricks.com/why-javascript-is-eating-html/ +07: MISCELLANEOUS. Mozilla lost the browser wars. It still thinks it can save the internet. By David Pierce. "The inside story of a very long, sometimes lonely and totally quixotic quest…" https://www.protocol.com/mozilla-plan-fix-internet-privacy +08: NAVIGATION. Block Links, Cards, Clickable Regions, Etc. By Adrian Roselli. "…I am mostly demonstrating how doing it the wrong way can be a problem and how a little planning can make the better way less awful…" https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html +09: TOOLS. The Contrast Triangle By Chip Cullen. "Removing underlines from links in HTML text presents an accessibility challenge. In order for a design to be considered accessible, there is now a three-sided design contraint - or what I call "The Contrast Triangle". Your text, links and background colors must now all have sufficient contrast from each other. Links must have a contrast ratio of 3:1 from their surrounding text. This is so that colorblind users can tell what pieces of text are links. By not using underlines, a design has to rely on contrast alone to achieve this. Even the default blue link color in browsers doesn't meet this contrast level. Both the text and links have to have a contrast ratio of 4.5:1, or 3:1 if it's large scale text." https://contrast-triangle.com/ Accessibility Scanner By Google. "Accessibility Scanner is a tool that suggests accessibility improvements for Android apps without requiring technical skills. Just open the app you want to scan, then tap the Accessibility Scanner button to find items in the app that might benefit from accessibility improvements. You can use this app to suggest changes to developers or to make changes yourself…" https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor +10: USABILITY. How to Film and Photograph Online Content for Usability: UX Details for Videos and Images By Aurora Harley. "Consider how your audience will be using the visuals to determine the optimal camera angle, set the right tone, choose the right props, and maintain attention." https://www.nngroup.com/articles/video-image-details/ 4 Things to Do When Designing for Seniors (Video) By Kara Pernice. "The number of senior citizens who use computers and the Internet grows every year. This user population does have special needs, driven by the human aging process, and modest design changes can vastly increase the business you get from seniors." https://www.nngroup.com/videos/designing-seniors/ Hyphens and Dashes (Hat tip to Deborah Edwards-Onoro) By Readability Guidelines. "Only use a hyphen if the word is confusing without it… Do not use hyphens for time and date ranges, instead use 'to'… Avoid using dashes whenever possible…" https://readabilityguidelines.co.uk/grammar-points/hyphens-and-dashes/ Why Is Social Media So Addictive? By Daniel Kolitz. "…Pierre Berthon: …Applying lessons from the gambling industry and behavioral psychology, programmers have consciously engineered social media experiences to be highly addictive. Techniques include variable ratio reinforcement, social manipulation, Zeigarnik loops (endless anticipation and deferred satisfaction), and induced hyperfocus and perseveration (negative 'flow' states of uncontrolled, endlessly repeated cycles of behavior). Such techniques coupled with zero entry barriers ('free' pricing) and ubiquity (always available, anywhere and anytime) are designed to maximize addiction. For a comprehensive overview of why and how social media is engineered for addiction see Berthon et al 2019…" https://gizmodo.com/why-is-social-media-so-addictive-1841261494 Our Letter to the APA By Jessica Henderson Daniel. "…In this letter, we describe how psychologists and other user experience (UX) researchers working for the consumer tech industry utilize persuasive technology (also called persuasive design or behavior design) to increase children's use of social media and video games, how this fosters children's overuse of screens, and how research demonstrates a connection between children's screen overuse and two problems afflicting this generation of kids: mental health struggles and poor academic performance…" https://screentimenetwork.org/apa [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 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.]