Think Accessibility: Personalize Your Site to Send the Right Message to Visitors with 5 Easy Tips

57 Million Americans have a disability (Internet Accessibility, 2017), and 54% of American adults with a disability use the web 
(Pew Internet Project).

1. Great Design NEEDS Great Code

A great design can make users ooh and ahh, if they can access it. Check out Google Web Standards or W3schools.org for tips on how to write good clean code.

Tips to Create a Good Alt Attribute for Website Images

Tips:

• Anchor Text (tips: 1) The text should describe the image if the image contains information 2) The text should explain where the link goes if the image is inside an <a> element 3) Use alt="" if the image is only for decoration)
• Alt Attribute is used when an image is not present or for screen readers (for accessibility purposes screen readers, like JAWS, read text on a page to people with sight impediments). The alt attribute can also help with search engine optimization. It is important that this tag describes the image it is attached to.
• As a requirement of HTML standards, every image _must _ have an alt attribute.
• Succinct - less than two sentences
• Do not use "image of" or "graphic of"
• Do not repeat text that is outside of the image, if the image conveys text - this should be included in the alt attribute even if it is longer than two sentences.

Resources:

• http://webaim.org/techniques/alttext/
• https://www.w3schools.com/tags/att_img_alt.asp
• http://webaim.org/techniques/images/

Sample Code:

<a class="logo navbar-btn pull-left" href="/" title="Home">
<img src="/logo.png" alt="Home">
</a>

Better:

<a class="logo navbar-btn pull-left" href="/" title="Home | Brand Name">
<img src="/logo.png" alt="Brand Name">
</a>

Write a Search Engine Friendly Meta-Description

(e.g. listed in browser and on search engines - 160-300 characters)

A meta description is approximately 135-300 character snippet that describes the content of a single page of a website or application. It is an HTML tag added in the header of each page and is used by search engines and readers as an excerpt for search results.

Example:

<meta name="description" content="The page description is a couple sentences long."/>

Tips:

• Use an "action" voice with a single call to action
• For Products include merchandise information (e.g. Manufacturer, SKU, price)
• Include rich snippets https://yoast.com/tag/rich-snippets/https://developers.google.com/search/docs/guides/mark-up-content
• If keyword research has been done (for SEO) the main keyword or phrase should be included.
• It should be unique (not repeated on multiple pages)

What is a Meta Title?

(e.g. listed in browser and on search engines)

A meta title is used to name a page within a website. It is coded as a meta tag in the head of HTML. The title within search results uses the Meta Title Tag, it is also used as the page tab name in browsers, as the title when shared on social media, and the default bookmark name if a user saves it.

Tips:

• If keyword research has been done for the page/site integrate at least one relevant keyword
• Ideally the Title Tag will include ALL keywords the page should rank for
• Write for humans - the title should NOT just be a list of words
• 50-60 characters including spaces
• Most important keywords come first
• Do not duplicate
• Accurately describe the page
• The first headline (<h1>) should NOT be the same as the title tag
• Separate ideas, categories, keywords, or even the brand name with pipes (keyword | category | brand)

Example:

<title>Example Title</title>

Primary Keyword – Secondary Keyword | Brand Name