Easy Wins with Accessibility

My takeaway on the talk given by Ally Palanzi at CSS Conference Australia 2016.

Ally Palanzi

Accessibility issues refer to the design of products, devices, services, or environments for people who experience disabilities.

Image Credits: Google

Why Bother?

Accessible = better SEO = increased in audience reach = more leads

Image Credits: Google

Easy Wins

  • Treat accessibility as any other feature in your project. Integrate it into the quality assurance process.
  • Attention to colour contrast on your products. Not everyone has good eyesight. Some of your users may be colour blind. If you are using a Mac device, try setting your display to grayscale to experience what it’s like to be colour blind.
  • Avoid using only one form of affordance to your anchor tags <a>. For example, have the difference in colour and text underlined to indicate an interaction on the elements.
  • Accessible forms. Show your input label. Don’t hide input labels when users focus on the input field. It may be cool to look at first. But if it ain’t accessible, it ain’t cool. Also, show meaningful error messages. Errors with random code labels don’t make any sense to your users.
  • h1 heading tag for each page. This allows screen readers to notify users that they have landed on a new page. Plus, search engines use this to interpret what the content on the page is about.
  • Specify language attribute, for example <html lang="en">. This is how users know what language your page uses.
  • NEVER remove focus state on elements. You can change them or make them stand out. But never remove them.
*:focus {
outline: none; // NO NO NO
}
  • Use of buttons vs. links. Buttons should be an action, like submitting a form. For links, it is used to navigate to different pages or even different positions of a page.
  • Descriptive text on buttons and links. Communicate clearly to your users. Click here. vs. Click here for more info. See the difference?
  • Accessible images. Add alt tags to your images. This way, screen readers and unloaded images have a way to present the content of the image.
  • Accessible SVGs. Add title to your SVGs and use the aria-labelledby attribute to tell the screen reader what element to use to describe the SVG.
  • Implement your websites in semantic html. Avoid changing default semantics.
  • Support keyboard navigation on your websites. Users should be able to tab through the entire page with their keyboard.

Accessibility is everyone’s responsibility.

My Takeaway

People want to use our product. Let’s make it great for them.

Resources on Accessibility

--

--

Learning by doing.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store