accessibility tips from an accessibility engineer

I am a blind accessibility engineer and programmer and I thought I would write an article detailing some of the common things I see in my day job. Accessibility may seem overwhelming, but it doesn’t have to be. So here are three things you can do to improve your website’s accessibility right away.

• use semantic html
  If something should be a button, make it a If something should be a link, make it a link. Don’t use purely clickable divs to indicate actions. If you must make a custom web control, reach for a library that has implemented aria best practices. There are a lot of complications to using aria correctly, and why reinvent the wheel?

• label form fields
  It is super important to label form fields. Otherwise, people using assistive technology may not understand which fields need which data. Labeling is typically done using the tag which takes the id of the form field as the for attribute and wraps the visible label. For example:

<label for="firstName">First Name</label>
<input type="text" id="firstName" name="firstName"/>

You may also use the aria-describedby attribute, which takes the id of a div/span htat describes the control. This is typically used to add additional instructions to a form field or convey validation errors.

• properly mark up modals and set focus to them
  You need to set focus to an element inside a modal dialog when it opens, otherwise people using assistive technology will have no clue that your modal opened. Also decorate your modal with the role=”dialog” and aria-modal=”true” attributes. Ensure that users cannot escape the modal by tabbing out of it into the page content behind it. A good library should take care of this for you.

I hope this short post has been helpful. Please leave feedback/questions in the comments.