+++ WEB DESIGN UPDATE. - Volume 19, Issue 37, March 10, 2021. An email newsletter to distribute news and information about web design and development. ++ISSUE 37 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: JAVASCRIPT. 06: MISCELLANEOUS. 07: NAVIGATION. 08: TYPOGRAPHY. 09: USABILITY. 10: WEBWASTE & SUSTAINABILITY. 11: XML. SECTION TWO: 12: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Audio Description of Visual Information Shawn Lawton Henry, Editor. "…This page helps you understand and create description of visual information for new and existing videos…" https://www.w3.org/WAI/media/av/description/ How to Add Audio Description (W3C-Approved Techniques) By Jaclyn Leduc. "If you're wondering how to add audio description to video content, this post is for you. …" https://www.3playmedia.com/blog/add-audio-description-videos/ Writing Good Alt Text - HTTP 203 (Video) By Jake Archibald and Das Surma. "Jake and Surma tackle the age-old problem: what should you include in an image's alt text?" https://www.youtube.com/watch?v=flf2vS0IoRs 5 Reasons Why Automatic Captions Are a Big Problem By Meryl K. Evans. "…Captions are a video's article. Like an article filled with mistakes, autocraptions affect a company's reputation and brand…Automatic captions make a good starting point for captioning videos. Don't stop there. Don't let your company's autocraptions turn into a meme. The best way to ensure your brand doesn't fall victim to autocraptions is to edit your captions and follow guidelines to create great captioned videos…" https://meryl.net/automatic-captions-problems/ Reversed Exclusion By Jimmy Freiding. "…Most of you probably didn't understand what to write in the textboxes, even if you found them. I write 'most of you' because if you are using a screen reader you probably didn't have any problem with this form. This is by design. I excluded sighted people on purpose to create awareness about the frustration that people with impaired vision or blindness experience almost every day when they try to use a website with little or no accessibility…" http://accessibility.freiding.net/blogg/20210212/reversed_exclusion.html Situational Disability By Derek Featherstone. "When you look at continuum of: permanent disability, temporary disability, and situational disability, remember that situational disability isn't actually a disability. Making that situation better is a convenience thing, and a good design thing, but not a human rights thing…" https://twitter.com/feather/status/1367669675878912000 WCAG 2.2: What Changes for Websites and How Does It Impact Users? By Kate Kalcevich. "…We're going to review WCAG 2.2 from two perspectives: 1.) Organizations that want to meet the new level A and AA guidelines. 1.) How assistive technology users will benefit from the new guidelines…" https://makeitfable.com/article/wcag-2-2/ WCAG 2.1 Checklist By Raghavendra Satish Peri. "This WCAG 2.1 checklist is work in progress. If there is any information that needs updating or changing, please alert us through comments or use the contact form…" https://www.digitala11y.com/wcag-checklist/ Accessibility Culture Eats WCAG Compliance for Breakfast (Video) By Government Digital Service/British Broadcasting Corporation. "As part of Services Week 2021, the GDS Accessibility Team invited BBC's Charlie Turrell (Change Manager, Accessibility Champions Network) and Gareth Ford Williams (Head of UX Design) to talk about their Accessibility Champions Network and embedding accessibility into the culture of an organisation." https://www.youtube.com/watch?v=BktMJzjf7xs Using the axe DevTools Web Accessibility Testing Browser Plugin (Video) By Chris Coyier. "In this video, I'm joined by Preety Kumar of Deque to take a look at their DevTools plugin for axe…" https://css-tricks.com/video-screencasts/204-using-the-axe-devtools-web-accessibility-testing-browser-plugin/ An Introduction to macOS Voice Control By Eric Bailey. "…The most reliable way to ensure your web development work can be used by Voice Control? Use semantic HTML. The reason for this is Voice Control utilizes accessible names, a core part of how assistive technology is built…" https://thoughtbot.com/blog/an-introduction-to-macos-voice-control 7 Tangible Ways to Make Vaccine Websites More Accessible By Catharine McNally. "Vaccine registration websites weren't designed for the people who need them most. Here are easy fixes that don't require starting over…" https://www.fastcompany.com/90608567/7-tangible-ways Q&A: Incorporating Accessibility into the Procurement Process By Samantha Sauld. "…Kara Zirkle, Accessible Technology Specialist at Miami University, presents Incorporating Accessibility into the Procurement Process, which goes over the lessons she's learned from establishing a procurement process at George Mason and now Miami University. Below are some of the questions and answers from the webinar that discuss important terminology, as well as the various roles of those involved in implementing accessibility." https://www.3playmedia.com/blog/incorporating-accessibility-into-the-procurement-process/ What This Pandemic has Taught Us About Your Inaccessible Website By Denis Boudreau. "Do you ever stop to wonder what your life would look like if, all of a sudden, the Internet was taken away from you in the midst of COVID-19?…" https://uxdesign.cc/what-this-pandemic-has-taught-us-about-your-inaccessible-website-bce7b0c8dd61 The Dangerous Path of the Accessibility Overlay By Joe Dolson. "Without naming any names - because it doesn't really matter which tool it is - an accessibility overlay is a tool that fundamentally harms the future of web site accessibility…" https://www.joedolson.com/2021/03/the-dangerous-path-of-the-accessibility-overlay/ +02: CASCADING STYLE SHEETS. What Does 100% Mean in CSS? By Amelia Wattenberger. "Spoiler: it depends…" https://wattenberger.com/blog/css-percents The Case for em-based Media Queries By Šime Vidas. "Some browsers allow the user to increase the default font size in the browser's settings. Unfortunately, this user preference has no effect on websites that set their font sizes in pixels (e.g., font-size: 20px). In part for this reason, some websites (including CSS-Tricks) instead use font-relative units, such as em and rem, which do respond to the user's font size preference…" https://css-tricks.com/weekly-platform-news-focus-rings-donut-scope-ditching-em-units-and-global-privacy-control/#the-case-for-em-based-media-queries +03: EVALUATION & TESTING. Benchmark Usability Testing (Video) By Garrett Goldfield. "Benchmark studies measure one or more KPIs (key performance indicators) of a user interface so that you can tell whether a redesign has measurably better (or worse) usability…" https://www.nngroup.com/videos/benchmark-usability-testing/ Sample Size Estimation for NPS Confidence Intervals By Jim Lewis and Jeff Sauro. "Sample size estimation is a critical step in research planning. It can also seem like a mysterious and at times controversial process. But sample size estimation, when done correctly, is based mostly on math, not magic…" https://measuringu.com/nps-ci-sample-size/ +04: EVENTS. ADA Title III Pandemic Year Updates: Hot Issues and Litigation Trends Webinar March 11, 2021. Online https://www.adatitleiii.com/2021/03/register-today-ada-title-iii-pandemic-year-updates-hot-issues-and-litigation-trends-webinar/ Why and How to Create Accessible Social Media and Website Content March 25, 2021. Online https://www.meetup.com/DINBay/events/276201309/ UX/Usability Testing Panel: Personas, User Experience, and Research Online April 7, 2021. https://www.accessibilityassociation.org/content.asp?contentid=357 WAS Series: Responsive Design April 8, 2021. Online https://www.meetup.com/A11YPrinceton/events/275686105/ #CSS Naked Day April 9, 2021. Global css-naked-day.github.io DrupalCon April 12-16, 2021. Online https://events.drupal.org/ Accessible Information and Data Visualization April 13, 2021. Online https://www.meetup.com/Nebraska-Digital-Accessibility-Meetup/events/276128539/ The Web Conference 2021 April 19-23, 2021. Ljubljana, Slovenia https://www2021.thewebconf.org/ +05: JAVASCRIPT. The GAAD Pledge - Improving React Native Accessibility By Alexandra Marlette. "…To recognize contributors for their effort, when an accessibility issue is closed and attached to a pull request, contributors will get a shout out on Twitter from our community manager. Contributors whose pull requests are accepted into the codebase will be highlighted in our monthly issues update on the React Native blog. Please join us in making React Native more accessible for everyone…" https://reactnative.dev/blog/2021/03/08/GAAD-React-Native-Accessibility Progressive Enhancement and Accessibility Redux By Peter-Paul Koch. "A while ago I asked about the exact relationship between progressive enhancement and accessiblity. What were the responses…" https://www.quirksmode.org/blog/archives/2021/03/progressive_enh_3.html Beyond Console.log() - Level up Your Debugging Skills By Christian Heilmann. "You may have established a pattern of coding that utilizes a few key tools offered by your browser's console. But have you dug any deeper lately? There are some powerful tools available to you, and they might just revolutionize the way you work…" https://www.sitepoint.com/beyond-console-log-level-up-your-debugging-skills/ The Array.pop() Method in Vanilla JS By Chris Ferdinandi. "…The Array.pop() method removes the last item from an array and returns it. The array is modified…" https://gomakethings.com/the-array.pop-method-in-vanilla-js/ The Array.from() Method in Vanilla JS Also Lets You Update Values By Chris Ferdinandi. "Last week, one of my students tipped me off to something that had somehow escaped my notice until now: the Array.from() method accepts an optional second argument that runs an Array.map() over the thing you're converting into an array…" https://gomakethings.com/the-array.from-method-in-vanilla-js-also-lets-you-update-values/ JavaScript: What is the Meaning of this? By Jake Archibald. "Figuring out the value of this can be tricky in JavaScript, here's how to do it…" https://web.dev/javascript-this/ +06: MISCELLANEOUS. Eric Eggert: An Accessibility Expert Inspiring Others By Dillon Friday. "Eric Eggert is a web accessibility expert who eagerly shares his knowledge through his professional work, website, lectures, and social media channels to inspire others to learn more about the subject.…" https://www.inclusionhub.com/articles/eric-eggert +07: NAVIGATION. Imagining Native Skip Links By Kitty Giraudel. "…lack of skip links represent a significant accessibility impediment to people using assistive technologies to browse the web. And considering every website needs one, with little to no variation from website to website, it does feel like something browsers could do on their side…" https://kittygiraudel.com/2021/03/07/imagining-native-skip-links/ Skipping Skip Links By Vasilis van Gemert. "…It makes much more sense to start each page with the content people expect on that page…" https://vasilis.nl/nerd/skipping-skip-links/ An Accessible Current Page Navigation State By Callum Hart. "Design and technical considerations behind the icon that indicates what page you're currently on…" https://www.callumhart.com/blog/an-accessible-current-page-navigation-state/ Getting Started with Journey Mapping: 27 Tips from Practitioners By Alita Joyce. "Set yourself up for journey-mapping success by educating yourself on the basics, defining objectives, building a crossfunctional team, collaborating on the map, and optimizing your presentation." https://www.nngroup.com/articles/journey-mapping-tips/ +08: TYPOGRAPHY. Evaluating Fonts: Font Family Selection for Accessibility & Display Readability By Andrew Somers. "What makes a font easy to read? The full answer could take a book to describe, but this is just a pamplet so we'll stick to the bare essentials. Font size, weight, tracking (i.e. letter spacing) leading (i.e. line spacing) and lightness contrast vs. the background are key factors. For this guide, we'll focus most on the design of the individual letters (called glyphs). We'll use black letters on white, and an 18pt size for the examples…" https://www.researchgate.net/publication/338149302_Evaluating_Fonts_Font_Family_Selection_for_Accessibility_Display_Readability#fullTextFileContent System Fonts Don't Have to be Ugly By Iain Bean. "Make your site faster and more environmentally-friendly by taking a system-fonts-first approach…" https://iainbean.com/posts/2021/system-fonts-dont-have-to-be-ugly/ +09: USABILITY. Why Does a Design Look Good? By Sarah Gibbons and Kelley Gordon. "Visually aesthetic designs use consistent typography, establish a clear hierarchy, utilize a refined color palette, and align to a grid." https://www.nngroup.com/articles/why-does-design-look-good/ Why UX Should Still Care About International Design Standards By Paul Brooks. "…we find ourselves a window of opportunity with the new update of ISO 9241-110 which is a fairly short document and arguably the simplest standard to understand and start using in the UX field. So if there's ever been a time in the last five years to actually get started with ISO standards, then now is definitely the time while it's hot off the press…" https://www.uxbooth.com/articles/why-ux-people-should-care-about-international-design-standards/ UX Team Staff Size Relative to Development Staff (Video) By Kate Kaplan. "We investigated current trends in design-team ratios, specifically: What's the typical number of designers and researchers in an organization relative to the number of developers?" https://www.nngroup.com/videos/ux-team-size-vs-development/ From Scientific Racism to Inclusive Design By Stacie Sheldon. "…every decision we make as User Experience professionals and other fields of technology can either raise or lower barriers to participation for people in our communities and with our products, services, and experiences. Let's be as aware as we can of our bias and the impact it may have and acknowledge the collective responsibility we have to lower those barriers." https://uxdesign.cc/from-scientific-racism-to-inclusive-design-c8b43a4b757d +10: WEBWASTE & SUSTAINABILITY. Moving Beyond the Cult of Volume (Part 3) By Gerry McGovern. "Did you ever wonder how much data you produce? In 2020, it was estimated that 1.7 megabytes of data were created every second for every person on earth. We have created more data in the last two years than in all of previous human history…" https://gerrymcgovern.com/moving-beyond-the-cult-of-volume-part-3/ +11: XML. Why I Still Use RSS By Marc. "I firmly believe the Internet, and what it stood for, peaked with RSS. RSS, or Really-Simple-Syndication, is (or was depending on your viewpoint) a means of allowing basically anything online to be collated into a single feed…Having only the content I want to see only be shown when I want to see it with the freedom to jump between readers as I please, all with no ads? For me, no other service comes close to the flexibility, robustness, and overall ease-of-use that RSS offers…" https://atthis.link/blog/2021/rss.html [Section one ends.] ++ SECTION TWO: +12: 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 WebWaste & Sustainability Information. https://www.d.umn.edu/itss/training/online/webdesign/webwaste.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.]