*Laura Carlson <lcarlson@xxxxxxxxx <lcarlson@xxxxxxxxx>> *
Apr 12
to webdev
[image: https://mail.google.com/mail/u/0/images/cleardot.gif]
+++ WEB DESIGN UPDATE.
- Volume 16, Issue 42, April 12, 2018.
An email newsletter to distribute news and information about web
design and development.
++ISSUE 42 CONTENTS.
SECTION ONE: New references.
What's new at the Web Design Reference site?
http://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: HTML.
07: JAVASCRIPT.
08: MISCELLANEOUS.
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.
Hand Tremors and the Giant-Button-Problem
By Hampus Sethfors.
"In this article we'll examine an overlooked accessibility problem
that mainly affects users with hand tremors. It's in almost every
interface out there, but barely ever highlighted in accessibility
guidelines or discussions. It's also super easy to fix…"
https://axesslab.com/hand-tremors/
Designing For Accessibility And Inclusion
By Steven Lambert.
"…How do we go about understanding the myriad of users and their
needs? How can we ensure that their needs are met in our design? To
answer these questions, I have found that it is helpful to apply a
critical analysis technique of viewing a design through different
lenses…"
https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/
What You're Getting Wrong About Inclusive Design
By Mark Wilson.
"Inclusivity. It's one of the biggest buzzwords inside corporations right
now…"
https://www.fastcodesign.com/90166413/what-youre-getting-wrong-about-inclusive-
design
The Problem of 'Looks Good' Inclusive Design
By Alastair Somerville.
"This post will seem cruel but it is about an important issue in the
space between accessible and inclusive design… Bad inclusive design
compromises good accessibility…"
https://medium.com/@acuity_design/the-problem-of-looks-good-inclusive-design
-741022b4ac44
How to Design Great Alt Text: An Introduction
By Caitlin Geier.
"…In order to write appropriate alt text, you need to understand who
you're writing the alt text for and what the purpose of the image is…"
https://www.deque.com/blog/great-alt-text-introduction/
Recipe for Staying Ahead of the Legal Curve: Bake Accessibility into
Your Organization
By Lainey Feingold.
"…This is a post about a talk that Lainey Feingold and Microsoft
lawyer Sue Boyd gave at the 2018 CSUN Conference…"
http://www.lflegal.com/2018/04/csun-cookies/
Behind the Scenes: The Making of an Accessible Campus at WSU
By Patrick Loftus.
"In April of 2016, Wichita State University (WSU) received a complaint
through the Department of Education's Office for Civil Rights (OCR)
over an accessibility issue in a face-to-face classroom setting. Now,
as a result, the institution is in the middle of a campus-wide
accessibility overhaul…"
https://www.3playmedia.com/2018/04/04/making-of-an-accessible-campus-at-wichita-state/
To Buy or Not: The Amicus Brief in Robles and Winn-Dixie
By William Goren.
"Today's blog entry is analyzing an Amicus brief filed by numerous
folks with respect to the decision in Robles… and Winn-Dixie… where
the lower courts disposed of the matter favorably to the plaintiff
with respect to accessibility of websites."
http://www.williamgoren.com/blog/author/william-goren/
+02: CASCADING STYLE SHEETS.
:focus-visible and Backwards Compatibility
By Patrick H. Lauke.
"Clearly visible focus styles are important for sighted keyboard
users. However, these focus styles can often be undesirable when they
are applied as a result of a mouse/pointer interaction…"
https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
Creating Themeable Design Systems
By Brad Frost.
"…I think there's a lot of power in combining a systematic approach to
creating UIs with aesthetic flexibility. We can create a lot of
efficiency by sharing components between brands while still honoring
each brand's unique visual identity.…"
http://bradfrost.com/blog/post/creating-themeable-design-systems/
Keep Pixelated Images Pixelated as They Scale
By Chris Coyier.
"This is a little reminder that there is a CSS property for helping
control what happens to images as they scale up: image-rendering…"
https://css-tricks.com/keep-pixelated-images-pixelated-as-they-scale/
Art Directing For The Web With CSS Grid Template Areas
By Andy Clarke.
"…with CSS Grid, we can now be as creative with layout on the web as
we can in print, without compromising accessibility, responsiveness,
or usability…"
https://www.smashingmagazine.com/2018/04/art-directing-web-css-grid/
Graduating to Grid
By Rachel Andrew.
Live blog post of Rachel's An Event Apart presentation.
https://hookedoncode.com/2018/04/graduating-to-grid-rachel-andrew/
+03: COLOR.
Color Contrast Crash Course for Interface Design
By Matt D. Smith.
"…This short guide, written during the creation of the Contrast MacOS
app, will help you achieve the accessibility standards outlined in the
WCAG 2.0, specifically with foreground and background color when it
comes to text on digital screens…"
https://medium.com/@mds/color-contrast-crash-course-for-interface-design
-a69c987abe1b
Going Colorblind: An Experiment in Empathy and Accessibility
By Sara Novak.
"…If we create experiences solely based on our own habits and
preferences, we will inevitably fail the user and create useless
designs. And by using empathy, we not only create better designs, but
we expand ourselves and become better designers."
https://blog.prototypr.io/going-colorblind-an-experiment-in-empathy-and-accessibility-98b7003737ca
+04: EVALUATION & TESTING.
5 Techniques to Make your UX Research More Effective
By Jeff Sauro.
"…Here are five techniques we've found that make our UX research more
effective (and often more efficient)…"
https://measuringu.com/effective-research/
Multivariate vs. A/B Testing: Incremental vs. Radical Changes
By Aurora Harley.
"Radical redesigns are best tested using an A/B experiment, while
multivariate tests indicate how various UI elements interact with each
other and support incremental improvements to a design."
https://www.nngroup.com/articles/multivariate-testing/
User Testing Facilitation Techniques (Video)
By Kara Pernice.
"Facilitate better user tests with these 3 techniques: Echo,
Boomerang, and Columbo. These methods allow you to get clarification
from participants with minimal disruption or bias."
https://www.nngroup.com/videos/user-testing-facilitation-techniques/
+05: EVENTS.
Exploring WCAG
April 16, 2018.
Seattle, Washington, U.S.A.
https://www.meetup.com/a11ysea/events/249434611/
Assistive Technology - Beyond Screen Readers
April 18, 2018.
Chicago, Illinois, U.S.A.
https://meetup.com/a11ychi/events/247810000/
Live stream:
https://www.youtube.com/watch?v=jY74SKFZd0k
Live captions:
http://www.streamtext.net/player?event=CDA
A11yFirst Project or Accessible Authoring
April 26, 2018.
Online.
https://www.lireo.com/easi-accessibility-webinar-accessible-authoring/
Accessibility Summit
May 2, 2018.
Online.
https://ithemes.com/web-accessibility-summit/
UX London
May 23-25, 2018.
London, England, United Kingdom
https://2018.uxlondon.com/
Pixel Pioneers Bristol
June 8, 2018.
Bristol, England, United Kingdom
https://pixelpioneers.co/events/bristol-2018
UX Scotland
June 13-15, 2018.
Edinburgh, Scotland
https://uxscotland.net/2018/
+06: HTML.
Make the title attribute visible on keyboard focus (Chrome Bug)
By David Mac Donald.
"…The lack of proper support for this is causing thousands of
developers to implement resourse consuming custom tooltips to overcome
this buggy behaviour in Chrome in order to conform with WCAG."
https://bugs.chromium.org/p/chromium/issues/detail?id=829352
+07: JAVASCRIPT.
Why Authors Should Avoid aria-relevant
By Aaron Leventhal and Rob Dodson.
aria-relevant rarely works as intended and does not have a real-world
use case. Therefore, aria-relevant should never be used.
https://medium.com/dev-channel/why-authors-should-avoid-aria-relevant-5d3164fab1e3
No ARIA is Better than Bad ARIA
By W3C.
"Functionally, ARIA roles, states, and properties are analogous to a
CSS for assistive technologies. For screen reader users, ARIA controls
the rendering of their non-visual experience. Incorrect ARIA
misrepresents visual experiences, with potentially devastating effects
on their corresponding non-visual experiences. Before using ARIA or
any of the guidance in this document, please take time to understand
the following two essential principles…"
https://www.w3.org/TR/wai-aria-practices-1.1/#no_aria_better_bad_aria
Here Are Examples of Everything New in ECMAScript 2016, 2017, and 2018
By rajaraodv.
"n this article, I'll cover all 18 features that are listed in the
TC39's finished proposals that were added in ES2016, ES2017, and
ES2018 (final draft) and show them with useful examples."
https://medium.freecodecamp.org/here-are-examples-of-everything-new-in-ecmascript-2016-2017-and-2018-d52fa3b5a70e
5 Things You Didn't Know a Browser Could Do!
By Sam Bellen.
"…By showing you five things that are possible in a browser, I hope
you start to see the potential of the web. Where we used to download
and install heavy, platform-specific software, we are now able to
visit a website. With Progressive Web Apps being the next big thing,
it's also good to know that the web is more than text and forms…"
https://www.heartinternet.uk/blog/5-things-you-didnt-know-a-browser-could-do/
+08: MISCELLANEOUS.
Dear Developer, The Web Isn't About You
By Charlie Owen.
"Put the ego down before somebody gets hurt…"
https://sonniesedge.co.uk/talks/dear-developer
Does My Site Deserve Recognition?
By Adrian Roselli.
"…This is the start of a baseline - a minimum - of what we should
expect from any site that is awarded anything. Sites that either do
not meet the goals below or do not have a reasonable exception should
not be recognized as good examples. If anything, they are examples of
missed potential…"
https://doesmysitedeserverecognition.com/
Interview: Mike Paciello,Founding Partner of the Paciello Group (Video)
By AXSChat.
"Mike has been a pioneer and influential figure in the accessibility
industry for more than two decades. He wrote the first book on web
accessibility and usability (Web Accessibility for People with
Disabilities), and has since achieved many notable milestones."
https://www.youtube.com/watch?v=n44wLyg3vCw
Interview with Eric Eggert - Part 1
By Nic Steenhout.
"Eric is a W3C fellow and works at Knowbility. He also teaches
accessibility at university. He tells us about his work and the
redesign of the WAI site to make things easier to find and
understand…"
https://a11yrules.com/podcast/e35-interview-with-eric-eggert-part-1/
+09: TOOLS.
Force Focus Tools
By Dennis Lembree.
"When testing web accessibility, missing visual focus indicators is a
'violation' of 2.4.7 Focus Visible. And when it fails, it also makes
other checkpoints difficult to test (for sighted testers) such as
focus order. To get around this problem, here are a few tools to help
force a visual indication of keyboard focus."
http://www.webaxe.org/force-focus-tools/
Introducing the Accessibility Inspector in the Firefox Developer Tools
By Marco Zehe.
"The built-in Firefox Developer Tools just received a new family
member. The Accessibility Inspector allows you to inspect your
website's exposure to assistive technologies…"
https://www.marcozehe.de/2018/04/11/introducing-the-accessibility-inspector-in-the-firefox-developer-tools/
ColorBlindSim
By Koen Kivits.
"Color blindness affects approximately 1 in 22 people globally.
Experience the world as they do, right from your browser.
ColorBlindSim will ask for your permission to use your camera…"
https://www.colorblindsim.com/
+10: USABILITY.
Page Parking: Multi-Tab Obsession Common Among Millennials (Video)
By Kate Meyer.
"People open numerous tabs in rapid succession as a strategy to save
time. The tabs serve as a memory aid."
https://www.nngroup.com/videos/page-parking/
Kim Krause Berg Usability Podcasts
By Kim Krause Berg.
"The following podcasts are interviews where I discuss usability,
accessibility, SEO and how it is applied to websites. The podcasts are
lively, informative and contain resources and tips…"
https://creativevisionwebconsulting.com/kim-krause-berg-usability-podcasts/
Occam's Razor: The Simplest Solution is Always the Best
By Mads Soegaard.
"Now that we appreciate the need for simplicity in designs better,
let's see another great concept. You may have heard of Occam's Razor;
did you know that you can apply it to web design…"
https://www.interaction-design
.org/literature/article/occam-s-razor-the-simplest-solution-is-always-the-best
Pitfalls of Card UIs
By Dave Rupert.
"An optimistic design choice that ends up compounding complexity…"
https://daverupert.com/2018/04/pitfalls-of-card-uis/
6 Usability Errors that Destroy Learner Experience
By Laura Lynch.
"… 1). Forms… 2). CAPTCHA… 3). Content Organization… 4). Menu
Structure… 5). Quizzes and Course Submissions… 6). Clickability… "
https://www.learndash.com/6-usability-errors-destroy-learner-experience/
How to Turn User Research into Smart Design Decisions
By Nick Babich.
"…To turn research findings into product changes, you follow a 4-step
process…"
https://theblog.adobe.com/turn-user-research-smart-design-decisions/
[Section one ends.]
++ SECTION TWO:
+11: What Can You Find at the Web Design Reference Site?
Accessibility Information.
http://www.d.umn.edu/itss/training/online/webdesign/accessibility.html
Association Information.
http://www.d.umn.edu/itss/training/online/webdesign/associations.html
Book Listings.
http://www.d.umn.edu/itss/training/online/webdesign/books.html
Cascading Style Sheets Information.
http://www.d.umn.edu/itss/training/online/webdesign/css.html
Color Information.
http://www.d.umn.edu/itss/training/online/webdesign/color.html
Drupal Information.
http://www.d.umn.edu/itss/training/online/webdesign/drupal.html
Evaluation & Testing Information.
http://www.d.umn.edu/itss/training/online/webdesign/testing.html
Event Information.
http://www.d.umn.edu/itss/training/online/webdesign/events.html
HTML Information.
http://www.d.umn.edu/itss/training/online/webdesign/html.html
Information Architecture Information.
http://www.d.umn.edu/itss/training/online/webdesign/architecture.html
JavaScript Information.
http://www.d.umn.edu/itss/training/online/webdesign/javascript.html
Miscellaneous Web Information.
http://www.d.umn.edu/itss/training/online/webdesign/misc.html
Navigation Information.
http://www.d.umn.edu/itss/training/online/webdesign/navigation.html
PHP Information.
http://www.d.umn.edu/itss/training/online/webdesign/php.html
Sites & Blogs Listing.
http://www.d.umn.edu/itss/training/online/webdesign/sites.html
Standards, Guidelines & Pattern Information.
http://www.d.umn.edu/itss/training/online/webdesign/standards.html
Tool Information.
http://www.d.umn.edu/itss/training/online/webdesign/tools.html
Typography Information.
http://www.d.umn.edu/itss/training/online/webdesign/type.html
Usability Information.
http://www.d.umn.edu/itss/training/online/webdesign/usability.html
XML Information.
http://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:
http://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:lcarlson@xxxxxxxxx
[Issue ends.]
[image: https://ssl.gstatic.com/ui/v1/icons/mail/images/cleardot.gif]
Attachments area
Preview YouTube video Assistive Technology - Beyond Screen Readers
<https://www.youtube.com/watch?v=jY74SKFZd0k&authuser=0>
[image: https://i.ytimg.com/vi/jY74SKFZd0k/mqdefault.jpg]
<https://www.youtube.com/watch?v=jY74SKFZd0k&authuser=0>
[image:
https://ssl.gstatic.com/docs/doclist/images/mediatype/icon_2_youtube_x16.png]
<https://www.youtube.com/watch?v=jY74SKFZd0k&authuser=0>
<https://www.youtube.com/watch?v=jY74SKFZd0k&authuser=0>
Preview YouTube video AXSChat: Mike Paciello.Founding Partner of the
Paciello Group <https://www.youtube.com/watch?v=n44wLyg3vCw&authuser=0>
[image: https://i.ytimg.com/vi/n44wLyg3vCw/mqdefault.jpg]
<https://www.youtube.com/watch?v=n44wLyg3vCw&authuser=0>
[image:
https://ssl.gstatic.com/docs/doclist/images/mediatype/icon_2_youtube_x16.png]
<https://www.youtube.com/watch?v=n44wLyg3vCw&authuser=0>
<https://www.youtube.com/watch?v=LUMkgn_xtlg&authuser=0>
<https://www.youtube.com/watch?v=jY74SKFZd0k&authuser=0>
Preview YouTube video AXSChat: Mike Paciello.Founding Partner of the
Paciello Group
<https://www.youtube.com/watch?v=n44wLyg3vCw&authuser=0>
<https://www.youtube.com/watch?v=n44wLyg3vCw&authuser=0>
