+++ WEB DESIGN UPDATE. - Volume 20, Issue 49, June 1, 2022. An email newsletter to distribute news and information about web design and development. ++ISSUE 49 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: DRUPAL. 04: EVALUATION & TESTING. 05: EVENTS. 06: HTML. 07: JAVASCRIPT. 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. Office for Civil Rights Video Series on Website Accessibility By U.S. Department of Education. "…a video series covering a variety of topics on digital access in education, including how people with disabilities use technology, applicable Federal regulations, and identifying and remediating barriers to access…" https://adata.org/ocr-videos Alt Writing By Jeremy Keith. "…if the alt text also starts to sound a bit repetitive after a while, maybe that's not such a bad thing. A screen reader user would be getting an equivalent experience…" https://adactio.com/journal/19106 Writing Useful Alt Text By Michelle Barker. "…writing alt text isn't always straightforward, and often requires thought, consideration and empathy…" https://css-irl.info/writing-useful-alt-text/ Just How Long Should Alt Text Be? By Geoff Graham. "…if you're looking for a hard and fast rule on character counts, sorry to disappoint. Like so many other things, context is king and that's the sort of thing that can't be codified, or even automated for that matter…" https://css-tricks.com/just-how-long-should-alt-text-be/ Single Page Applications By Ricky Onsman. "…SPAs are expected to conform to the same requirements of the Web Content Accessibility Guidelines (WCAG) that apply to multi-page websites. Due to their nature, and depending on how they are constructed, SPAs might need to use techniques to conform to specific WCAG success criteria that are different to those used on multi-page websites…" https://www.tpgi.com/single-page-applications/ Screen Readers and Drag-and-Drop, Part 1 By Darin Senneff. "An article series I started where I attempt to learn how and if DnD can be made usable for a screen reader user." https://www.darins.page/articles/screen-readers-drag-drop-1 How to Fix: "Buttons Do Not Have Accessible Names" By Bureau of Internet Accessibility. "The Web Content Accessibility Guidelines (WCAG) require interactive elements to have both a 'label' and a 'name.' The name (also called the accessible name) is text that software can use to identify a component to a user…" https://www.boia.org/blog/how-to-fix-buttons-do-not-have-accessible-names 6 Accessibility Issues That Google Lighthouse Can Miss By Bureau of Internet Accessibility. "…like all automated accessibility tools, Lighthouse has significant limitations. It's still a useful resource, but developers should understand those limitations in order to use it effectively. Here's a look at six web accessibility barriers that Lighthouse will typically miss…" https://www.boia.org/blog/6-accessibility-issues-that-google-lighthouse-can-miss Making Accessible Documents - the Movie! By Bruce Lawson. "…For Global Accessibility Awareness Day last week, my employers at Babylon Health allowed me to publish a 30 min workshop I gave to our Accessibility Champions Network on how to make accessible business documents…" https://brucelawson.co.uk/2022/making-accessible-documents-the-movie/ Triaging WCAG 2.1 Level AAA By Ian Pouncey. "how do you decide what to fix and what to ignore?…" https://tetralogical.com/blog/2022/05/20/triaging-wcag-level-aaa/ Accessibility Awareness Lab (Video) By Tim Harshbarger and Michael Harshbarger. Tim and Michael's 2022 Accessibility Awareness Lab GAAD presentation. https://www.deque.com/gaad-2022-thank-you-accessibility-awareness-lab/ Accessibility Fundamentals Bootcamp (Video) By Tim Harshbarger and Michael Harshbarger. Tim and Michael's 2022 GAAD Bootcamp presentation. https://www.deque.com/gaad-2022-accessibility-fundamentals-bootcamp/ How to Write User Stories for Accessibility By Leon Hampson. "A user story usually focuses on the value a software feature will deliver to an end-user, and an accessibility user story is no different…" https://tetralogical.com/blog/2022/05/26/how-to-write-user-stories-for-accessibility/ ATAG: The Standard for Accessibility of Content Creation By Hidde de Vries. "ATAG is a set of guidelines for the accessibility of authoring tools. In this post I'll talk about what it is and why it matters…" https://hidde.blog/content-creation-accessibility/ Ed Department Ramps Up Disability Related Compliance Reviews By Michelle Diament. "…The U.S. Department of Education said that its Office for Civil Rights will 'soon launch' 100 compliance reviews focused on digital accessibility…" https://www.disabilityscoop.com/2022/05/24/ed-department-ramps-up-disability-related-compliance-reviews/29871/ +02: CASCADING STYLE SHEETS. Flexbox and the Screen Reader Experience By John Northup. "Flexbox is a CSS technique for positioning content in rows and columns in a way that adapts well to responsive layouts, but what about the screen reader experience?" https://webaim.org/blog/flexbox-and-the-screen-reader-experience/ Manage Accessible Design System Themes With CSS Color-Contrast() By Daniel Yuschick. "Developing accessible products can be challenging, especially when some of the requirements are beyond the scope of development. It's one thing to enforce alt text for images and labels for form fields, but another to define an accessible color palette. From working with design handoffs to supporting custom themes in a design system, the CSS color-contrast() function can become a cornerstone for developers in enforcing sufficiently contrasting and accessible UIs…" https://www.smashingmagazine.com/2022/05/accessible-design-system-themes-css-color-contrast/ +03: DRUPAL. GAAD Pledge 2022 - Extending Drupal's Accessibility By Drupal Association. "The Drupal community is again celebrating Global Accessibility Awareness Day (GAAD) but this time we are excited to also announce that the Drupal CMS has taken the GAAD pledge to formalize accessibility as a core value of our framework…" https://www.drupal.org/association/blog/gaad-pledge-2022-extending-drupals-accessibility +04: EVALUATION & TESTING. Checklist for Moderating a Usability Test By Maria Rosala. "Moderating a usability test? Follow these 10 simple steps to make your sessions go smoothly. Download an example facilitator guide at the bottom of this article."" https://www.nngroup.com/articles/usability-checklist/ A Guide to Study-Based UX Metrics By Jeff Sauro and Jim Lewis. "In this article, we describe several types of study-level metrics that cover many of the common post-study constructs businesses and research teams typically track…" https://measuringu.com/guide-to-study-based-ux-metrics/ Rethinking User Personas By Cindy Brummer. "…User personas have led to confusion and misdirection among design teams. That's why it's time to rethink them…" https://www.uxbooth.com/articles/rethinking-user-personas/ +05: EVENTS. Two Accessibility Summer Camp Pre-Sessions (PDF) June 16, 2022. * Speaking up and Speaking Out - Essential Communication for Accessibility Professionals * Audio Description: If Your Eyes Could Speak https://www.accessibilityict.org/_files/ugd/4a98f4_adc8746e4c434317b07f06debc6bdc43.pdf Accessibility Laws: Are Platform Providers Liable? Or Are You? June 21, 2022. Online https://www.accessibility.com/event/2022/understanding-accessibility-laws-which-ones-apply-to-you An Accessibility Checker That Should be Part of Your Toolkit November 15, 2022. Online https://www.accessibilityassociation.org/s/webinar-details?id=a0A3p0000183esXEAQ How Do You Know You're [Still] Accessible? November 15, 2022. Online https://www.accessibility.com/event/2022/how-do-you-know-if-you-are-still-accessible +06: HTML. Why Are iFrame Titles Important for Accessibility? By Bureau of Internet Accessibility. "…Titling your iframes provides users with important context, enabling them to decide whether or not to engage with your content. Here's an overview of the best practices for providing iframe titles…" https://www.boia.org/blog/why-are-iframe-titles-important-for-accessibility HTML Concepts: Focusable Areas By Jens Oliver Meiert. "When you hear 'focusable area,' what comes to your mind?…" https://meiert.com/en/blog/html-focusable-areas/ A Perfect Table of Contents With HTML + CSS By Nicholas C. Zakas. "…Creating a table of contents with nothing but HTML and CSS was more of a challenge than I expected, but I'm very happy with the result…" https://css-tricks.com/a-perfect-table-of-contents-with-html-css/ +07: JAVASCRIPT. React Native Accessibility - GAAD 2022 Update By Alex Tait. "…we wanted to update everyone on the accessibility progress we've made on the React Native Framework…" https://reactnative.dev/blog/2022/05/19/GAAD-2022-update +08: NAVIGATION. Make It Clear Where Hit Areas in Visual Elements Lead: 33% of Sites Don't By Mark Crowley. "Knowing what is clickable and what is tappable - and where these linked elements begin and end - is vital in ensuring that users feel in control when navigating a site…" https://baymard.com/blog/hit-areas-in-visual-elements +09: TOOLS. Sa11y WordPress Plugin By Adam Chaboryk. "The WordPress plugin was released April 2022. Sa11y was also integrated into Joomla as a core feature (not just a plugin) as of version 4.1 and above, known as Jooa11y. Sa11y is also available in French, Polish and Ukrainian." https://sa11y.netlify.app/wordpress/ +10: USABILITY. The 3 Levels of Emotional Processing (Video) By Therese Fessenden. "People react to their user experience at 3 levels of emotion, as defined by Don Norman: Visceral, Behavioral, and Reflective emotions. Understanding these different types of emotions is important for better UX design." https://www.nngroup.com/videos/3-levels-emotional-processing/ UX Roadmap Themes (Video) By Anna Kaley. "Instead of feature-focused roadmaps, theme-based UX roadmaps visualize experience strategy by communicating high-level opportunities and problems to solve. Include these 7 elements in each theme on the roadmap." https://www.nngroup.com/videos/ux-roadmap-themes/ UX Win: REI Look Up Membership By Deborah Edwards-Oñoro. "…Finding an email account associated with your online account shouldn't be time-consuming or difficult. Organizations like REI, providing multiple options to discover your email address or membership details, should be the norm…" https://www.lireo.com/ux-win-rei-look-up-membership/ [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 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.]