Web Design Update: September 23, 2020

[Laura Carlson]

+++ WEB DESIGN UPDATE.
- Volume 19, Issue 13, September 23, 2020.

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

++ISSUE 13 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.
04: EVALUATION & TESTING.
05: EVENTS.
06: JAVASCRIPT.
07: MISCELLANEOUS.
08: NAVIGATION.
09: TOOLS.
10: USABILITY.

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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Why is the Tab Key SO Important for Web Accessibility? - Keyboard
Interaction Explained (Video)
By Eric Eggert.
"In this episode, I'll explain why this key, the tab key, is so
important for making the web accessible…"
https://www.youtube.com/watch?v=Ab22Oo1wLi0

What are Accessible Names and Why Should You Care? (Video)
By Russ Weakley.
"This presentation will look at accessible names, how they are exposed
in the browsers accessibility tree, and their importance to assistive
technologies. There will be a deep dive into simple examples, advanced
examples using ARIA, and an overview of the W3C's Accessible Name and
Description Computation."
https://www.youtube.com/watch?v=TlGU9GNB8iQ

Russ' Slides
https://www.slideshare.net/maxdesign/what-are-accessible-names-and-why-should-you-care

Honey Over Vinegar: Winning Strategies for Digital Inclusion (Video)
By Lainey Feingold, Lucy Greco, and Stewart Hay.
"…Join us to discuss honey: strategies like storytelling, impact
marketing, and collaborative legal advocacy that can help build a
culture of accessibility for employees, customers, and the public."
https://www.youtube.com/watch?v=OH3Eh78nAwc

XR Accessibility: The Art of the Possible (Video)
By Joshue O Connor.
"As a platform, XR or virtual and immersive environments, augmented or
mixed reality is becoming more stable and commonplace. The leveraging
of existing hardware means it may become ubiquitous. What does this
technology mean for people with disabilities?"
https://www.youtube.com/watch?v=cuIHRmMXr1I

Real-Time Communication (RTC) Accessibility User Requirements
Joshue O Connor, Janina Sajka, Jason White, and Michael Cooper, editors.
"This document outlines various accessibility related user needs,
requirements and scenarios for Real-time communication…"
https://www.w3.org/TR/raur/

Emergency Website Kit (Video)
By Max Böck.
"In cases of emergency, many organizations need a quick way to publish
critical information. But existing (CMS) websites are often unable to
handle sudden spikes in traffic and can lack the necessary focus on
performance and accessibility. This talk outlines an attempt to create
a template for emergency websites that are designed to be extremely
resilient, highly inclusive and fast to get off the ground. It's about
making a website with the sole purpose of getting important
information to as many people as possible.
https://www.youtube.com/watch?v=8RdrRCq8VzU

Accessible Web Animation: The WCAG on Animation Explained
By Val Head.
"Its true, web animation can be accessible! Sometimes it just takes a
little extra effort to make sure that it is…"
https://css-tricks.com/accessible-web-animation-the-wcag-on-animation-explained/

Making Headings and Lists More Accessible (Video)
By Clarissa Peterson.
"Learn how to make headings and lists in your HTML documents more
accessible for everyone in this tutorial by Clarissa Peterson, a
Chicago-based designer who specializes in user experience and content
strategy…"
https://www.youtube.com/watch?v=9ylBqOnEXos

VoiceOver on iOS 14 Supports Description Lists
By Adrian Roselli.
"…Understand how your users might access content in your description
lists. If they tend to have the entire page read to them, the utility
might be low. If they have a more methodical approach (owing to the
nature of the content, density of information, existing patterns, and
so on), then description lists could be handy…"
https://adrianroselli.com/2020/09/voiceover-on-ios-14-supports-description-lists.html

alt Attributes Like Paragraphs
By Dave Rupert.
"The other day I was in a meeting discussing alt text and while I'm
fairly savvy about Accessibility, I finally made the simplest of all
connections: alt text is like a paragraph. Word pictures…"
https://daverupert.com/2020/09/alt-attributes-like-paragraphs/

Outsider Leverage and Accessibility
By Marcy Sutton.
"…Over the years, I've noticed that being an 'outsider' can have a
different kind of impact for accessibility. …"
https://marcysutton.com/outsider-leverage-accessibility/

First Steps to an Accessible Website (Part 2)
By Jeff Singleton.
"…For part 2 of this series we will touch on ALT attributes…"
https://convergeaccessibility.com/2020/09/21/first-steps-to-an-accessible-website-part-2/

Takeaways from The State of Video in 2020
By Deborah Edwards-Onoro.
"At the fall 2020 ACCESS digital accessibility conference hosted by 3
Play Media this week, Jaclyn Leduc kicked off the conference with 'The
State of Video in 2020' talk…"
https://www.lireo.com/takeaways-from-the-state-of-video-in-2020/


+02: CASCADING STYLE SHEETS.

Writing Even More CSS with Accessibility in Mind (Video)
By Manuel Matuzović.
"What's the first thing that comes to your mind when you think of 'CSS
and accessibility'? Maybe text size, color contrast, or DOM order.
Important topics, without question, but there's a lot more to consider
when writing inclusive CSS. This talk aims to help you create better
interfaces by adapting to your users' needs. You'll learn how to debug
and test with CSS, how attribute selectors can improve accessibility,
and when CSS affects the semantics of your HTML."
https://www.youtube.com/watch?v=o6ssu5oKyaU

Manuel's Slides:
https://noti.st/matuzo/NqDdvL/writing-even-more-css-with-accessibility-in-mind

Centering in CSS
By Ahmad Shadeed.
"To center an inline element like a link or a span or an img, all you
need is text-align: center…"
https://ishadeed.com/article/learn-css-centering/


+03: COLOR.

Inclusive Color: from Photons and Physiology to Psychology and
Philosophy (Video)
By Sarah Brodwall.
"Inclusive color is about so much more than contrast. Understanding
color on a deeper level, from the interplay of physics and physiology
to psychological and cultural factors, lets us go beyond accessibility
requirements and standards to provide a pleasant user experience for
as many people as possible. This talk is relevant for anyone who uses
color in their work, including designers of built environments, print,
and web, in addition to developers, testers, and content creators…"
https://www.youtube.com/watch?v=2CJiXQcJh_8

Color Choices that are Accessible
By Manisha Gupta.
"Color is a foundational element in any creative work. When I took the
challenge to design the Color Accessibility feature for Adobe Color,
it wasn't a linear path…"
https://blog.adobe.com/en/2020/09/16/color-choices-that-are-accessible.html#gs.g9zam4

Styling for Windows High Contrast with New Standards for Forced Colors
By Microsoft Edge Team.
"As Microsoft Edge prepared to re-platform on top of Chromium open
source, we recognized our responsibility to continue supporting those
who depend on Windows high contrast for web content…"
https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/


+04: EVALUATION & TESTING.

Debugging Broken Accessibility (Video)
By Sarah Higley.
"Accessibility testing can show you what bugs you have, but not why
they occurred or how to fix them. Sometimes this is simple: if an
image is missing alt text, you add an alt attribute. Other times you
may find yourself with 50 open browser tabs and lacking a few handfuls
of hair. Let's make that process a little easier by looking at tools
and tricks for debugging everything from combobox semantics to live
regions. Then we'll follow the root causes a little further to look at
where in today's web ecosystem they really originate from."
https://www.youtube.com/watch?v=In2sH3h_fJg

Mobile Accessibility: Testing Mobile Sites and Native Apps for
Accessibility (Video)
By Gian Wild.
"Accessibility is important to all - not everyone using your mobile
app, device or wearable will be fully functioning: either because they
have a disability or they are simply engaged elsewhere. Gian Wild,
Chair of the Native App and Mobile Site Committees talks about the
things that are essential to avoid when designing mobile apps, devices
and wearables to ensure that everyone can use them. She talks about
specific mobile accessibility features: pinch zoom, native screen
readers, haptic keyboard etc, and system accessibility settings: font
size, screen rotation, high contrast etc. The Native App and Mobile
Site Testing Guidelines are provided.
https://www.youtube.com/watch?v=6vpIsphI-gc

Guerilla Accessibility Testing Techniques (Video)
By Crystal Preston-Watson.
Learn how to conduct stealthy testing that will disrupt the notion
that accessibility is expendable while not being disruptive to your
organization's development process.
https://www.youtube.com/watch?v=e6bFp5GHYcQ

UX Research and Ethnographic Design for Humanitarian Technology (Video)
By Eriol Fox.
"Eriol has been working in the non-profit, humanitarian technology
sector for the past two years immersed in how to build technology
products and services that empower and give access to people in the
global south or 'developing countries' often around difficult topics
like Genocide, Democracy, gender-based violence and in difficult
circumstances such as informal settlements (slums) and areas where
radicalisation is high. This is a summary of how to approach difficult
topics when researching these areas or these countries along with some
tips for those looking to work or learn more about how to conduct UX
research in these places."
https://www.youtube.com/watch?v=kq4XznnoX60

Task Analysis: Support Users in Achieving Their Goals
By Maria Rosala.
"Task analysis is the systematic study of how users complete tasks to
achieve their goals. This knowledge ensures products and services are
designed to efficiently and appropriately support those goals."
https://www.nngroup.com/articles/task-analysis/

A Guide to Service-Blueprinting Workshops
By Alita Joyce.
"Service-blueprinting workshops require thoughtful planning and
hands-on facilitation."
https://www.nngroup.com/articles/service-blueprinting-workshops/

Running a Remote Usability Test, Part 2 (Video)
By Kate Moran.
"Learn how to run a remote moderated usability test. This second video
covers how to actually facilitate the session with the participant and
how to end with debrief, incentive, and initial analysis with your
team.
https://www.nngroup.com/videos/remote-usability-test-part-2/

Remote UX Research: Advantages and Disadvantages, Part 1
By Jim Ross.
"…Remote UX research does offer a lot of advantages over in-person UX
research. However, I don't think remote research is necessarily better
or worse than in-person research. Both have their advantages in
certain situations…"
https://www.uxmatters.com/mt/archives/2020/09/remote-ux-research-advantages-and-disadvantages-part-1.php

Should You Use Negative Numbers in Rating Scales?
By Jim Lewis and Jeff Sauro.
"…we recently collected a set of data for the comparison of standard
five-point linear numeric scales (1 to 5) and alternative five-point
negative-to-positive (Neg2Pos) scales with 0 at the center (-2 to
+2)…"
https://measuringu.com/standard-versus-neg2pos-numeric-scales/


+05: EVENTS.

5 Things I Learned from the Accessibility Community
October 5, 2020.
Online
https://www.meetup.com/A11yNYC/events/273363780/

Promoting Digital Accessibility in Africa
October 8-9, 2020.
Nairobi, Kenya - Virtual Event
https://inclusiveafrica.org/

Campus Accessibility from the Perspective of an Employee with a Disability
October 15, 2020.
Online
https://www.accessibilityassociation.org/content.asp?admin=Y&contentid=713

Accessibility for UX Designers
October 22, 2020.
Online
https://www.meetup.com/This-is-HCD-Berlin/events/272854704/

Live Subtitling and Accessibility Online Symposium Keynote
November 5-6, 2020.
Online
https://www.w3.org/blog/talks/event/live-subtitling-and-accessibility-online-symposium-keynote/

2020 Legal Update on Digital Access Cases with Lainey Feingold
November 12, 2020.
Online
https://go.3playmedia.com/wbnr-11-12-2020-legal-update

Easy Guide: Writing Alt-Text
November 12, 2020.
Online
https://zoom.us/meeting/register/tJ0tduyurD4uGN3oc5U8XD81EQDA0CJvrD0a


+06: JAVASCRIPT.

How to Create and Work with Timestamps in Vanilla JS
By Chris Ferdinandi.
"A timestamp is a number used to represent a fixed point in a time…"
https://gomakethings.com/how-to-create-and-work-with-timestamps-in-vanilla-js/


+07: MISCELLANEOUS.

Whose Web is it Anyway? (Video)
By Bruce Lawson.
"Who decides web standards? Who decides what gets implemented in
browsers? Who does your browser work for? And, most importantly, why
did Vladimir Putin's communist nipples get me banned from Facebook
last week?"
https://www.youtube.com/watch?v=5u6LKAWDAAU

Thinking About Power Usage and Websites
By Chris Coyier.
"Gerry McGovern asked if I had any insight into energy consumption and
websites…"
https://css-tricks.com/thinking-about-power-usage-and-websites/

Web History
By Jay Hoffmann.
"Chapter 4: Search…"
https://css-tricks.com/chapter-4-search/

The High Privacy Cost of a "Free" Website
By Aaron Sankin and Surya Mattu.
"Trackers piggybacking on website tools leave some site operators in
the dark about who is watching or what marketers do with the data…"
https://themarkup.org/blacklight/2020/09/22/blacklight-tracking-advertisers-digital-privacy-sensitive-websites


+08: NAVIGATION.

Navigating Navigation - Designing in the Browser (Video)
By Una Kravets.
"…Today we're diving into navigation and keyboard accessibility. We'll
go over semantic HTML and ARIA roles, document structure (landmark
roles), tab-index, and stylized states using `:focus`: as well as the
new `:focus-within` styling…"
https://www.youtube.com/watch?v=qD7SecF8qWA

6 Important Aspects of Well-Performing Mobile Product Page Breadcrumbs
By Edward Scott.
"During testing, breadcrumbs performed a lot of heavy lifting on
mobile sites, for two reasons in particular…"
https://baymard.com/blog/implementing-mobile-hierarchy-breadcrumbs


+09: TOOLS.

Accessibility Evaluation of Websites using WCAG tools and Cambridge
Simulator (PDF)
By Shashank Kumar, Jeevitha Shree, and Pradipta Biswas.
"This paper analyzed a set of 10 WCAG evaluation tools on two popular
webpages and compared the output from these tools…"
https://arxiv.org/ftp/arxiv/papers/2009/2009.06526.pdf


+10: USABILITY.

Form Design
By Geri Reid.
"Best practice, research insights and examples…"
https://gerireid.com/forms.html

UX Heuristics
By jordisan.
"A compilation of heuristics with description, links, checkpoints. And
a spreadsheet to use any of them for your own evaluations."
https://heuristics.uxmanager.net/

Tone of Voice and User Experience
By Seda Manucharyan.
"Whenever users do read, they pay attention. And that is why
establishing your tone of voice is a critical part of the UX design
process…"
https://uxmag.com/articles/tone-of-voice-and-user-experience

Jakob's Law of Internet User Experience (Video)
By Jakob Nielsen.
"What are the shortcomings of following Jakob's Law of Internet UX
(which states that "users spend most of their time on other sites")?
https://www.nngroup.com/videos/jakobs-law-internet-user-experience/

Differentiating UX Strategy from Tactics
By Janet M. Six.
"This month in Ask UXmatters, our expert panel discusses how to
prevent a project whose goal is defining UX strategy from devolving
into a tactical exercise…"
https://www.uxmatters.com/mt/archives/2020/09/differentiating-ux-strategy-from-tactics.php

You, Ex. Breaking Up with Bad Design (Video)
By Billy Gregory.
"Why do we keep going back to the same bad designs? Why are we hung up
on something that used to make sense but doesn't anymore? Why don't we
listen when people say we can do better? Are we incapable of doing
better? Maybe this just feels safer? Or are we … lazy? Whether it's
been months or years, it's always time to re-evaluate your
relationship with design. Weed out what's not good for us, figure out
what's only good for the short term, and break up with bad design once
and for all.
https://www.youtube.com/watch?v=qx9LSbuqSj4


[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

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