Lunch & Learn


Web Accessibility

accessibility icon

Making the Web a Welcoming Place for All

yikesinc.github.io/learn-a11y

Jaime Medvesky / @yikesinc / yikesinc.com

accessibility icon

"A11Y"

It's a Number! It's a Word!
...It's a Numeronym!

( a number-based word )
-An abbreviation for "accessibility"

AccessibilitY

AccessibilitY

\/

( 11 letters )

A11Y

Today's Topics


  • What is A11Y?
  • Types of Disabilities
  • Why Does A11Y Matter?
  • A11Y Benefits
  • Factors in The User Experience
  • Desktop vs. Mobile
  • A11Y Guidelines
  • How to Make Your Site Accessible
  • How to Test Site
  • Resources

What is A11y?


  • .

    Accessibility (General)
    The practice of making information, activities, and/or environments sensible, meaningful, and usable for as many people as possible.

    (Ramps/Elevators, Parking)

  • .

    Digital Accessibility
    The process of removing barriers in digital content to ensure they’re inclusive, beneficial, and easy to use for people of all abilities.

    (eBooks, PDFs, Apps/Gaming)

  • .

    Web Accessibility
    The practice of making sure that websites and related tools can be used by everyone, regardless of their ability.1

    (Websites, Audio, Video)

Types of Disabilities

  • Visual Impairments
    • Low Vision / Blindness
    • Lost Glasses
    • Sun in Eyes
  • Hearing Impairments
    • Hard of Hearing / Deafness
    • Ear Infection
    • Loud environment
  • Speech Impairments
    • Non-verbal
    • Laryngitis
    • Heavy accent
  • Motor Disabilities
    • Rheumatoid Arthritis
    • Missing or Broken Arm
    • Holding Baby
  • Cognitive Disabilities
    • Epilepsy, Dyslexia, ADHD
    • Brain Injury
    • Sleep-Deprived

The Persona Spectrum

~Infographic by Design Positive

Why Does A11Y Matter?


Let's look at some of the latest stats...

  • 16% - An estimated 16% of the world’s population has a disability.2

    ...that's about 1.3 billion people!

  • 27% - 1 in 4 Americans, or 27% live with some type of disability.3

    ...that's almost 90 million people!

  • 2 billion - By 2030, more than 2 billion people will need to use
    assistive products, such as screen readers.2

  • 71 million - There are 71 million baby boomers, who carry
    $548 Billion in discretionary spending.4

  • 70% - Over 70% of people with disabilities have a non-visible
    disability, such as cognitive or learning impairments.5

...(continued)...

  • 3% - Only 3% of the internet is accessible to people with disabilities.6

  • 4,000 - Over 4,000 lawsuits were filed
    in 2022.7

  • 400% - There has been a 400% increase
    in the number of ADA-related
    lawsuits.6

  • 51.4 - On average, there are 51.4
    accessibility errors per home page
    of the top one million websites.8 most common wcag failures graph

  • 1.5% - Only a 1.5% decrease in
    a11y failures over last 4 years.7 percent of home pages with accessibility failures over last four years chart

Disability Stats

Benefits of A11Y


  • A11y benefits everyone!
  • "Curb-cut Effect" - the phenomenon of disability-friendly features being used and appreciated by a larger group than the people they were designed for.
  • Did you know? - New technology and innovation are mostly driven by people with disabilities:
    • Typewriter
    • Email
    • The Internet
    • Audiobooks
    • Speech-to-Text
    • Phone Mounts
    • Cruise Control
    • Driverless Cars
    • Electronic Toothbrushes
    • Bendy Straws
    • Can Openers

Company/Website Benefits


  • Improve User Experience
  • Enhance Search Engine Optimization (SEO)
  • Increase Profitability
  • Competitive Advantage
  • Reach a Wider Audience
  • Improve Reputation
  • Increase Website Usability
  • Meet Legal Requirements
  • Demonstrate Ethical Responsibility
  • Future-Proof Your Website

A11Y Factors to Consider


  • What Device? - (Mobile, iPad, Desktop )
  • Which Browser? - (Chrome, Firefox, Safari )
  • Disability? - (Visual, Audible, Cognitive )
  • Permanent, Temporary or Situational Disability?
  • Mouse or Keyboard Commands?
  • Using Assistive Technologies? - (Screen-reader, Magnification, Switch controls...)

Assistive Technology


  • Any device or software designed to assist people with disabilities in various aspects of their lives, such as accessing web content.
  • Examples:
    • Screen readers - JAWS or NVDA for (Windows), VoiceOver for (Mac and iOS)
    • Magnifiers
    • Voice Recognition
    • Braille Displays
    • Text-to-Speech Software
    • Switch controls
    • Adaptive Apps
clipart of various assistive technologies

The Screen Reader


  • A software program that takes the on-screen text from a website or computer screen and reads it out loud for users with visual impairments.
  • Allows for visual cues, such as images, graphics or table headers to be perceived when additional codes are provided within the document:
    • Image alt tags
    • Key landmarks
    • Navigation headings
    • Form labels
  • Keyboard commands such as [TAB], [SPACEBAR], [ENTER] are used to instruct the screen reader to perform actions such as read a word, a line or full screen of text, announce the location of the cursor or "focused" item, and more.

The Screen Reader Experience


Desktop versus Mobile


Desktop:

  • Keyboard Navigation
  • Focus and Interactive Elements
  • Screen Readers
  • Screen Magnifiers
  • High Contrast and Font Options
  • Captions and Transcripts

Mobile:

  • Mobile Keyboard Accessibility
  • Touch and Gesture A11Y
  • Voice Assistants
  • Magnifications
  • Responsive Design
  • Speech to Text
  • Offline Accessibility

A11Y Guidelines & Standards


WCAG 2.0

Web Content Accessibility Guidelines

  • The set of web accessibility guidelines which are the main internationally agreed upon standards for the World Wide Web
  • Established to help content authors and developers create web content that is accessible for people of all abilities and disabilities
  • Organized by four (4) main principles, with three (3) levels of compliance:
  • P
    Perceivable
  • O
    Operable
  • U
    Understandable
  • R
    Robust

Level 1   Level 2    Level 3

AAA           AA            A

WCAG Standards


Perceivable:

-Content is presented so it can be to users in ways they can perceive.

  • Images, navigation menu, links, headers
  • Color contrast ratios
  • Audio/video - captions, subtitles
  • Proper grammar, no abbreviations

Operable:

-User interface components and navigation is operable.

  • Skip link, ARIA roles
  • Keyboard accessible, focus tab order
  • Flow of information (headings tags, titles)
  • Audio/video controls

Understandable:

-Information and the operation of UI is understandable.

  • Keyboard accessible, focus tab order
  • Flow of information (headings tags, titles)
  • Pause/controls on moving objects

Robust:

-Content is understandable for assistive technologies.

  • Proper nesting for headings
  • Function/state of components
  • Semantic HTML/landmarks (header, nav, main, footer..)
  • Screen change announcements

A11Y Legal Terms


  • ADA - The Americans with Disabilities Act (ADA) is a U.S. federal law that “prohibits discrimination against people with disabilities in several areas.
  • WAI/W3C - Web Accessibility Initiative / World Wide Web Consortium - the main international standards organization for the Internet.
  • Title III - (ADA) - details accessibility to public accommodations
  • Section 508 - (mostly for federal agencies) - an amendment to the U.S. Rehabilitation Act of 1973 introduced to eliminate barriers in information technology

How to Make your Site Accessible


  • Understand that it is an ongoing process
  • Start with automated testing tools and make the easy changes that are within budget
  • Graduate to human and keyboard testing and taking on the larger tasks
  • Avoid Plugins and Overlay Widgets that use AI and claim to short-cut providers

A11Y for Content


  • Ensure all page sections have a descriptive heading, even if it's not visible.
    Tip: Assign the class [screen-reader-text] to include a heading but not be displayed for sighted users.
  • Use correct hierarchy/nesting for heading tags:

    Heading 1

    Heading 2

    ...some content here...

    Heading 3

    ...some content here...

    Heading 2

    ...some content here...

    Tip: To apply a style associated with a specific heading tag, assign a CSS style named after the heading tag (".h2"), then add this class to the heading:
    CSS: h2, .h2 {font-size:40px;}
    HTML: [h3 class="h2"] HEADING 3 [/h3]
    ->

    HEADING 3

  • Use lists instead of paragraphs whenever possible.
  • Provide a Table of Contents in a fixed sidebar for quick access to specific sections of content.
  • Avoid abbreviations, such as U.S. states ("NJ", "PA"), months ("Jan"), days ("Fri").
  • Spell characters out, such as "-" ("1 to 3"), "1st" ("first"), "ie" ("for example"), "etc" ("and so on" ).
  • Write out full name for acronyms at least two (2) times, then use just the acronym along with abbr tag after that
  • Avoid writing content in ALL CAPS.
    Tip: To write normal text but display as uppercase, apply style:
    text-transform: uppercase
  • Use descriptive and meaningful text for links, such as "Read more about web accessibility" instead of "Click here".
  • Keep language simple and avoid jargon or complex words - "Submission received" versus "We Got Your Feedback"

A11Y for Images


  • All images should include an image alt tag.
    • Use an empty alt tag for decorative images - alt="".
    • Provide an alt description as it relates to the content for all non-decorative images.

      For example: Article on King Henry III:

      -History article - "King Henry VIII of England looking stern and wearing lavish royal clothing."

      -Fashion article - "King Henry VIII of England wearing a fur-trimmed hat and cape, and bedazzled silver and gold jewelry."
  • For icons, use inline SVG or inline images, instead of icons that use font-family or css "content" style to display.
    • Decorative - apply aria-hidden="true"
    • Non-decorative - assign title and SVG attributes.

A11Y for Audio/Video


  • Avoid auto-playing audio/video
  • Provide controls to turn on video captions and subtitles (non-auditory), or transcriptions (non-visual)
  • Make sure video controls are always available
  • Transcriptions services available - but always double-check it, especially if done by AI
  • Include Pause/Play controls on Carousels that slide automatically (Fade doesn't need since it's subtle)

A11Y for Design and Development


Design:

  • Check all color contrast ratios
  • Use consistent and typical styling throughout site, such as underline links and color blue / purple
  • Largest font-size, line-height and padding that design allows
  • Specific states of select elements (:hover, :focus, :active) should be styled to be unique and as obvious as possible
  • Focus should be very obvious to show "at a glance" where you are on the page

Development:

  • Include "Skip to main" link before navigation that is visible when it receives focus, and that matches theme style.
  • Use semantic HTML (landmark roles) whenever possible - (< main >, < header >, < footer >).
  • Avoid using the "content" css style to display characters.
  • Ensure proper use of ARIA attributes and only use when necessary.
  • For lists, include a heading with a unique ID, then add < aria-labelledby > to the < ul > that has a value matching the heading ID.
  • Apply semantic role/scope attributes to < table >
  • Identify language << SHOW EXAMPLE >>

How to Test A11Y


Automated:

Manually:

  • Listen for yourself - Turn on screen-reader, use keyboard commands (Tab/Enter/Spacebar)
  • Text-only Zoom in - (browser setting) - (Ctrl + UpArrow) to zoom-in at 200% - ensure nothing is cut off or falls off
  • Spectrum - (Chrome extension) - test various types of color-blindness
  • Turn off CSS and JS - ensure content is still accessible

Resources


Testing:

  • Accessibility Insights for Web - (Chrome & MS Edge only, extension) - find and fix accessibility issues in web apps and sites with both automated and assessment-driven testing tools
  • WAVE testing tool - automated accessibility testing tool (also available as a browser extension/add-on)
  • How to Test Accessibility with WAVE - 11 minute video that demonstrates how to use WAVE for accessibility testing
  • Lighthouse - (Chrome only, extension) - performs an audit for a specific web page and generates a report with a full range of factors, such as Performance, Accessibility, Best Practices, and SEO
  • axe DevTools - (Firefox only, add-on) - automated testing tool to find and fix common accessibility issues on all web pages, or a specific web page
  • Markup Validation Service - checks the validity of HTML code for a specific web page
  • CommonLook PDF Validator - PDF Validator plugin for Adobe Acrobat Pro
  • Readability Test (FX Tools)

Resources


Design:

  • Color Contrast Checker - enter foreground and/or background color to find out the contrast ratio
  • Link Color Contrast Checker - color contrast checker specifically for link text color, relative to normal text color
  • Contrast Checker Bookmarklet - install to display a miniature version of the Contrast Checker in any web page
  • Color Safe - enter a background color (and other font-based styles) to generate recommendations for text colors that meet WCAG Guidelines
  • Web Safe Colors, Safe pallete - view web safe background and foreground color combinations in a visible grid
  • Coblis - Color Blindness Simulator - upload an image to see how it appears for various types of color blindness
  • wtfocus - Enter various styles to preview focus styles for various actionable elements such as links, buttons, and inputs such as text fields, selects (dropdowns), checkboxes, and radio boxes.

Resources


Checklists & Cheat-sheets:

Resources


Learning Resources:

Other Articles/Videos:

Footnotes


Thank You!

A11Y Glossary


  • A11Y - (pronounced "A - eleven - Y") - a "numeronym", or a number-based acronym, which uses the first and last letter from the word "accessibility" and inserts the number of letters found in between to form a convenient and easy-to-recognize abbreviation.

  • Accessibility (Web) - uses the principle of universal design to make websites, applications, and content usable by persons with or without disabilities who may or may not be using assistive technologies to access the site.

  • ADA (Americans with Disabilities Act) - a U.S. federal law that prohibits discrimination against people with disabilities in several areas, including employment, transportation, public accommodations, communications and access to state and local government programs and services.

  • Alt Text (also known as Alternative Tag, or Image Alt Tag)- provides text equivalents for non-text content, such a the short text that describes an image.

  • ARIA (Accessible Rich Internet Applications) - set of roles, states, and properties that are added as tags to HTML elements to describe the purpose of common interface elements that lack semantic HTML tags, such as notes, alerts, search bars, and menus, and enhance the accessibility of HTML for screen readers beyond what plain HTML can do.

  • Assistive Technologies - any device (item, piece of equipment, software, or system) used to increase, maintain, or improve the functional capabilities of a person with a disability, including screen readers, head and mouth wands, speech recognition software, adaptive keyboards, eye-tracking systems, and more.

A11Y Glossary


  • Audio Browser -a web browser that provides a text-to-speech capability for the blind and visually impaired by using the HTML code from a web page to readily identify links, article headers, body text and other attributes to allow users to easily skip around the page.

  • Captions - text versions of the spoken words and important sounds presented within a video, which can either be presented as Closed (able to be turned on or off), or Open (are always visible).

  • Clickability cues - a visual indication, such as color, underlining, bullets, and arrows, that indicates a given word or item on a web page is clickable.

  • Color contrast (ratio) - a mathematical measurement expressed as a ratio, measuring the visual difference between background and foreground colors.

  • Curb cut effect - the phenomenon of disability-friendly features being used and appreciated by a larger group than the people they were originally designed for.

  • Focus, Focus Indicator - a solid or dotted border drawn around the place where the keyboard is currently located to serve as a visual indicator for the element that will respond to the next user action.

  • Hierarchy - the organization of web page content by level of importance, often established with HTML heading elements (< h 1 >, < h 2 >, < h 3 >, and so on), that helps screen reader users to understand the structure of a the web page and navigate efficiently.

A11Y Glossary


  • Inclusive design - (see "Universal Design")

  • Nesting - refers to the hierarchy of headings in a page structure or a list of items, with one (1) first (1st) degree heading being the most important (for example, your site name or document title), followed by second (2nd) degree headings (for example, the major section headings of your document), then by third (3rd) degree headings (for example, subsections of the major section headings of your document), and so on.

  • POUR - (Perceivable, Operable, Understandable, and Robust) - the four main guiding, human-focused principles of accessibility, developed by WCAG.

  • Pseudo-class (CSS) (:) - primarily used to style an element that's under various states, which includes the condition or user behavior, and generally involves user interaction, such as :hover, :active, :focus, or :disabled.

  • Pseudo-element (CSS) (::) - used to style specific parts of an element, such as the ::first-letter or ::first-line of text, or to insert content ::before or ::after the element.

  • Screen reader - a software program that takes the on-screen text from a website or computer screen and reads it out loud for users with visual impairments, allowing for visual cues such as images, graphics or table headers to be perceived when additional information, such as image alt tags and specification of key landmarks are provided within the code of a given document.

A11Y Glossary


  • Section 508 - an amendment to the U.S. Rehabilitation Act of 1973 introduced to "eliminate barriers in information technology, to make available new opportunities for people with disabilities, and to encourage the development of technologies that will help achieve these goals," and requires that information technology used or developed by a federal agency is fully accessible to people with disabilities.

  • Semantic HTML (or Semantic Markup) - the HTML code that communicates the meaning of its elements through the proper use of HTML tags, helping people using assistive technologies to better understand the structure and components of a web page.

  • SVG (Scalable Vector Graphics) - a web-friendly vector file format (".svg") written in XML code, that stores images via mathematical formulas based on points and lines on a grid, as opposed to pixel-based raster files like JPEGs.

  • Screen magnifier - a built-in device, or software program that makes images and text on a screen larger for the benefit of visually impaired users.

  • SEO (Search Engine Optimization) - the process used to optimize a website's technical configuration, content relevance and link popularity so its pages can become easily findable, more relevant and popular towards user search queries.

  • Switch Control/Access - an assistive technology that enables a person with limited mobility to interact with an iPhone or Android by activating a switch, such as pressing an external adaptive button, performing a head movement, or making a voiced or voiceless sound.

A11Y Glossary


  • Tab order - an HTML attribute that defines the order in which the focus has to switch between the page elements when using a keyboard for navigation.

  • Title II - section of the ADA that prohibits disability-based discrimination on the part of state and local governments.

  • Title III - section of the ADA that details accessibility to public accommodations, stating that individuals with disabilities must be granted full and equal access to the benefits and programs provided by public accommodations, including not only physical addresses of these entities but to their websites as well.

  • Transcript - a written version of an entire video (like a screenplay) or audio file and should include descriptions of important sounds and visual elements, such as indications of laughter or an explosion.

  • Universal design - (also "Barrier-Free" or "Inclusive Design") - refers to the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.

  • Usability - measures how easily, effectively, and enjoyably a person uses and experiences a product. In terms of websites, usability measures the quality of the user experience when interacting with a web page. Accessibility is usability by people with disabilities.

  • User Agent - any software that can access websites, including web browsers, mobile applications, extensions and plug-ins, and assistive technologies that retrieve and present web content to users.

A11Y Glossary


  • VoiceOver - an inbuilt screen reader for Apple Inc.'s products like iPhones, Macbooks, and so on.

  • W3C/WAI (World Wide Web Consortium / Web Accessibility Initiative) - develops standards and support materials that help you understand and implement accessibility the main international standards organization for the Internet.

  • WebAIM - (Web Accessibility In Mind) - a non-profit organization based at the Center for Persons with Disabilities at Utah State University that is one of the leading providers of web accessibility expertise internationally.

  • WCAG (Web Content Accessibility Guidelines) - set of web accessibility guidelines published by the W3C, which are the main internationally agreed upon standards for the World Wide Web, established to help content authors and developers create web content that is accessible for people of all abilities and disabilities.