ASU Accessible Web Developer digital credential

The ASU Accessible Web Developer badge represents successful completion (a score of 80% or above) of Practical Accessibility, an intensive 15.5-hour code-level training on creating accessible user interfaces for people with disabilities. Credential holders have demonstrated mastery of accessible digital user interface development and the following course material:

What is web accessibility?
- What is Web accessibility?
- What is a11y?
- What is the difference between accessibility, inclusivity, and usability in the context of the web?
- Accessibility vs Inclusivity on the web
- Accessibility design benefits everyone
- Accessibility vs Usability
- The different types of disabilities
- What is Assistive Technology (AT)?
- Assistive technologies don’t guarantee access
- Simulating disabilities is not enough
The Web Content Accessibility Guidelines (WCAG)
- What is WCAG?
- WCAG Versions
- The four principles underlying WCAG (P.O.U.R)
- The guidelines
- The success criteria
- What does conforming to WCAG mean?
- The three levels of conformance: A, AA, AAA
  - Level A
  - Level AA
  - Level AAA
  - Outro
Does satisfying WCAG criteria guarantee that your website is usable?
- Conformance does not guarantee usability
- WCAG guidelines don’t address all accessibility issues
- WCAG does not tackle usability issues
- Usability testing is needed to ensure content is accessible and usable
- WCAG does not mitigate against AT and browser bugs
- WCAG conformance is the bare minimum
- Accessibility checklists are a tool not an end goal
- Outro
Implementing WCAG: Understanding and Techniques documents
- WCAG supporting documents
- Understanding WCAG 2.1
- Techniques for WCAG 2.1
- How to Meet WCAG (Quick Reference)
- Getting from one document to another
- Normative vs non-normative guidelines
Setting up a screen reader testing environment on your machine
- macOS vs Windows screen readers
- Setting up Windows screen readers
  - Download NVDA screen reader on Windows
    - Visualize NVDA’s current focus target with Visual Highlight
    - Enable NVDA speech viewer
    - Setup keyboard layout for testing with NVDA on a Mac
  - Map the Insert key to another key on Mac
  - Setting up Karabiner Elements on macOS
- Virtual accessibility testing in your browser
- Enable keyboard accessibility on a Mac
- Which browser and screen reader pairings should you test on?
  - On macOS
  - On Windows
  - Mobile screen readers
- Guides to browsing and navigating content with a screen reader
- Screen reader keyboard shortcut cheatsheets
- Outro
What is the accessibility tree?
- From HTML to the DOM tree
- The accessibility tree
- What kind of information does the accessibility tree contain?
- Inspecting the accessibility tree in browser DevTools
- The accessibility tree may not look the same across all browsers and platforms
- What HTML elements are included in the accessibility tree?
Semantic HTML accessibility
- What is semantic HTML?
- Why should you write semantic HTML?
- How many semantic elements does HTML contain?
- Semantic HTML is as useful to screen readers as its ARIA role mappings
  - 1. Not all HTML elements have equivalent ARIA roles
  - 2. Not all HTML elements have unique implicit roles
  - 3. div and span are semantic
  - 4. Not all semantic elements map to roles that are useful to screen readers by default
  - 5. Not all roles are exposed in the accessibility tree by default
- Native semantic HTML controls come with accessibility features built in
- Choosing semantic HTML elements is not enough
  - 1. Semantics provide only one piece of the accessibility information
  - 2. Some elements are only meaningful when they are used in conjunction with other elements
- HTML semantics are affected by CSS
- HTML semantics are affected ARIA attributes
- Outro
Creating hierarchy and aiding user navigation with HTML (Part 1): Headings structure
- Why heading structure is important to screen reader users
- Implementing an effective heading structure
  - One h1 per page
    - Wait, what about the document outline algorithm?
    - Does this mean that the section element is no longer useful?
  - Use h2 through h6 to create hierarchy
  - Don’t skip heading levels
  - Don’t use heading elements purely for styling purposes
  - If it looks like a heading, it should be implemented as a heading
- Tools for visualizing and testing a page’s heading structure
- Can you group headings together?
- Are you violating WCAG if you don’t apply these practices?
- Fixing an existing document heading structure with ARIA
- Summary
Creating hierarchy and aiding user navigation with HTML (Part 2): Landmarks
- What is a landmark region?
- Types of landmarks & their associated HTML elements
  - The banner landmark
    - The navigation landmark
  - Identifying multiple navigation landmarks on the page
  - The main landmark
  - The contentinfo landmark
  - The complementary landmark
  - The form landmark
    - The search landmark
  - Identifying multiple search landmarks on the page
  - The generic region
- Creating custom landmark regions
- Adding landmarks to an existing document using ARIA
- Visualizing a page’s landmark regions
- Summary
Buttons vs. Links: Semantics and Usability
- Buttons
- Links
  - Can you disable links?
- Choosing between a link and a button
- Enhancing a link into a button
  - Instate button semantics onto the link
  - Trigger an action when the anchor is clicked
  - Implement full keyboard functionality of a button
- Outro
Practical semantics: site-wide navigation
- Choosing the right HTML elements
  - Creating structure inside the navigation
- Labelling multiple navigations on the page
- Styling with CSS
- Conveying state
- Outro
ARIA 101
- What is WAI-ARIA (a.k.a ARIA)?
- ARIA and HTML semantics
- ARIA is analogous to CSS for assistive technologies
- Overview of ARIA attributes
  - ARIA roles: Supply, modify, and remove semantics.
    - Types of ARIA roles
  - ARIA states and properties
    - ARIA states: express state and respond to user interaction
  - ARIA properties: create relationships, provide labels, and describe
- There are strict rules that govern ARIA attributes
  - Roles, states and properties are not all applicable on all HTML elements
  - There are strict parent-child relationships between some ARIA attributes
  - ARIA is finite: You cannot make up your own role values
  - ARIA attributes may have unwanted side effects
- So what does ARIA do again?
- What does ARIA not do?
  - ARIA roles don’t add behavior
  - ARIA states don’t respond to user interaction on their own
  - ARIA does not impact how content is presented by all assistive technologies
- How well is ARIA supported across screen readers?
- Outro
Applied ARIA: creating a custom button component
- Building a custom button component from scratch
  - Creating visual affordances with CSS
  - Providing semantic affordances with ARIA
  - The duck test
  - Adding an action to the buttons
  - Making the button operable by keyboard
    - Matching custom keyboard interactions to native ones
  - Disabling the custom button
- Custom Control Accessible Development Checklist
- Outro
Responsible ARIA: The Rules of ARIA Use in HTML
- The First Rule of ARIA
- The Second Rule of ARIA
- The Third Rule of ARIA
- The Fourth Rule of ARIA
- The Fifth Rule of ARIA
- Redundant ARIA
- No ARIA is better than bad ARIA
- “A role is a promise”
- ARIA is a polyfill for HTML semantics
- Outro
The ARIA Authoring Practices Guide (is not a copy-paste cookbook)
- What is the ARIA Authoring Practices Guide (APG)?
- What is the ARIA Authoring Practices Guide not?
  - The APG patterns are not production-ready
- So, what does all of this mean?
- Outro
Disclosure widgets
- What is a disclosure widget?
- HTML or ARIA?
- The HTML details & summary elements
  - Accessibility
- Styling with CSS
- Can we use details & summary for all our disclosure widget needs?
- Custom ARIA disclosure widget
  - Roles, States, and Properties
  - Interactive behavior
  - Live demo
- A more inclusive and resilient approach to building a custom disclosure widget
  - Progressively enhancing the disclosure widget
- Outro
Building an accordion component (Part 1)
- What is an accordion?
- Requirements for implementing accessible accordions
- Creating an accordion using HTML details & summary
  - Grouping the disclosure widgets
    - What is the difference between a group and a landmark region in ARIA?
    - Exposing the disclosure widgets as a named group
    - Exposing the disclosure widgets as a landmark region
  - Adding exclusive accordion behavior: using the HTML name attribute
  - Live demonstration
- So, do you still need JavaScript to create accordions today?
- A few important words about the usability of exclusive accordions
- Outro
Building an accordion component (Part 2)
- Implementing an accordion widget using ARIA and JavaScript
  - Implementing an accordion with “interactive headings”
- Making content in accordion widgets accessible to find-in-page search
  - Invisible until found
  - hidden only until found
- Final words
Hiding content using HTML CSS and ARIA ‚Äî which one should you use when?
- Hiding content with CSS
  - Make an element transparent with the opacity property & opacity() filter function
  - Clip an element out of view with the clip-path property
  - Move an element off-screen with the position property
  - Make an element invisible with the visibility property
  - Turn an element’s display off with the display property
  - Other CSS properties may also affect accessibility
  - Hiding content using HTML
  - Turn an element’s display off with the hidden attribute
  - Disable interactive controls with the disabled attribute
  - Make regions inert with the inert attribute
    - The difference between inert and hidden
    - The difference between inert and disabled
  - Remove an element from keyboard tabbing order with the tabindex attribute
- Hiding content using ARIA attributes
  - Hide content from screen readers using the aria-hidden attribute
  - Suppress an element’s semantics with the role attribute: presentation and none
    - Useful applications for role=""none"
    - The difference between role=""none"" and aria-hidden
- Providing screen reader-only accessible text
  - Using visually-hidden text
  - Exposing hidden text to screen reader users only using ARIA attributes
- Recap
- How do you choose a hiding technique?
- Outro
Case Study: Inclusively-hidden custom-styled form controls
- Setting the foundation in the markup
- Hiding the checkbox inclusively
- Styling the SVG accessibly
- Live demo
- Outro
Accessible names and descriptions
- What is an accessible name?
- What is the difference between an accessible name and a label?
- Inspecting an element’s accessible name in the DevTools
- What elements need an accessible name?
  - Interactive elements must have an accessible name
  - Some non-interactive elements benefit from having an accessible name
  - Not all elements can have a name
- Accessible descriptions
  - The difference between a description and a name
- Outro
Techniques for providing accessible names and descriptions using HTML and ARIA
- Providing accessible names using HTML
  - Using the element’s content
    - CSS pseudo-content and the accessible name
  - Using another element
  - Using an attribute
    - The title attribute
- Providing accessible names using ARIA
  - Using aria-labelledby
  - Using aria-label
  - Notes on use of aria-label and aria-labelledby
    - 1. aria-label does not translate well
    - 2. aria-label and aria-labelledby don’t work on every element
    - 3. aria-label and aria-labelledby will override the element’s content
- Providing accessible descriptions using ARIA
  - Using the aria-describedby attribute
  - Using the aria-description attribute
- Providing additional details to an element with aria-details
- Outro
Which accessible name is used when you provide more than one name to an element?
- The Accessible Name and Description Computation algorithm
- Accessible name computations for common user interface controls and elements
- Viewing the order of priority in the browser DevTools accessibility panel
- Choosing an accessible name technique for your components
  - Prefer using a native HTML naming method over using ARIA
  - When using ARIA, prefer aria-labelledby over aria-label whenever possible
- Order of priority for choosing an accessible name
- Outro
Providing accNames to icon buttons
- The base markup
- Giving the icon button an accName
  - Using the visually-hidden utility class
  - Using hidden + aria-labelledby
  - Using aria-label
  - Using the SVG icon to provide an accName to the button
    - Exposing the SVG as an image
    - Giving the SVG an accName
      - Using the title element
      - Using aria-label
  - Using the SVG to provide an accName to the button
- So, which technique is the best?
- Outro
Concatenating accNames: using aria-labelledby to provide ‚ÄòDRY‚Äô names to interactive elements
- Recap: How aria-labelledby works
- Providing accNames to links in a simple blog pagination
- Providing accNames to buttons within interactive UI pills
- Outro
Label in Name: Providing unique names to controls that share the same label
- Consistent identification
- Unique accessible names
  - Using visually-hidden text
- What is speech recognition? Who uses it? And how?
- Label in Name
- Final Words
Enhancing a simple site navigation into an interactive drop-down navigation
- What makes a drop-down navigation a drop-down navigation?
- Drop-down navigation markup & behavior
  - Dismissing the open dropdown(s) using keyboard and mouse
  - What about arrow keys support?
- An alternative markup pattern
  - Minimum target size for the disclosure widget toggle
  - Indicating the current page
- What about hover states?
- Can you use details and summary to mark up the drop-down navigation instead of using a custom disclosure widget?
- What if you can’t use buttons?
  - Enhancing a link into a button
- What about ARIA menu and menuitem roles?
- Outro
Enhancing the drop-down navigation into a slide-out navigation drawer
- Prerequisities
- Hiding and showing the navigation using the navigation toggle
  - Hide the navigation list, not the landmark
  - Place the navigation button inside the navigation landmark
  - Live demo
  - Main takeaways
- Enhancing the navigation into a slide-out navigation drawer
  - Choosing a hiding technique for the navigation drawer
  - Adding the necessary semantics and behavior to the navigation drawer when it is shown
    - When the navigation drawer is shown, make the page content inert
    - Provide a way to dismiss the navigation drawer when it is shown
      - Provide a button to dismiss the navigation drawer
      - Make the navigation drawer dismissable using the Escape key
      - Move focus back to the navigation button when the navigation drawer is closed
    - Move keyboard focus to the Close button when the navigation is shown
    - Give the navigation content container a role and a name
    - Managing keyboard focus inside the navigation drawer when it is shown
    - Trap focus inside the navigation drawer until it is closed
      - Communicate that the navigation is modal to screen readers using ARIA
      - Live demo
    - Close the navigation drawer when focus moves outside of it
    - Live demo
- Outro
Page-level accessibility: Identifying pages by title
- Page titles aid in navigation
- Page titles are a WCAG requirement
- Providing a descriptive title using the HTML title element
- Identify the site to which the webpage belongs
- The page title and h1 should typically match
- Outro
Page-level accessibility: What language does your page speak?
- Why is document language important?
- Identifying page language is a WCAG requirement
- Identifying the page language using the lang attribute
- Testing screen reader announcement for different languages
- Using the lang attribute to identify language of parts
- More benefits to identifying the page’s language
- Styling content based on its language
- Outro
Accessible Images: providing effective alt text for images
- What is alternative text (alt text)?
- Why is alt text so important?
  - Alternative text (where it is needed) is a WCAG requirement
- The alt attribute
- Does your image need alternative text?
- Types of images and their alternative texts
  - Unessential images (decorative or redundant)
  - Images of text
  - Complex Images
  - Functional Images
    - Images in links
    - Images in buttons
- Informative images
- Best practices for crafting effective alt text for informative images
  - Keep it short
  - End the alt text with a period
  - Don’t mention it’s an image, unless it’s a relevant type
  - Context matters
  - Emotion matters
  - Don’t use the file name in the alt text
  - Don’t use the title attribute
  - Don’t use the alt attribute to provide image attribution or credit
- alt vs figcaption
- Manually testing the alt text of images on a webpage
- Can’t we just use Artificial Intelligence (AI) to generate alt texts for our images?
- Outro
Accessible Forms: Grouping and labelling form fields
- Identifying form controls using the label element
  - Not all form controls are labelable
- Providing accessible names to form controls using ARIA
- Providing visually-hidden labels
  - Using a visually-hidden label
  - Using aria-labelledby
  - Using aria-label
- Don’t use the placeholder attribute
- Provide additional instructions outside the label
- Grouping related form controls together
  - Grouping controls using fieldset and legend
  - Grouping controls using ARIA
- Further identifying input purpose
- Make forms easier to use by specifying input mode
- Outro
Accessible Forms: Validation (Part 1)
- Client-side vs. server-side validation
- Native HTML5 constraint validation
  - Suppressing the default form validation
- Identifying required fields
  - A quick note on marking required versus optional fields
  - Indicating fields are required to all users
    - Quick note on using asterisks to indicate required fields
  - Programmatically marking fields as required
    - Should you use aria-required or required?
  - Indicating a group of fields is required
- Providing helpful hints and instructions (where they are needed)
- Indicating a field is invalid
- Providing error messages for invalid fields
  - Using an SVG icon to distinguish error messages from field descriptions
- Outro
Accessible Forms: Validation (Part 2)
- Inline validation versus validation on form submission
- Don’t disable the Submit button until the form is completed
  - So, what should you do instead?
- Notifying the user of the presence of errors in the form on submission
  - Provide a summary of errors at the top of the form
  - Move the user’s focus to the error summary
  - Complement the error summary with inline error messages
  - Full demo
- Use the page title if the page reloads
- Inline validation and error notification
  - Usability considerations
  - Accessibility considerations
    - Designating an inline error message as a live region using ARIA
  - Testing the live inline error messages
- Outro
Accessible notifications with ARIA Live Regions (Part 1)
- How screen readers parse web content
- Why we need an accessible notification system for screen reader users
- Status messages in WCAG
- What are ARIA live regions?
- Creating a live region
  - 1. Using the aria-live attribute
    - Live region configuration
      - aria-relevant: when should an announcement be made?
      - aria-atomic: what is contained in an announcement?
      - aria-busy: please wait until the changes are complete
      - Summary and support landscape
- 2. Using live region roles
  - Difference between using aria-live and live region roles
- 3. Using the HTML output element
- Summary and outro
Accessible notifications with ARIA Live Regions (Part 2)
- Live regions don’t handle rich text
- Live regions are not suitable for notifications with interactive elements
- Live regions are not a substitute for ARIA state properties
- Best practices for implementing (more robust) status messages with live regions
  - Make sure the live region container is in the DOM as early as possible
  - Choose an appropriate hiding technique if the live region isn’t visible
  - Limit the number of live regions on the page
  - Compose and insert your message into the live region in one go
  - Keep the content short and succinct and avoid rich content
  - Empty the live region and wait a bit in between updates
- Debugging Live Regions
- Avoid live regions if you can
Keyboard accessibility: Designing accessible focus indicators
- What exactly is a focus indicator?
- Browser default focus indicators
- WCAG 2.1 and WCAG 2.2 focus indicator accessibility requirements
  - 1. The focus indication area and the contrasting area
  - 2. Minimum contrasting area
  - 3. Minimum contrast against adjacent colors
  - 4. The focused element cannot be obscured
- Examining (current) browser focus indicators against WCAG requirements
- A ‘universal’ focus indicator
- Showing the focus indicator only for keyboard users
- Outro
Providing navigational aid for keyboard users using skip links
- What is a Skip link?
- Who benefits from skip links?
- Implementing an accessible skip link
  - Hiding the skip link while keeping it accessible
  - Showing the skip link when it receives focus
  - Ensuring focus moves to the target of the skip link properly
- Choosing a descriptive name for the skip link
- Providing multiple skip link (where appropriate)
- Other forms of skip links
- Outro
Managing keyboard focus in custom widgets with the HTML tabindex attribute
- What is focus management? and why is it important?
- The tabindex attribute
  - tabindex=0
  - tabindex=-1 (or any other negative integer value)
  - Avoid tabindex > 0
- The roving tabindex technique
- Using the roving tabindex to manage focus in a toolbar widget
  - Live demo
- Don’t forget focus styles
- Outro
Adapting your websites and applications to forced colors mode
- What are display modes?
- What is forced colors mode?
- Who uses forced colors mode?
- Enabling high contrast mode on Windows
- Windows high contrast color themes
- What happens to Web content when high contrast mode is enabled?
- How does forced colors mode affect how you design and build web content?
- Detecting forced colors mode
  - Using CSS feature queries
  - Using CSS in JavaScript
- Using CSS System Colors to make forced colors-specific style adjustments
- Styling custom ARIA widgets in forced colors mode
- Opting out of the forced-colors palette
- Tips for preparing content for forced colors mode
  - Don’t rely on color alone to distinguish elements or areas on a page
  - Don’t rely on color alone to convey information
  - Don’t completely remove link underlines
  - Don’t completely remove focus styles
  - Use inline SVG for icons
  - Remove ornamental styles
  - Use picture and srcset to provide fallbacks for images with transparency
  - Testing Windows high contrast themes on macOS
  - Using a virtual machine
  - Using forced colors emulation in the Chromium-Edge DevTools
  - Testing in any modern browser using AssistivLabs
- Outro

Slack

Accessibility Connections

For accessibility in online learning and education, join the UDAT working group.
Attend one of the Digital Accessibility Liaisons' monthly trainings.
Connect with us on ASU's #accessibility Slack channel.