Creating a working style guide is common for people with disabilities to describe their working style and promote greater efficiency. The style guides can explain communication preferences, assistive technology usage, flexible work hours, requirements for mental and physical health, and how they approach new projects. The working style guide may highlight areas of strength, weaknesses, and distractions.
Working style guides promote transparency within the workplace. The goal is to eliminate friction when a manager or co-worker makes a request or takes an action that is inappropriate.
Just as personal pronoun usage has extended beyond the trans-community, the remote workplace during COVID-19 has also increased the need for everyone to create a style guide. This should also include relevant information about your home/family. For instance, you may have unexpected sounds in the background: you have a dog that barks at the doorbell, you have a child that vocalizes, the neighbor is a musician. You may be sharing Zoom-friendly space with family members and need to coordinate with their calendar.
Working Style for Ted Drake
I am a morning person. I prefer to start working early to prepare for the day. My creativity, energy, and mental acuity is best before 11:00. I prefer to have meetings in the afternoon to avoid distractions during this key period.
Afternoons are my weakest moments from a cognitive perspective. I tend to do “busy work” from 3-6. This includes bug reviews, clearing email/slack, invoices, etc. I am not productive during this period for writing creative pieces.
I also tend to work long hours, it’s not uncommon to be online and working until 9:00 pm. It is ok to message me if you see I am online. I am happy to meet with teams in India during the evenings.
I prefer written communication via email, Slack, and Twitter over phone calls. I have a desk phone number, but haven’t checked it since we left the office in March. I don’t visit LinkedIn very often, so responses can be slow.
I had a manager at Yahoo, Jeff Boulter, who enforced efficient messaging. Please don’t send a message that says “Hi Ted”, send a message that says “Hi Ted, I have a question about using aria-expanded in accordions”. This type of introduction saves both of us a lot of time.
Zoom and Teleconferencing
I prefer Zoom for teleconferencing, but am also available on BlueJeans and Skype. I will typically turn off my microphone when not speaking to avoid unnecessary noise. I typically have my video turned on with a custom background.
I will enable live captioning when available and archive recorded meetings with closed captions. I have basic knowledge of American Sign Language, but I am not fluent.
I try to be available and often tell people to feel free sending me a message. There are times of the year that I get extremely busy and may not respond immediately. My philosophy is put something on a calendar and we’ll make it happen. That’s worked really well for conferences, meetings, and such.
I’ve been in the accessibility community for a long time and wouldn’t be here without my mentors. So I also like to share my experience with others. Don’t be offended if you sent a request and I didn’t reply, it probably came at a time that I was swamped.
I recently gave a presentation for Maxability about color contrast. This is a complex topic and could never be fully covered in one hour. I hoped to bring some understanding of why we still have problems with color contrast, understanding why designers may use a color that doesn’t meet color contrast requirements, and strategies to build better products.
The Saga of Accessible Colors
Muwekma Ohlone People
“I want to respectfully acknowledge the Muwekma Ohlone People, who have stewarded this land (San Francisco) throughout the generations.”
Accessible Color Contrast
What is your reaction?
Color Contrast for Designers
Designers can have a negative reaction to color contrast conversations. Especially when the designer is limited by a company approved set of colors and they don’t have the power to make arbitrary changes. It’s important for accessibility teams to empower designers by emphasizing what they do have power to control, such as naming, accessible text descriptions, focus management, keyboard interaction design, typography, and more. Identify where colors can be improved within the approved color palette. Many times the low-contrast color is a non-standard, perhaps outdated choice. It’s also important to focus color contrast changes within the greater color conversations and include color-blindness, dyslexia, and dark mode/high contrast considerations.
Color Contrast for Developers
Developers don’t have much control over color contrast. It’s important to educate developers about color contrast and give them the power to question designs that promote low-contrast colors. They should have the confidence to go back to the design team for a specification that uses good color contrast.
Color Contrast for PMs
Color contrast is just one of many competing requirements for project managers. While they may be supportive, they are also juggling resources and need to know what their team can control. They may not be able to change the company’s color branding, but they can prioritize issues that are relevant for their screens, such as an incorrect use of light grey where it should be dark grey.
Color Contrast for Users
Your customers need adequate color contrast. They are complaining when designs include low-contrast colors. You may not hear the complements when a site uses adequate colors, becuase it just works. And isn’t that our goal?
4.5:1 Battle Cry
Color contrast requirements are based on a specific ration of foreground text and background color. Standard text needs to have 4.5:1 color contrast. Large text can have 3:1 color contrast. This is not a perfect measurement, but it does provide a solid standard and ensures people with low-vision, cracked phone screens, dirty monitors, and someone checking their emails outside a coffee shop can read their screens without undue stress.
This was the analysis done by the WebAim 1 million. It’s a horrible number, but is it as bad it sounds? I did an evaluation of Intuit’s home page and several sites listed in the Alexa top 10 to see what was being highlighted as low contrast.
Intuit Home Page.
There are two areas identified as having low contrast. One section has good contrast, but there was an animation as the page loaded. This was identifed as having four issues. Another section was below the fold and had a white heading on a light grey background. As the user scrolls, the light grey background was replaced with a dark image, which provides adequate contrast. The solution, for both of these is to not depend on background images and include an adequate contrast when the image is not present.
Google Home Page
The Google home page has a single "." that is white on a white background. It’s probably used for performance tracking and is not meant to be discovered by the customer. It also includes aria-hidden="true" to remove it from the Accessibility API.
YouTube Home Page
The YouTube home page has a lot of content. But the trademark string at the bottom of the page uses 3.19:1. This is an error, it should be 4.5:1. But it’s a small percentage of the content.
This popular site in China has a lot of color contrast issues. Wave found 81 issues and Axe found 67. There’s a lot of room for improvement, especially with medium blue content on light blue background. But there majority of the issues are above 4.4:1. This is still an error, but not as bad as a page full of 3:1 and below.
Automated Testing Doesn’t Tell The Whole Story
* This is not an excuse to design with inaccessible colors
Goals For Today
Understand Overlapping requirements
Explore Conflicting User Experiences
Learn strategies for moving forward
Call to Action buttons
Readable vs. Actionable
Intuit uses Orange for primary call to action buttons. The current orange does not provide 4.5:1 color contrat.. Orange gets muddy at 4.5:1
But orange provides visual contrast against blue/black typography. The orange button creates a clear call to action, which is important for some customers:
The TurboTax team is investigating options to replace the orange button. They’ve added a color theme that switches the orange button for an accessible blue button. But this has some tradeoffs. The blue button matches the page’s colors and doesn’t stand out as the clear call to action. They ran tests, via UserTesting.com to test the actionable nature of the buttons. While the blue buttons are more readable, people with low vision and color-blindness had a slight preferance for the orange buttons.
Warm colors, such as orange, advance on the screen. Whereas cool colors, such as blue recede on the screen. This is one reason why orange call to action buttons have great strength
White vs Black Text on colored backgrounds
The Myths of Color Contrast Accessibility suggested low contrast text, i.e. white on medium blue, is more readable than high contrast text, black on medium blue. This was countered in There is no “Myths of Color Contrast Accessibility” by Geoffrey Crofte. Crofte points out the examples were limited, the blue could have been an accessible color, and the color of the background page impacts the readability of the button text. In short, the original post gave a popular argument for using low-contrast, but this was not sufficient to defend design decisions.
Defending low contrast decisions
Call to action buttons are an example of a low-contrast design decision that could be solved with a different color choice. In fact, the team is investigating several color options that provide accessible contrast and visual separation. There are times when a lower contrast choice can be defended.
Intuit’s goal is to reduce the customer’s need to enter data. To this end, we use artificial intelligence to prepopulate form data. This can significantly increase the efficiency of creating a tax return or sending an invoice to a customer. But this brings up the conflict between inputs that have pre-filled data and placeholders. Customers found it confusing when forms had a combination of inputs with data and placeholders, they tended to skip the inputs with placeholders, as they looked like values. So Intuit uses a lower contrast placeholder color. It’s marginal on readability, but reduces the confusion between what is a value and what is a placeholder. Ultimately, Intuit’s Design System prioritizes moving the placeholder text out of the input and using a secondary string below the input. This removes the potential of confusion and makes the descriptive text available to everyone. We also use aria-describedby to surface that additional information to screen readers when the input has focus.
Low contrast placeholder text also makes it critical to not use placeholders as form input labels. They are meant to be suggestions, not labels.
Designers use visual hierarchy to define what sections of a screen are the most important, secondary, and least important. This is accomplished with:
Size and Scale
Color and Contrast
Spacing, Proximity, and Negative Space
It’s common to place a light background color on tertiary information, such as a footer. But be careful, that body link color may not have enough contrast when placed on a background color. This should be accounted for in the color branding decisions.
Overlapping Link Requirements
Links have multiple contrast requirements. The text always needs to be 4.5:1 against the background color. It’s become a design standard to remove the underline on a link. This means the color is the only signifier between a link and body text. When color is the only difference, we need a 3:1 contrast ratio between the link (blue) and the body text (black). Technique G183, which states, “Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them.”
We also need to make sure a user can scan a page and know which links have been visited, focused, active, or have a mouse hover. This complicates the color choices when color is the only differentiator. Jared Smith explained this complexity in his article: WCAG 2.0 and Link Colors. His color selections are:
Don’t alienate your design teams by only focusing on color. That is just one aspect of inclusive design and you risk alienating them. Especially when limited to an official color palette. Focus on empowering designers to consider the full spectrum of inclusive design and make yourself a resource, not a thorn in their side.
Listen to your customers
How to find valuable accessibility feedback in Slack
Designers Love Grey
Recognize the allure of grey text. You need to understand why designers reach for the low-contrast designs to have the correct vocabulary and work towards a color theme that works for everyone. Here are some articles about grey text for your research.
All color contrast issues need to be addressed. But some issues can be prioritized with project managers. Obvious changes, for instance older pages that still have grey on grey links in the footer, can be updated without much challenge. This is especially true if the older pages do not meet updated color palettes.
Simply Unreadable Text
Anything less than 2:1 is unacceptable and needs to be prioritized. Even if it represents a disabled element. This content is not readable.
Content that falls between 2:1 and 3:1 requires design justification. For instance, it is a disabled button or placeholder text. If the design needs to be updated if there’s insufficient justification.
Start a conversation
Determine why content uses something between 3:1 and 4:1.
Is it a heading?
Is it disabled?
Is it an icon or logo?
Because that’s what others are doing?
There are valid reasons for this contrast, but check to see what needs updating.
Why is contrast between 4:1 and 4.5:1? In many ways, these are the elements that take the longest to fix. Focus on what causes this and how they can be updated:
A branding color that didn’t consider accessibility
An adequate link color that fails when on a background color
A background gradient
A color that doesn’t meet the color palette
This presentation explored the potential of automated testing, working with different team members, and how to prioritize your color contrast improvements. Here are your action items moving forward:
Automated testing is great, but doesn’t provide scale
Inclusive Design includes more than recognizing challenges for our customers with a disability. It also recognizes the intersections between ability, race, gender, socioeconomic, and family dynamics. Including diverse voices in your product design and customer interviews will lead to greater products that support all of our customers.
Artificial Intelligence and Accessibility for Global Accessibility Awareness Day 2020
Machine learning and artificial intelligence are keywords used to describe the process of building complex interactions based on large amounts of data. While the industry has been evolving steadily since the 1950’s, we are now at a point where there’s universal access to the technology. This has had a great impact on assistive technology and how we build solutions for today and strategies for the future. This presentation was created for the Hello A11y conference to celebrate Global Accessibility Awareness Day 2020
Machine Learning vs. Artificial Intelligence
Where do we go from here
Key Trends in AI for Accessibility
Machine Learning and Artificial Intelligence
Computer learns from exploring data, discovering connections, and solving a problem.
Car learns how to analyze risks in an intersection
Computer takes initiative to do something based on what it has learned.
Car takes corrective actions to avoid an accident.
The Apple Watch contains two features that require no user input. The watch can detect irregular heartbeats and falls. In fact, not interacting with the screen is an interaction, for the fall monitoring it will send a request for help.
QuickBooks Mileage Tracking
QuickBooks Mobile app creates mileage reports. Simply give it location permission and it tracks start, finish, mileage, and provides potential expense deductions. You can be the driver or passenger. The average users finds 37% more expense deductions.
Make it Work
Seeing AI by Microsoft
Seeing AI is a great app from Microsoft. But much of it’s functionality, including: object detection, barcode scanner, facial recognition, and currency identification, can also be found with OrCam, Lookout, and other applications. But SeeingAI has a feature that makes it easier for people to successfully scan product barcodes. It uses AI to scan the object and detect the barcode before it is completely visible. It then gives audio directions to rotate the object until it can scan the code.
Safe Exit for All
Researchers at Wichita State University have developed Safe Exit For All. It’s an emergency exit navigation system which dynamically adjusts for danger zones. It provides customized directions based on the user’s disability, such as mobility or vision
Satya Panda and Dr. Bindu Sravani Nayak used open-source machine learning libraries and affordable data servers to create an application that can differentiate oral diseases based on multiple factors and simplify the process of diagnosis and treatment. This allows dentists to see more patients and increase treatment efficacy.They are an example of the democratization of ML/AI and niche projects that can be built by everyone.
Make it for Everyone
Unconscious bias is a significant barrier to small business funding. QuickBooks Capital analyzes 26 billion transactions and data points to provide loans based on a business’s ability to repay. 60% of customers say they didn’t qualify for loans before QuickBooks Capital.
Smith-Kettlewell Institute is researching the use of computer vision to provide indoor navigation without architectural additions, such as blue-tooth beacons. The project uses a combination of building layout drawings and recognizable landmarks, such as exit signs. It uses the phone’s camera and AI to determine the person’s location and to give step by step directions.
Clew is an app that uses computer vision to creat path tracing. A person would be guided from to a location. For instance going from a meeting room to the restroom. The mobile device would record the landmarks and create a path to lead the person back to their original starting point.
Voice Recognition for everyone
Mozilla’s Common Voice is an initiative to teach machines how real people speak. Volunteers are building a giant data set of voice recordings from all accents, languages, and speech ability. VoiceITT and Google’s Project Euphonia are focusing specifically on understanding dysarthric speech.
There’s a tremendous amount of government data available on the internet today. It’s an open data revolution led by the United States and the United Kingdom. This data ranges from the basic (crime, weather, finances, education) to the obscure (suicide rates, bicycle accidents). Through analysis, data can expose inefficiencies, corruption, geo-distributed social patterns, and successful policies. Data transparency flips the tables and gives citizens the tools to hold government more accountable.