Skip to content

Instantly share code, notes, and snippets.

@sirtimbly
Created June 26, 2017 18:00
Show Gist options
  • Save sirtimbly/fac1f0b48845e41a1cd70d9067b30641 to your computer and use it in GitHub Desktop.
Save sirtimbly/fac1f0b48845e41a1cd70d9067b30641 to your computer and use it in GitHub Desktop.
Accessibility Best Practices

Accessibility

Not all of our users will have the same abilities that we assume. There are several ways we can improve our product interface to make it accessible to more users. These are considered best practices and usually do not require a lot of time and effort.

The viewport on mobile

Do not prevent users from zooming a page in and out on a mobile device, this is an accessibility issue.

Color contrast

We must determine an appropriate color contrast ratio to match accessibility standards (generally any ratio less than 3 is considered too low). People with low vision and color-blindness are especially succeptible to this error.

The Chrome Accessibility audit tools can be installed in the developer tool panel and will help identify color contrast issues among many other things.

Alt text and ARIA labels

Every image should contain an alt text for visually impaired users that are utilizing a screen reader. Aria labels are only necessary when an interface element has a behavior that is somehow unexpected or different from the normal semantic HTML meaning. Like if a div tag is used to create a dropdown selector instead of using the normal form element.

To get started analyzing the accessibility of any website you can add the tota11y bookmarklet to your browser.

To further assess the accessibility of a particular site I suggest using a screen reader - like VoiceOver - application to experience the website as a unsighted person would.

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