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