axe-con 2022: Day Two

After an exciting first day of the conference, I feel full to the brim new information, but there's two days to go! Without further ado, here's my take on the talks from axe-con day two.

Navigating Institutional Barriers with #a12y

Speakers:
Seth Godin, Entrepreneur, best-selling author, and speaker
Liz Jackson, Speaker and founding member of the Disabled List

No, it's not a typo. While a11y is the standard abbreviation for accessibility, a12y is an abbreviation for accountability, which is a movement that speakers Seth and Liz want to spread in terms of products we build and projects we work on. They went over several different words that relate to institutional barriers and accountability, showing how we can look at different things that can hamper accountability. Some of these included community, status, authority, and affiliation. Long story short, it can be difficult to create an accessible product when dealing with politicized individuals and communities, people who have corporate affiliations and have to answer up the chain of command, and people who have a different status than our own. There are many things to consider in order to respect others but introduce new change. One of the things that resonated most with me was the idea that tension always comes before great change. They made an analogy of a rubber band being pulled back in order to be shot forward, which makes me think of how we need to stretch our own minds and perceptions in order to think in terms of great change, and maybe make others a little uncomfortable before they can learn and get on board. While this will have to be navigated on a project-by-project, client-by client-basis (even internally), the best thing we can do is remember the bigger picture and try to figure out where the people we're working with are coming from in order to best accommodate project and personal requirements.

A designer’s guide to documenting accessibility & user interactions

Speaker: Stéphanie Walter, Maltem Consulting Group, UX Researcher & Designer

I really appreciated this take on design documentation. While RDG has designers that are also front-end developers, more and more we are doing projects in React that are large and complex, requiring us to hand designs off to back-end developers who, unfortunately, can't read our minds for everything we didn't include in our designs. What's the focus state for buttons? Oh, I had this idea, but I never told you. What are accessible text to background color combinations for this other widget you didn't happen to mock up? Oh, these are the approved combinations. Stéphanie's method of documentation helped to not only answer a lot of questions about interactivity, but also broke it down in a way that is easy to digest in terms of elements and components, all with accessibility considerations included. To top it off, she has a detailed article about design documentation that contains valuable information and resources.

I liked the fact that her methods of documentation included both clean and annotated versions of site pages. I also liked that it helped to establish design and interactivity patterns beyond what's mocked up on specific pages. With those types of tools, developers can take the information and rules and apply them to any new widget or functionality, helping to ensure the product stays accessible and on brand. Hopefully we at RDG can come up with a template of our own that emulates this going forward!

Designing for cognitive disabilities

Tolu Adegbite, Shopify, Product Designer

This was yet another good talk about cognitive disabilities, and helped to prove that although nebulous in nature, there are some good standards of content creation that are shared by many in the industry. I think I chose to attend most if not all cognitive disability talks so I could learn more about it, since the ways to address that large user group were much less concrete to me than people with physical disabilities. Tolu provided some good rules to live by, whether you're a designer, developer, or content creator. Here were the main points of what we can do to create the best experiences for people with cognitive disabilities:

1. Use simple language: Tolu said a general rule of thumb is to aim for an 8th grade reading level. Avoiding unnecessary jargon helps people to read content without tripping up or getting distracted by words with definitions they're not confident they know. Also using descriptive page titles and doing your best to keep users from going somewhere else to understand the task in front of them can help set expectations and streamline understanding.
2. Reducing cognitive load: This deals with not overwhelming the among of working or short term memory someone is using to accomplish tasks. She brought up using placeholders as field labels in one such example, stating that it requires users to remember the purpose of fields as soon as they start filling them. I find this the perfect example, and something that I've had trouble with too. Placeholders. Are. Not. Field. Labels. Stop using them that way! She also brought up how that could apply to forms like disabled buttons. Disabled buttons without the aria-disabled attribute are skipped by screen readers altogether, and also don't often communicate why they're disabled. There are things we can do to reduce confusion and frustration that increases cognitive load, which improves user experience and reduces the chance of users leaving because the page or form unusable.
3. Use simple layouts: There's nothing I hate more than web pages that have dense copy and images that overhwelms you just by looking at it. While I don't like it, it can be literally impossible for some people with cognitive disabilities to decipher the page at all. Using whitespace to break content into meaningful sections can help remediate this, along with dividing tasks into short, easy steps that inform users what they need to know in advance.
4. Test: Conduct user testing with a wide variety of users, including those that are different types of neurodivergent.

There's a lot more to be said on this topic, especially regarding reducing cognitive load, but it would take me too long to go over all of it, so all I'll say is I definitely plan to incorporate several of Tolu's tips and tricks into my UX processes.

Modern CSS Upgrades To Improve Accessibility

Speaker: Stephanie Eckles, Microsoft, Software Engineer

This was a great practical talk that went over several WCAG criteria and some modern ways to address it. Most of the criteria discussed was bread and butter criteria for designers and front-end developers, but with insights on ways to improve our styling to achieve success. Here are the main criteria and takeaways:

1. WCAG 2.4.11 - Focus Appearance (Minimum): Focus appearance is part of WCAG 2.2, which we know is still in draft form. It's still a good idea to adhere to upcoming critera as best we can, and keep an eye out for potential changes. The main idea here is that we're encouraged to make the most significant change we can between resting and focused states, making sure we adhere to minimum area, contrast, and adjacent contrast criteria.

2. WCAG 2.4.3 - Focus Order: Focus order can be made easily confusing with styles nowadays, as we learned from yesterday's talk with Rachel Andrew. It was brought up again here by Stephanie, who advises us to be careful with things like absolute, fixed, or sticky positioning, flexbox and grid, masonry, and more. If the style update throws the tab order out of whack, it should be changed in the HTML.

3. 1.4.10 - Reflow: I liked the points that were made in this part of the talk. Reflow goes beyond responsive design. Most people think of reflow as responsive design that will work on a (mainly portrait orientation) phone. Truth is, people may be zooming in on a landscape desktop screen in order to interact with your content. So all those sticky fixed elements? They cover 100% of everything readable on a zoomed in landscape screen. Stephanie brought up ways to reframe our expectations, potential elements that can break our site reflow, and some ways to work responsively using min(), max(), and clamp(). This can assist with more fluid typography and spacing, optimizing our site in a more flexible way.

4. 2.3.1 - Motion Criteria and 2.3.3 - Animation from interactions: We already work to respect these at RDG, such as having transitions be restricted to when no-preference is set for the prefers-reduced-motion query. We also change the rules of autoplaying videos or in some cases replace motion content with static content when users have chosen to reduce motion. However, she brought up a valid point that just because people may not have their motion preference set doesn't mean they're okay with motion, so we still have to be careful when we design motion and movement for our digital products.

5. 1.4.3 - Contrast (minimum): This can open up a whole can of worms depending on what preference media queries you utilize. The main takeaway is to always be cognizant of these values, whether you're in light mode, dark mode, and eventually less and more contrast (with the experimental prefers-contrast query) in the mix.

I think what excites me most is experimenting with clamp(). There are many times working with a responsive design when, at areas near breakpoints, the site isn't quite optimized or looks a little odd as far as padding and spacing goes. Coming up with a solid fluid pattern would go a long way to easing the visual tension around those breakpoints!

Abilities Design: A new framework to brainstorm ideas for accessible solutions

Speaker: John L. O’Neill, University of Minnesota Duluth, Assistant Professor of Graphic Design

John was obviously incredibly passionate about his students and work. I really enjoyed seeing how his students took his abilities design method and used it to create innovated branded experiences and products. I loved his concept of abilities design as well, which seeks to take the best parts of Universal Design, Universal Design for Learning, and Inclusive design and incorporate them into our design processes. That way we can try to come up with products that do their best to address the needs of the audience, no matter their circumstance. I wouldn't mind joining his class on all the aspects of disability studies, either! Learning about it from the angles of political science, ableism, community studies and others in addition to design sounds really intriguing. I applaud his intention and work to destigmatize people with disabilities as other, separate, or requiring an ally. The effectiveness of his methodology came out in some great student projects, like a way to enable people with physical differences to still go on hikes. Reminds me of pushes my own school, the design program at Ferris made to move the design industry into the future. 

Fix Your Error Flows, Or Send Me More Spoons

Speaker: Shell Little, Independent Consultant

This may be my favorite talk of the conference, but we still have a day left, so we'll see! This talk was centered around forms in terms of people with cognitive disabilities. The analogy of the spoon theory is that people may be given the same number of 'spoons' to complete tasks in their day, but for those with cognitive disabilities (including mental health issues), it may take more spoons to accomplish the same tasks as someone without those same cognitive differences. Things that affect how many spoons we have or how many spoons it takes to accomplish a task is on a sliding scale, and when we don't have enough spoons that's when we make sacrifices, such as paying for a ride instead of driving, buying takeout instead of making dinner, or abandoning online forms that are necessary to complete. I really appreciated this take on how to view frustration with tasks, as it applies to everyone in one way or another.

Shell covered some common assistive technologies used to assist with forms, like autofill and alternative logins, and ways we can improve the accuracy and efficiency of forms. Forms that have a maximum of four questions per step, for example, can increase retention up to 26%. In fact, improving forms and experiences centered around checkouts reduced form abandonment by about 35%, which translates to $260 billion in recoverable orders. E-commerce aside, improving form experiences can also make necessary functions easier, like filling out health related forms, job applications, or student FAFSAs.

Shell had countless great tips and tricks on how to improve form experiences to reduce errors and properly guide users through resolving them. I for one can't wait to brush up on some forms for some of our clients!

Augment Your Design Practice For Inclusion: Five Best Practices

Speaker: Gina Bhawalkar, Forrester, Analyst

Gina shared some astounding statistics regarding the growing commitment to accessibility by companies, along with a 78% increase in jobs with "accessibility in the title over the last year. Here's a breakdown of her five best practices for augmenting our design practices for inclusion:

1. Start with your team: there can be many reasons for misunderstandings or underlying tensions among coworkers. We can help to minimize that by being more up front and sharing details on who we are and how we work and collaborate best. We can also strengthen collaboration between different parts of the team, such as design, development, and testing.
2. Focus on inclusive language: This is more than using simple language without jargon. It seeking to craft our words with consideration to all walks of life, including race, socioeconomic status, etc. Writing content in an inclusive way also increases positive perception and customer attraction/retention, so it's good news all around.
3. Integrate accessibility into your procurement process: This one isn't as applicable to RDG in terms of products, but we do work with third-party libraries enough that it has some relevant value. For us, we should be making sure that anything we use is evaluated for accessibility, from any UI that is provided to documentation. Commitment to accessibility is apparent in good vendors through their site language, reviews, and responsiveness.
4. Identify and address bias in your research sample and personas: We should make sure to include personas that run the gamut of different abilities, and make sure we're not making our audience too narrow by only sampling those considered abled or neurotypical.
5. Include people with disabilities as partners in your design process: I would love to do more of this. This means bringing people in during research and design phases and not waiting until building a product to test, as that uncover expensive remediations that could have been eliminated in their infancy. I would love to find some partners to work with during our design process to gain new insight.

Conclusion Day Two

Whew! Today was a great day for learning about different ways to improve design processes as well as practical methods to incorporate accessibility into my front-end work. Only one day to go. Check out my findings on day three of the conference if you're still hanging in there with me!