- **Epistemic status:** #evergreen Web accessibility is the inclusive practice of engineering a website or web application to have no barriers that prevent interactions by people with disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed. An example of how these practices come into play is adding alternative text to an image that allows a screen reader to read to the user that text to convey the meaning. There are a few key categories that web accessibility aims to address: - **Visual:** color blindness, blindness, and various types of low vision and poor eyesight. - **Motor/mobility:** difficulty or inability to use the hands, including tremors, muscle slowness, loss of fine muscle control, etc. - **Auditory:** deafness or hearing impairments. - **Seizures:** Photo epileptic seizures caused by visual strobe or flashing effects. - **Cognitive and intellectual:** Learning difficulties, cognitive and developmental disabilities. Accessibility is not restricted to the list above, but also covers any temporary, situational, and or permanent disability. For example, an individual is buying groceries and got a basket on one hand. They need to be able to manage their application on their cellphone with one hand. Unfortunately, many websites have poor accessibility and is not a topic commonly covered in college, boot camps, or online courses. In 2018 WebAim released a survey on web accessibility and the result was that 92.8% of respondents received no formal schooling on web accessibility [[#^26b7e8]]. ![[Pasted image 20220512092347.png]] Businesses and individuals that don't create accessible websites or web applications could result into loss of business or a lawsuit, such as the Americans Disabilities Act (ADA). The number of lawsuits files in federal court under Title III of the ADA rose in 2018 by 177% (2258) from the previous year (814) [[#^da3693]]. ![[Pasted image 20220512093416.png]] Illustration was retrieved from [Number Of Federal Website Accessibility Lawsuits Nearly Triple, Exceeding 2250 In 2018](https://www.adatitleiii.com/2019/01/number-of-federal-website-accessibility-lawsuits-nearly-triple-exceeding-2250-in-2018/) ## WCAG Principles for Accessibility The Web Content Accessibility Guidelines or WCAG are the main international guidelines for any individual, organization, or business to adhere to making content accessible and avoiding lawsuits. The standards follow 4 main principles: perceivable, operable, understandable and robust. ### Perceivable Users must be able to perceive the information presented through at least one of their senses ### Operable Users must be able to navigate the website effectively utilizing a variation of input methods. If a user cannot interact with a website due to an input method not being available, it is not operable. A basic example is if a website requires the use of a mouse, but the user cannot operate one. ### Understandable Users must be able to understand the information presented to them, as well how to operate the user interface. ### Robust The content of the website must be robust to allow a variety of devices including assistive technologies to interpret it, having the maximum compatibility as technologies evolve. ## Common Web Accessibility Errors ### Headings They are ranked from the highest (`<h1>`) to the lowest (`<h6>`). Headings that have an equal rank are like a new section, and headings with a lower rank are a new subsection. The best way to think about headings is like your website, it's a book or an outline for an essay. Skipping headings rank can create confusion on the content structure, making screen readers have a hard time with it. For example, adding an `<h4>`after an `<h2>`. It is ok to skip ranks when closing a subsection, for example an `<h2>` after an `<h4>` because it closes that `<h4>` subsection. ### Paragraphs In a body of text, line-length can have an impact on reading comprehension for anyone, especially to those with learning or mental disorders such as dyslexia or ADHD. The longer the line-length, the more likely the user's reading comprehension is at risk. To help improve this, the recommended line length is between 50-60 words per line. Others say no more than 80 per line. ### Forms The two most common elements on a form are: - **Input Fields:** There are many types of input fields such as radio buttons, checkboxes, text, password, email, number, date, etc. - **Labels:** Input field identifier #### Each input needs a label Each input field needs context for a screen reader to identify what the user needs to provide the input. Often labels do not exist, or they aren't configured properly. If `<label>` element exists without being pointed to the field it represents, it won't be able to classify the input. That information needs to be connected. You can add the `for` attribute to the `<label>` by utilizing the inputs `id`, for example: ```html <input type="checkbox" name="checkbox" id="checkbox-id" value="value > <label for="checkbox-id">Text</label> ``` #### Descriptive errors Form fields can be required or need to be filled out a certain way before submitting. When a user receives an error, the questions you want to answer for them are: - Can they see there is an error? - Is the error properly tied to the input? - Why are they receiving the error? - How can it be fixed? The important things we need to focus on are `aria-describeby` and `role="alert"` attributes. For example: ```html <input type="email" name="email" aria-describeby="email-input-alert" required> <small role="alert" id="email-input-aler"> Please enter a valid email address </small> ``` ### Images Images provide information and general aesthetic to a website. When an image lacks alternative text to describe, the context of the screen reader won't be able to inform the user. Alternative text is also utilized when the image cannot be retrieved. To add alternative text, you can utilize the `alt` attribute, for example: ```html <img src="smiley.gif" alt="Smiley Face"> ``` ### Links #### Link does not have an href value Often, links do not have an `href` value due to being utilized dynamically via [[JavaScript]] producing a bad user experience for those who cannot use a mouse. Links must have a non-empty `href` value for it to be accessible to keyboard users. This error could also occur when working with images or icons like Font Awesome. Each error could be resolved in different ways, but let's look as to how to resolve it on Font awesome: ```html <a href="https://twitter.com/" aria-label="Twitter"> <i class="fab fa-twitter"></i> </a> ``` Using a non-empty `aria-label` attribute in the `<a>` tag itself, we resolve the accessibility error just like in the inputs ```html <a href="https://twitter.com/"> <i class="fab fa-twitter"> <span class="sr-only">Twitter</span> </i> </a> ``` You can have a hidden block of text in a link. Font Awesome provides a screen-reader only class for this purpose. #### Links that open a new tab or window with no advance warning When a link opens, a new tab or window could be disorienting to people. You can provide advance warning to reduce the issue. The two most common ways are: A link containing an icon for external link and visually hidden text indicating that the link opens a new tab. ```html <a href="https://example.com" target="_blank" rel="noopener"> example link <i class="fas fa-external-link-alt"></i> </a> ``` Indicating withing the link that the URL opens a new tab. ```html <a href="https://example.com" target="_blank" rel="noopener"> example link (opens in a new tab) </a> ``` If you don't want to display the text to non screen reader users. ```html <a href="https://example.com" target="_blank"> example link <span class="screen-reader-only">(opens in a new tab)</span> </a> ``` ```css .screen-reader-only { position: absolute; width: 1px; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; } ``` ### Colors Colors provide a lot for a website, ranging from design and utility. The contrast between the text, background, and images needs to be high enough to see the information on the website. The Web Content Accessibility Guidelines (WCAG) has two levels of contrast ratios: #### WCAG AA Normal Text: 4.5:1 Large Text/Graphics/UI: 3:1 - Base standard to follow and the minimum to pass accessibility - UI components include things such as form input border - Large Text is defined as 14 point (typically 18.66px) and bold or larger, or 18 points (typically 24px) or larger. #### WCAG AA Normal Text: 7:1 Large Text/Graphics/UI: 4:5:1 ### Keyboard Navigation Many individuals rely on keyboard navigation. When building a website or web application that is meant to be interacted with a mouse, it has to also accomplish the same with a keyboard. You can utilize the [tab index attribute](https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute) to solve the problem. --- ## References - “Accessibility - W3C.” Accessed July 21, 2022. <https://www.w3.org/standards/webdesign/accessibility>. - “HTML Standard.” Accessed July 21, 2022. <https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute>. - Initiative (WAI), W3C Web Accessibility. “Introduction to Web Accessibility.” Web Accessibility Initiative (WAI). Accessed July 21, 2022. <https://www.w3.org/WAI/fundamentals/accessibility-intro/>. - “Introduction to Understanding WCAG 2.0 | Understanding WCAG 2.0.” Accessed July 21, 2022. <https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head>. - ADA Title III. “Number Of Federal Website Accessibility Lawsuits Nearly Triple, Exceeding 2250 In 2018,” January 31, 2019. <https://www.adatitleiii.com/2019/01/number-of-federal-website-accessibility-lawsuits-nearly-triple-exceeding-2250-in-2018/>. ^da3693 - Rivenburgh, Kris. “WCAG 101: Understanding the Web Content Accessibility Guidelines.” _WCAG_ (blog), January 12, 2021. <https://wcag.com/resource/what-is-wcag/>. - “Web Accessibility.” In _Wikipedia_, April 4, 2022. <https://en.wikipedia.org/w/index.php?title=Web_accessibility&oldid=1080960287>. - “Web Accessibility: An Introduction [Article] | Treehouse Blog.” Accessed July 21, 2022. <https://blog.teamtreehouse.com/web-accessibility-an-introduction>. ^26b7e8 - “Web Content Accessibility Guidelines.” In _Wikipedia_, July 5, 2022. <https://en.wikipedia.org/w/index.php?title=Web_Content_Accessibility_Guidelines&oldid=1096553753>.