+++ WEB DESIGN UPDATE. - Volume 19, Issue 41, April 7, 2021. An email newsletter to distribute news and information about web design and development. ++ISSUE 41 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: USABILITY. 10: WEBWASTE. SECTION TWO: 11: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Sortable Table Columns By Adrian Roselli. "An accessible sortable table is not necessarily the same as a usable sortable table…" https://adrianroselli.com/2021/04/sortable-table-columns.html Accessible Front-End Components: Claims Vs Reality By Hidde de Vries. "…not all 'accessible components' are created equal, some will work a lot better for our end users than other. In this post I have listed a number of things you can look at if you are considering third-party components." https://hiddedevries.nl/en/blog/2021-04-02-accessible-front-end-components-claims-vs-reality About Legibility and Readability By Bruno Maag. "Functional accessibility in typography includes legibility and readability among other things, and often the two terms are applied interchangeably. It is important to have a clear definition of what each does to be able to identify a potential accessibility hurdle…" https://medium.com/the-readability-group/about-legibility-and-readability-596fcd432a06 Checklist By The A11Y Project. "This checklist uses The Web Content Accessibility Guidelines (WCAG) as a reference point. The WCAG is a shared standard for web content accessibility for individuals, organizations, and governments…" https://www.a11yproject.com/checklist/ Blind People Don't Visit My Website By Rian Rietveld. "…In this post I'd like to give you a broader view on web accessibility, who benefits from it and why you should bother. Spoiler alert: web accessibility is about you…" https://a11y-collective.com/blog/blind-people-dont-visit-my-website/ Does Your Video Make These 6 Common Caption Mistakes? By Meryl K. Evans. "… 1: Long lines of captions, 2: No background color, 3: Bad breaking points, 4: Using colors, 5: Transcripts used as captions, 6: Automatic captions…" https://meryl.net/common-caption-mistakes/ What It's Like for a Deaf Person at a Captioned VR Presentation By Meryl K. Evans. "Almost a year ago, I attended my first-ever virtual reality presentation. And it was captioned. Now, I'm writing about my first virtual reality presentation in AltspaceVR that also had captions. Two very different VR environments. Two very different experiences…" https://equalentry.com/what-its-like-for-a-deaf-person-at-a-captioned-vr-presentation/ Tips on Designing Inclusively for Cognitive Disabilities By Blayne Phillips. "Their problems, behaviours, needs & tools, plus design guidelines for building accessible products…" https://uxdesign.cc/tips-on-designing-inclusively-for-cognitive-disabilities-a7c19852208 GAconf Europe Online 2021 (Videos) "All the sessions from GAconf Europe Online 2021…" https://www.youtube.com/playlist?list=PLVEo4bPIUOsluYsJ-hdFBOvRDjNFcAaGQ Renewed Attempt at ADA Web Accessibility Legislation By Seyfarth Shaw LLP. "Congressmen Budd, Hudson, and Correa reintroduce the Online Accessibility Act which would govern the application of the ADA to websites and mobile applications…" https://www.adatitleiii.com/2021/03/renewed-attempt-at-ada-web-accessibility-legislation/ Canadian COVID vAccination Landing Pages - How Accessible Are They to People With Disabilities? By Denis Boudreau. "…If we don't make sure that information about COVID vaccines is provided in a format that is accessible to everyone, then not only do we make it harder for some people to get on a vaccination waiting list, but we're also reminding those same people that they didn't matter enough for the rest of us to make sure they were also being cared for…" https://dboudreau.medium.com/canadian-covid-vaccination-landing-pages-how-accessible-are-they-to-people-with-disabilities-ee8888cf0763 +02: CASCADING STYLE SHEETS. Container Queries Are Actually Coming By Andy Bell. "After years of asking and memes, we're finally getting container queries and they will transform UI design, just like media queries did…" https://piccalil.li/blog/container-queries-are-actually-coming Gaps? Gasp! By Eric A. Meyer. "Now they can, thanks to the growing support of gap, the grid-gap successor that isn't confined to grids. With gap, you can gap your grids, your flexboxes, and even your multiple columns. It's gaptastic!…" https://css-tricks.com/gaps-gasp/ There Cannot be Real Physical Units in CSS By Šime Vidas. "…the browser cannot always determine the exact size and resolution of the display (think projectors). For websites that need accurate real-world units, the Working Group recommends per-device calibration…" https://css-tricks.com/platform-news-rounded-outlines-gpu-accelerated-svg-animations-how-css-variables-are-resolved/#there-cannot-be-real-physical-units-in-css Frequently Asked Questions By W3C CSS Working Group. Topics includes: "Selectors that Depend on Layout", "Versioning CSS, Fixing Design Mistakes", "Error Handling in Selectors, aka Breaking Pages by Making Them Work", "Adding more named colors", "Real Physical Lengths", "Styling And ", and "Using font-variant-position", https://wiki.csswg.org/faq +03: EVALUATION & TESTING. Remote Accessibility Persona Testing By Anika Henke. "…We have found there is not enough awareness about the different experiences and diverse access needs our users have. We want to highlight barriers that people encounter when using digital services. That's why we, the Accessibility Team at the Government Digital Service (GDS), have created accessibility personas." https://accessibility.blog.gov.uk/2021/03/30/remote-accessibility-persona-testing/ +04: EVENTS. HE/Public Sector webinar: Promoting Digital Accessibility, with University of Derby April 13, 2021. Online https://us02web.zoom.us/webinar/register/1016154734249/WN_9ps7-SJvSeaRTjEkcIy1pw Meeting in Multiple Dimensions: Reality for Audiences with Mixed Abilities April 16, 2021. Online https://www.meetup.com/a11yvr/events/277283277/ Images: Alternative Content for Accessibility with Emily Lewis April 19, 2021. Online https://knowbility.org/services/online-training/image-alternatives Crystal Ball 2021: Predictions for the ADA Title III Digital Accessibility Landscape April 27, 2021. Online https://www.tpgi.com/webinar-april-27-crystal-ball-2021-predictions-for-the-ada-title-iii-digital-accessibility-legal-landscape/ Web Accessibility Techniques and Testing April 29, 2021 (AEST). Online https://events.humanitix.com/web-accessibility-techniques-and-testing-virtual-april-vision-australia Accessibility Camp Bay Area May 22, 2021. Online https://www.accessibilitycampbay.org/ Accessibility Twin Cities June MeetUp June 7, 2021. Online https://www.meetup.com/Accessibility-Twin-Cities/events/275607519/ No, React Does Not Break Accessibility June 15, 2021. Online https://www.meetup.com/Nebraska-Digital-Accessibility-Meetup/events/276128559/ WAS Series: Custom JavaScript/ARIA Widgets June 24, 2021. Online https://www.meetup.com/A11YPrinceton/events/275686191/ +05: HTML. 30 Days of HTML By Jen Kramer. "At least one HTML element a day for 30 days. Improve your semantic HTML game, one day at a time…This challenge is designed for those already familiar with HTML syntax but limited in their tag choices…" https://jen4web.substack.com/welcome 30 Days of HTML Day 4: By Erika Lee and Jen Kramer. " is used to indicate the term being defined within the context of a definition phrase or sentence…" https://jen4web.substack.com/p/dfn 30 Days of HTML Day 6:
and By Erika Lee and Jen Kramer. "
is a wrapper for a sentence or term and its longer explanation that begins collapsed. By clicking on a triangle next to the summary, we reveal a longer explanation." https://jen4web.substack.com/p/details HTML Inputs and Labels: A Love Story By Amber Wilson. "Most inputs have something in common - they are happiest with a companion label! And the happiness doesn't stop there. Forms with proper inputs and labels are much easier for people to use and that makes people happy to…" https://css-tricks.com/html-inputs-and-labels-a-love-story/ +06: JAVASCRIPT. How to Remove Duplicates from an Array with Vanilla JS By Chris Ferdinandi. "Today, we're going to learn how to remove duplicates from an array in JavaScript…" https://gomakethings.com/how-to-remove-duplicates-from-an-array-with-vanilla-js/ How to Build a Query String From an Object of Data With Vanilla JS By Chris Ferdinandi. "Today, we're going to look at how to build a query string using a data object with vanilla JS. This used to be kind of tedious, but a few new JavaScript methods have made it a lot easier…" https://gomakethings.com/how-to-build-a-query-string-from-an-object-of-data-with-vanilla-js/ The Healing Power of Javascript By Craig Mod. "For some of us-isolates, happy in the dark-code is therapy, an escape and a path to hope in a troubled world…" https://www.wired.com/story/healing-power-javascript-code-programming/ +07: MISCELLANEOUS. Code in Quarantine By Jens Oliver Meiert. "…To keep an eye on new and rarely used code, it can be useful to put it in quarantine…" https://meiert.com/en/blog/code-in-quarantine/ Guarding Against Disposable Design By Frederick O'Brien. "…By laying strong foundations you allow yourself, your peers, and your successors to focus on improvement rather than fixes. It gets us closer to a Web where dead links, by-the-numbers design, and third-party domination are exceptions rather than the norm." https://www.smashingmagazine.com/2021/04/guarding-against-disposable-design/ Google's FLoC Is a Terrible Idea By Bennett Cyphers. "The third-party cookie is dying, and Google is trying to create its replacement…FLoC is meant to be a new way to make your browser do the profiling that third-party trackers used to do themselves: in this case, boiling down your recent browsing activity into a behavioral label, and then sharing it with websites and advertisers…" https://www.eff.org/deeplinks/2021/03/googles-floc-terrible-idea +08: NAVIGATION. How to Make an Ineffective 404 Page By Eric Bailey. "404 pages are what a server will show you if you request something that isn't there. Another way to say this: 404s are a last-ditch effort to help visitors get what they want if a webpage isn't there anymore…" https://ericwbailey.design/writing/how-to-make-an-ineffective-404-page/ +09: USABILITY. Sticky Headers: 5 Ways to Make Them Better By Page Laubheimer. "Persistent headers can be useful to users if they are unobtrusive, high-contrast, minimally animated, and fit user needs." https://www.nngroup.com/articles/sticky-headers/ Product Redesigns: Incremental or Overhaul (Video) By Alita Joyce. "Redesigning a user interface can be done in many smaller incremental releases, or as one big complete redo. Big change is risky, but necessary in 3 cases." https://www.nngroup.com/videos/redesign-incremental-vs-overhaul/ Workplace Application Usability (Video) By Page Laubheimer. "Enterprise applications that support work often do so poorly and have bad user experience. The usability requirements and tradeoffs for workplace app design are different from consumer apps." https://www.nngroup.com/videos/workplace-application-usability/ +10: WEBWASTE. The More You Remove, the More You Can Remove By Gerry McGovern. "…no analytics because analytics for most sites are a total waste of time… no tracking, so therefore no Google Analytics spyware… no JavaScript because it does not require JavaScript-enabled stupidities such as spyware scripts… more energy efficient format like .webp we were able to reduce average image weight by almost 35%… stored fonts locally instead of doing what we did in the past, where each time a font was loaded it created a connection to the 'free' Google fonts service… Waste data, waste code, waste content, has real consequences, is a real driver of global warming. We are in a climate crisis. Everything we do, no matter how small, to reduce CO2 emissions - it matters." https://gerrymcgovern.com/the-more-you-remove-the-more-you-can-remove/ [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 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.]