It’s been 25 years since the Internet entered people’s lives, but 96.1 percent of it is still not accessible to users. the mechanism most used by readers of electronic screens to search for content).
How to guide
Millions of websites around the world exclude people with learning disabilities or hearing or vision impairments.
Lack of resources is not the cause of this predicament; Because the internet is full of apps, add-ons, different platforms and guides that website designers and developers can use to make their sites easier to use.
For this reason, we decided to collect the aforementioned tools in one place and put together a great guide to designing a user-friendly website.
Dozens of web designers, accessibility advocates, and many other resources and organizations have contributed to the development of the following list, including Perkins Access, the Perkins School of the Blind’s Digital Access Group, and the A11Y Project. Promotes digital access. And a wide range of resources such as book recommendations, access courses, conferences, blogs and development tools.
Color and brightness
How to check color and brightness?
The Contrast Grid program lets you experiment with different color combinations for foregrounds and backgrounds to ensure that your color palette matches the minimum brightness requirements adopted by the most popular digital accessibility standards known as the Web Content Accessibility Guidelines (WCAG).
> Color Shark lets you try out color combinations for texts and backgrounds. If the suggested color arrangements fail, the site will give you the closest color.
> Also, “Color Safe” enables designers to choose easy-to-navigate color palettes that comply with “Web Content Accessibility Rules (wcag)” standards. This site is a little complicated, but it allows you to choose the font size, weight, and font family.
> If you decide to use Figma, Luca Connelly, founder of Data Visual Studio Alco, recommends using Figma’s Color Blind plugin; Because “it’s one of the sources his company uses in choosing color palettes and ensures its designs have enough brightness and ease of browsing.”
> The above tools are very useful for specific tasks, but if you want to go further, you can find a comprehensive understanding of the impact of colors and brightness on the experience of any digital media at the “Color & Contrast” site. It was invented by a former “Adobe” designer; Nate Baldwin. The site combines scientific, theoretical and practical information with interactive graphics and maps; Presenting written material in more concrete forms.
Photo descriptions
How to write simple descriptions about pictures? An easy-to-navigate website, especially one that relies on visuals, is incomplete without useful image descriptions. Perkins recommends the Cooper Hewitt Guidelines for Accessibility Image Descriptions, a living document that helps designers use assistive technology to create websites for visitors. The list includes suggestions on site length, use of language, how to describe people, talk about colors, and how to create richer and more relevant descriptions.
A comprehensive design guide developed by a team of digital accessibility experts, including design consultants and strategists, Perkins Accessibility also has its own resource. The guide lists 7 foundations for universal design, including ease of navigation from the start, getting feedback from a variety of categories, and two detailed case studies.
Easy browsing
How would you rate the overall reach of your website?
Startup software company Stark relies on a simple browser add-on that allows designers, web developers, and product managers to assess their websites for compliance with Web Content Accessibility Guidelines (WCAG) standards. This add-on works with all browsers, offers Adobe and Figma plugins, provides a free review with a full list of website elements, links to Web Content Availability Rules guidelines, and suggestions for troubleshooting like changing font sizes. , or adjust the brightness ratio with better color matching.
> Wave (Wave Accessibility Assessment Tool) helps web designers identify and correct errors in web content availability rules. You can use the online tool by entering the Uniform Resource Locator (URL) or download it as a browser add-on for Chrome, Firefox and Microsoft Edge.
> Google’s free and open-source Google Lighthouse tool provides detailed reporting on website performance, ease of browsing, and other activities. A tool integrated into the “Chrome Developer Tool” is an add-on and a user agent in the “Chrome” browser.
Artificial intelligence
> AccessiBe, an AI-powered tool, uses machine learning to rate a website and make it easier to navigate. Subscription plans for the tool start at $49 per month, give you a 7-day free trial, and guarantee compatibility with many website building programs like “WordPress”, “SquareSpace”, “Shopify”, “Webflow”. , and “Wicks”. Access B allows you to embed a customizable software application on your site that matches your branding look, as well as allowing users to adjust brightness, contrast and font as they design the site.
* “Fast Company”
Tribune Media Services.
“Professional coffee fan. Total beer nerd. Hardcore reader. Alcohol fanatic. Evil twitter buff. Friendly tv scholar.”
