+++ WEB DESIGN UPDATE. - Volume 19, Issue 24, December 9, 2020. An email newsletter to distribute news and information about web design and development. ++ISSUE 24 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: HTML. 07: JAVASCRIPT. 08: MISCELLANEOUS. 09: NAVIGATION. 10: PHP. 11: TOOLS. 12: USABILITY. 13: WEBWASTE & SUSTAINABILITY. SECTION TWO: 14: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Up Your A11y By Suzanne Aitchison. "A web accessibility toolkit. Tutorials & resources for developers seeking to build accessible web experiences…" https://www.upyoura11y.com/ Alt-Text as Poetry By Bojana Coklyat and Shannon Finnegan. "…Alt-text is an essential part of web accessibility. It is often overlooked or understood through the lens of compliance, as an unwelcome burden to be met with minimum effort. How can we instead approach alt-text thoughtfully and creatively?…" https://alt-text-as-poetry.net/ aria-label, aria-labelledby, and aria-describedby: What's the Difference? By Ben Myers. "…I'd like to hone in on three ARIA attributes that, in my experience, are just similar enough to be confusing: aria‑label, aria‑labelledby, and aria‑describedby…" https://benmyers.dev/blog/aria-labels-and-descriptions/ Reading With and Without Text Wrapping (Video) By Shawn Lawton Henry. Accessibility Foundations Course Excerpt: "This next activity illustrates the importance of text wrapping. That is, making sure that you don't have to scroll both horizontally and vertically to read a block of text. It's hard for anyone to manipulate and comprehend text if they have to scroll both ways. And especially hard for people with cognitive disabilities and motor impairments, like tremors. Which I'll show you. This is more commonly an issue for people with low vision…" https://www.youtube.com/watch?v=5nlcEgJGIs8 Low Vision: Challenging Assumptions and Understanding Differences (Video) By Shawn Lawton Henry. Accessibility Foundations Course Excerpt: "Accessibility addresses the wide range of abilities and disabilities. It's also important to understand that it's not uncommon for an individual person to have multiple disabilities and for abilities to change…" https://www.youtube.com/watch?v=JUfmCvdzqbM Checking Headings - Accessibility (Video) By Makoto Ueki. Accessibility Foundations Course Excerpt: "…now let's move on to headings. Webpages often have sections of information separated by visual headings. Usually heading text is bigger and bolder than the surrounding text. Adding these kinds of styles is a good indicator of the importance of each section. But to make headings work for everyone they need to be coded as headings not just styled…" https://www.youtube.com/watch?v=JR5hCvifJVo How a Blind Person Uses a Website on Mobile Versus Desktop (Video) By Jason Taylor and Joseph DiNero. "Blind people navigate differently on mobile devices than on desktop computers. This webinar will demonstrate and explain how to make digital content accessible for both…we bring back Joseph DiNero as our presenter, an assistive technology specialist who is blind. Joseph will demonstrate and explain strategies he uses when browsing online, visiting a new website for the first time and share his experiences with navigating web content on mobile versus desktop." https://www.youtube.com/watch?v=CJ4tHdiIZHw A11y Advent Calendar By Hugo 'Kitty' Giraudel. "I am between jobs with a bit of free time, so I thought I would try something new this year and publish an accessibility tip a day…" https://hugogiraudel.com/2020/12/01/a11y-advent-calendar/ Framework for Universal Design in Higher Education By Sofia Enamorado. "The Universal design framework is designing to help institutions create products and environments that are usable for all people. Universal design (UD) goes beyond ADA compliance and focuses on inclusivity…" https://www.3playmedia.com/blog/framework-universal-design-in-higher-education/ XR Access Forges Ahead By Bill Curtis-Davidson. "Virtual, augmented, and mixed reality technologies (collectively called XR) have advanced in the last decade, but some developers have overlooked accessibility in their designs. XR Association (XRA) worked with members of XR Access, including people with disabilities, to address this challenge. ...." https://peatworks.org/xr-access-forges-ahead/ VPAT Primer: What is a VPAT? By Sanjay Nasta. "…VPAT stands for Voluntary Product Accessibility Template…VPAT was developed to provide a standard reporting format and make it easier for procurement departments to have conversations regarding your product's accessibility…" https://www.microassist.com/digital-accessibility/vpat/ Smart Home Automation Technology Company Sued for Website ADA Violations By Kirsten Errick. "On Monday in the Southern District of New York, the plaintiff, a visually impaired and legally blind individual, filed a class-action complaint against Brilliant Home Technology, a smart home automation company, for allegedly violating the Americans with Disabilities Act (ADA) and the New York City Human Rights Law (NYCHRL) for its website, which the plaintiff and putative class were unable to fully access with their screen-reading software…" https://lawstreetmedia.com/tech/smart-home-automation-technology-company-sued-for-website-ada-violations/ Does the Gimlet Media Lawsuit Present a New Angle to Digital Accessibility? By Jenna Walter. "…The case against Gimlet Media is different from the previous accessibility lawsuits. Most of the earlier high profile lawsuits against large businesses were filed by plaintiffs who were blind or visually impaired. However, the Gimlet Media case is the first of its kind, where legal compliance is related to the accessibility of audio content…" https://www.imcgrupo.com/does-the-gimlet-media-lawsuit-present-a-new-angle-to-digital-accessibility/ +02: CASCADING STYLE SHEETS. Quick Tutorial CSS Tip: How to Show Source Code the Easy Way By Christian Heilmann. "Sometimes when you build a demo HTML document and you want to display the source code of the script in it. The problem is that often your script and what you show gets out of sync when you hard-code it into your docs…" https://dev.to/codepo8/quick-tutorial-css-tip-how-to-show-source-code-the-easy-way-2npl A Utility Class for Covering Elements By Michelle Barker. "Here's something I find myself needing to do again and again in CSS: completely covering one element with another…" https://css-irl.info/a-utility-class-for-covering-elements/ What Makes CSS Hard To Master By Tim Severien. "…If we, as a community, start to appreciate the complexity of writing CSS, perhaps we can ask for help instead of blaming the language when we're confused or stuck. We might also stop looking down on CSS specialists…" https://timseverien.com/posts/2020-12-06-what-makes-css-hard-to-master/ +03: COLOR. Can You Identify Which Color Combination has the Greatest Contrast? By Thomas Logan. "Color contrast is an interesting requirement from the Web Content Accessibility Guidelines (WCAG) that aims to ensure that the colors used to present text on the web are able to be read by the widest number of people. We wanted to design an experiment to test how well people can tell which color combination has the strongest contrast…" https://equalentry.com/can-you-identify-which-color-combination-has-the-greatest-contrast/ +04: EVALUATION & TESTING. Contextual Inquiry: Inspire Design by Observing and Interviewing Users in Their Context By Kim Salazar. "Through observation and collaborative interpretation, contextual inquiry uncovers hidden insights about customer's work that may not be available through other research methods." https://www.nngroup.com/articles/contextual-inquiry/ Facilitation 101 By Sarah Gibbons. "The facilitator of a UX workshop, meeting, or other team activity anywhere in the design process has the job of enhancing the group's performance by optimizing the process through structure, activity, and guidance." https://www.nngroup.com/videos/facilitation-101/ From Soared to Plummeted: Can We Quantify Change Verbs? By Jeff Sauro and Jim Lewis. "…Unlike mathematics, much of natural language is ambiguous, including expressions of uncertainty and change. We see this ambiguity daily in headlines that report a change of some type without including the actual amount of change (e.g., 'Coronavirus Case Numbers Spiking Again'). To help understand how people interpret the magnitude of such claims, we analyzed estimates from 454 US-based respondents on 12 verbs in four contexts, using either sliders or open numeric fields. We found…" https://measuringu.com/change-verbs/ Validity of Three Discount Methods for Measuring Perceived Usability By Ian Roberson and Philip Kortum. "Within the domain of subjective usability assessment, several potential discount methods exist. However, there is little or no prior…" https://uxpajournal.org/validity-measuring-perceived-usability/ +05: EVENTS. Digital Accessibility Foundations Course December 3, 2020 through at least the first quarter of 2021. Course Information: https://www.w3.org/WAI/fundamentals/foundations-course Enroll: https://www.edx.org/course/web-accessibility-introduction VPAT 101: A Guide to the Voluntary Product Accessibility Template December 15, 2020. Online https://www.paciellogroup.com/webinar-dec-15-vpat-101/ Digital Accessibility - Your Questions Answered December 17 at 12:30 pm AEDT. Online https://events.humanitix.com/vision-australia-free-webinar-digital-accessibility-your-questions Devopsdays Houston 2021 April 21-22, 2021. Houston, Texas, U.S.A. https://devopsdays.org/events/2021-houston/welcome/ Confab May 5-7, 2021. Online https://www.confabevents.com/ CHI 2021 May 8-13, 2021. Yokohama, Japan https://chi2021.acm.org/ University of Guelph Accessibility Conference May 26-27, 2021. Guelph, Ontario, Canada https://opened.uoguelph.ca/accessibility-conference?_mid_=1718 +06: HTML. A Placeholder is Not a Label By Manuel Matuzović. "Every form input element needs a label. When screen reader users access a form field, the label is announced with the field type (e.g. first name, edit text). If it's missing, users might not know what they're supposed to fill in (e.g. edit text). Some screen readers fall back to placeholder as the label, but it's not recommended to rely on it.…" https://www.htmhell.dev/24-a-placeholder-is-not-a-label/ Notes on HTML 3.2 By Jens Oliver Meiert. "Would it still be useful to read the HTML 3.2 specification-from 1997?…" https://meiert.com/en/blog/notes-on-html-32/ +07: JAVASCRIPT. How to Debug JavaScript Like a Pro By Chris Ferdinandi. "My debugging process is really basic. It's just two steps, repeated consistently…" https://gomakethings.com/how-to-debug-javascript-like-a-pro/ Scoping with Vanilla JS ES Modules By Chris Ferdinandi. "Over the last few days, we've been learning about ES modules. One of the biggest benefits of ES modules is that they let you modularize your code, making large code bases a bit easier to work with. But, they provide another big benefit, too: built-in scoping…" https://gomakethings.com/scoping-with-vanilla-js-es-modules/ Javascript Addition By Charlie Midtlyng. "…If you have been working with JavaScript, you have probably seen a lot of usage with the + operator and discovered that the output is not necessarily what you expected…" https://javascript.christmas/2020/1 The Three Ways of Fetching By Ida Marie Vestgøte Bosch. "…we say that there are three ways to retrieve data in JavaScript, but we only explain one of the methods. Now, let's see how each of them works: callbacks, promises and async / await…" https://javascript.christmas/2020/2 Closures By Henrik Hermansen. "I've heard the term 'closures' many times, but I never really bothered to dive into the meaning of it. Maybe this is because I had a decent idea of what it was about, and I knew pretty well how to use it? It's about time I take the leap to figure this out, and finally get some closure…" https://javascript.christmas/2020/4 +08: MISCELLANEOUS. Why Do We Call it a Homepage? By Jay Hoffmann. "The word homepage came into popular use in the mid to late 90's, but it's origin dates back to the web's beginning…" https://thehistoryoftheweb.com/why-do-we-call-it-a-homepage/ +09: NAVIGATION. Accessible and User-Friendly Mega-Menus By Alastair Campbell. "…When implementing an accessible mega menu onto your website, there are a number of key points to consider to create a better experience for all your the end-users. There are two main approaches you can take…" https://www.nomensa.com:443/blog/2020/accessible-and-user-friendly-mega-menus What Is a Skip Link and How Does It Work? By Bureau of Internet Accessibility. "The Web Content Accessibility Guidelines (WCAG) require a way for users to "bypass blocks" of repeated content…" https://www.boia.org/blog/what-is-a-skip-link-and-how-does-it-work Practical Tips for Creating Smooth Website Navigation Experience By Nick Babich. "Navigation is one of the most critical aspects of product design. People rely on navigation to find content and features. Helping users navigate should be a top priority for every app or website. After all, no matter how much time you invest in crafting good content and features, all this work will be useless if the visitor won't be able to find them…" https://uxplanet.org/practical-tips-for-creating-smooth-website-navigation-experience-3034ba9961b9 Solutions and Tools for Dealing with Broken Links in Web Pages By Louis Lazaris. "A couple of months ago a post by Leo Blanchette got to the front page of Hacker News and there was an interesting discussion on dealing with broken links and external content - the main problem being links that become out of date due to paywalls, altered content, or content getting taken down…" https://www.impressivewebs.com/solutions-tools-dealing-with-broken-links-web-pages/ +10: PHP. To Infinity, and Beyond By Cal Evans. "As I write this, PHP 8 has just released. The PHP community was all aflutter over the weekend installing playing, benchmarking, generally having a wonderful time with this early Christmas present…" https://24daysindecember.net/2020/12/01/to-infinity-and-beyond/ PHP 8.0 Brings Big Updates. Here's What's New By Owen Hughes. "PHP 8.0 introduces major changes to the language, including an improved type system, a new JIT compiler, union types and other enhancements…" https://www.techrepublic.com/article/programming-languages-php-8-0-brings-big-updates-heres-whats-new/ Emphpathy By Derick Rethans. "…In general, at any point when an Xdebug version is released, it will support the currently supported PHP versions…" https://24daysindecember.net/2020/12/02/emphpathy/ +11: TOOLS. Tools from the Cambridge Engineering Design Centre "This page links to some of the tools from the Inclusive Design Toolkit, produced by the Cambridge Engineering Design Centre. These tools can help designers, students and managers to better understand and address the needs of a wide range of users…" http://www.cedc.tools/ +12: USABILITY. Faculty Pages on University Websites Persuade Prospective Students (Video) By Katie Sherwin. "User research with prospective university students, ranging from kids still in high school to Ph.D. level grad students, found that they really want to know about the professors they'll be learning from, so when visiting university websites, these users (and their parents) scrutinized the faculty pages." https://www.nngroup.com/videos/university-faculty-pages/ What is a Design System? By Caroline Jarrett. "Recently, Amy Hupe asked this question on Twitter: 'Who's got a really clear and concise explanation of what design systems are, that would make sense to someone who's never come across one before?'…" https://www.effortmark.co.uk/what-is-a-design-system/ +13: WEBWASTE & SUSTAINABILITY. The Data Pollution Problem By Gerry McGovern. "In 2020 we will create, capture, copy, and consume almost 60 zettabytes of data. By 2025, it will be 200 zettabytes. By 2035, there will be more than 2,000 zettabytes of data in the world.…" https://gerrymcgovern.com/the-data-pollution-problem/ [Section one ends.] ++ SECTION TWO: +14: 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.]