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.
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.
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?
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.
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.