Accessibility: Practicing web-accessibility!
Incorporating accessible and inclusive principles in everyday design
Tips for designing more sensitively, keeping in mind the web-accessibility guidelines while we continuously contribute to the content present on the Web.
This article covers —
Guidelines for Web-accessibility
Examples from Social Media
Plugins
Commercial Tools
Guidelines
1.
Simple language
Avoid jargon to ensure that translators can catch what you are trying to convey without any misinterpretation!
There are hundreds of languages in which your content might be read!
2.
Accessible fonts
Not every font that we have access to is read by screen readers, this automatically limits the number of users who can go through the content you contribute! Try and maximize the use of fonts that are supported by the particular platform you are contributing on!
Widely used fonts for accessibility:
Sans-serifs — Arial, Calibri, and Century Gothic
Serifs — Times New Roman and Georgia
Slab serifs — Rockwell and Avro.
3.
Use CTAs — Call to Action buttons thoughtfully!
The way these work differ from platform to platform! For example, if we have an image that can be utilized as a hyperlink, we can pick on and and land on the desired web page to complete the action. But this does not work on a platform like Instagram. The link just shows as plain text.
4.
Appropriate color contrast
Make sure the combinations of colors you use is accessible and has enough contrast! They must at least have a 4.5:1 ratio. Take into account users who experience color-blindness.
5.
Alt text
Using alternative text wherever possible is always recommended so that screen readers can catch this text that caters to blond users.
6.
Hyperlinks
Using links that are short is extremely helpful when users with screen readers are going through the content. Just pasting a URL with around 150 characters does not make sense or help anyone. There are tools available to shorten URLS while uploading them on various platforms. Reading a long URL consumes a lot of cognitive power.
Which of the two options below looks more easy to read an understand?
Option 2:
Accessibility: 4 easy-to-follow methods for everyone by Manasi Vaidya
95% people will say Option 2 is more user-friendly
7.
Reduce the use of emoticons, place them towards the end of your content! As much as we all love emoticons, they are not well translated to someone who is consuming our content through screen readers. The screen reader reads an emoticon by the text that is used to describe it, and it makes sense only if it is placed at the end of a sentence. This prevents from breaking the flow of the sentence.
This is how emojis are read by screen readers.
Most screen reader users will skip this. Two accessible ways to go ahead would be to either place it towards the end of the content, or using just one emoji to summarize the feeling we are trying to convey through it.
Also separate hashtags you might want to use from the main content that you are uploading. Hashtags and Emoticons work in a similar pattern, so it is best to not use them in the middle of a sentence or paragraph as far as possible.
Web-accessibility guidelines
For detailed guidelines regarding the above mentioned steps please read H Locke’s article
Some examples from social media
How many of us really fill in the alternative text that we are enabled to for every picture we upload on Instagram? If someone using screen readers is scrolling through the feed they will be able to experience our content only if we have filled in this alt text. Assuming that 99 percent of us don’t, speaks about the amount of effort that needs to be taken. Can we explain pictures through alt text that we upload in the form of illustrative paragraphs? We have experienced these in really well-written books where the author, through just words is able to create a perfect illustration of the surrounding in which the story is based.
- Steps to Add Alternative Text on Instagram
- Steps to Add Alternative Text on LinkedIn
- Steps to Add Alternative Text on Facebook
Steps to add Alt Text on Instagram
_________
Behance
A lot of us know about this already, but a very common habit while uploading a project on a platform like Behance is to create the documentation in an application like Adobe InDesign, Adobe Illustrator, etc.
Export this in the form of JPEGs and then upload these in the same order on Behance. This takes care of the font sizes, colors, everything. This also means that all the text you have uploaded in your project is in the form of images, which screen readers cannot catch. To a screen reader there will be nothing to detect in such an upload format.
We should keep in mind to upload text in the ‘text field’ that is provided for each project!
_________
Designing websites
The same logic applies while we upload content on websites we may create to display our work. When we design websites there are quite a lot of things to be kept in mind.
Please refer to the Visual Design Guidelines/ User Experience Design Guidelines/ Information Architecture Guidelines to know more regarding the same.
_________
Pastels colors
Pastel colors have been the new in-thing in the past couple of years, I’m a fan of them too. There is a growing tread to use pastels on white or grey. Keeping a proper contrast between the background color or art board and the color of the text is very important. If anyone with color blindness is viewing your work/ content they have to strain their eyes and sometimes find it very hard to read it if it does follow the recommended contrast ratio. There are lot of tools available online free of cost that we can use.
_________
Virtual meetings
While the entire world is going virtual, a lot of times we do not follow accessibility rules, for someone who has a hearing disability they have to completely depend on lip movements. It is very rarely that everyone will have their videos switched on while on daily meetings, scrum meetings, stand-by calls, etc. There is an option to switch the subtitles in virtual meetings on certain applications.
This will make it easy for those who face difficult hearing on a regular basis, as well as those who have a temporary disability which could mean that they are in a really noisy environment, or they are in a situation where their audio cannot be switched on. A lot of times I have realized that when someone is in a noisy environment, they quickly drop a message in the chat window which says that they cannot unmute their microphone due to whatsoever reason. A lot of people could benefit from this.
Plugins
These can be installed on Google Chrome, as well as tools like Adobe XD and Sketch.
High Contrast
This tool is available as a plugin for Google Chrome. Any page that is present on the Web can be viewed in the following simulations.
NoCoffee
Stark
Stark is available as a plugin for tools like Sketch and Adobe XD. It profiled amazing colorblind simulations which can be viewed per artboard.
Tools that are available commercially
Screen magnifiers that enlarge information
1. ZoomText by Ai Squared
2. MAGic by VFO
Speech recognition that allow for input via speech-to-text
Dragon NaturallySpeaking by Nuance
Screen readers that allow for input via text-to-speech
1. JAWS for Windows by VFO
2. Orca for Linux,
3. VoiceOver for iOS and macOS
4. TalkBack for Android
I started my journey in Accessible Design at IBM. This immensely broadened the knowledge I had within this field and got me interested in wanting to learn more and write about it!
You may also be interested in..
Part I — Accessibility: 4 easy-to-follow methods for everyone!
This article increases awareness about accessible design and helpful methods! it also covers tips on how to make information we constantly upload on the Web accessible!
Part II — Deep dive into web-accessibility!
This article will dive deep into guidelines that are apple particularly to the fields of visual design, user experience design, and designing the information architecture if products and services.
