I recently read an article that described accessibility as one of the top web design trends of 2020. As a designer and an accessibility advocate, this was daunting to read. The word “trend” associates accessible design with something that is temporarily “in fashion”, current or boxed, and not with a fundamental responsibility for designers to create usable and fun products and interfaces for all users, regardless of who they are Skill level.
The business model for accessible web design is simple, yet powerful. According to Purple, an organization encouraging businesses to improve the experience for consumers with disabilities, the purchasing power of people with disabilities in the UK is around £ 250 billion, and around £ 16 billion of that purchasing power is spent entirely online. In terms of web traffic, Purple has reported that bounce rates due to inaccessible websites result in around £ 12 billion in lost revenue each year. The more accessible your website or digital product, the more sales will be generated and the more customer satisfaction will be achieved. Viewing accessibility as a trend would mean ignoring the long-term benefits of accessible digital products
However, it seems that today many designers have lost sight of what makes our online experience so special. Tim Berners Lee, founder of the World Wide Web, stated in 1997: “The power of the web lies in its universality. Access for all people regardless of their disability is an essential aspect. “Since then, the web has grown at an immeasurable pace, spawning a range of new disciplines and creative practices that didn’t even exist when it was designed. In the past few years, web designers have set innovative boundaries and pushed creative boundaries, both in terms of how digital products look and how they interact with them. As a result, Internet accessibility plays a rather subordinate role in modern web development and design.
During my time advising companies on incorporating accessibility best practices and user experience into their digital products, I have seen a subtle but alarming discourse within the design community where it is reluctant to incorporate accessibility into design workflows as this is generally misunderstood will either hinder the creative process or negatively affect the aesthetic value of a product. That is simply not true. In addition to the financial benefits, accessible websites have also been shown to improve usability and overall customer satisfaction.
While some solutions may require longer term planning to increase accessibility awareness and deepen knowledge within the structure of design teams, some very simple improvements can be incorporated into designs that can improve their accessibility without sacrificing aesthetic value. Here we list a few to get you started right away:
Show carousel or not show carousel …?
Image carousels are interactive components that present an idea and a product and save space on the page. Unfortunately, because of their purely visual function, screen readers often struggle to translate information into image carousels that blind users may lose completely. These must also be accessible via the keyboard for users with reduced mobility so that they can interact with them. Think carefully about whether you need this picture carousel. When you do this, make sure it is accessible by using aria labels to describe its functionality to screen reader users and ensure that its interactive components are keyboard accessible and have the necessary focus.
Automatic video playback when the page loads? Break
People with anxiety, cognitive impairment, or dyslexia can find automated videos on websites that are distracting or stressful. One simple solution is to add a button that allows users to pause those videos so they can continue with their task. This works for automated image carousels as well, as visually impaired users may take longer to process information and want to stop certain areas of information in the carousel.
Do not describe with color
Around 3 million people in the UK suffer from color blindness. If you are only using color to indicate important information (for example, using red to highlight an error on a form), some users may not be able to easily see this information. Make sure that links are underlined or bold, and that error messages in form elements are accompanied by icons or symbols. Graphics and graphics are also problematic as they only depend on color. So add shapes or dashed lines to make it easier to distinguish data in graphs.
Text as picture? Make it HTML
Screen readers do not advertise text that is in an image file. This means that blind users or those with dyslexia who rely on their assistive technology to read the information on the site cannot access that information. Text images can also have a negative impact on the search engine optimization of a page, since this information is not recorded by search engines. If an image is important, make sure it includes descriptive alternate text, or convert the text to a heading or paragraph tag in HTML. If the image is there for purely aesthetic reasons, use the “Background Image” property in CSS as this is ignored by screen readers and helps users who rely on this assistive technology to focus on the most important parts of the page.
Stop it! … with headings
A strict hierarchy of headings (from H1 to H6) in HTML not only helps screen readers understand the structure of the page and navigate the content more easily, but it also improves search engine optimization. Headings are also a great way to visually divide content on a page for better readability. It’s also important not to use headings to style any content, and remember that all stylistic decisions should be made in CSS, not HTML. This means your H3 can look bigger than your H1 if you format it in CSS without breaking the heading hierarchy, so you get the best of both worlds – style and HTML that is easy to read by humans and computers alike .
Color contrast – a simple solution that can have a big impact
Make sure your text is high contrast with the background of the page by saving the easiest and most common accessibility improvement to last. To meet the minimum requirements set out in WCAG 2.1, the paragraph text must have a minimum ratio of 4.5: 1, while the larger text must have a minimum contrast of 3: 1. Important graphic elements such as buttons or interactive components must also have a color contrast of 3: 1. Plugins like Stark for Design Software will help you analyze the colors in your designs to make sure they are WCAG 2.1 AA compliant and even give you suggestions for a more accessible color palette. Otherwise, this color contrast check in the browser is one of the quickest ways to find out if your colors are accessible.
By implementing these small changes in your designs, you have taken one step closer to improving the usability and accessibility of your digital product without compromising its aesthetic value. Using this approach in future design work has long-term benefits for customers as they get a richer and more powerful experience regardless of their skills or the use of assistive technologies. For this reason, accessibility shouldn’t just be seen as a trend in web design.
Charlotte Hills, digital designer, RocketMill
If you would like to find out more about our User Experience & Creative skills or our accessibility audits, please contact us.