accessibility Archives - Steven's Homestead

Contact Page – Goodbye!

So I used to have a contact page on my website. I thought it would be a simple way for people to contact me instead of needing to rely on having my resume or social media channels (Twitter or LinkedIn) to reach out.  You may be asking yourself why I decided to remove the Contact Page from my site. I hope after reading this post, you will agree that it was something that needed to happen.

Why I got rid of my Contact Page

A few months ago, okay about a year ago really, I decided to update my website to run on this slick new theme. I wanted to showcase my photography and work experience. In addition, I wanted to have a place to blog when the need to write even more got under my skin. When I built this site, I decided to have a contact page so that people interested in one or the other could drop me a message. So, I installed a contact form and had it send those messages to my email. I was pretty happy with the way the site turned out and I still find myself tinkering with various pages when the bug hits.

What I got instead

After installing the Contact Page plugin and activating the page, I started getting about one message every few months. When I got the first message, I was excited that someone other than me was looking at my site. I opened the email to find it was spam  from a company offering to help with SEO on the site. What a let down and a waste or resources for that company, randomly finding personal websites and offering SEO fixes through the contact page. I totally understand this type of selling and why it may seem important but really? It is not like I am a trying to sell anything so was it really worth the effort? I mean, if someone happened to see my photography and wanted to buy it I would probably sell it provided I knew what it would be used for but that is not the intent of this site; after all, there is a shopping cart feature which I have turned off. Lately, these messages have been more frequent about one a day. Really? One a day, you must be getting desperate for business!

I do know about SEO, quite a bit really and I know all of the pages on my site are not optimized for SEO purposes. It gives me something to do when I just want to tinker with my site; update old pages and posts for SEO. When I add new pages and posts, they are all search engine optimized.

As you can see, I needed to remove my Contact Page because I hate to get spam email. Oh and by the way, this blog is SEO ready!

HTML “Button” for Emails

HTML “Button” for Emails

Have you ever been frustrated creating HTML emails with buttons only to see that little red X when you review the email? I have and it is frustrating. With just a little bit of Photoshop and HTML / CSS code you can create a functional button like the one in the email below.

The “View the Digital Edition Here” button is created with a table that has three columns and one row. The first and last cell have images with a link attached and the middle cell is all coded with html and css.

Here is the HTML code:

<table border=”0″ cellpadding=”0″ cellspacing=”0″>

<tr>

<td><a href=”http://www.canontradeshows.com/expo/medevice12/media/DigitalProspectus.pdf” target=”_blank”><img src=”http://canontradeshows.com/expo/email/tssales/allshows13/media/images/prospectus/left.png” width=”35″ height=”42″ hspace=”0″ vspace=”0″ border=”0″ alt=”” /></a></td>

<td style=”font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; color:#000; text-align: center;” bgcolor=”#feb703″><a href=”http://www.canontradeshows.com/expo/medevice12/media/DigitalProspectus.pdf” target=”_blank” style=”text-decoration:none; color:#000;”>View the Digital Edition Here</a></td>

<td><a href=”http://www.canontradeshows.com/expo/medevice12/media/DigitalProspectus.pdf” target=”_blank”><img src=”http://canontradeshows.com/expo/email/tssales/allshows13/media/images/prospectus/right.png” width=”35″ height=”42″ hspace=”0″ vspace=”0″ border=”0″ alt=”” /></a></td>

</tr>

</table>

How to make it work

You first need to develop the ends of your button.  I created the ends by making a small square image with a transparent background.  Then I made a filled circle of yellow and moved half if that off of the square to make the half moon shapes.  After that you insert those into the first to cells and link them to your URL.  Then in the middle cell, insert a URL with the text you want to include as the name of the link.  In the link cell, you want to make sure the background color is the same as your two ends.  When the email renders with images you get the image of the button.  If you are like me and images do not always render with emails you would have the middle cell still showing.

 

Web Accessibility

This week I want to take a further look at accessibility guidelines.  In the United States, there are two guidelines agencies may have to go by where web accessibility is concerned, Section 508, which in most cases are the same as the general WCAG guidelines.  What I found most interesting is the government decided that they needed to have a separate set of guidelines for government agencies.  Instead, the government should have worked with the WAI to make their guidelines more understandable to the general public.

Upon reading about the WCAG guidelines, the most surprising thing to me is some of the content is very vague.  For example, Guideline 1.1 states “Provide text alternatives for all non-text content” (Thatcher); what does that mean?  A person could interpret Guideline 1.1 in two ways; more is better or less is best.  If I put an image on my web page showing the Officers Club on Alcatraz Island should I describe in detail the image or should I simply name the building?  In my opinion, a description of the building would be of no use to people who do not rely on screen readers unless they have images turned off.  I would suggest as an alternative to make the alt-tag simply state Officers Club on Alcatraz Island and then add a D-link tag to describe the image for the person needing a screen reader.  The WCAG needs to address the Guidelines to make them less generic and more useful.

From reading the Guidelines and Section 508 standards, I have decided the Section 508 Standards provide more valuable guidance for web developers.  One tool that I found is the site Web Accessibility Made Easy as posted by NASA.  The chart provides users with understandable information in an easy to use format.  WCAG has a similar page called How to Meet WCAG 2.0 which is a much easier to read document than the original posting.  It seems the WAI realized the massive amount of information provided was to great and many developers would simply ignore the information or claim they did not understand the guidelines.

Works Cited
Thatcher, Jim. Web Accessibility: Web Standards and Regulatory Compliance. New York: friends of ed, 2006.

Universal Design

What is Universal Design?  In a general sense “Universal Design is trying to make products & environments easily used by everyone. With this use of approach it will help people with handicaps, disabled and/or small children” (Expert).  However, for our purposes we are strictly talking about the virtual world and according to the text Universal Design is “Designing for the largest audience possible, regardless of disability or ability to speak the native language”  (Thatcher).

I started learning about Universal Design while taking a course in Web Accessibility and Usability I thought this totally makes since; a few key things I learned were the length of links, testing with experienced users, and fixing an existing site.  According to Mark DuBois, web links should be more than four characters long because “people may not be able to click on a link smaller than four characters” (DuBois).   The book by Jim Thatcher  provides sound logic as to why you should use people with disabilities when testing your site.   By including people with disabilities in the testing phase you can learn from them to improve your site to make it more accessible and more usable.  Furthermore, the text explains how to fix an existing site; one of the key things I learned was prioritizing the repairs, by area or barrier.  If there are a few areas on your site that are highly impactful you should fix those first.  Then you can turn your attention to the guidelines put forth by the WCAG, using the WCAG 1.0 Checkpoints.

Works Cited
DuBois, Mark. CMWEB 150 – Topic 2. 13 August 2010. 19 August 2010 <http://www.screencast.com/users/MarkDuBois/folders/CMWEB150/media/c5100e6a-caaa-4670-8e7a-042a7819e36a>.
Expert, Rheada Answers. Ask Answers. 2010. 30 August 2010 <http://answers.ask.com/Society/Other/what_is_universal_design>.
Thatcher, Jim. Web Accessibility: Web Standards and Regulatory Compliance. New York: Friends of Ed, 2006.