+++ WEB DESIGN UPDATE. - Volume 19, Issue 46, May 12, 2021. An email newsletter to distribute news and information about web design and development. ++ISSUE 46 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: DRUPAL. 04: EVALUATION & TESTING. 05: EVENTS. 06: JAVASCRIPT. 07: MISCELLANEOUS. 08: PHP. 09: TOOLS. 10: TYPOGRAPHY 11: USABILITY. 12: WEBWASTE & SUSTAINABILITY. SECTION TWO: 13: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Switch Component: Checkbox By Scott O'Hara. "Pattern to modify a checkbox into a switch component…" https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox--switch/ Accessibility Testing As A Screen Reader User By Isabel Holdsworth. "…what are the most serious blockers for blind testers, and are there ways to work around them? Below are just some of the issues I encounter that uniquely affect me as a blind tester…" https://www.tpgi.com/accessibility-testing-as-a-screen-reader-user/ Nuanced Perspectives Toward Disability Simulations from Digital Designers, Blind, Low Vision, and Color Blind People By Garreth W. Tigwell. "…Disability simulations are one resource available to digital designers to support them in making content accessible, however, many issues surround this approach…" https://dl.acm.org/doi/10.1145/3411764.3445620 HelloA11Y Presents GAAD 2021 By Raghavendra Satish Peri. "…If you are a developer, designer, project manager or just want to get started on accessibility, we got you covered…" https://www.digitala11y.com/helloa11y-presents-gaad-2021/ Avoid AccessiBe & Other Companies Claiming Quick & Easy AI Accessibility (Video) By Haben Girma. "An alarming number of companies have fallen for it…" https://www.youtube.com/watch?v=R12Z1Sp-u4U Blind People, Advocates Slam Company Claiming to Make Websites ADA Compliant By April Glaser. "'If you have a website, do you want to include disabled people or do you want to exclude them? That's why it's a civil right,' one expert said." https://www.nbcnews.com/tech/innovation/blind-people-advocates-slam-company-claiming-make-websites-ada-compliant-n1266720 7 Accessibility FAQ on the Winn-Dixie ADA Appeal Decision (2021) By Glenda Sims. "Last month, on 4/7/2021 a single U.S. Court of Appeals (in the 11th Circuit) decided in a 2 to 1 split decision that Winn-Dixie's website did not have to be accessible to people who are blind…" https://www.deque.com/blog/7-accessibility-questions-winn-dixie-ada-appeal-decision/ +02: CASCADING STYLE SHEETS. A Primer On CSS Container Queries By Stephanie Eckles. "A prototype of the long-awaited CSS container queries has landed in Chrome Canary and is available for experimentation. Let's look at what problem is being solved, learn how container queries work, and see how they compare with and complement existing CSS features for layout." https://www.smashingmagazine.com/2021/05/complete-guide-css-container-queries/ Next Gen CSS: @container By Una Kravets. "…@container brings us the ability to style elements based on the size of their parent container…" https://css-tricks.com/next-gen-css-container/ Susy and Sass, CSS Layers and CSS Compatibility, Container Queries and CSSWG (Podcast) By Bruce Lawson, Vadim Makeev, and Miriam Suzanne. https://f-word.dev/episodes/11/ Reader Modes and Reading Apps By Sara Soueidan. "Our content will not always look the way we expect it or want it to. Many apps, tools, and environments that people use to browse the Web strip our content of our CSS and apply their own styles to it. And unless we always keep that in mind, we risk creating incomplete or even broken experiences for users of those technologies or tools…" https://www.sarasoueidan.com/blog/tips-for-reader-modes/ aspect-ratio and grid By Peter Paul Koch. "I'm currently investigating the new aspect-ratio declaration and plan to write an article about it. However, I got stuck on aspect ratios in a grid context. Chrome/Safari and Firefox do something different here, and I understand neither approach. So I hope I can get some help." http://www.quirksmode.org/blog/archives/2021/05/aspectratio_and.html Criticism Pushes the Web Forward By Hidde de Vries. "This week, a friend shared a blog post that critiqued a popular framework for CSS. Twitter started to discuss if it's okay to criticise tools. In this post, I'll say it is not just okay, it is also important…" https://hiddedevries.nl/en/blog/2021-05-08-criticism-pushes-the-web-forward Is CSS a Programming Language? By Chris Coyier. "I have a real distaste for this question. It might seem like a fun question to dig into on the surface, but the way it enters public discourse rarely seems to be in good faith…" https://css-tricks.com/is-css-a-programming-language/ +03: COLOR. Text Contrast Issues That Cannot Be Detected with Automated Tools By Adrian Roselli. "These are based on real-world examples that we have encountered in audits, though this is simplified to show the salient bits…" https://codepen.io/aardrian/details/ZLZMep +04: EVALUATION & TESTING. Do Too Many Response Options Confuse People? By Jeff Sauro and Jim Lewis. "…In this article, we dive deep into many sources to understand the evidence for or against too many points…" https://measuringu.com/do-too-many-options-confuse/ How Useful Is the System Usability Scale (SUS) in UX Projects? (Video) By Jakob Nielsen. "SUS is a 35-years old and thus well-established way to measure user satisfaction, but it is not the most recommended way of doing so in user research." https://www.nngroup.com/videos/sus-usefulness/ Beware the Cut 'n Paste Persona By Emanuela Cozzi and Lennart Overkamp. "User personas are a cornerstone of user research, but can fail when they portray abstract caricatures rather than actual potential users. Emanuela Cozzi and Lennart Overkamp show us a new take on user personas that can prove to be more effective and meaningful." https://alistapart.com/article/beware-the-cut-n-paste-persona/ +05: EVENTS. Future Date 2021 May 12, 2021. Online https://futuredateconf.org/ Pre-GAAD event 19 May 2021 - Authoring Tools with Built-In Accessibility May 19, 2021. Online https://www.funka.com/en/pre-gaad Build Accessible Websites Out-of-the-Box with Drupal May 20, 2021. Online https://www.eventbrite.ca/e/build-accessible-websites-out-of-the-box-with-drupal-free-webinar-registration-153799268753 GAAD 10th Anniversary by A11ySea in Partnership with A11yBay May 20, 2021. Online https://www.meetup.com/a11ysea/events/278026073/ Accessibility Teachers' Coffee Hour May 20, 2021. Online https://teachaccess.org/accessibility-teachers-coffee-hour/ Modern Web | State of A11Y May 25, 2021. Online https://www.moderndotweb.com/ Accessibility Testing with People with Disabilities June 1, 2021. Online https://www.meetup.com/A11yNYC/events/277880780/ Transitioning from WCAG 2.0-2.1 June 9, 2021. Online https://www.tpgi.com/webinar-june-9-transitioning-from-wcag-2-0-2-1/ Virtual Web Accessibility Training June 9-10, 2021. Online https://webaim.org/training/virtual/ ACM Web Science Conference 2021 June 21-25, 2021. Online https://websci21.webscience.org/ Web Accessibility Techniques and Testing (Virtual) July 22, 2021. Online https://events.humanitix.com/web-accessibility-techniques-and-testing-virtual-july-vision-australia ASSETS 2021 October 18-22, 2021. Online https://assets21.sigaccess.org/ +06: JAVASCRIPT. Getting an Array From a String with Vanilla JS By Chris Ferdinandi. "Let's imagine that we have a comma-separated string of shoppingList items, and we want to convert it into an array…" https://gomakethings.com/getting-an-array-from-a-string-with-vanilla-js/ Released: Apex 4X : The Comprehensive ARIA Development Suite By Bryan Garaventa. "4X is a comprehensive ARIA development suite that does not require prior knowledge of ARIA to implement…" https://www.linkedin.com/pulse/released-apex-4x-comprehensive-aria-development-suite-bryan-garaventa +07: MISCELLANEOUS. What Google's New Page Experience Update Means for Images on Your Website By CSS-Tricks. "…Website owners with image-heavy websites need to be particularly vigilant to adapt to these changes or risk falling by the wayside. In this article, we'll talk about everything you need to know regarding this update, and how you can take full advantage of it…" https://css-tricks.com/what-googles-new-page-experience-update-means-for-images-on-your-website/ 3 Principles of Design Thinking (Video) By Alita Joyce. "User-centered problem solving creates innovative products, based on observational research with real users, visual sense-making, and iterative design." https://www.nngroup.com/videos/3-principles-design-thinking/ +08: PHP. The Definitive PHP 5.6, 7.0, 7.1, 7.2, 7.3, 7.4, and 8.0 Benchmarks (2021) By Salman Ravoof. "This is a detailed benchmark comparison on the performance of the different PHP versions across different CMS and frameworks…" https://kinsta.com/blog/php-benchmark What's New in PHP 8 (Features, Improvements, and the JIT Compiler) By Carlo Daniele. "…In this post, we covered the most interesting optimizations and features coming with PHP 8. The most awaited of which is surely the Just in Time compiler, but there's so much more with PHP 8." https://kinsta.com/blog/php-8/ +09: TOOLS. Role Reverser By Ian Lloyd. "If you find yourself using the 'role' attribute to indicate to a browser what a thing on the page is, you're probably better off using something else instead. Here's something that may help you…" https://a11y-tools.com/role-reverser/ Selectors Explained By Kitty Giraudel. "Translate CSS selectors into plain English…" (URL has changed since last year when it was first released.) https://kittygiraudel.github.io/selectors-explained/ Accessibility Inspector (FireFox) By Mozilla. "The Accessibility Inspector provides a means to access important information exposed to assistive technologies on the current page via the accessibility tree, allowing you to check what's missing or otherwise needs attention. This article takes you through the main features of the Accessibility Inspector and how to use it…" https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector +10: TYPOGRAPHY. 16px or Larger Text Prevents iOS Form Zoom By Chris Coyier. "…If the font-size of an is 16px or larger, Safari on iOS will focus into the input normally. But as soon as the font-size is 15px or less, the viewport will zoom into that input…" https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ The Visual System - A Brief Guide To Anatomy and Physiology in the Context of Typography (Hat tip to Jim Allan) By Bruno Maag. "The vast majority of people would classify reading as a visual activity but it can also be a tactile experience such as Braille script or touch-sign language. This article focuses on the visual system and with an understanding of the visual system it may be easier to lower the accessibility barriers some people may experience…" https://medium.com/the-readability-group/the-visual-system-a-brief-guide-to-anatomy-and-physiology-in-the-context-of-typography-b29718389f16 +11: USABILITY. Getting UX Writing Right with Microcopy By Kristin Savage. "…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/ Common Ground and UX By Raluca Budiu. "Any efficient communication requires that communication partners establish and rely on common ground so that they can take communication shortcuts. https://www.nngroup.com/articles/common-ground/ +12: WEBWASTE & SUSTAINABILITY. Reducing Digital Energy Waste By Gerry McGovern. "…The total quantity of e-waste is doubling roughly every 15 years. We can solve this problem. But we need a radical rethink of how we see technology. Buy to last. Use sparingly." https://gerrymcgovern.com/reducing-digital-energy-waste/ [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.]