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 pairings – The first person listed will stay at their computer:

  1. Dominik, Sebastian W. — A/B
  2. Jayden, Lachlan — C/D
  3. Kiana, Brendan H. — E/F
  4. Melissa, Sully — A/B
  5. Kevin, Carter — C/D
  6. Terrence, Taio — E/F
  7. Robby, Brendan L. — A/B
  8.  Emaan, Cameron J.– C/D
  9. Yaromyr, Tristen — E/F
  10. Maggie, Sebastien S. — A/B
  11. Carlos, Misha — C/D
  12. Adam, Jocelyn — E/F
  13. Vikram, Cameron M., Gustavo – A/B

With your partner(s) you will focus on the letters assigned above beside your names. Read the Do’s and Don’ts from the appropriate poster here – be prepared to share with other students.

  1. Screen readers – Add GoogleVox to Chrome (remove after) and go to the school website to find out when the University of Alberta Info Session is coming for a presentation during flex in the library, 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 Black Panther: Wakanda Forever’s Website via Marvel 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 Landmark Cinemas 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 pairing will present their topic area to the rest of their newly assigned group.

  • What did you learn? What surprised you?
  • What can you do as a web designer to make your site more user friendly to all?
  • Think about the website 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