+++ WEB DESIGN UPDATE. - Volume 19, Issue 01, July 02, 2020. An email newsletter to distribute news and information about web design and development. ++ISSUE 01 CONTENTS. SECTION ONE: New references. What's new at the Web Design Reference site? http://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: INFORMATION ARCHITECTURE. 08: JAVASCRIPT. 09: MISCELLANEOUS. 10: NAVIGATION. 11: TOOLS. 12: USABILITY. SECTION TWO: 13: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Infographic: Web Accessibility for Designers By WebAIM. "Optimal accessibility should start early in the visual design process. This updated infographic highlights many important principles of accessible design." https://webaim.org/resources/designers/ What You Need to Know About Black People, Disability, and Accessibility (Video) By Angela Hooker. Angela's JuneteenthConf presentation. https://www.youtube.com/watch?v=2W7QCYzOn_U Accessible to Some By Manuel Matuzović. "Your website, app, or new feature is only half as good if only some people can access it. Consider inclusion and diversity from the very beginning and test properly. A score of 100 in Lighthouse or 0 errors in axe doesn't mean that you're done, it means that you're ready to start manual testing and testing with real users, if possible. Before just you build and launch something, think about your users first and how your decisions might affect them." https://www.matuzo.at/blog/accessible-to-some/ Takin' Five (Videos) By Ethan Marcotte. "…I've been working with Aquent Gymnasium to produce a series of five short tutorial videos, which have been launching over the course of this past week. Since the last video just went live, I'm thrilled to share the whole list with you. 1.) Introduction to using VoiceOver on macOS 2.) Designing beautiful focus states 3.) Flexible and accessible typesetting 4.) Responsively designing with viewport units 5.) Designing beautiful and accessible drop caps…" https://ethanmarcotte.com/wrote/takin-five/ Accessible Data Tables By Bruce Lawson. "I've been working on a client project and one of the tasks was remediating some data tables. As I began researching the subject, it became obvious that most of the practical, tested advice comes from my old mates Steve Faulkner and Adrian Roselli…" https://www.brucelawson.co.uk/2020/accessible-data-tables/ Scripted User Flow Testing vs. End-To-End Testing for Accessibility By Mark Steadman. "Accessibility APIs and end-to-end testing are a great way to catch up to 50% of your organization's accessibility defects. But what if your organization doesn't have automated testing built out? How can you test for accessibility defects while you code?…" https://www.deque.com/blog/scripted-user-flow-testing-vs-end-to-end-testing-for-accessibility/ Accessibility New York City: Using Task-Oriented Walk Throughs for Accessibility Reviews By Deborah Edwards-Onoro. "…One upcoming event I'm looking forward to is Accessibility New York City’s July meetup when they host Sarah Pulis speaking on Using Task-Oriented Walk Throughs for Accessibility Reviews. The presentation will be held on July 14, 2020. Read on to learn more about the talk and presenter…" https://www.lireo.com/accessibility-nyc-task-oriented-walk-through-accessibility/ San Diego County CU Must Face Claim Over Website Accessibility, Court Rules By Mike Scarcella. "California's Fourth Appellate District overturns a trial judge who had dismissed the complaint shortly before the scheduled trial…" https://www.cutimes.com/2020/06/22/san-diego-county-cu-must-face-claim-over-website-accessibility-court-rules/ Martinez v. San Diego County Credit Union Decision (PDF) http://sos.metnews.com/sos.cgi?0620//D075360 Correction: Last week the "Key Considerations for Flowchart Accessibility" article By Minnesota IT Services had the wrong URL. It should have have been: https://mn.gov/mnit/media/blog/?id=38-436349 Apologies. +02: CASCADING STYLE SHEETS. Responsive Styling Using Attribute Selectors By Jakob Eriksen. "One of the challenges we face when implementing class-based atomic styling is that it often depends on a specific breakpoint for context…" https://css-tricks.com/responsive-styling-using-attribute-selectors/ Grid Cheatsheet By @yoksel "A grid container establishes a new grid formatting context for its contents…" https://yoksel.github.io/grid-cheatsheet/ CSS background-repeat: round By David Walsh. "The CSS spec is full of gems that sneak their way past most of us web designers and developers. Stuff like :focus-within, prefers-reduced-motion, and prefers-color-scheme suddenly make their way into CSS without us really finding out for months or years. One such example is background-repeat: round…" https://davidwalsh.name/css-background-repeat-round Accordion Rows in CSS Grid By Eric A Meyer. "Another aspect of the meyerweb redesign I'd like to explore is the way I'm using CSS Grid rows to give myself more layout flexibility…" https://meyerweb.com/eric/thoughts/2020/07/01/accordion-rows-in-css-grid/ When Sass and New CSS Features Collide By Ana Tudor. "…this is going to be a post about the issues I've encountered, how I go around them, and why I still find Sass necessary these days…" https://css-tricks.com/when-sass-and-new-css-features-collide/ +03: COLOR. The Saga of Accessible Colors (Video) By Ted Drake. "I recently gave a presentation for Maxability about color contrast… http://www.last-child.com/accessible-colors-video/ +04: EVALUATION & TESTING. Embracing Top Tasks at Toyota (Part 2) By Gerry McGovern. "…Quality digital is more maintenance than creation. Yet digital has huge engines of creation and often nonexistent maintenance. And where maintenance and support do exist they are generally seen as low-level positions with low-level respect. That must change." https://gerrymcgovern.com/top-tasks-at-toyota-part-2/ +05: EVENTS. Cognitive Accessibility Considerations Brisbane web accessibility - Monthly Meetup July 7, 2020. Online https://www.meetup.com/Brisbane-Web-Accessibility/events/hpkdnrybckbkb/ Effective Wireframing July 9, 2020. Online https://www.nngroup.com/online-seminars/effective-wireframing-techniques/ Using Task-Oriented Walk Throughs for Accessibility Reviews July 14, 2020. Online https://www.meetup.com/A11yNYC/events/271624600/ Introduction to Assistive Technology from a Remote Perspective July 18, 2020. Online https://www.csun.edu/cod/webinars A11y Talks (July 2020): The Many Lives of a Notification July 23, 2020. https://groups.drupal.org/node/536011 Digital Accessibility: What Have we Learned and What does the Future Hold? July 23, 2020. Online https://adata.org/event/digital-accessibility-what-have-we-learned-and-what-does-future-hold UX Conference August August 10-21, 2020 Online. https://www.nngroup.com/training/august/ W3C Workshop on Web and Machine Learning September 2020 Series of 4 virtual live sessions https://www.w3.org/2020/06/machine-learning-workshop/ Smashing Conference Austin October 13-14, 2020. Austin, Texas, U.S.A. https://smashingconf.com/austin-2020/postponed The 5th Annual ICT Accessibility Testing Symposium Week of October 19, 2020. Online. https://2020ict.org/ +06: HTML. Accessible HTML Toggle Button (Switch) By Erik Kroes. "Everybody loves toggle switch on mobile, or so I've heard. But if you're building a website, how do you reproduce this without excluding people…" https://www.erikkroes.nl/blog/accessible-html-toggle-button-switch/ +07: INFORMATION ARCHITECTURE. Information And Information Architecture: The BIG Picture By Carrie Webster. "…how we use information, the power it yields, the sheer volume of data we have created, the impacts of information overload, and how information architecture can be used to organize and structure this information for those seeking it. There is no denying that in this age of Information why it is so important to focus on information architecture as a solid foundation for delivering the right information to your customers to make their lives easier." https://www.smashingmagazine.com/2020/07/information-architecture-big-picture/ +08: JAVASCRIPT. Introduction to Accessible Rich Internet Applications (ARIA) By WebAIM. "WebAIM article has been significantly updated with new information and resources." https://webaim.org/techniques/aria/ +09: MISCELLANEOUS. Design Thinking: An Introduction By Justin Mifsud. "Design thinking is a problem-solving framework that is ideal for tackling ill-defined or unknown problems…" https://usabilitygeek.com/design-thinking-an-introduction/ 33 Web Development Terms You May Not Have Heard Of By Jens Oliver Meiert. "Web Development has its own, special vocabulary that easily consists of several thousand terms. Even if you're an experienced developer you're unlikely to know all of them. Still, do you like to try your knowledge? How many of the following 33 terms * do you know…" https://meiert.com/en/blog/33-web-development-terms/ +10: NAVIGATION. Accessible and Keyboard-Friendly Hamburger Menu + Slide Out Navigation By Louis Lazaris. "This week I did some research to try to build a hamburger menu that opens a slide-out navigation panel, a common design pattern nowadays. But I wanted to ensure the whole thing was keyboard-friendly and as accessible as possible…" https://www.impressivewebs.com/accessible-keyboard-friendly-hamburger-menu-slide-out-navigation/ +11: TOOLS. ATAG Report Tool By W3C Accessibility Education and Outreach Working Group. "This tool helps evaluators report on the accessibility of authoring tools. It guides you through the Authoring Tool Accessibility Guidelines (ATAG) requirements, lets you record your evaluation results for each requirement, and generates a report of the authoring tool's ATAG conformance." https://www.w3.org/WAI/atag/report-tool/ Authoring Tool Accessibility Report Generator (keywords: CMS, ATAG, …) By Shawn Henry. ATAG Report Tool announcement. https://lists.w3.org/Archives/Public/public-wai-announce/2020AprJun/0006.html +12: USABILITY. Avoid PDF for On-Screen Reading By Jakob Nielsen and Anna Kale. "Forcing users to browse PDF files causes frustration and slow task completion, compared to standard webpages. Use PDF only for documents that users will print. In those cases, following 10 basic guidelines will minimize usability problems." https://www.nngroup.com/articles/avoid-pdf-for-on-screen-reading/ A Bad User Interface Is A Cranky Receptionist By Roxanne Abercrombie. "…your user interface is the face of your company. Do not make yours miserable." https://usabilitygeek.com/bad-user-interface-cranky-receptionist/ 5 Tips For Improving Your UX Writing By Sean McGowan. "…Do not Shunt It To The Copywriter…Incorporate UX Writing Into Discoverys…Be Concise…Embrace The Cliché…Using Proper Pronouns…" https://usabilitygeek.com/tips-for-improving-ux-writing-skills/ 5 'Credit Card Form' Implementations That Make L.L. Bean Best-in-Class By Rebecca Hugo. "Despite credit card details being a commonly typed input on e-commerce sites, and despite the fact that they only constitute a small part of the overall amount of typing users have to do during the checkout flow, our 11 years of testing checkout flows reveal that the 3-5 credit card form fields are by far the most complex and error-prone input during checkout…" https://baymard.com/blog/credit-card-form-ux-llbean Emojis in Email Subject Lines: Advantage or Impediment? By Kim Flaherty. "Our research shows that emojis in subject lines increase negative sentiment toward an email and do not increase the likelihood of an email being opened." https://www.nngroup.com/articles/emojis-email/ [Section one ends.] ++ SECTION TWO: +13: What Can You Find at the Web Design Reference Site? Accessibility Information. http://www.d.umn.edu/itss/training/online/webdesign/accessibility.html Association Information. http://www.d.umn.edu/itss/training/online/webdesign/associations.html Book Listings. http://www.d.umn.edu/itss/training/online/webdesign/books.html Cascading Style Sheets Information. http://www.d.umn.edu/itss/training/online/webdesign/css.html Color Information. http://www.d.umn.edu/itss/training/online/webdesign/color.html Drupal Information. http://www.d.umn.edu/itss/training/online/webdesign/drupal.html Evaluation & Testing Information. http://www.d.umn.edu/itss/training/online/webdesign/testing.html Event Information. http://www.d.umn.edu/itss/training/online/webdesign/events.html HTML Information. http://www.d.umn.edu/itss/training/online/webdesign/html.html Information Architecture Information. http://www.d.umn.edu/itss/training/online/webdesign/architecture.html JavaScript Information. http://www.d.umn.edu/itss/training/online/webdesign/javascript.html Miscellaneous Web Information. http://www.d.umn.edu/itss/training/online/webdesign/misc.html Navigation Information. http://www.d.umn.edu/itss/training/online/webdesign/navigation.html PHP Information. http://www.d.umn.edu/itss/training/online/webdesign/php.html Sites & Blogs Listing. http://www.d.umn.edu/itss/training/online/webdesign/sites.html Standards, Guidelines & Pattern Information. http://www.d.umn.edu/itss/training/online/webdesign/standards.html Tool Information. http://www.d.umn.edu/itss/training/online/webdesign/tools.html Typography Information. http://www.d.umn.edu/itss/training/online/webdesign/type.html Usability Information. http://www.d.umn.edu/itss/training/online/webdesign/usability.html XML Information. http://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: http://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.]