Skip to main content

An universal approach

Thinking the web more inclusively

Read our development tips

Screen accessibility is made with the efforts of designers in the early product stages, but even more of the developers integrating those designs.

Screen Readers

These softwares are an essential resource for disabled people, and so for developers. Understanding their basic usage can greatly help developing an accessible experience. Learning how to use them and test your own website will basically make you a master of HTML accessibility.

We mainly cover the usage of Voice Over on MacOS®, but the usage of other screen readers on any other platform is identical. They allow people who cannot see correctly to navigate a website more easily, but they highly depend on correct semantics.

Read through software

Semantic

Tied to how a website behaviors, semantic makes everything work. The HTML format depends on some rules written by the World Wide Web Consortium (W3C). Web semantic consists in applying those standards to your coding, so that every application is similar in a way that allows a rendering uniformisation for browsers and screen readers.

You should learn and know which element is used for and what its purpose is. Doing so and avoiding validation errors will greatly improve the efficiency of screen readers and keyboard navigation.

Learn semantics

Aria

Accessible Rich Internet Applications. That's a long acronym which stands for a technical specification introduced in 2014 by the W3C. It helps screen readers interact with content which has a different behavior than its original one.

A concrete exemple would be that a <div> can become a <button>, and a <p> content can serve as an alt for an image. Pretty cool right?

It does look cool

Forms

These can easily become anoying for anyone who isn't disabled. So imagine being visually impaired and having to go through a badly formated form, with 14 fields, which are not clearly labeled and contains dynamic dropdowns which don't work with keyboard selection.

That's a bit rough, but we can give you a few tips on basic form logic, so they can be easier to fill, litterally for anyone.

Form my knowledge

Navigation

Additional specific navigation can help screen reader users to browse a website in a more convenient way.

Navigation for small screens like smartphones also require a different attention. Frequently, websites for smaller screens feature a collapsed navigation which is not correclty referenced.

Guide me through