Accessibility Matters

Accessibility Matters

Featured on Hashnode

Web Accessibility

As someone new to the world of web development, I am learning all kinds of interesting things, like the concept of web accessibility. Maybe I've been in a bubble, but it honestly never occurred to me how many potential barriers there are preventing people from the web as I know it.

What it means to be accessible

We need to remind ourselves, over and over again, that not all users are the same. Each person that visits your site will not be using the same device, connected to the same internet, with the same eyesight, hearing, and understanding of web development that you had when you made it.

How will someone absorb your content if:

  • They do not see well or at all
  • They do not hear well or at all
  • They are using a device with a small screen
  • Their internet is slow
  • They cannot grasp or manipulate a mouse
  • They are color-blind
  • They are dyslexic
  • Other barriers I have not thought of!

As web developers and designers, we have a responsibility to advocate for ourselves and others. It can be difficult to see the world from a perspective not our own, but since our users are diverse, we must learn to diversify our point of view. We must not only consider others, but also ensure that their needs are being met.

The web should be accessible to EVERYONE. Nothing should stand in the way of a potential user accessing and absorbing the content of a web page you developed.

How does one make a website accessible?

Step outside your box, get to know the wide array of potential users, and keep them in mind with each line of code you write. START with accessibility, every time. It shouldn't be an after-thought.

For visual impairment:

  • Ensure your font size can be increased by the user. Use responsive sizes such as em rather than fixed sizes such as px
  • Use font/background combinations that contrast in a way that allows for easy reading. Black on white is good... red on yellow is not!
  • Use semantic HTML, so screen readers can easily differentiate between main content and unrelated articles. Know when div is not the right tag
  • Write descriptive alt text for all your images

Once you have applied the above to your content, use a screen reader yourself. Does the content still make sense?

For hearing impairment:

  • Make sure all audio and video clips have an easily accessible transcript file so the user can read the content they cannot hear
  • Make sure all video clips have accurate and well-paced closed captioning
  • Format the closed captioning to ensure it contrasts enough from the video to be read easily
  • You can also have a sign language interpreter video to accompany yours, however, this should not be the ONLY consideration. It is not guaranteed that your audience will know sign language

Turn off your speakers and use your web page as you expect your users to. Is there anything you are unable to understand?

For slower internet speeds or older devices:

  • Optimize and compress images and code to allow for faster load times
  • Keep images relevant and minimal

For mouse alternatives

  • Do not prevent your page from being navigated with the keyboard. User should be able to use up and down arrows to scroll, and tab to navigate links or forms
  • Confirm tab indexing works as expected

Take some time to navigate your site without your mouse. What complications do you run in to and how can they be resolved?

For smaller devices:

  • Utilize mobile-first/responsive design techniques to guarantee your content is accessible and well-received on any device
  • Add media queries to alter the behavior of your page based on screen size

Use browser tools to view your site on multiple screen sizes. Test out the functionality and visibility of elements on mobile, tablet, and desktop devices.

For color-blindness & visual impairment

  • Do NOT rely on color or images to create/emphasize content

Try removing all color from your web page, does everything still make sense?

For dyslexia

  • Use easy to read fonts with well-spaced letters
  • Have alternate font options available such as Dyslexie font

This is only the beginning, I'm sure there is a lot more that we can be doing to create an inclusive and welcoming world wide web. Whether you are familiar with the how or not, the most important thing is to acknowledge that accessibility matters. Talk to your team about implementing policies moving forward, and updating older content to be available to everyone, every time.

If you like this article, follow me on Twitter or LinkedIn