Create innovative designs while reaching accessibility requirements.

Accessibility has been on our radar since we started creating, living and breathing Vev. Not only is it required by law, our current clients ask for it, our potential clients ask for it because like us, they see its importance in making the web accessible for everyone.  If you start looking into Web Accessibility Guidelines, the breadth of the content can lead you down a year-long rabbit hole. It’s a complex topic, yet the concluding message Vev discovered at the end of that rabbit hole? The web should be just as inclusive as it is beautiful. This challenge of making the web accessible to all has been accepted not only by us at Vev but by software companies across the board. Microsoft Inclusive Design really said it best on why inclusivity and accessibility matters, especially in design: “Designing for inclusivity not only opens up our products and experiences to more people with a wider range of abilities. It also reflects how people really are. All humans are growing, changing, and adapting to the world around them every day.”

As a designer researching Web Accessibility, you might find it overwhelming and think, “This is too complicated, I probably can’t translate my out-there visual dreams into an accessible reality...”. That is a fair assumption, given that the guidelines and requirements are presented in WC3's checklist are dull and difficult to comprehend (no offense).

Here’s some good news. We are here to tell you that accessibility does not need to equal boring designs at all. Let’s go through how we can make our content more accessible, and how we can get help doing so, while still making the web a more beautiful place.

First things First, What are Web Accessibility Guidelines?

Moz, a US software company that tracks SEO data,  states that 15% of the world's population has a disability, that is almost 1 billion people. Remember, many disabilities are not obvious or visible, so much like the physical world around us, the web and the digital products we use on a daily basis also need to cater for people with disabilities.

Web Content Accessibility Guidelines (WCAG) is an initiative put together by The World Wide Web Consortium (W3C), a global community with a mix of organizations and individuals, working together to create a single shared standard for web content accessibility, to meet the needs of people, companies and governments.

W3C argues that inaccessibility on the web isn’t caused by disabilities or a lack of tools, but by designs that interfere with assistive technology (AT). AT includes settings and devices that help people interact with the digital world.

Examples of Assistive Technology

• Screen Readers: Read text and page elements aloud for people who are blind and vision impaired
• Magnification: Increase the size of objects on the screen for people that are vision impaired
• Keyboards: Use keyboard commands (instead of a mouse) for people with mobility disabilities
• Voice Dictation: Use speech (instead of a mouse and keyboard) for people with more severe mobility impairments

These are massive pieces of technology and are almost considered today’s bare bones of all computing and software, but please don’t feel intimidated yet! Let’s map out where Vev is helping you make your projects more accessible and where you can help to make your projects more accessible.

Design Guidelines: How Vev as a Platform Helps with Accessibility

It is our responsibility as campaign creators, managers, designers, and product creators to make sure what we can create is accessible. Beyond some helpful free resources, there are some guidelines to know when building in Vev and how the platform assists you, as a creator, to make your experiences more accessible.

Keyboard Shortcuts

In Vev, there are countless keyboard commands to support you as a creator. Some of the most popular are:

• P to switch into preview mode
• 1 2 3 to switch between desktop, tablet and mobile breakpoints.
• M to open the Add Menu
• G to show grids & guide

Even published projects have standard keyboard commands, for example Tab can be used to move from component to component.

Image Alt-text

Alternative Text (Alt-text) is important for a number of reasons. First of all, it is indexed by search engines (always nice) and it also displays on your project if for some reason the content fails to load. Most importantly though, it is read aloud by a screen reader software, making it a useful accessible tool.

In Vev, you can access an image's alt-text by hovering over it in the Image Library and clicking on 'info' which will reveal the option.

Text Styling

To provide structure to a screen reader, we have made it possible to style texts accordingly, with different header levels on headers and paragraph text. By nesting headings in order (H1, H2, H3, paragraph text), you allow for the screen reader to present the text in order.

You can also use Shared Styles between different text elements that act similarly to classes. This feature will allow you to use the a shared style across multiple text elements,  edit in one place and update across your entire content.

Descriptions

Incorporate descriptions of interactions, content, figures and images to have more people interact with your designs. Start with the general description, then be specific - be clear to guide the reader through your projects. Combine this with Alt-text and your project is on good way to become more accessible.

Contrast

Make your projects more accessible by having the recommended contrast ratio between content (text) and backgrounds. This is especially helpful for people with vision disabilities. In Vev, you are able to custom colour and contrast on all content added to a site.

The World Wide Web Consortium provides a quick reference guide for achieving minimum contrast.

These examples are just a starting point to making your designs more accessible.

We are committed to Accessibility: Our Focus and the Road Ahead

Silke Design System

We aim to design Vev in our own Design System Silke, highly inspired by IBM’s Carbon Design System, where accessibility is at the centre surrounding colours, contrasts, readability and the general UI. We are constantly working to improve Silke and making the platform usable for a wide range of individuals including those with low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movements, speech disabilities, photosensitivity and or a combination of these. We therefore always try to comply with the WCAG 2.2 AA, as the minimum threshold.

We Always Want Your Feedback

Even though we are constantly working on being committed to inclusiveness in our work and our product, we 100% know we are not perfect and we do want your input. If you have any ideas, suggestions or comment as to how we can improve, please submit your thoughts on our roadmap portal.

Researching how to make projects more accessible might be daunting, but we hope this article was a good starting point - we hope it allows you to make your projects more accessible without having to compromise on design. Let’s make the web a more beautiful and inclusive place.

Additional Resources

Like what you read about accessibility? Here's a list of resources, some of which were mentioned in this post and others are morein-depth deep dives.

• Inclusive Design at Microsoft
• W3C Web Content Accessibility Guidelines
• Web Accessibility Myths: Debunking 7 Common Misconceptions
• Write Good Alt Text to Describe Images
• Designing for Web Accessibility
• A Guide to Image Descriptions