Web Accommodations for People with Disabilities

As a frequent web user, we may take for granted how we access the information. Logging onto a computer and loading up google is like a reflex for us now, taking us only a few seconds. But what if it wasn’t that easy? Some people have difficulty accessing and using the web due to disabilities.

There are four different types of accessibility: visual impairment, mobility or dexterity impairment, auditory impairment, and cognitive impairment. Imagine having either of these disabilities and attempting to access the web.

  • With a visual impairment, it would be difficult or even impossible to see the text and images on the screen. Images would mean nothing to you, and you couldn’t enjoy videos. Everything would have to be read out to you, and you’d need a keyboard with braille to navigate.
  • With a mobility or dexterity impairment, you couldn’t use a regular keyboard and mouse. For example, if you were an amputee missing your arms, how would you type? how would you get surf the web? In this case, you could use a head and mouth wand which enables you to speak commands and have the actions shown on the computer screen.
  • With an auditory impairment, you would be hard of hearing or deaf. So you wouldn’t be able to make out the happenings in audio-dominant videos. You would need subtitles on all videos you watch, an interpreter, or a transcript to read.
  • With a cognitive impairment, you could have a range of learning disabilities or there could be a language barrier. When surfing the web, you would come across information that you couldn’t comprehend. People who fall within this bracket of disabilities are the hardest to accommodate because the spectrum is just too broad. But if it was only a language barrier, there are browser plug-ins along with online translators that you could use convert a foreign language characters into text that you could understand, and you can find versions of videos with subtitles.

As you can see, navigating the web with disabilities can be difficult. But with the right software and equipment, anyone can surf the web efficiently.

Techniques For Strong Web Design

When designing for the web, there a couple things you need to take into consideration. Here are the dos and don’ts of web design.

Dos:

  • Keep all file sizes as small as possible for faster downloads
  • Inverted pyramid (put your most important information in the first screenful)
  • Limit the lengths of your page to two or three screenfuls
  • Use same styles for similar elements (eg. all headings in bold red)
  • Break content into small paragraphs
  • Use anti-aliasing in text in graphics (except for under 9p)
  • Save transparent images to png to prevent white halos
  • Provide alt text for images

 

Don’ts:

  • Designing explicitly for one web browser
  • Using too many animations
  • Uploading a page that is not yet finished
  • Setting type in all capital letters, bold, or italics
  • Setting type significantly smaller than the default
  • Making graphics that look like buttons but don’t link to anything
  • Making thumbnail images by scaling down full-size images using width and height properties
  • Centering everything on the page
  • Having different text alignments on one page
  • Using too many colors
  • Using wild patterns for backgrounds
  • Using knock out type for a large body of text
  • Using clipart images

Here are a few examples of good and bad websites…

Good Websites:

www.cvs.com – This site is very clean. The homepage can be fully seen in two scrolls of the mouse. They have clearly defined headers at the top of the page that gives links to their sister-sites. Next to their logo, they have the most popular categories (with accompanying icons) that customers look for when coming to their site. At the bottom of the page, they have more specific links for those who know exactly what they are looking for. This website caters to both types of web users.

www.deerpark.com – The design of this site is as refreshing as its water. There is a peaceful background image, but it doesn’t distract from the rest of the website. The colors reflect the brand. The type is legible and contrasts nicely with the blue background. The links are simple, all the info is contained within the first screenful, so there is no need to scroll.

Bad Websites:

www.getglue.com – When you first log in on this website, the layout is overwhelming. You are bombarded with a ton of information on the front page from people whose activity you follow. If you scroll. you scroll down endlessly at past activities. The tabs at the top offer no description, so you really don’t know where you’re headed until you click on it. You can’t view all the information you want at once; you have to keep clicking and scrolling to see it all. This is bad for users who know what they are looking for and want to reach their information quickly.

www.craigslist.org – HORRIBLE layout. Very overwhelming, just strictly text. Your eyes already feel fatigued after you scroll and scroll, desperately searching for a place to rest your eye on the page. If someone was using a screen reader, I’m sure they’d want to hit their head on the wall after all of this. There is no visual hierarchy, all the text is the same size, and the links are the default links with no design scheme.

Project Definition

Sample Client interview—website planning

Project Name: Pizza Italia

Contacts for this project:

Phone: (202) 589-0899,
Address: 1917 F Street NW, Washington, DC 20005

 

1. Where?

I. Preferred/existing domain name (URL): http://www.pizzaitalianw.com

II. Domain name already registered: No

III. Preferred/existing web server: N/A

2. When?

I. Preferred target date for launching the new site: January 1, 2013

II. Any external factors that influence/affect the schedule: Budget

3. Why?

I. Business problem(s) you hope to solve with this site:

People can order their food online and have it hot and ready to purchase as soon as they get there

II. Primary business objectives/goals for this site:

Increase customer retention, customer convenience, have detailed description of our products

4. Who?

I. Primary customer/target audience:

George Washington University students (late night) Government workers (lunch time)

II. Target audience description

Age: 18-24
Gender: Male/Female
Education: Some College
Occupation: Student, Government employee
Income: Less than $20,000 – up
Preferred browser: Google Chrome, Internet Explorer
Computer Device: Smartphone, desktop computer
Internet skill level: Moderate

 

5. What?

I. Function

  1. Why do your customers need you?
    We sell delicious food at small prices, a huge contrast to the expensiveness of the big city.

What is the most important benefit you offer (from your customers’ perspective)?

Tasty food at convenient times, short lines, great prices

  1. Who are your direct competitors? (include URLs)
    7-Eleven (www.7Eleven.com)
    Subway (www.subway.com)
  1. What do you offer that is different from your competition?
    Big slices of pizza in a variety of flavors
    Spaghetti and meatballs with sauce
    Fresh salads
  1. How do (will) customers use your site? What are their goals?
    See our menu and all that we offer
    Use it to place an order online before picking it up

II. Perception

  1. What are some adjectives describing how you want visitors to perceive the new site?
    Fresh, User-friendly, fun
  1. Is this different than their current perception? N/A
  1. URLs of sites you like. What do you like about these sites?
    www.fiveguys.com – Pretty much the goal of our website, links to a menu, and an order online form

III. Content

  1. Do you have existing content for the site or will you create new content? Who will write the new content?
    The only thing we have is the name of our place, the menu, and ideas for the form. We would need someone to write the content, preferably the owner with a backstory and someone to edit it.
  1. B. Any visuals or content you want to use from your current site or marketing materials (logo, color scheme, navigation, naming conventions, etc.)?
    Logo and color scheme

IV. Technology

  1. Do you already have a content management system?
    No
  1. Do you already have content in a database? Database Type (Access, MySQL, Oracle…)?
    No
  1. List special features you would like to have on the site. For each intermediate or advanced technology, explain how this feature will solve the primary business objectives and benefit the target audience and their goals.
    1. Basic: Search engine
      Yes, to search for specific products and menu information
  1. Intermediate:
  1.                                iv.     Surveys/polls
    Yes, we can conduct popularity polls to find out which item is the most popular so that we can have it available more often
  1. Advanced:
    1.        i.     Customization/personalization for users
      Yes, a custom log in form where users can input what foods they want
  1.      iv.     Rich Internet apps (AJAX, Flash, Java, Silverlight)
    Yes, for our college demographic to be able to order food from their smartphone

6. How will you use resources to pay for, market, and maintain the site?

I. Budget

  1. Pick Two: Low Cost, Fast Timeline, Full Featured
    Low Cost, Fast Timeline

II. Marketing

  1. Do you have a marketing strategy in mind to promote this project?
    Tell the customers about the upcoming site, hopefully they’ll like the idea and support

If yes, could you describe it?
Increased business

III. Maintenance

  1. How do you plan to keep the content on the site current?
    Update the polls/surveys
  1. How often should content change on your site?
    Once a month
  1. Who is responsible for providing and updating content?
    Someone on our staff

Sample Project brief

1. Project name: Pizza Italia NW

2. Big picture: This is a website that serves to inform our customers of our menu and give them the option to order online.

3. Project summary: The website will have a full menu for customers to look at, and a custom order form that customers can use to place their order for pick up.

4. Business objectives/goals:
With this website, Pizza Italia hopes to create more convience for the customer. They want to provide a place where returning customers can order online and pick it up, and for new customers to discover their shop and be able to look at their menu.

5. Preferred date for launch by client:
Pizza Italia wants the website to be up by the start of the year, January 1, 2013.

6. Target audience:
The target audience are college kids from George Washington University, and also government employees.

7. Perception strategy:
Current Perception: go to restaurant, order food, wait for it to be made, and then receive and pay for and either sit down or leave.
Desired Perception: Have food already hot and ready for me when I arrive
Strategy: On the website, have a form where people can order in advance what they want, estimate a ready time, and they can come in and skip the line and pick it up

8. Message Strategy:
Primary message: Pizza Italia caters to your busy schedule.
Strategy: Make everything easy to access, emphasizing important aspect of the site, like menu and ordering online so that people can get on the website, quickly find the information that they are looking for.

9. Competitive Advantages:
Pizza Italia has friendly staff, customizable, hot and fresh food and consistency in flavors.

Website Usability

When designing a website, it is best to have the intended user in mind. You have to consider each user’s experience level with the web and design a site that meets every potential viewer’s needs. Just because you like websites with flashy graphics and funky colors, depending on the context of your website, that may not be appropriate.

If one was designing a website for a corporate company, using all the colors of the rainbow would not be a good idea. Most companies already have a set list of colors that make up their brand, so their website’s color scheme should be based around those colors.

As a summer intern with the Office of Personnel Management’s Office of Diversity and Inclusion (ODI), a few things I learned about website usability was that a website should be easy to get to, appealing, and organized in a way that makes it easy for the viewer to find what they’re looking for.

When I worked on ODI’s webpage, in the title bar an acronym was added so that when someone wanted to find our page, they could just type in the short 3-letter acronym instead of having to type in the full name of the page. This increased traffic and reader retention, as it took less time for government employees to find our page.

One of my supervisors, Bruce, when looking at my progress in designing the site, noted that a viewer would have to do too much scrolling on the page to view all of the content. He said that “a person should only have to do one or two scrolls to see all the information on the main page.” Using that advice, I went back and revised the page, using a table with graphic icons and headers to make the information more organized, saving space, but also giving the viewer a place to rest their eyes (example of table layout on ODI homepage). This feedback was great. Viewers loved how easy it was to navigate the page, and on subsequent visits, they were able to associate the icons with the subjects they pertained to.

All of these changes made the website more user-friendly, and increased the overall experience for the viewer. This is key to maximizing website usability.

Hello there.

Thanks for checking out my blog.

My name is Marilyn and I am a VCD major at Stevenson University. But on to the interesting stuff.

I was born and raised in Maryland; Not in Baltimore County, but in Prince George’s. That makes me a part of the DMV. So even though I live in-state, it’s a pain getting back home from school since the Baltimore and DC metros are not connected (they should be). I’ve been interested in graphic design since 2006. Back before I had Photoshop, I was doing the best I could on Microsoft Paint (oh, the struggle). Some of my hobbies include video editing and Photoshopping pictures of celebrities. My video edits focus around mostly these celebrities: Aaliyah, Bow Wow, Chris Brown & Rihanna. I currently have over 50 videos spread out on 3 different YouTube accounts: Skibop, SkibopDaSequel, and the most recent account Skibop3x. As far as Photoshop edits go, I love doing photo manipulations of celebrities. Basically, I take two separate images and join them together to make it look as if they were taken at the same event. My current obsessions right now: kdramas and kpop. Yep I’m about that Korean life. I wish Stevenson offered it as a foreign language class. But anyways, that’s enough about me…

About Web Design I…

What I hope to learn in Web Design I is how to write HTML. I figure that web designers memorize all of the syntax needed for composing a website. I want to be able to do that. To be honest, I’m a little intimidated by HTML because of the way it’s coded. I’ve worked with CSS in the past, and it’s straight forward. The pairs of tags are identical. So if you start with {column}, you end with {column}. With HTML, you must add a forward slash to the end tag and that’s easy to forget. So I know I’ll struggle with that, but I hope that I’ll be able to remember by the end of the semester.