Web Accessibility - Developing for Inclusion

All users should have a rich and complete user experience when browsing your website, regardless of how and what they use to browse. Yet, that's not always the case.

Making accessible websites is one of most important - and often overlooked - accountabilities of front-end developers.

What makes me personally really excited about front-end development is our impact on achieving the above. Every single choice we make when programming a website has an impact on its accessibility. It will - or not - grant access to content for everyone. We truly are responsible for preserving the most important premise of the internet: Making information and entertainment available to all people.

At Netcentric, our front-end development team has a real commitment to accessibility. We follow the  Web Content Accessibility Guidelines (WCAG 2.0) in all of our projects. We also make sure to be  up to date with the latest Web Accessibility Initiative (WAI) recommendations when designing implementations for our clients.

Like everything front-end related, both WCAG 2.0 and WAI are in continuous development. So, too, are our plans to meet a minimum level of conformance for all websites we produce. We are in the process of educating professional accessibility experts. Our experts will be able to assess, determine, and provide solutions to accessibility issues for all our marketing and web applications.

But what is website accessibility?

Making a website accessible means developing it in conformance to the latest standards defined by the W3C community. Accessibility means everything from ensuring the links on a website are properly marked to allowing a user to browse a website by just using his keyboard.

For the most part, it means supporting assistive technologies that many users with disabilities must rely on, such as screen readers or keyboard navigation. It means considering people with mobility disabilities when implementing animations and effects. It means understanding  the needs of ageing users. It means taking into account those users with sight impairments when setting the color contrasts and the way the interface responds to zooming. It means remembering that a flash of light can trigger a seizure in a photosensitive user and that a transcript is the only way for some users to understand audio content. But those are also some examples.

Web accessibility is not only about making it easier for users with disabilities. It’s about designing and developing for inclusion: embracing the ever growing diversity of devices and people connected to the internet, reaching broader audiences, and ensuring much larger conversion rates. It also means meeting the ever-growing legal requirements set by governments in order to make the web more accessible. It means covering your website for all possible ways a user might want to browse your website. Even if they need -or choose- to browse your website in an unusual way.

Accessibility is not only about ARIA and its special attributes, it’s also about delivering in a responsive and responsible way; it’s about writing clean semantic HTML. It’s about using the right elements in the right places. It’s about captioning and providing alternatives. And it’s about working together with everyone involved in the production of fully accessible applications: designers, developers, content authors, and specifications analysts to achieve the same goal.

Coding for accessibility - what you should consider 

Building accessible web applications can turn into a long process if you don’t have accessibility in mind from day one. There are some measures you can take to make it a bit easier and smoother.

  • Whether you are the designer or you get your design from an agency: take some time to review it and spot some of the most common accessibility issues. Inadequate colour contrast between background and foreground, a poor hierarchical structure, incorrect use of headings, generic call to action buttons, and small active areas are just a few of many issues to watch out for.

  • Assess the navigation. That’s one of the places where the most accessibility issues concentrate. If it is extremely complex and makes use of a lot of animations and effects, think of alternatives for users who may have a hard time accessing internal links in your website.

  • Push for responsive. Remember that most users now access from mobile devices and smaller viewports. Designing and developing for a single, large viewport, leaves many users out of your website.

  • The accessibility strategy should be designed according to the required level of conformance. Level A has the lowest standards, level AAA the highest. A good place to start for all levels is to make sure your HTML is valid as well as hierarchical and semantically correct.

  • For level AA and above, you will need to make your front-end implementation as clear and intuitive as possible, and users must be able to understand the immediate effects after clicking on links or buttons. Visual and audio information of the action they are about to make must be included. Good to know: Some governments require level AA by law.

  • Remember to provide alternatives. Identify non-text content such as images and audiovisual media and translate them into readable words for AT users. Ask for a definitive list of supported browsers and mobiles, and test for cross compatibility as often as possible, as you make progress.

  • Develop animations and transitions with empathy in mind. Give the users enough time to understand what’s going on. Make sure it’s always the user who makes transitions happen (like closing flyouts and popups).

  • This should be specially considered when developing forms, as they require user input and interaction.

Help on the internet 

Here are some useful tools that can help you in the process, apart from the official documentation:

For colour contrast ratios, these websites provide useful feedback:

The W3C gives some advice on how to implement forms here:

For ARIA attributes and explanation, follow these links:

And there is yet one more rule of thumb: check as you go, and check often, for possible issues on zooming in and out, changing the size of the font, and disabling javascript.

There is also an official checklist you may refer to, by following this link:

Insights at the Web4All conference

It’s probably impossible to define web accessibility in all its complexity in a single blog post. But considering the importance of the subject, we were really compelled to offer an introduction, and expose Netcentric’s inclination to work in alignment with WAI standards.

A very interesting update is coming, though! Thanks to the support and encouragement of Netcentric, I’m going to attend the 12th Web4All conference on web accessibility in Florence in May. I’m very happy to be able to spend time with web accessibility front runners in the industry, learning about the latest technologies and innovations for digital inclusion. Stay tuned!

Social Links

  • Send to friend

Next Blog Post

by Stella von der Embse


AEM 6: Easily Create Customised Landing Pages

Despite Google’s algorithm update about not indexing doorway pages anymore, landing pages are still a solid and easy way to promote special offers, new items or company announcements.

Natalia Venditto