Difference between revisions of "Navigation References"

From Make Inclusive Websites
Jump to navigation Jump to search
Line 7: Line 7:
 
https://www.w3.org/WAI/fundamentals/accessibility-principles/#navigable;
 
https://www.w3.org/WAI/fundamentals/accessibility-principles/#navigable;
 
Multiple Ways;
 
Multiple Ways;
3WC - Web Accessibility Initiative;
+
Understanding Web Content Accessibility Guidelines (WCAG) 2.1;
 
https://www.w3.org/WAI/WCAG21/Understanding/multiple-ways;
 
https://www.w3.org/WAI/WCAG21/Understanding/multiple-ways;
 
Motor Disabilities;
 
Motor Disabilities;
Line 22: Line 22:
 
https://web.dev/keyboard-access/;
 
https://web.dev/keyboard-access/;
 
Ensure that all interactive elements are keyboard accessible;
 
Ensure that all interactive elements are keyboard accessible;
3WC - Web Accessibility Initiative;
+
Tips for Getting Started - 3WC Web Accessibility Initiative;
 
https://www.w3.org/WAI/tips/developing/#ensure-that-all-interactive-elements-are-keyboard-accessible;
 
https://www.w3.org/WAI/tips/developing/#ensure-that-all-interactive-elements-are-keyboard-accessible;
 
Keyboard Accessible;
 
Keyboard Accessible;
3WC - Web Accessibility Initiative;
+
Understanding Web Content Accessibility Guidelines (WCAG) 2.1;
 
https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation.html;
 
https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation.html;
 
Keyboard;
 
Keyboard;
3WC - Web Accessibility Initiative;
+
Understanding Web Content Accessibility Guidelines (WCAG) 2.1;
 
https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html;
 
https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html;
 
Focus Visible;
 
Focus Visible;
3WC - Web Accessibility Initiative;
+
Understanding Web Content Accessibility Guidelines (WCAG) 2.1;
 
https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html;
 
https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html;
 
Link Purpose;
 
Link Purpose;
3WC - Web Accessibility Initiative;
+
Understanding Web Content Accessibility Guidelines (WCAG) 2.1;
 
https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html;
 
https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html;
 
Character Key Shortcuts;
 
Character Key Shortcuts;
3WC - Web Accessibility Initiative;
+
Understanding Web Content Accessibility Guidelines (WCAG) 2.1;
 
https://www.w3.org/WAI/WCAG21/Understanding/character-key-shortcuts.html;
 
https://www.w3.org/WAI/WCAG21/Understanding/character-key-shortcuts.html;
 
Article: I Used The Web For A Day With Just A Keyboard;
 
Article: I Used The Web For A Day With Just A Keyboard;
Line 43: Line 43:
 
https://www.smashingmagazine.com/2018/07/web-with-just-a-keyboard/;
 
https://www.smashingmagazine.com/2018/07/web-with-just-a-keyboard/;
 
Provide easily identifiable feedback;
 
Provide easily identifiable feedback;
3WC - Web Accessibility Initiative;
+
Tips for Getting Started - 3WC Web Accessibility Initiative;
 
https://www.w3.org/WAI/tips/designing/#provide-easily-identifiable-feedback;
 
https://www.w3.org/WAI/tips/designing/#provide-easily-identifiable-feedback;
 
Lens Of Keyboard;
 
Lens Of Keyboard;
Line 64: Line 64:
 
|references3=
 
|references3=
 
Reflect the reading order in the code order;
 
Reflect the reading order in the code order;
3WC - Web Accessibility Initiative;
+
Tips for Getting Started - 3WC Web Accessibility Initiative;
 
https://www.w3.org/WAI/tips/developing/#reflect-the-reading-order-in-the-code-order;
 
https://www.w3.org/WAI/tips/developing/#reflect-the-reading-order-in-the-code-order;
 
Focus Order;
 
Focus Order;
3WC - Web Accessibility Initiative;
+
Understanding Web Content Accessibility Guidelines (WCAG) 2.1;
 
https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html;
 
https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html;
 
Location;
 
Location;
3WC - Web Accessibility Initiative;
+
Understanding Web Content Accessibility Guidelines (WCAG) 2.1;
 
https://www.w3.org/WAI/WCAG21/Understanding/location.html;
 
https://www.w3.org/WAI/WCAG21/Understanding/location.html;
 
Bypass Blocks;
 
Bypass Blocks;
3WC - Web Accessibility Initiative;
+
Understanding Web Content Accessibility Guidelines (WCAG) 2.1;
 
https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks.html;
 
https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks.html;
 
No Keyboard Trap;
 
No Keyboard Trap;
3WC - Web Accessibility Initiative;
+
Understanding Web Content Accessibility Guidelines (WCAG) 2.1;
 
https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap.html;
 
https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap.html;
 
Reflow;
 
Reflow;
3WC - Web Accessibility Initiative;
+
Understanding Web Content Accessibility Guidelines (WCAG) 2.1;
 
https://www.w3.org/WAI/WCAG21/Understanding/reflow.html;
 
https://www.w3.org/WAI/WCAG21/Understanding/reflow.html;
 
Content reordering;
 
Content reordering;
Line 113: Line 113:
  
 
===Multiple Ways===
 
===Multiple Ways===
3WC - Web Accessibility Initiative
+
Understanding Web Content Accessibility Guidelines (WCAG) 2.1
  
 
https://www.w3.org/WAI/WCAG21/Understanding/multiple-ways
 
https://www.w3.org/WAI/WCAG21/Understanding/multiple-ways
Line 134: Line 134:
  
 
===Ensure that all interactive elements are keyboard accessible===
 
===Ensure that all interactive elements are keyboard accessible===
3WC - Web Accessibility Initiative  
+
Tips for Getting Started - 3WC Web Accessibility Initiative
  
 
https://www.w3.org/WAI/tips/developing/#ensure-that-all-interactive-elements-are-keyboard-accessible
 
https://www.w3.org/WAI/tips/developing/#ensure-that-all-interactive-elements-are-keyboard-accessible
  
 
===Keyboard Accessible===
 
===Keyboard Accessible===
3WC - Web Accessibility Initiative
+
Understanding Web Content Accessibility Guidelines (WCAG) 2.1
  
 
https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation.html
 
https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation.html
  
 
===Keyboard===
 
===Keyboard===
3WC - Web Accessibility Initiative
+
Understanding Web Content Accessibility Guidelines (WCAG) 2.1
  
 
https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html
 
https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html
  
 
===Focus Visible===
 
===Focus Visible===
3WC - Web Accessibility Initiative
+
Understanding Web Content Accessibility Guidelines (WCAG) 2.1
  
 
https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html
 
https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html
  
 
===Link Purpose===
 
===Link Purpose===
3WC - Web Accessibility Initiative
+
Understanding Web Content Accessibility Guidelines (WCAG) 2.1
  
 
https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html
 
https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html
  
 
===Character Key Shortcuts===
 
===Character Key Shortcuts===
3WC - Web Accessibility Initiative
+
Understanding Web Content Accessibility Guidelines (WCAG) 2.1
  
 
https://www.w3.org/WAI/WCAG21/Understanding/character-key-shortcuts.html
 
https://www.w3.org/WAI/WCAG21/Understanding/character-key-shortcuts.html
Line 169: Line 169:
  
 
===Provide easily identifiable feedback===
 
===Provide easily identifiable feedback===
3WC - Web Accessibility Initiative
+
Tips for Getting Started - 3WC Web Accessibility Initiative
  
 
https://www.w3.org/WAI/tips/designing/#provide-easily-identifiable-feedback
 
https://www.w3.org/WAI/tips/designing/#provide-easily-identifiable-feedback
Line 200: Line 200:
 
==Flow==
 
==Flow==
 
===Reflect the reading order in the code order===
 
===Reflect the reading order in the code order===
3WC - Web Accessibility Initiative  
+
Tips for Getting Started - 3WC Web Accessibility Initiative
  
 
https://www.w3.org/WAI/tips/developing/#reflect-the-reading-order-in-the-code-order
 
https://www.w3.org/WAI/tips/developing/#reflect-the-reading-order-in-the-code-order
  
 
===Focus Order===
 
===Focus Order===
3WC - Web Accessibility Initiative
+
Understanding Web Content Accessibility Guidelines (WCAG) 2.1
  
 
https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html
 
https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html
  
 
===Location===
 
===Location===
3WC - Web Accessibility Initiative
+
Understanding Web Content Accessibility Guidelines (WCAG) 2.1
  
 
https://www.w3.org/WAI/WCAG21/Understanding/location.html
 
https://www.w3.org/WAI/WCAG21/Understanding/location.html
  
 
===Bypass Blocks===
 
===Bypass Blocks===
3WC - Web Accessibility Initiative
+
Understanding Web Content Accessibility Guidelines (WCAG) 2.1
  
 
https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks.html
 
https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks.html
  
 
===No Keyboard Trap===
 
===No Keyboard Trap===
3WC - Web Accessibility Initiative
+
Understanding Web Content Accessibility Guidelines (WCAG) 2.1
  
 
https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap.html
 
https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap.html
  
 
===Reflow===
 
===Reflow===
3WC - Web Accessibility Initiative
+
Understanding Web Content Accessibility Guidelines (WCAG) 2.1
  
 
https://www.w3.org/WAI/WCAG21/Understanding/reflow.html
 
https://www.w3.org/WAI/WCAG21/Understanding/reflow.html

Revision as of 13:43, 7 June 2021

headline 1 General
headline 1 coordinates 7.000, 7.000, 0.000
references 1 Users can easily navigate, find content, and determine where they are;

3WC - Web Accessibility Initiative - Accessibility Fundamentals; https://www.w3.org/WAI/fundamentals/accessibility-principles/#navigable; Multiple Ways; Understanding Web Content Accessibility Guidelines (WCAG) 2.1; https://www.w3.org/WAI/WCAG21/Understanding/multiple-ways; Motor Disabilities; Deque University - Accessibility Basic Concepts; https://dequeuniversity.com/class/archive/basic-concepts1/types-of-disabilities/motor-disabilities;

headline 2 Keyboard_Access
headline 2 coordinates 13.000, 7.000, 0.000
references 2 How to browse websites using a keyboard only;

Accessibility Developer Guide; https://www.accessibility-developer-guide.com/knowledge/keyboard-only/browsing-websites/; Keyboard access fundamentals; Rob Dodson - Google Developers; https://web.dev/keyboard-access/; Ensure that all interactive elements are keyboard accessible; Tips for Getting Started - 3WC Web Accessibility Initiative; https://www.w3.org/WAI/tips/developing/#ensure-that-all-interactive-elements-are-keyboard-accessible; Keyboard Accessible; Understanding Web Content Accessibility Guidelines (WCAG) 2.1; https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation.html; Keyboard; Understanding Web Content Accessibility Guidelines (WCAG) 2.1; https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html; Focus Visible; Understanding Web Content Accessibility Guidelines (WCAG) 2.1; https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html; Link Purpose; Understanding Web Content Accessibility Guidelines (WCAG) 2.1; https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html; Character Key Shortcuts; Understanding Web Content Accessibility Guidelines (WCAG) 2.1; https://www.w3.org/WAI/WCAG21/Understanding/character-key-shortcuts.html; Article: I Used The Web For A Day With Just A Keyboard; Chris Ashton - Smashing Magazine; https://www.smashingmagazine.com/2018/07/web-with-just-a-keyboard/; Provide easily identifiable feedback; Tips for Getting Started - 3WC Web Accessibility Initiative; https://www.w3.org/WAI/tips/designing/#provide-easily-identifiable-feedback; Lens Of Keyboard; Steven Lambert - Smashing Magazine; https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/#lens-keyboard; Introduction to Focus; Meggin Kearney, Dave Gash, Rob Dodson - Google Developers; https://developers.google.com/web/fundamentals/accessibility/focus; Use semantic HTML for easy keyboard wins; Rob Dodson - Google Developers; https://web.dev/use-semantic-html/; Style focus; Rob Dodson - Google Developers; https://web.dev/style-focus/; Carousel Concepts; W3C - Web Accessibility Tutorials; https://www.w3.org/WAI/tutorials/carousels/;

headline 3 Flow
headline 3 coordinates 13.000, 341.000, 0.000
references 3 Reflect the reading order in the code order;

Tips for Getting Started - 3WC Web Accessibility Initiative; https://www.w3.org/WAI/tips/developing/#reflect-the-reading-order-in-the-code-order; Focus Order; Understanding Web Content Accessibility Guidelines (WCAG) 2.1; https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html; Location; Understanding Web Content Accessibility Guidelines (WCAG) 2.1; https://www.w3.org/WAI/WCAG21/Understanding/location.html; Bypass Blocks; Understanding Web Content Accessibility Guidelines (WCAG) 2.1; https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks.html; No Keyboard Trap; Understanding Web Content Accessibility Guidelines (WCAG) 2.1; https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap.html; Reflow; Understanding Web Content Accessibility Guidelines (WCAG) 2.1; https://www.w3.org/WAI/WCAG21/Understanding/reflow.html; Content reordering; Rachel Andrew; https://web.dev/content-reordering/; Control focus with tabindex; Rob Dodson - Google Developers; https://web.dev/control-focus-with-tabindex/; Meaningful Sequence; Understanding Web Content Accessibility Guidelines (WCAG) 2.1; https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence.html; Ordering the content in a meaningful sequence; Techniques for the Web Content Accessibility Guidelines (WCAG) 2.2; https://www.w3.org/WAI/WCAG21/Techniques/general/G57; Positioning content based on structural markup; Techniques for the Web Content Accessibility Guidelines (WCAG) 2.2; https://www.w3.org/WAI/WCAG21/Techniques/css/C6;

headline 4
headline 4 coordinates
references 4
headline 5
headline 5 coordinates
references 5
links to
belongs to Navigation
contains

General

Users can easily navigate, find content, and determine where they are

3WC - Web Accessibility Initiative - Accessibility Fundamentals

https://www.w3.org/WAI/fundamentals/accessibility-principles/#navigable

Multiple Ways

Understanding Web Content Accessibility Guidelines (WCAG) 2.1

https://www.w3.org/WAI/WCAG21/Understanding/multiple-ways

Motor Disabilities

Deque University - Accessibility Basic Concepts

https://dequeuniversity.com/class/archive/basic-concepts1/types-of-disabilities/motor-disabilities

Keyboard Access

How to browse websites using a keyboard only

Accessibility Developer Guide

https://www.accessibility-developer-guide.com/knowledge/keyboard-only/browsing-websites/

Keyboard access fundamentals

Rob Dodson - Google Developers

https://web.dev/keyboard-access/

Ensure that all interactive elements are keyboard accessible

Tips for Getting Started - 3WC Web Accessibility Initiative

https://www.w3.org/WAI/tips/developing/#ensure-that-all-interactive-elements-are-keyboard-accessible

Keyboard Accessible

Understanding Web Content Accessibility Guidelines (WCAG) 2.1

https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation.html

Keyboard

Understanding Web Content Accessibility Guidelines (WCAG) 2.1

https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html

Focus Visible

Understanding Web Content Accessibility Guidelines (WCAG) 2.1

https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html

Link Purpose

Understanding Web Content Accessibility Guidelines (WCAG) 2.1

https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html

Character Key Shortcuts

Understanding Web Content Accessibility Guidelines (WCAG) 2.1

https://www.w3.org/WAI/WCAG21/Understanding/character-key-shortcuts.html

Article: I Used The Web For A Day With Just A Keyboard

Chris Ashton - Smashing Magazine

https://www.smashingmagazine.com/2018/07/web-with-just-a-keyboard/

Provide easily identifiable feedback

Tips for Getting Started - 3WC Web Accessibility Initiative

https://www.w3.org/WAI/tips/designing/#provide-easily-identifiable-feedback

Lens Of Keyboard

Steven Lambert - Smashing Magazine

https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/#lens-keyboard

Introduction to Focus

Meggin Kearney, Dave Gash, Rob Dodson - Google Developers

https://developers.google.com/web/fundamentals/accessibility/focus

Use semantic HTML for easy keyboard wins

Rob Dodson - Google Developers

https://web.dev/use-semantic-html/

Carousel Concepts

W3C - Web Accessibility Tutorials

https://www.w3.org/WAI/tutorials/carousels/

Style focus

Rob Dodson - Google Developers

https://web.dev/style-focus/

Flow

Reflect the reading order in the code order

Tips for Getting Started - 3WC Web Accessibility Initiative

https://www.w3.org/WAI/tips/developing/#reflect-the-reading-order-in-the-code-order

Focus Order

Understanding Web Content Accessibility Guidelines (WCAG) 2.1

https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html

Location

Understanding Web Content Accessibility Guidelines (WCAG) 2.1

https://www.w3.org/WAI/WCAG21/Understanding/location.html

Bypass Blocks

Understanding Web Content Accessibility Guidelines (WCAG) 2.1

https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks.html

No Keyboard Trap

Understanding Web Content Accessibility Guidelines (WCAG) 2.1

https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap.html

Reflow

Understanding Web Content Accessibility Guidelines (WCAG) 2.1

https://www.w3.org/WAI/WCAG21/Understanding/reflow.html

Content reordering

Rachel Andrew

https://web.dev/content-reordering/

Control focus with tabindex

Rob Dodson - Google Developers

https://web.dev/control-focus-with-tabindex/

Meaningful Sequence

Understanding Web Content Accessibility Guidelines (WCAG) 2.1

https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence.html

Ordering the content in a meaningful sequence

Techniques for the Web Content Accessibility Guidelines (WCAG) 2.2

https://www.w3.org/WAI/WCAG21/Techniques/general/G57

Positioning content based on structural markup

Techniques for the Web Content Accessibility Guidelines (WCAG) 2.2

https://www.w3.org/WAI/WCAG21/Techniques/css/C6