By Raegan Bartlo, User1st
Time and time again, consumers prove that they value and frequent those companies that take an active, inclusive approach to their business.
Accessible public spaces now include the burgeoning online marketplace of information, goods, and services. That’s right: websites are the new doorway to your business, and the headlines reflect this change. For instance, in a recent victory for disability rights, Domino’s was denied a chance to appeal a ruling stating that it must make its site and app accessible.
This just underlines that, in the digital age, while an accessible site will enhance your brand and extend your market reach, accessibility also demonstrates your business’s willingness to empower those with different and changing abilities.
Accessible public spaces now include the burgeoning online marketplace of information, goods, and services. That’s right: websites are the new doorway to your business, and the headlines reflect this change. For instance, in a recent victory for disability rights, Domino’s was denied a chance to appeal a ruling stating that it must make its site and app accessible.
This just underlines that, in the digital age, while an accessible site will enhance your brand and extend your market reach, accessibility also demonstrates your business’s willingness to empower those with different and changing abilities.
Of course, wanting an accessible website and actually making it happen are different animals.
Following the WCAG guidelines for web accessibility is a reliable way to make your site accessible and inclusive, for a start. Read on to discover the most common accessibility pitfalls and some easy, WCAG-guided ways to fix them. Start creating an inclusive, socially responsible brand and website.
Fix that Color Contrast
People with changing visual abilities can find it hard to enjoy content on a page when the contrast is too low. This can include people with color blindness, those with impaired vision and those who experience loss of sensitivity to contrast due to the aging process.
The WCAG guidelines recommend a contrast ratio of 4.5 to 1 for normal text, with 3 to 1 recommended for large text. Tackle this issue first to give your site a quick boost to its inclusive and accessible design.
Enable Keyboard Access and Visual Prompts
Physical changes that affect the use of a mouse or changes to vision mean websites need to have all web functionality accessible through the keyboard.
Browsers should use a dotted or blue line surrounding content representing the keyboard’s current point of focus. Making this update will help users navigate, make choices, purchases and submit forms. Help them undertake intent that requires action!
Create Images with Alt Text
Alt text provides a description of images found on your website so that those with vision disabilities can access a description of the image.
Other items to watch out for with alt text include:
Clarify Your Element Labels
Properly labeled page elements, like buttons, make it easy for users to understand what each element will do on the page. Assistive technology tools often attempt to auto-correct when appropriate labeling is missing – but this can lead to incorrect labeling.
Fix this “hot-button” issue (sorry for the pun) to quickly stop clicks and form submissions from erratic, annoying – and problematic – behavior.
Use Descriptive Text for Hyperlinks
When link text does not provide sufficient detail, it makes it hard to understand the purpose of the link without additional context. An example of this would be a link titled “click here.” Most users will be asking: “Click here for what?”
Repair Text Resizing
When reading a website, individuals with impaired vision may need to increase text size to read content without using a screen reader.
However, when text size is increased on some websites, it results in the loss of valuable site information or overlapping content.
Accessible website design enables text to reflow to use the existing space without overlapping.
Start Your Website Compliance Check
Knowing and fixing these accessibility gaps will get you well on your way to a more accessible website, better engagement and a brand-new, publicly visible way to demonstrate your commitment to a world accessible to all.
Not sure if your website is inclusive or ADA compliant?
Visit the Chrome Store and start your web compliance check with our accessibility testing tool, uTester.
Following the WCAG guidelines for web accessibility is a reliable way to make your site accessible and inclusive, for a start. Read on to discover the most common accessibility pitfalls and some easy, WCAG-guided ways to fix them. Start creating an inclusive, socially responsible brand and website.
Fix that Color Contrast
People with changing visual abilities can find it hard to enjoy content on a page when the contrast is too low. This can include people with color blindness, those with impaired vision and those who experience loss of sensitivity to contrast due to the aging process.
The WCAG guidelines recommend a contrast ratio of 4.5 to 1 for normal text, with 3 to 1 recommended for large text. Tackle this issue first to give your site a quick boost to its inclusive and accessible design.
Enable Keyboard Access and Visual Prompts
Physical changes that affect the use of a mouse or changes to vision mean websites need to have all web functionality accessible through the keyboard.
Browsers should use a dotted or blue line surrounding content representing the keyboard’s current point of focus. Making this update will help users navigate, make choices, purchases and submit forms. Help them undertake intent that requires action!
Create Images with Alt Text
Alt text provides a description of images found on your website so that those with vision disabilities can access a description of the image.
- Each image on your site must be linked to an “IMG ALT” attribute.
- IMG ALT attributes should mention if the image has a function.
Other items to watch out for with alt text include:
- Using text which is too brief to provide an accurate description
- Failing to label regions in maps with an ALT attribute
- Long text which makes functions unclear
Clarify Your Element Labels
Properly labeled page elements, like buttons, make it easy for users to understand what each element will do on the page. Assistive technology tools often attempt to auto-correct when appropriate labeling is missing – but this can lead to incorrect labeling.
Fix this “hot-button” issue (sorry for the pun) to quickly stop clicks and form submissions from erratic, annoying – and problematic – behavior.
Use Descriptive Text for Hyperlinks
When link text does not provide sufficient detail, it makes it hard to understand the purpose of the link without additional context. An example of this would be a link titled “click here.” Most users will be asking: “Click here for what?”
Repair Text Resizing
When reading a website, individuals with impaired vision may need to increase text size to read content without using a screen reader.
However, when text size is increased on some websites, it results in the loss of valuable site information or overlapping content.
Accessible website design enables text to reflow to use the existing space without overlapping.
Start Your Website Compliance Check
Knowing and fixing these accessibility gaps will get you well on your way to a more accessible website, better engagement and a brand-new, publicly visible way to demonstrate your commitment to a world accessible to all.
Not sure if your website is inclusive or ADA compliant?
Visit the Chrome Store and start your web compliance check with our accessibility testing tool, uTester.
RSS Feed
