Web Design Update: October 14, 2020

[Laura Carlson]

+++ WEB DESIGN UPDATE.
- Volume 19, Issue 16, October 14, 2020.

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

++ISSUE 16 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: TOOLS.
09: USABILITY.

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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Almost 50% Got This #a11y Question Wrong! - WCAG Explained (Video)
By Eric Eggert.
" Last week, I asked my Twitter followers about this code snippet:
It’s a button element with an aria-level attribute set to 2 and an
action as the label of the button. Does this fail the Web Content
Accessibility Guidelines (WCAG) or doesn’t it?…"
https://www.youtube.com/watch?v=MO2Vs4sPMo4

Almost 50% Got This #a11y Question Wrong!…A great WCAG analysis…
By Dennis Lembrée.
"but it doesn't matter if the code discussed passes or fails; it's
totally wrong and should be fixed…"
https://twitter.com/webaxe/status/1316014972070055937

Top 5 Things to Review in an Accessible Design Review
By Rob Wemyss.
"1. Think about accessible copy… 2. Don't forget about the focus
indicator… 3. Check your colour contrast 4. Don't just use colour to
convey meaning… 5. Design in anticipation of text resizing…"
https://www.hassellinclusion.com/blog/accessible-design-reviews/

Create Accessible Forms
By Hamsa Harcourt.
"With the world becoming data reliant, it's no surprise how data is
the new gold. With the right data, you can improve peoples' lives,
find solutions to problems and so on. There are many ways to capture
peoples' data but on the web, forms are your go-to solution…"
https://www.a11yproject.com/posts/2020-09-19-how-to-write-accessible-forms/

Cognitive Accessibility and Machine Learning (Video)
By Lisa Seeman and Joshue O'Connor.
"Includes Discussion and goals, User Testing/Cognitive/ML, Testing
example, Inclusive design can support ML, New solutions for inclusion,
and Risks / Warnings…"
https://www.youtube.com/watch?v=_EsXc5Afuv4

Multiple Audio Tracks Now Available on Youtube, Including AD for Blind Viewers
By Newz Hook.
"With this new feature, YouTube users can now add multiple audio
tracks, including audio description for blind viewers. All one needs
to do is to hit the existing Settings button, and the menu offers an
option to switch audio tracks…"
https://newzhook.com/story/assassin-creed-video-gaming-ubisoft-outube-now-has-ability-to-add-multiple-audio-tracks-including-audio-description-for-blind-viewers/

Shoot First Drive-By Website ADA Accessibility Lawsuits Are Mean Spirited
By Kim Krause Berg.
"It would seem as though the latest craze in the USA is beating up
people and businesses when they are already down…"
https://creativevisionwebconsulting.com/2020/10/shoot-first-drive-by-website-ada-accessibility-lawsuits-are-mean-spirited/

Proposed 'Online Accessibility Act' Aims to Resolve Uncertainty
Surrounding ADA Website Litigation
By Ballard Spahr.
"Lawsuits and demand letters relating to the accessibility of websites
continue to be filed at a rapid pace in 2020, especially as the
COVID-19 pandemic has increased consumer reliance on the internet for
purchases of goods and services…"
https://www.jdsupra.com/legalnews/proposed-online-accessibility-act-aims-43483/

Close Look at The Online Accessibility Act Reveals Concerns
By Elisa Edelberg.
"…On October 1, 2020 a bipartisan bill titled the 'Online
Accessibility Act' was introduced by Congressmen Lou Correa (D-CA) and
Ted Budd (R-NC). The Online Accessibility Act is said to update how
the Americans with Disabilities Act (ADA) applies to websites and
'increase website accessibility'. Sounds great, right? Well, not so
fast…
https://www.3playmedia.com/2020/10/09/online-accessibility-act-concerns/

Lawsuit Filed Against WWE For Violation Of Americans With Disabilities Act
By N. Heel.
"WWE has been served a lawsuit for allegedly denying equal access to
its WWEShop website. Josue Romero, filed a lawsuit against WWE with
the United States District Court Southern District Of New York On
10/6…"
https://heelbynature.com/wrestling-news/wwe-news/lawsuit-filed-against-wwe-for-violation-of-american-with-disabilities-act/

Paguada v. Dallas Cowboys Pro Shops, L.P.
By Accessibility.com.
"On September 25, 2020, Dilenia Paguada filed a Complaint in New York
Federal court against Dallas Cowboys Pro Shops L.P. . Plaintiff
Dilenia Paguada alleges that www.shop.dallascowboys.com is not
accessible per the WCAG 2.1 accessibility standard(s)…"
https://www.accessibility.com/digital-lawsuits/dilenia-dallas-2020-09-25


+02: CASCADING STYLE SHEETS.

Writing Even More CSS With Accessibility in Mind, Part 2: Respecting
User Preferences
By Manuel Matuzović.
"In the first article of this series, I explained how important
progressive enhancement is for web accessibility. Building websites
layer by layer allows for a cleaner separation of concerns and more
resilient experiences. This second article is about user preferences
and how to respect them when writing CSS."
https://www.matuzo.at/blog/writing-even-more-css-with-accessibility-in-mind-user-preferences/

prefers-reduced-motion: Sometimes Less Movement is More
By Thomas Steiner.
"The prefers-reduced-motion media query detects whether the user has
requested the operating system to minimize the amount of animation or
motion it uses…"
https://web.dev/prefers-reduced-motion/

:focus-visible Is Here
By Matthias Ott.
"…Providing strong visual indicators that highlight the element that
currently has keyboard focus is … indispensable. In CSS, the focus
styles for an element can be changed via the :focus pseudo-class…"
https://matthiasott.com/notes/focus-visible-is-here

Full Bleed Layout Using Simple CSS
By Kilian Valkhof.
"There are many different ways to achieve the same layout in CSS and HTML…"
https://kilianvalkhof.com/2020/css-html/full-bleed-layout-using-simple-css/


+03: EVALUATION & TESTING.

Refine, Remodel, Rebuild: 3 Strategies for Experience Improvement
By Kim Salazar.
"To improve customer experience, organizations can choose solutions
ranging from low to high investment and impact, depending on their
current state, budget, risk tolerance, transformation readiness, and
unmet needs."
https://www.nngroup.com/articles/refine-remodel/

4 Ways to Share Sketches in Remote Ideation (Video)
By Kate Moran.
Depending on how much your team can spend, your team might want to use
tablets, document cameras, smartphones, or your computers' webcams to
share sketches."
https://www.nngroup.com/videos/share-sketches-remote-ideation/


+04: EVENTS.

BADCamp
October 14-17, 2020.
Online.
https://2020.badcamp.org/

October #A11yBos Meetup (VIRTUAL)
October 15, 2020.
Online.
https://www.meetup.com/a11yBoston/events/273775804/

UX Camp: Home Edition
October 17, 2020.
Online.
https://chicagocamps.org/events/2020/ux-camp-fall-home-edition/

Mobile App Accessibility
October 27, 2020.
Online.
https://www.nngroup.com/online-seminars/mobile-app-accessibility/

International Society for Technology in Education
November 28-December 1, 2020.
Anaheim, California, U.S.A.
https://conference.iste.org/2020/

Is Your Website Reaching A11Your Users?
November 28-December 1, 2020.
Anaheim, California, U.S.A.
http://aem.cast.org/about/events/2020/06/website-reaching-a11your-users.html

Accessibility Live: How AT Really Interacts with Your Website
November 30, 2020.
Online
https://www.meetup.com/Accessibility-Twin-Cities/events/268451087/

UX Conference January
January 23-February 5, 2021.
Online
https://www.nngroup.com/training/january/


+05: HTML.

Takeaways from Essential HTML Tweaks for Accessible Themes
By Deborah Edwards-Onoro.
"When I read the short summary of Martin Stehle's presentation from
the WordPress Accessibility Day schedule page, I knew I didn't want to
miss his talk…"
https://www.lireo.com/takeaways-essential-html-tweaks-accessible-wordpress-themes/


+06: JAVASCRIPT.

Angular Component Libraries and Accessibility
By Taylor Richards.
"…In general, Angular component libraries suffer from some common
accessibility pain points…"
https://www.deque.com/blog/angular-component-libraries-and-accessibility/

How to Convert the jQuery append() Function into Vanilla JS
By Chris Ferdinandi.
"I recently had a few folks tell me that one of their biggest
challenges is converting their old jQuery code into vanilla JS. Over
the next few days, I want to take a look at some jQuery methods, and
show you how to convert them into vanilla JS. Today, we're starting
things off with the append() method.…"
https://gomakethings.com/how-to-convert-the-jquery-append-function-into-vanilla-js/

An Alternative To Single Page Apps: Multi-Page Apps With Service Workers
By Chris Ferdinandi.
"Yesterday, I ranted a bit about modern JS, including my disdain for
single page apps. I also mentioned that service workers can turn
multi-page apps into fully offline web apps. I had a few folks ask me
how that works, so today, I wanted to walk you through it…"
https://gomakethings.com/an-alternative-to-single-page-apps-multi-page-apps-with-service-workers/


+07: MISCELLANEOUS.

The Web History Podcast
By Jeremy Keith.
"From day one, I’ve been a fan of Jay Hoffman’s project The History Of
The Web-both the newsletter and the evolving timeline…"
https://adactio.com/journal/17509

Workplace Inclusion: Why Employers Should Proactively Talk About Disability
By Matt May.
"During National Disability Employment Awareness Month, we hear a lot
about hiring, retaining and centering employees with disabilities in
our organizations. To do that, we need to take a closer look at
disability. It touches more employees’ lives than many realize…"
https://blog.adobe.com/en/2020/10/13/workplace-inclusion-why-employers-should-proactively-talk-about-disability.html

Cheating Entropy with Native Web Technologies
By Jim Nielsen.
"…over years of building for the web, I have learned that I can
significantly cut down on the entropy my future self will have to face
by authoring web projects in vanilla HTML, CSS, and JS. I like to ask
myself questions like…"
https://blog.jim-nielsen.com/2020/cheating-entropy-with-native-web-tech/

Burn Your Own Energy
By Gerry McGovern.
"…Burn your own energy. It will be good for you and good for the
planet. And it will also be a form of resistance."
https://gerrymcgovern.com/burn-your-own-energy/


+08: TOOLS.

Color Vision Deficiency (CVD) Simulator
By Andrew Somers.
"Simulates several types of Color Vision Deficiency side-by-side,
either with your image or one of the many preset images, to
demonstrate how different types of CVD perceive colors. The main page
uses the Brettel model, and there is a second page that uses a model
based on the sRGB color space."
https://www.myndex.com/CVD/


+09: USABILITY.

Spatial Memory: Why It Matters for UX Design
By Page Laubheimer.
"With repeated practice, users develop imprecise memory of objects and
content in a UI, but still need additional visual and textual signals
to help them find a specific item."
https://www.nngroup.com/articles/spatial-memory/

User Interface Design Fails (Video)
By Jakob Nielsen.
"Jakob Nielsen discusses the biggest failures in today's user
interface design. (Recorded at the Virtual UX Conference.)"
https://www.nngroup.com/videos/ui-design-fails/


[Section one ends.]


++ SECTION TWO:

+10: 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

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