+++ WEB DESIGN UPDATE. - Volume 19, Issue 23, December 2, 2020. An email newsletter to distribute news and information about web design and development. ++ISSUE 23 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: HTML. 07: JAVASCRIPT. 08: MISCELLANEOUS. 09: NAVIGATION. 10: STANDARDS, GUIDELINES & PATTERNS. 11: TOOLS. 12: USABILITY. 13: WEBWASTE & SUSTAINABILITY. SECTION TWO: 14: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Don't Rely on YouTube Transcripts By Adrian Roselli. "Let's establish something first - auto-generated captions are a problem. They almost guarantee a WCAG failure and can leave users more confused (or offended) than when they started. YouTube creates the transcript from the closed captions of a video (the text that overlays the video, as opposed to burned-in or open captions). If you are using auto-generated captions, your transcripts will already be insufficient (or terrible)…" https://adrianroselli.com/2020/11/dont-rely-on-youtube-transcripts.html More Accessible Skeletons By Adrian Roselli. "…Many skeleton patterns do a poor job presenting themselves to screen reader users in any meaningful way. They often stuff aria-busy into their widget, set its value to true when the thing is loading, and leave it at that. Except few screen readers honor aria-busy="true"…" https://adrianroselli.com/2020/11/more-accessible-skeletons.html A Plan for Accessible Maps By Benjy Stanton. "Designing accessible interactive maps is hard. I don't think I could point to any single thing that I've worked on that covers all of the things mentioned here. But, if I was going to start a brand new project, with plenty of time to get things right, this is where I'd start…" https://www.benjystanton.co.uk/blog/a-plan-for-accessible-maps/ How (not) to Make Accessible Data Visualizations, Illustrated by the US Presidential Election By Sarah L. Fossheim. "…Let's take a look at some important aspects of accessible data visualizations, based on what The New York Times, CNN, FiveThirtyEight, The Guardian and Fox News are doing right and wrong…" https://fossheim.io/writing/posts/accessible-dataviz-us-elections/ ARIA Tip By Steve Faulkner. "aria-describedby even in the absence of other sources is not an accessible name…it provides and acc description, never an acc name, unlike the title attribute which provides an acc description in the presence of any other source of acc name, but does provide a fallback acc name in the absence of any other source…" https://twitter.com/stevefaulkner/status/1333743095272394752 If It's Not Accessible, It's Not Done By Craig Abbott. "…Do not consider something finished until you are sure it is accessible. Accessibility is not a choice, it is law. It is always a priority, and if you neglect it you will create more work for yourself later…" https://twitter.com/abbott567/status/1332617435665592321 ProPublica Experiments with Ultra-accessible Plain Language in Stories About People with Disabilities By Sarah Scire. "ProPublica's plain language experiment is a first for a mainstream news organization. Disability experts say it shouldn't be the last…" https://www.niemanlab.org/2020/11/propublica-experiments-with-ultra-accessible-plain-language-in-stories-about-disabilities/ A11Y Websites By Calum Ryan et al. "Showcase of accessible websites. These websites have been assessed through both automated and manual testing against the success criteria set out in the Website Content Accessibility Guidelines (WCAG) 2.1 to grade AA and above…" https://www.a11ywebsites.com/ Survey of Web Accessibility Practitioners #3 By WebAIM. "The following survey is a follow-up to previous Surveys of Web Accessibility Practitioners conducted July 2014 and April 2018…" https://webaim.org/projects/practitionersurvey3/ +02: CASCADING STYLE SHEETS. Native CSS Masonry Layout In CSS Grid By Chris Coyier. "Rachel Andrew introducing the fact that masonry layout is going to be a thing in native CSS via CSS grid layout. The thing with masonry is that we can already do it for the most part, but there is just one thing that makes it hard: doing the vertical-staggering and having a left-to-right source order. So that's what this new ability will solve in addition to it just being less hacky in general…" https://css-tricks.com/native-css-masonry-layout-in-css-grid/ Creating Websites with prefers-reduced-data By Polypane. "Even though more and more people get access to the internet every day, not all of them have fast gigabit connections or unlimited data. Using the media query prefers-reduced-data we can keep our sites accessible to everyone…" https://polypane.app/blog/creating-websites-with-prefers-reduced-data/ +03: COLOR. Text Contrast Issues That Cannot Be Detected with Automated Tools By Adrian Roselli. "These are based on real-world examples that we have encountered in audits, though this is simplified to show the salient bits…" https://codepen.io/aardrian/details/ZLZMep The UX of Among Us: The Importance of Colorblind-Friendly Design By Unma Desai. "Color blindness (color vision deficiency) is the decreased ability to see color or differences in color. Based on statistics from colourblindawarness.org, there is general agreement that worldwide 8% of men and 0.5% of women have a color vision deficiency. Worldwide, there are over 300 million people with some form of color blindness…" https://uxdesign.cc/the-importance-of-colorblind-friendly-design-case-study-among-us-dcd042c87b9 +04: EVALUATION & TESTING. The 6 Steps to Roadmapping By Sarah Gibbons. "To create a roadmap, inputs are gathered and clustered into themes, then prioritized and visualized. This article covers 6 key steps to roadmapping that can be applied to any scope or industry." https://www.nngroup.com/articles/roadmapping-steps/ Weaving Web Accessibility With Usability By Uri Paz. "In this article, Uri Paz explains how a site complying with accessibility guidelines may still present usability issues when testing with real users. Find out how weaving accessibility best practices with usability testing, can help as many people as possible to fully use your site…" https://www.smashingmagazine.com/2020/11/weaving-web-accessibility-usability/ +05: EVENTS. A11y Talks (December 2020): Accessible Marketing Practices December 9, 2020. Online https://groups.drupal.org/node/536213 An Event Apart Seattle April 5-7, 2021. Seattle, Washington U.S.A. https://aneventapart.com/event/seattle-2021 Devopsdays Boise 2021 April 6-7, 2021. Boise, Idaho U.S.A. https://devopsdays.org/events/2021-boise/welcome/ Web4All 2021 April 19-20, 2021. Ljubljana, Slovenia http://www.w4a.info/2021/ The Web Conference '21 April 19-23, 2021. Ljubljana, Slovenia https://www2021.thewebconf.org/ +06: HTML. Alt vs Figcaption By Elaina Natario. "…Assistive technologies need words to interpret an image. People sometimes need words to better understand why an image is being displayed. Luckily we have a few ways to describe them in a human readable manner: alt and figcaption. These items house very different writing patterns though, and can be used both together and apart, depending on the conditions…" https://thoughtbot.com/blog/alt-vs-figcaption Exploring What the Details and Summary Elements Can Do By Robin Rendle. "We've mentioned before just how great the
and elements are…" https://css-tricks.com/exploring-what-the-details-and-summary-elements-can-do/ Back to Basics: Creating a Clickable Card Interface in Plain HTML, CSS and Javascript By Christian Heilmann. "One request that keeps coming up in web design right now are card interfaces that work like this…" https://christianheilmann.com/2020/11/26/back-to-basics-creating-a-clickable-card-interface-in-plain-html-css-and-javascript/ Why It's Good For Users that HTML, CSS And JS are Separate Languages By Hidde de Vries. "The separation between HTML, CSS and JavaScript as it currently is benefits web users. It does this in many ways that sometimes only become apparent after years (CSS was invented 25 years ago, when phones with browsers did not yet exist, but different media were already taken into account). It's exciting to abstract parts of the web and remodel things for your own use case, but I can't emphasise enough that the web is for people. Well written and well separated HTML and CSS is important to their experience of it." https://hiddedevries.nl/en/blog/2020-11-25-why-its-good-for-users-that-html-css-and-js-are-separate-languages +07: JAVASCRIPT. Please Disable JavaScript to View this Site By Remy Sharp. "…JavaScript isn't the point. Or at least, I don't think it is. The point, that I wanted to return to, as I take it, is that forcing a visitor down a specific path just so that they can access the content is a burden that they should not carry. It is our jobs as web developers to make our web sites accessible to all. That's the lesson…" https://remysharp.com/2020/11/30/please-disable-javascript-to-view-this-site Sick of the Stupid Jokes? Write Your Own Arbitrary-Precision JavaScript Math Library By James Sinclair. "…Some people like to hate on JavaScript. A lot. Sometimes it's fair. Sometimes it's not. The math jokes aren't really fair any more…" https://jrsinclair.com/articles/2020/sick-of-the-jokes-write-your-own-arbitrary-precision-javascript-math-library/ +08: MISCELLANEOUS. Web Histories By Rachel Andrew. "The Web Histories project is an attempt to document the stories of those who have helped to shape the open web platform, with a focus on those people who are often underrepresented in the formal histories…" https://webhistories.org/ The first 2 stories are up on Meryl K. Evans and Jennifer Niederst Robbins: https://webhistories.org/stories/meryl-k-evans/ https://webhistories.org/stories/jennifer-niederst-robbins/ Why The Web Is Such A Mess (Video) By Tom Scott. "Tim Berners-Lee envisioned a "universal information system". What went wrong?" https://www.youtube.com/watch?v=OFRjZtYs3wY When a Backup Isn't a Backup By Shelley Powers. "…This experience reminded me that no amount of clever automation makes up for our commitments to our systems. It's like all of life, really. If we coast along on autopilot, we're eventually going to run into a fire truck." https://shelleystoybox.com/when-a-backup-isnt-a-backup/ Equity and Accessibility in the Workplace By Janine Schindler. "Accessibility is often forgotten about when speaking about diversity and inclusion, but it is the missing link. You can have the most diverse workforce and the most inclusive workplace, but if anyone experiences barriers to access-be they physical, institutional, societal, or the like-then you haven't ensured inclusion for all." https://www.forbes.com/sites/forbescoachescouncil/2020/11/11/equity-and-accessibility-in-the-workplace/ How Science Let Us Down During the Pandemic By Gerry McGovern. "…Much of the tech industry's business model is fake news, fake engagement. We must rein in the worsts elements of the Internet. A robust, evidence-based, science-informed, societal-level approach can do that…" https://gerrymcgovern.com/how-science-let-us-down-during-the-pandemic/ +09: NAVIGATION. Information Scent (Video) By Raluca Budiu. "Information foraging explains how users behave on the web and why they click certain links and not others. Information scent can be used to analyze how people assess a link and the page context surrounding the link to judge what's on the other end of the link." https://www.nngroup.com/videos/information-scent/ +10: STANDARDS, GUIDELINES & PATTERNS. How Are Web Standards Born? & Happy Blue Beanie Day! (Video) By Eric Eggert. "This book is 'Designing with Web Standards' from Jeffrey Zeldman. It helped to introduce a whole generation of developers to developing websites in ways that are not specific to certain browsers…" https://www.youtube.com/watch?v=DPN6SGTiEf0 Celebrating Web Standards on Blue Beanie Day By Deborah Edwards-Onoro. "…As I have done in the past, I'm glad to spread the word about this special day…" https://www.lireo.com/web-standards-blue-beanie-day-2020/ +11: TOOLS. Website Carbon Calculator By Wholegrain Digital. "How is your website impacting the planet? Estimate your web page carbon footprint…" https://www.websitecarbon.com/ +12: USABILITY. User Control and Freedom (Usability Heuristic #3) By Maria Rosala. Users often make mistakes or change their minds. Allow them to exit a flow or undo their last action and go back to the system's previous state." https://www.nngroup.com/articles/user-control-and-freedom/ UX Lessons from Big Sur By Jordan Bowman. "There are problems with big Sur, but let's look a few UX decisions they (mostly) got right…" https://learnuxd.io/posts/ux-lessons-from-big-sur Who Inspired Jakob Nielsen? (Video) By Jakob Nielsen. "At the Virtual UX Conference, Jakob Nielsen talked about the people who inspired him early in his career - and more recently." https://www.nngroup.com/videos/who-inspired-jakob-nielsen/ +13: WEBWASTE & SUSTAINABILITY So You Wanna Create an Eco-Friendly Website By Eric Bailey. "…how do you make a website or web app not-awful?…" https://thoughtbot.com/blog/so-you-wanna-create-an-eco-friendly-website [Section one ends.] ++ SECTION TWO: +14: 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. 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.]