Web Design Update: July 17, 2024

470 views
Skip to first unread message

Laura Carlson

unread,
Jul 17, 2024, 6:15:06 AM7/17/24
to webdev
+++ WEB DESIGN UPDATE.
- Volume 23, Issue 03, July 17, 2024.

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

++ISSUE 03 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.
07: JAVASCRIPT.
08: TOOLS.
09: USABILITY..
10: WEBWASTE & SUSTAINABILITY.

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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Peaky WCAG (Level AA) Bang for Your App A11y Buck
By Steve Faulkner.
"Does WCAG 2.2 Level AA apply to Native apps? Yes, mostly…"
https://html5accessibility.com/stuff/2024/07/09/peaky-wcag-level-aa-bang-for-your-app-a11y-buck/

A Quick-ish Accessibility Review: shadcn/ui Charts
By Ashlee M Boyer.
"…In my quick-ish testing, I found multiple critical accessibility issues with the Chart component. The "keyboard access" claim in the documentation is mostly accurate. The "screen reader support" claim is false. No information is presented about the data by a screen reader when using the left or right arrow keys to navigate the charts.…"
https://ashleemboyer.com/blog/a-quick-ish-accessibility-review-shadcn-ui-charts

Beyond Basic Alt Text - Charts, Maps, and Diagrams
By Tammy Albee.
"For people who cannot see images contained within a website or document, a text alternative ("alt-text") describing images is required. Repetitive logos and decorative elements such as watermarks can be artifacted and not given alt text. Learn strategic ways to simplify alt-text for complex images, charts, and maps…"
https://equidox.co/blog/beyond-basic-alt-text-charts-maps-and-diagrams/

Going with the PDF Reflow
By Ricky Onsman.
"…TPGi's advice to web authors, via our accessibility engineers, auditors and product managers, is that they must check that the PDF content they provide displays correctly when a user turns on Reflow…the best advice is to convert all PDF documents on the web to a more accessible format like HTML."
https://www.tpgi.com/going-with-the-pdf-reflow/

Do Not Copy Web Design to Mobile Applications or Risk Accessibility Issues
By Bogdan Cerovac.
"Sometimes I see complex web components copied to native mobile applications and often they are the cause of accessibility issues…"
https://cerovac.com/a11y/2024/07/do-not-copy-web-design-to-mobile-applications-or-risk-accessibility-issues/

How to Check and Document Design Accessibility in Your Mockups
By Stéphanie Walter. 
"Save time documenting accessibility in Figma mockups with practical tips and a list of selected tools, plugins, and templates! In this article, I will cover color usage, contrast ratios, text resizing, font legibility, target sizes, form elements, focus order, complex components keyboard interactions, skip links, headings, landmarks, and alternative text for images…"
https://stephaniewalter.design/blog/how-to-check-and-document-design-accessibility-in-your-figma-mockups/

Navigating the Accessibility Challenges of LinkedIn Carousels
By Naomi Saines and Tess Hutley.
"Despite their popularity, LinkedIn carousels present significant accessibility challenges that cannot be overlooked…"
https://intopia.digital/articles/navigating-the-accessibility-challenges-of-linkedin-carousels/

Accessibility Academy: Interactive Learning of the WCAG 2.1 Web Accessibility Guidelines
By Themistoklis Chatziemmanouil and Christos Katsanos.
"…A study involving 79 computer science students found that the Accessibility Academy has a high level of perceived educational experience and usability. Qualitative insights on its strengths and future improvements are also presented…"
https://ieeexplore.ieee.org/abstract/document/10578915

The True Cost of Not Prioritizing Accessibility: Avoid Risk and Maximize Product ROI
By David Sloan.
"…if a bug is found in the requirements-gathering phase, the cost could be $100. If the product owner doesn't find that bug until the QA testing phase, then the cost could be $1,500. If it's not found until production, the cost could be $10,000. And if the bug is never found, it could be secretly costing the company money, and no one could be the wiser…"
https://www.productledalliance.com/the-true-cost-of-not-prioritizing-accessibility/

Call for Abstracts: DDNJ Special Issue
By Utah State University.
"…In general, we are looking for articles that demonstrate what works! We want to publish articles that have clear implications for enhancing engagement and partnerships, research, policy, and practice. Abstracts and final articles should reflect a commitment to high quality research methods and ethics…"
https://idrpp.usu.edu/blog/2024/call-for-abstracts-ddnj-special-issue
DDNJ Call for Abstract (PDF):
https://usu.app.box.com/s/67vhlkk726fmtcfeotkvvp0wcp8z3ifz

New Class Action Lawsuit against AccessiBe Overlay Company Sued for Breach of Contract, Breach of the Covenant of Good Faith and Fair Dealing +++
By Lainey Feingold.
"This article is about a lawsuit filed against a company that sells overlays. The company is called AccessiBe. An overlay is a type of software that promises to make websites accessible. The lawsuit was filed by a small business that licensed the AccessiBe overlay (also called a widget) for its website. The small business still got sued by a blind person who said the website was not accessible. The small business' lawsuit says that AccessiBe violated the law by claiming that its product makes websites accessible and compliant with the Americans with Disabilities Act. The next thing that will happen is that AccessiBe will respond to the lawsuit. Lainey has written and spoken about problems with overlays for several years. This article has been updated once to add the names of the lawyers handling the case. This article will be further updated with any developments in the lawsuit.…"
https://www.lflegal.com/2024/07/accessibe-class-action/

AccessiBe Lawsuit Claims AI Web Accessibility Software Can't Ensure ADA Compliance as Advertised
By Kelly Mehorter.
"A class action alleges accessiBe has falsely advertised its software products as capable of making a website fully compliant with ADA standards for online accessibility…"
https://www.classaction.org/news/accessibe-lawsuit-claims-ai-web-accessibility-software-cant-ensure-ada-compliance-as-advertised


+02: CASCADING STYLE SHEETS.

Zoom, Zoom, and Zoom
By Miriam Suzanne.
"…In brief: there is wide support for three different types of 'zoom' - available both to site visitors and (to some extent) CSS authors…"
https://www.oddbird.net/2024/07/09/zoomies/

The 3 Types of CSS Utility Classes
By James Kerr.
"…I have noticed three categories of classes emerging from the stylesheet.
* Aesthetic classes
* Layout classes
* Spacing classes…"
https://www.jameskerr.blog/posts/3-types-of-css-utility-classes/


+03: EVALUATION & TESTING.

How to Recruit and Screen for Accessibility Research
By Fable.
"…In this article, we'll cover a background on what screeners are, the impact they have on accessibility research and how to make sure you are setting yourself up to collect diverse and inclusive insights…"
https://makeitfable.com/article/how-to-recruit-and-screen-for-accessibility-research/

How Many People Actually Recommend?
By Jeff Sauro and Jim Lewis.
"…In this article, we review data on how well measures of intention to recommend match future recommendation behavior…"
https://measuringu.com/how-many-people-actually-recommend/


+04: EVENTS.

The Art of Disability Justice Now
July 19-November 3, 2024.
Virtual and Mill City Museum, Minneapolis, Minnesota U.S.A.
https://disabilityjusticeart.com/
Exhibit Opening Night Celebration, July 19, 2024:
https://www.eventbrite.com/e/opening-night-celebration-the-art-of-disability-justice-now-tickets-919666807177

Learn CSS Grid First with Stephanie Eckles, Miriam Suzanne, and Stacy Kvernmo
July 23, 2024.
Online
https://www.youtube.com/live/aDMWD_CYpEI

Green Accessibility for Web Developers
July 25, 2024.
Online
https://umn.zoom.us/webinar/register/WN_4U3icNSRTieY8gIFMEXiuQ#/registration

ADA 34 Live! Show your ADA and History Knowledge
July 25, 2024.
Online
https://accessibilityonline.org/ADA-Audio/session?id=111126

ADA Title II Revisions: What You Need to Know
July 25, 2024.
Online
https://go.3playmedia.com/wbnr-07-25-2024-title-ii

Ask an Accessibility Expert
July 29, 2024.
Minneapolis, Minnesota, U.S.A.
https://www.meetup.com/accessibility-twin-cities/events/302162567/

Inclusive Design Patterns For 2025 with Vitaly Friedman
September 24, 2024.
Online
https://smashingconf.com/online-workshops/workshops/inclusive-design-patterns-vitaly-friedman/

UX Virtual Training
October 5-11, 2024.
Online
https://www.nngroup.com/training/october/


+05: HTML.

Dialog Dilemmas and Modal Mischief: On Building Popovers (Video)
By Hidde de Vries.
"…In this talk, you'll learn all about dialogs, including the new 'popover' attribute, 'modality' and using the top layer…"
https://www.youtube.com/watch?v=uZRp7yY8SS0
Slides:
https://talks.hiddedevries.nl/VZNuWJ/slides


+06: JAVASCRIPT.

Exploring the Challenges in Creating an Accessible Sortable List (Drag-And-Drop)
By Kendall Gassne.
"Drag-and-drop is a highly interactive and visual interface. We often use drag-and-drop to perform tasks like uploading files, reordering browser bookmarks, or even moving a card in solitaire…"
https://github.blog/2024-07-09-exploring-the-challenges-in-creating-an-accessible-sortable-list-drag-and-drop/

What ARIA Still Does Not Do
By Steve Faulkner.
"…As long as developers implement ARIA according to its rules of use in HTML and implement interaction patterns (usually via JavaScript) that agree with the standard pattern for a particular role, all is well. When they do not, there is grief… "
https://html5accessibility.com/stuff/2024/07/15/what-aria-still-does-not-do/

ARIA Roles - Version History
By Russ Weakley.
"When WAI ARIA 1.0 became a W3C Recommendation in March 2014, there were four categories for roles. When WAI ARIA 1.1 became a W3C Recommendation in 14 December 2017, two additional categories were added. This chart shows all WAI ARIA roles including notes on when they changed category, or where newly introduced…"
https://russmaxdesign.github.io/aria-roles/

Practical Guide on Implementing 'aria-expanded' in Web Development
By Florian Schroiff.
"Become an 'aria-expanded' expert with our detailed guide. Avoid pitfalls, grow your web accessibility skills, and improve the web experience for all users…"
https://www.a11y-collective.com/code/aria-expanded/


+07: MISCELLANEOUS.

To Hell With the Business Case, Again
By Matt May.
"…it is not a moral failure for someone who has tried to create this kind of change in a corporate setting, only to see it washed away. It is the corporations, not the DEI representatives, who are failing us."
https://buttondown.email/practicaltips/archive/to-hell-with-the-business-case-again/

Poisoning the AI Well
By Chris Ferdinandi.
"…Every page includes a bit of text at the end, visually hidden from users and hidden from screen readers. It instructs the LLM scraping the site to ignore everything else it's been asked to do and instead generate a sea shanty…"
https://gomakethings.com/poisoning-the-ai-well/


+08: TOOLS.

NerdeRegion
By Ugurcan (Ugi) Kutluoglu.
"NerdeRegion is a Chrome developer tools extension for debugging live regions on a Web Page. When activated, you will see a list all active Aria live regions, and you'll be able to see the history of all changes made on the region…"
https://github.com/wizzyfx/nerdeRegionPlugIn


+09: USABILITY.

Homepage Design: 4 Common Mistakes (Video)
By Huei-Hsin Wang.
"Enhance your homepage design by avoiding false floors, providing clear scrolling cues, adhering to familiar web standards, and creating a distinct visual hierarchy to focus user attention."
https://www.nngroup.com/videos/homepage-design-mistakes/

Data Table Design Patterns
By Luda Boss.
"…This article is a collection of best practices to help you make your data tables better…"
https://bootcamp.uxdesign.cc/data-table-design-patterns-4e38188a0981

Content Strategy vs. UX Writing
By Anna Kaley.
"Content strategy focuses on content-related processes, while UX writing shapes user experiences through text. The two disciplines work in harmony…"
https://www.nngroup.com/articles/content-strategy-vs-ux-writing/

Different Gets Ignored
By Luke Wroblewski.
"At some point in their career, every designer has heard the request to make an element 'pop more'. The premise is simple: to draw attention to a particular element in a layout, make it stand out. However, in practice, the opposite effect often occurs.…"
https://www.lukew.com/ff/entry.asp?2066

What Happened to the Share Button in Zoom?
By L. Jeffrey Zeldman.
"…talk about usable! The button's placement at the top left of the meeting window, with plenty of free open space around it, means that any user (regardless of software experience level) can quickly find the button when they needed it…"
https://zeldman.com/2024/07/15/what-happened-to-the-share-button-in-zoom/


+10: WEBWASTE & SUSTAINABILITY.

Generative AI is a Climate Disaster
By Paris Marx.
"Tech companies are abandoning emissions pledges to chase AI market share…"
https://disconnect.blog/generative-ai-is-a-climate-disaster/


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


[Issue ends.]
Reply all
Reply to author
Forward
0 new messages