Web Design Update: December 28, 2023

[Laura Carlson]

+++ WEB DESIGN UPDATE.
- Volume 22, Issue 27, December 28, 2023.

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

++ISSUE 27 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: COLOR.
03: DRUPAL.
04: EVALUATION & TESTING.
05: EVENTS.
06: HTML.
07: JAVASCRIPT.
08: MISCELLANEOUS.
09: USABILITY.
10: WEBWASTE & SUSTAINABILITY.
11: XML.

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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

AD Support in HTML Video
By Adrian Roselli.
"One of the primary challenges of using the browsers' default video
player is its lack of support for additional audio tracks. Whether
those tracks are referenced from a 1) separate media file, 2)
synthesized by the browser, or 3) in the video file itself, browsers
overall today do a poor job of exposing them. This is a particular
concern when trying to satisfy WCAG Success Criterion 1.2.5 Audio
Description (Prerecorded)…"
https://adrianroselli.com/2023/12/ad-support-in-html-video.html

The Road to Accessible Drag and Drop (Part 2)
By James Edwards.
"…To make drag and drop - or any complex widget - more widely
accessible, it helps to step back and think of it in terms of what it
achieves, rather than what it does…"
https://www.tpgi.com/the-road-to-accessible-drag-and-drop-part-2/

The Road to Accessible Drag and Drop (Part 3)
By James Edwards.
"Concluding our three-part series on accessible drag and drop, this
article is detailed documentation for the DragAct codebase. Everything
you need to configure and use the script is here…"
https://www.tpgi.com/the-road-to-accessible-drag-and-drop-part-3/

How to Write Accessible Descriptions For Interactive Charts
By Huw Alexander.
"In this detailed tutorial, you will learn how human-generated
descriptions complement Highcharts and enhance the accessibility and
user experience for everyone. Read more about textBOX toward the end
of this post…"
https://www.highcharts.com/blog/tutorials/accessible-descriptions-for-interactive-charts/

Word and PowerPoint Accessibility Evaluation Guide
By WebAIM.
"This guide combines automated checks from the Accessibility Checker
in Microsoft Office 365 with a series of manual checks to help you
evaluate and repair common accessibility issues in Word and
PowerPoint…"
https://webaim.org/resources/evaloffice/

Form Accessibility
By Digital Accessibility Office, University of Colorado Boulder.
"…Creating accessible PDF forms will always require a significant
amount of work. Creating accessible forms requires more than simply
dropping form elements into a PDF document…"
https://www.colorado.edu/digital-accessibility/accessibility-newsletter/accessibility-minute-december-2023

How to Make PDFs Accessible - Episode 10: Clovis Community College
By Shawn Jordison.
"Welcome to episode 10 on community college PDF accessibility. Today,
we focus on two documents from Clovis Community College. The first was
already accessible, while the second required complex fixes…"
https://theaccessibilityguy.com/how-to-make-pdfs-accessible-episode-10-clovis-community-college/

The Top Accessibility Errors Found in 2023
By Sarah Lavery.
"…the following 10 issues were the most commonly found by our ARC
automation tools. We hope this list helps guide your team to avoid
some of this year's most common barriers…"
https://www.tpgi.com/the-top-accessibility-errors-found-in-2023/

An Intopia Carol - Past, Present and Future (Video)
By Intopia.
"This webinar was recorded in December 2023, reflecting on the
highlights of digital accessibility in 2023, and what our practice and
service delivery leads expect in 2024. This webinar was facilitated by
Chris Pycroft, and featured Russ Weakley, Julie Grundy, Charlii Parker
and Neil Jarvis…"
https://www.youtube.com/watch?v=oMxpUfQ6Qew

Strengthening Digital Accessibility and the Management of Section 508
of the Rehabilitation Act
By Shalanda D. Young, U.S. Office of Management and Budget (OMB).
"This memorandum provides guidance to help agencies advance digital
accessibility by maintaining an accessible Federal technology
environment, promoting accessible digital experiences, and continuing
the implementation of accessibility standards in accordance with
Section 508 of the Rehabilitation Act of 1973, as amended (Section
508)…"
https://www.whitehouse.gov/omb/management/ofcio/m-24-08-strengthening-digital-accessibility-and-the-management-of-section-508-of-the-rehabilitation-act/

OMB Issues Digital Accessibility Guidelines, Tells Agencies to Set Up
Public Feedback Mechanism
By Justin Doubleday.
"…'This is something that I think the accessibility community working
with government has been looking for, for a long time,' Mike Gifford,
a senior strategist at the digital services firm CivicActions, said in
an interview…"
https://federalnewsnetwork.com/technology-main/2023/12/omb-issues-digital-accessibility-guidelines-tells-agencies-to-set-up-public-feedback-mechanism/


+02: CASCADING STYLE SHEETS.

CSS Nesting
By Kilian Valkhof.
"With CSS Nesting native in browsers, the amount of CSS you need to
write can be lowered drastically while making it easier to maintain
and reason about…"
https://12daysofweb.dev/2023/css-nesting/

We Can :has It All
By Ryan Mulligan.
"The functional :has() CSS pseudo class is now shipping in all
evergreen browsers…"
https://ryanmulligan.dev/blog/we-can-has-it-all/

How Do You Vertically Centre an Element in CSS? (Even More) Easily!
By Michelle Barker.
"Rachel Andrew shared a snippet of good news for CSS layout on her
blog the other day: it'll soon be possible to vertically centre an
element inside a parent without the parent needing to be a flex or
grid container, using the align-content property. Gone are the days
when developers lamented they couldn't center a <div> …"
https://css-irl.info/how-do-you-vertically-centre-an-element-in-css/


+03: COLOR.

How APCA Changes Accessible Contrast with Andrew Somers (Video)
By Colleen Gratzer.
"APCA calculates contrast differently from WCAG…"
https://www.youtube.com/watch?v=E-CZial5VkU


+03: DRUPAL.

Pulling Content From External API into Drupal 10
By Chen Hui Jing.
"If you had read my previous blog post, you'll have found out that I'm
somehow unable to escape Drupal…"
https://chenhuijing.com/blog/pulling-content-from-external-api-into-drupal-10/


+04: EVALUATION & TESTING.

The Goldilocks Principle for Prototyping (Video)
By Megan Brown.
"The Goldilocks Principle says to aim for prototypes that are just
right for your user research needs and will get an honest reaction
from participants."
https://www.nngroup.com/videos/goldilocks-principle/

Navigating Biases in User Research: Focus on Note-Taking and Data
Analysis (Part 1)
By Stéphanie Walter.
"Understanding cognitive biases is crucial in user research. While
many articles explore how biases impact researchers and users during
studies, the research journey extends beyond. From collecting data
(taking notes) to analysis and project decision-making with
stakeholders, biases can subtly influence the entire process…"
https://condens.io/blog/biases-in-user-research-note-taking-and-data-analysis/

Comparing SEQ and Click SMEQ Sensitivity
By Jeff Sauro and Jim Lewis.
"…we compared the responses from a traditionally administered
seven-point SEQ with the responses from a click Subjective Mental
Effort Questionnaire (SMEQ) across five tasks of varying difficulty.
We wanted to know whether we'd get both comparable results (similar
mean differences) and higher precision (lower standard deviations)…"
https://measuringu.com/comparison-of-standard-seq-and-click-smeq-sensitivity/


+05: EVENTS.

Using Screen Reader Testing Tools to Evaluate the Accessibility of a
User Journey - Part 1
January 16, 2024.
Online
https://www.tpgi.com/webinar-january-16-at-11am-et-using-screen-reader-testing-tools-to-evaluate-the-accessibility-of-a-user-journey-part-1/

Creating Accessible and Inclusive Presentations
January 17, 2024.
Online
https://a11ytalks.com/posts/2024-JAN/

What's New in WCAG 2.2
January 31, 2024.
Online
https://abilitynet-org-uk.zoom.us/webinar/register/6017024695655/WN_UMzaJFZbSNeVaLDqXhr3VA#/registration

Jacobus tenBroek Disability Law Symposium
March 21-22, 2024.
Baltimore, Maryland U.S.A
https://nfb.org/programs-services/legal-program/jacobus-tenbroek-disability-law-symposium


+06: HTML.

The Devil is in the Details: A Look Into a Disclosure Widget Markup
By Cristian Diaz.
"Disclosure widgets are one of the most common component patterns you
can find on the web. It consists of a button that can hide or show
information when you click it. It's also one of the straightforward
components to make from a technical standpoint…"
https://www.htmhell.dev/adventcalendar/2023/23/

Never Underestimate HTML
By Lara Aigmüller.
"…What follows now is an article about thoughts that came to my mind
in the last couple of years when working together with different
people from different teams with different backgrounds in HTML and
frontend technologies in general. This is an article about the many
'whys' in my head and possible answers…"
https://www.htmhell.dev/adventcalendar/2023/24/

The Implied Web
By Halvor William Sanden.
"People don't need call-to-action buttons. Interface elements made to
get attention and herd people towards clicks increase cognitive effort
because they obscure themselves and reduce interfaces to clickable
surfaces…"
https://www.htmhell.dev/adventcalendar/2023/21/

Boosting Testing Efficiency: How Semantic HTML Transforms End-to-End Testing
By Stefania Mellai.
"Semantic and accessible HTML serves as a powerful tool, enhancing not
only human interaction but also the efficiency of software systems…"
https://www.htmhell.dev/adventcalendar/2023/19/

Design Pattern for Custom Tooltips
By Jan Hellbusch.
"Should we use tooltips to convey information?…"
https://www.htmhell.dev/adventcalendar/2023/20/

Accessible Components
By Melanie Sumner.
Melanie's collection of accessible components and patterns.
https://codepen.io/collection/nVPGQL

"HTML First" is Not HTML First
By Jens Oliver Meiert.
"…the foundation is not difficult to argue about:
* HTML that is actual HTML, i.e., that is valid (common sense, until
you start checking)
* HTML that makes full use of HTML features, i.e., that's not XHTML-HTML
* HTML that is used according to purpose (aka semantic HTML)
* HTML that is accessible…"
https://meiert.com/en/blog/true-html-first/


+07: JAVASCRIPT.

ARIA Live Regions
By Andrea de Souza.
"ARIA stands for Accessible Rich Internet Applications. It is a set of
roles and attributes that makes web page elements accessible to users
who require assistive technology, like screen readers, when native
HTML alone is not enough. One of these sets of roles and attributes is
aimed at defining live regions…"
https://www.htmhell.dev/adventcalendar/2023/22/

Classes vs. Prototypes in JavaScript
By Chris Ferdinandi.
"One of the core technologies in creating a Web Component is
JavaScript classes…"
https://gomakethings.com/classes-vs.-prototypes-in-javascript/


+08: MISCELLANEOUS.

The Expanding Dark Forest and Generative AI / ffconf 2023 (Video)
By Maggie Appleton.
"The web is already an eerily lifeless place filled with automated
predators like bots, advertisers, clickbait attention-grabbers,
SEO-optimisers, and angry twitter mobs - and they now have a
generative AI hammer to swing. When language models can churn out
millions of human-like words, images, and videos in seconds, what
happens to human creation and connection on the web…"
https://www.youtube.com/watch?v=QPoM-h1fK8M


+09: USABILITY.

The State of UX in 2024
By Fabricio Teixeira and Caio Braga.
"This is the 9th edition of The State of UX report by the UX
Collective: a critical look at our industry based on more than 1k
articles published and shared with our 500k+ subscribers in 2023.=…"
https://trends.uxdesign.cc/

Pacing Ourselves for a More Humane Web
By Marketa Benisek.
"…This blog aims to explore the profound impact of pacing on user
experience, highlight the challenges that come with fixed or fast
pacing and advocate for pacing as one of the key principles of a more
humane web…"
https://www.wholegraindigital.com/blog/pacing-for-humane-web/

Tables of Contents on Mobile (Video)
By Raluca Budiu.
"Tables of contents show mobile users an overview of the information
on the page and allow them to easily access the piece of content that
is relevant to them. Two possible implementations involve in-page
links and accordions…"
https://www.nngroup.com/videos/mobile-table-of-contents/


+10: WEBWASTE & SUSTAINABILITY.

Why AI is a Disaster for the Climate
By John Naughton.
"Amid all the hysteria about ChatGPT and co, one thing is being
missed: how energy-intensive the technology is…"
https://www.theguardian.com/commentisfree/2023/dec/23/ai-chat-gpt-environmental-impact-energy-carbon-intensive-technology


+11: XML.

Pixelating Live with SVG
By Eric A. Meyer
"For reasons I'm not going to get into here, I want be able to
pixelate web pages, or even parts of web pages, entirely from the
client side…"
https://meyerweb.com/eric/thoughts/2023/12/21/pixelating-live-with-svg/

Responsive SVGs
By Nils Binder.
"Stretch your knowledge of working with SVGs for scalable, responsive
experiences."
https://12daysofweb.dev/2023/responsive-svgs/

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