Website Accessibility Basics for Visually Impaired
Whether you or someone else viewing your website is visually impaired, there are some basic techniques that will benefit a wide range of audiences. These techniques will also be beneficial to those using devices that do not display color, slow internet connections, mobile devices with small screens as well as improving your website's SEO. Allow me to run through the basics that can make a world of differences for those accessing your website and why they are important.
1) Label All Images
Labeling images will help those visually impaired as well as those with a slow internet connection. For those experiencing lagging internet speeds, images typically load last on the page. Image titles can "show" the website user whether the image is an important link or a placeholder image by using the alt tag, image title or image description field when placing an image. You will want to make your image titles as descriptive as possible, yet brief. You also want to place the most relevant information at the beginning of the image title for users to more quickly scan the page for pertinent information. For example, you'd want an image title connected to a request form to say "Request a Free Design Quote" instead of "Design Quote Image". The user will more easily know the image/link is a request form instead of an image advertising your design quotes.
2) Use Colors & Contrast Carefully
When designing your website, keep color selections and contrast in mind. Try to work in a monochromatic environment to start and test your design for effective contrast by printing the layout on a black and white printer. This will help not only those will color vision deficiencies but those using devices with non-color displays. Never use color alone to relay important information as there are many users with difficulties seeing the difference between colors such as green and red.
3) Label Form Fields Appropriately
Try to keep the reading order (used by screen readers) and visual order consistent. A screen reader will have difficulties matching fields with the appropriate labels if they are not marked as such. Think of a simple contact form where the label "First Name" is adjacent to the field where you would type your first name. As a screen reader approaches a form field with a <label> element corresponding to it, it will read the text within the <label> element and communicate this to the user. Without appropriate labels, the end user will most likely fill out the form incorrectly.
These basic techniques, if considered throughout the design and implementation process of a website, can help a larger audience navigate and experience your website as it was intended. Contact us if you have any questions on how you can enhance your website's accessibility. You can also find more detailed information about best practices for accessibility at W3C's Web Accessibility Initiative website.
