Thinking Accessibility First!

After taking some time to do quite some research about web accessibility, I was smashed right in the face as I came to terms with myself not meeting a tonne of these requirements to make my projects accessible. You probably know the kind of feeling when they tell you you're racist right? Yeah... that's how I felt. It seemed that I had left out many people from reaching and enjoying the same experience I've been wanting all my users to have. Fun fact: You too must have done the same or at least felt the same like me.

In this post, I'm gonna try to echo why it is important to make your web content very accessible by sharing with you some tips (of things you may know or not know were very applicable to web accessibility). It is often easier to skip the beginning. It is always important to start from there.

What is Web Accessibility?

According to wikipedia

Web accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed.

In short, if there be one thing you should learn from this post it should be the fact that:

Your websites should as much as possible include all class of users (be it disabled or not).

Apart from someone being blind or color blind (which is the first thing I always think when the topic is mentioned), there are other forms of disabilities which may affect a user's experience on the web such as:

• Neurological
• Physical
• Auditory and more...

Tips to employ to make your website accessible

Making your site accessible is not that difficult as you may think. The current standards of HTML5 makes it far more easier to achieve almost everything you will basically ever need to without doing lots of extra stuff. Here's what you should always consider:

1. Your DOM content order matters a lot: I can't even stress this more. The way you organize your content on the DOM with your simple markup determines how the accessibility tree will be organized. Screen readers for instance, will only deliver this content in a sequential manner as opposed to users with a lot of visual acuity who have the advantage of scanning through the page within seconds. Having the right markup makes users with disabilities enjoy the same integrity and flow of content as any other user should.

2. Do not tamper with tap order: This follows from the previous. Your markup says this while your stylesheet says another. This means that, your style sheet should minimize the effect of moving elements around the page. If you're doing so, your markup in a way should express that as well. Your tab order should be very intuitive as much as your page structure suggest.

3. Try as much as possible to make use of Semantic HTML tags such as:

• header
• footer
• nav
• main
• section
• article and
• aside

These tags already have built-in support for assistive technologies such as screen readers to know what they may mean.

1. Always add alt text to images: Yeah you got me. Make sure to add descriptive alt attributes to almost all of your images. What I mean here is, not all images will need this attribute for instance, when using an image within a button.

2. Implement keyboard traps correctly: Another point to note is the issue of keyboard traps. Ensure that modals and popup windows do implement keyboard traps. This help assistive technologies to keep track of which element is/was active before/after the popup or modal window.

3. Label your form fields: Labeling your form fields with the label tag will add more meaning to your forms and will make it much more accessible. Try to make use of any of the following:
   

   <!-- User labels with a for to target input id -->
   <div class="form__field">
       <label for="username">Username</label>
       <input type="text" name="username" id="username" />
   </div>

   <!-- Or simply put input fields within a label tag -->
   <div class="form__field">
       <label>
        Username <br />
           <input type="text" name="username" id="username" />
       </label>
   </div>

1. Do not disable focus: This is crucial! Never you disable keyboard focus. Only disable the default browser styling and implement something better that works with your style guide or theme.
2. Use good colors and maintain the right contrast level: Most people are color blind which is why you may want to always consider using colors that are friendly to all classes of users. Maintain good contrast with your colors, typography and button states. This will make it very user friendly.
3. Make your site responsive: This one seems to be trivial but still worth mentioning. Take time to make sure your content can scale well on mobile, tablets and desktops. It shows that you have a taste for good things plus, it just makes the user experience better.

So there we go... I can't even cover everything in this sphere of web accessibility but I think the concepts and tips presented here can make your site a whole lot better than it used to be. If you have been implementing this already then good work. If you haven't, start today and let's make the web better and healthy.
Be sure to drop in the comments what I missed so that we make this content even more engaging . Cheers!