Web Design Update: April 17, 2024

[Laura Carlson]

+++ WEB DESIGN UPDATE.
- Volume 22, Issue 43, April 17, 2024.

An email newsletter to distribute news and information about web design and development.

++ISSUE 43 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: BOOKS.
02: CASCADING STYLE SHEETS.
04: EVALUATION & TESTING.
05: EVENTS.
06: HTML.
07: MISCELLANEOUS.
08: TOOLS.
09: TYPOGRAPHY.
10: USABILITY.
11: WEBWASTE & SUSTAINABILITY.

SECTION TWO:
12: What Can You Find at the Web Design Reference Site?

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Beware - Automatic Tools Over-Report Accessibility Issues and Steal Your Time
By Bogdan Cerovac.
"Do not rely solely on automatic accessibility testing, especially if you do not know that your tool can lie a lot. Use the tools, but educate the people that use them…"
https://cerovac.com/a11y/2024/04/beware-automatic-tools-over-report-accessibility-issues-and-steal-your-time/

Is Swiping a Path-Based Gesture?
By James Edwards.
"The intent of this article is to examine whether various kinds of single pointer interaction constitute a path-based gesture, which may be helpful when evaluating SC 2.5.1: Pointer Gestures. However, simply because something is a path-based gesture, doesn't necessarily mean it fails this SC. That would depend on whether the functionality is essential, or whether other single pointer interactions are available…"
https://www.tpgi.com/is-swiping-a-path-based-gesture/

Web Accessibility Statement: How to Write One [With Examples]
By UsableNet.
"An accessibility statement on your website or app tells your community of users about your commitment to web accessibility…"
https://blog.usablenet.com/what-is-accessibility-statement-how-to-write

The ADA Now Has Regulations for Accessibility of Web Content and Mobile Apps
By David Sloan.
"On April 8 2024, the United States Attorney General signed a final rule providing requirements for digital accessibility under Title II of the Americans with Disabilities Act (ADA)…"
https://www.tpgi.com/the-ada-now-has-regulations-for-accessibility-of-web-content-and-mobile-apps/

ADA Title II Updates: What to Know about the DOJ's New Rule
By Jon Avila.
"…Note: "This blog was originally published in August 2023 following the announcement of a Notice of Proposed Rulemaking (NPRM) from the U.S. Department of Justice (DOJ) regarding revisions to Title II of the Americans with Disabilities Act (ADA). The content has been updated to reflect the final rule, which has been submitted for publication…
https://www.levelaccess.com/blog/ada-title-ii-updates-what-to-know-about-the-dojs-proposed-revisions/

States Can Make Digital Accessibility Easier for Municipalities
By Ken Nakata.
"…This post is the first in a series that will talk about how states can make it easier for public entities in their borders to comply with the new DOJ requirements…"
https://convergeaccessibility.com/2024/04/15/municipalities_introduction/

History of Web Accessibility / User Experience & Content (Video)
By Gian Wild.
"You shouldn't move forward until you have a really good look at where you've come from. In this session, Gian Wild, shows us where we've been, what some of the stumbling blocks can be and how we can learn from them to ensure a bright future for the area of accessibility…"
https://www.youtube.com/watch?v=itBP3FA-E70


+02: BOOKS.

* Horton, Sarah and Sloan, David. What Every Engineer Should Know About Digital Accessibility, CRC Press, 2024.


+03: CASCADING STYLE SHEETS.

Why UI Designers Should Understand Flexbox and CSS Grid
or Bye Bye, Rigid Column Grid Layout
By Christine Vallaure.
"Or bye bye, rigid column grid layout…"
https://uxdesign.cc/why-ui-designers-should-understand-flexbox-and-css-grid-e236a9dec37a

An Intro to CSS Grid
By Chris Ferdinandi.
"Today, we're going to learn the basics of CSS Grid…"
https://gomakethings.com/an-intro-to-css-grid/

How to Build a Reusable Grid System With CSS Grid
By Chris Ferdinandi.
"…we're going to learn how to create a reusable grid system that makes building a variety of website layouts faster and easier…"
https://gomakethings.com/how-to-build-a-reusable-grid-system-with-css-grid/

An Intro to Flexbox
By Chris Ferdinandi.
"…Flexbox is a way for you to create flexible layouts arranged as either columns or rows…"
https://gomakethings.com/an-intro-to-flexbox/

Lightning in a Bottle with CSS Custom Properties (Video)
By Adam Argyle.
Adam's Epic Web Conference 2024 presentation.
https://www.youtube.com/watch?v=Q0fwzlwTLWk&t=11544s
Adam's Slides:
https://epic-web-2024-at-property.netlify.app/


+04: EVALUATION & TESTING.

5 Ideas for User Research When You Can't Talk to Users
By Chris Myhill.
"At times, getting direct access to your users can be tricky. In this article we discuss 5 ways to conduct audience research, even when you can't talk to people…"
https://www.pixelfridge.digital/5-ideas-for-user-research-when-you-cant-talk-to-users/

Surveys and the "True Score" Mistake
By Chris Chapman.
"…survey responses are motivated by many factors, and we as survey authors should accept that reality, stop pretending that answers approximate "reality," and design our surveys to be robust to respondent motivations. Specifically, I find it helpful to say that there is no true score that somehow underlies a survey item. There are only answers that help us make a decision or take some action…"
https://quantuxblog.com/surveys-and-the-true-score-mistake

An Experiment Comparing 2D and 1D Bar Graphs
By Jeff Sauro, Jim Lewis, Dylan Atkins.
"…Our analysis of 105 participants comparing 2D vs. 1D bar graphs found: There was no difference in selection accuracy… It took participants longer to select 1D graphs… Selection was slightly slower for the smallest difference… The location of the larger bar (left or right) did not significantly affect selection time… There were no statistically significant differences in the control pairs… Participants preferred 2D graphs 10 to 1…"
https://measuringu.com/comparing-2d-1d-bar-graphs/


+05: EVENTS.

JS Naked Day
April 24, 2024.
Online
https://js-naked-day.org/

Bramus van Damme: If View Transitions and Scroll-Driven Animations had a Baby…
April 25, 2024.
Online
https://www.meetup.com/css-cafe/events/300205786/

A Conversation with Alice Wong
May 16, 2024.
Online
https://www.eventbrite.com/e/a-conversation-with-alice-wong-tickets-831148185597

Accessibility Club Summit 2024
June 8-9, 2024.
Amsterdam, Netherlands
https://accessibility.club/event/accessibility-club-summit-2024

Inclusive Design 24 (#id24)
September 12, 2024.
Online
The call for presentations is now open
https://inclusivedesign24.org/2024/

UX Virtual Training
June 24-27, 2024.
Online
https://www.nngroup.com/training/june-eu/

Twin Cities Drupal Camp
September 12-14, 2024.
Minneapolis, Minnesota, U.S.A.
https://2023.tcdrupal.org/

Toronto Accessibility Conference
October 3-4, 2024.
Toronto, Canada
https://conf.a11yto.com/


+06: HTML.

Jaws HTML Support
By Steve Faulkner.
"A Work in progress: Last updated 10 April 2024…"
https://freedomscientific.github.io/standards-support/html.html

My 'Skip to Content' Markup Was Breaking the Back Button on iOS
By Dan Burzo.
"…The problem: <main tabindex=-1> loses your scroll position…"
https://danburzo.ro/skip-to-content-back-button/

Don't Use the Maxlength Attribute to Stop Users From Exceeding the Limit
By Adam Silver.
"Have you heard of the 'error prevention' heuristic?…"
https://adamsilver.io/blog/dont-use-the-maxlength-attribute-to-stop-users-from-exceeding-the-limit/


+07: MISCELLANEOUS.

Ableism and Related Terms You Need to Know
By Meryl K. Evans.
"It's important to understand topics like ableism, microaggressions, unconscious bias, and stereotypes. Ignoring uncomfortable topics like these gives power for them to continue…"
https://meryl.net/ableism-microaggressions/

The Dancing Bear, Part 1
By Matt May.
"…To me, AI is like a dancing bear. This was a profitable sideshow dating back to the middle ages: all it takes is a bear, some time, and a complete lack of ethics…"
https://buttondown.email/practicaltips/archive/the-dancing-bear-part-1/

AI: Fed on Water, Energy, Hype, Stolen and Crap Data
By Gerry McGovern.
"…AI was born with original sin-the sin of stealing other people's data. To replace artists, writers, programmers, support professionals, and other content professionals, AI must become an apprentice to these professionals. It must learn from them. 'It would be impossible to train today's leading AI models without using copyrighted materials,' OpenAI admitted in its submission to the UK House of Lords…"
https://gerrymcgovern.com/ai-fed-on-water-energy-hype-stolen-and-crap-data/

Blockin' Bots.
By Ethan Marcotte.
"I've been blocking various 'artificial intelligence' ('AI') bots on my site. Why, you ask? Well, I don't like the idea of my work being hoovered up to train 'AI' data models; I don't like that these companies assume my content's available to them by default, and that I have to opt out of their scraping; I really don't want anything I write to support these platforms, which I find unethical, extractive, deeply amoral, and profoundly anti-human…"
https://ethanmarcotte.com/wrote/blockin-bots/


+08: TOOLS.

Using the Asus ROG Ally for Screen Reader Testing
By Nicolas Steenhout.
"The ROG Ally isn't just a gaming device…"
https://nicsteenhout.substack.com/p/using-the-asus-rog-ally-for-screen

A Comparison of Automated Testing Tools for Digital Accessibility
By Equal Entry.
"…are all automated tools created equal? Do the differences between the tools matter? How reliable are these automated tools? This past September, we had a chance to find out for ourselves…"
https://equalentry.com/digital-accessibility-automated-testing-tools-comparison/


+09: TYPOGRAPHY.

Designing Accessible Typefaces with Eleni Beveratou
By Oliver Schöndorfer.
"What makes an accessible typeface? And how can we improve typography in regard to web accessibility? Together with my guest, type designer Eleni Beveratou I will answer these and other questions in a fun and easygoing session…"
https://pimpmytype.com/talk06/

Some of the Best Free Fonts
By James Gilyead.
"As a product designer I generally do my best to help people find and think about content, not fonts. My preference is for clear, practical typography that supports a product's visual identity and adds no friction between a person and their goal…"
https://clearleft.com/thinking/some-of-the-best-free-fonts


+10: USABILITY.

Clear UX Beats Clever UX
By Adam Silver.
"…My idea of clever input UX in 2013:
- Put label inside the input to save space
- Make it float to make space for the answer
My idea of clever input UX in 2024:
- Put label above the input (forget saving space)
- Keep the label where it is at all times.
Clear UX Beats Clever UX…"
https://www.linkedin.com/posts/adamsilverhq_my-idea-of-clever-input-ux-in-2013-put-activity-7174309606846808065-ntge

What is Whitespace? (Video)
By Kelley Gordon.
"Whitespace is an effective principle to achieve a balanced design, making it easier for your users to scan and read. Consider using a consistent spacing system and the proximity principle to achieve a balanced use of whitespace."
https://www.nngroup.com/videos/whitespace/

The UX Dilemma: Do Complex Products Need Instruction Manuals?
By Kike Peña.
"…Some designers state that a good product may not need instructions; it should be intuitive enough that anyone can use it. That statement is true, but always consider the product's level of complexity to build a correct product expectation. We can not take this idea to extremes and delegate a product's success only to what users can do by their means."
https://uxdesign.cc/the-ux-dilemma-do-complex-products-need-instruction-manuals-4c5cb11053fa

The 3 R's of Usability: Recognition Rather than Recall (v1 Song) (Video)
By Suno.
"Jakob Nielsen's Usability Heuristic Song…"
https://www.youtube.com/watch?v=o4AP5eHlDU0


+11: WEBWASTE & SUSTAINABILITY.

The Perfect Site Doesn't Exist   
By Michelle Barker.
"…If 'move fast and break things' is Silicon Valley's rallying cry, then the flip-side is 'move slow and mend things'. It's with this mindset - of care, and nurturing - that we can begin to build a better web for humans and the planet. We all need to start factoring sustainability into the web products we build…"
https://branch.climateaction.tech/issues/issue-8/the-perfect-site-doesnt-exist/

Pause
By Jo Lindsay Walton.   
"…I like Anne Currie's rule of thumb: early on in the digital sustainability journey, hosting cost is a good proxy for carbon emissions. As your approach matures, you can develop more direct metrics…"
https://branch.climateaction.tech/issues/issue-8/pause/


[Section one ends.]


++ SECTION TWO:

+12: 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:lcar...@d.umn.edu


[Issue ends.]