Your website might look absolutely beautiful, but what if your visitor is "seeing" it through a screen reader? Surprisingly, some simple, common design elements can confuse screen readers. Fortunately, the corrections are also very simple. Read on to find out how to make your website more friendly to all of your visitors.
In the process of building websites, one of the page elements often associated with accessibility problems are forms, closely followed by another relevant design component: our friendly tables. When we're designing Web pages while keeping in mind basic accessibility principles, these topics seem to be the most difficult. However, this doesn't have to happen that way; making online forms more accessible is not as difficult as it seems. Many websites present users with professionally styled forms, powerful server-side validation capabilities, and good overall form layout quality. But, very often, they're littered with accessibility howlers.
Often it's just a matter of turning off the computer monitor and using a screen reader to realize that those forms are actually far from being accessible for disabled people. Indeed, most form accessibility problems should be fairly easy to address, and involve little more than adding some useful tags in the markup and being more careful about form layout.
In this article, we'll cover the implementation of these accessibility tags for quick insertion into our code, as well as the basics of form layout for different elements. Hopefully, these techniques will make our forms a little more usable for a wide audience of visitors.