1

I need to display information about what a venue can provide or allow for its guests. The information if an item is available is of the same importance that it is not (e.g. it's important to know that a venue doesn't allow external caterers if you want to bring one), so hiding unavailable items is not an option. To make the design accessible, I decided to change labels to their negative equivalents instead, so it's clear for users who use a screen reader:

Displaying available and unavailable items

However, showing a negative sentence along with a crossed out icon can be confusing to users, as it looks like a double negation. Hence, I experimented with other alternatives for showing unavailable items:

Alternative designs for showing unavailable items

What would be your recommendation? Sharing other ideas or any studies on the topic would be welcome.

Improve this question
1
  • I like your original approach. As long as not available are grouped separately from the available, I think your context helps resolve any confusions. Then I don't find that crossed out icon is cancelling the negated statement, since both the icon and the statement are explicit on their own.
    – mapto
    Commented Oct 8, 2020 at 10:02

3 Answers 3

Reset to default
1

I'd suggest the "airbnb" solution. Keep the same icon, turn the black into grey and cross out the word, not the icon.

Screenshot of airbnb

Crossing out the icon could confuse the user. Crossing out the text also has the benefit that you do not have to use negative words.

Update for Screenreader Support: For screenreader support, check the list of usable attributes. Also there are some tiny but easy and effective tweaks to give everyone their best output. Here is an example (also by airbnb).

screenreader example

For more information, here are some a11y resources:

Improve this answer
0

I think you are going about it the wrong way by having a list of all yes/no values. It would be much clearer if you explicitly state the rules that are available. No need to show rules that are not relevant at all.

Some examples are probably the best way to explain what I mean.

Here is an example of everything allowed:

  • In-house catering available
  • External catering permitted
  • Venue provides alcohol
  • BYO alcohol permitted

Here is an example without external catering and BYO alcohol

  • In-house catering only
  • Venue provided alcohol only
Improve this answer
0

Another approach is using a table with checkmarks to reduce wording. Of course, it depends on the content (the rest of the amenities in your list).

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.