Web and mobile Accessibility - How to optimize for Experience
Synopsis: Learn what the top internet accessibility preferences are for users across web and mobile. Take a deep dive into browser and operating system level preferences that are trending and how to design, create and manage the best possible personal accessible experience.
Est read time: 4 minutes
The entire content supply process and all of the supporting contributors across Creative, Design, Development, Ecommerce and Tech help to contribute to an inclusive accessible experience. What elevates a brand is the ability to harmonize this experience across internal teams all the way to the consumer.
The task of managing brand standards, compliance and governance policies can seem daunting and sometimes a distraction. Especially since the content formats, channels and overall volume is growing at an exorbitant rate. This not only requires having a good understanding of WCAG accessibility laws but also out-of-box thinking to find solutions around the laws.
As a contributor to the content supply journey, we are here to share some of our best practices that we follow:
1. Omni-channel design
Content now flows across different teams in an organization & across multiple digital mediums for consumers. This requires accessibility to also be handled across many domains internally and externally (omni-channel), while making sure the web content accessibility guidelines are met. Examples:
Designers convey information of color differences in text, use correct color contrast and implement a proper direction of usage of the website.
Developers make websites navigable using keyboard shortcuts. While giving users the ability to pause animations of a GIF/video.
Ecommerce professionals use targeted Alt Texts, and convey the role of a hyperlink in relation to the content they have written.
2. A different approach to web and mobile
We ourselves use the web and mobile differently. The basic difference being the input modes. We use the web primarily through keyboards and track-pad, while we use touch-screens on mobile.
Thus, manually optimizing a website towards the end to include accessibility functionality, isn't the right strategy. Instead, having different approaches to web and mobile from the start, is the way to go.
It could be the same idea, the same button, and the same functionality, but web design these separately. You will soon see the difference, yourself.
3. Contribute towards ease of access for assistive technology devices to interpret
An example we often use here is that of forms. Forms on websites are usually very difficult to interpret using an assistive device. One example:
Image Credits: Andrew Coyle (Medium)
Learn how to make accessible forms in depth here: Accessible Forms
Browsers play a key role in making internet accessibility possible for assistive technology devices:
Accessibility Features available in Chrome
Accessibility Menu: This menu provides quick access to a variety of accessibility features, such as screen reader, magnification, and high contrast mode.
Select to Speak: This feature allows you to select text on a web page and have it read aloud to you.
Switch Access: This feature allows you to control your device using a switch instead of a mouse or keyboard.
TalkBack: This screen reader provides spoken feedback on everything you do on your device.
Full-page zoom: This feature allows you to zoom in on a web page to make it easier to read.
Accessibility Features available in Safari
VoiceOver: This screen reader provides spoken feedback on everything you do on your device.
Zoom: This feature allows you to zoom in on a web page to make it easier to read.
Reader Mode: This mode removes distractions from a web page, such as ads and images, to make it easier to read.
Invert Colors: This feature inverts the colors of the screen, which can be helpful for people with low vision.
Larger Text: This feature increases the font size on web pages, which can be helpful for people with low vision.
Accessibility Features available in ios
VoiceOver: This screen reader provides spoken feedback on everything you do on your device.
Zoom: This feature allows you to zoom in on a web page or app to make it easier to read.
Magnifier: This feature allows you to magnify a portion of the screen to make it easier to see.
Reduce Motion: This feature reduces the amount of motion on the screen, which can be helpful for people with motion sickness or vestibular disorders.
Invert Colors: This feature inverts the colors of the screen, which can be helpful for people with low vision.
Accessibility Features available in Android
TalkBack: This screen reader provides spoken feedback on everything you do on your device.
Zoom: This feature allows you to zoom in on a web page or app to make it easier to read.
Magnification: This feature allows you to magnify a portion of the screen to make it easier to see.
Color Inversion: This feature inverts the colors of the screen, which can be helpful for people with low vision.
Large Text: This feature increases the font size on your device, which can be helpful for people with low vision.
Consider incorporating Wally into your design process. Wally can provide you with separate accessibility preferences, while seamlessly making your design suitable for omni-channel.
Wally has a solution for every person across the content supply chain. Don't believe us! Try Wally for yourself on a completely Free Trial.
Resource: http://web-accessibility.carnegiemuseums.org/code/forms/
Like what you read? Contact us to speak with an AX expert:
