Additional reduced and more accessible theme

LennyPenny / vegarando

browser extension um lieferando mehr einfach für vegetarier und veganer zu machen (mit unrelatierten bonusfeatures)

GNU Affero General Public License v3.0

16 stars 6 forks source link

Additional reduced and more accessible theme #31

Open apriljunge opened 2 years ago

apriljunge commented 2 years ago

I would suggest adding an optional theme that is visually reduced and more accessible. There could be an option to switch between themes in the extension settings.

I have created a layout so we can discuss and improve: grafik

My thoughts for this layout:

a symbol indicates if a dish is vegetarian or not. This is fast to recognize and its independent of colors
I created the symbol in this layout myself so there's no copyright trouble. Official vegetarian symbols like the one of the European Vegetarian Union are protected by their organisations
non vegetarian dishes have lower opacity and a grayscale filter. These dishes can still be ordered but are very fast identified as not vergetarian. By lowering opacity and using grayscale filter this can be also noticed by colorblind users
ingredients identified as non vegetarian are underlined like the industry does on their products for allergenes

I am curious about your feedback.

LennyPenny commented 2 years ago

hey, thanks for the work on this!

I asked around also collected some feedback:

die idee ein symbol zu verwenden ist grundsätzlich gut, die anordnung stört aber den fluss und ist oberflächlich nicht so leicht parsbar wie vorher. hier wäre eine etwas plakativere darstellung sicher sinnvoll der einsatz eines opacity/greyscale filter verbessert nicht die barrierefreiheit sondern verschlechtert sie. alle so ausgegrauten einträge werden allgemein schlechter lesbar und für gewisse zielgruppen quasi gar nicht mehr lesbar. der kontrast für normalen text sollte mindestens 4,5:1 betragen und das ist dort ganz sicher nicht mehr der fall unterstrichene nicht-vegetarische lebensmittel sind eine sehr gute idee. allgemein wäre es mehr im sinne der barrierefreiheit durchgehend mit textalternativen zu arbeiten, also icons als auch unterstreichungen mit textalternativen zu versehen.

LennyPenny commented 2 years ago

my two cents:

icon is very good instead of the green bar, how about we place it in the lower right corner?
I don't think we need to grey out non veggie meals, we got the "hide meaty meals" thing in the settings
underlining instead of the glow effect is also really good
- how would we differentiate between things that are highlighted red/green atm? or do we just drop highlighting things that were green before
for a11y we could also add screen reader tags for the underlining and veggie icons