+++ WEB DESIGN UPDATE. - Volume 18, Issue 44, April 30, 2020. An email newsletter to distribute news and information about web design and development. ++ISSUE 44 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: TYPOGRAPHY. 11: USABILITY. SECTION TWO: 12: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. WCAG 2.1 Checklist with Filter and Links By Web Overhauls. "Adapted from Paul Adam's WCAG 2.0 Checklist…" https://codepen.io/weboverhauls/full/zYvopYE Understanding SC 1.4.11 Non-text Contrast By Sathish Kumar. "Modern design practices heavily rely on visual presentations for identification of active user interface components and dissemination of data. But users with moderately low vision have difficulty…" https://www.digitala11y.com/understanding-sc-1-4-11-non-text-contrast/ Creating Accessible Forms By WebAIM. "WebAIM has significantly updated is forms article to provide additional details on using ARIA, autocomplete, placeholder, and more." https://webaim.org/techniques/forms/ Which Is the Best Automatic Captioning Tool for Video Calls? By Meryl K. Evans. "One good thing came out of COVID-19. It forced me to try video calls again. The reason I don't love video calls is that I miss too much. While I'm a strong lipreader, video calls have a few challenges…" https://meryl.net/best-automatic-captioning-tool-for-video-calls/ 7 Best Practices for Live Auto Captioning Quality By Samantha Sauld. "…As more people and organizations shift to online platforms for live events, it's important to keep these 7 best practices in mind in order to achieve high-quality live auto captions…" https://www.3playmedia.com/2020/04/22/best-practices-for-live-auto-captioning-quality/ Why We Say Accessibility is Now More Important than Ever By Jonathan Avila. "…up until the recent pandemic there have been workarounds, alternatives, and fallback approaches that could be used to meet requirements such as the Americans with Disabilities Act and Section 504 of the Rehabilitation Act. As so many activities of daily life have moved solely online, in many cases those alternatives and workarounds are no longer an option…" https://www.levelaccess.com/why-we-say-accessibility-is-now-more-important-than-ever/ Internet Anxiety with David Swallow (Podcast) By UXPodcast. "What makes you anxious when using the internet? We talk to David Swallow about the ways in which websites can make us stressed, irritated and cause serious problems for people with panic and anxiety disorders…" https://uxpodcast.com/235-internet-anxiety-david-swallow/ Inclusive Design 24 Returns September 17, 2020: Call for Speakers By Deborah Edwards-Onoro. "…Here's your opportunity to share what you've learned or discovered…" https://www.lireo.com/inclusive-design-24-returns-september-17-call-for-speakers/ A Future Date Day 3 (Video) By Many Accessibility Advocates. "Track: Accessibility Programs…" https://www.youtube.com/watch?v=qsifjAR2r14 Keeping Up With… Universal Design for Learning By Robin Brown, Zach Wellhouse, and Amy Wolfe. "Universal Design for Learning (UDL) is an educational movement focused on changing our instructional practices to reach the maximum number of students regardless of ability, disability, age, gender, or cultural and linguistic background. Applying UDL to library instruction means designing instruction that accounts for everyone's abilities and differences. Library instruction needs to be presented and accessed in several formats, to be adjustable to the various styles of students, and to limit barriers for all learners. Designing for accessibility benefits everyone, not just those with disabilities." http://www.ala.org/acrl/publications/keeping_up_with/udl On the Hook: Website Developers may have ADA Liability for Inaccessible Websites By Richard M. Hunt. "Website developers and even remediation experts have reason to be concerned about a recent decision from California…" http://accessdefense.com/?p=5407 +02: CASCADING STYLE SHEETS. Spacing in CSS By Ahmed Shadeed. "…I will cover everything you need to know about spacing in CSS, the different ways of achieving that, and when to use a padding or margin. Let's dive in…" https://ishadeed.com/article/spacing-in-css/ Creating an Accessible Range Slider with CSS By Lindsey Kopacz. …I've always loved exploring how to make semantic, accessible elements aesthetically pleasing. And yes, it is possible. Challenging myself to do this has improved my CSS skills…" https://www.a11ywithlindsey.com/blog/creating-accessible-range-slider-css Thoughts on an Implementable Path Forward for Container Queries By David Barron. "…To address the need for container queries, I'm proposing a feature that both addresses container queries and also adds syntax for scope-based cascading to CSS…" https://github.com/dbaron/container-queries-implementability First Public Working Draft: CSS Box Model Module Level 4 By W3C. "The CSS Working Group has published a First Public Working Draft of CSS Box Model Module Level 4. This specification describes the margin and padding properties, which create spacing in and around a CSS box…" https://www.w3.org/blog/news/archives/8452 +03: EVALUATION & TESTING. Remote Moderated Usability Tests: How to Do Them By Kate Moran and Kara Pernice. "The key to good remote moderated testing is to be thoroughly prepared and organized. Follow these 7 steps to ensure your study's success." https://www.nngroup.com/articles/moderated-remote-usability-test/ Remote Usability Testing - Best Practices By Vikas Kalwani. "An important aspect of building world-class products is to take feedback from users while you're building it. This is done to constantly improve upon the product as per what the users want, which ultimately helps in successfully crushing the business goals. Usability testing deals with making users interact with your product or website to evaluate its user experience. It helps in determining whether users can use your product with ease or not and also know about possible usability issues overlooked by designers, UX researchers, developers, and product managers…" https://usabilitygeek.com/remote-usability-testing-best-practices/ What's in a Name? How to Select a Name for Your Personas By Andrew Schall. "Just like real people, names matter and can influence the success or failure of your personas…" https://www.uxbooth.com/articles/whats-in-a-name-how-to-select-a-name-for-your-persona/ +04: EVENTS. The Current State, Past Progress, and Future Prospects of Web Accessibility May 1, 2020. Online https://eventbrite.com/e/the-current-state-past-progress-and-future-prospects-of-web-accessibility-registration-103740657098 WAVE - What's New and What's Coming? May 6, 2020. Online https://zoom.us/webinar/register/WN_c1WIF-HYQPCTYjEpU1IKhA Accessible Images When It Matters Most May 14, 2020. Online https://accessibility.deque.com/accessible-images-when-it-matters-most A11y Talks (May 2020):A11y Axioms - What are the basic truths about digital accessibility? May 28, 2020. Online. https://groups.drupal.org/node/535905 Higher Ed Digital Conference June 3, 2020. Online https://higheredexperts.com/edu/course/higher-ed-digital-conference/ Quick Start to Captioning June 4, 2020. Online https://go.3playmedia.com/wbn-qsc UX Conference August August 10-21, 2020. Online https://www.nngroup.com/training/august/ Paris Web October 1-3, 2020. Paris, France https://www.paris-web.fr/ World Usability Day November 14, 2020. Everywhere https://worldusabilityday.org/ +05: HTML. WebDev Pro Tip By Web Axe. "to make a website accessible, make the code more simple and semantic. Don't over-complicate code i.e. unnecessarily customizing native behavior, unnecessarily duplicating content, overuse of ARIA, etc. #a11y #ariaSerious…" https://twitter.com/webaxe/status/1254486853282979841 +06: JAVASCRIPT. Another One-Line NPM Package Breaks the JavaScript Ecosystem By Catalin Cimpanu. "An update to tiny 'is-promise' library impacted millions of JavaScript projects…" https://www.zdnet.com/google-amp/article/another-one-line-npm-package-breaks-the-javascript-ecosystem/ Gardened By Ethan Marcotte. "…Time and again, our industry chooses frameworks that weren't designed for accessibility or for performance. And in the middle of a global health crisis, I think it's time we talked about how the tech industry-an industry responsible for providing life-saving information and services, now more than ever-can be allowed to self-regulate. If other industries follow building codes and regulations, why shouldn't we?" https://ethanmarcotte.com/wrote/gardened/ What I Wish I Knew About React By Ire Aderinokun. "A couple weeks ago I started working on my first React application. Not only was it my first React application, but it was also my first React Native application, so a lot was new to me all in one go… https://bitsofco.de/what-i-wish-i-knew-about-react/ The Beauty of Progressive Enhancement By Manuel Matuzović. "…it's beautiful to see which shape an experience can take on different devices, operating systems, and browsers. Progressive Enhancement allows us to use the latest and greatest features HTML, CSS and JavaScript offer us, by providing a basic, but robust foundation for all. Enabling people who use browsers like Internet Explorer 11 or Opera Mini to access content is essential. Don't rely on browser statistics, think about who you're building websites for. Our users are diverse, just like their physical abilities, personal preferences, and the devices and browsers they're using." https://www.matuzo.at/blog/beauty-of-progressive-enhancement/ +07: MISCELLANEOUS. What is a Resilient Website? with Jeremy Keith (PodCast) By @ed_the_coder and @thomashazledine. "This week we're joined by Jeremy Keith, a web developer and author who's had a massive influence on at least one of our hosts. Jeremy introduces us to the concept of "resilient" websites, and has loads of advice for developers new to the field…" https://aquestionofcode.com/60-what-is-a-resilient-website-jeremy-keith/ +08: NAVIGATION. Three Key SERP Features: Featured Snippets, People Also Ask, and Knowledge Panels By Kate Moran and Cami Goray. "These elements of search-engine results pages can direct attention, help people reformulate their queries, and influence users' information needs." https://www.nngroup.com/articles/key-serp-features/ Remove "Click Here" From Your Copy By Eric W. Bailey. "You might tap, not click. Or press a key. Or vocalize a command. Or let your gaze dwell. Or nod your head. Or puff some air. Always strive to disambiguate." https://twitter.com/ericwbailey/status/1255160136366260229 +09: TOOLS. WAVE Webinar and Intro Video By Jared Smith. "…To help newcomers to WAVE, we have recently released this introduction video that provides an excellent overview of WAVE and how to use it in your accessibility testing…" https://webaim.org/blog/wave-webinar-and-intro-video/ SAS Graphics Accelerator for Google Chrome Offered by: sas-chrome-admins. "Enables users with visual impairments or blindness to create, explore, and share data visualizations…" https://chrome.google.com/webstore/detail/sas-graphics-accelerator/ockmipfaiiahknplinepcaogdillgoko?hl=en Accessible Data Visualizations Using SAS Graphics Accelerator (Video) By Ed Summers. "…learn how to: 1.) Use Google Maps to create maps that contain points of interest such as intersections, buildings, bus stops, restaurants, and non-visual landmarks that facilitate orientation. 2.) Use SAS Graphics Accelerator to convert those maps into accessible digital maps that can be explored using non-visual methods. 3.) Share accessible digital maps via email or publish them on your website…" https://support.sas.com/accessibility/webinars/2020-3/index.html +10: TYPOGRAPHY. Test that Text Sizes and Zooms Correctly By National Health Service UK. People use their browser to change the size of content, and people with low vision may use that to a more extreme level. The guidelines specify a level of 320 (CSS) px wide. That is equivalent to 400% for a 1280px wide browser. https://service-manual.nhs.uk/accessibility/development#test-that-text-sizes-and-zooms-correctly Accessible Font Sizing, Explained By Andrés Galante. "The Web Content Accessibility Guidelines (WCAG), an organization that defines standards for web content accessibility, does not specify a minimum font size for the web. But we know there's such a thing as text that is too small to be legible, just as text that can be too large to consume. So, how can we make sure our font sizes are accessible…" https://css-tricks.com/accessible-font-sizing-explained/ +10: USABILITY. UX Design Glossary: 84 Key Terms To Help You Get Started By Andrew Wilshere. "…In the rest of this UX design glossary post, we'll work through some of the terms the UX designer is likely to encounter in their daily work. This is part 1 of a 2-part series-next time we'll be covering some more advanced terminology…" https://trydesignlab.com/blog/ux-design-glossary-key-terms-getting-started/ Improving UX Writing By Punam Saxena and Samiksha Chaudhuri. "To ensure a good user experience, it is essential to design user-interface text to be accessible to users with different abilities…" https://www.uxmatters.com/mt/archives/2020/04/improving-ux-writing.php Mapping the 'Information' Genome for COVID-19 By Gerry McGovern. "It's never been more important for people to have speedy access to the right information…" https://gerrymcgovern.com/mapping-the-information-genome-for-covid-19/ The User Experience Of Meeting Software By Jeff Sauro and Jim Lewis. "…Our most recent 2020 benchmark report, which included meeting software, concluded at the end of 2019, right before the surge in usage from the pandemic. In this unusual time, we wanted to see whether people's attitudes have changed. To find out, we conducted another benchmark study, this one focused on meeting software…" https://measuringu.com/meeting-software-2020/ [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.]