+++ WEB DESIGN UPDATE. - Volume 19, Issue 04, July 22, 2020. An email newsletter to distribute news and information about web design and development. ++ISSUE 04 CONTENTS. SECTION ONE: New references. What's new at the Web Design Reference site? http://www.d.umn.edu/itss/training/online/webdesign/ New links in these categories: 01: ACCESSIBILITY. 02: CASCADING STYLE SHEETS. 03: COLOR. 04: EVALUATION & TESTING. 05: EVENTS. 06: HTML. 07: INFORMATION ARCHITECTURE. 08: JAVASCRIPT. 09: MISCELLANEOUS. 10: NAVIGATION. 11: PHP. 12: TYPOGRAPHY. 13: USABILITY. SECTION TWO: 14: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Making Content Usable for People with Cognitive and Learning Disabilities Lisa Seeman, Rachael Montgomery, Steve Lee, and Ruoxi Ran, editors. "This document is for people who make Web content (Web pages) and Web applications. It gives advice on how to make content usable for people with cognitive and learning disabilities…" https://www.w3.org/TR/coga-usable/ 10 Easy Website Accessibility Quick Tips and Recommendations By Brad Henry. "…Here are some of our favorite fast and easy website accessibility tips that are likely won't cost you anything more than an extra couple of minutes of your time…" https://www.paciellogroup.com/10-easy-website-accessibility-quick-tips-and-recommendations/ Democratizing the Web Through Accessibility By Tammy Xu. "Our design choices determine who can benefit from our products - and who can't…" https://builtin.com/software-engineering-perspectives/web-accessibility How To Make Publishing Platforms More Accessible (Part 1) By Dave Goodman. "…I am going to run through the home page of a past client using the Divi WordPress page builder. By doing a simple automated test using the ARC Toolkit and using Apple's VoiceOver on macOS as my screen reader, I will focus on a subset of issues that arise from the test and then demonstrate how I solved the problem…I am going to run through the home page of a past client using the Divi WordPress page builder. By doing a simple automated test using the ARC Toolkit and using Apple's VoiceOver on macOS as my screen reader, I will focus on a subset of issues that arise from the test and then demonstrate how I solved the problem." https://developer.paciellogroup.com/blog/2020/07/how-to-make-publishing-platforms-more-accessible-part-1/ Icon Accessibility and aria label By Chris Ferdinandi. "…Sometimes, user interfaces include icons without any supporting text. For example, here's an SVG icon of a cloud with an arrow pointing down out of it. In this app, it's supposed to mean 'download'…" https://gomakethings.com/icon-accessibility-and-aria-label/ Describing Images in Publications-Guidance, Best Practices and the Promise of Technology (Video) (Hat Tip to Sarah Horton) By Richard Orme, Valerie Morrison, Charles La Pierre, and Gregorio Pellegrino. "In our series of free weekly webinars June 17th saw a session focused on the process of authoring quality image descriptions which are essential for accessibility…" https://daisy.org/news-events/articles/describing-images-in-publications-w/ The True Cost of Video Accessibility Lawsuits By Jaclyn Leduc. "…Settlement costs are only one piece of the pie, and it turns out that the true cost of video accessibility lawsuits may be more significant than you think…" https://www.3playmedia.com/2020/07/14/the-true-cost-of-video-accessibility-lawsuits/ Digital Accessibility Legal Update: ADA Anniversary Edition By Lainey Feingold. "July 26 marks the 30th anniversary of the Americans with Disabilities Act…" https://www.lflegal.com/2020/07/ada30-update/ +02: CASCADING STYLE SHEETS. Levels of Fix By Chris Coyier. "…It's worth noting that because people ask for reduced motion doesn't mean they are asking for absolutely zero motion. But let's set that aside for a moment. It's probably better to err toward zero if you aren't prepared to do the nuanced work of figuring out what level of reduction is best for your users…" https://css-tricks.com/levels-of-fix/ Why is CSS the Way It Is? By Chris Lilley. "A technical director of the W3C's interaction domain unpacks the histories and mysteries…" https://increment.com/frontend/ask-an-expert-why-is-css-the-way-it-is/ CSS Vocabulary By Ville V. Vanninen. "Click on the code or the sidebar to see which is what. Use the Tab key to browse via keyboard." http://apps.workflower.fi/vocabs/css/en When Do You Use inline-block? By Chris Coyier. "…When do you pick it over other, perhaps similar, options…" https://css-tricks.com/when-do-you-use-inline-block/ +03: COLOR. Why Your Mac Color Contrast Testing Might Be All Wrong By Rodrigo Sanchez. "…we must make sure that the Mac Display Profile is set to sRGB IEC61966-2.1 which is an RGB color space created by HP and Microsoft to use on monitors, printers and the internet. This will ensure that the CCA will match the colors defined for a digital display…" https://equalentry.com/why-your-mac-color-contrast-testing-might-be-all-wrong/ +04: EVALUATION & TESTING. Turning Complex Data into Compelling Stories: A 5-Step Process By Rachel Krause. "Uncover the story within extensive UX-research data by following a process of revisiting original research objectives and organizing findings into themes. https://www.nngroup.com/articles/complex-data-compelling-stories/ Service Blueprinting: A Digital Template for Remote Teams By Sarah Gibbons. The structure and format of a collaborative spreadsheet makes it an effective tool for virtual service blueprinting. https://www.nngroup.com/articles/service-blueprinting-template/ When and How to Resume Face-to-Face Research After COVID-19 By Jason Stockwell. "…We decided to conduct a study to get insights from UK research participants on when going back to face-to-face user-research sessions would be acceptable to them and whether they think face-to-face research would be safe…" https://www.uxmatters.com/mt/archives/2020/07/when-and-how-to-resume-face-to-face-research-after-covid-19.php Are Sliders Better than Numbered Scales? By Jim Lewis, PhD and Jeff Sauro. "…findings from the literature and our recent study indicate that sliders do not provide any particular measurement advantage over the more widely used linear numeric scales, especially if the linear numeric scale has at least five response options…" https://measuringu.com/numbers-versus-sliders/ +05: EVENTS. The Art and Science of Describing Images (Hat Tip to Sarah Horton) July 22, 2020. Online https://us02web.zoom.us/webinar/register/WN_vWYAxqKBRgqwbxGGdCibOg WordToEPUB Extended Tutorial - Accessible EPUB in Seconds (Hat Tip to Sarah Horton) July 29, 2020. https://us02web.zoom.us/webinar/register/WN_eKp6GWo4R0uAU_RP9t_Y2g Virtual Web Accessibility Training September 9-10, 2020. Online https://webaim.org/training/virtual/ UX Conference October October 10-16, 2020. Online https://www.nngroup.com/training/october/ UI Arch Conf November 19-20, 2020. New Orleans, Louisiana, U.S.A. https://uiarchconf.com/ +06: HTML. Button State and Accessibility By Chris Ferdinandi. "Yesterday, we looked at how to use [aria-label] to make icons with no obvious meaning for visually impaired users accessible. Today, we're going to look at button state and the [aria-pressed] attribute…" https://gomakethings.com/button-state-and-accessibility/ +07: INFORMATION ARCHITECTURE. Translating Design Wireframes Into Accessible HTML/CSS By Harris Schneiderman. "The most efficient way to build accessible websites and apps is to 'shift left' by incorporating accessibility testing into the earliest stages of your development and design process. In this article, Harris will walk you through the process of analyzing a wireframe from an accessibility perspective and making coding decisions to optimize for accessibility in both design and development phases…" https://www.smashingmagazine.com/2020/07/design-wireframes-accessible-html-css/ Creating Low-Fidelity or High-Fidelity Prototypes, Part 1 By Janet M. Six. "This month in Ask UXmatters, the UX professionals on our panel of experts begin their discussion of the various factors they consider when deciding whether to create low-fidelity or high-fidelity design deliverables or prototypes…" https://www.uxmatters.com/mt/archives/2020/07/creating-low-fidelity-or-high-fidelity-prototypes-part-1.php Optimizing Information Design By Ramon Francisco. "Information design plays a crucial role in the design of any Web site…" https://www.uxmatters.com/mt/archives/2020/07/optimizing-information-design.php +08: JAVASCRIPT. When Should You use ARIA? By Chris Ferdinandi. "In response to my article on the [aria-label] attribute, I received a handful of emails telling me that ARIA should be a last resort, and that usually a visually hidden class is the better approach…" https://gomakethings.com/when-should-you-use-aria/ Live Regions Resources By Bruce Lawson. "…I asked 'What's the most up-to-date info on aria-live regions (and ) support in AT?' for some client work I'm doing. As usual, Twitter was responsive and helpful…" https://www.brucelawson.co.uk/2020/live-regions-resources/ Accessible Animations in React By Josh W. Comeau. "…The fact that the prefers-reduced-motion media query exists in every major browser is a testament to how much work browser vendors put in, not to mention the operating system developers who built the control in the first place! They've given us the tools to solve this problem, and it's on us to carry the torch for the last mile. Let's not drop it…" https://joshwcomeau.com/react/prefers-reduced-motion/ +09: MISCELLANEOUS. Q&A With Makoto Ueki, Director, Infoaxia, Inc. By Equal Entry. "Makoto Ueki is a web accessibility expert based in Tokyo, Japan. His company Infoaxia provides a wide range of accessibility consulting services with full support for compliance with Japanese Industrial Standards…" https://equalentry.com/qa-with-makotoueki-director-infoaxia/ +10: NAVIGATION. A Skip Link on Squarespace and a Little About z-index (Part One) By Derek Jackson. "…One feature that we wanted to implement on the site was a 'skip link', or 'skip navigation' link. A skip link help users using the keyboard to navigate the page to skip to the main content of a page…" https://knowbility.org/blog/2020/squarespace-skip-link/ +11: PHP. Microsoft: We're pulling the plug on Windows builds of programming language PHP By Liam Tung. "Microsoft will no longer produce official PHP builds for Windows from PHP 8.0 onwards…" https://www.zdnet.com/article/microsoft-were-pulling-the-plug-on-windows-builds-of-programming-language-php/ +12: TYPOGRAPHY. How to Italicize Text By Chris Coyier. "HTML and CSS offer us the ability to italicize text. I'm talking about text like this. Let's cover everything you'll need to knows…" https://css-tricks.com/how-to-italicize-text/ A px is not a px By Remy Sharp. "Recently I was trying to extract some glyphs from some various fonts and in doing so I had a fundamental assumption challenged and dispelled…" https://remysharp.com/2020/07/15/a-px-is-not-a-px +13: USABILITY. 4 Design Patterns That Violate 'Back' Button Expectations - 59% of Sites Get It Wrong By Christian Holst. "…During all our usability studies we've observed how users, both novice and expert, rely extensively on the browser 'Back' button. Indeed, the 'Back' button has long been a staple of web navigation, and users' often decades-long experience with using it has caused them to develop a very specific mental model of how it should behave…It's…critical to support users' 'Back' button expectations to avoid unintended detours and changes that during testing were often a direct cause of abandonment. Despite the severity of the issue and the somewhat simple solution, 59% of sites that don't support at least one of the 4 core 'Back' button expectations…" https://baymard.com/blog/back-button-expectations Convincing Companies to Do UX and Accessibility (Video) By Jakob Nielsen. "The relationship between accessibility and usability and the best ways to convince companies to take both seriously were some of the audience questions answered by Jakob Nielsen at the Virtual UX Conference." https://www.nngroup.com/videos/convincing-companies-ux-accessibility/ Better Forms Through Visual Organization (Video) By Kathryn Whitenton. How to organize and lay out your form fields and their labels to make data entry easier for users. https://www.nngroup.com/videos/better-forms-visual-organization/ Wisdom of the Crowds, Stupidity of Organizations By Gerry McGovern. "A unique strength of the Web over all other communications channels is its ability to efficiently collect, analyze, organize and publish user-generated content…Organizations are extremely poor at managing content they have already published. COVID-19 has shown how little Information Technology, digital and the Web have actually contributed to quality, accurate, up-to-date information." https://gerrymcgovern.com/wisdom-of-the-crowds-stupidity-of-organizations/ All the Small Things: How Not To Annoy Your Mobile Users By Amalia Helen. "…We have compiled below some of the top mobile app user peeves that tend to get missed. Repeatedly falling prey to one of these things is likely to annoy some section of your base…" https://usabilitygeek.com/how-not-to-annoy-your-mobile-users/ What Can Children Teach Us About UX Design? By Sean McGowan. "…Designing for children offers us interestingly useful takeaways on UX design and even the nature of usability itself, including segmenting your user base correctly, providing ample feedback, and ensuring you remain consistent in your design." https://usabilitygeek.com/what-can-children-teach-us-about-ux-design/ Getting UX Writing Right with Microcopy By Kristin Savage. "Many make a mistake by thinking that writing microcopy (the copy for user interfaces) would be an easy transition to make. The truth is that microcopy is inherently different from marketing copy, and your experience with copywriting might not be that relevant. To get a head start in UX writing, you have to know the essential rules that make it work, which are different from copywriting rules. " https://www.uxbooth.com/articles/getting-ux-writing-right-with-microcopy/ [Section one ends.] ++ SECTION TWO: +14: What Can You Find at the Web Design Reference Site? Accessibility Information. http://www.d.umn.edu/itss/training/online/webdesign/accessibility.html Association Information. http://www.d.umn.edu/itss/training/online/webdesign/associations.html Book Listings. http://www.d.umn.edu/itss/training/online/webdesign/books.html Cascading Style Sheets Information. http://www.d.umn.edu/itss/training/online/webdesign/css.html Color Information. http://www.d.umn.edu/itss/training/online/webdesign/color.html Drupal Information. http://www.d.umn.edu/itss/training/online/webdesign/drupal.html Evaluation & Testing Information. http://www.d.umn.edu/itss/training/online/webdesign/testing.html Event Information. http://www.d.umn.edu/itss/training/online/webdesign/events.html HTML Information. http://www.d.umn.edu/itss/training/online/webdesign/html.html Information Architecture Information. http://www.d.umn.edu/itss/training/online/webdesign/architecture.html JavaScript Information. http://www.d.umn.edu/itss/training/online/webdesign/javascript.html Miscellaneous Web Information. http://www.d.umn.edu/itss/training/online/webdesign/misc.html Navigation Information. http://www.d.umn.edu/itss/training/online/webdesign/navigation.html PHP Information. http://www.d.umn.edu/itss/training/online/webdesign/php.html Sites & Blogs Listing. http://www.d.umn.edu/itss/training/online/webdesign/sites.html Standards, Guidelines & Pattern Information. http://www.d.umn.edu/itss/training/online/webdesign/standards.html Tool Information. http://www.d.umn.edu/itss/training/online/webdesign/tools.html Typography Information. http://www.d.umn.edu/itss/training/online/webdesign/type.html Usability Information. http://www.d.umn.edu/itss/training/online/webdesign/usability.html XML Information. http://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: http://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.]