Alternativa texts are used for two purposes<ol><li>If an image failed to load, you should add a text to tell user what this image was supposed to be.</li><li>For whose that use screen-readers or one of various types of text-to-speach services, they wanna your text descibes the image</li></ol>

The importance of alt text

You want to focus on describing the physical aspects of the picture and speak in plain language. Resist the urge to be ornate or overly effusive with your descriptions.

Avoid flowery language

In the golden era of accessibility it becomes necessary to realize that no one consumes the digital content in one way.

A question that I frequently get when I talk about accessibility for social media is, “How do I write good alternative text for the pictures I post?” If you’re not familiar with alternative text—more…

The art of Alt Text

The American Standard Code for Information Interchange (ASCII) was an early standardized encoding system for text.ASCII’s library includes every upper-case and lower-case letter in the Latin alphabet, every digit from 0 to 9, and some symbols (like /, !, and ?). It assigns each of these characters a unique three-digit code and a unique byte.But ASCII is so limited, it gives us 256 different bytes, or 256 ways to represent a character. When ASCII was introduced in 1960, this was okay, since developers needed only 128 bytes to represent all the English characters and symbols they needed.

ASCII: Converting Symbols to Binary

Encoding is the process of converting characters in human languages into binary sequences that computers can process.

What Is Encoding ?

Enter Unicode, an encoding system that solves the space issue of ASCII. Like ASCII, Unicode assigns a unique code, called a code point, to each character. However, Unicode’s more sophisticated system can produce over a million code points, more than enough to account for every character in any language.

Unicode: A Way to Store Every Symbol, Ever

UTF-8 stands for “Unicode Transformation Format - 8 bits.” That’s not helpful to us yet, so let’s rewind to the basics.

What Is UTF-8 

UTF-8 is an encoding system for Unicode. It can translate any Unicode character to a matching unique binary string, and can also translate the binary string back to a Unicode character.UTF-8 is currently the most popular encoding method on the internet because it can efficiently store text containing any character.

UTF-8: Unicode Transformation Format

Learn how text works to bring text to your web pages, and why UTF-8 is a cornerstone of global intercommunication over the internet.

computerscience

Computer Science

What is UTF-8 Encoding? A Guide for Non-Programmers

To jump to a different point on the same webpage. That’s convenient for the visitor, who can skip large parts of the page and go straight to the content they’re interested in.But take care to not only the visual but the keyboard focus should move to the destination. Modern browsers do this by default. Older browsers need a tabindex= “-1” on the destination element to receive the focus. The best way to check this is to test it with an actual keyboard.

Internal links

the best thing is to give users control rather than making decisions for them. A browser’s standard (default) behaviour is always the most predictable and is what users expect.That said, it’s perfectly all right to open a link in a new window or tab, as long as you let the user know that that’s what will happen. For instance you can add “Opens in a new window” to the text of the link.

Open in a new window or a new tab?

Compare these two ways of linking:<ul><li>Please don’t hesitate to <a href="https://www.a11y-collective.com/blog/the-perfect-link/" rel="noopener noreferrer" target="_blank">e-mail</a> or to call us.</li><li>Please don’t hesitate to send a message to <a href="https://www.a11y-collective.com/blog/the-perfect-link/" rel="noopener noreferrer" target="_blank">hello@a11y-collective.com</a> or to call us at <a href="https://www.a11y-collective.com/blog/the-perfect-link/" rel="noopener noreferrer" target="_blank">+31 (0)10 842 92 59</a>.</li></ul>In the first sentence, the actual e-mail address and telephone number are hidden. This will be a problem if someone wants to send an e-mail or make a call from another device than they one they’re now using. Showing the e-mail address or the number means the user can note it down for later reference, for instance.

Linking to an e-mail address or a telephone number

How do you link to a file to be downloaded such as a PDF, a restaurant menu or a fact sheet, let’s sayCompare these two ways of linking a document:<ul><li>WebAIM Quick Reference: <a href="https://webaim.org/resources/quickref/quickref.pdf" rel="noopener noreferrer" target="_blank">Web Accessibility Principles</a>.</li><li>WebAIM Quick Reference: <a href="https://webaim.org/resources/quickref/quickref.pdf" rel="noopener noreferrer" target="_blank">Web Accessibility Principles (PDF, 327 Kb)</a>.</li></ul>The first link looks like a normal link, but clicking it actually starts downloading a file. The second one lets the user know that clicking the file will start downloading a file, and tells them how big it is. If they’re on a train, for instance, they may wait until later before downloading. A link is a promise, not a surprise.

Linking to a file 

The link, these tiny things that we use in many places, in a sentence, as a nav link or even embedded in a call to action; but the common purpose between them are thus clicking a link could:- Take the user:<ul><li class="ql-align-justify">To a different location on the same page (an internal link)</li><li class="ql-align-justify">To another page on the same website</li><li class="ql-align-justify">To a page on another website</li></ul>- Download a file- Open an e-mail programme- Dialling a telephone number

What’s in a link, anyway?

Underlining is the universal pattern for a link. Users get it right away. So use this pattern for links in paragraphs of text.Links that are obviously links, such in navigation menus, don’t have to be underlined.Oh, don't forget to read the image 😘

When to underline a link?

Screen readers announce the content on a website, so there must be actual content to announce, in the form of text: an “accessible name”, as it is called.There are several ways to add the accessible name to a link, for example:<ul><li>Use an image or font icon and add the word “Twitter” to the link. This is also useful for people who don’t know what the icon means.&nbsp;</li><li>Embed the image in the link – say, the Twitter logo – and give the image the alternative text “Twitter”.</li><li>Give the link its accessible name replaces the announcement of the content (or missing content) inside the link.</li></ul>

Giving It A Name

In some cases we want to add an image as a link and to be satisfied with the accessibility's aspect we will add some alt text that will describe our image.but there is a tiny issue that will face our users that suffering from impaired vision when using a screen reader to read this text out loud, the alt text doesn't tell that image is a link,.Take an image of a cherry tree, for instance:<ul><li>The ﻿image on the left is the wrong usage in our situation because it doesn't tell the truth</li><li>The image on the right tell our user "Hey, i'm a link"</li></ul>

Embedding an image in a link

Compare these two sentences:<ul><li><a href="https://en.m.wikipedia.org/wiki/Wadden_Sea">Click here</a> to learn more about the Wadden Sea.</li><li>Learn more about the <a href="https://en.m.wikipedia.org/wiki/Wadden_Sea">Wadden Sea</a>.</li></ul>The first link text is meaningless, you have to read the whole sentence to understand what the click here is about. The second link text does that right away. Visitors scan web pages for what they are looking for. Links stand out in the text, so make the text about where they lead. A link text should rather serve as a teaser, as clickbait for the scanning visitor. So keep in mind that the golden rule is "Make link text meaningful and understandable on their own"

The Golden Rule

To make sure a link will work properly, use an &lt;a&gt; element, with an href containing a url. That way, all devices will know how to operate the link. Keyboard interactions, hover and focus, default styling and feedback

Semantics matters

<ul><li>Make links large enough, and include enough space between them and other links, so they are easy to click for a visitor with Parkinson’s disease or rheumatism.</li><li>Make sure the colour-contrast ratio between text and background is at least 4.5:1 and, for the underlining itself at least 3:1. Googling <a href="https://www.google.com/search?q=colour+contrast+analyser" rel="noopener noreferrer" target="_blank">colour contrast analyser</a> will bring up plenty of free tools and add-ons that will calculate the contrast ratio for you.</li></ul>

Design tips for links

There’s more to a link than just a clickable word or image. So, how do you create the perfect link? Rian tells you in our blog!

The art of Alt Text

What is UTF-8 Encoding? A Guide for Non-Programmers

The perfect link

It's time to
Read like a Pro.

CURATED BY

The art of Alt Text

What is UTF-8 Encoding? A Guide for Non-Programmers

The perfect link

It's time to Read like a Pro.

CURATED BY

It's time to
Read like a Pro.