+++ WEB DESIGN UPDATE. - Volume 18, Issue 39, March 26, 2020. An email newsletter to distribute news and information about web design and development. ++ISSUE 39 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: NAVIGATION. 09: TOOLS. 10: TYPOGRAPHY. 11: USABILITY. 12: XML. SECTION TWO: 13: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Headings & Accessibility By Dennis Deacon. "People who are new to accessibility may be unaware of the way that headings can help readers. They help 'chunk' and label groups of related content. And people who use assistive technologies such as screen readers can quickly and effectively navigate a page by its headings…" https://developer.paciellogroup.com/blog/2020/03/headings-accessibility/ Heading Off Confusion: When do Headings Fail WCAG? By David Swallow. "While accessibility guidelines will always be subject to some degree of interpretation, this note is an attempt to head off any confusion and clarify our position on what counts as a WCAG failure when it comes to headings…" https://developer.paciellogroup.com/blog/2020/03/heading-off-confusion-when-do-headings-fail-wcag/ How Do You Make Video Accessible? By Suzanne Scacca. "Videos aren't inherently accessible. Even if the content comes from an outside source - like a videographer or a YouTube channel - you're still responsible for ensuring that every visitor on your website can fully access it…" https://www.webdesignerdepot.com/2020/03/how-do-you-make-video-accessible/ Writing Impactful Accessibility Reports By Mike Gifford. "…I am taking a different approach to this topic…" https://medium.com/openconcept-stories/writing-impactful-accessibility-reports-d6cdd84356fd Chrome 80/81 Bug: Accessible Name Calculation By Adrian Roselli. "…This just happens to be a bug with potential massive risk for screen reader users. This is not something an automated accessibility checker would catch…Understand that this bug will be in the wild for at least three more months (late June 2020), perhaps more depending on how far the Chrome 82 release slips. Which you will have to test again…" https://adrianroselli.com/2020/03/chrome-80-81-bug-accessible-name-calculation.html Understanding SC 1.3.4 Orientation By Raghavendra Satish Peri. "Success Criterion 1.3.4 Orientation (Level AA): Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential…" https://www.digitala11y.com/understanding-sc-1-3-4-orientation/ Understanding SC 1.3.5 Identify Input Purpose By Sathish Kumar. "For people with some or other cognitive disabilities that include memory, learning, reading etc., remembering their own personal data and filling them each time are difficult tasks…" https://www.digitala11y.com/understanding-sc-1-3-5-identify-input-purpose/ Quick Tip: How to Convert Image Text to Text By Deborah Edwards-Onoro. "…When you publish text in an image, it's not usable or accessible to everyone. Best practice is to publish your content as text, so everyone can access it. If you must publish text in in image, add alternative text. Or use Google Docs to convert the text in the image to text. And include the text with your image." https://www.lireo.com/quick-tip-how-to-convert-image-text-to-text/ Accessible Remote Documents By Jay Wyant. "Teleworking has suddenly become a new normal. You may find yourself writing more frequently. Here are some accessibility writing tips for remote workers…" https://mn.gov/mnit/media/blog/#/detail/appId/1/id/423819 Best Practices on How to Create a Fully Accessible Website By David Gevorkian. "…Web accessibility facilitates an equal opportunity to everyone in accessing the web without fear of encountering difficulties. Indeed, to effectively create a fully accessible site, you should try to place yourself in the shoes of your users. This will allow you to view your site from the perspective of your users thereby enabling you to see their needs." https://www.promotionworld.com/articles/web-design/200319-best-practices-how-create-fully-accessible-website 7 Habits to Get into an Accessible Mindset By I am Schulz. "…By adopting a few habits we can get ourselves into a working mode that incorporates A11y into our daily grind…" https://dev.to/iamschulz/7-habits-to-get-into-an-accessible-mindset-2i39 I Don't Care What Google or Apple or Whoever Did By Adrian Roselli. "It is not uncommon that I raise an accessibility or usability issue with a client's design or implementation and am met with either 'But Google does this,' or 'But Apple does this.' Mostly it is the default response to any issue I raise, but it is far worse when it is a reaction to a genuine technical failure or problem real users have identified.That response does not address the problem I may have raised. It avoids. It offloads responsibility. It declines to even try…" https://adrianroselli.com/2020/03/i-dont-care-what-google-or-apple-or-whomever-did.html 8 Common Image Alt Text Mistakes to Stop Making By Bureau of Internet Accessibility. "…how do you write alt text well? You'll be ahead of the game by avoiding these common pitfalls…" https://www.boia.org/blog/8-common-image-alt-text-mistakes-to-stop-making OCR Short Webinar on Online Education and Website Accessibility (Video) By U.S. Department of Education. "…The Office for Civil Rights (OCR) presents this short webinar on online education and website accessibility…" https://www.youtube.com/watch?v=DCMLk4cES6A XR Accessibility User Requirements - Call For Review 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…" https://www.w3.org/blog/2020/03/xr-accessibility-user-requirements-call-for-review/ Accessibility and Online Education Materials By Sheri Byrne-Haber. "It's a lot harder to convert in-person materials to accessible online material than you think. And you can't leave out accessibility…" https://medium.com/@sheribyrnehaber/accessibility-and-education-materials-4e917187d96 The First U.S. Web Accessibility Agreement was Signed Twenty Years Ago this Week By Lainey Feingold. "Twenty years ago this week (on March 14, 2000) Bank of America became the first company in the United States to sign an agreement to make its website accessible to people with disabilities…" https://www.lflegal.com/2020/03/bank-of-america-at-20/ Million Dollar Settlements of Closed Captioning Website Accessibility Lawsuits Highlight Need for Dual Approach By Duane Morris. "Massachusetts Institute of Technology is seeking approval to pay $1,000,000+ in attorneys' fees to settle a putative class action alleging MIT's website was inaccessible to people with hearing difficulties…" https://www.lexology.com/library/detail.aspx?g=60dbc76d-2144-442f-b91c-0cd5070ece49 +02: CASCADING STYLE SHEETS. Flexbox and Absolute Positioning By Chen Hui Jing. Recently, I've been trying to build an open source video conferencing application specifically for online meetups. Just like every other developer on the planet, it seems. Video conferencing apps are the new chatbots. Maybe…" https://www.chenhuijing.com/blog/flexbox-and-absolute-positioning/ A Complete Guide to calc() in CSS By Chris Coyier. "CSS has a special calc() function for doing basic math. Here's an example…" https://css-tricks.com/a-complete-guide-to-calc-in-css/ Neumorphism and CSS By Adrian Bece. "Neumorphism (aka neomorphism) is a relatively new design trend and a term that's gotten a good amount of buzz lately…" https://css-tricks.com/neumorphism-and-css/ +03: EVALUATION & TESTING. Is Usability Testing Effective? By Jim Lewis and Jeff Sauro. "…In this article, we examine two core assessments of effectiveness: the reliability of observing usability problems and the success of using usability testing to generate more usable (better) products…" https://measuringu.com/testing-effective/ Conducting A UX Audit: What You Need to Know By Jolina Landicho. "A user experience audit is the process used to identify potential usability issues based on established heuristics and/or prior user research. A successful audit provides an organization with a clear picture of positives and pitfalls with the current product experience and can help to target what to focus on in future design enhancements." https://www.uxbooth.com/articles/conducting-a-ux-audit-what-you-need-to-know/ +04: EVENTS. Featherstone and Friends: AODA Facts and Figures You Need to Know in 2020 March 31, 2020. Online https://levelaccess.zoom.us/webinar/register/6515843625720/WN_HsKVS72bS1m3ixyYlGkS7g Digital Summit August 19-20, 2020. Minneapolis, Minnesota, U.S.A. https://minneapolis.digitalsummit.com/ UX Australia August 25-28, 2020. Melbourne, Australia http://www.uxaustralia.com.au/conferences/ux-australia-2020 Inclusive Design 24 (#id24) September 17, 2020. Online https://inclusivedesign24.org/2020/ HighEdWeb Annual Conference October 17-21, 2020. Little Rock, Arkansas, U.S.A. https://2020.highedweb.org/ Web Summit November 2-5, 2020. Lisbon, Portugal https://websummit.com/ An Event Apart San Francisco December 14-16, 2020. San Francisco, California, U.S.A. https://aneventapart.com/event/san-francisco-2020 +05: HTML. Accessible HTML Elements By Amber Wilson. "The goal of this post is to highlight a handful of useful HTML elements for improving a page's accessibility, and show that every developer can learn about and write accessible HTML…" https://amberwilson.co.uk/blog/accessible-html-elements/ +06: JAVASCRIPT. The Single-Page Application Must Die By Paul Cowan. "…My main problem with single-page applications is that they generally do not start life using progressive enhancement…Progressive web applications following the app-shell model are blazing fast, but only if you are on a browser that supports service workers. Using a hybrid of rendering a full HTML document from an isomorphic JavaScript application and then letting the service worker kick in is where we should be heading. We are not in Utopia just yet, but we can breathe some life into the ailing progressive enhancement movement…" https://blog.logrocket.com/the-single-page-application-must-die/ The Problem with Snackbars and What to Use Instead By Adam Silver. "Snackbars-also known as toast messages-are little messages shown on top of the interface to give users feedback in response to an action they just did…" https://adamsilver.io/articles/the-problem-with-snackbars-and-what-to-use-instead/ Element.focus vs aria-activedescendant By Zell Liew. "When you build JavaScript components, you need to manage focus for both keyboard users and screen readers. The WAI-ARIA specs say there are two ways to manage focus…" https://zellwk.com/blog/element-focus-vs-aria-activedescendant/ +07: MISCELLANEOUS. Get Static By Eric A. Meyer. "If you are in charge of a web site that provides even slightly important information, or important services, it's time to get static… https://meyerweb.com/eric/thoughts/2020/03/22/get-static/ Maintaining Performance By Dave Rupert. "…In my experience, 99% of the time Web Performance boils down to two problems: 1. You wrote too much JavaScript. 2. You have unoptimized images… I find that Web Performance isn't particularly difficult once you understand the levers you can pull; reduce kilobytes, reduce requests, unblock rendering, defer scripts. But maintaining performance that's a different story entirely…" https://daverupert.com/2020/03/maintaining-performance/ Listen to The People: The Future of ePub and New Directions for Publishing @ W3C By Tzviya Siegman. "Securing a strong future for EPUB. Exploring new ideas for every sort of digital publication. Bringing business needs to the technical community: These are the goals of Publishing@W3C…" https://www.w3.org/blog/2020/03/listen-to-the-people-the-future-of-epub-and-new-directions-for-publishing-w3c/ Our Obsession with Speed is Killing the Earth By Gerry McGovern. "…This is surely a time to take stock. As a species, we are killing this planet and much of the life on it. We are creating waste at unprecedented levels, and digital is a driver and accelerator of our lazy, convenient and wasteful lifestyles. We can use digital to create a so much better and more sustainable world. Let us rise to the challenge of Earth Experience Design." https://gerrymcgovern.com/our-obsession-with-speed-is-killing-the-earth/ How Technology has Changed What it's Like to be Deaf [TED Talk] By Deborah Edwards-Onoro. "In her TED@WellsFargo talk in February 2020, writer and a part-time cyborg Rebecca Knill discusses how assistive listening technology has changed over the years and how our culture needs to shift to create a more inclusive world…" https://www.lireo.com/how-technology-changed-what-it-like-to-bedeaf/ +08: NAVIGATION. How to Create a 'Skip to Content' Link By Paul Ryan. "Skip links are little internal navigation links that help users move around a page…" https://css-tricks.com/how-to-create-a-skip-to-content-link/ Stop Counting Clicks: The 3 Click Rule is Nonsense By Page Laubheimer. "Users want to do the least amount of work possible to get to a desired web page. However, 'work' is the sum of difficulty presented by each click and not the number of clicks in itself. Here are some tips for making a path easier to navigate." https://www.nngroup.com/videos/3-click-rule/ 7 Ways to Analyze a Customer-Journey Map By Kim Flaherty. "Evaluate your journey map to identify low and high points, failures to set expectations, unnecessary or too long steps, channel transitions, and moments of truth. Use this information to find opportunities for improving the journey…" https://www.nngroup.com/articles/analyze-customer-journey-map/ +09: TOOLS. JAWS Screen Reader and ZoomText Magnifier, Reader Available for Free Until June 30, 2020 By Bureau of Internet Accessibility. "Freedom Scientific, a provider of accessibility tools for people who are blind or have low vision, is offering free licenses for the JAWS screen reader, ZoomText magnifier and reader, and Fusion, which combines JAWS and ZoomText, through June 30, 2020. This is intended to help students and workers who are unexpectedly home due to the spread of COVID-19…" https://www.boia.org/blog/jaws-screen-reader-and-zoomtext-magnifier-reader-available-for-free-until-june-30-2020 +10: TYPOGRAPHY. Inspired Design Decisions With Otto Storch: When Idea, Copy, Art And Typography Became Inseperable By Andy Clarke. "In this seventh instalment of Inspired Design Decisions, Andy Clarke will explore how American art director and graphic designer Otto Storch inspires his designs for the web. How do we use CSS Shapes to go beyond basic shapes to add energy to our designs? How do we use rotations on text for extra impact? How can we use mirroring and reflections to add interest to a design? In this article, we'll explore just that…" https://www.smashingmagazine.com/2020/03/inspired-design-decisions-otto-storch/ +11: USABILITY. How UX Writing Can Help Create Good Design By Lesley Vos. "So you think that it's a fantastic design that makes users love and happily interact with your website. Think again…" https://usabilitygeek.com/how-ux-writing-can-help-create-good-design/ What's the Difference Between Pragmatic and Hedonic Usability? by Jim Lewis and Jeff Sauro. "…Usability testing tends to focus on the objective task-oriented performance quality of an experience. What about aspects such as innovativeness, originality, or beauty? Do these matter? If so, how should they be measured?…" https://measuringu.com/pragmatic-hedonic/ Risk of Copying Famous Companies' Designs (Video) By Kathryn Whitenton. If a website or company is big and famous, should you copy their design for your own site? Likely not, because good UX depends on context, and your situation could be quite different than a world-famous company's circumstances." https://www.nngroup.com/videos/copying-famous-companies-designs/ +12: XML. Tools for Optimizing SVG By Chris Coyier. "Command Line Tools…" https://css-tricks.com/tools-for-optimizing-svg/ How to Read RSS in 2020 By Laura Kalbag. "I've been working on a starter blog for people to use with Site.js. We want this blog to have easy-to-use, accessible and rights-respecting defaults so it's simple to just get blogging. One of defaults is RSS feeds. But what if you've not come across RSS before? What are the benefits of RSS and how can you get subscribing?…" https://laurakalbag.com/how-to-read-rss-in-2020/ [Section one ends.] ++ SECTION TWO: +13: 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.]