accessibility

Class Tuesday, January 28, 2020

 Today’s goals:

  • Develop an understanding of how different people use & experience websites by putting yourself in their shoes
  • Explore how to make websites usable for everyone

 Today’s featured site:

 About Website Accessibility

Class site: Let’s look at the accessibility tool on our class site and its different options

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 colors with high contrast and avoid using color exclusively to convey meaning/importance
– Use standard HTML and ARIA (Accessing Rich Internet Applications) roles
– Caption video and transcribe other audio
– Make link text descriptive so that it can be understood out of context

    Website Accessibility

  • You will be broken into pairs or groups and will focus on a certain user group. Read the Do’s and Don’ts and be prepared to explain them later to the class.
    • Screen readers
      Read the Do’s and Don’ts poster .
      Add GoogleVox to Chrome (remove after) and go to the school website  to find out what’s for lunch tomorrow.
      Try using only the Tab key on your keyboard; no mouse!
      How easy or hard was this? What issues did you face?
    • Dyslexia
      Read the Do’s and Don’ts on your poster .
      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.
    • Low vision and color-blindness
      Read the Do’s and Don’ts poster .
      Go to https://www.toptal.com/designers/colorfilter  and look at how Amazon.com (type domain into toptal) looks to people with different types of color blindness (also try http://colorfuzz.com/  if toptal is too slow OR install this Chrome Extension  and choose different types of colorblindess under the Site menu to see how Amazon looks).
      Compare how Amazon looks to people with color blindness and people without it- how does it look different? Do you think Amazon does a good job of helping people with color blindness navigate the site and determine what’s important? Why or why not?
    • Hard of hearing
      Read the Do’s and Don’ts poster .
      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?
    • Autism
      Read the Do’s and Don’ts on your poster .
      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.
    • Physical or motor disabilities
      Read the Do’s and Don’ts poster .
      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