Web Design Update: May 1, 2024

[Laura Carlson]

+++ WEB DESIGN UPDATE.
- Volume 22, Issue 45, May 1, 2024.

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

++ISSUE 45 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: INFORMATION ARCHITECTURE.
07: JAVASCRIPT.
09: MISCELLANEOUS.
08: NAVIGATION.
09: TOOLS.
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.

Web Accessibility in the 2024 Presidential Campaigns
By John Northup.
"WebAIM's John Northup ran the US presidential campaign websites through the AIM (Accessibility IMpact) testing process to determine which scores the best…"
https://webaim.org/blog/2024-campaign-site-accessibility/

Website Accessibility Testing
By Minnesota IT Services.
"Helpful tools & the decision-making process for accessibility failures…"
https://mn.gov/mnit/media/blog/?id=38-621624

No Mouse Challenge
By Minnesota IT Services.
"If your computer mouse suddenly stopped functioning, would you be able to continue working?…"
https://mn.gov/mnit/about-mnit/accessibility/no-mouse-challenge.jsp

State of Captioning 2024 (PDF)
By 3Play Media.
3Play's surveyed 450+ people for this report. It has info on trends, user preferences, and the utilization of various services and tools across industries.
https://go.3playmedia.com/hubfs/WP%20PDFs/2024%20State%20of%20Captioning%20Report%20by%203Play%20Media_Remediated.pdf

How to Check and Fix PDF Accessibility Issues
By Whitney Lewis.
"…In this article, we'll review the tools and steps you can take with Adobe Acrobat Pro to check and fix PDF accessibility issues…"
https://blog.pope.tech/2024/04/25/how-to-check-and-fix-pdf-accessibility-issues/

Neurodiversity and UX: Essential Resources for Cognitive Accessibility
By Stéphanie Walter.
"Guidelines to understand and design for Dyslexia, Dyscalculia, Autism and ADHD…"
https://stephaniewalter.design/blog/neurodiversity-and-ux-essential-resources-for-cognitive-accessibility/

Nondiscrimination on the Basis of Disability; Accessibility of Web Information and Services of State and Local Government Entities (Federal Register)
By U.S. Department of Justice.
https://www.federalregister.gov/documents/2024/04/24/2024-07758/nondiscrimination-on-the-basis-of-disability-accessibility-of-web-information-and-services-of-state

Nondiscrimination on the Basis of Disability; Accessibility of Web Information and Services of State and Local Government Entities (PDF)
By U.S. Department of Justice.
Final rule in the Federal Register: 31320, Vol. 89, No. 80 / Wednesday, April 24, 2024.
https://www.govinfo.gov/content/pkg/FR-2024-04-24/pdf/2024-07758.pdf

301,549 ways to Improve Accessibility: EN 301 549
By Wilco Fiers.
"…Over the last 9 years, EN 301 549 steadily gained importance. It is often dismissed as 'WCAG with a different number slapped on it,' but it is far more than that…"
https://www.deque.com/blog/301549-improve-accessibility/


+02: CASCADING STYLE SHEETS.

CSS Inheritance
By Andy Bell.
"Inheritance truly is a superpower and it's what makes developing on the web a joy if you embrace it. In this quick post, I'm going to convert you into a super fan…"
https://piccalil.li/blog/css-inheritance/

Write Better CSS with Modern CSS
By Temani Afif.
"A lot of new CSS features can help you optimize your code and reduce redundancy…"
https://css-tip.com/better-modern-css/

Help Us Invent CSS Grid Level 3, Aka 'Masonry' Layout
By Jen Simmons.
"…We want to hear from you…"
https://www.webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/

Use CSS to Boost the Font Size of Emoji With No Extra Markup
By Terence Eden.
"…Is there a way to use CSS to increase the font size of specific characters without having to wrap them in an extra <span> or similar? Yes! Although it is a bit of a hack…"
https://shkspr.mobi/blog/2024/04/use-css-to-boost-the-font-size-of-emoji-with-no-extra-markup/


+03: EVALUATION & TESTING.

Conducting Accessibility Research In An Inaccessible Ecosystem
By Michele Williams.
"It's undeniable that conducting UX research that includes participants with a variety of disabilities is vital to building inclusive technology…"
https://www.smashingmagazine.com/2024/04/conducting-accessibility-research-inaccessible-ecosystem/

How Long Are Typical Unmoderated UX Tasks?
By Jeff Sauro and Jim Lewis.
"A common logistical consideration when planning a task-based usability study is how much time you should plan for a task…"
https://measuringu.com/how-long-are-typical-unmoderated-ux-tasks/

How to Present UX Research Results Responsibly (Video)
By Caleb Sponheim.
"Presenting study data to stakeholders is a crucial step of most projects. Make sure to present your data truthfully and responsibly to avoid costly negative outcomes and reputation loss. Indicate who your data represents and communicate the limitations of your findings."
https://www.nngroup.com/videos/present-research-responsively/

Use Both Ratings Average and Number of Ratings When Sorting by User Ratings
By Sonia Weaver.
"Users frequently sort by user ratings to find and compare items within product lists…"
https://baymard.com/blog/sort-by-customer-ratings

The 3 Competencies of Journey Management (Video)
By Kim Salazar.
"Managing journeys requires a continuous practice of 3 interdependent competencies: collecting insights, analyzing them to drive design strategy, and orchestrating journey experiences for users."
https://www.nngroup.com/videos/journey-management-competencies/


+04: EVENTS.

Final Rule on Web Accessibility for State and Local Governments
May 6, 2024.
Online
https://www.naco.org/event/overview-us-department-justice-final-rule-web-accessibility-state-and-local-governments

ATHEN State of Accessibility Virtual Event
May 14, 2024.
Online
https://www.athenpro.org/registration-now-open-athens-2024-gaad-virtual-event-on-may-14/

Ensuring an Inclusive and Accessible Green Transition
May 15, 2024.
Online
https://www.eventbrite.com/e/ensuring-an-inclusive-accessible-green-transition-tickets-880707478777

May 16: Attend a UC Global Accessibility Awareness Day Event
May 16, 2024.
Online
https://ucnet.universityofcalifornia.edu/employee-news/may-16-attend-a-uc-global-accessibility-awareness-day-event/

AI, Accessibility and Users with Disabilities (GAAD)
May 16, 2024.
Online
https://www.eventbrite.com/e/ai-accessibility-and-users-with-disabilities-gaad-tickets-859077031527

How to Produce a Livestreaming Event (that is Accessible, Green, and Open Source)
May 21, 2024.
Online
https://www.accessibilityassociation.org/s/webinar-details?id=a0A4z00001CRXijEAH

5 Recommendations on Supporting Neurodiverse Students in Teaching & Learning
May 23, 2024.
Online
https://onlinelearningconsortium.org/webinar/supporting-neurodiversity/

Strengthening Digital Accessibility and the Management of Section 508 of the Rehabilitation Act
May 28, 2024.
Online
https://www.section508.gov/event/best-practices-webinar-may2024/


+05: HTML.

HTML Attributes vs DOM Properties
By Jake Archibald.
"Attributes and properties are fundamentally different things. You can have an attribute and property of the same name set to different values. For example…"
https://jakearchibald.com/2024/attributes-vs-properties/

My Approach to HTML Web Components
By Jeremy Keith.
"I've been deep-diving into HTML web components over the past few weeks. I decided to refactor the JavaScript on The Session to use custom elements wherever it made sense…"
https://adactio.com/journal/21078

Popover API Lands in Baseline
By Una Kravets.
"This web feature is now available in all three major browser engines…"
https://web.dev/blog/popover-api


+06: INFORMATION ARCHITECTURE.

Affinity Diagramming for Collaboratively Sorting UX Findings and Design Ideas
By Rachel Krause and Kara Pernice.
"Use affinity diagramming to cluster and organize research findings or to sort design ideas in ideation workshops. …"
https://www.nngroup.com/articles/affinity-diagram/


+07: JAVASCRIPT.

WAI-ARIA: Role=Emphasis
By Raghavendra Satish Peri.
"…The purpose of the emphasis role is to stress or emphasize content. It is not for communicating changes in typographical presentation that do not impact the meaning of the content. Authors SHOULD use the emphasis role only if its absence would change the meaning of the content…"
https://www.digitala11y.com/wai-aria-roleemphasis/

WAI-ARIA: Role=Blockquote
By Raghavendra Satish Peri.
"A section of content that is quoted from another source.…"
https://www.digitala11y.com/wai-aria-roleblockquote/

Finally Understanding How Array.sort(comparator) Works
By James Kerr.
"After 13 years of JavaScript, I finally have a way to remember how the comparator function in Array.sort() works.…"
https://www.jameskerr.blog/posts/javascript-sort-comparators/


+08: NAVIGATION.

Rising Tide Rents and Robber Baron Rents
By Tim O'Reilly.
"The Replacement of Organic Search with Advertising by Google and Amazon and What That Might Mean for the Future of AI…"
https://www.oreilly.com/radar/rising-tide-rents-and-robber-baron-rents/


+09: TOOLS.

How to Get Speech Output as Text From Screen Readers
By Francis Storr.
"Sometimes you need text, rather than voice, output from screen readers. Why? It's really useful for bug reports ('this disclosure icon is announced as 'black dash triangle dash filled dash x2 underscore final dot png' and needs alt text'). Luckily, getting this text is easy to do…"
https://gist.github.com/fstorr/330026cca27a7e5119d9c4fc0c5a11c5


+10: USABILITY.

F-Shape Pattern And How Users Read
By Vitaly Friedman.
"Scrolling, scanning, skipping: How do users consume content online? Here's what you need to know about reading behavior and design strategies to prevent harmful scanning patterns. An upcoming part of Smart Interface Design Patterns…"
https://www.smashingmagazine.com/2024/04/f-shape-pattern-how-users-read/

The Picture-Superiority Effect: Harness the Power of Visuals
By Sara Ramaswamy.
"People often remember visuals better than words. Designers can leverage the picture-superiority effect to make their products memorable and learnable."
https://www.nngroup.com/articles/picture-superiority-effect/


+11: WEBWASTE & SUSTAINABILITY.

The Wabi Sabi Web
By Tom Greenwood.   
"…We know that our lives are becoming increasingly digital and we know how much we need and love the rich beauty of the physical world, so good digital design must surely now include exploration of the Wabi Sabi Web."
https://branch.climateaction.tech/issues/issue-8/the-wabi-sabi-web/

Solarpunk Meets Better Business: Reimagining a Sustainable Digital Future
By Simon Blackler.
"…what if we could reimagine our relationship with technology and the environment? What if we could create a world where business, technology, and nature are in harmony?…"   
https://branch.climateaction.tech/issues/issue-8/solarpunk-meets-better-business/

AI Computing Is on Pace to Consume More Energy Than India, Arm Says
By Ian King.
"…Haas joins a growing number of people raising alarms about the toll AI could take on the world's infrastructure…"
https://finance.yahoo.com/news/ai-computing-pace-consume-more-150000328.html

[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.]