Accessibility

Posted on by tchastkavich

Shape of the Day:

  • Trying to empathize with different people who use & experience websites.
  • Explore different ways to make websites usable for everyone

Website of the Day:

http://metrocosm.com/ – check out some cool collated data from the United states

 1. Learning About Website Accessibility

From webprofessionals.org:

The problem:
Due to the multimedia nature of the web and the poor design of some websites, many Internet users cannot access the full range of resources. Some visitors cannot see graphics, cannot hear audio, cannot operate a mouse, use slow Internet connections and modems or equipment that cannot easily download large files, or have difficulty navigating sites that are poorly organized with unclear directions because they have learning disabilities, speak English as a second language, or are younger/older than the average user.

The solution
Accessible design is a design process in which the needs of people with disabilities are specifically considered. Accessibility sometimes refers to the characteristic that products, services, and facilities can be independently used by people with a variety of disabilities.
– Maintain a simple, consistent page layout throughout your site
– Keep backgrounds simple
– Use standard HTML
– Caption video and transcribe other audio
– Make link text descriptive so that it can be understood out of context

Let’s try to experience and learn more about Website Accessibility

Here are your groups/pairings – The first person listed will stay at their computer:

  1. Brody, Darian
  2. Aiden, Noah
  3. Sheldon, Andrei
  4. Christian Caldwell, Ethan, Ian
  5. Christian Chidiac, Joshua
  6. Denmark, Dylan

With your partner(s) you will focus on the matching numbered user group below. Read the Do’s and Don’ts from the appropriate poster here and be prepared to explain them later to the class.

  1. Screen readers – Add GoogleVox to Chrome (remove after) and go to the school website to find out when the SFU School of Interactive Arts and Technology is coming for a presentation, you’ll need to go to the Calendar. Try using only the Tab key on your keyboard; no mouse! How easy or hard was this? What issues did you face?
  2. Dyslexia – Find two websites- one that is a good example of making a site more accessible to people with dyslexia and one that needs work and has a lot of Don’ts.
  3. Low vision and color-blindness – Go to https://www.toptal.com/designers/colorfilter and look at how NHL.com looks to people with different types of color blindness (also try http://colorfuzz.com/ if toptal is too slow). Do you think NHL.com does a good job of helping people with color blindness navigate the site and determine what’s important (for example, major headlines and information on the current season)? Why or why not?
  4. Hard of hearing – Go to YouTube.com and check out different videos. Do they all have closed captioning? Go to Jumanji’s site and review the home page as well as the videos page. How accessible is it for a deaf person?
  5. Autism – Find two websites- one that is a good example of making a site more accessible to people with autism and one that needs work and has a lot of Don’ts.
  6. Physical or motor disabilities – Go to AMC Assembly Row’s website and see how easy or hard it is to order movie tickets (don’t actually buy them, just try!) using only the Tab key to move and the Enter key to select; no mouse!

Class Discussion
Each group will present their topic area

  • What did you learn? Did anything surprise you?
  • What can you do as a web designer to make your site more user friendly to all?
  • Think about the webpage you just created- would you have to make changes to make it more accessible? How could it be improved?
  • Also see: Chrome Accessibility audit in Developer tools; Color Blindness Color Check; and Web Disability Simulator (Chrome extension)

 Tools and Resources for Website Accessibility