Week 4 Notes

Week 4 Notes!
Here is link to Tuesday's lecture slides: https://zulip-uploads.s3.amazonaws.com/42198/IeGq-0NUiYoT6oPXSidUWsGY/ICS-3-Week-4-Tuesday-Public.pdf.

Here is the link to Thursday's lecture slides: https://zulip-uploads.s3.amazonaws.com/42198/APzi_T5FYY3zLWxmonCzHgCZ/ICS-3-Week-4-Thursday-Public.pdf.

Tuesday (4/19): Important Things to Note

 * No class on Thursday, 4/28
 * Guest lecturer next Tuesday, 4/26.



JavaScript Demo Revised

 * fontSize is the attribute in Javascript to change font size (ex. document.body.style.fontSize = fz + “px”;).
 * Use semantic HTML (ex. nav, footer) vs non-semantic HTML (div, span) as they express intent. More prevalent for people reading the website who have visual impairments.



Important Quote

 * “Our intuition tells that the more an interface is optimized for a person who can see, the less useful that computer will be to people who cannot see.” -Boyd, et al. 1990.
 * Primarily focused on Graphical User Interface for desktop computing and early Windows and Mac interfaces.
 * Accessibility interfaces developed that allowed semantic information to be conveyed.
 * Semantic information would be orange background, white text, etc.
 * Lexical information would be the quote itself.



Question:

 * What is the difference between these two web pages (feel free to explore the source code)?
 * https://markbaldw.in/page1.html.
 * https://markbaldw.in/page2.html.


 * Answer:
 * Different image source from source code.
 * One of them has an extra attribute with a description of the image “alt”.
 * The alt attribute allows an image to have a description in which screen readers can read aloud. It is also useful because in a case where the image is deleted from the server, the description will appear so users will know what it was.
 * The Alt Text attribute is not shown when a page is viewed in the browser, but it becomes visible when an image cannot be loaded.
 * Screen reader is able to interpret the HTML and can convey the image back to the user through text or speech.
 * Main point: Page 1 is more interpretable.
 * You can find the source code by right clicking and opening up web developer tools. Then, the context menu will give you the option to view the source.

(1990 - 1995) OS Accessibility

 * Major operating system vendors begin implementing low-level accessibility interfaces.

(1995) Web accessibility guideline

 * Published by Gregg Vanderheiden in early 1995.

(1995) Web Browser Adoption

 * Adoption of accessible attributes like Alt, adopted by browsers.

(1998) WCAG 1.0 Released

 * Web Content Accessibility Guidelines Released.
 * Largely focused on emphasis, not evaluation.

(2006) ARIA Specification Released

 * Accessible Rich Internet Applications to support making dynamic web page content accessible.
 * Working groups involved in maintaining guidelines developed a new specification called ARIA to make dynamic pages more accessible.
 * Allowed users to notify that info was changing on the page.

(2008) WCAG 2.0 & HTML 5 Released

 * Introduces testable a11y success criteria and more semantic HTML tags.
 * Allowed you to communicate with the server without having to reload the page.



Which one declares meaning or intent better?

 * Version 1 (h tab implies a heading, p represents paragraph).
 * h1 represents heading in the largest default font while div is a generic block element.
 * The nav element provides a section of the page for navigation links.



Semantic HTML

 * HTML tags and the application of HTML/CSS to add meaning to information.
 * Most HTML tags are semantic when used as intended.
 * Non-semantic tags became an integral part of the dynamic web, often misused.
 * In 2008 alongside WCAG 2.0, HTML5 was released.
 * HTML5 introduced many new semantic tags that targeted many of the non-semantic conventions that were used on the web.

A11y Check

 * Visit your favorite website, or the website that you visit most often, and conduct an accessibility check.
 * https://wave.webaim.org/.
 * General observation: lots of alt text errors.



Web Developers

 * Developers follow WCAG and WAI principles as guidelines/checklist when developing a website.
 * Use accessibility checkers to audit their websites.
 * ADVOCATE for both within their organizations (and classes!).

Web Citizens

 * Caption your videos!
 * Describe the images that you post and share online. If you don’t know how, look it up.
 * Many social media platforms will describe how to do this on their help pages.


 * Avoid screen captures of text!
 * ADVOCATE for both within your organization (and classes!).



Twitter ALT

 * Text-based medium (2006-2012).
 * Images were added in 2013.
 * Support for image descriptions added in 2016.
 * https://blog.twitter.com/en_us/a/2016/accessible-images-for-everyone.


 * ALT badge released in 2022.
 * Communicates ALT status, allowing users to reply with image description if not available.
 * Promising approach to raise awareness.

Other ALT Options

 * Browser plugins can be installed to reveal alt text on all images on the web.

ALT Text Guidelines

 * The guidelines are specific to memes, but generally hold true as best practice for any picture.
 * Who are the character(s) in these memes?
 * What actions are the characters performing, if any?
 * What emotions or facial expressions do the character(s) exhibit in these examples?
 * Do you recognize the source of the image (TV show, movie,etc)? If so, what is it?
 * Is there anything notable, or different about the background of the image?



AI/ML

 * otter.ai – software company develops speech to text transcription and translation applications using artificial intelligence.
 * Image Description Bot on Twitter – provides image descriptions for tweets.

Algorithms

 * Automatically add captions to an image.
 * These auto-generated image captions face some challenges when it comes to accurately describing images, but these issues may be resolved overtime with new technology.

Why does it matter?

 * Over 1 billion people worldwide live with some form of disability – World Health Organization.

What is a disability?

 * Defined as a physical/mental impairment that substantially limits one or more major life activity.
 * 4 broad categories:
 * Physical (muscular dystrophy, epilepsy, cerebral palsy).
 * Developmental (Autism, Down’s Syndrome, Fragile X Syndrome).
 * Behavioral/Emotional (ADD, BiPolar, Anxiety, ODD).
 * Sensory Impaired (Deaf/Hard of Hearing, Blind/Visually Impaired).

"You can't participate"

 * Statistics:
 * Over 11 million people in US are dead or hard of hearing.
 * Nearly 5 million people in US are blind/visually impaired.


 * Everyone should be able to actively participate in internet culture.
 * Organizations and machine learning can only take us so far to sure that everyone CAN participate, everyone MUST participate.
 * Global interconnection represents a positive aspect.
 * To ensure that everyone can participate, everyone must participate.

Thursday (4/21): Important Things to Note

 * No class on Thursday, 4/28.
 * Guest Lecturer (Dr. Daniel Garner of Chapman University) on Tuesday 4/26 and topic is Games and the Internet.
 * Midterm paper due soon!

Midterm paper

 * Due Friday 5/6
 * 1500-2000 word essay on a topic of your choice that has appeared in class.
 * Use sources/images/diagrams to support your statements.

Good format to follow for midterm:

 * Introduce new information.
 * Analyze new information and explore how it connects to the topic.
 * Reflect on what you have learned through shared personal experience.
 * Take a position and make a point.
 * Support your position through sources, diagrams, imagery, etc.
 * Demonstrate that you have learned something in class!

Midterm Rubric:

 * 10 pts: Submitted on time and meets length requirement.
 * 1 pt: Well written, cleanly formatted and organized.
 * 1 pt: Topic is connected to course material and introduces new information not covered in class.
 * 1 pt: Clear position, supported by relevant materials.
 * 2 pts: Critical engagement through analysis and reflection.
 * No Late submissions.

Quote To Remember

 * “Web accessibility involves making web content available to all individuals, regardless of any disabilities or environmental constraints they experience” -Mankoff, et al. 2005.

Accessibility > Disability

 * Ultimately, accessibility is about more than just serving the disability community.
 * Accessibility is about access for anyone, anywhere, through any medium or device.
 * From this perspective, accessible thinking and the modern history of computing can drive innovation. For example:
 * Closed Captioning was invented for deaf people.
 * AI has automated that process (ex. otter.ai).
 * Now, we all benefit from this in other settings, such as airports, restaurants, etc.
 * Text messaging evolved from TTY devices built to support deaf telephone use.
 * OCR (Object Character Recognition) and Speech Synthesis invented to allow blind people to read books.
 * Takes inverted text and communicates it through a comprehensible system.

Question:

 * What frustrates or otherwise affects you negatively when visiting web pages?
 * Answer:
 * Load times/speed and pop-up advertisements are common answers (browsers did not always have tools to immediately block pop-up ads).
 * Poorly formatted.
 * Cookies (security implications, some laws require websites tell users that they’re tracking them).
 * When pages don’t have Dark Mode (plug-ins for browsers can enable this).
 * Small text.
 * Text color and contrast.
 * Dark Patterns.
 * When user interface is not easy to navigate.

Guidelines and Evaluation Tools

 * AXE: https://www.deque.com/axe/.
 * Web Accessibility Evaluation Tools List: https://www.w3.org/WAI/ER/tools/.
 * WCAG (Web Content Accessibility Guidelines).
 * WAVE: https://wave.webaim.org/.

Legal Requirements

 * Some laws do exist to support accessibility on the Internet.
 * Title II and Title III of the Americans with Disabilities Act (ADA) and Section 508 of the Rehabilitation Act of 1973.
 * Sect. 508 amends Rehabilitation Act to include electronic info and services.
 * Limited to federal agencies, but serves as an example for commercial and other non-governmental services.

Government Resources

 * https://designsystem.digital.gov/.
 * https://design-system.service.gov.uk/.
 * These design systems are useful to help enhance the features of a webpage (ex: Click Here buttons are often not useful because they give us no information on where the webpage will take us).



Yet...

 * “Perception of the state of web accessibility has generally not changed in recent years. Respondents without disabilities tend to be more positive about recent progress (47.4% thought it has become more accessible) than those with disabilities (38.6% thought it has become more accessible).”
 * “Perceptions of social media accessibility are generally unchanged over the last several years.”
 * https://webaim.org/projects/screenreadersurvey9/.

Social Pressure as a Solution?

 * “Unfortunately, many apps fail to implement accessibility guidelines, including flagship corporate apps (e.g., as of August 2016, this paper finds missing metadata in current Android apps for Wells Fargo and Yelp that makes key functionality inaccessible). The problem is analogous to developer failure to provide alternative text for images on the web [6] or to implement accessibility guidelines in desktop applications”. – Source 1 (Zhang, 2017).
 * Youtube video: Interaction Proxies for Runtime Repair and Enhancement of Mobile Application Accessibility, https://www.youtube.com/watch?v=v15FfDAsf04.
 * Video is saying that there is an app that does not have accessibility features built into, so they are overlaying accessible features on top of that application (text to speech, etc.).
 * Use this tool to add accessibility to applications.

Case Study: Discord

 * A community closed off from Discord: https://www.reddit.com/r/discordapp/comments/69dsbt/a_community_closed_off_from_discord/.
 * A post /r/discordapp by a blind user in 2018.
 * “I'm very sorry to hear about your community's experience with our customer care. I can assure you we take all support tickets, twitter requests, and general emails with the utmost consideration. With that said, unfortunately at the moment most of our app is not setup for screenreaders, but it is something that we want to do in the future.”
 * “I’m going to explore this topic with our development and design team. I'm afraid I can't guarantee anything at this point. Two things to remember are that A) building things is generally harder than it seems, especially since we never want to implement something hastily or half-assed and B) We have to prioritize our small engineering teams to work extremely aggressively -- which means we lean towards building things that affect the most people. If we could wave a magic wand we’d absolutely implement this yesterday, though.”

Is Discord’s position fair? Why or why not? It’s been 4 years, has Discord made any progress?

 * Discord may not prioritize people with disabilities or even acknowledge them.
 * The response made by Discord implied that accessibility is not a priority for the team and that blind users do not constitute a large enough population to prompt attention.


 * However, the user interface is visually appealing.
 * It was noted that Discord's main monetization method relies on visual products that range from making the user's profile look more appealing to allowing more functionality when sharing visual media (streaming, server emojis, etc.) but these services can still be applicable to blind users who have friends that can see the media being shared.


 * Yes, Discord announced through Twitter that they adopted: reduced motion, accessibility, tabText to speech function, and Gifs/animated emojis.
 * https://caniplaythat.com/2021/05/04/discord-announces-accessibility-menu/#:~:text=Announced%20through%20Twitter%2C%20Discord%20announced,and%20text%2Dto%2Dspeech.


 * As of November 18, 2021, Discord has added a feature that allows users to include alt text for images they send.
 * The Verge's article "Discord now lets you send up to 10 (accessible) memes at a time".