Accessibility Dump

**## Divergent Learning Experiences According to the CDC, one in four, or 26% of the population, lives with a disability. Many who do not call themselves disabled still have relevant impairment issues. Someone with visual astigmatism may wear glasses but not consider themselves disabled. Impairments like this may exist in many different ways, and learning environments must be geared toward accessibility. In addition to being the right thing to do, it is also a legal compliance mandate under the Americans with Disabilities Act.  Disability Impacts All of Us Infographic | CDC https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html !Disability Impacts ALL of US. 61 million adults in the United States live with a disability.

Visual, Auditory, & Speech Impairments

Visual Impairments can include blindness, light sensitivity, near/far-sightedness, and many others. Auditory impairments can include deafness, mixed hearing loss, auditory sensitivities, and painful conditions like Tinnitus. Speech disorders in adults are very common and can include issues rooted in anxiety, brain injuries, and medical conditions. Some cognitive impairments can impact processing processes, such as with Autism Spectrum Disorders. Sometimes impairments are related to environment. Listening along while in a coffee shop. Speaking based participation in a library. Maintaining visual focus on a smart phone while driving. These all are very common.  !See no evil, hear no evil, speak no evil. What Are the Types of Visual Impairments? | TekWay | StrongGo - Tactile Warning Systems Visual and Auditory Processing Disorders | LD OnLine

Sensory Processing

Sensory processing may not impair someone’s ability to hear or see content physically but may make following along very uncomfortable. At a minimum, this detracts from learning, but at worst, this can cause pain and injury. An extreme and well known about this is epileptic seizures caused by flashing animations. Lesser known examples may be a phenomenon called Autistic Shutdown and Overload. Shutdown and Overload aren’t unique to Autism but are very common in Autistic People.  What Does An Autistic Shutdown Feel Like - AutismTalkClub.com

Hypersensitivity vs. Hyposensitivity

The Natural Variation in sensory experiences behaves like a Bell Curve. The Bell Curve is a concept in Statistics and Psychology that outlines Normal Distribution. For Hypo-Sensitive Individuals, you may need to dim lights in the room and provide quiet space. For Hyper-Sensitive Individuals, you may need very colorful, concise, and exciting content to capture their attention. This may look like having a worksheet as well as a video explaining the same materials. 

Figure 1.1 Sensory Experience Distribution

 Figure by April. Template from Wikimedia Commons.

What are Synesthesia and Synesthetic Learning?

Synesthesia is a sometimes desirable and sometimes unpleasant sensory experience that is sometimes an effect of mind-altering drugs. It is often described as ‘Seeing sounds’ or ‘tasting colors.’ It is a mixing of sensory experiences to achieve something unique. As an unpleasant experience, sometimes someone can hear the ringing of electrical appliances. As an ideal experience, it is making learning tools tap into multiple senses, making sense independently in more than one way. Often structured video curriculums will have content length times next to each section. This is helpful as a structural guide.  Accessibility/Assistive Technology for Blind Users (keyboard navigation, screen readers, clear webpage hierarchy) are all trendy among all types of computer users because they improve the user experience.**  Additional Learning Resources for Various Types of Emergencies We recommend bookmarking this short guide to your phone so that you can access these tips in a pinch if you find yourself in one of these situations. In this course, we cover Mental Health First Aid. There are a number of emergencies we need more time and resources to delve into in this course, where a little bit of knowledge can go a long way. Here are several, along with short informational guides. Bookmarking these on a mobile device means that if you are a bystander in one of these situations, you can reference this in a pinch. In a genuine emergency, call 911 or local emergency services. However, these tips may prove helpful in the time it takes for help to dispatch. Any one of these could be their own two-day class:  How to respond to a Drug Overdose and interact with intoxicated people  How to respond to a seizure  How to administer an Epipen Someone experiencing anaphylaxis may require an emergency shot administration right to their thigh. If you have Anaphylactic conditions, it may be a good idea to   Signs you or someone you care about may be in a violent relationship  Warnings and red flags of Human Trafficking to Spot You may be the only safe person a trafficking victim can share that they are in danger with. Have the National Human Trafficking Hotline put as a contact on your phone in the event you ever need it in a pinch. Please do not endanger yourself by helping someone.  How to set effective boundaries as a helper  How to respond to threatening, aggressive, & belligerent behavior Sometimes a person may become unhinged or act in an emergency. Do your best to refrain from engaging or engaging as minimally as possible. If talking is cooling them down, listen. Do not panic. 

Activity

Think about someone in your life who may have either a Mental Illness, a Disability, or even a life-threatening reaction to shellfish. We will write out the text for a business card-sized communication aid. Something that they would benefit from having on them in the event of an emergency. You do not need to make an actual business card, but consider what 40 words may make a difference in an emergency if this card was shared.

How are Blind people considered in Digital Design Principles?

I had a difficult time reading a spreadsheet sent to me. The sheet was clunky, confusing, straining to look at, and difficult to read. Things should be designed for simple and intuitive use. What does this look like with vision impairments? Clunky AI depiction of a spreadsheet document.

Principals of Universal Design

Principle number three of universal design, simple and intuitive use. Principal six: __Low__ __Physical__ __Effort__. Modern world is not generally accessible for folks. I'd like to work towards accessibility in design, and want to learn more about what I can learn and do to make a difference in this.

Barriers, Discrimination, and Lack of Access is killing us

Education. Job. Housing. Public Accomodation. I think about how inaccessible the world can be for disabled folks, whether that be folks with mental illness, neuro-divergencies, or a physical disability. The forty hour work week is not accessible for many people, especially if they are also trying to pursue higher education. I think about how our world lacks putting effort into accessibility for people, and instead puts extreme focus on profit and gate keeping. Higher Education is an example of this gate keeping, as it is not accessible for many. Even with grants, it can often be unmaintainable to pursue education while needing to continue working full time. This can be discouraging, and continue the cycle of poverty.

Americans with Disabilities Act of 1990

In 1990, the Americans with Disabilities Act was signed into federal law. The ADA has five Titles, most of which you referenced naturally. The ADA was written in a way where there is room for the meaning of the provisions to evolve with the progression of technology. Under Title IV, Telecommunications, as well as Title Three, Public Accommodations, there are solid teeth in the legislation to mandate standards of accessibility, in Digital Media Design. Within Telecommunications, which I am not read up on, there are standards around telephones, televisions, advertisements, and Creative Media. Under Public Accommodations (Title III), there are enforceable standards around websites, mainly governed by what is called the WCAG, or Web Content Accessibility Guidelines.

Department of Justice is going after inaccessible website design

On March of 2022, the Department of Justice issued a Media Statement that they are prioritizing resources towards enforcing website accessibility standards, and prosecuting civil suits brought on by complaints about inaccessible Public Accommodations online. If you are a Business or something that could be considered a Public Accommodation, and your content is not compliant/accessible, you could be held liable to pay thousands in fines, on top of have to hire an Accessibility Specialist to help remediate. There are AI widgets which claim to do this, some for a monthly premium, to display a widget on your website with added features to mitigate bad design, but many Disability Advocates have said these are terribly unreliable and unhelpful, and at best provide a very short term solution to what can be compared to having a poorly built building.

Personal Experience

Over the past year I have had the privilege to work online with a mentee in another state who has multiple conditions of blindness, and retains about 30% of his vision. Over all the things we worked on, one of them was me mapping out how he interacts with his Iphone and other Computer Technology. I'm an Android User, and I was curious about how to help adjust settings, like not playing alarms when there were local alerts and stuff (CPTSD from violence, loud noises, and sudden motions or events), making app font readable, etc. My Bachelors is in Psychology. And I am back in school studying Web Development and Design to remediate bad coding practices in websites. I am looking for support in getting my CPACC. (1) IAAP Accessibility Certification: Preparing for the CPACC, Looking Over the Content Outline - YouTube ![[Pasted image 20230214205128.png]]

Tools and Resources

Here are some free tools and resources to check out and play around with.

WCAG Contrast Checker

This is a Browser plug in you can install for free very easily and do Color Contrast testing on pages. I use it when writing and consuming web pages all the time. Color Contrast is often an issue brought up in inaccessible design I'm going to info dump cause I like writing, the safeword is CatDog. If someone is Blind, they are more likely to know they are Blind and seek out accessibility software for their particular type of impairment. One of the most common software are screen readers. All major operating systems and internet browsers have native screen readers. Already installed on, no need for additional software. The problem is, you need some common standard formatting standards for the experience to be pleasant, and for the content to be readable. You got to structure your documents with Heading Conventions, and do them right. It's a super easy practice to learn, and it's a good habit for anyone who writes anything. This is another plug in for browsers called HeadingsMap. You can use it on any web page to view the structure. This is also helpful for navigation. Doing these right in Word processors like Microsoft Word also helps navigation, and you can automatically generate a table of contents. It looks dope on anything over ten pages with good sectioning Also Keyboard Navigation. For different operating systems, software, and internet browsers, there are ways to get around without a mouse. But it can be a terrible experience especially with websites when they aren't structured right. One way to play around with it is to use Tab to navigate forward, Shift Tab to navigate backwards. Enter to select. Hotkey for screen reader would be up to your software and personal settings. use the arrow keys to move up and down a page slowly, and spacebar to scroll down very fast, I think shift + spacebar to scroll up very fast. Here is a site you can tinker on if you want to try https://www.petsradar.com/advice/can-cats-eat-dog-food If you load the page and immediately before clicking anything hit tab, what will come up is 'Skip to Main Content.' This skips to the main section in the HTML, skipping all the header links at the top, and all that jazz. Things that might be helpful, but not every time you load a page from the website. I have seen a second one called 'Skip to Search' similar to that but you can just search for anything and everything that might be on the site. Ther is supposed to be a clearly delineated box when the keyboard mover goes over each element. You can see it happen with some stuff, but not most of it. All the browser things that get selected it makes a box around. The site doesn't have the best ARIA, or Accessibility Rich Internet Applications. It's a way to do your website code that makes it easy for your browser to understand, this is what everything is. This is what everything does. This is how to communicate that best to the user. This is the interview that got me really interested in the subject last year. In the interview Ashlee talks about having a jacket patch that says "No Aria is better than Bad Aria". Also between you and me they are both very nice on the eyes if you catch my drift (I think they are both fine af..). https://www.youtube.com/watch?v=qr0ujkLLgmE&t=6s Getting started with web accessibility with Ashlee Boyer Goodwill Accessibility Audit by April _Check out:_ _“Nothing about me, without me” Center for Disability Rights - NYS_

What is Website Accessibility?

From _Introduction to Web Accessibility | Web Accessibility Initiative (WAI) | W3C_ https://www.w3.org/WAI/fundamentals/accessibility-intro/ “When websites and web tools are properly designed and coded, people with disabilities can use them. However, currently many sites and tools are developed with accessibility barriers that make them difficult or impossible for some people to use. Making the web accessible benefits individuals, businesses, and society. International web standards define what is needed for accessibility. While there are no particular guidelines within the Americans with Disabilities Act of 1990 (ADA), the Department of Justice references the Web Content Accessibility Guidelines 2.0.”

What happens if your website isn’t ADA Compliant?

From _What Is ADA Compliance? (And What It Means for Your Site)_ https://www.webfx.com/blog/marketing/what-is-ada-compliance/ “Unfortunately, if your website isn’t ADA Accessible, you are liable. A lawsuit could be filed against your company if people with disabilities cannot access or use your site. Even if your business didn’t intend to discriminate or exclude people with disabilities from visiting or using your website, you could pay thousands in dollars in lawsuits.” Read more about Epilepsy and Vestibular issues at _Web accessibility for seizures and physical reactions - Accessibility | MDN (mozilla.org)_ Page URL: Workshop Videos Archive - Goodwill Industries of Northwest North Carolina, Inc. (goodwillnwnc.org)

Running Accessibility Checker

www.AccessibilityChecker.org allows you to enter the URL and automatically do a basic accessibility audit for any given webpage. This is what is called an Authenticator service and generally these still miss the majority of issues. This service only audits one page at a time, and generally is done with every page on the website. Here is an image snippet from a page scan. Let’s break it down..

Empty Links

An empty link, also known as a "null link" or "void link," is a hyperlink that does not have a valid destination or URL. This means that when a user clicks on an empty link, nothing happens. Empty links can be problematic for users with disabilities, especially those who use assistive technologies such as screen readers. Screen readers may not be able to identify empty links, and users may not be able to tell that the link is not functional. This can lead to confusion and frustration. In terms of web accessibility, empty links should be avoided as they create barriers for users with disabilities.

Broken ARIA References

Broken ARIA references occur when ARIA (Accessible Rich Internet Applications) attributes are used incorrectly or not at all. ARIA is a set of attributes that provide additional information about the purpose and functionality of web elements, making them more accessible to assistive technologies such as screen readers. Broken ARIA references can prevent assistive technologies from understanding the purpose of an element, making it difficult or impossible for users with disabilities to interact with the web page effectively.

Contrast Errors

While there were some color contrast errors throughout the 2022 site, which have been fixed, the problems that were flagged were not consequential to the functionality and usability of the website. Sometimes elements built into the design get flagged as color contrast errors.

Suspicious Link Text

Suspicious link text is a type of web accessibility issue that occurs when the text used for a hyperlink is not clear or descriptive enough to indicate the purpose or destination of the link. This can be confusing and frustrating for users, especially those who are using assistive technologies such as screen readers. For example, using generic terms like "click here" or "learn more" as link text does not provide users with any information about where the link will take them or what they can expect to find on the linked page. This can make it difficult for users to decide whether to click on the link and can lead to them accidentally navigating to the wrong page or encountering unexpected content.

Missing Form Label

In any form, whether created in code or through a guided interface, every entry should have appropriate labels. This includes a visible label for the user and an ARIA-compliant label explaining the purpose of the form element. For example, a form item labeled "Name" with a small text box would require an ARIA label specifying the purpose and function of the input. The developer did use some ARIA on the 2022 website, but not well. It’s said that ‘No ARIA is better than Bad ARIA.’ If you don’t know how to do it right, don’t do it at all.

What is ARIA?

ARIA (Accessibility Rich Internet Applications) is a set of features incorporated into modern browsers. These features enable various accessibility options, such as screen reading and keyboard navigation. ARIA assists in labeling buttons and links on a website. Consider yourself in a rocketship's cockpit, surrounded by numerous buttons, each with a specific purpose. Proper labeling is essential to prevent misuse and potential disastrous consequences. Similarly, buttons on a website require more than just visual cues. They need clear labels and descriptive names. Color alone is not sufficient for conveying meaning. “Misusing ARIA results in a much more inaccessible experience than when developers do not use ARIA. Developers should try to understand and follow the rules of ARIA, to help provide a more accessible experience to people with disabilities.” From _Top 5 Rules of ARIA | Deque_ https://www.deque.com/blog/top-5-rules-of-aria/

Color Contrast

From _Color contrast - Accessibility | MDN (mozilla.org)_ https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast

Heading Hierarchies

Headings are a feature on every word processor and well made websites used to create a hierarchy of structure. If you go on Microsoft Word, you will find the Heading Menu here:

Why they are important for users and the browser

Headings parse long blocks of text into digestible and readable sections. On the Goodwill site, when there is blocks of text on a page, the developer instinctively used subtitles made with bold slightly larger font. From www.goodwillwnwc.org/services (add alt text and caption what did wrong) The problem is that this is only a visual cue, and not every user is sighted. Using the appropriate Header also encodes meaning into the page itself. Headers can allow Tables of Contents to be automatically generated on longer texts like below: On a Webpage, Headers create structure and are essential for both Screen Readers and Keyboard Navigators. There are widgets and extensions to your browser to automatically list Heading Structure on a page, and allow quick navigation to each section. Such as headingsMap. Notice how many of these Heading 2s(H2s) are for different sections of the page, and not just paragraphs of text? I can click anywhere on that menu and immediately jump to that part of the page.

How to Install Header Hierarchies

As a professional, I've been tasked with organizing lengthy and complex text documents by implementing a well-structured Heading Hierarchy. It's a meticulous and time-consuming process that requires careful attention to detail and adherence to established standards. There are currently no automated solutions available to accomplish this effectively. A human must meticulously review the text, comprehend the information being conveyed, and assign appropriate headings to each section and subsection. While it may appear straightforward, even a minor mistake can necessitate a complete restructuring of the document. To ensure accuracy and maintain browser compatibility, it's important to adhere to the six Heading levels (h1-h6) and avoid skipping between them (for example, from h1 to h4). While creating Heading Hierarchies in Microsoft Word for a text document is one thing, integrating them seamlessly into a website demands a comprehensive understanding of HTML, CSS, and ARIA. This requires a combination of technical proficiency and an eye for detail to ensure that the website is both user-friendly and accessible. What happens here (as indicated with red) is that the browser is looking for the connected h2s and h3s, and when it finds none, gives up. In some cases, this can cause the page to crash when you attempt to use a Screen Reader.

Benefits of Headings

Organizing web pages by headings helps users get a sense of the page’s organization and structure. Visually, headings are presented as larger and more distinct than surrounding text. Making texts larger helps guide the eye around the page. Using headings and making them visually apparent is especially helpful for users with cognitive disabilities. If the underlying code for pages headings is correct, screen reader users can also benefit from headings. Screen reader users can navigate a page according to its headings, listen to a list of all the headings, and skip to a desired heading to begin reading at that point. Screen reader users can use headings to skip repeated blocks of contents like headers, menus, and side bars. In 2017, WebAIm asked how screen reader users preferred to find information on lengthy web pages. Almost 70% of respondents said they preferred to use headings on a page. Clearly, organizing pages using headings is one of the best accessibility strategies available. from _Usability & Web Accessibility (yale.edu)_ https://usability.yale.edu/web-accessibility/articles/headings

Has it been fixed?

Nope. They still misuse the heading hierarchy.

What is Keyboard Navigation?

For those unable, or who prefer not to use a mouse, the keyboard is a primary method of navigating a computer. Other assistive technologies also rely on keyboard navigation, including voice recognition and screen readers. Keyboard navigation is one of the most important Accessibility items. To use Keyboard navigation, you use a combination of TAB, Arrow, Enter, and SpaceBar keys. Tab jumps from one interactive element to another. Enter Activates a link or menu. As does SpaceBar. Arrows can be used to move along the scroll bars of a page, as does SpaceBar if it is not focused on an element. Also used are Home, End, Page Up, and Page Down. What is Keyboard Navigation? From _Keyboard Navigation - Accessibility by Design (colostate.edu)_ https://www.chhs.colostate.edu/accessibility/best-practices-how-tos/keyboard-navigation/

Keyboard Navigation Demonstration

For this hands-on exercise, go to a desktop computer (if you are reading this by text). Connect online and open up a web browser. Any modern web browser will do. Pick a website that you believe is well-designed and professionally made. Some options to offer are: www.ABTech.edu www.HHS.gov https://developer.mozilla.org/en-US/ Without clicking anything on the page, locate and press the [TAB] Key. Press the Tab several times slowly and deliberately and watch what happens on the page. You may be prompted with an option to ‘Skip to Main Content’ or ‘Skip to Search Feature.’ After you will see a clearly delineated box hover over elements of the webpage from left to right, top to bottom. Try pressing [SHIFT] + [TAB] key to go backwards. Press [ENTER] to select an option, and if that option is a link to a new page, start again on the next page. Use the Arrow Keys as well to scroll slowly. Press the [SPACEBAR] key to scroll down faster. Press [SHIFT] + [SPACEBAR] key to scroll up faster. Notice the features of this experience.

Before

While navigating, there would be poorly visible faint dotted lines around the focus area. It was very difficult to engage with visually. This includes very poor color contrast.

After

Today, keyboard navigation works much better on this website. However there is still an issue. In order to navigate past the header, someone needs to tab 17 times. If you are going through multiple pages on this site, that can make for a bad user experience.

Skip to: Functions

For Keyboard Navigators and screen Reader Users, if you have to go through the Navigation Bar and Header content every time you move to a new web page on the site, it gets very tiring. It is a helpful and essential feature to have Skip to Main Content, and Skip to Search Feature, at the very top of the page and at the beginning of Keyboard Tabbing. Skip to Main Content also needs an appropriate tab index to work on legacy browsers.

Why do I care about Keyboard navigation?

Growing up, I was diagnosed with Dysgraphia, which is a disorder affecting handwriting and fine motor skills in the hands. My earliest sports memory is when I was four years old and smashed my finger while attempting to dribble a basketball. It is common for children with Dysgraphia to learn to write with large pencils and grip tools. While I can write adequately as an adult, I occasionally struggle with lapses in grip and motor skills, especially when stressed. Dysgraphia is one of several disabling conditions I have, but it does not define me or my life. It has, however, led me to find using Keyboard Navigation on the computer to be more comfortable and effective. Keyboard Navigation is essential for some users to access websites, while others find it a convenient alternative. I am a Developer with a background in Human Services and Social Work, specializing in Digital Accessibility and Disability Support. Currently, I am a full-time student at Asheville-Buncombe Technical Community College.

Street Clients, Toiled Hands, and Keyboard Skills

Imagine you are working odd manual labor jobs each day with Labor Finders. One day you are doing Roof Tiling, another Demolition. Your hours are long and paying about $11 an hour. Estranged from family and housing insecure, you take what you can get. Every day you come into the Goodwill Career Center to check your email for job postings and responses to applications in hope of something better. Your hands are toiling in pain. Computers were never something you were brought up on, and if we are being honest, using the mouse is not helping. Being new to computers, your wrist and hand are tense and stiff using the mouse because you want to get the movements right, like when somebody is learning to play the piano and their fingers lock up. The mouse doesn’t work well either and the fine motor skills needed to click on buttons is.. At best, annoying. In your work ethic you grew up modeling, we don’t complain when we are in pain. We carry on and suffer in silence. This is the problem with accessibility errors on the computer. People who suffer from them don’t know what is happening. They attribute it to computers being difficult and many times they either don’t want to, or are not in a position to complain.

Client Success: Compliance, or Excellence?

Many clients at Goodwill Career Center lack computer skills due to accessibility barriers. The center can be a better education hub for beginners to have better opportunities. Providing educational materials on the website, like how to have the webpage read aloud, is important for accessibility. A Digital Accessibility Specialist can help optimize the digital experience for clients. Students Explain Digital Accessibility: Content Structure - YouTube (length - 4:15)