Tuts+ Web Design | Joanna Ngai

Here are a three simple accessibility tips to keep in mind so you can create more inclusive and user friendly designs. But inclusive how? According to WebAIM, the major categories of disability types are:

• Visual
  Blindness, low vision,
  color-blindness
• Hearing
  Deafness and hard-of-hearing
• Motor
  Inability to use a mouse, slow
  response time, limited fine motor control
• Cognitive
  Learning disabilities,
  distractibility, inability to remember or focus on large amounts of information

We should all be designing with these accessibility challenges in mind.

1. Meaningful “alt” Text

The alt attribute is familiar to anyone who’s ever found themselves coding an <img> tag. It provides an alternative, textual definition of the image content. Screen readers typically find that alt text falls into one of two extremes: either it provides an overload of information or it’s nonexistent (neither being useful).

Remember to use meaningful and succinct text to help those that are vision impaired navigate through your site. Then while you’re at it:

• 
  

  Quick Tip: Remember to Style Your ALT Text

  The alt attribute within an <img> tag provides alternative content for users who can’t download images, or who have images turned off altogether. We…
  

  Nicole Merlin

  10 Jun 2013

  HTML

2. Don’t Rely on Color Alone

Color shouldn’t be the only visual tool you use to convey meaning. Use shape, weight, or some other visual indicator in addition
to color to differentiate between elements.

Consider viewing a page in greyscale and using color contrast checkers to improve overall accessibility.

• 
  

  Accessibility Basics: Designing for Visual Impairment
  

  With 4.5% of the global population experiencing color blindness, 4% suffering from low vision, and another 0.6% being blind, visual difficulties with using…
  

  Graeme Fulton

  15 Nov 2016

  Accessibility

3. Lightweight Fonts Are Not the Best Option

I remember my time at design school and being overly focused on how things look and feel. Thin, light weight fonts may be easy for younger eyes, but it is important to consider the full range of users and how their vision capabilities differ.

Optimize your font weight and size to be more functional for the end user, rather than focusing on aesthetics.

• 
  

  Typographic Readability and Legibility

  When using typography on the web, there are many things to keep in mind in order to create a page that provides clear access to the content and presents it…
  

  Jeremy Loyd

  08 May 2013

  Typography

 Learn More About Web Accessibility

There’s so much more to learn about accessibility. The tips listed above are a great start to get you thinking in an accessible way–for your next step take a look at the resources below:

• A Beginner’s Guide to Web Accessibility Tuts+ Course
• Introduction to Web Accessibility
• WebAIM newsletter
• Web Accessibility Initiative by the World Wide Web Consortium
• Making the Web Accessible for Everyone With Inclusive Design and Diverse Personas