Reading a news snippet, buying a sought-after product and ordering food—they all happen online now, and for the most part, with great ease. Most of us probably take for granted how convenient the internet really is. But, as the web expands, different users must be served in the best way possible, which can present a challenge for some folks. Designers and developers need to create experiences that are accessible to people of all abilities. Accessibility and the web has been a hot topic in just the past year, so let’s check out the challenges affecting user experience.
Web Accessibility Challenge #1: User Experience for Visual Impairment
Browsing the web is easy enough for many of us. Type in or search the desired URL, cruise around the site and buy that new doo-dad you wanted. It seems simple, but the internet is a completely different experience for those with visual impairments. To accommodate this, designers and developers have a few tricks up their sleeves to create positive browsing experiences for every aspect of their audience.
Font Size
Visually-impaired website users have to make browser fonts work for them in order to properly see the available content. Similar to zooming in on a document, popular browsers support website zooming to serve this population. The challenge for web developers is in ensuring that text remains legible and undistorted while also maintaining the layout of the site.
Alt Text
Even if you only have a vague knowledge of content management, you’ve probably heard the term “alt text.” The purpose of alt text tags on websites is to assist blind or visually impaired audiences using screen readers, as they explain the contents of an image on a page. Development best practices dictate that every website image contain an alt tag in case the image can’t be seen or will not load. As an added incentive, using alt text can help with search engine optimization (SEO).
Contrast
Have you ever seen those memes that show a colored circle and a barely legible number or letter inside? This is actually part of a legitimate color blindness test known as the Ishihara Test. In the image, two elements are usually very close in color, making them hard to distinguish. For color blind individuals, two overlapping similar colors really do blend together, making contrast important. Designers and developers must be mindful not to make overlapping website colors (i.e. background and text) too similar. Luckily, tools like WAVE test the color contrast to avoid this issue.
Semantic HTML
<Div> this, and <div> that. Instead of these generic tags, accessible websites should incorporate semantic HTML. As another means to dictate to screen readers what’s on each page, semantic tags are specific, providing an explanation as to their function. Example: <nav> represents website navigation.
Web Accessibility Challenge # 2: User Experience for Motor Impairments
If you’re 100% able-bodied, imagine navigating your world without motor control or even with paralysis. It makes everyday life challenging, let alone using the internet. Technology is catching up to this, and designers and developers work to ensure that users without a full range of motion can easily navigate websites.
Tabbing
Every website is created to allow you to tab through the navigation on the keyboard. Individuals with motor impairments rely on this because they cannot always maneuver with a mouse. Websites with complex navigation get a bit tricky on the development side, as the order in which items are tabbed could potentially confuse users.
Link Highlight
To complement tabbed navigation, selected or “focused” links on a site are by default highlighted in a dashed outline by browsers. Link highlights are usually disabled for aesthetic purposes but really shouldn’t be, as they’re meant to make the navigation easy to follow.
Skip Link
Skip links allow users to do just that—skip the navigation and get to the meat of the site content. On complex sites such as those for ecommerce companies, it’s a godsend, because users don’t have to tab endlessly on each page. Simply hit the tab key to generate the “Skip to Content” link and press Enter. Best practice: Put it right after the <body> tag.
A Quick Web Accessibility Case Study: Domino’s
So maybe the only thing you knew about website accessibility came from recent court cases. Like we said, it’s a hot topic. Case in point: Domino’s. Long story short, in 2016 a blind user attempted to order a pizza on the Domino’s site, twice, only to be forced to give up due to lack of accessibility. The case went to the U.S. Court of Appeals and ended in the plaintiff’s favor, citing compliance issues with Title III of the Americans With Disabilities Act (ADA). However, Domino’s has since attempted to escalate it to the Supreme Court, arguing that the ADA still does not have accessibility rules specific to the internet (because it was written in 1990). The outcome could impact web design and development requirements universally.
Trust ProFromGo to Create Your Accessible Website
Design and development can seem complicated, but they don’t have to be. To serve users of all abilities, your website should incorporate accessibility features like the ones we’ve discussed. Trust ProFromGo to build your company’s accessible site, or make essential updates to your site. With the latest technologies at our disposal in platforms like Hubspot and WordPress, we’ll make your website the best it can be. Get in touch today to discuss your needs.
