June 15, 2021

Accessibility: beyond the basics

In this edition of Before DevBreak, Jen Luker, a Senior Staff Engineer at Nav, Inc elaborates on the tools and techniques that can be used to develop more accessible web projects.

The gap between a button and a div

When writing code for a website, a button tends to be the better option from an accessibility standpoint. This is primarily because they are usually built with the ability to be highlighted on tab. For instance, with screen readers, the button is normally read out as “button <name or text on the button>”

However, you can make a div more accessible. And while some would refer you to the platform, it doesn’t always have everything you need, especially when dealing with a large content flock. It becomes a little trickier to style and position text, images and other elements appropriately. There’s a lot to keep track of.

You may have a navigation landmark, but still lack a menu option where you can just insert your items. There’s a select box and menu items, but some additional work is required to make them appear and work together in the desired manner. This will most likely be the case for more complex efforts like combo boxes, multi-select boxes and menu items.

How to work around this problem

There are tools that include accessible components, allowing you to view the code examples or even use them by importing them. For example, the Inclusive Components lays out what you need to do something like a menu to make it accessible, enabling you to understand the applicable rules regardless of the language you’re using.

Ideally, you should introduce accessibility before you start designing. However, many developers will be dealing with already made projects that they are just adding to. In this case, it is advisable to start with the first pieces you’re adding. Start by making your first contributions accessible.

You can use Lighthouse, aXe and VisBug extensions which serve as technological auditors for the website you’re looking at. For instance, they can tell you what’s lacking an appropriate landmark, an alt tag, which rule should be present or not, and a lot more. They also tell you how to solve the problem while others like aXe even explain why the issues spotted are problems.

By understanding the “why,” you can explore various solutions. You can also eventually incorporate automated testing to gauge accessibility in earlier stages. Furthermore, you’ll also have to consider accessibility beyond visual, auditory and motor disabilities. Make sure to factor in cognitive disabilities and how they can affect the way people comprehend flow and context regarding your website.

Finally, you should also consider scenarios other than web visits. These may include accessing documentation in the case of open source software. When creating code, endeavor to follow best practices for including accessibility features.

📹 You can learn more about the applicable tools and techniques regarding accessibility by watching the full talk here.

About talent.io and DevBreak

Before DevBreak is a series of live, online, tech talks. Each session features a senior tech expert from an innovative company, who demonstrates how they solved major programming challenges in their business. This series is part of DevBreak, the ultimate 2-day tech festival organised by talent.io.

talent.io is Europe's leading selective recruitment platform which has over €10m fund raised and is over 170 employees strong. We help great companies build great tech teams, in the simplest way: selected companies apply directly to vetted candidates. We cover most tech roles (software engineers, data scientists, product managers, DevOps engineers, CTOs). Our platform is open to permanent positions as well as freelance assignments, both on-site and remote.

  • 7,000+ companies use talent.io, such as Deliveroo, Volkswagen, N26, PayFit and Aircall
  • 6,000+ candidates recruited, for permanent contracts and for freelance assignments
  • 5 Countries / 11 cities (Paris, Lyon, Lille, Bordeaux, Toulouse, Berlin, Hamburg, Munich, London, Amsterdam, Brussels)

Consulter nos autres resources

October 6, 2021
Un guide pour construire votre équipe tech en remote
Regarder le replay →
June 16, 2021
talent.io s'associe à Deel pour créer la façon la plus simple de gérer l'embauche et la paie de vos équipes à l'étranger
Regarder le replay →
February 17, 2021
talent.io dévoile le salaire des professionnel·les de la tech en France
Regarder le replay →

Other articles picked for you

October 6, 2021
A guide to build your remote tech team
Read more →
September 30, 2021
How MDD can help tech team boost their productivity
Read more →
July 15, 2021
The journey of transitioning to a Shape Up methodology
Read more →