Accommodations for Binocular Dysfunction

Eve_Cook · June 6, 2023, 5:00pm

Hello all,

I have a visual disability called binocular dysfunction, which is where my eyes aren’t coordinated with each other at varying degrees. Meaning, I can’t correlate words that are spread out from each other on a page very well without some type of attached relationship (i.e. colors or a clear, defined line - not grey, but black, blue, purple, anything dark, or on dark themes white - at the very least).

This is a condition that is only helped with prism lenses and/or vision therapy, both which are temporary fixes for a lifelong problem.

Working with Asana (and honestly any productivity tool that does this) with no ability to change the colors or have varying colors from one line (think Google Sheets alternating colors on lines) to the next makes being able to discern my tasks incredibly difficult, especially when there are several things on my screen.

Are there any thoughts or considerations to creating custom themes for Asana? There are no scripts or themes that I’ve found that are capable of doing this, and I’m not capable of/knowledgable enough to code it myself.

Thank you for your time and consideration.

lpb · June 7, 2023, 5:55am

Welcome, @Eve_Cook, and sorry this is not natively available.

@anon18872388, @anon61287267, @ShunS, @Skyler, @Bastien_Siebman: You’ve each mentioned that you’ve done CSS changes using a browser extension to inject CSS, or other means. Any chance this is not too hard a request and you might be able to help?

Also Eve, please scroll to the top of this thread and click the purple Vote button.

Thanks,

Larry

Bastien_Siebman · June 7, 2023, 6:57am

Yes with a Chrome extension like Stylebot a developer like myself could create a custom theme for your Asana. Are you allowed to use Chrome?

I’d love to help, but hard for me to tell how extensive the changes have to be. Do you have a couple of examples for changes which would have to be made?

Skyler · June 8, 2023, 12:47am

Happy to partner up on things and help out if ya want @Bastien_Siebman - I’ve had to make a lot of changes to mitigate my own accessibility issues.

We can work with any Chromium based browser or Safari.

Bastien_Siebman · June 8, 2023, 7:12am

Awesome, let’s see what @Eve_Cook needs.

Eve_Cook · June 8, 2023, 8:03am

Hello - thank you all so much for all of the responses and willingness to help!

I’ve been trying to use stylish, but it only does so much and a lot of themes are defunct. So I really appreciate this…it really negatively impacts how well I can work. I can use Chrome or Firefox, thankfully, so I have some flexibility.

On the task list, in the dark version, the lines are like a light Grey. If the lines were white, that would help. Or, in contrast, if the lines and text would be black on a white background, that would work too.

An example:

I would love to apply this to the card boards, but I would be happy enough with this applied to the task list. The other elements, like due date, task assignee, etc., would be great in the same style, but I’m not particularly picky about those. I mostly want to be able to follow some kind of line of color to locate the associated rows correctly together.

The biggest thing that prompted this was the fact that I accidentally deleted a due date from the wrong row, and didn’t even realize I did it, and I messed up someone’s workflow.

Any thoughts on the above?

Thank you again!

Bastien_Siebman · June 8, 2023, 1:45pm

Something like this?

Eve_Cook · June 8, 2023, 2:23pm

Yes, that would be perfect! I love how clean that is, too. Do you know if the inverse is possible as well? That can help sometimes with visual fatigue, though I try to wear glasses that reduce that as much as possible, so if it isn’t that’s totally fine.

I haven’t had an opportunity to look into Stylebot to see if I can figure out how to do these things as well (this week has been incredibly busy…not sure what is in the air), so if this is terribly easy or already exists I apologize!

Bastien_Siebman · June 8, 2023, 2:48pm

Something closer to this?

Code so far


.FullWidthPageStructureWithDetailsOverlay {
	background:black;
    color: white;
}
    
.SpreadsheetCell {
    border-color:white;
    background: black;
}

Eve_Cook · June 8, 2023, 4:42pm

Yes! I like that a lot. Do you think that hovering could show one or the other, whichever is chosen? So then it appears highlighted? I’m not sure how to word that. Does there also need to be different code for the top of the navigation to also appear in the same coloring, just so it matches?

Bastien_Siebman · June 9, 2023, 6:23am

The stylesheet will be static, we can’t really easily have this kind of behaviour. But we could create 2 stylesheets and you toggle one or the other.

It was quickly put together but we can indeed finish up the work and apply it to more places.

Let me know If I should keep going.

Eve_Cook · June 12, 2023, 4:24pm

Yes, please keep going! This is perfect.

Bastien_Siebman · June 17, 2023, 3:38pm

I am making good progress!

Eve_Cook · June 17, 2023, 6:23pm

This looks super, super good! I’ve had a chance to dip my toes into Stylebot and have been able to build styles that look decent, but likely need a LOT of revision because I have no idea what I’m doing beyond pointing and clicking. Would it be helpful for me to drop some of what I’ve developed to you and gathered your thoughts?

Bastien_Siebman · June 17, 2023, 6:46pm

If you have done some of the work yourself yes please share your code so I can integrate it!

Eve_Cook · June 17, 2023, 7:15pm

I’m building it out to be blue, just because I thought it might be pretty to experiment in (and I didn’t think I’d be sharing it with anyone – it was just me poking around), but I can redo it in black if you’d like me to provide something that’s exactly that. The blue works well for me, or the green.

What I’ve Worked On So Far

The white rounded bar at the top of the screenshot is just to cover the company name that’s associated with the project, but it’s the simple blue background with just white as the text. I have the most trouble fiddling with pop-up dropdowns, to be honest.

Bastien_Siebman · June 28, 2023, 9:29am

I am just doing this to help you and then share with others, so you decide ^^

Bastien_Siebman · July 15, 2023, 9:03am

@Eve_Cook do you take it from here? do you want my code? Do you need my help? I’d love to get to a point where we can share what was created with others!

Eve_Cook · July 17, 2023, 7:49pm

Hi @Bastien_Siebman! I’m so sorry for the delay, for some reason I didn’t receive the last notification. I ended up giving up because I got super busy, and configuring the layout became exhausting when every single different page needed to be redone with the theme…if you happen to want to provide that code I would appreciate it a ton. Does it apply like a blanket theme? Or does each part need to be customized?

Bastien_Siebman · August 3, 2023, 6:10am

I believe that’s the latest version. It doesn’t cover all pages, I did not finish it all. It matches the image shared above.


.FullWidthPageStructureWithDetailsOverlay { 
  background:black; 
  color: white; 
  } 

.SpreadsheetCell { 
  border-color:white; 
  background: black; 
  }

.AsanaBaseTopbar,
.PageToolbarStructure,
.SpreadsheetHeaderStructure,
.SpreadsheetTaskRow--withoutShadedBackground:hover .SpreadsheetTaskName,
.SpreadsheetHeaderLeftStructure,
.ProjectSpreadsheetAddTaskAndAggregationRow-stickyCell,
.SpreadsheetCell:hover .SpreadsheetTaskName,
.ProjectSpreadsheetAddTaskAndAggregationRow   {
  background: black;
}

.TopbarPageHeaderStructureWithBreadcrumbs-title, 
.TabNavigationBarItem-link, .TabNavigationBarItem-selectableTab--isSelected, 
.SpreadsheetHeaderColumn-columnName,
.Typography--colorDarkGray1 {
  color: white;
}