Online Accessibility

How to Improve Your SEO and Accessibility with Alt Attributes

You took the time to find that perfect image for your website’s homepage or a blog post. You feel that image says everything you want to say about your business or blog. The last thing you would want is for it to be invisible. If you neglect the alt attribute of that image, it may very well be invisible from a Search Engine Optimization (SEO) and accessibility standpoint.

If you want to ensure that your page is SEO and accessibility friendly, this post is a must-read for you. If you use alt attributes on your site, but want to improve how they are written, this post is for you too. If you just can’t get enough alt attributes in your life, well, you’re in luck as well!

What are Alt Attributes?

Alt attributes, also referred to as alt tags or alt text, are an essential element for an effective online presence. They are used within an HTML code to describe the appearance and function of an image on a page. Alt attributes strengthen your visibility to search engine spiders and improve the accessibility of your website for people who are visually-impaired. By neglecting to add alt attributes to your images, you keep those images, and your page, invisible. They are essential for these three reasons:

  • Adding alt attributes to photos is first a principle of web accessibility. Visually impaired users need to know what the picture is showing. A screen reader will read an alt attribute, describing the image, and provide a better understand of an on-page image.
  • If an image can’t load, an alt attribute will be displayed in place of an image.
  • Alt attributes provide better image context and descriptions to search engine crawlers, helping them to index an image properly and improving your SEO.

Writing Alt Attributes

Now that we have a better idea of the importance of alt attributes, it is important to know how to write them. So if you were to create an alt attribute for this image:
pug dog wearing birthday hat looking up
The alt text could say: pug dog. That describes the picture on a basic level, but does not give the full picture. A better alt text would say: pug dog wearing birthday hat looking up. Why does that work better? Well here are 6 tips to keep in mind when creating alt attributes that are SEO and accessibility friendly:

Keep it Simple

Google does not like long descriptions of images (see keyword stuffing below) and neither do screen readers. The most popular screen readers cut off alt attributes at around 125 characters, so it’s advisable to keep it to that character count or less.

Be Descriptive and Concise

Not only should the alt attributes be short, it should be to the point. Alt attributes are designed to provide text explanations of images for users who are unable to see them. Be clean in your description, while trying to say it in as few words as possible.

Location, Location, Location

Placing images with alt attributes near relevant text will help create a logical experience for non-visual users. For example, if I was to include the picture of the birthday-celebrating pug above, it should be placed near text about a doggy-themed birthdays.

Keywords are Key

Remember when I told you that there is an SEO component to alt attributes? Well, keywords are key for SEO. Alt attributes are an opportunity to signal to search engines that your page is highly relevant to a particular search query. It’s a great strategy to use your site’s keywords in order to help your images rank.

Keyword Stuffing

Like all things, keywords are great in moderation. Be careful to not misuse your keywords as it could end up hurting your SEO instead of helping it. Google does not like it when you stuff the alt attributes with keywords. In our pug wearing a birthday hat example above, you would want to avoid this alt attribute:

pug dog breed puppies doggies birthday party hat red white pup puppies woof

First, this does not accurately tell a screen reader what the picture is. Imagine having to make sense of a picture with that description!

Secondly, filling alt attributes with keywords results in a negative user experience, and may cause your site to be perceived as spam.

Don’t Neglect Form Buttons

What is a form button? Form elements are different types of input elements, like text fields, checkboxes, submit buttons.

For example:

shopping cart

This is an example of a shopping cart or add to cart form button. If a form on your website uses an image give it an alt attribute. Image buttons should have an alt attribute that describes the function of the button, for example, this icon could have an alt attribute of shopping cart.

You are now ready to write your alt attributes for all the images on your site. Every time a new image is added, be sure to write the alt attribute. Remember to go back to older images and ensure that they have alt attributes as well. This simple step will give you a more accessible website that is also SEO friendly, creating a more positive user experience!

If you are more of a visual user, here is a tutorial from Google about writing alt attributes.

How to Improve Your SEO and Accessibility with Alt Attributes
read more

Technology & Accessibility

As the old cliché goes, “Where there’s a will, there’s a way.” This saying is as true for solutions related to disability as it is for any other ambition. With the necessity of technology in our daily lives, individuals with disabilities, and those who advocate for them have designed many tools that work for all, along with guidelines for how to harness its power. This concept is not a new one. In 1808, Pellegrino Turri invented the typewriter to help a friend to write legibly. In 1886, Herman Hollerith, who himself had a cognitive processing disability, invented a method to use punch cards to transport and manage data, later founding the company that would become IBM.

Technology & Accessibility
read more

#3 – The Need For Online Accessibility

Since its invention, the Internet has quickly grown from being a cutting edge tool for research and education to one of shared knowledge amongst the masses. In today’s fast paced interconnected world, it has become a vital part of everyday life, becoming even more so as technology advances. As the Internet has evolved from a luxury to a convenience to a necessity, so has the need for it to become accessible to everyone.

Individuals with disabilities also rely on the Internet throughout their daily lives. As the world continues to become increasingly digital, information is rapidly transitioned to electronic formats that computers and other communication devices can access.  Take printed newspapers for example; they posed a challenge to people who were blind, as well as individuals who had trouble physically holding or turning pages. Now, they are available online and digitally using accessible devices, as long as the organization’s website has been designed in a format that meets the current Accessibility Standards. This removes the barrier that previously existed, allowing people to independently keep up with local news in a format they can use.

If websites are not accessible, individuals with disabilities lose a convenient way of independently obtaining information. Many sites use images and flashy graphics, some have online games, and others have contests that require precise mouse clicks and timed actions. It is difficult for assistive technology devices to interpret this functionality, barring the users from equal participation. A site with tutorial videos which do not feature somebody describing the on-screen action, or a video with spoken content that is not conveyed visually or in text, prevents people with hearing or vision loss from being able to fully understand the message leaving many disabled persons at a distinct disadvantage.

There are other, more severe barriers resulting from poor accessibility. Some colleges and universities use online course management software designed without accessibility in mind. The relevant material in inaccessible images, audio only formats, non-standard buttons which do not respond to keyboard presses, unreasonable time constraints during tests, and animated content cause assistive devices to struggle with page focus.  These issues can prevent students with disabilities from independently completing their courses and obtaining good grades.

Online stores with poorly designed, inaccessible websites cause grief to disabled people as they are unable to complete their purchases. Inaccessible company websites make it difficult for some employees to be as productive as possible, which can result in them unjustly viewed as liabilities. Government forms and documents that are not accessible make it difficult for some to complete, requiring them to relinquish their privacy while somebody assists them with sensitive information.

All types of information lives on the Internet. To a person with disabilities, an inaccessible Internet is a barrier. Ensuring websites are accessible is the best way to ensuring that everybody can participate in today’s information-driven world.

#3 – The Need For Online Accessibility
read more

#2 – Accessibility Strategy and Assistive Technologies

The World Wide Web has become a universal part of everyday life. Whether at work, school, or home, many tasks are now difficult to complete without access to the internet. Registering for university, applying for a job, filing tax returns, or booking travel are just a few examples of tasks we complete using the Internet.

Because of the convenience and ease of accessing information, people from all walks of life are now connected. Many have varying needs and abilities and may obtain and interpret information using different senses and techniques. Consider the following examples:

#2 – Accessibility Strategy and Assistive Technologies
read more

#1 – What is Online Accessibility?

You’ve probably heard the term “accessibility” at some point. But what does it actually mean?

Accessibility brings to mind different things for different people. Some picture a building with a wheelchair ramp, button-controlled doors, and elevators. Some think of Braille menus at restaurants and signs with tactile print on them in hotels. Others think of fire alarms which light up and make noise, or closed captioning on their televisions. In all of these cases, there is the common theme of making aspects of life easier, or possible, for people with disabilities, giving them the same information and level of access as everybody else.

The word “accessible” is commonly defined as “easy to approach, reach, enter, speak with, or use.” The majority of the definitions don’t even mention disability, or people with special needs! At its core, accessibility refers to the ability to access something, which is, not so coincidentally, exactly what the word sounds like when spoken!

For the purposes of this, and future blogs, accessibility to the web will be discussed primarily in the context of people with disabilities. In today’s ever connected world of technology, accessibility refers to the ability of all people to connect, browse, understand, and interact with a website, program or device.

#1 – What is Online Accessibility?
read more

Creative Design & Website Accessibility

As an Accessibility Specialist, I often hear comments from graphic and web designers that the new Ontario legislated digital accessibility guidelines limit and restrict their creativity. Many graphic designers appear to feel frustrated, angry and unaccepting of the AODA and WCAG 2.0 Level A & AA guidelines. In Ontario we’re entering a new online landscape that is throwing a different set of challenges at the digital industry.

Creative Design & Website Accessibility
read more