+++ WEB DESIGN UPDATE. - Volume 20, Issue 15, October 6, 2021. An email newsletter to distribute news and information about web design and development. ++ISSUE 15 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: WEBWASTE & SUSTAINABILITY. 13: XML. SECTION TWO: 14: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Takeaways from Accessibility as a Journey: Rationales and Practical Tips for Making Sites Accessible By Deborah Edwards-Onoro. "In her Accessibility as a Journey: Rationales and Practical Tips for Making Sites Accessible presentation at WordCamp US 2021, Bet Hannon shared her journey and insights in creating accessible websites…" https://www.lireo.com/takeaways-from-accessibility-as-a-journey-rationales-and-practical-tips-for-making-sites-accessible/ Top 8 Accessibility Issues to Avoid on Your Website By Brielle Cayer. "1. Forgetting to Include Accessibility in Updates… 2. Narrow Understanding of Accessibility… 3. Bad Color Contrast… 4. Color Indicators… 5. Pop-Ups and Automatic Media… …6. Improperly Labeled Buttons… 7. No Alt-Text…" https://blog.usablenet.com/top-accessibility-issues-to-avoid-on-your-website-guest-blog Web Design Mistakes That Impact Light-Sensitive Users By Bureau of Internet Accessibility. "…Photophobic individuals can adjust the settings of their computer monitors and smartphones to avoid the most severe effects, but many websites and apps aren't designed to operate at low-brightness or high-contrast settings. Addressing these issues can make a site more accessible, and the Web Content Accessibility Guidelines (WCAG) provide useful guidance for making the necessary changes…" https://www.boia.org/blog/web-design-mistakes-that-impact-light-sensitive-users 6 Tips for Improving Podcast Accessibility By A.J. Beltis. "…1. Ensure you have an accessible website… 2. Publish with an accessible media player… 3. Include a transcript… 4. Offer alternative methods for consuming podcast content… 5. Provide a clear audio recording… 6. Employ accessible marketing…" https://www.3playmedia.com/blog/6-tips-for-improving-podcast-accessibility/ Becoming More Accessible on Facebook: 4 Tips for Reaching a Broader Audience By Bureau of Internet Accessibility. "…As part of our series on improving social media accessibility, we're providing a few quick tips for becoming more accessible on Facebook…" https://www.boia.org/blog/becoming-more-accessible-on-facebook-4-tips-for-reaching-a-broader-audience Browsing With a Desktop Screen Reader By Henny Swan. "In our first post from our browsing with assistive technologies series we discuss screen readers…" https://tetralogical.com/blog/2021/09/29/browsing-with-a-desktop-screen-reader/ Accessibility Review of Online Survey Tools By Terrill Thompson. "…ATS IT Accessibility Team recently conducted a review of the following five tools, listed alphabetically: Catalyst WebQ, Google Forms, Microsoft Office Forms, Qualtrics, Survey Monkey…" https://www.washington.edu/accessibility/2021/09/28/online-survey-tools/ User Experience Guide for Displaying Accessibility Metadata 1.0 Charles LaPierre and Gregorio Pellegrino, editors. "…This document proposes a shared framework for presenting publication accessibility metadata in a user-friendly manner…" https://www.w3.org/2021/09/UX-Guide-metadata-1.0/principles/ A is for Accessibility with John Rochford (Video) By Portland Helmich, Open Access Technologies. "…today I'm talking to John Rochford, head of INDEX, a program at UMass Medical School that focuses on developing web technology for people with disabilities. John is also on the faculty of UMass Medical School, assists the World Wide Web Consortium in writing accessibility guidelines, and speaks internationally for the U.S. State Department about artificial intelligence empowerment and fairness for people with disabilities…" https://www.youtube.com/watch?v=UsrHGKqiT_c A is for Accessibility with Sharron Rush (Video) By Portland Helmich, Open Access Technologies. "…I am talking to Sharron Rush, Co-founder and Executive Director of Knowbility. A nonprofit leader in accessible information technology in Austin, Texas…" https://www.youtube.com/watch?v=m4QTgXj7q6Q A is for Accessibility with Greg Donnelly (Video) By Portland Helmich, Open Access Technologies. "I'm talking to Greg Donnelly, President and CEO of The Carroll Center for the Blind in the greater Boston area…" https://www.youtube.com/watch?v=Df2Y6kNAw40 The Latest Podcasts From Open Access Technologies https://www.openaccesstech.com/podcasts/ Legal Update: September 2021 By Ken Nakata. "…Fortunately, Lexis didn't fill my inbox with cases but the material that has come in is pretty interesting…" https://convergeaccessibility.com/2021/10/04/legal-update-september-2021/ United States Reaches Agreements with New York State and Local Government Agencies to Improve Accessibility to Covid-19 Vaccination Websites for People with Vision Impairments By U.S. Attorney's Office, Eastern District of New York. "…the United States Attorney's Office identified multiple areas where text was difficult to read for visually impaired people. On some of the websites, individuals with visual impairments using screen readers were prevented from identifying what steps they needed to take to complete forms, or from readily navigating the websites. On some websites, lettering was set against a background causing a low contrast…" https://www.justice.gov/usao-edny/pr/united-states-reaches-agreements-new-york-state-and-local-government-agencies-improve +02: CASCADING STYLE SHEETS. The CSS prefers-color-scheme User Query and Order of Preference By Sara Soueidan. "…That explains it. UA preference > OS-level preference. Something to keep in mind for when an 'unexpected behavior' happens. A good reminder to always test and check the specifications. Had this not been in the spec, then further investigation might have led to an existing bug report or to the creation of one. Who knows." https://www.sarasoueidan.com/blog/prefers-color-scheme-browser-vs-os/ Quickly Testing CSS Fallbacks By Chris Coyier. "…Not all browsers support all features. Say you want to write a fallback for browsers that doesn't support CSS Grid. Not very common these days, but it's just to illustrate a point…" https://css-tricks.com/quickly-testing-css-fallbacks/ +03: EVALUATION & TESTING. Advanced User Testing Methods for Accelerating Innovation (Video) By Kathryn Whitenton. "Two user research methods allow you to quickly test a large number of design alternatives, thus accelerating UX innovation. Rapid iterative design and within-subjects testing of multiple alternate designs aren't for every project, but are great when they do apply." https://www.nngroup.com/videos/advanced-user-testing-methods/ For Statistical Significance, Must p Be < .05? By Jim Lewis and Jeff Sauro. "…what's so special about .05? Are results only noteworthy, and only significant in the statistical sense, if p < .05…" https://measuringu.com/setting-alpha/ +04: EVENTS. No Mouse Day October 13, 2021. Online https://www.o3world.com/news/accessibility-no-mouse-day/ Introducing the XR Association's Developers Guide on Accessibility Online October 19, 2021. https://www.meetup.com/a11yvr/events/280947782/ Your 8 Step Plan to Accessible and Inclusive Websites October 21, 2021. Online https://www.texthelp.com/resources/webinars/8-steps-to-accessible-inclusive-websites/ Heartland Developers Conference November 1-3, 2021. Omaha, Nebraska, U.S.A https://www.heartlanddc.com/ A11y Camp November 9-11, 2021. Online https://a11ycamp.org.au/ The Intersection of Race and Disability February 15, 2022. Online https://www.accessibilityonline.org/ADA-Audio/session/?id=110966 37th Annual CSUN Assistive Technology Conference March 12-18, 2022. Anaheim, California, U.S.A. https://www.csun.edu/cod/conference/sessions/ Axe-Con March 15-17, 2022. Online. https://www.deque.com/axe-con/ +05: HTML. What Are H Tags? How Headings Affect User Experience By Bureau of Internet Accessibility. "Heading tags (also referred to as H tags or header tags) are semantic HTML elements that help to organize your website…" https://www.boia.org/blog/what-are-h-tags-how-headings-affect-user-experience Focus Order and Accessibility By Chris Ferdinandi. "…You often see developers break this by manually overriding the focus order with the tabindex property…" https://gomakethings.com/focus-order-and-accessibility/ ARIA in HTML Steve Faulkner, Scott O'Hara, and Patrick H. Lauke, editors. "This specification defines the authoring rules (author conformance requirements) for the use of Accessible Rich Internet Applications (WAI-ARIA) 1.1 and Digital Publishing WAI-ARIA Module 1.0 attributes on [HTML] elements…" https://www.w3.org/TR/2021/PR-html-aria-20210930/ Redundantly Redundant a11y Accessibility By Scott O'Hara. "Let's take a look at the following markup snippet, shall we…" https://www.scottohara.me/blog/2021/10/04/redundantly-redundant.html Declaring Page Language-and Declaring Changes in Language By Jens Oliver Meiert. "When just testing language handling of HTML pages in screen readers, I didn't observe particular issues around the declaration of page language; but there were some around unmarked changes in language…" https://meiert.com/en/blog/changes-in-language/ +06: JAVASCRIPT. 4 aria-mistakes Worth Solving By Rakesh Paladugula. "…No ARIA is better than bad ARIA. This is one of the core rules of WAI ARIA. Learning how to write good ARIA roles, states and properties is important to create accessible and inclusive experiences. One of the ways to make it better is to avoid common aria-mistakes…" https://www.maxability.co.in/2021/08/22/4-aria-mistakes/ Avoid Accessibility Issues When Using ARIA's "Application" Role By Bureau of Internet Accessibility. "…ARIA's application role is intended for web apps that simulate desktop applications…The application role can create problems because it restricts assistive devices from using traditional HTML interpretation techniques. If used improperly, this could create serious usability issues…" https://www.boia.org/blog/avoid-accessibility-issues-when-using-arias-application-role Using JavaScript to Detect High Contrast and Dark Modes By Scott O'Hara. "I was recently asked if there were ways to programmatically determine if users had Windows high contrast mode, or dark color schemes enabled at the OS level…" https://www.scottohara.me/note/2021/10/01/detect-high-contrast-and-dark-modes.html +07: MISCELLANEOUS. Conversations with Accessibility Experts: Jeanne Spellman By Diamond Accessibility. "Jeanne Spellman works in digital accessibility and is the co-lead of the project to write a new version of the international web accessibility standards at the World Wide Web Consortium (W3C)…" https://blog.diamond.la/conversations-with-accessibility-experts-jeanne-spellman Q&A With Devon Persing, Accessibility at Shopify By Equal Entry. "Devon Persing is an accessibility specialist at Shopify, and has been working in digital accessibility since 2012…" https://equalentry.com/qa-with-devonpersing-accessibility-shopify-2/ How to Make the Federal Workforce More Inclusive and Representative By Mike Gifford. "…We were encouraged to see that this executive order links accessibility to information and communication technology (ICT). Efforts to support (People with Disabilities) PwD cannot stop with ramps and elevators for government offices. The digital infrastructure that we depend on for communications, record keeping and decision making also needs to be accessible." https://www.linkedin.com/pulse/how-make-federal-workforce-more-inclusive-mike-gifford/ Set Safari Free! By Bruce Lawson. As you may know, every browser on iOS is actually just a branded re-skin of WebKit, the engine that Safari uses, because Apple won't allow other engines on iOS…" https://brucelawson.co.uk/2021/set-safari-free/ Web Development History 1996: Flash and CSS Bring Design to the Web By Richard MacManus. "After the birth of web apps in 1993 with CGI scripts, followed by startups like Yahoo using Perl code to create dynamic websites in 1994, and then client-side interactivity arriving in 1995 with Netscape's JavaScript, the web was evolving fast into a full-stack programming platform…" https://webdevelopmenthistory.com/1996-flash-css-web-design/ +08: NAVIGATION. How Sighted and Blind Web Navigation Differs By Deborah Edwards-Onoro. "In the September 2021 Accessibility Talks virtual meetup, Michele Williams spoke about how sighted designers often don't perceive the differences in how a sighted person navigates a page vs. the strategies a blind person uses to explore a page…" https://www.lireo.com/how-sighted-and-blind-web-navigation-differs/ Accessibility for E-Commerce: 3 Best Practices For Navigational Links (73% of Sites Fail) By Alex Krzyminski. "…Identify links to screen readers using accessible markup (9% of sites don't)… Include sufficient contextual information to convey the purpose or destination of a link (67% of sites don't)… Use visually distinctive link styling (9% of sites don't)…" https://baymard.com/blog/links-accessibility The Dream of a More Human Navigation Realized By Lis Hubert and Diana Sonis. "…When we update our framing to see pages of a site as standalone places, each needing to marry business values and user needs in a specific way, our resulting websites change. Each element of the site becomes intentional and impactful…When designing for customer intentions you still do the research, understand the customer and business needs, and marry these with information models. What changes is how you think about and frame the world…" https://boxesandarrows.com/the-dream-of-a-more-human-navigation-realized/ +09: TOOLS. WAVE Edge Extension By WebAIM. "WAVE is a web accessibility evaluation tool developed by WebAIM.org. It provides visual feedback about the accessibility of your web content by injecting icons and indicators into your page. No automated tool can tell you if your page is accessible, but WAVE facilitates human evaluation and educates about accessibility issues. All analysis is done entirely within the Edge browser allowing secure evaluation of intranet, local, password protected, and other sensitive web pages…" https://microsoftedge.microsoft.com/addons/detail/wave-evaluation-tool/khapceneeednkiopkkbgkibbdoajpkoj Web Accessibility Evaluation Guide (WAVE) By WebAIM. "A new WebAIM resource is available to guide testers through a wide variety of accessibility checks." https://webaim.org/articles/evaluationguide/ Build a Better Mobile Input By Alex Holachek. "By properly configuring a few key input attributes, you can make web forms much easier to use on mobile devices…" https://better-mobile-inputs.netlify.app/ +10: TYPOGRAPHY. Ligatures: Benefits and Pitfalls By Jeremy DePew. "…This article will give a high-level overview of problems ligatures can cause, as well as provide some workarounds for solving those issues. These observations and suggestions are for Adobe InDesign and Adobe Illustrator, two common applications used by graphic designers…" http://mn.gov/mnit/about-mnit/accessibility/news/index.jsp?id=38-497550 +11: USABILITY. Working Memory and External Memory (Video) By Raluca Budiu. "People have very limited ability to keep information in their working memory while performing tasks, so user interfaces should be designed accordingly: to minimize memory load. One way of doing so is to offload items to external memory by showing them on the screen." https://www.nngroup.com/videos/working-memory-external-memory/ What is a Good User Experience? By Sarah Pagliaccio. "…To get us all on the same page about capital G, good design, I'm kicking off my column with a discussion about design ethics…" https://www.uxmatters.com/mt/archives/2021/10/what-is-a-good-user-experience.php +12: WEBWASTE & SUSTAINABILITY. Let's Talk About Digital Hygiene By Gerry McGovern. "If someone looked inside your computer or your Cloud account would they find a tidy, clean, well-maintained place?…" https://gerrymcgovern.com/lets-talk-about-digital-hygiene/ +13: XML. Accessible SVG Masterclass (Video) By Carie Fisher. "Today we have many robust patterns and techniques to help us optimize SVG accessibility, this is true regardless of if you are creating icons, simple images, or more complex infographics. But which patterns are the best to use for your particular situation and targeted WCAG conformance level? And what other factors should we consider when designing and developing accessible SVGs?…" https://www.youtube.com/watch?v=GQQGIMp0gwo Carie's Slides: https://noti.st/cariefisher/HUvkHX/accessible-svg-masterclass [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 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.]