Sign Up And Receive Our Latest Updates!
.svg){kind=small}
Designing an Equal Website for Every Visitor
What if user has a visual impairment and isn’t able to view the site as you had originally intended? The result is a site that no longer provides value.
As designers and developers, we spend a great deal of time thinking about the ways users will interact with the sites we build. We are careful to choose appealing color palettes, captivating images, and exciting fonts that will resonate with the user and encourage engagement. But what if that user has a visual impairment and isn’t able to view the site as you had originally intended for it to be seen? The result is a site that no longer provides value and the user grows frustrated. Worse? The site in turn effectively discriminates against them. Luckily, there are laws today that protect Americans with disabilities.
When the Americans with Disabilities Act (ADA) was signed into law in 1990, its purpose was to give full and equal access to people with disabilities. Typical accommodations required to be provided under the ADA included wheelchair accessibility, access to service animals, and the use of braille or other tools for those who are visually impaired. What it didn’t provide was accommodations that protected people with disabilities in the digital world. To this day, the ADA doesn’t contain any official guidelines to assist web developers with creating compliant websites.
And what can happen when there aren’t best practices or guidelines in place to protect people with disabilities? Discrimination. In 2017, the grocery chain Winn-Dixie was sued by Juan Carlos Gil because its website wasn’t able to be used with a screen reader. Gil v. Winn-Dixie was the first lawsuit of this kind brought to court. Before this, many others settled outside of court. Winn-Dixie lost, setting precedent that websites are a “public accommodation” and must follow the rules outlined in Title III of the ADA. This means people with disabilities must receive full and equal information and functionality online.
Although this case did not bring about any new amendments to the law itself, there are now guidelines written for federal websites as well as sources providing tips based on testing and assistive device usage. These are just a few of the most common guidelines for creating accessible and compliant websites.
- Provide a text equivalent for any and all non-text elements. Image elements have alt text tags to provide screen readers with text to read out to the user. Alt text should describe the image but can still be brief as long as the user can understand what the image depicts. Links and buttons should also contain tags that gives context or describe their purpose or intent when directing the user somewhere else. Any audio in the website must be captioned or transcribed. Although if the audio accompanies a video then the audio must have captions within the video or otherwise synced with the video.
- Colored elements must be able to be identified by features other than color. Though this doesn’t mean a website must only be in black and white. If a user is asked to press a green button but is unable to identify which button is green, they can’t properly use the website. People who are color blind or vision impaired must be able to identify buttons by other features than color. Providing a button with clear text is the simplest way to accomplish this.
- Ensure the website is usable at high zoom levels. People who have low vision may need to increase the zoom level of their computer or browser to view the content. Because this may alter the design and flow of the site, developers muse use relative sizing on elements, and organize elements properly to help keep the website working as it was intended.
- Websites must allow user-defined style sheets and not override any user-defined settings. Generally this is easy to follow but needs to be kept in mind when creating a website. For example, users may create style sheets to increase font size or force any text to turn white with a black background to enhance their ability to read.
- Create labels for form fields to add context to the field. As a screen reader moves through a form, if the label is not linked to the field it represents, the user may only hear “input field” instead of “first name” making it difficult to fill out the form properly.
- Use scope to pair data in rows and columns with their headers within data tables. When creating a table header, adding scope=”col” or scope=”row” will link the values together with the header. This provides context to a user if a screen reader moves into a cell of the table.
The guidelines written here are the most common ways to bring a website into compliance but other uncommon guidelines exist so doing research on current best practices is always recommended. At Uprise, we rigorously build and test our sites to serve everyone. When vetting website partners, be sure to inquire about their commitment to digital accessibility. Hopefully, the ADA will continue to update and expand upon their guidelines. To benefit those with disabilities, web developers should be mindful of the millions of Americans with disabilities and create websites accessible to all.
Latest Posts
Learn about IT infrastructure upgrade timelines for SMBs & Uprise's expert support for seamless upgrades for competitiveness, security, and efficiency.
