+++ WEB DESIGN UPDATE. - Volume 19, Issue 40, March 31, 2021. An email newsletter to distribute news and information about web design and development. ++ISSUE 40 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. 04: EVALUATION & TESTING. 05: EVENTS. 06: JAVASCRIPT. 07: MISCELLANEOUS. 08: NAVIGATION. 09: TOOLS. 10: USABILITY. 11: WEBWASTE & SUSTAINABILITY. 12: XML. SECTION TWO: 13: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. WCAG Guide By Marcelo Sales. "WCAG 2.1 easy!" Flash cards to learn WCAG success criteria. https://guia-wcag.com/en/ Curricula on Web Accessibility: A Framework to Build Your Own Courses By Daniel Montalvo and Shadi Abou-Zahra, editors. "This resource provides teaching modules to help you create courses on digital accessibility, or to include accessibility in other courses. The modules cover accessibility foundations that apply broadly, and specific skills for developers, designers, content authors, and others…" https://www.w3.org/WAI/curricula/ Survey of Web Accessibility Practitioners #3 Results By Jared Smith. "The results of WebAIM's 3rd Survey of Web Accessibility Practitioners are now available. This was a follow-up survey to previous surveys conducted April 2014 and April 2018. There were 758 valid survey responses. Below are several items of interest…" https://webaim.org/blog/practitioners-survey-3/ You Talkin' to Me? - OZeWAI December 2020 Keynote (Video) By Léonie Watson. "The front end is changing. It's no longer something we have to push, tap or click. It has quite literally taken on a voice of its own, and using technologies like Speech Synthesis Markup Language (SSML), the Web Speech API and (maybe one day) the CSS Speech module, we can create Alexa skills, Google Home actions, and web applications that sound a lot more interesting than you might think!" https://www.youtube.com/watch?v=NNnHKdaVjis Léonie's Slides: https://presentations.tetralogical.com/2020/05/a11ytocamp/index.html Mentors On Tap, Episode #30 - Kim Krause Berg on Accessibility (Video) By Doc Sheldon and Steve. "Doc and Steve talk with Kim Krause Berg about the growing importance of addressing accessibility issues for all websites, whether subject to Sect. 508 or just WCAG…" https://www.youtube.com/watch?v=KHzz4L4-NYY Ten Accessibility Errors Automated Tools Miss on PDF Documents By Leslie Janek. "When organizations rely wholly on an automated approach to remediating PDF files of their shareholder reports, research papers, and other critical documents, some key areas for accessibility compliance get missed. The following is a list of ten of the most common…" https://www.microassist.com/digital-accessibility/pdf-accessibility-errors-automated-tools-miss/ An Accessible Newsletter By Minnesota IT Services. "Learn some best practices to improve the usability of your communication…" https://mn.gov/mnit/media/blog/?id=38-472949 Cognitive Accessibility - New Requirements and Future Legislation (Video) By Funka. "In an exciting nationally funded research project, we have developed and tested criteria for cognitive accessibility. The aim of the project is to influence future legislation so that accessibility requirements better include cognitive aspects. During this webinar, we will present the project, show concrete examples, discuss with international experts and leave room for Q&A. The webinar is organised in collaboration with IAAP Nordic…" https://www.youtube.com/watch?v=yYdg4UWI3rI&t=446s How to Enable Classic Editor in WordPress.com By Deborah Edwards-Onoro. …The recently announced WordPress.com interface change combined the Calypso and wp-admin sidebars, resulting in a changed inaccessible interface for blind users and content that can only be edited with the Block Editor. By enabling the Dashboard settings option in your Account settings, you can return the administrative dashboard to the prior interface…" https://www.lireo.com/how-to-enable-classic-editor-in-wordpress-com/ Alternate Text and Automation By Eric Bailey. "Alternate (alt) text helps people who use assistive technology understand images, and are a core part of the Web Content Accessibility Guidelines (WCAG). They require a human's input to be effective…" https://www.a11yproject.com/posts/2021-03-23-alternate-text-and-automation/ Are Bad Graphical Descriptions Better Than No Graphical Descriptions to Someone with Vision Loss? By Sheri Byrne-Haber. "More than 125K global websites use overlays rather than fixing their accessibility bugs. AI-generated alt-text used by overlays is not 100 % reliable…" https://uxdesign.cc/are-bad-graphical-descriptions-better-than-no-graphical-descriptions-to-someone-with-vision-loss-22f7a03151ee Most Utah Vaccination Websites Not Compliant For Sight Impaired By Mike Anderson. "…Researchers at the Center for Persons with Disabilities at Utah State University in Logan checked 50 websites for vaccine registrations. They found that all but two sites had multiple barriers for people who are sight challenged…" https://ksltv.com/457419/most-utah-vaccination-websites-not-compliant-for-sight-impaired/ Yes, Virginia, Purely Online Businesses are Covered by the ADA (Video) By Ken Nakata. "This decision was really a surprise. How is it that no one is talking about this case in the web accessibility community…" https://convergeaccessibility.com/2021/03/29/yes-virginia-purely-online-businesses-are-covered-by-the-ada/ The Legal Case: Why Your Kiosk Should be Accessible By Laura Miller. "Why should you consider kiosk accessibility in your kiosk project?  There are many reasons to make your kiosk project accessible. One reason to make a kiosk accessible to serve a larger group of customers and users.  Another reason to work kiosk accessibility into a project is to avoid litigation and costly settlements…" https://www.tpgi.com/the-legal-case-why-your-kiosk-should-be-accessible/ +02: CASCADING STYLE SHEETS. prefers-reduced-motion: Taking a No-Motion-First Approach to Animations By Tatiana Mac. "…Through this article, I hope to provide you an approach and guidance to discussing how you/your company use animation thoughtfully and responsibly…" https://tatianamac.com/posts/prefers-reduced-motion/ Handling Text Over Images in CSS By Ahmad Shadeed. "…In this article, I will explore the different approaches and solutions for this problem, and how to communicate the UI with a front-end developer to make sure that it's implemented as per the design mockup since some details can be easily missed in CSS…" https://ishadeed.com/article/handling-text-over-image-css/ :where() Has a Cool Specificity Trick, Too By Chris Coyier. "…what if you want to go the other way with specificity and lower it instead? Well, that's the whole point of the :where() pseudo-selector…" https://css-tricks.com/where-has-a-cool-specificity-trick-too/ +03: COLOR. WCAG: Accessible Colour and Contrast Ratios By Andy Barnes. "…This article aims to outline what contrast ratios are - in context to accessibility, what the requirements are, and how you can check you are meeting those requirements…" https://bootcamp.uxdesign.cc/wcag-accessible-colour-and-contrast-ratios-5e94ea3f81f4 +04: EVALUATION & TESTING. Scenario Mapping: Design Ideation Using Personas By Kim Salazar. Persona-based scenarios can be leveraged to influence design through guided brainstorming workshops called scenario-mapping workshops. https://www.nngroup.com/articles/scenario-mapping-personas/ Net Promoter Score in User Experience (Video) By Therese Fessenden. "Net Promoter Score (NPS) is a simple satisfaction metric that's collected in a single question. While easy to understand, it's insufficiently nuanced to help with detailed UX design decisions." https://www.nngroup.com/videos/nps-ux/ 7 Reasons People Misinterpret Survey Questions By Jeff Sauro and Jim Lewis. "…Understanding the possible reasons for misinterpretation can help with crafting better questions. Here are seven common reasons people misinterpret survey questions…" https://measuringu.com/seven-reasons-for-misinterpretation/ +05: EVENTS. The Evincible Series: Accessibility Deep Tech Talks with Marcy Sutton, Jennison Asuncion, Cameron Cundiff, Jesse Beach April 6, 2021. Online https://www.evinced.com/contact/evincible-signup/ CUNY Accessibility Conference April 6-9, 2021. Online https://cuny2.swoogo.com/access21/941702 Creating and Providing Training on Accessibility April 8, 2021. Online https://go.3playmedia.com/wbnr-04-08-2021-training Making a COVID-19 Site Accessible: From Tweet to Action April 22, 2021. Online https://groups.drupal.org/node/536349 Explore Real-World Examples of WCAG 2.2 with Thomas Logan April 22, 2021. Online https://zoom.us/meeting/register/tJUufu6spzItH90lSyiFOGc9GFNBbWduU9Pd Top Tasks Questions and Answers with Gerry McGovern April 27, 2021. Online https://register.gotowebinar.com/register/7301415130192280592 Accessibility for Web Content Authors April 28, 2021. Online https://us02web.zoom.us/webinar/register/WN_eyMRhmljQmWM76MzU1mPDQ Digital Waste Audit: How It Works with Gerry McGovern April 28, 2021. Online https://register.gotowebinar.com/register/2353586416921226256 +06: JAVASCRIPT. How to Create a Screen Reader Accessible Graph Like Apple's with D3.js By Sarah L. Fossheim. "After previously writing about the accessibility of Apple Health's data visualizations, I felt inspired to recreate one of them with D3.js. I already covered some of the basics in the form of a bar chart, so this time I decided to go for a different type of graph: the activity rings…" https://fossheim.io/writing/posts/apple-dataviz-a11y-tutorial/ Human-Readable JavaScript: A Tale of Two Experts By Laurie Barth. "JavaScript gives us many ways to do things, but deciding which way can be tricky. Laurie Barth gives us a story of two experts who solve this problem in different ways, giving some insight into how to make these decisions for your team." https://alistapart.com/article/human-readable-javascript/ How to Remove an Element from the DOM with Vanilla JS By Chris Ferdinandi. "The Node.remove() method lets you remove an element from the DOM. Call it on the element you want to remove.…" https://gomakethings.com/how-to-remove-an-element-from-the-dom-with-vanilla-js/ +07: MISCELLANEOUS. Web Development History By Richard MacManus. "Web Development History (WDH) is an ongoing project to chronicle the history of the internet from a developer perspective…WDH will be written as a blog that is regularly updated, but my ultimate goal is to turn it into a book. …" https://webdevelopmenthistory.com/ Au revoir, mon AMPmour? By Ethan Marcotte. "Google announced last year that as of May 2021, stories will no longer have to be published in the Accelerated Mobile Pages (AMP) format to appear in Google's Top News carousel. Instead, they'll simply need to meet a set of performance metrics Google's calling 'Core Web Vitals.'…" https://ethanmarcotte.com/wrote/au-revoir-mon-ampmour/ The End of AMP By Dwayne Lafleur. "I am hopeful that 2021 will be the beginning of the end for two of my least favorite things - the pandemic and Accelerated Mobile Pages (AMP)…" https://www.lafoo.com/the-end-of-amp/ +08: NAVIGATION. Under-Engineered Select Menus By Adrian Roselli. "I am still confounded how many developers and designers see a at all…" https://adrianroselli.com/2021/03/under-engineered-select-menus.html Skip-links Play an Important Role in Making a Website Accessible for Everybody By Bas. "…skip-links have great value in making a website more accessible. Here's why…" https://www.voorhoede.nl/en/blog/why-skip-links-are-important-for-accessibility/ The Search Before the Search: Keyword Foraging By Kate Moran. "When users don't know what keywords they need, they must do extra work to determine what their desired item or concept is called." https://www.nngroup.com/articles/keyword-foraging/ +09: TOOLS. Yourbrowser.is: Quickly Discover Browser and Configuration Settings By Deborah Edwards-Onoro. "…Yourbrowser.is quickly displays the settings and configuration of a digital device, including the type of device used…" https://www.lireo.com/yourbrowser-is-quickly-discover-browser-and-configuration-settings/ Tools for Auditing CSS By Silvestar Bistrović. "Auditing CSS is not a common task in a developer's everyday life, but sometimes you just have to do it. Maybe it's part of a performance review to identify critical CSS and reduce unused selectors. Perhaps is part of effort to improve accessibility where all the colors used in the codebase evaluated for contrast. It might even be to enforce consistency…" https://css-tricks.com/tools-for-auditing-css/ +10: USABILITY. UI & UX Micro-Tips: Volume Three By Marc Andrew. "When creating efficient, accessible, and beautiful UIs, it takes only the smallest tweaks to improve your designs…" https://marcandrew.me/ui-ux-micro-tips-volume-three/ Starting a New UX Project (Video) By Garrett Goldfield. "At the beginning of a new project, identify the level of UX effort needed, and the key deliverables you aim to produce. Identify known and missing knowledge about users and tasks to uncover gaps before they bite you." https://www.nngroup.com/videos/starting-new-ux-project/ +11: WEBWASTE & SUSTAINABILITY. The Price of Free is Waste By Gerry McGovern. "All 'free' systems are wasteful by design because a free system merely hides or displaces its costs…Every opportunity we have to save one gram of CO2 we should take. Heavy websites are a tax on poor people and a tax on the earth. The bad and wasteful habits we develop in digital feed into the rest of our lives. Let's clean up our digital world." https://gerrymcgovern.com/the-price-of-free-is-waste/ E-Waste: An Urgent Problem That's Largely Ignored By Dick Weisinger. "Every year enormous amounts of electronic products are discarded as they are updated with newer and more advanced replacements. Unfortunately, less than 20 percent of discarded electronics are recycled…" https://formtek.com/blog/e-waste-an-urgent-problem-thats-largely-ignored/ +12: XML. SVG Generators By Iris Lješnjanin. "…let's look at SVG generators - for everything from shapes and backgrounds to SVG path visualizers and SVG → JSX generators…" https://smashingmagazine.com/2021/03/svg-generators/ [Section one ends.] ++ SECTION TWO: +13: 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.]