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.
Sometimes exclusion is temporary, sometimes it's situational. For example, think about using your phone:
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
"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
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.
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.
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.
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.
Instead of hiding actions and information behind hover states, explore more inclusive alternatives.
: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
Dropdown component, and all of our form components.
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.
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.
Avoid relying on color alone to indicate errors
For more information about designing forms for Meetup, see the Forms guidelines.
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.