+++ WEB DESIGN UPDATE. - Volume 20, Issue 12, September 15, 2021. 1,000th issue milestone edition An email newsletter to distribute news and information about web design and development. ++ISSUE 12 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. 12: WEBWASTE & SUSTAINABILITY. SECTION TWO: 13: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Explainer for W3C Accessibility Guidelines (WCAG) 3.0 (Editor's Draft) Jeanne Spellman, Rachael Bradley Montgomery, Shawn Lauriat, Michael Cooper, Editors. "…This Explainer includes background information on the development of WCAG 3.0, its goals and research. It also provides additional explanation of structure and differences from the current WCAG 2 guidelines to make it easier for people to understand…" https://w3c.github.io/silver/explainer/ Myths About Web Accessibility By Álvaro Montoro. "…There are many misconceptions surrounding Web Accessibility, most of the time fueled by a lack of knowledge (or interest) in the matter. This article is a collection of some of those accessibility misconceptions or myths…" https://alvaromontoro.com/blog/67989/myths-about-web-accessibility What Is Redundant Entry, and How Does It Affect Accessibility? By Bureau of Internet Accessibility. "Redundant entry occurs when a website requires users to enter the same information more than once. At best, redundant form entry requirements are annoying; at worst, they're a significant accessibility concern. The Web Content Accessibility Guidelines WCAG 2.2 Working Draft includes several new success criteria. Success Criterion (SC) 3.3.8, 'Redundant Entry,' is intended to allow users to navigate multi-step processes…" https://www.boia.org/blog/what-is-redundant-entry-and-how-does-it-affect-accessibility How "Drag-And-Drop" Movements Affect Web Accessibility By Bureau of Internet Accessibility. "…Good design should accommodate users' preferences, and simply providing keyboard access won't accommodate every person. WCAG addresses this issue in Success Criterion (SC) 2.5.7, which reads: "All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential'…" https://www.boia.org/blog/how-drag-and-drop-movements-affect-web-accessibility Federal Acquisition Regulation (FAR) Updated to Incorporate Revised 508 Standards By The US Access Board. "On August 11, 2021, the Federal Acquisition Regulatory (FAR) Council issued a final rule updating the federal government's procurement regulations to officially incorporate the U.S. Access Board's revised Section 508 Standards…" https://www.access-board.gov/news/2021/09/13/federal-acquisition-regulation-far-updated-to-incorporate-revised-508-standards/ Notes on Synthetic Speech By Léonie Watson. "I've been thinking about conversational interfaces for some time, and about the importance of voice quality as a part of user experience. I use a screen reader and it sounds the same, whatever I'm doing…" https://tink.uk/notes-on-synthetic-speech/ Bad Websites Shouldn't Keep People with Disabilities From Accessing Vaccines By Tony Coelho and David Moradi. "It's unacceptable that the lack of internet accessibility is preventing some Americans from receiving the lifesaving shots…" https://www.fastcompany.com/90671722/people-with-disabilities-vaccine-access-websites EasyCOVID-19 Project Now Recruiting By John Rochford. "This is the start of our project to simplify the COVID-19 information published by every country's government websites…" https://clearhelper.blog/2021/09/13/easycovid-19-project-now-recruiting/ Designing Accessible eLearning Courses With The POUR Principles of Accessibility By Asha Pandey. "To create all-inclusive training programs and achieve the desired training results, businesses must adopt vital principles of accessibility. In this article, I outline the POUR principles to get you started with designing inclusive learning courses…" https://elearningindustry.com/designing-accessible-elearning-courses-with-the-pour-principles-of-accessibility Does Live Chat Make a Site Less Accessible? By Bureau of Internet Accessibility. "…live chat can help accessibility by giving visitors a simple way to report problems, get answers, and ask for assistance. However, live chat needs to conform with the Web Content Accessibility Guidelines (WCAG) to be useful to all visitors…" https://www.boia.org/blog/does-live-chat-make-a-site-less-accessible +02: CASCADING STYLE SHEETS. Using CSS 3 Overflow Properties To Make Containers Meet WCAG 2.1 By Ken Nakata. "…two relatively new CSS3 properties- overflow-y and overflow-wrap-- that can help developers meet WCAG 2.1 without resorting to a site redesign…" https://convergeaccessibility.com/2021/09/07/using-css-3-overflow-properties-to-make-containers-meet-wcag-2-1/ The Effect of CSS on Screen Readers By Ben Myers. "We can find a lot of information about how badly written HTML can affect the screen readers, but there is almost nothing about CSS." https://uselessdivs.com/blog/the-effect-of-css-on-screen-readers 'Just in Time' CSS By Chris Coyier. "I believe acss.io is the first usage of 'Atomic CSS' where the point of it is to be a compiler…" https://css-tricks.com/just-in-time-css/ position: sticky, Draft 1 By Peter Paul Koch. "I'm writing the position: sticky part of my book, and since I never worked with sticky before I'm not totally sure if what I'm saying is correct. This is made worse by the fact that there are no very clear tutorials on sticky. That's partly because it works pretty intuitively in most cases, and partly because the details can be complicated. So here's my draft 1 of position: sticky. There will be something wrong with it; please correct me where needed…" http://www.quirksmode.org/blog/archives/2021/09/position_sticky.html Using Media Queries to Un-Fixing Sticky Headers / Footers By Accessibility Guidelines Working Group, W3C. "The objective of this technique is to be able to present content with sticky headers and footers when there is enough space. This is done by using min-height, max-height and min-width media queries techniques that adapt to the available space of the viewport…" https://www.w3.org/WAI/WCAG21/Techniques/css/C34 Designing Beautiful Shadows in CSS By Josh W. Comeau. "…In this tutorial, we'll learn how to transform typical box-shadows into beautiful, life-like ones…" https://www.joshwcomeau.com/css/designing-shadows/ 15DaysOfCSS Day 2: Box Model By Jen Kramer and Erika Lee. "You have probably heard of the box model before. Padding, border, margin, yeah yeah, next topic…" https://jen4web.substack.com/p/box-model +03: EVALUATION & TESTING. Why Empathy with Your Users is Not Enough By Neil Turner. "…Building empathy with users is important, but activities like empathy mapping and personas can give a false impression that you understand them. The best way to understand your users is by directly experiencing their world. Activities to help experience your user's world include service safaris, user observation and a day in the life exercises." http://www.uxforthemasses.com/experience-over-empathy/ A Review of Alternates for the UMUX-Lite Usefulness Item By Jim Lewis and Jeff Sauro. "The UMUX-Lite is a popular two-item measure of perceived usability that combines perceived ratings of Ease and Usefulness…" https://measuringu.com/UMUX-lite-alternatives-review/ Triangulation: Combine Findings from Multiple User Research Methods (Video) By Kathryn Whitenton. "Improve design decisions by looking at the problem from multiple points of view: combine multiple types of data or data from several UX research methods." https://www.nngroup.com/videos/triangulation-combine-findings-multiple-user-research-methods/ Accessibility Testing By Jeremy Keith "…not all accessibility issues are created equal. I don't just mean in their severity. I mean that some issues can-and should-be caught early on, while other issues can only be found later…" https://adactio.com/journal/18458 +04: EVENTS. Accessibility: Matching Image Description to the Content with Elizabeth Pyatt September 15, 2021. Online https://us02web.zoom.us/webinar/register/7816303123907/WN_ZYmg9F6KQPaSGOodjqMSJg Solutions for Mobile apps Accessibility Testing September 16, 2021. Online https://www.evinced.com/webinars/signup/ Why Are There So Many Digital Accessibility Lawsuits? September 16, 2021. Online https://go.3playmedia.com/wbnr-09-16-2021-accessibilitycom Whole-to-Part versus Part-to-Whole: How Sighted and Blind Web Navigation Differs September 21, 2021. Online https://groups.drupal.org/node/536500 Knowbility Office Hours (Learn how to create different captioned content for Deaf Awareness Month…) September 21, 2021. Online https://www.eventbrite.com/e/knowbility-office-hours-registration-169710555841 Accessibility Inclusion and Understanding Cognitive Disabilities September 27, 2021. Online https://www.meetup.com/Accessibility-Twin-Cities/events/275607561/ Interagency Accessibility Forum October 12-14, 2021. Online https://www.section508.gov/iaaf Online Certificate in Disability Inclusion and Accessible Design Online https://ssw.umich.edu/offices/continuing-education/certificate-courses/disability-inclusion-and-accessible-design-certificate +05: HTML. ol vs. ul vs. div By Manuel Matuzović. "The difference between using ol, ul, and div for a list of items…" https://www.htmhell.dev/tips/ol-vs-ul-vs-div/ #15DaysOfCSS Day 1: Semantic Markup of Navbars By Jen Kramer and Erika Lee. "On this first day, we'll talk about HTML…" https://jen4web.substack.com/p/semantic-navbars HTML Concepts: Indicators for Layout Tables By Jens Oliver Meiert. "You use tables for data, and therefore not for layout purposes (as was popular in the past). But how would you recognize a layout table?…" https://meiert.com/en/blog/html-layout-table-indicators/ Making Accessible Sortable Table Columns is Not That Complex By Adrian Roselli. …despite what this 3,150-word-count post suggests…Bear with me as I try to lay it out in tweets…" https://twitter.com/aardrian/status/1437395149513007108 +06: JAVASCRIPT. When Should You Use Object-Oriented Programing (OOP)? By Chris Ferdinandi. "Back in May, I wrote about object-oriented programming (OOP), and the difference between classes and traditional prototypal inheritance. One thing I didn't discuss, though, was when you would want to use OOP over plain old functions. Let's talk about that today…" https://gomakethings.com/when-should-you-use-object-oriented-programing-oop/ Vanilla JS is a Web Performance Decision By Chris Ferdinandi. "One of the big reasons I started learning vanilla JS a decade ago, and then started evangelizing it to anyone who would listen, is because it's so much better for performance than using libraries and frameworks…" https://gomakethings.com/vanilla-js-is-a-web-performance-decision/ The When, Why, and Why Not of Progressive Web Apps with Jeremy Keith (Podcast) By Sydney Lai. "Almost every website can be built as a progressive web app (PWA), but developers aren't doing it. Why - or rather, why now? Their reluctance isn't necessarily due to technical reasons; instead, cultural reasons may explain why adoption hasn't grown rapidly…" https://www.outsystems.com/overlays/decoded-podcast/s3/episode3/ +07: MISCELLANEOUS. 1,000 and Counting By Information Technology System and Services, University of Minnesota Duluth. "September 15, 2021, marked the publication of issue 1,000 of the Web Design Update Newsletter…" https://itss.d.umn.edu/articles/webdesign-update-1000 More Companies Are Looking to Hire Accessibility Specialists By Ann-Marie Alcántara. "Effects of the Covid-19 pandemic, lawsuits, and diversity and inclusion efforts explain the increase in accessibility job postings, advocates and executives say…" https://www.wsj.com/articles/more-companies-are-looking-to-hire-accessibility-specialists-11630501200 NCDJ Releases Updated Disability Language Style Guide By National Center on Disability and Journalism. "The NCDJ at Arizona State University has released an updated version of its disability language style guide in both English & Spanish for journalists & professionals who report or write about people living with disabilities…" https://ncdj.org/2021/09/ncdj-releases-updated-disability-language-style-guide/ +08: NAVIGATION. Short Note on Skip Links with Sticky Headers By Zoë Bijl. "Prevent your sticky header from obscuring your main content with some scroll-padding on the element…" https://moiety.me/thinks/skiplinks-with-sticky-headers.html Forget the Trail of Breadcrumbs By Diana Sonis and Lis Hubert. "…What if a navigational structure could shapeshift to fit a user's intention at any moment at any place? What if a user could apparate to any point of the website/product from their current location based on their intention/need?…" https://boxesandarrows.com/forget-the-trail-of-breadcrumbs/ +09: TOOLS WCAGify By npm. "WCAGify is a simple function for people who need to reference the Web Content Accessibility Guidelines frequently and are tired of copying and pasting…" https://www.npmjs.com/package/wcagify What the Tag ?! By Benjamin Holfve. "Quickly find out which HTML tag to use when…" https://whatthetag.com +10: TYPOGRAPHY. Firefox's 'bolder' Default is a Problem for Variable Fonts By Šime Vidas. "…If you use thin fonts or variable fonts at font-weight values below 350, be aware that the and elements may not always be discernible in Firefox by default. In this case, it is probably a good idea to manually define a custom font-weight for and instead of relying on the browser's sub-optimal default, which insufficiently increases the font-weight of these elements…" https://css-tricks.com/firefoxs-bolder-default-is-a-problem-for-variable-fonts/ +11: USABILITY. Enterprise UX: eSsential Resources to Design Complex Data Tables By Stéphanie Walter. "…I put together a list of resources and blog posts that will help you design complex tables with a lot of data and interactions… " https://stephaniewalter.design/blog/essential-resources-design-complex-data-tables/ Social Proof in UX (Video) By Alita Joyce. "Users take cues from other humans: if many others like something or do something, that makes people feel that this thing must be good." https://www.youtube.com/watch?v=VJogiox0KBs +12: WEBWASTE & SUSTAINABILITY. Principles for Designing Sustainable, Environmentally Friendly Websites By Gerry McGovern. "When it comes to Web design, the best thing you can do for the environment is nothing. Decide not to have a website or app or chatbot. Decide not to publish that new content. Even better, decide to remove an old website, to delete lots of useless Web pages…" https://gerrymcgovern.com/principles-for-designing-sustainable-environmentally-friendly-websites/ [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.]