Accessibility

As a public institution, UCLA is required to make our public web content accessible to all. Below are some web accessibility basics; for more information, check out the Resources section, below.

  • Use HTML headings to structure content so non-sighted users can navigate the page.

  • Test your pages using only a keyboard, for those that are unable to use a mouse while navigating your site.

  • Include alt text for images, so screen readers can understand your message.

  • Avoid using color exclusively to communicate information — visually impaired and color-blind users may not be able to read it.

  • Use a minimum 44x44 px clickable area for all touch controls.

  • Descriptively name links to help screen reader users.

Touch Targets

Touch targets apply to any device that receives both touch and non-touch input. To balance information density and usability, touch targets should be at least 44px.

There are a couple ways you can accomplish a large target size.

You can expand the size of the entire button so that it’s at least 44px wide in one direction. You can also make the button smaller but keep the target size large by using a link area or increasing the padding around the button.

Icon Size

Adequate space should surround system icons to allow legibility and touch.

Icon Padding

Resources