Mobile Device Accessibility

Accessing Interactive Elements

• Touch elements shouldn't be right or left hand dependent. Can get around this with full-width interaction elements or containers, so someone reaching for them from either side can get to them.

• Make it clear you can interact with them by:

  • Using color schemes that communicate interactivity

  • Placing interactive elements in well-established locations for them, like the bottom navigation

Touch Gestures

• Aim for the recommended 44x44 pixel dimensions for touch elements

  • Properly space them away from other touch elements to decrease accidental clicks

• Add instructions or good visual cues for custom gestures. These can be as simple as icons with short explainer texts explaining the action and its effect.

• Group elements that perform the same action into a singular, larger actionable item

  • For example, group the name and logo into the same anchor tag to the homepage. Don't put them each in a separate anchor tag.

Inputs

• Specify input types so mobile keyboards can choose the best layout

  • Number inputs will show keyboards that only show numbers

• Use simpler inputs like checkboxes or radio when possible, since they're easier for small screens

Resources

• Tips for making interactive elements accessible on mobile devices