Semantic Markup Is Less Work
Why are we still building user interfaces that are inaccessible? Why do we accept creating significant technical debt to build experiences that simply don’t work for all users?
I’ve been a designer / developer for many years and I have yet to meet anyone in this industry that doesn’t care about how their design or implementation impacts users. The issue isn’t that we don’t care, it’s that many believe it’s more difficult or time intensive to design and develop an inclusive interface. It is also believed that accessibility can be addressed in a future development phase. Of course it can, but the effort to do so is underestimated because of the amount of technical debt that can be accrued. Planning for and building inclusive interfaces from the beginning is quicker, simpler, and results in higher quality code that is accessible to more users.
Planning for and building inclusive interfaces from the beginning is quicker, simpler, and results in better quality code that is accessible to more users.
There are many articles around this topic, so instead of discussing how a list of items should be marked up in an ordered
<ol> or unordered
<ul> list rather than being placed in a series of
<div> tags, I want to provide an example of code that I’ve seen in the wild. This is code that renders an interface inaccessible by anyone that is not a mouse user, simply because semantic mark up wasn’t used.
<!-- Accessible / Semantic --> <label class="input-checkbox"> <input type="checkbox" name="checkbox_1" value="some value" /> <span class="input-checkbox__check"></span> <span>I'm a custom styled checkbox</span> </label> <!-- Inaccessible / Non-semantic --> <div class="input-checkbox"> <span>I'm an imposter</span> <input type="hidden" name="checkbox_1" value="set on click" /> </div>
Although we could use ARIA roles and
tabindex attributes to make the non-semantic code accessible, the amount of work and effort (development and cross-browser/device testing) negates the efficiency gained by using generated code. The developer would need to develop the functionality that a native checkbox provides out of the box, such as managing the state of the checkbox, the ability to focus on and tab to the element, and emitting events, such as the
change event. It’s always better to use semantic elements rather than relying on ARIA when possible.