+++ WEB DESIGN UPDATE. - Volume 18, Issue 42, April 16, 2020. 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? 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: MISCELLANEOUS. 07: TYPOGRAPHY. 08: USABILITY. 09: XML. SECTION TWO: 10: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. WCAG Primer By Tetralogical. "The Web Content Accessibility Guidelines (WCAG) are a set of recommendations for making websites and apps accessible to people with disabilities. This article explains WCAG and how to use them…" https://tetralogical.com/articles/wcag-primer/ When Is a Vetted Pattern No Longer a Vetted Pattern? By Adrian Roselli. "As soon as you start to tweak the underlying code or aspects of the design, you run the risk of introducing bugs. That part should be easy for any developer to understand. The tougher part to get your arms around is that once you add features that on their own may be perfectly valid, you can create an experience that does not make sense for your users. In some cases it can be completely unusable…" https://adrianroselli.com/2020/04/when-is-a-vetted-pattern-no-longer-a-vetted-pattern.html Web Accessibility - Five Common Fallacies By Alastair Campbell and Alex Metcalf. "…In this article we're going to look at five common accessibility mistakes. And, we'll show how an accessibility strategy increases your organisational maturity and helps you dodge these awkward situations in the first place…" https://www.nomensa.com/blog/2020/web-accessibility-five-common-fallacies What's in a Name? By Sarah Higley. "Often when we talk about accessibility problems, we end up talking about a number of different errors that all boil down to a missing accessible name: form fields without labels, images without alts, icon buttons without readable text, and many more. A missing or incorrect accessible name in some form or other is right up there with poor color contrast in the list of most common accessibility errors across the web…" https://sarahmhigley.com/writing/whats-in-a-name/ Accessibility for UX Designers Project by Frozen Rockets. "This is a starter guide for UX Designers about delivering accessible websites…" https://accessibility-for-teams.com/accessibility-for-ux-designers Understanding SC 1.4.13: Content on Hover or Focus By Raghavendra Satish Peri. "In modern design practices, adding new content to the existing work flow is being adopted widely. while the user is interacting with content using a mouse hover or a keyboard focus 'the new content may be presented to the user in the form of tooltips, menus, pop-ups & slide outs etc.' These kinds of interactions might pose accessibility challenges to a wide variety of disable user groups as they tend to obscure the content or the user might have trouble pointing the mouse on the triggering element for a long time…" https://www.digitala11y.com/understanding-sc-1-4-13-content-on-hover-or-focus/ Use the Accessibility Checker By Microsoft. "On the ribbon, select the 'Review' tab. If you are using Outlook, note that you'll only see the 'Review' tab when writing or replying to messages…" https://support.office.com/en-us/article/Improve-accessibility-with-the-Accessibility-Checker-a16f6de0-2f39-4a2b-8bd8-5ad801426c7f#bkmk_use What are the Differences Between Assisted and Assistive Technology By Amani Ali. "In a world where more people are online than ever, services are now being pushed to a digital platform, so it's important to ensure that everyone is able to access them. There are two ways this can be easily achieved, using Assistive Technology and/or providing Assisted Digital Support…" https://www.nomensa.com/blog/2018/what-are-differences-between-assisted-and-assistive-technology Even Custom Overlays Have Questionable Value By Karl Groves. "A friend of mine recently asked me about my opinion on 'Custom' overlay products such as Deque's Amaze or Alchemy by Level Access. Those are products that use JavaScript to make targetted fixes on a customer's website. Those products do not offer the widgeted pseudo-assistive technology that you'd see in something like EqualWeb or AccessiBe. Below is a lightly-edited version of my response…" https://karlgroves.com/2020/04/13/even-custom-overlays-have-questionable-value +02: CASCADING STYLE SHEETS. If It's Interactive, It Needs a Focus Style (Video) By Eric Bailey. "This talk will discuss the intersection of WCAG compliance and Inclusive Design, as well as new focus-related CSS selectors. Additionally, strategies for how to effectively implement them in your organization will be discussed…" Note: Eric's talk begins at 20 minutes in. https://www.youtube.com/watch?v=GlraTkcp6Ls&t=1217 Takeaways from "If It's Interactive, It Needs a Focus Style" By Deborah Edwards-Onoro. "At the March 2020 Chicago Digital Accessibility and Inclusive Design virtual meetup, Eric Bailey explained the importance of inclusive design in creating focus styles for interactive web elements…" https://www.lireo.com/takeaways-interactive-needs-focus-style/ 100 Days - 100 CSS Properties in a Tweet By Michael Scharnagl. "At the beginning of the year I thought it may be fun to tweet about a CSS property for 100 days in a row…" https://justmarkup.com/articles/2020-04-15-css-property-in-a-tweet/ CSS Naked Day 2020 By Eric A. Meyer. "If you're here on meyerweb on April 9th, 2020, then you're seeing the site without the CSS I wrote for its design and layout. Why? It's CSS Naked Day…" https://meyerweb.com/eric/thoughts/2020/04/09/css-naked-day-2020/ +03: EVALUATION & TESTING. Remote Moderated Usability Tests: Why to Do Them By Kate Moran. "Remote unmoderated usability testing is so fast and easy that some teams make it their only evaluation method. But don't shy away from its more robust alternative, the remote moderated usability test, which can give you more information and is also inexpensive." https://www.nngroup.com/articles/moderated-remote-usability-test-why/ Can UX be 100% Remote? (Video) By Jakob Nielsen. "Is it possible to do all user-experience work 100% remotely? At the first Virtual UX Conference, Jakob Nielsen answered this question in an audience Q&A session." https://www.nngroup.com/videos/total-remote-ux/ Retrospectives 102: The Sailboat Method (Video) By Rachel Krause. "After each sprint, the team should have a retrospective session to identify what went well or not so well. The sailboat metaphor is a nice way to structure such retrospectives." https://www.nngroup.com/videos/retrospectives-sailboat/ Fighting Coronavirus with Data By Gerry McGovern. "…We don't have time to do it right. We just have time to do it wrong. The Web teams that don't regularly test are like the countries that don't test enough for COVID-19. They are running blind. It's time for Web management to mature, to move away from the primitive Cult of Volume metrics, and to embrace metrics based on outcomes, on task completions and time on task." https://gerrymcgovern.com/fighting-coronavirus-with-data/ Approximating Task Completion When You Can't Observe Users By Jeff Sauro and Jim Lewis. "If users can't complete a task, not much else matters…" https://measuringu.com/approximate-task-completion/ Usability Testing for Voice Content By Preston So. "It's an important time to be in voice design, but it's not without its own challenges. Content in voice-driven interfaces can vary wildly from that of traditional websites, which might leave many of us wondering about our existing approaches to usability testing. Preston So not only shows us how to reframe these challenges into opportunities, but as advantages for the medium itself." https://alistapart.com/article/usability-testing-for-voice-content/ The Upfront Guide to Design Inclusive Personas By Federico Francioni. "…In my continuous effort to improve the outputs I create, I found Inclusive Design particularly intriguing. Let's be clear, I'm not saying that you should 'kill your personas'. I believe that designing for inclusion is a natural extension of the functional approach to personas…" https://usabilitygeek.com/the-upfront-guide-to-design-inclusive-personas/ +04: EVENTS. Introduction to Web Accessibility This online course has been extended. It is now open through May 30, 2020. https://www.edx.org/course/web-accessibility-introduction A Future Date (virtual accessibility conference) April 21-23, 2020. Online https://www.youtube.com/channel/UCu5CNz4RK-NAEDGm5hTvWtg http://afuturedate.herokuapp.com/ The Current State of Digital Accessibility and Legal Issues An update from the organizers and speakers at the The Digital Accessibility Legal Summit 2020. April 23, 2020. Online https://accessibilitytrack.com/april23webinar/ Funka Accessibility Days September 2-3, 2020. (New Date) Stockholm, Sweden https://www.funka.com/en/we-offer/funka-accessibility-days/ The Forest and the Trees: Scaling for Enterprise-Level Digital Accessibility October 21, 2020. Online https://www.accessibilityassociation.org/content.asp?admin=Y&contentid=646 EDUCAUSE Annual Conference October 26-29, 2020. Boston, Massachusetts, U.S.A. https://events.educause.edu/annual-conference/2020 +05: HTML. How to Not Make a Résumé in React By Eric Bailey. "…In the context of a résumé, the lack of semantically-described content would tell me: 1. You don't know about these foundational skills, or 2. Don't care about why they're important… https://ericwbailey.design/writing/how-to-not-make-a-resume-in-react.html +06: MISCELLANEOUS. Hamonshu By Eric A. Meyer. "I ended my observance of CSS Naked Day 2020 by launching an entirely new design for meyerweb…" https://meyerweb.com/eric/thoughts/2020/04/13/hamonshu/ 93% of Americans Say Internet Service Outage During COVID-19 Outbreak Would Impact Daily Life By Deborah Edwards-Onoro. "Over nine out of ten adults report that an internet or cellphone service interruption during the COVID-19 outbreak would impact their daily life, while 49 percent say it would be a very big problem, according to the findings from a Pew Research Center American Trends Panel survey…" https://www.lireo.com/americans-internet-service-outage/ Remembering Christopher Schmitt By Deborah Edwards-Onoro. "Our web community is mourning one of our own, web designer, author, and teacher Christopher Schmitt, who died April 10, 2020…" https://www.lireo.com/remembering-christopher-schmitt/ +07: TYPOGRAPHY. Inspired Design Decisions With Herb Lubalin: Typography Can Be As Exciting As Illustration And Photography By Andy Clarke. "In this eighth issue of Inspired Design Decisions, Andy Clarke will explain how learning about American graphic designer and typographer Herb Lubalin has transformed his approach to typography on the web. How can we combine elements to develop powerful headers and calls to action? How do we use pre-formatted HTML text, and the text element in SVG for precise control over type? How can we optimise SVGs and make SVG text accessible? In this article, we'll explore just that…" https://www.smashingmagazine.com/2020/04/inspired-design-decisions-herb-lubalin/ +08: USABILITY. Where Did the ISO 9241 Definition of Usability Come From, and Where Is It Going? By Jim Lewis and Jeff Sauro. "…The term usability has been in general use for close to a century but wasn't officially codified into a standard until the late 1990s. The original definition of usability was embodied in ISO 9241 Part 11 as a combination of effectiveness, efficiency, and satisfaction. The ISO standard was heavily influenced by the European MUSiC project, which was a publicly funded investigation into the systematic collection of summative usability data, both objective and subjective." https://measuringu.com/iso-9241/ Listboxes vs. Dropdown By Anna Kaley. "Listboxes and dropdowns are compact UI controls that allow users to select options. Listboxes expose options right away and support multi-selection while dropdowns require a click to see options and support only single-selection." https://www.nngroup.com/articles/listbox-dropdown/ Neumorphism - the Accessible and Inclusive Way By Hampus Sethfors. "There's a new kid in design town: neumorphism. It's predicted to become a big design trend ahead. Let's look at what neumorphism is, the potential accessibility pitfalls and how to use it responsibly." https://axesslab.com/neumorphism/ +09: XML. All You Want to Know About SVG Accessibility By Rakesh Paladugula. "…This article outlines some knowledge on svg accessibility. The elements and attributes that support svg accessibility and the accessibility problems of svg…" https://www.maxability.co.in/2020/04/12/all-you-want-to-know-about-svg-accessibility/ [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:lcarlson@d.umn.edu [Issue ends.]