Working Style for Ted Drake

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.
What's that?
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

Productivity Hours

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.

Communication

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.

Availability

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.

 

 

The Saga of Accessible Colors – Video and Slides

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.

Slides

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.

WebAim 1 Million

86.3% of screens had low-contrast text.

Diamond’s State of the Accessibility Report (.pdf), released for Global Accessibilty Awareness Day 2020, highlights 85% of pages have low contrast as determined by automated testing

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.

QQ.com

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

Color Challenges

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.

4 form inputs with various text contrast options
Four different options for presenting values and descriptive text.

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.

Visual Hierarchy

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
  • Typographic Hierarchy
  • Spacing, Proximity, and Negative Space
  • Alignment
  • Repetition

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:

  • Normal: #3344dd
  • Hover/Focus/Active: #bb1122
  • Visited: #884488

Don’t Depend on Color


a:visited:after { 
    content:"\2713";
}

Color Strategies

There’s more to inclusive design than color 

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.

Color Prioritization

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

Action items

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
  • Prioritize below 3:1
    • Provide clear strategies to PM
  • Listen to your customers
    • Prioritize their complaints
  • Empower Inclusive Design
    • Don’t depend on color
    • Get involved early in color branding discussions
  • Bring Designers and Engineers together.

Explore Intersectionality Resources for Inclusive Design

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.

Organizations and resources to explore

Continue reading “Explore Intersectionality Resources for Inclusive Design”

Artificial Intelligence and Accessibility – GAAD 2020 – Hello A11y

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

Today’s agenda

  • Machine Learning vs. Artificial Intelligence
  • Recent evolution
  • Where do we go from here
  • Key Trends in AI for Accessibility

Machine Learning and Artificial Intelligence

Machine Learning

Computer learns from exploring data, discovering connections, and solving a problem.

Car learns how to analyze risks in an intersection

Artificial Intelligence

Computer takes initiative to do something based on what it has learned.

Car takes corrective actions to avoid an accident.

A.I. is not special

Anyone can work on A.I.

Where do we go from here?

Make it Simple

Apple Watch Detection

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

Make it Affordable

Detecting Dyslexia and Autism

Change Dyslexia’s Dytective game can detect a child’s risk of having dyslexia. A collaboration of researchers in Europe have created a method to diagnose autism by tracking the person’s eye movements within a web page. These AI-driven tools allow earlier diagnosis and treatment with minimal costs.

Independent Developers

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

QuickBooks Capital

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.

Android Live Transcribe

Android’s Live Transcribe brings live captioning to Android phones. It supports 70 languages and uses the device’s neural network to complete the speech to text transcription without being dependent on a network connection. Google has also introduced sound detection and archived transcriptions. They also recently open sourced the project to encourage transcription integration in more products.

Make it Awesome

Indoor Navigation via computer vision

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.

Learn More

Open Government Data – A virtual revolution

Archived page from Yahoo! Developer Network

Anand Joshi and I wrote this for the Yahoo! Developer Network back in 2010. Unfortunately, the post has been lost due to YDN platform changes. It can still be found on the Internet Archive: Open Government Data – A virtual revolution. I’m republishing this to avoid breaking the web.

June 4, 2010

Open Government Data – A virtual revolution

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.

Screenshot of Data.Gov
Continue reading “Open Government Data – A virtual revolution”