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:
- http://www.marbiru.com/days/ – You’re HOW old?
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
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 View 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 View poster . Go to https://www.toptal.com/designers/colorfilter and look at how Amazon.com looks to people with different types of color blindness (also try http://colorfuzz.com/ if toptal is too slow). Do you think Amazon does a good job of helping people with color blindness navigate the site and determine what’s important (for example, the price cut for the Echo)? Why or why not?
- Hard of hearing View 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 View 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
- http://contrast-finder.tanaguru.com/result.html– Helps you find contrasting colors for improved text readability
- http://www.washington.edu/accessibility/web/– Great for tips and approaches
- https://www.24a11y.com/2017/accessibility-testing-tools-desktop-mobile-websites/– Comprehensive list of tools and resources
- https://a11y-style-guide.com/style-guide/section-general.html– Style guide for accessibility
- https://moritzgiessmann.de/accessibility-cheatsheet/– Accessibility cheatsheet