alert--smallalertarchive--smallarchivearrow-left--smallarrow-leftarrow-right--smallarrow-rightblock--smallblockcalendar--smallcalendarcamera--smallcameracheck--smallcheck-circle--smallcheck-circlecheckchevron-down--smallchevron-downchevron-left--smallchevron-leftchevron-right--smallchevron-rightchevron-up--smallchevron-upclock--smallclock-arrow--smallclock-arrowclockcog--smallcogconversation--smallconversationcopy--smallcopycreditcard--smallcreditcardcross--smallcross-circle--smallcross-circlecrossdownload--smalldownloadedit--smalleditexport--smallexportexternal-facebookexternal-facebookboxedexternal-flickrexternal-gmailexternal-instagramexternal-linkedinexternal-mediumexternal-messenger-outlined--smallexternal-messenger-outlinedexternal-outlookexternal-tumblrexternal-twitter-outlined--smallexternal-twitter-outlinedexternal-twitterexternal-yahooexternal-youtubefilter--smallfilterfolder--smallfolderglobe--smallglobegroups--smallgroupsheart--smallheart-outline--smallheart-outlinehearthide--smallhidehome--smallhomeinfo--smallinfoinvite--smallinvitelaunch-new-window--smalllaunch-new-windowlink--smalllinklocation-pin--smalllocation-pin-slashed--smalllocation-pin-slashedlocation-pinlocation-services--smalllocation-serviceslock--smalllockmail--smallmailmeetup-m--smallmeetup-mmessages--smallmessagesminus--smallminusnotifications--smallnotifications-badged--smallnotifications-badgednotifications-mute--smallnotifications-mutenotificationsoverflow--smalloverflowphoto-album--smallphoto-album-add--smallphoto-album-addphoto-albumplus--smallplus-circle--smallplus-circleplusprofile--smallprofilepulse--smallpulserefresh--smallrefreshreply--smallreplysearch--smallsearchsend--smallsendsent-messages--smallsent-messagesshow--smallshowstar--smallstartextblock--smalltextblockticket--smalltickettrash--smalltrashupdates--smallupdates

a11y (accessibility)

Meetup's apps should be built and designed at a high enough quality to accomodate users of all abilities. Our products should adapt to our users - our users shouldn't have to adapt to our products.

Accessible for who?

Sometimes exclusion is temporary, sometimes it's situational. For example, think about using your phone:

  • while holding a subway pole
  • using your phone outdoors in bright light
  • in a big/loud crowd
  • while holding something else

Microsoft's Persona Spectrum

Check out the chart

"By designing for someone with a permanent disability, someone with a situational limitation can also benefit. For example, a device designed for a person who has one arm could be used just as effectively by a person with a temporary wrist injury or a new parent holding an infant. We call this the Persona Spectrum."

— Microsoft Inclusive Design manual

Some stats


Design considerations

"Accessibility will not force you to make a product that is ugly, boring, or cluttered. It will introduce a set of constraints to incorporate as you consider your design. These design constraints will give you new ideas to explore that will lead to better products for all of your users." —Jesse Hausler

Color and contrast

Avoid using color as the only means of communicating information. Provide other visual cues to communicate important states; elements like text, stroke, or icons can be helpful here.

Don't rely on color as the only communication tool

Our minimum text contrast ratio is 3:1. The WCAG guidelines require contrast ratio between text and background to be at least 4.5:1 for normal-sized text and 3:1 for large text for an AA rating. Tip: When designing, pretend you'll be showing it on a projector or crappy TV. That's closer to what users with vision impairments or even just lower quality monitors will experience.

Important icons text should follow our contrast guidelines, but decorative elements or "nice-to-know" text can bend the rules a bit.

Color testing tools:

  • Stark - Sketch plugin for testing for contrast ratios and simulating color blindness
  • Contrast ratio checker - Simply checks for contrast ratio between two colors
  • Contrast finder - checks contrast ratio and recommends accessible colors if your color combo fails
  • Color Tool (by Google) - Check for accessibility in color combos or small color pallettes
  • Hex Naw - Can test full color pallettes and identify accessible and inaccessible combos
  • Contrast - macOS app

Touch targets

Touch targets should be at least 40px. This translates to a physical size of about 7mm, regardless of screen resolution. Touch targets should be spaced at least 8px to ensure balanced information density and avoid accidental taps on adjacent touch targets.

Make tap targets tappable

Hierarchy and focus

  • Lay out content according to it's relative level of importance
  • Place important actions at the most easily reached parts of the screen, which is typically at the edges and at the top or bottom of the viewport.
  • Try to group related items together

Focus order

Users who use keyboard navigation or assistive technology will depend on a logical focus order. Input focus should follow the visual order of the layout, from the top to the bottom of the screen. If you design with a clear hierarchy, a predictable and sensible focus order should happen almost automatically.

Try this out by going to Facebook or Google's search results page and navigate using your tab keys, arrows, and enter keys.

Avoid hiding content or controls

Instead of hiding actions and information behind hover states, explore more inclusive alternatives.

  • Place secondary actions inside of menus (or non-modal dialogs), without using hover states to hide the trigger.
  • Lighten the contrast of secondary icons and darken them on hover.
  • Use tangible items as triggers for larger hovers. An info icon is a better trigger than white space to launch a content-filled hover.

Experiencing Meetup using assistive technology

Keyboard navigation

Consider :focus styles. The tab key navigates through various interactive elements on a page. A default visual indicator is provided by the web browser - usually a blue shadow or outline. When an element is in focus, it can be further activated using the keyboard. Some examples of :focus styles can be seen in our Button component, Dropdown component, and all of our form components.

User-scaled text

Consider how your design looks when a user scales text using their browser or their device accessibility settings. Don't stress too much about this, just keep it in mind.

Forms

Text inputs should have clearly defined boundaries - for example: a border, a background color, etc

Don't rely on placeholder text as Make sure inputs are clearly labeled. In the rare case you have a field or set of fields that doesn't work with a visual label, at least come up with a label for screen readers to use. Don't use placeholder as label example

Avoid relying on color alone to indicate errors Don't rely on color to indicate errors

For more information about designing forms for Meetup, see the Forms guidelines.

Charts and Graphs

Charts, and graphs are visual representations of complex data. However, since they are images, these provide serious accessibility issues to colorblind users and users of screen readers. Alternate methods of display must be provided to these users.

  • For data in charts and graphs a text description of the data contained within must be provided
  • For color-coded charts, supplement colors with texture to provide enough contrast for colorblind users to distinguish differences in areas.
  • A good method for complex charts is to provide the data in a tabular format allowing users to toggle between the various representations of the data presented.

Sources and additional resources:

WebAIM Material Design accessibility guidelines Salesforce accessibility guidelines Shopify accessibility guidelines Microsoft inclusive design

Give feedback

If this page is missing something or if you'd like to make an edit, you can:

  • open a PR in the Swarm Design System repo
  • file a ticket in JIRA
  • send us a message in the #design-systems Slack channel in Meetup's Slack team
Meetup home

Last updated Jan 01 2018, 6:00 PM