Dear Friend,
Accessibility has often been considered an afterthought. For years, it was an extra effort that sometimes was added on top of a finished product to ensure compliance. We've learned that it's much easier to consider accessibility early on to avoid costs and maintenance issues down the line.
Yet when creating accessible products, it's really difficult to foresee a wide range of situations in which our users might find themselves in. To many of us, ARIA seems to be mysterious, and in time of single-page applications, it's quite difficult to know where and how accessibility fits in. We need to build robust and reliable solutions in a world that's inherently chaotic and unpredictable. How do we even start?
We start by looking at components we use frequently: the good old accordion, the mega-dropdown, the tables, the tooltips, the notifications. And then we build out from there. With accessible components in place, we can ensure a decent foundation to start with, without making the same mistakes others have done.
At its heart, our new book, "Inclusive Components", is just a collection of inclusive, accessible, tested components you can use in your projects right away. It examines 12 common interface patterns — accordions, tables, modals, notifications, tabs, toggles, and everything in-between — through the lens of inclusion. Heydon Pickering goes deep into details explaining the whys and the hows, making accessibility more approachable and friendly for developers.
We hope that by publishing the book, we, as a community, can better understand and apply accessibility to our products. You can start reading the eBook right away, and you can get the printed book as well (shipping starts early December). Also, jump to the table of contents.
P.S. By the way, we have free live session on accessibility with Harris Schneiderman who'll be looking into how to translate design wireframes into accessible HTML/CSS. We'd love to see you there!
Happy reading, everyone!
— Vitaly (@smashingmag)
Table of Contents
1. Designing Accessible Color Systems
Getting color contrast right is an essential part of making sure that not only people with visual impairments can easily use your product but also everyone else when they are in low-light environments or using older screens. However, if you've ever tried to create an accessible color system yourself, you probably know that this can be quite a challenge.
The team at Stripe recently decided to tackle the challenge and redesign their existing color system. The benefits it should provide out of the box: pass accessibility guidelines, use clear and vibrant hues that users can easily distinguish from one another, and have a consistent visual weight without a color appearing to take priority over another. If you're curious to find out more about their approach, their blog post will give you valuable insights. (cm)
2. JavaScript Frameworks Security Report 2019
The folks at Snyk published their state of JavaScript frameworks security report for 2019. It investigates the state of security for the Angular and React ecosystems as well as security practices for the popular JavaScript frameworks Vue.js, Bootstrap, and jQuery.
Given the fact that Angular and React both have their proponents with ongoing discussions whether one or the other is a true framework, the report doesn't intend to venture into rivalries but reviews each of them as viable front-end ecosystem alternatives, while focusing on security risks and best practices and the differences between them. A must-read. (cm)
3. Introducing The Smashing Podcast
What's that strange sound in your ears? It's the brand new Smashing Podcast, which started last week! We kicked off with two episodes — each catches you up on the latest from Smashing Magazine and has an interview with an industry expert on a specific topic.
In the first episode, our host Drew McLellan speaks to Andy Clarke about his book Art Direction For The Web, and finds out how art direction can be applied to our own web design projects. The second episode is all about running a freelance business. We talk with experienced freelancer Liz Elcoate about juggling your time, writing proposals, and managing your mental health while running a one-person business.
A new episode of Smashing Podcast is available every two weeks and you can subscribe in a podcast player of your choice. (dm)
From our sponsor
Grow your agency with DigitalOcean
See why web development agencies love hosting client apps & sites on DigitalOcean's cloud platform. They make it simple to deploy and manage your clients' infrastructure. Save time, resources, and headaches while passing the value onto your clients. Try out DigitalOcean with a $50 credit for agencies today!
4. Open-Source Tutorials For Learning GraphQL
GraphQL enables a client to specify exactly what data it needs from an API, so instead of multiple endpoints that return fixed data structures, a GraphQL server exposes a single endpoint and responds with precisely the data a client asked for. If you want to wrap your head around GraphQL, here are two great resources to get you started.
How to GraphQL is a free open-source tutorial to take your GraphQL skills from zero to production. Divided up into two parts, part one covers the core concepts of GraphQL while part two gives you a broader understanding of the GraphQL ecosystem. The other learning resource comes from the makers of the GraphQL engine Hasura: three open-source community-maintained tutorials (front-end, mobile, and back-end tutorials) teach you GraphQL to get you ready to build a real-time application in two hours. (cm)
5. Digital Wellbeing Experiments
Everyone has a different relationship with their phones, but we all have something in common: There are always those moments when it feels that phones distract from life rather than improve it — when having dinner with friends and everyone checks their incoming notifications, for example.
With their Digital Wellbeing Experiments, Google now showcases ideas and tools that help people find a better balance with technology and inspire designers and developers to consider digital wellbeing in everything they design and build. There are experiments that let you switch off from technology as a group, for example, stay focused by getting the right apps at the right times, or take the most important things with you on a printed "paper phone". The code for the experiments is open-source, and if you have an idea for a digital wellbeing experiment, the Hack Pack will help you bring it to life. (cm)
From our sponsor
Get Angular Code from Sketch Designs with Indigo.design
Indigo Design is a unified platform for visual design, UX prototyping, code generation and app development that keep your teams productive in the tools
they love. Create the best-in-class UI designs using components & UX patterns in the expressive
Indigo Design System with Sketch UI Kits. With the click of a button, generate high-quality HTML, CSS, and Angular code from your design with no compromise.
Sign up for free.
6. Recursive: A Free Highly-Flexible Variable Font
A font that gives you typographic control over five stylistic axes and can go from Sans to Mono? The variable font Recursive makes it possible, offering an entirely new level of flexibility.
Taking full advantage of variable font technology, Recursive enables you to choose from a wide range of predefined styles or dial in exactly what you want for each of its axes. Inspiration came from single-stroke casual signpainting to give the font a flexible and energetic look, making it a great fit for data-rich-apps, technical documentation, code editors, and much more. Please note that Recursive is still under active development and will soon be available through Google Fonts. A beta version is already available. (cm)
7. Fixing Image Orientation
Image orientation on the web is, well, complicated. When Michael Scharnagl worked on a side project, he noticed that the images he uploaded to his server were shown in the wrong orientation. Now he wrote a blog post in which he dives deeper into the issue and how to fix it.
The reason for portrait images being displayed in landscape mode when they are embedded using <img> or background-image is the EXIF data for the image. How a browser deals with EXIF orientation depends on the browser, and there's no cross-browser way to easily correct it either. Michael's Node.js fix helps you correct the orientation. A handy little tip. (cm)
From our sponsor
Online Masters in Information Design and Strategy
Earn your master's degree online.
8. Upcoming In Smashing Membership
Last week, we pre-released Heydon Pickering's brand new book Inclusive Components. The eBook version is and always will be free for Smashing Members, of course. Check your dashboard to download it.
We are also looking into a slightly more interactive format for our Smashing TV sessions. We kindly invite you to submit your questions or actual mock-ups of your work in the Membership channel (#tv), so our speakers can review and provide feedback to your current projects — live!
Here's the list of new webinars coming up soon:
Dear friends, thank you for your kind support. It allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. Join us in Smashingland where everyone is beautiful and you never get merge conflicts. 😉
9. New On Smashing Job Board
- UI/UX Design Mentor (Part-Time/Remote) at Springboard (Remote)
"If you are as passionate about mentoring as you are about UX and UI, and can give a few hours per week in return for an honorarium, we would love to hear from you." - Product Manager Integrations at VONQ (Rotterdam, The Netherlands)
"Being a Product Manager at VONQ means making an impact and seeing your work come to life. Are you ready to be part of our journey and make great things even better?" - UX Designer at VONQ (Rotterdam, The Netherlands)
"As a UX designer, you will play a critical role in defining our core platform experiences."
10. Our Next Smashing Workshops
In our workshops, we are looking into the current state of front-end and interface design, covering advanced challenges and actual real-life solutions to front-end problems. Coming up next:
- 🇮🇱 UX Salon (Nov. 13–14) in Jerusalem/Haifa, Israel.
- 🇱🇹 UX Salon (Nov. 19) in Vilnius, Lithuania.
- 🇮🇹 Speaking Of (Nov. 28-29) in Milano, Italy.
Or, if you'd like to run an in-house workshop at your office, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you're facing and would like to solve. Get in touch — it's that easy! (vf)
11. Our Most Popular Articles
This newsletter issue was written and researched by Cosima Mielke, Iris Lješnjanin, Rachel Andrew, Vitaly Friedman and Christiane Rosenberger.
Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.
Follow us on Twitter • Join us on Facebook
0 коммент.: