+++ 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@d.umn.edu [Issue ends.]