Skip to content

Instantly share code, notes, and snippets.

@beaucharman

beaucharman/accessibility-considerations.md

Last active August 29, 2015 13:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save beaucharman/9948048 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save beaucharman/9948048 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
accessibility-considerations.md

Accessibilty Considerations

Images

  • Provide Alt attributes to describe what the subject of the image asset is.
  • Informative and descriptive file name (Great for SEO too :D).
  • For images that are for pure decoration, apply alt="null" and do not provide a title attribute to mark as safely ignore for Assistive Technology.

Anchors

  • Title tags for anchors to describe where the link goes.
  • Anchor text should explain where the link goes.
  • a, a:link and a:visited styles (2 recomended) - Make sure they are recognisable as anchors.
  • a:hover and a:focus styles (2 recomended)
  • a:active styles (2 recomended)

Controls and Inputs

  • All inputs should have a name attribute to desribe what data it is to expect.

Buttons (and other click)

Typography and Copy

  • Avoid long reading lines
  • Avoid small font
  • Avoid text-transform: uppercase; for long reading, if not most of the type design.

Structure

  • Samtantics help!
  • ARIA roles

ARIA roles in elements landmarks help assistive tech.

  • <header role="banner">
  • <nav role="navigation">
  • <main role="main">
  • <aside role="complementary">
  • <form role="form">
  • <footer role="contactinfo">
  • <form role="banner">

Awesome Resources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment