From 19356407750f8c35202e83e13e14c34a0c4b9712 Mon Sep 17 00:00:00 2001 From: Daniel Montalvo Date: Wed, 24 Feb 2021 10:32:45 +0100 Subject: [PATCH 001/416] Adding designer outline --- content/designer/colors-and-styles.md | 66 +++++++++++++++++ content/designer/informational-design.md | 71 ++++++++++++++++++ content/designer/instructions-and-feedback.md | 74 +++++++++++++++++++ content/designer/labels-and-widgets.md | 68 +++++++++++++++++ content/designer/layout-and-spacing.md | 68 +++++++++++++++++ content/designer/navigation.md | 68 +++++++++++++++++ content/designer/research-and-requirements.md | 65 ++++++++++++++++ 7 files changed, 480 insertions(+) create mode 100644 content/designer/colors-and-styles.md create mode 100644 content/designer/informational-design.md create mode 100644 content/designer/instructions-and-feedback.md create mode 100644 content/designer/labels-and-widgets.md create mode 100644 content/designer/layout-and-spacing.md create mode 100644 content/designer/navigation.md create mode 100644 content/designer/research-and-requirements.md diff --git a/content/designer/colors-and-styles.md b/content/designer/colors-and-styles.md new file mode 100644 index 000000000..74bba3707 --- /dev/null +++ b/content/designer/colors-and-styles.md @@ -0,0 +1,66 @@ +--- +title: "[Draft] Module 2: Colors and Styles" +nav_title: "Colors and Styles" +permalink: /curricula/designer-modules/colors-and-styles/ +ref: /curricula/designer-modules/colors-and-styles/ +lang: en +github: + repository: w3c/wai-curricula + path: content/designer/colors-and-styles.md +license: creative-commons +acknowledgements: /curricula/acknowledgements/ +changelog: /curricula/changelog/ +footer: > +

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

+

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

+

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+navigation: + previous: /curricula/designer-modules/forms/ + next: /curricula/designer-modules/rich-applications/ +--- + +## Introduction +{:.no-display} + +Courses based on this module should: + +* demonstrate how people with disabilities rely on colors and styles to interact with websites and applications + +## Learning Outcomes for Module + +Students should be able to: + +* explain how people with disabilities rely on colors and styles to identify and distinguish different user interface components +* create designs that allow for adequate contrast ratios between foreground user interface components, such as text, images of text, and controls and their corresponding background +* ensure distinguishable styles are used to identify different components, such as text, links, buttons, or form elements +* create designs that allow for clear and distinguishable focus indicators, for example using surrounding lines, background color, and highlighting +* ensure that different page regions are conveyed using distinguishable styles +* ensure flashing content is below the general flash and red flash thresholds, or that there is no content that flashes more than three times in a second +* ensure additional mechanisms are available apart from color alone to convey information, such as labels and icons + +{% include excol.html type="all" %} + +## Competencies + +Skills required for this module: + +[To be developed] + +## Topics to Teach + +Topics to achieve the learning outcomes: + +[To be developed + +## Ideas to Assess Knowledge for Module + +Optional ideas to support assessment: + +[To be developed] + +## Teaching Resources + +Suggested resources to support your teaching: + +[To be developed] + diff --git a/content/designer/informational-design.md b/content/designer/informational-design.md new file mode 100644 index 000000000..6cf767bed --- /dev/null +++ b/content/designer/informational-design.md @@ -0,0 +1,71 @@ +--- +title: "[Draft] Module 5: Informational Design" +nav_title: "Informational Design" +permalink: /curricula/designer-modules/informational-design/ +ref: /curricula/designer-modules/informational-design/ +lang: en +github: + repository: w3c/wai-curricula + path: content/designer/informational-design.md +license: creative-commons +acknowledgements: /curricula/acknowledgements/ +changelog: /curricula/changelog/ +footer: > +

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

+

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

+

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+navigation: + previous: /curricula/designer-modules/forms/ + next: /curricula/designer-modules/rich-applications/ +--- + +## Introduction +{:.no-display} + +Courses based on this module should: + +[To be developed] + +## Learning Outcomes for Module + +Students should be able to: + +* explain how people with disabilities rely on different means, structures, and techniques for presenting information, such as textual, graphical, tabular, audio, or video information +* identify and describe different uses of text, such as for labels, static content, or dynamic messages +* describe different ways to complement information presented in text, such as using graphics, color, or shape +* identify and describe different types of images from an accessibility perspective, such as informative, textual, decorative, functional, and complex images +* identify and describe different types of tables from an accessibility perspective, such as layout, simple, and complex tables +* identify the different types of multimedia content (for example audio or video content), and relate each of them to the user needs of people with disabilities +* provide appropriate text alternatives for images included in the design phase, such as logos or graphical components +* provide text that allows users to identify graphical interactive elements such as links or menu items +* create designs that allow to provide accurate descriptions for components such as complex tables, charts, or infographics +* create designs that allow to provide alternatives to multimedia content, such as transcripts for audio or audio described content, +* identify related requirements for developers to ensure that table header cells are programmatically associated to their corresponding data cells +* identify related requirements for developers to ensure alternatives and descriptions are programmatically associated to their corresponding component + +{% include excol.html type="all" %} + +## Competencies + +Skills required for this module: + +[To be developed] + +## Topics to Teach + +Topics to achieve the learning outcomes: + +[To be developed + +## Ideas to Assess Knowledge for Module + +Optional ideas to support assessment: + +[To be developed] + +## Teaching Resources + +Suggested resources to support your teaching: + +[To be developed] + diff --git a/content/designer/instructions-and-feedback.md b/content/designer/instructions-and-feedback.md new file mode 100644 index 000000000..01ac7a7b0 --- /dev/null +++ b/content/designer/instructions-and-feedback.md @@ -0,0 +1,74 @@ +--- +title: "[Draft] Module 6: Instructions and Feedback" +nav_title: "Instructions and Feedback" +permalink: /curricula/designer-modules/instructions-and-feedback/ +ref: /curricula/designer-modules/instructions-and-feedback/ +lang: en +github: + repository: w3c/wai-curricula + path: content/designer/instructions-and-feedback.md +license: creative-commons +acknowledgements: /curricula/acknowledgements/ +changelog: /curricula/changelog/ +footer: > +

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

+

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

+

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+navigation: + previous: /curricula/designer-modules/forms/ + next: /curricula/designer-modules/rich-applications/ +--- + +## Introduction +{:.no-display} + +Courses based on this module should: + +[To be developed] + +## Learning Outcomes for Module + +Students should be able to: + +* explain how people with disabilities rely on instructions and feedback to understand and interact with components such as forms and widgets +* provide clear and distinguishable labels that allow to identify different components +* provide overall instructions to help users understand and interact with forms and widgets, such as: + * allowed data formats + * required and optional input + * explanations of what will happen when a change in a control results in a change of context + * ways to stop and resume sessions +* provide overall instructions about existing time limits in a form and provide specific feedback when such time limits are about to expire +* provide clear instructions about the current step and about the total number of steps involved in a multi-step form +* provide meaningful and descriptive notification messages about errors, successes, or any other event resulting from user input +* ensure that notification messages are easy to understand and can be distinguished from any other component +* provide clear warnings about imminent time limits,, and ensure mechanisms are available to stop and extend time limits +* provide suggestions for error correction when they are known +* create designs that allow for mechanisms to reverse, check, and confirm submissions in legal or financial transactions +* identify related requirements for developers to ensure that labels, instructions, and feedback can be programmatically associated with their corresponding control or component + +{% include excol.html type="all" %} + +## Competencies + +Skills required for this module: + +[To be developed] + +## Topics to Teach + +Topics to achieve the learning outcomes: + +[To be developed + +## Ideas to Assess Knowledge for Module + +Optional ideas to support assessment: + +[To be developed] + +## Teaching Resources + +Suggested resources to support your teaching: + +[To be developed] + diff --git a/content/designer/labels-and-widgets.md b/content/designer/labels-and-widgets.md new file mode 100644 index 000000000..8abed0910 --- /dev/null +++ b/content/designer/labels-and-widgets.md @@ -0,0 +1,68 @@ +--- +title: "[Draft] Module 7: Labels and Widgets" +nav_title: "Labels and Widgets" +permalink: /curricula/designer-modules/labels-and-widgets/ +ref: /curricula/designer-modules/labels-and-widgets/ +lang: en +github: + repository: w3c/wai-curricula + path: content/designer/labels-and-widgets.md +license: creative-commons +acknowledgements: /curricula/acknowledgements/ +changelog: /curricula/changelog/ +footer: > +

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

+

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

+

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+navigation: + previous: /curricula/designer-modules/forms/ + next: /curricula/designer-modules/rich-applications/ +--- + +## Introduction +{:.no-display} + +Courses based on this module should: + +[To be developed] + +## Learning Outcomes for Module + +Students should be able to: + +* explain strategies that people with disabilities use to identify, operate, and interact with widgets +* ensure that custom widgets have appropriate labels that describe their purpose +* ensure that meaningful sequence and clear focus indicators for custom widgets are provided through the widget's lifetime +* create designs for custom widgets that support interaction using multiple input devices, such as keyboard, +* define custom interaction patterns, such as where to place focus when a dialog is open or closed, and what the focus management should be within those dialogs +* define mechanisms that allow users to obtain information about custom interaction patterns, such as specific keyboard shortcuts for applications and expected behavior of custom widgets +* identify related requirements for developers to create designs using native HTML elements to the extent possible and describe their benefits in relation to non-native elements +* identify related requirements for developers to ensure that states and properties of custom widgets, such as expanded, collapsed, visible, or hidden, are distinguishable both visually and programmatically +* identify related requirements for developers to write code for specific keyboard interactions that custom widgets may require + +{% include excol.html type="all" %} + +## Competencies + +Skills required for this module: + +[To be developed] + +## Topics to Teach + +Topics to achieve the learning outcomes: + +[To be developed + +## Ideas to Assess Knowledge for Module + +Optional ideas to support assessment: + +[To be developed] + +## Teaching Resources + +Suggested resources to support your teaching: + +[To be developed] + diff --git a/content/designer/layout-and-spacing.md b/content/designer/layout-and-spacing.md new file mode 100644 index 000000000..be9afe3b5 --- /dev/null +++ b/content/designer/layout-and-spacing.md @@ -0,0 +1,68 @@ +--- +title: "[Draft] Module 1: Layout and Spacing" +nav_title: "Layout and Spacing" +permalink: /curricula/designer-modules/layout-and-spacing/ +ref: /curricula/designer-modules/layout-and-spacing/ +lang: en +github: + repository: w3c/wai-curricula + path: content/designer/layout-and-spacing.md +license: creative-commons +acknowledgements: /curricula/acknowledgements/ +changelog: /curricula/changelog/ +footer: > +

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

+

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

+

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+navigation: + previous: /curricula/designer-modules/ + next: /curricula/designer-modules/rich-applications/ +--- + +## Introduction +{:.no-display} + +Courses based on this module should: + +[To be developed] + +## Learning Outcomes for Module + +Students should be able to: + +* explain how people with disabilities rely on layout and spacing to orient themselves in web pages and applications +* ensure page regions are placed where expected depending on their type and function, for example, page headers at the top and page footers at the bottom +* ensure headings are nested according to the hierarchical structure of the page and describe the topic of the section they entitle +* ensure white space and proximity help users determine the relations between different page regions and contents +* ensure test target sizes that are at least 44 by 44 CSS pixels +* ensure meaningful sequence is preserved when using different viewport sizes or different devices to access content +* create designs that allow to preserve content and functionality when line height as well as spacing between paragraphs, words, and letters are modified by the user +* create designs that allow text resizing up to 200% without loss of content and functionality +* create designs that do not restrict the content view and operation to a single display orientation, such as portrait or landscape + +{% include excol.html type="all" %} + +## Competencies + +Skills required for this module: + +[To be developed] + +## Topics to Teach + +Topics to achieve the learning outcomes: + +[To be developed + +## Ideas to Assess Knowledge for Module + +Optional ideas to support assessment: + +[To be developed] + +## Teaching Resources + +Suggested resources to support your teaching: + +[To be developed] + diff --git a/content/designer/navigation.md b/content/designer/navigation.md new file mode 100644 index 000000000..b3ee2649b --- /dev/null +++ b/content/designer/navigation.md @@ -0,0 +1,68 @@ +--- +title: "[Draft] Module 4: Navigation" +nav_title: "Navigation" +permalink: /curricula/designer-modules/navigation/ +ref: /curricula/designer-modules/navigation/ +lang: en +github: + repository: w3c/wai-curricula + path: content/designer/navigation.md +license: creative-commons +acknowledgements: /curricula/acknowledgements/ +changelog: /curricula/changelog/ +footer: > +

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

+

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

+

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+navigation: + previous: /curricula/designer-modules/forms/ + next: /curricula/designer-modules/rich-applications/ +--- + +## Introduction +{:.no-display} + +Courses based on this module should: + +[To be developed] + +## Learning Outcomes for Module + +Students should be able to: + +* explain strategies that people with disabilities use to navigate and operate web pages +* create designs that allow for multiple navigational mechanisms, such as menus, search boxes, breadcrumb trails, and sitemaps +* create designs that allow users to bypass blocks of repeated content +* create designs that allow for mechanisms to stop, adjust, and extend time limits +* create designs that allow for mechanisms to pause, stop, or hide any moving, blinking, scrolling, or auto-updating content, such as animations or carousels +* create designs that allow for mechanisms to stop or control the volume of audio that plays automatically +* ensure interactions do not rely solely on multipoint or path-based gestures, such as swipe or pinch +* ensure that mechanisms to undo or abort an action carried out with pointer operations are always available +* identify related requirements for developers to ensure that navigational mechanisms are operable using the keyboard and other input devices + +{% include excol.html type="all" %} + +## Competencies + +Skills required for this module: + +[To be developed] + +## Topics to Teach + +Topics to achieve the learning outcomes: + +[To be developed + +## Ideas to Assess Knowledge for Module + +Optional ideas to support assessment: + +[To be developed] + +## Teaching Resources + +Suggested resources to support your teaching: + +[To be developed] + diff --git a/content/designer/research-and-requirements.md b/content/designer/research-and-requirements.md new file mode 100644 index 000000000..820ec1359 --- /dev/null +++ b/content/designer/research-and-requirements.md @@ -0,0 +1,65 @@ +--- +title: "[Draft] Module 1: Research and Requirements" +nav_title: "Research and Requirements" +permalink: /curricula/designer-modules/research-and-requirements/ +ref: /curricula/designer-modules/research-and-requirements/ +lang: en +github: + repository: w3c/wai-curricula + path: content/designer/research-and-requirements.md +license: creative-commons +acknowledgements: /curricula/acknowledgements/ +changelog: /curricula/changelog/ +footer: > +

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

+

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

+

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+navigation: + previous: /curricula/designer-modules/ + next: /curricula/designer-modules/rich-applications/ +--- + +## Introduction +{:.no-display} + +Courses based on this module should: + +[To be developed] + +## Learning Outcomes for Module + +Students should be able to: + +* describe how involving users with disabilities early and throughout in the design and development process can lead to overall improved usability for everybody, including people without disabilities +* ensure people with disabilities are included in design methodologies and techniques, for example in use cases, user analysis, personas, scenarios, and usability testing +* identify different groups of people with disabilities and explain strategies they use to interact with the Web +* ensure that collected user input in user research includes different groups of users with disabilities and various levels of experience using the Web +* ensure informed consent and other ethical considerations in research practice are observed when working with people, including people with disabilities +* ensure people with disabilities who participate in user research always understand the purpose of the research, and are aware of their right to opt out at any time if so desired + +{% include excol.html type="all" %} + +## Competencies + +Skills required for this module: + +[To be developed] + +## Topics to Teach + +Topics to achieve the learning outcomes: + +[To be developed + +## Ideas to Assess Knowledge for Module + +Optional ideas to support assessment: + +[To be developed] + +## Teaching Resources + +Suggested resources to support your teaching: + +[To be developed] + From b48574fe806e32ec467cd71bc9b0fdf71fd52b92 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 25 Feb 2021 09:40:38 +0100 Subject: [PATCH 002/416] Changing title name --- ...quirements.md => user-research-and-requirements.md} | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) rename content/designer/{research-and-requirements.md => user-research-and-requirements.md} (89%) diff --git a/content/designer/research-and-requirements.md b/content/designer/user-research-and-requirements.md similarity index 89% rename from content/designer/research-and-requirements.md rename to content/designer/user-research-and-requirements.md index 820ec1359..702288cff 100644 --- a/content/designer/research-and-requirements.md +++ b/content/designer/user-research-and-requirements.md @@ -1,12 +1,12 @@ --- -title: "[Draft] Module 1: Research and Requirements" -nav_title: "Research and Requirements" -permalink: /curricula/designer-modules/research-and-requirements/ -ref: /curricula/designer-modules/research-and-requirements/ +title: "[Draft] Module 1: User Research and Requirements" +nav_title: "User Research and Requirements" +permalink: /curricula/designer-modules/user-research-and-requirements/ +ref: /curricula/designer-modules/user-research-and-requirements/ lang: en github: repository: w3c/wai-curricula - path: content/designer/research-and-requirements.md + path: content/designer/user-research-and-requirements.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ From 1d835cc99612efaa0c9daececf9e9d204f455589 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 25 Feb 2021 15:35:12 +0100 Subject: [PATCH 003/416] Updates --- .../user-research-and-requirements.md | 22 +++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/content/designer/user-research-and-requirements.md b/content/designer/user-research-and-requirements.md index 702288cff..ca09a6e27 100644 --- a/content/designer/user-research-and-requirements.md +++ b/content/designer/user-research-and-requirements.md @@ -31,8 +31,9 @@ Courses based on this module should: Students should be able to: * describe how involving users with disabilities early and throughout in the design and development process can lead to overall improved usability for everybody, including people without disabilities -* ensure people with disabilities are included in design methodologies and techniques, for example in use cases, user analysis, personas, scenarios, and usability testing * identify different groups of people with disabilities and explain strategies they use to interact with the Web +* ensure legal requirements related to accessibility are researched and included in the design phase +* ensure people with disabilities are included in design methodologies and techniques, for example in use cases, user analysis, personas, scenarios, and usability testing * ensure that collected user input in user research includes different groups of users with disabilities and various levels of experience using the Web * ensure informed consent and other ethical considerations in research practice are observed when working with people, including people with disabilities * ensure people with disabilities who participate in user research always understand the purpose of the research, and are aware of their right to opt out at any time if so desired @@ -49,7 +50,24 @@ Skills required for this module: Topics to achieve the learning outcomes: -[To be developed +### Topic: User Requirements + +#### Learning Outcomes for Topic + +Students should be able to: + +* describe the use of different assistive technologies and adaptive strategies by people with disabilities to interact with webpages and applications, +* ensure different types of disabilities are included in user groups +* ensure personas with disabilities are included in your persons +* ensure use cases and scenarios include useof the Web or application with assistive technologies and adaptive strategies + +different types of user requirements that relate to people with disabilities, such as adequate contrast ratios, keyobard compatibility, and use of technology that is accessibility supported + + + + +### Topic: Involving Users with Disabilities + ## Ideas to Assess Knowledge for Module From 8021f0d7292a292c57980501df980a2577944686 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 1 Mar 2021 14:59:48 +0100 Subject: [PATCH 004/416] Updates to designer modules --- _data/navigation.yml | 17 ++++++++ content/designer/colors-and-styles.md | 43 ++++++++++++++++--- content/designer/layout-and-spacing.md | 43 ++++++++++++++++--- .../user-research-and-requirements.md | 37 ++++++++++++---- 4 files changed, 120 insertions(+), 20 deletions(-) diff --git a/_data/navigation.yml b/_data/navigation.yml index a846bd8f2..c8c8a4cf4 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -256,6 +256,23 @@ url: "/curricula/developer-modules/custom-widgets/" - name: Rich Applications url: "/curricula/developer-modules/rich-applications/" + - name: Designer Modules + url: "/curricula/designer-modules/" + pages: + - name: User Research and Requirements + url: /curricula/designer-modules/user-research-and-requirements/ + - name: Colors and Styles + url: /curricula/designer-modules/colors-and-styles + - name: Layout and Spacing + url: /curricula/designer-modules/layout-and-spacing + - name: Navigation + url: /curricula/designer-modules/navigation/ + - name: Informational Design + url: /curricula/designer-modules/informational-design/ + - name: Instructions and Feedback + url: /curricula/designer-modules/instructions-and-feedback/ + - name: Labels and Widgets + url: /curricula/designer-modules/labels-and-widgets/ - name: Changelog url: "/curricula/changelog/" hide: true diff --git a/content/designer/colors-and-styles.md b/content/designer/colors-and-styles.md index 74bba3707..78c3f1fa8 100644 --- a/content/designer/colors-and-styles.md +++ b/content/designer/colors-and-styles.md @@ -11,7 +11,7 @@ license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ footer: > -

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

+

Date: Updated @@ Month 2021. First published December 2019.

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: @@ -32,11 +32,10 @@ Students should be able to: * explain how people with disabilities rely on colors and styles to identify and distinguish different user interface components * create designs that allow for adequate contrast ratios between foreground user interface components, such as text, images of text, and controls and their corresponding background -* ensure distinguishable styles are used to identify different components, such as text, links, buttons, or form elements * create designs that allow for clear and distinguishable focus indicators, for example using surrounding lines, background color, and highlighting -* ensure that different page regions are conveyed using distinguishable styles -* ensure flashing content is below the general flash and red flash thresholds, or that there is no content that flashes more than three times in a second -* ensure additional mechanisms are available apart from color alone to convey information, such as labels and icons +* create designs that allow for content that does not flash or create physical reactions +* ensure that different page regions and user interface components are conveyed using distinguishable styles +* ensure additional mechanisms are available apart from color alone to convey information, such as text cues and icons {% include excol.html type="all" %} @@ -50,7 +49,39 @@ Skills required for this module: Topics to achieve the learning outcomes: -[To be developed +### Topic: Contrast Ratios + +#### Learning Outcomes for Topic + +Students should be able to: + +* explain how contrast ratios allow people with disabilities to read, understand, and distinguish foreground content from background +* create designs that allow text and images of text to have a contrast ratio of at least 4.5:1 +* create designs that allow for large-scale text and images of text to have a contrast ratio of at least 3:1 +* create designs that allow user interface components and graphical elements to have a contrast ratio of at least 3:1 +* ensure focus indicators have a contrast ratio that allows them to be perceived by users + +### Topic: Seizures and Physical Reactions + +#### Learning Outcomes for Topic + +Students should be able to: + +* ensure flashing content is below the general flash and red flash thresholds +* create designs that allow content that does not flash more than three times in a second +* create designs that allow to disable motion animation triggered by interaction + +#### Topic: Content Identification + +#### Learning Outcomes for Topic + +Students should be able to: + +* Ensure distinguishable styles are applied to different page regions, such as header, navigation, main, or footer +* ensure distinguishable styles are used to identify different components, such as text, links, buttons, or form elements +* create designs that allow for text cues to convey any information that is conveyed using color alone, such as required form fields in a form +* ensure that information conveyed through differences in text color is also conveyed using other visual cues, such as underline, bold, and italics +* ensure that information provided using differences in color is also provided using different patterns, shapes, and icons ## Ideas to Assess Knowledge for Module diff --git a/content/designer/layout-and-spacing.md b/content/designer/layout-and-spacing.md index be9afe3b5..5e5d496fd 100644 --- a/content/designer/layout-and-spacing.md +++ b/content/designer/layout-and-spacing.md @@ -11,7 +11,7 @@ license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ footer: > -

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

+

Date: Updated @@ Month 2021. First published December 2019.

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: @@ -34,10 +34,10 @@ Students should be able to: * ensure page regions are placed where expected depending on their type and function, for example, page headers at the top and page footers at the bottom * ensure headings are nested according to the hierarchical structure of the page and describe the topic of the section they entitle * ensure white space and proximity help users determine the relations between different page regions and contents -* ensure test target sizes that are at least 44 by 44 CSS pixels -* ensure meaningful sequence is preserved when using different viewport sizes or different devices to access content +* create designs that allow for target sizes that can be tapped by users with mobility impairments and using different input methods +* ensure meaningful sequence and content are preserved when using different viewport sizes or different devices to access content * create designs that allow to preserve content and functionality when line height as well as spacing between paragraphs, words, and letters are modified by the user -* create designs that allow text resizing up to 200% without loss of content and functionality +* create designs that allow text resizing without loss of content and functionality * create designs that do not restrict the content view and operation to a single display orientation, such as portrait or landscape {% include excol.html type="all" %} @@ -52,7 +52,40 @@ Skills required for this module: Topics to achieve the learning outcomes: -[To be developed +### Topic: Page Layout + +#### Learning Outcomes for Topic + +Students should be able to: + +* provide distinctive styles and spacing for each of the page regions, heading levels, and user interface components +* ensure positioning of page regions falls under user expectations, such as headers at the top, footers at the bottom, and navigation regions at the top left +* ensure heading levels are used to convey the hierarchical structure of the content +* ensure heading texts describe the purpose of the section they entitle + +### Topic: Responsive Design + +#### Learning Outcomes for Module + +Students should be able to: + +* ensure target sizes that are at least 44 by 44 CSS pixels +* ensure content can be presented without loss of information and functionality, and that accessing such content does not require scrolling: + * vertically at a width equivalent to 320 CSS pixels + * horizontally at a height equivalent to 256 CSS pixels +* create designs that allow text resizing up to 200% without loss of content and functionality +* create designs that allow users to set the orientation to portrait or landscape, or that include show or hide controls to access contents in portrait and landscape orientations + +### TRopic: Text Spacing + +#### Learning Outcomes for Topic + +Students should be able to: + +* create designs that prevent loss of content and functionality for the following properties: + * line spacing to at least 1.5 times the font size + * Spacing following paragraphs to at least 2 times the font size + * Letter spacing (tracking) to at least 0.12 times the font size ## Ideas to Assess Knowledge for Module diff --git a/content/designer/user-research-and-requirements.md b/content/designer/user-research-and-requirements.md index ca09a6e27..587dc3beb 100644 --- a/content/designer/user-research-and-requirements.md +++ b/content/designer/user-research-and-requirements.md @@ -11,7 +11,7 @@ license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ footer: > -

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

+

Date: Updated @@ Month 2021. First published December 2019.

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: @@ -33,8 +33,8 @@ Students should be able to: * describe how involving users with disabilities early and throughout in the design and development process can lead to overall improved usability for everybody, including people without disabilities * identify different groups of people with disabilities and explain strategies they use to interact with the Web * ensure legal requirements related to accessibility are researched and included in the design phase -* ensure people with disabilities are included in design methodologies and techniques, for example in use cases, user analysis, personas, scenarios, and usability testing * ensure that collected user input in user research includes different groups of users with disabilities and various levels of experience using the Web +* ensure people with disabilities are included in design methodologies and techniques, for example in use cases, user analysis, personas, scenarios, and usability testing * ensure informed consent and other ethical considerations in research practice are observed when working with people, including people with disabilities * ensure people with disabilities who participate in user research always understand the purpose of the research, and are aware of their right to opt out at any time if so desired @@ -50,23 +50,42 @@ Skills required for this module: Topics to achieve the learning outcomes: -### Topic: User Requirements +### Topic: Observation and Understanding + +#### Learning Outcomes for Topic + +Students should be able to: + +* describe the use of different assistive technologies and adaptive strategies by people with disabilities to interact with web pages and applications +* ensure different groups of users with disabilities are included when working with user groups +* ensure standards and policies that relate to people with disabilities are considered in research, such as accessibility standards or laws promoting inclusion of people with disabilities +* ensure different types of user requirements that relate to people with disabilities are considered, such as adequate contrast ratios, keyboard compatibility, and use of technology that is compatible with assistive technologies and adaptive strategies + +### Topic: Analysis #### Learning Outcomes for Topic Students should be able to: -* describe the use of different assistive technologies and adaptive strategies by people with disabilities to interact with webpages and applications, -* ensure different types of disabilities are included in user groups -* ensure personas with disabilities are included in your persons -* ensure use cases and scenarios include useof the Web or application with assistive technologies and adaptive strategies +* create personas that include people with different types of disabilities and different levels of experience using the Web +* create use cases and scenarios that include use of the Web or application with different types of assistive technologies and adaptive strategies +* ensure appropriate relationships are developed when working with people with disabilities +* ensure treatment of people with disabilities is respectful, same as when working with everybody else +* ensure appropriate compensation is provided to people with disabilities +* ensure people with disabilities understand the purpose of your interviews, surveys, and questionnaires and are comfortable during the research activities +* ensure people with disabilities can opt out at any time if they desire -different types of user requirements that relate to people with disabilities, such as adequate contrast ratios, keyobard compatibility, and use of technology that is accessibility supported +### Topic: Test +#### Learning Outcomes for Topic +Students should be able to: -### Topic: Involving Users with Disabilities +* determine the characteristics of participants in usability testing based on different factors, such as overall project requirements, level of experience, use of assistive technology, and type of disability +* ensure recruitment of participants consider the variety of disabilities, assistive technologies, adaptive strategies, and levels of experience in conjunction with overall usability requirements +* ensure adequate location is chose to conduct the tests depending on the test goals, assistive technology needs, custom setups, transportation means, accessibility of the facilities, and others +* ensure adequate time for participants to carry on tasks is allocated, such as different time sets for different levels of experience and familiarity with the web or application ## Ideas to Assess Knowledge for Module From 0657f6fa4cdc285cbc56a052babb2b53a024b18a Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 1 Mar 2021 15:00:55 +0100 Subject: [PATCH 005/416] Adding first ideas to overview page --- content/designer/designer-modules.md | 34 ++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 content/designer/designer-modules.md diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md new file mode 100644 index 000000000..7509e15b4 --- /dev/null +++ b/content/designer/designer-modules.md @@ -0,0 +1,34 @@ +--- +title: "[Draft] Designer Modules" +nav_title: "Designer Modules" +permalink: /curricula/designer-modules/ +ref: /curricula/designer-modules/ +lang: en +github: + repository: w3c/wai-curricula + path: content/designer/designer-modules/ +license: creative-commons +acknowledgements: /curricula/acknowledgements/ +changelog: /curricula/changelog/ +footer: > +

Date: Updated @@ Month 2021. First published December 2019.

+

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

+

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+navigation: + previous: /curricula/developer-modules/rich-applications/ + next: /curricula/designer-modules/user-research-and-requirements/ +--- + +## Introduction + +The designer modules guide the creation of courses that: + +* @@@ +... + +These modules focus on user experience, visual, and interaction aspects to design accessible web content and applications. They primarily address the following designer subcategories: + +* user experience designer +* visual designer +* interaction designer +@@@ From 83d8a64e6ab341727ed407bef74bf59d65cc54ff Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 1 Mar 2021 16:37:00 +0100 Subject: [PATCH 006/416] Updates to designer modules --- content/designer/colors-and-styles.md | 13 +++++++++---- content/designer/designer-modules.md | 3 +++ content/designer/layout-and-spacing.md | 5 +++++ content/designer/user-research-and-requirements.md | 9 +++++++-- 4 files changed, 24 insertions(+), 6 deletions(-) diff --git a/content/designer/colors-and-styles.md b/content/designer/colors-and-styles.md index 78c3f1fa8..62f684c7d 100644 --- a/content/designer/colors-and-styles.md +++ b/content/designer/colors-and-styles.md @@ -14,9 +14,14 @@ footer: >

Date: Updated @@ Month 2021. First published December 2019.

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+parent_in_h1: + - ref: /curricula/designer-modules/ + name: nav_title + - ref: /curricula/ + name: "Curricula on Web Accessibility" navigation: - previous: /curricula/designer-modules/forms/ - next: /curricula/designer-modules/rich-applications/ + previous: /curricula/designer-modules/user-research-and-requirements/ + next: /curricula/designer-modules/layout-and-spacing/ --- ## Introduction @@ -31,9 +36,9 @@ Courses based on this module should: Students should be able to: * explain how people with disabilities rely on colors and styles to identify and distinguish different user interface components -* create designs that allow for adequate contrast ratios between foreground user interface components, such as text, images of text, and controls and their corresponding background +* create designs that allow for adequate contrast ratios between foreground user interface components (such as text, images of text, and controls) and their corresponding background * create designs that allow for clear and distinguishable focus indicators, for example using surrounding lines, background color, and highlighting -* create designs that allow for content that does not flash or create physical reactions +* create designs that allow to avoid seizures and other physical reactions * ensure that different page regions and user interface components are conveyed using distinguishable styles * ensure additional mechanisms are available apart from color alone to convey information, such as text cues and icons diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 7509e15b4..1c83cf63b 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -14,6 +14,9 @@ footer: >

Date: Updated @@ Month 2021. First published December 2019.

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+parent_in_h1: + - ref: /curricula/ + name: title navigation: previous: /curricula/developer-modules/rich-applications/ next: /curricula/designer-modules/user-research-and-requirements/ diff --git a/content/designer/layout-and-spacing.md b/content/designer/layout-and-spacing.md index 5e5d496fd..3491fd425 100644 --- a/content/designer/layout-and-spacing.md +++ b/content/designer/layout-and-spacing.md @@ -14,6 +14,11 @@ footer: >

Date: Updated @@ Month 2021. First published December 2019.

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+parent_in_h1: + - ref: /curricula/designer-modules/ + name: nav_title + - ref: /curricula/ + name: "Curricula on Web Accessibility" navigation: previous: /curricula/designer-modules/ next: /curricula/designer-modules/rich-applications/ diff --git a/content/designer/user-research-and-requirements.md b/content/designer/user-research-and-requirements.md index 587dc3beb..2ca04f4fd 100644 --- a/content/designer/user-research-and-requirements.md +++ b/content/designer/user-research-and-requirements.md @@ -14,9 +14,14 @@ footer: >

Date: Updated @@ Month 2021. First published December 2019.

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+parent_in_h1: + - ref: /curricula/designer-modules/ + name: nav_title + - ref: /curricula/ + name: "Curricula on Web Accessibility" navigation: previous: /curricula/designer-modules/ - next: /curricula/designer-modules/rich-applications/ + next: /curricula/designer-modules/colors-and-styles/ --- ## Introduction @@ -84,7 +89,7 @@ Students should be able to: * determine the characteristics of participants in usability testing based on different factors, such as overall project requirements, level of experience, use of assistive technology, and type of disability * ensure recruitment of participants consider the variety of disabilities, assistive technologies, adaptive strategies, and levels of experience in conjunction with overall usability requirements -* ensure adequate location is chose to conduct the tests depending on the test goals, assistive technology needs, custom setups, transportation means, accessibility of the facilities, and others +* ensure adequate location is chosen to conduct the tests depending on the test goals, assistive technology needs, custom setups, transportation means, accessibility of the facilities, and others * ensure adequate time for participants to carry on tasks is allocated, such as different time sets for different levels of experience and familiarity with the web or application From 345a31d4794bb50638185a0c48bdef363f3f34b2 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 1 Mar 2021 16:40:03 +0100 Subject: [PATCH 007/416] Updates to designer modules --- _data/navigation.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_data/navigation.yml b/_data/navigation.yml index c8c8a4cf4..81cc30762 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -262,7 +262,7 @@ - name: User Research and Requirements url: /curricula/designer-modules/user-research-and-requirements/ - name: Colors and Styles - url: /curricula/designer-modules/colors-and-styles + url: /curricula/designer-modules/colors-and-styles/ - name: Layout and Spacing url: /curricula/designer-modules/layout-and-spacing - name: Navigation From 66f3924b5bde662285bd9c9e0a49ff4e8963dcb6 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 1 Mar 2021 16:40:36 +0100 Subject: [PATCH 008/416] Fixing nav --- _data/navigation.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_data/navigation.yml b/_data/navigation.yml index 81cc30762..f1c47ace7 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -264,7 +264,7 @@ - name: Colors and Styles url: /curricula/designer-modules/colors-and-styles/ - name: Layout and Spacing - url: /curricula/designer-modules/layout-and-spacing + url: /curricula/designer-modules/layout-and-spacing/ - name: Navigation url: /curricula/designer-modules/navigation/ - name: Informational Design From 418248d067a95258c9dc81f1d42e27c9079ae77f Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 1 Mar 2021 16:57:54 +0100 Subject: [PATCH 009/416] Updates to designer modules --- content/designer/colors-and-styles.md | 4 +--- content/designer/layout-and-spacing.md | 6 ++---- content/designer/user-research-and-requirements.md | 4 ---- 3 files changed, 3 insertions(+), 11 deletions(-) diff --git a/content/designer/colors-and-styles.md b/content/designer/colors-and-styles.md index 62f684c7d..8ecf881bd 100644 --- a/content/designer/colors-and-styles.md +++ b/content/designer/colors-and-styles.md @@ -42,8 +42,6 @@ Students should be able to: * ensure that different page regions and user interface components are conveyed using distinguishable styles * ensure additional mechanisms are available apart from color alone to convey information, such as text cues and icons -{% include excol.html type="all" %} - ## Competencies Skills required for this module: @@ -76,7 +74,7 @@ Students should be able to: * create designs that allow content that does not flash more than three times in a second * create designs that allow to disable motion animation triggered by interaction -#### Topic: Content Identification +### Topic: Content Identification #### Learning Outcomes for Topic diff --git a/content/designer/layout-and-spacing.md b/content/designer/layout-and-spacing.md index 3491fd425..116cd2d9c 100644 --- a/content/designer/layout-and-spacing.md +++ b/content/designer/layout-and-spacing.md @@ -45,8 +45,6 @@ Students should be able to: * create designs that allow text resizing without loss of content and functionality * create designs that do not restrict the content view and operation to a single display orientation, such as portrait or landscape -{% include excol.html type="all" %} - ## Competencies Skills required for this module: @@ -70,7 +68,7 @@ Students should be able to: ### Topic: Responsive Design -#### Learning Outcomes for Module +#### Learning Outcomes for Topic Students should be able to: @@ -81,7 +79,7 @@ Students should be able to: * create designs that allow text resizing up to 200% without loss of content and functionality * create designs that allow users to set the orientation to portrait or landscape, or that include show or hide controls to access contents in portrait and landscape orientations -### TRopic: Text Spacing +### Topic: Text Spacing #### Learning Outcomes for Topic diff --git a/content/designer/user-research-and-requirements.md b/content/designer/user-research-and-requirements.md index 2ca04f4fd..8e8b7cd43 100644 --- a/content/designer/user-research-and-requirements.md +++ b/content/designer/user-research-and-requirements.md @@ -43,8 +43,6 @@ Students should be able to: * ensure informed consent and other ethical considerations in research practice are observed when working with people, including people with disabilities * ensure people with disabilities who participate in user research always understand the purpose of the research, and are aware of their right to opt out at any time if so desired -{% include excol.html type="all" %} - ## Competencies Skills required for this module: @@ -80,7 +78,6 @@ Students should be able to: * ensure people with disabilities understand the purpose of your interviews, surveys, and questionnaires and are comfortable during the research activities * ensure people with disabilities can opt out at any time if they desire - ### Topic: Test #### Learning Outcomes for Topic @@ -92,7 +89,6 @@ Students should be able to: * ensure adequate location is chosen to conduct the tests depending on the test goals, assistive technology needs, custom setups, transportation means, accessibility of the facilities, and others * ensure adequate time for participants to carry on tasks is allocated, such as different time sets for different levels of experience and familiarity with the web or application - ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: From 18d2e485d95ba714dca78b61d1202106c7a0450f Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 3 Mar 2021 11:43:24 +0100 Subject: [PATCH 010/416] Updates to designer modules --- _data/navigation.yml | 4 +- content/designer/colors-and-styles.md | 10 +- content/designer/designer-modules.md | 2 +- content/designer/layout-and-spacing.md | 2 +- .../designer/navigation-and-interaction.md | 130 ++++++++++++++++++ content/designer/navigation.md | 68 --------- .../user-research-and-requirements.md | 10 +- 7 files changed, 144 insertions(+), 82 deletions(-) create mode 100644 content/designer/navigation-and-interaction.md delete mode 100644 content/designer/navigation.md diff --git a/_data/navigation.yml b/_data/navigation.yml index f1c47ace7..5c08e84a8 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -265,8 +265,8 @@ url: /curricula/designer-modules/colors-and-styles/ - name: Layout and Spacing url: /curricula/designer-modules/layout-and-spacing/ - - name: Navigation - url: /curricula/designer-modules/navigation/ + - name: Navigation and Interaaction + url: /curricula/designer-modules/navigation-and-interaction/ - name: Informational Design url: /curricula/designer-modules/informational-design/ - name: Instructions and Feedback diff --git a/content/designer/colors-and-styles.md b/content/designer/colors-and-styles.md index 8ecf881bd..eb3186af8 100644 --- a/content/designer/colors-and-styles.md +++ b/content/designer/colors-and-styles.md @@ -37,10 +37,10 @@ Students should be able to: * explain how people with disabilities rely on colors and styles to identify and distinguish different user interface components * create designs that allow for adequate contrast ratios between foreground user interface components (such as text, images of text, and controls) and their corresponding background -* create designs that allow for clear and distinguishable focus indicators, for example using surrounding lines, background color, and highlighting +* create designs that allow for clear and distinguishable focus indicators, for example using borders, background color, and highlighting * create designs that allow to avoid seizures and other physical reactions * ensure that different page regions and user interface components are conveyed using distinguishable styles -* ensure additional mechanisms are available apart from color alone to convey information, such as text cues and icons +* ensure additional mechanisms are available apart from color alone to convey information, such as text cues, patterns, and icons ## Competencies @@ -59,9 +59,9 @@ Topics to achieve the learning outcomes: Students should be able to: * explain how contrast ratios allow people with disabilities to read, understand, and distinguish foreground content from background -* create designs that allow text and images of text to have a contrast ratio of at least 4.5:1 -* create designs that allow for large-scale text and images of text to have a contrast ratio of at least 3:1 -* create designs that allow user interface components and graphical elements to have a contrast ratio of at least 3:1 +* create designs that allow text and images of text to have a contrast ratio of at least 4.5:1 with respect to their background +* create designs that allow for large-scale text and images of text to have a contrast ratio of at least 3:1 with respect to their background +* create designs that allow user interface components and graphical elements to have a contrast ratio of at least 3:1 with respect to their background * ensure focus indicators have a contrast ratio that allows them to be perceived by users ### Topic: Seizures and Physical Reactions diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 1c83cf63b..97c4020eb 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -29,7 +29,7 @@ The designer modules guide the creation of courses that: * @@@ ... -These modules focus on user experience, visual, and interaction aspects to design accessible web content and applications. They primarily address the following designer subcategories: +These modules focus on user experience, visual, and interaction aspects to design accessible web content and applications. They primarily address the following roles: * user experience designer * visual designer diff --git a/content/designer/layout-and-spacing.md b/content/designer/layout-and-spacing.md index 116cd2d9c..3726ce453 100644 --- a/content/designer/layout-and-spacing.md +++ b/content/designer/layout-and-spacing.md @@ -21,7 +21,7 @@ parent_in_h1: name: "Curricula on Web Accessibility" navigation: previous: /curricula/designer-modules/ - next: /curricula/designer-modules/rich-applications/ + next: /curricula/designer-modules/navigation-and-interaction/ --- ## Introduction diff --git a/content/designer/navigation-and-interaction.md b/content/designer/navigation-and-interaction.md new file mode 100644 index 000000000..9bd8b7389 --- /dev/null +++ b/content/designer/navigation-and-interaction.md @@ -0,0 +1,130 @@ +--- +title: "[Draft] Module 4: Navigation and Interaction" +nav_title: "Navigation and Interaction" +permalink: /curricula/designer-modules/navigation-and-interaction/ +ref: /curricula/designer-modules/navigation-and-interaction/ +lang: en +github: + repository: w3c/wai-curricula + path: content/designer/navigation-and-interaction.md +license: creative-commons +acknowledgements: /curricula/acknowledgements/ +changelog: /curricula/changelog/ +footer: > +

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

+

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

+

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+navigation: + previous: /curricula/designer-modules/forms/ + next: /curricula/designer-modules/rich-applications/ +--- + +## Introduction +{:.no-display} + +Courses based on this module should: + +[To be developed] + +## Learning Outcomes for Module + +Students should be able to: + +* explain strategies that people with disabilities use to navigate and interact with web pages +* create designs that allow users to bypass blocks of repeated content +* create designs that allow for multiple navigational mechanisms, such as menus, search boxes, breadcrumb trails, tables of contents, and sitemaps +* create designs that allow for mechanisms to stop, adjust, and extend time limits +* create designs that allow for mechanisms to pause, stop, or hide any moving, blinking, scrolling, or auto-updating content, such as animations or carousels +* create designs that allow for mechanisms to stop or control the volume of audio that plays automatically +* ensure interactions do not rely solely on multipoint or path-based gestures, such as swipe or pinch +* ensure that mechanisms to undo or abort an action carried out with pointer operations are always available +* identify related requirements for developers to ensure that navigational mechanisms can be used with the keyboard and other input devices + +{% include excol.html type="all" %} + +## Competencies + +Skills required for this module: + +[To be developed] +{% comment %} + +Skills required for this module: + +{% include excol.html type="start" %} + +### Students + +{% include excol.html type="middle" %} + +* [Prerequisites for Students](/curricula/developer-modules/#prerequisites-for-students) +* [Module 1: Page Structure](/curricula/developer-modules/page-structure/) from [Developer Modules](/curricula/developer-modules/) + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + +### Instructors + +{% include excol.html type="middle" %} + +* Applied expertise in teaching: + * [WCAG 2 Success Criterion 2.4.1 Bypass Blocks](https://www.w3.org/WAI/WCAG21/quickref/#bypass-blocks) + * [WCAG 2 Success Criterion 2.4.5 Multiple Ways](https://www.w3.org/WAI/WCAG21/quickref/#multiple-ways) + * [WCAG 2 Success Criterion 2.4.8 Location](https://www.w3.org/WAI/WCAG21/quickref/#location) + * [WCAG 2 Success Criterion 3.2.3 Consistent Navigation](https://www.w3.org/WAI/WCAG21/quickref/#consistent-navigation) + +{% endcomment %} + +## Topics to Teach + +Topics to achieve the learning outcomes: +### Topic: Navigational Mechanisms + +#### Learning Outcomes for Topic + +Students should be able to: + +* create designs that support skipping blocks of repeated content providing at least one of the following techniques: + * a link at the top of each page that goes directly to the main content area + * a link at the beginning of a block of repeated content to go to the end of the block + * links at the top of the page that go to each area of the content + * an expandable and collapsible menu to bypass block of content +* create designs that support site maps to provide an overview of the entire site +* create designs that support breadcrumb trails to provide information about the user's location in a set of web pages +* create designs that support table of contents to give an overview of the whole site or document and to allow users to go to specific parts of the content + +### Topic: Enough Time + +#### Learning Outcomes for Topic + +Students should be able to: + +* create designs that allow users to turn off existing time limits +* create designs that allow users to adjust existing time limits at least ten times the original setting +* create designs that support extending existing time limits by warning the user at least twenty seconds before the time limit expires +* ensure content that auto scrolls can be paused and resumed from where it was left to allow users to better read and process content + +### Topic: Input Modalities + +Students should be able to: + +* create designs that support alternatives to multi-pointer gestures using single pointer activation +* ensure down event on single pointer gestures either: + * do not perform any action + * have available mechanisms to abort or undo any action carried on +* create designs that support alternatives to devise or user motion such as shaking, by using user interface components that do not require motion +* ensure response to motion can be disabled by the user to prevent accidental actuation, such as undoing an action by shaking a device + +## Ideas to Assess Knowledge for Module + +Optional ideas to support assessment: + +[To be developed] + +## Teaching Resources + +Suggested resources to support your teaching: + +[To be developed] + diff --git a/content/designer/navigation.md b/content/designer/navigation.md deleted file mode 100644 index b3ee2649b..000000000 --- a/content/designer/navigation.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: "[Draft] Module 4: Navigation" -nav_title: "Navigation" -permalink: /curricula/designer-modules/navigation/ -ref: /curricula/designer-modules/navigation/ -lang: en -github: - repository: w3c/wai-curricula - path: content/designer/navigation.md -license: creative-commons -acknowledgements: /curricula/acknowledgements/ -changelog: /curricula/changelog/ -footer: > -

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

-

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

-

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

-navigation: - previous: /curricula/designer-modules/forms/ - next: /curricula/designer-modules/rich-applications/ ---- - -## Introduction -{:.no-display} - -Courses based on this module should: - -[To be developed] - -## Learning Outcomes for Module - -Students should be able to: - -* explain strategies that people with disabilities use to navigate and operate web pages -* create designs that allow for multiple navigational mechanisms, such as menus, search boxes, breadcrumb trails, and sitemaps -* create designs that allow users to bypass blocks of repeated content -* create designs that allow for mechanisms to stop, adjust, and extend time limits -* create designs that allow for mechanisms to pause, stop, or hide any moving, blinking, scrolling, or auto-updating content, such as animations or carousels -* create designs that allow for mechanisms to stop or control the volume of audio that plays automatically -* ensure interactions do not rely solely on multipoint or path-based gestures, such as swipe or pinch -* ensure that mechanisms to undo or abort an action carried out with pointer operations are always available -* identify related requirements for developers to ensure that navigational mechanisms are operable using the keyboard and other input devices - -{% include excol.html type="all" %} - -## Competencies - -Skills required for this module: - -[To be developed] - -## Topics to Teach - -Topics to achieve the learning outcomes: - -[To be developed - -## Ideas to Assess Knowledge for Module - -Optional ideas to support assessment: - -[To be developed] - -## Teaching Resources - -Suggested resources to support your teaching: - -[To be developed] - diff --git a/content/designer/user-research-and-requirements.md b/content/designer/user-research-and-requirements.md index 8e8b7cd43..4f4144b86 100644 --- a/content/designer/user-research-and-requirements.md +++ b/content/designer/user-research-and-requirements.md @@ -59,10 +59,10 @@ Topics to achieve the learning outcomes: Students should be able to: -* describe the use of different assistive technologies and adaptive strategies by people with disabilities to interact with web pages and applications -* ensure different groups of users with disabilities are included when working with user groups -* ensure standards and policies that relate to people with disabilities are considered in research, such as accessibility standards or laws promoting inclusion of people with disabilities -* ensure different types of user requirements that relate to people with disabilities are considered, such as adequate contrast ratios, keyboard compatibility, and use of technology that is compatible with assistive technologies and adaptive strategies +* describe the use of different assistive technologies and adaptive strategies by various groups of people with disabilities to interact with web pages and applications +* ensure different groups of users with disabilities are included when defining user groups +* ensure applicable accessibility guidelines, standards, and policies are included in the overall requirements +* ensure different types of user requirements that relate to people with disabilities are researched and considered, such as adequate contrast ratios, keyboard compatibility, and use of technology that is compatible with assistive technologies and adaptive strategies ### Topic: Analysis @@ -87,7 +87,7 @@ Students should be able to: * determine the characteristics of participants in usability testing based on different factors, such as overall project requirements, level of experience, use of assistive technology, and type of disability * ensure recruitment of participants consider the variety of disabilities, assistive technologies, adaptive strategies, and levels of experience in conjunction with overall usability requirements * ensure adequate location is chosen to conduct the tests depending on the test goals, assistive technology needs, custom setups, transportation means, accessibility of the facilities, and others -* ensure adequate time for participants to carry on tasks is allocated, such as different time sets for different levels of experience and familiarity with the web or application +* ensure adequate timings for participants to carry on tasks is allocated, for example different time sets for different levels of experience with the assistive technology and different levels of familiarity with the web or application ## Ideas to Assess Knowledge for Module From 6d5676b711a5a0b2c86bdf70e1d097600a54d517 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 3 Mar 2021 15:40:52 +0100 Subject: [PATCH 011/416] Updates to designer modules --- .../user-research-and-requirements.md | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/content/designer/user-research-and-requirements.md b/content/designer/user-research-and-requirements.md index 4f4144b86..1d8aaaa37 100644 --- a/content/designer/user-research-and-requirements.md +++ b/content/designer/user-research-and-requirements.md @@ -53,39 +53,37 @@ Skills required for this module: Topics to achieve the learning outcomes: -### Topic: Observation and Understanding +### Topic: Researching #### Learning Outcomes for Topic Students should be able to: -* describe the use of different assistive technologies and adaptive strategies by various groups of people with disabilities to interact with web pages and applications +* explain the use of different assistive technologies and adaptive strategies by various groups of people with disabilities to interact with web pages and applications * ensure different groups of users with disabilities are included when defining user groups * ensure applicable accessibility guidelines, standards, and policies are included in the overall requirements -* ensure different types of user requirements that relate to people with disabilities are researched and considered, such as adequate contrast ratios, keyboard compatibility, and use of technology that is compatible with assistive technologies and adaptive strategies -### Topic: Analysis +### Topic: Incorporating #### Learning Outcomes for Topic Students should be able to: +* ensure different types of user requirements that relate to people with disabilities are researched and considered, for example adequate contrast ratios, availability of content and functionality in different screen sizes and configurations, keyboard compatibility, and use with assistive technologies and adaptive strategies * create personas that include people with different types of disabilities and different levels of experience using the Web * create use cases and scenarios that include use of the Web or application with different types of assistive technologies and adaptive strategies -* ensure appropriate relationships are developed when working with people with disabilities -* ensure treatment of people with disabilities is respectful, same as when working with everybody else -* ensure appropriate compensation is provided to people with disabilities -* ensure people with disabilities understand the purpose of your interviews, surveys, and questionnaires and are comfortable during the research activities -* ensure people with disabilities can opt out at any time if they desire -### Topic: Test +### Topic: Interacting #### Learning Outcomes for Topic Students should be able to: * determine the characteristics of participants in usability testing based on different factors, such as overall project requirements, level of experience, use of assistive technology, and type of disability -* ensure recruitment of participants consider the variety of disabilities, assistive technologies, adaptive strategies, and levels of experience in conjunction with overall usability requirements +* ensure treatment of people with disabilities is respectful and avoids clichés and myths +* ensure appropriate compensation is provided to people with disabilities +* ensure people with disabilities understand the purpose of your interviews, surveys, and questionnaires and are comfortable during the research activities +* ensure people with disabilities can opt out at any time if they desire * ensure adequate location is chosen to conduct the tests depending on the test goals, assistive technology needs, custom setups, transportation means, accessibility of the facilities, and others * ensure adequate timings for participants to carry on tasks is allocated, for example different time sets for different levels of experience with the assistive technology and different levels of familiarity with the web or application From 45f489678e9d4f6aa2d22b74077295a7a0dff648 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 4 Mar 2021 12:29:02 +0100 Subject: [PATCH 012/416] Updates to designer modules --- content/designer/colors-and-styles.md | 7 ++++--- content/designer/designer-modules.md | 3 ++- content/designer/layout-and-spacing.md | 14 +++++++------- content/designer/navigation-and-interaction.md | 12 +++++++----- .../designer/user-research-and-requirements.md | 15 ++++++++------- 5 files changed, 28 insertions(+), 23 deletions(-) diff --git a/content/designer/colors-and-styles.md b/content/designer/colors-and-styles.md index eb3186af8..696767a93 100644 --- a/content/designer/colors-and-styles.md +++ b/content/designer/colors-and-styles.md @@ -29,13 +29,14 @@ navigation: Courses based on this module should: -* demonstrate how people with disabilities rely on colors and styles to interact with websites and applications +* demonstrate how people with disabilities use colors and styles to identify and distinguish websites and applications +* @@@ ## Learning Outcomes for Module Students should be able to: -* explain how people with disabilities rely on colors and styles to identify and distinguish different user interface components +* explain how people with disabilities use colors and styles to identify and distinguish different user interface components * create designs that allow for adequate contrast ratios between foreground user interface components (such as text, images of text, and controls) and their corresponding background * create designs that allow for clear and distinguishable focus indicators, for example using borders, background color, and highlighting * create designs that allow to avoid seizures and other physical reactions @@ -72,7 +73,7 @@ Students should be able to: * ensure flashing content is below the general flash and red flash thresholds * create designs that allow content that does not flash more than three times in a second -* create designs that allow to disable motion animation triggered by interaction +* create designs that allow to disable motion animation triggered by interaction, such as additional animations when scrolling ### Topic: Content Identification diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 97c4020eb..b27d4ac25 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -33,5 +33,6 @@ These modules focus on user experience, visual, and interaction aspects to desig * user experience designer * visual designer +* content designer * interaction designer -@@@ +* information designer \ No newline at end of file diff --git a/content/designer/layout-and-spacing.md b/content/designer/layout-and-spacing.md index 3726ce453..fee12980e 100644 --- a/content/designer/layout-and-spacing.md +++ b/content/designer/layout-and-spacing.md @@ -35,12 +35,12 @@ Courses based on this module should: Students should be able to: -* explain how people with disabilities rely on layout and spacing to orient themselves in web pages and applications +* explain how people with disabilities use layout and spacing to orient themselves in web pages and applications * ensure page regions are placed where expected depending on their type and function, for example, page headers at the top and page footers at the bottom * ensure headings are nested according to the hierarchical structure of the page and describe the topic of the section they entitle * ensure white space and proximity help users determine the relations between different page regions and contents * create designs that allow for target sizes that can be tapped by users with mobility impairments and using different input methods -* ensure meaningful sequence and content are preserved when using different viewport sizes or different devices to access content +* ensure meaningful sequence, content, and functionality are preserved when using different viewport sizes, screen configurations, and devices to access content * create designs that allow to preserve content and functionality when line height as well as spacing between paragraphs, words, and letters are modified by the user * create designs that allow text resizing without loss of content and functionality * create designs that do not restrict the content view and operation to a single display orientation, such as portrait or landscape @@ -73,7 +73,7 @@ Students should be able to: Students should be able to: * ensure target sizes that are at least 44 by 44 CSS pixels -* ensure content can be presented without loss of information and functionality, and that accessing such content does not require scrolling: +* ensure content can be presented without loss of information and functionality, and that accessing such content does not require two dimensional scrolling: * vertically at a width equivalent to 320 CSS pixels * horizontally at a height equivalent to 256 CSS pixels * create designs that allow text resizing up to 200% without loss of content and functionality @@ -85,10 +85,10 @@ Students should be able to: Students should be able to: -* create designs that prevent loss of content and functionality for the following properties: - * line spacing to at least 1.5 times the font size - * Spacing following paragraphs to at least 2 times the font size - * Letter spacing (tracking) to at least 0.12 times the font size +* create designs that allow users to modify the following properties without loss of content and functionality: + * line spacing -- to at least 1.5 times the font size + * spacing following paragraphs -- to at least 2 times the font size + * Letter spacing (tracking) -- to at least 0.12 times the font size ## Ideas to Assess Knowledge for Module diff --git a/content/designer/navigation-and-interaction.md b/content/designer/navigation-and-interaction.md index 9bd8b7389..f3d9a8ff3 100644 --- a/content/designer/navigation-and-interaction.md +++ b/content/designer/navigation-and-interaction.md @@ -47,6 +47,7 @@ Students should be able to: Skills required for this module: [To be developed] + {% comment %} Skills required for this module: @@ -79,6 +80,7 @@ Skills required for this module: ## Topics to Teach Topics to achieve the learning outcomes: + ### Topic: Navigational Mechanisms #### Learning Outcomes for Topic @@ -89,7 +91,7 @@ Students should be able to: * a link at the top of each page that goes directly to the main content area * a link at the beginning of a block of repeated content to go to the end of the block * links at the top of the page that go to each area of the content - * an expandable and collapsible menu to bypass block of content + * an expandable and collapsible menu to make it easier for users to skip that menu * create designs that support site maps to provide an overview of the entire site * create designs that support breadcrumb trails to provide information about the user's location in a set of web pages * create designs that support table of contents to give an overview of the whole site or document and to allow users to go to specific parts of the content @@ -101,7 +103,7 @@ Students should be able to: Students should be able to: * create designs that allow users to turn off existing time limits -* create designs that allow users to adjust existing time limits at least ten times the original setting +* create designs that allow users to adjust existing time limits up to at least ten times the original setting * create designs that support extending existing time limits by warning the user at least twenty seconds before the time limit expires * ensure content that auto scrolls can be paused and resumed from where it was left to allow users to better read and process content @@ -109,9 +111,9 @@ Students should be able to: Students should be able to: -* create designs that support alternatives to multi-pointer gestures using single pointer activation -* ensure down event on single pointer gestures either: - * do not perform any action +* create designs that support alternatives to multi-pointer gestures (such as swipe or pinch) using single pointer activation +* ensure down event on single pointer gestures: + * do not perform any action, or * have available mechanisms to abort or undo any action carried on * create designs that support alternatives to devise or user motion such as shaking, by using user interface components that do not require motion * ensure response to motion can be disabled by the user to prevent accidental actuation, such as undoing an action by shaking a device diff --git a/content/designer/user-research-and-requirements.md b/content/designer/user-research-and-requirements.md index 1d8aaaa37..689b46e4e 100644 --- a/content/designer/user-research-and-requirements.md +++ b/content/designer/user-research-and-requirements.md @@ -37,7 +37,7 @@ Students should be able to: * describe how involving users with disabilities early and throughout in the design and development process can lead to overall improved usability for everybody, including people without disabilities * identify different groups of people with disabilities and explain strategies they use to interact with the Web -* ensure legal requirements related to accessibility are researched and included in the design phase +* ensure accessibility standards and legal requirements are researched and included in the design phase * ensure that collected user input in user research includes different groups of users with disabilities and various levels of experience using the Web * ensure people with disabilities are included in design methodologies and techniques, for example in use cases, user analysis, personas, scenarios, and usability testing * ensure informed consent and other ethical considerations in research practice are observed when working with people, including people with disabilities @@ -53,7 +53,7 @@ Skills required for this module: Topics to achieve the learning outcomes: -### Topic: Researching +### Topic: Research #### Learning Outcomes for Topic @@ -61,19 +61,20 @@ Students should be able to: * explain the use of different assistive technologies and adaptive strategies by various groups of people with disabilities to interact with web pages and applications * ensure different groups of users with disabilities are included when defining user groups -* ensure applicable accessibility guidelines, standards, and policies are included in the overall requirements +* ensure different types of accessibility barriers and features are included in the research phase +* ensure applicable accessibility guidelines, standards, and policies are included in the research phase -### Topic: Incorporating +### Topic: Requirements #### Learning Outcomes for Topic Students should be able to: -* ensure different types of user requirements that relate to people with disabilities are researched and considered, for example adequate contrast ratios, availability of content and functionality in different screen sizes and configurations, keyboard compatibility, and use with assistive technologies and adaptive strategies +* ensure different types of user requirements that relate to people with disabilities are considered, for example adequate contrast ratios, availability of content and functionality in different screen sizes and configurations, keyboard compatibility, and use with assistive technologies and adaptive strategies * create personas that include people with different types of disabilities and different levels of experience using the Web -* create use cases and scenarios that include use of the Web or application with different types of assistive technologies and adaptive strategies +* create scenarios that include use of the Web or application with different types of assistive technologies and adaptive strategies -### Topic: Interacting +### Topic: Working with People with Disabilities #### Learning Outcomes for Topic From ec7c08b1f9451b2ac165c5fcc6512d60b0402568 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 4 Mar 2021 12:30:51 +0100 Subject: [PATCH 013/416] Fixing nav title --- _data/navigation.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_data/navigation.yml b/_data/navigation.yml index 5c08e84a8..e401654d8 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -265,7 +265,7 @@ url: /curricula/designer-modules/colors-and-styles/ - name: Layout and Spacing url: /curricula/designer-modules/layout-and-spacing/ - - name: Navigation and Interaaction + - name: Navigation and Interaction url: /curricula/designer-modules/navigation-and-interaction/ - name: Informational Design url: /curricula/designer-modules/informational-design/ From 6462df5670d22655d3861c1045dd1fefc4350f5f Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 4 Mar 2021 13:14:02 +0100 Subject: [PATCH 014/416] Updates to designer modules --- _data/navigation.yml | 4 ++-- ...s-and-styles.md => colors-styles-and-animations.md} | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) rename content/designer/{colors-and-styles.md => colors-styles-and-animations.md} (93%) diff --git a/_data/navigation.yml b/_data/navigation.yml index e401654d8..dc02b3ddb 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -261,8 +261,8 @@ pages: - name: User Research and Requirements url: /curricula/designer-modules/user-research-and-requirements/ - - name: Colors and Styles - url: /curricula/designer-modules/colors-and-styles/ + - name: Colors, Styles, and Animations + url: /curricula/designer-modules/colors-styles-and-animations/ - name: Layout and Spacing url: /curricula/designer-modules/layout-and-spacing/ - name: Navigation and Interaction diff --git a/content/designer/colors-and-styles.md b/content/designer/colors-styles-and-animations.md similarity index 93% rename from content/designer/colors-and-styles.md rename to content/designer/colors-styles-and-animations.md index 696767a93..fe148e44f 100644 --- a/content/designer/colors-and-styles.md +++ b/content/designer/colors-styles-and-animations.md @@ -1,12 +1,12 @@ --- -title: "[Draft] Module 2: Colors and Styles" -nav_title: "Colors and Styles" -permalink: /curricula/designer-modules/colors-and-styles/ -ref: /curricula/designer-modules/colors-and-styles/ +title: "[Draft] Module 2: Colors, Styles, and Animations" +nav_title: "Colors, Styles, and Animations" +permalink: /curricula/designer-modules/colors-styles-and-animations/ +ref: /curricula/designer-modules/colors-styles-and-animations/ lang: en github: repository: w3c/wai-curricula - path: content/designer/colors-and-styles.md + path: content/designer/colors-styles-and-animations.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ From 1e70332a5653b076196d8df6a3a544762e3aea14 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 4 Mar 2021 13:20:04 +0100 Subject: [PATCH 015/416] Updates to designer modules --- content/designer/layout-and-spacing.md | 2 +- content/designer/user-research-and-requirements.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/layout-and-spacing.md b/content/designer/layout-and-spacing.md index fee12980e..a4ddf2282 100644 --- a/content/designer/layout-and-spacing.md +++ b/content/designer/layout-and-spacing.md @@ -20,7 +20,7 @@ parent_in_h1: - ref: /curricula/ name: "Curricula on Web Accessibility" navigation: - previous: /curricula/designer-modules/ + previous: /curricula/designer-modules/colors-styles-and-animations/ next: /curricula/designer-modules/navigation-and-interaction/ --- diff --git a/content/designer/user-research-and-requirements.md b/content/designer/user-research-and-requirements.md index 689b46e4e..d31d517b1 100644 --- a/content/designer/user-research-and-requirements.md +++ b/content/designer/user-research-and-requirements.md @@ -21,7 +21,7 @@ parent_in_h1: name: "Curricula on Web Accessibility" navigation: previous: /curricula/designer-modules/ - next: /curricula/designer-modules/colors-and-styles/ + next: /curricula/designer-modules/colors-styles-and-animations/ --- ## Introduction From 3dbf69299309c9a3b86ef1e60aee242b70f9c9a8 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 5 Mar 2021 11:43:41 +0100 Subject: [PATCH 016/416] Updating module title --- content/designer/layout-and-spacing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/layout-and-spacing.md b/content/designer/layout-and-spacing.md index a4ddf2282..68a31cc53 100644 --- a/content/designer/layout-and-spacing.md +++ b/content/designer/layout-and-spacing.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 1: Layout and Spacing" +title: "[Draft] Module 3: Layout and Spacing" nav_title: "Layout and Spacing" permalink: /curricula/designer-modules/layout-and-spacing/ ref: /curricula/designer-modules/layout-and-spacing/ From da04d4ec42a51740a7e2db8becff6cade4c76932 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 5 Mar 2021 11:54:11 +0100 Subject: [PATCH 017/416] Marking modules that are not developed yet in nav --- _data/navigation.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_data/navigation.yml b/_data/navigation.yml index dc02b3ddb..e033f28a7 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -267,11 +267,11 @@ url: /curricula/designer-modules/layout-and-spacing/ - name: Navigation and Interaction url: /curricula/designer-modules/navigation-and-interaction/ - - name: Informational Design + - name: Informational Design [TBD] url: /curricula/designer-modules/informational-design/ - - name: Instructions and Feedback + - name: Instructions and Feedback [TBD] url: /curricula/designer-modules/instructions-and-feedback/ - - name: Labels and Widgets + - name: Labels and Widgets [TBD] url: /curricula/designer-modules/labels-and-widgets/ - name: Changelog url: "/curricula/changelog/" From 3f5e4bfbe62f61496774e638a305448b9bb96dc4 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 8 Mar 2021 10:11:00 +0100 Subject: [PATCH 018/416] Updates to module 1 --- content/designer/designer-modules.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index b27d4ac25..32c18fad0 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -29,7 +29,7 @@ The designer modules guide the creation of courses that: * @@@ ... -These modules focus on user experience, visual, and interaction aspects to design accessible web content and applications. They primarily address the following roles: +These modules focus on user experience, visual, and interaction aspects to design accessible web pages and applications. They primarily address the following roles: * user experience designer * visual designer From ca94f84cdea7e6f6441c3baa82c661da0fe76306 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 8 Mar 2021 10:16:00 +0100 Subject: [PATCH 019/416] updates to ideas on overview page --- content/designer/designer-modules.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 32c18fad0..9f56eec54 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -29,10 +29,10 @@ The designer modules guide the creation of courses that: * @@@ ... -These modules focus on user experience, visual, and interaction aspects to design accessible web pages and applications. They primarily address the following roles: +These modules focus on user experience, visual, and interaction aspects to design accessible web pages and applications. The modules primarily address the following roles: * user experience designer * visual designer * content designer * interaction designer -* information designer \ No newline at end of file +* information designer From 41a1c45767e808badf8c2ed0c8d726bc21299236 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 8 Mar 2021 11:13:18 +0100 Subject: [PATCH 020/416] Fixing wrong caps --- content/designer/colors-styles-and-animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/colors-styles-and-animations.md b/content/designer/colors-styles-and-animations.md index fe148e44f..19450900d 100644 --- a/content/designer/colors-styles-and-animations.md +++ b/content/designer/colors-styles-and-animations.md @@ -81,7 +81,7 @@ Students should be able to: Students should be able to: -* Ensure distinguishable styles are applied to different page regions, such as header, navigation, main, or footer +* ensure distinguishable styles are applied to different page regions, such as header, navigation, main, or footer * ensure distinguishable styles are used to identify different components, such as text, links, buttons, or form elements * create designs that allow for text cues to convey any information that is conveyed using color alone, such as required form fields in a form * ensure that information conveyed through differences in text color is also conveyed using other visual cues, such as underline, bold, and italics From ea24ede407c5c196ce989db580f76597783b4f52 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 8 Mar 2021 13:37:50 +0100 Subject: [PATCH 021/416] Clarifying LO --- content/designer/colors-styles-and-animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/colors-styles-and-animations.md b/content/designer/colors-styles-and-animations.md index 19450900d..5c9e35f39 100644 --- a/content/designer/colors-styles-and-animations.md +++ b/content/designer/colors-styles-and-animations.md @@ -83,7 +83,7 @@ Students should be able to: * ensure distinguishable styles are applied to different page regions, such as header, navigation, main, or footer * ensure distinguishable styles are used to identify different components, such as text, links, buttons, or form elements -* create designs that allow for text cues to convey any information that is conveyed using color alone, such as required form fields in a form +* create designs that allow for text cues to convey any information that is provided using color alone, such as an asterisk to convey required form fields in a form * ensure that information conveyed through differences in text color is also conveyed using other visual cues, such as underline, bold, and italics * ensure that information provided using differences in color is also provided using different patterns, shapes, and icons From 2d3738dd51a52f89b2ea36a39272d87cf478179f Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 12 Mar 2021 11:04:28 +0100 Subject: [PATCH 022/416] Updates to designer modules --- _data/navigation.yml | 4 +- content/designer/informational-design.md | 67 +++++++++++++++++-- content/designer/layout-and-spacing.md | 2 +- .../designer/navigation-and-interaction.md | 12 ++-- 4 files changed, 71 insertions(+), 14 deletions(-) diff --git a/_data/navigation.yml b/_data/navigation.yml index e033f28a7..57a604552 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -265,8 +265,8 @@ url: /curricula/designer-modules/colors-styles-and-animations/ - name: Layout and Spacing url: /curricula/designer-modules/layout-and-spacing/ - - name: Navigation and Interaction - url: /curricula/designer-modules/navigation-and-interaction/ + - name: navigation-and-inputNavigation and Input + url: /curricula/designer-modules/navigation-and-input/ - name: Informational Design [TBD] url: /curricula/designer-modules/informational-design/ - name: Instructions and Feedback [TBD] diff --git a/content/designer/informational-design.md b/content/designer/informational-design.md index 6cf767bed..a5778e680 100644 --- a/content/designer/informational-design.md +++ b/content/designer/informational-design.md @@ -15,8 +15,8 @@ footer: >

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: - previous: /curricula/designer-modules/forms/ - next: /curricula/designer-modules/rich-applications/ + previous: /curricula/designer-modules/navigation-and-input/ + next: /curricula/designer-modules/instructions-and-feedback/ --- ## Introduction @@ -32,7 +32,7 @@ Students should be able to: * explain how people with disabilities rely on different means, structures, and techniques for presenting information, such as textual, graphical, tabular, audio, or video information * identify and describe different uses of text, such as for labels, static content, or dynamic messages -* describe different ways to complement information presented in text, such as using graphics, color, or shape +* describe alternative ways to convey information presented in text, such as using graphics, color, or shape * identify and describe different types of images from an accessibility perspective, such as informative, textual, decorative, functional, and complex images * identify and describe different types of tables from an accessibility perspective, such as layout, simple, and complex tables * identify the different types of multimedia content (for example audio or video content), and relate each of them to the user needs of people with disabilities @@ -55,7 +55,65 @@ Skills required for this module: Topics to achieve the learning outcomes: -[To be developed +### Topic: Textual Information + +#### Learning Outcomes for Topic + +Students should be able to: + +* create designs that support additional ways to convey information presented in text, such as required form fields, using icons, shapes, and colors +* create designs that support mechanisms to identify specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon +* create designs that support mechanisms to identify the expanded form or meaning of acronyms and abbreviations +* create designs that support alternatives to text that require reading ability more advanced than the lower secondary education level +* describe related requirements for developers to make language of page and language of parts programmatically determined +* describe related requirements for content authors to provide texts that do not require reading ability more advanced than the lower secondary education level + +### Topic: Graphical Information + +#### Learning Outcomes for Topic + +Students should be able to: + +* define the following types of images from an accessibility perspective: + * informative, + * textual, + * decorative, + * functional, + * complex images +* create designs that support use of text when the information presented is intended to be read as text, instead of using images of text +* provide names for controls and components that accept user input +* provide descriptive textual information for the following types of graphical information: + * those that are part of tests or exercises that would be invalid if presented in text + * those that are primarily intended to create a specific sensory experience +* provide text alternatives that identify and describe the purpose of graphical elements that are used to confirm that content is accessed by a person rather than a computer, such as captcha +* ensure several modalities of captcha that rely on different sensory characteristics are provided + +### Topic: Tabular Information + +#### Learning Outcomes for Topic + +* define the following types of tables from an accessibility perspective + * simple tables + * complex tables + * layout tables +* create designs that allow presentation of tables in multiple ways, such as using several lists, or splitting a single table into several simpler ones +* create designs that allow to establish a relationship between the table cells both visually and programmatically, included for headers and data cells +* describe related requirements for developers to ensure that table header and data cells are programmatically associated + +### Topic: MultiMedia Content + +#### Learning Outcomes for Topic + +Students should be able to + +* identify the different types of multimedia content, such as audio and video, and relate them to their corresponding sensory characteristic +* identify the different types of time-based multimedia content, such as pre-recorded and live audio and video +* identify and describe different types of synchronized media, for example a dialog in a movie +* create designs that allow to provide text alternatives for prerecorded audio-only content that presents equivalent information +* create designs that allow to provide either a text alternative or an audio track for a prerecorded video-only content that presents equivalent information +* create designs that allow to provide captions for any prerecorded and live audio content in synchronized media +* create designs that allow to provide audio descriptions for any prerecorded and live video content in synchronized media +* create designs that allow to provide sign language interpretation for all prerecorded audio content in synchronized media ## Ideas to Assess Knowledge for Module @@ -68,4 +126,3 @@ Optional ideas to support assessment: Suggested resources to support your teaching: [To be developed] - diff --git a/content/designer/layout-and-spacing.md b/content/designer/layout-and-spacing.md index 68a31cc53..e91eff3f7 100644 --- a/content/designer/layout-and-spacing.md +++ b/content/designer/layout-and-spacing.md @@ -21,7 +21,7 @@ parent_in_h1: name: "Curricula on Web Accessibility" navigation: previous: /curricula/designer-modules/colors-styles-and-animations/ - next: /curricula/designer-modules/navigation-and-interaction/ + next: /curricula/designer-modules/navigation-and-input/ --- ## Introduction diff --git a/content/designer/navigation-and-interaction.md b/content/designer/navigation-and-interaction.md index f3d9a8ff3..0fa4b96b6 100644 --- a/content/designer/navigation-and-interaction.md +++ b/content/designer/navigation-and-interaction.md @@ -1,12 +1,12 @@ --- -title: "[Draft] Module 4: Navigation and Interaction" -nav_title: "Navigation and Interaction" -permalink: /curricula/designer-modules/navigation-and-interaction/ -ref: /curricula/designer-modules/navigation-and-interaction/ +title: "[Draft] Module 4: Navigation and Input" +nav_title: "Navigation and Input" +permalink: /curricula/designer-modules/navigation-and-input/ +ref: /curricula/designer-modules/navigation-and-input/ lang: en github: repository: w3c/wai-curricula - path: content/designer/navigation-and-interaction.md + path: content/designer/navigation-and-input.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ @@ -91,7 +91,7 @@ Students should be able to: * a link at the top of each page that goes directly to the main content area * a link at the beginning of a block of repeated content to go to the end of the block * links at the top of the page that go to each area of the content - * an expandable and collapsible menu to make it easier for users to skip that menu + * an expandable and collapsible menu to make it easier for users to skip the menu * create designs that support site maps to provide an overview of the entire site * create designs that support breadcrumb trails to provide information about the user's location in a set of web pages * create designs that support table of contents to give an overview of the whole site or document and to allow users to go to specific parts of the content From 5ee3cf3c5fa55fa8d859d85e942c87f40633a772 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 12 Mar 2021 11:09:02 +0100 Subject: [PATCH 023/416] ?Fixing nav --- _data/navigation.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_data/navigation.yml b/_data/navigation.yml index 57a604552..d3d6b7b33 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -265,9 +265,9 @@ url: /curricula/designer-modules/colors-styles-and-animations/ - name: Layout and Spacing url: /curricula/designer-modules/layout-and-spacing/ - - name: navigation-and-inputNavigation and Input + - name: Navigation and Input url: /curricula/designer-modules/navigation-and-input/ - - name: Informational Design [TBD] + - name: Informational Design url: /curricula/designer-modules/informational-design/ - name: Instructions and Feedback [TBD] url: /curricula/designer-modules/instructions-and-feedback/ From 7497bb69d8869e8f36d3a051afd12da8c6767cf8 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 15 Mar 2021 10:09:02 +0100 Subject: [PATCH 024/416] Updates to designer modules --- content/designer/informational-design.md | 2 +- content/designer/instructions-and-feedback.md | 51 +++++++++++++++---- content/designer/labels-and-widgets.md | 17 +++++-- 3 files changed, 56 insertions(+), 14 deletions(-) diff --git a/content/designer/informational-design.md b/content/designer/informational-design.md index a5778e680..20077a015 100644 --- a/content/designer/informational-design.md +++ b/content/designer/informational-design.md @@ -86,7 +86,7 @@ Students should be able to: * those that are part of tests or exercises that would be invalid if presented in text * those that are primarily intended to create a specific sensory experience * provide text alternatives that identify and describe the purpose of graphical elements that are used to confirm that content is accessed by a person rather than a computer, such as captcha -* ensure several modalities of captcha that rely on different sensory characteristics are provided +* provide several modalities of captcha that rely on different sensory characteristics ### Topic: Tabular Information diff --git a/content/designer/instructions-and-feedback.md b/content/designer/instructions-and-feedback.md index 01ac7a7b0..bdecd8486 100644 --- a/content/designer/instructions-and-feedback.md +++ b/content/designer/instructions-and-feedback.md @@ -15,8 +15,8 @@ footer: >

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: - previous: /curricula/designer-modules/forms/ - next: /curricula/designer-modules/rich-applications/ + previous: /curricula/designer-modules/informational-design/ + next: /curricula/designer-modules/labels-and-widgets/ --- ## Introduction @@ -31,20 +31,18 @@ Courses based on this module should: Students should be able to: * explain how people with disabilities rely on instructions and feedback to understand and interact with components such as forms and widgets -* provide clear and distinguishable labels that allow to identify different components * provide overall instructions to help users understand and interact with forms and widgets, such as: * allowed data formats * required and optional input * explanations of what will happen when a change in a control results in a change of context * ways to stop and resume sessions -* provide overall instructions about existing time limits in a form and provide specific feedback when such time limits are about to expire -* provide clear instructions about the current step and about the total number of steps involved in a multi-step form -* provide meaningful and descriptive notification messages about errors, successes, or any other event resulting from user input +* provide clear instructions about the current and total number of step and about existing time limits in a form +* provide meaningful and descriptive notification messages about imminent time limits, errors, successes, or any other event resulting from user input * ensure that notification messages are easy to understand and can be distinguished from any other component -* provide clear warnings about imminent time limits,, and ensure mechanisms are available to stop and extend time limits * provide suggestions for error correction when they are known +* provide clear warnings about imminent time limits,, and ensure mechanisms are available to stop and extend time limits * create designs that allow for mechanisms to reverse, check, and confirm submissions in legal or financial transactions -* identify related requirements for developers to ensure that labels, instructions, and feedback can be programmatically associated with their corresponding control or component +* identify related requirements for developers to ensure that instructions and feedback can be programmatically associated with their corresponding control or component {% include excol.html type="all" %} @@ -58,7 +56,41 @@ Skills required for this module: Topics to achieve the learning outcomes: -[To be developed +### Topic: Overall Instructions + +#### Learning Outcomes for Topic + +Students should be able to: + +* provide overall instructions to help users understand the purpose and intent of interactive user interface components, such as form fields +* provide overall instructions about how data should be entered, such as date formats and particular patterns that specific form fields may require +* provide instructions about which input fields are required by: + * including information about each of the required form fields before the form control + * including text, icons, and color in the label of each of the required form fields that indicates that they are required +* provide clear instructions of changes in context that happen when there is a change on a control before the control, for example when launching a new window when the user checks a check box or selects a list item +* provide overall instructions about existing time limits in a form and about how they can be turned of,, adjusted, or extended +* provide clear instructions about the current step and about the total number of steps involved in a multi-step form + +### Topic: Feedback and Notifications + +#### Learning Outcomes for Topic + +Students should be able to: + +* ensure notification messages are easy to understand, and can be distinguished from any other user component +* provide textual information about errors, successes, or any other information resulting from user input +* create designs that allow to associate notification messages, errors, and warnings to the component that generated such messages +* describe related requirements for developers to ensure that notification messages are associated to their corresponding user interface component and can be rendered by assistive technologies + + +### Topic: Help and Error Prevention + +#### Learning Outcomes for Topic + +Students should be able to: + + + ## Ideas to Assess Knowledge for Module @@ -71,4 +103,3 @@ Optional ideas to support assessment: Suggested resources to support your teaching: [To be developed] - diff --git a/content/designer/labels-and-widgets.md b/content/designer/labels-and-widgets.md index 8abed0910..2a25325c1 100644 --- a/content/designer/labels-and-widgets.md +++ b/content/designer/labels-and-widgets.md @@ -15,8 +15,7 @@ footer: >

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: - previous: /curricula/designer-modules/forms/ - next: /curricula/designer-modules/rich-applications/ + previous: /curricula/designer-modules/instructions-and-feedback/ --- ## Introduction @@ -31,6 +30,7 @@ Courses based on this module should: Students should be able to: * explain strategies that people with disabilities use to identify, operate, and interact with widgets +* provide clear and distinguishable names that allow to identify different types of user interface components * ensure that custom widgets have appropriate labels that describe their purpose * ensure that meaningful sequence and clear focus indicators for custom widgets are provided through the widget's lifetime * create designs for custom widgets that support interaction using multiple input devices, such as keyboard, @@ -52,7 +52,18 @@ Skills required for this module: Topics to achieve the learning outcomes: -[To be developed +### Topic: Names and Labels + +### Learning outcomes for Topic + +Students should be able to: + +* provide clear and distinguishable names that allow to identify sections of the content, such as different product categories or different parts of the content +* provide clear and distinguishable names that allow to create labels for different user interface components, such as buttons, edit fields, or dropdown lists +* create designs that allow to position labels where users expect them, for example + * labels for form fields to the left of the field or above in left-to-right languages, or to the right of the field or above it in right-to-left languages + * labels for radio buttons or checkboxes to the right of the field or below it in left-to-right languages or to the left of the field or below it in right-to-left languages +* identify related requirements for developers to ensure that labels are programmatically associated to their corresponding user interface component ## Ideas to Assess Knowledge for Module From 1d55fe2207085adb7767380fb0893be89fbfe2a0 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 19 Mar 2021 14:34:25 +0100 Subject: [PATCH 025/416] Updates to designer modules --- _data/navigation.yml | 2 +- .../designer/colors-styles-and-animations.md | 101 -------------- content/designer/labels-and-widgets.md | 13 ++ content/designer/layout-and-spacing.md | 104 -------------- .../designer/navigation-and-interaction.md | 132 ------------------ .../user-research-and-requirements.md | 19 ++- 6 files changed, 22 insertions(+), 349 deletions(-) delete mode 100644 content/designer/colors-styles-and-animations.md delete mode 100644 content/designer/layout-and-spacing.md delete mode 100644 content/designer/navigation-and-interaction.md diff --git a/_data/navigation.yml b/_data/navigation.yml index d3d6b7b33..d8524dc16 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -256,7 +256,7 @@ url: "/curricula/developer-modules/custom-widgets/" - name: Rich Applications url: "/curricula/developer-modules/rich-applications/" - - name: Designer Modules + - name: Designer Modules url: "/curricula/designer-modules/" pages: - name: User Research and Requirements diff --git a/content/designer/colors-styles-and-animations.md b/content/designer/colors-styles-and-animations.md deleted file mode 100644 index 5c9e35f39..000000000 --- a/content/designer/colors-styles-and-animations.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: "[Draft] Module 2: Colors, Styles, and Animations" -nav_title: "Colors, Styles, and Animations" -permalink: /curricula/designer-modules/colors-styles-and-animations/ -ref: /curricula/designer-modules/colors-styles-and-animations/ -lang: en -github: - repository: w3c/wai-curricula - path: content/designer/colors-styles-and-animations.md -license: creative-commons -acknowledgements: /curricula/acknowledgements/ -changelog: /curricula/changelog/ -footer: > -

Date: Updated @@ Month 2021. First published December 2019.

-

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

-

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

-parent_in_h1: - - ref: /curricula/designer-modules/ - name: nav_title - - ref: /curricula/ - name: "Curricula on Web Accessibility" -navigation: - previous: /curricula/designer-modules/user-research-and-requirements/ - next: /curricula/designer-modules/layout-and-spacing/ ---- - -## Introduction -{:.no-display} - -Courses based on this module should: - -* demonstrate how people with disabilities use colors and styles to identify and distinguish websites and applications -* @@@ - -## Learning Outcomes for Module - -Students should be able to: - -* explain how people with disabilities use colors and styles to identify and distinguish different user interface components -* create designs that allow for adequate contrast ratios between foreground user interface components (such as text, images of text, and controls) and their corresponding background -* create designs that allow for clear and distinguishable focus indicators, for example using borders, background color, and highlighting -* create designs that allow to avoid seizures and other physical reactions -* ensure that different page regions and user interface components are conveyed using distinguishable styles -* ensure additional mechanisms are available apart from color alone to convey information, such as text cues, patterns, and icons - -## Competencies - -Skills required for this module: - -[To be developed] - -## Topics to Teach - -Topics to achieve the learning outcomes: - -### Topic: Contrast Ratios - -#### Learning Outcomes for Topic - -Students should be able to: - -* explain how contrast ratios allow people with disabilities to read, understand, and distinguish foreground content from background -* create designs that allow text and images of text to have a contrast ratio of at least 4.5:1 with respect to their background -* create designs that allow for large-scale text and images of text to have a contrast ratio of at least 3:1 with respect to their background -* create designs that allow user interface components and graphical elements to have a contrast ratio of at least 3:1 with respect to their background -* ensure focus indicators have a contrast ratio that allows them to be perceived by users - -### Topic: Seizures and Physical Reactions - -#### Learning Outcomes for Topic - -Students should be able to: - -* ensure flashing content is below the general flash and red flash thresholds -* create designs that allow content that does not flash more than three times in a second -* create designs that allow to disable motion animation triggered by interaction, such as additional animations when scrolling - -### Topic: Content Identification - -#### Learning Outcomes for Topic - -Students should be able to: - -* ensure distinguishable styles are applied to different page regions, such as header, navigation, main, or footer -* ensure distinguishable styles are used to identify different components, such as text, links, buttons, or form elements -* create designs that allow for text cues to convey any information that is provided using color alone, such as an asterisk to convey required form fields in a form -* ensure that information conveyed through differences in text color is also conveyed using other visual cues, such as underline, bold, and italics -* ensure that information provided using differences in color is also provided using different patterns, shapes, and icons - -## Ideas to Assess Knowledge for Module - -Optional ideas to support assessment: - -[To be developed] - -## Teaching Resources - -Suggested resources to support your teaching: - -[To be developed] - diff --git a/content/designer/labels-and-widgets.md b/content/designer/labels-and-widgets.md index 2a25325c1..084b05592 100644 --- a/content/designer/labels-and-widgets.md +++ b/content/designer/labels-and-widgets.md @@ -65,6 +65,19 @@ Students should be able to: * labels for radio buttons or checkboxes to the right of the field or below it in left-to-right languages or to the left of the field or below it in right-to-left languages * identify related requirements for developers to ensure that labels are programmatically associated to their corresponding user interface component +### Topic: Keyboard Input + +* provide designs that support operation with different input devices, such as keyboard +* describe related requirements for developers to ensure every user interface component can be entered, operated, and exited using the keyboard only +* provide keyboard shortcuts that do not conflict with the operating system, browser, and assistive technology shortcuts + +### Topic: Help and Feedback + +#### Learning Outcomes for Topic + +* create designs that support mechanisms to queu and prioritize notifications from different user interface compontents and custom widgets + + ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: diff --git a/content/designer/layout-and-spacing.md b/content/designer/layout-and-spacing.md deleted file mode 100644 index e91eff3f7..000000000 --- a/content/designer/layout-and-spacing.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: "[Draft] Module 3: Layout and Spacing" -nav_title: "Layout and Spacing" -permalink: /curricula/designer-modules/layout-and-spacing/ -ref: /curricula/designer-modules/layout-and-spacing/ -lang: en -github: - repository: w3c/wai-curricula - path: content/designer/layout-and-spacing.md -license: creative-commons -acknowledgements: /curricula/acknowledgements/ -changelog: /curricula/changelog/ -footer: > -

Date: Updated @@ Month 2021. First published December 2019.

-

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

-

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

-parent_in_h1: - - ref: /curricula/designer-modules/ - name: nav_title - - ref: /curricula/ - name: "Curricula on Web Accessibility" -navigation: - previous: /curricula/designer-modules/colors-styles-and-animations/ - next: /curricula/designer-modules/navigation-and-input/ ---- - -## Introduction -{:.no-display} - -Courses based on this module should: - -[To be developed] - -## Learning Outcomes for Module - -Students should be able to: - -* explain how people with disabilities use layout and spacing to orient themselves in web pages and applications -* ensure page regions are placed where expected depending on their type and function, for example, page headers at the top and page footers at the bottom -* ensure headings are nested according to the hierarchical structure of the page and describe the topic of the section they entitle -* ensure white space and proximity help users determine the relations between different page regions and contents -* create designs that allow for target sizes that can be tapped by users with mobility impairments and using different input methods -* ensure meaningful sequence, content, and functionality are preserved when using different viewport sizes, screen configurations, and devices to access content -* create designs that allow to preserve content and functionality when line height as well as spacing between paragraphs, words, and letters are modified by the user -* create designs that allow text resizing without loss of content and functionality -* create designs that do not restrict the content view and operation to a single display orientation, such as portrait or landscape - -## Competencies - -Skills required for this module: - -[To be developed] - -## Topics to Teach - -Topics to achieve the learning outcomes: - -### Topic: Page Layout - -#### Learning Outcomes for Topic - -Students should be able to: - -* provide distinctive styles and spacing for each of the page regions, heading levels, and user interface components -* ensure positioning of page regions falls under user expectations, such as headers at the top, footers at the bottom, and navigation regions at the top left -* ensure heading levels are used to convey the hierarchical structure of the content -* ensure heading texts describe the purpose of the section they entitle - -### Topic: Responsive Design - -#### Learning Outcomes for Topic - -Students should be able to: - -* ensure target sizes that are at least 44 by 44 CSS pixels -* ensure content can be presented without loss of information and functionality, and that accessing such content does not require two dimensional scrolling: - * vertically at a width equivalent to 320 CSS pixels - * horizontally at a height equivalent to 256 CSS pixels -* create designs that allow text resizing up to 200% without loss of content and functionality -* create designs that allow users to set the orientation to portrait or landscape, or that include show or hide controls to access contents in portrait and landscape orientations - -### Topic: Text Spacing - -#### Learning Outcomes for Topic - -Students should be able to: - -* create designs that allow users to modify the following properties without loss of content and functionality: - * line spacing -- to at least 1.5 times the font size - * spacing following paragraphs -- to at least 2 times the font size - * Letter spacing (tracking) -- to at least 0.12 times the font size - -## Ideas to Assess Knowledge for Module - -Optional ideas to support assessment: - -[To be developed] - -## Teaching Resources - -Suggested resources to support your teaching: - -[To be developed] - diff --git a/content/designer/navigation-and-interaction.md b/content/designer/navigation-and-interaction.md deleted file mode 100644 index 0fa4b96b6..000000000 --- a/content/designer/navigation-and-interaction.md +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: "[Draft] Module 4: Navigation and Input" -nav_title: "Navigation and Input" -permalink: /curricula/designer-modules/navigation-and-input/ -ref: /curricula/designer-modules/navigation-and-input/ -lang: en -github: - repository: w3c/wai-curricula - path: content/designer/navigation-and-input.md -license: creative-commons -acknowledgements: /curricula/acknowledgements/ -changelog: /curricula/changelog/ -footer: > -

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

-

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

-

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

-navigation: - previous: /curricula/designer-modules/forms/ - next: /curricula/designer-modules/rich-applications/ ---- - -## Introduction -{:.no-display} - -Courses based on this module should: - -[To be developed] - -## Learning Outcomes for Module - -Students should be able to: - -* explain strategies that people with disabilities use to navigate and interact with web pages -* create designs that allow users to bypass blocks of repeated content -* create designs that allow for multiple navigational mechanisms, such as menus, search boxes, breadcrumb trails, tables of contents, and sitemaps -* create designs that allow for mechanisms to stop, adjust, and extend time limits -* create designs that allow for mechanisms to pause, stop, or hide any moving, blinking, scrolling, or auto-updating content, such as animations or carousels -* create designs that allow for mechanisms to stop or control the volume of audio that plays automatically -* ensure interactions do not rely solely on multipoint or path-based gestures, such as swipe or pinch -* ensure that mechanisms to undo or abort an action carried out with pointer operations are always available -* identify related requirements for developers to ensure that navigational mechanisms can be used with the keyboard and other input devices - -{% include excol.html type="all" %} - -## Competencies - -Skills required for this module: - -[To be developed] - -{% comment %} - -Skills required for this module: - -{% include excol.html type="start" %} - -### Students - -{% include excol.html type="middle" %} - -* [Prerequisites for Students](/curricula/developer-modules/#prerequisites-for-students) -* [Module 1: Page Structure](/curricula/developer-modules/page-structure/) from [Developer Modules](/curricula/developer-modules/) - -{% include excol.html type="end" %} - -{% include excol.html type="start" %} - -### Instructors - -{% include excol.html type="middle" %} - -* Applied expertise in teaching: - * [WCAG 2 Success Criterion 2.4.1 Bypass Blocks](https://www.w3.org/WAI/WCAG21/quickref/#bypass-blocks) - * [WCAG 2 Success Criterion 2.4.5 Multiple Ways](https://www.w3.org/WAI/WCAG21/quickref/#multiple-ways) - * [WCAG 2 Success Criterion 2.4.8 Location](https://www.w3.org/WAI/WCAG21/quickref/#location) - * [WCAG 2 Success Criterion 3.2.3 Consistent Navigation](https://www.w3.org/WAI/WCAG21/quickref/#consistent-navigation) - -{% endcomment %} - -## Topics to Teach - -Topics to achieve the learning outcomes: - -### Topic: Navigational Mechanisms - -#### Learning Outcomes for Topic - -Students should be able to: - -* create designs that support skipping blocks of repeated content providing at least one of the following techniques: - * a link at the top of each page that goes directly to the main content area - * a link at the beginning of a block of repeated content to go to the end of the block - * links at the top of the page that go to each area of the content - * an expandable and collapsible menu to make it easier for users to skip the menu -* create designs that support site maps to provide an overview of the entire site -* create designs that support breadcrumb trails to provide information about the user's location in a set of web pages -* create designs that support table of contents to give an overview of the whole site or document and to allow users to go to specific parts of the content - -### Topic: Enough Time - -#### Learning Outcomes for Topic - -Students should be able to: - -* create designs that allow users to turn off existing time limits -* create designs that allow users to adjust existing time limits up to at least ten times the original setting -* create designs that support extending existing time limits by warning the user at least twenty seconds before the time limit expires -* ensure content that auto scrolls can be paused and resumed from where it was left to allow users to better read and process content - -### Topic: Input Modalities - -Students should be able to: - -* create designs that support alternatives to multi-pointer gestures (such as swipe or pinch) using single pointer activation -* ensure down event on single pointer gestures: - * do not perform any action, or - * have available mechanisms to abort or undo any action carried on -* create designs that support alternatives to devise or user motion such as shaking, by using user interface components that do not require motion -* ensure response to motion can be disabled by the user to prevent accidental actuation, such as undoing an action by shaking a device - -## Ideas to Assess Knowledge for Module - -Optional ideas to support assessment: - -[To be developed] - -## Teaching Resources - -Suggested resources to support your teaching: - -[To be developed] - diff --git a/content/designer/user-research-and-requirements.md b/content/designer/user-research-and-requirements.md index d31d517b1..7b8df5708 100644 --- a/content/designer/user-research-and-requirements.md +++ b/content/designer/user-research-and-requirements.md @@ -35,13 +35,12 @@ Courses based on this module should: Students should be able to: -* describe how involving users with disabilities early and throughout in the design and development process can lead to overall improved usability for everybody, including people without disabilities -* identify different groups of people with disabilities and explain strategies they use to interact with the Web +* describe how involving users with disabilities early and throughout in the design and development process can lead to better accessibility of websites and applications +* explain strategies that people with disabilities use to interact with the Web * ensure accessibility standards and legal requirements are researched and included in the design phase * ensure that collected user input in user research includes different groups of users with disabilities and various levels of experience using the Web -* ensure people with disabilities are included in design methodologies and techniques, for example in use cases, user analysis, personas, scenarios, and usability testing -* ensure informed consent and other ethical considerations in research practice are observed when working with people, including people with disabilities -* ensure people with disabilities who participate in user research always understand the purpose of the research, and are aware of their right to opt out at any time if so desired +* ensure people with disabilities are included in user research activities, for example in focus groups, use cases, user analysis, personas, scenarios, and usability testing +* ensure people with disabilities can provide informed consent, respond to questions, and perform any other activity required of the research process in an accessible way ## Competencies @@ -63,6 +62,8 @@ Students should be able to: * ensure different groups of users with disabilities are included when defining user groups * ensure different types of accessibility barriers and features are included in the research phase * ensure applicable accessibility guidelines, standards, and policies are included in the research phase +* determine the characteristics of participants in user research activities based on different factors, such as overall project requirements, level of experience, use of assistive technology, and type of disability +* ensure people with disabilities are involved early and throughout the research processes, including in focus groups, questionnaires, and surveys ### Topic: Requirements @@ -73,6 +74,8 @@ Students should be able to: * ensure different types of user requirements that relate to people with disabilities are considered, for example adequate contrast ratios, availability of content and functionality in different screen sizes and configurations, keyboard compatibility, and use with assistive technologies and adaptive strategies * create personas that include people with different types of disabilities and different levels of experience using the Web * create scenarios that include use of the Web or application with different types of assistive technologies and adaptive strategies +* ensure adequate location is chosen to conduct the activities depending on the activity goals, assistive technology needs, custom setups, transportation means, accessibility of the facilities, and others +* ensure adequate timings for participants to carry on activities is allocated, for example different time sets for different levels of experience with the assistive technology and different levels of familiarity with the web or application ### Topic: Working with People with Disabilities @@ -80,14 +83,8 @@ Students should be able to: Students should be able to: -* determine the characteristics of participants in usability testing based on different factors, such as overall project requirements, level of experience, use of assistive technology, and type of disability -* ensure treatment of people with disabilities is respectful and avoids clichés and myths -* ensure appropriate compensation is provided to people with disabilities * ensure people with disabilities understand the purpose of your interviews, surveys, and questionnaires and are comfortable during the research activities * ensure people with disabilities can opt out at any time if they desire -* ensure adequate location is chosen to conduct the tests depending on the test goals, assistive technology needs, custom setups, transportation means, accessibility of the facilities, and others -* ensure adequate timings for participants to carry on tasks is allocated, for example different time sets for different levels of experience with the assistive technology and different levels of familiarity with the web or application - ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: From 317252b179c992eafdd61adca8e983701f0a58dd Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 19 Mar 2021 14:35:02 +0100 Subject: [PATCH 026/416] Changing module names --- content/designer/color-and-movement.md | 103 ++++++++++++++++++ content/designer/layout-and-structure.md | 106 ++++++++++++++++++ content/designer/navigation-and-input.md | 130 +++++++++++++++++++++++ 3 files changed, 339 insertions(+) create mode 100644 content/designer/color-and-movement.md create mode 100644 content/designer/layout-and-structure.md create mode 100644 content/designer/navigation-and-input.md diff --git a/content/designer/color-and-movement.md b/content/designer/color-and-movement.md new file mode 100644 index 000000000..9cabbb665 --- /dev/null +++ b/content/designer/color-and-movement.md @@ -0,0 +1,103 @@ +--- +title: "[Draft] Module 2: Color and Movement" +nav_title: "Color and Movement" +permalink: /curricula/designer-modules/color-and-movement/ +ref: /curricula/designer-modules/color-and-movement/ +lang: en +github: + repository: w3c/wai-curricula + path: content/designer/color-and-movement.md +license: creative-commons +acknowledgements: /curricula/acknowledgements/ +changelog: /curricula/changelog/ +footer: > +

Date: Updated @@ Month 2021. First published December 2019.

+

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

+

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+parent_in_h1: + - ref: /curricula/designer-modules/ + name: nav_title + - ref: /curricula/ + name: "Curricula on Web Accessibility" +navigation: + previous: /curricula/designer-modules/user-research-and-requirements/ + next: /curricula/designer-modules/layout-and-structure/ +--- + +## Introduction +{:.no-display} + +Courses based on this module should: + +* demonstrate how people with disabilities read and understand information in websites and applications based on color properties +* explain how different types of content movement (such as blinking and scrolling) affect the ability of people with disabilities to interact and consume information + +## Learning Outcomes for Module + +Students should be able to: + +* explain how people with disabilities identify and distinguish different user interface components based on color properties +* create designs that allow for adequate contrast ratios between foreground user interface components (such as text, images of text, and controls) and their corresponding background +* create designs that allow for clear and distinguishable focus indicators, for example using borders, background color, and highlighting +* create designs that allow for mechanisms to pause, stop, and hide any moving, blinking, scrolling, and auto-updating content, such as animations or carousels +* create designs that allow for mechanisms to stop or control the volume of audio that plays automatically +* ensure that different page regions and user interface components are distinguishable from one another through different means, such as color, typography, and borders +* ensure additional mechanisms apart from color alone are available to convey information, such as text cues, patterns, and icons + +## Competencies + +Skills required for this module: + +[To be developed] + +## Topics to Teach + +Topics to achieve the learning outcomes: + +### Topic: Contrast Ratios + +#### Learning Outcomes for Topic + +Students should be able to: + +* explain how contrast ratios allow people with disabilities to read, understand, and distinguish foreground from background user interface components +* create designs that allow text and images of text to have a contrast ratio of at least 4.5:1 with respect to their background +* create designs that allow for large-scale text and images of text to have a contrast ratio of at least 3:1 with respect to their background +* create designs that allow user interface components and graphical elements to have a contrast ratio of at least 3:1 with respect to their background +* ensure focus indicators have a contrast ratio that allows them to be perceived by users + +### Topic: Time, Movement, and Animations + +#### Learning Outcomes for Topic + +Students should be able to: + +* create designs that allow to stop, adjust, or extend any time limit set by the content +* create designs that allow to pause, stop or hide any content that blinks, moves, or auto-updates +* ensure flashing content is below the general flash and red flash thresholds +* create designs that allow content that does not flash more than three times in a second +* create designs that allow to disable motion animation triggered by interaction, such as additional animations when scrolling + +### Topic: Section and Content Identification + +#### Learning Outcomes for Topic + +Students should be able to: + +* ensure distinguishable styles are applied to different page regions, such as header, navigation, main, or footer +* ensure distinguishable styles are used to identify different components, such as text, links, buttons, or form elements +* create designs that allow for text cues to convey any information that is provided using color alone, such as an asterisk to convey required form fields in a form +* ensure that information conveyed through differences in text color is also conveyed using other visual cues, such as underline, bold, and italics +* ensure that information provided using differences in color is also provided using different patterns, shapes, and icons + +## Ideas to Assess Knowledge for Module + +Optional ideas to support assessment: + +[To be developed] + +## Teaching Resources + +Suggested resources to support your teaching: + +[To be developed] diff --git a/content/designer/layout-and-structure.md b/content/designer/layout-and-structure.md new file mode 100644 index 000000000..e4713362f --- /dev/null +++ b/content/designer/layout-and-structure.md @@ -0,0 +1,106 @@ +--- +title: "[Draft] Module 3: Layout and Structure" +nav_title: "Layout and Structure" +permalink: /curricula/designer-modules/layout-and-structure/ +ref: /curricula/designer-modules/layout-and-structure/ +lang: en +github: + repository: w3c/wai-curricula + path: content/designer/layout-and-structure.md +license: creative-commons +acknowledgements: /curricula/acknowledgements/ +changelog: /curricula/changelog/ +footer: > +

Date: Updated @@ Month 2021. First published December 2019.

+

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

+

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+parent_in_h1: + - ref: /curricula/designer-modules/ + name: nav_title + - ref: /curricula/ + name: "Curricula on Web Accessibility" +navigation: + previous: /curricula/designer-modules/color-and-movement/ + next: /curricula/designer-modules/navigation-and-input/ +--- + +## Introduction +{:.no-display} + +Courses based on this module should: + +* explain how people with disabilities rely on layout and structure to orient themselves in websites and applications + +## Learning Outcomes for Module + +Students should be able to: + +* explain how people with disabilities use layout and structure to orient themselves in web pages and applications +* ensure page regions are placed where expected depending on their type and function, for example, page headers at the top and page footers at the bottom +* ensure headings describe the topic of the section they entitle +* identify related requirements for developers to ensure that headings are nested according to the hierarchical structure of the page +* ensure white space and proximity help users determine the relations between different page regions and contents +* create designs that allow for target sizes that can be tapped by users with mobility impairments and using different input methods +* ensure meaningful sequence, content, and functionality are preserved when using different viewport sizes, screen configurations, and devices to access content +* create designs that allow to preserve content and functionality when line height as well as spacing between paragraphs, words, and letters are modified by the user +* create designs that allow text resizing without loss of content and functionality +* create designs that do not restrict the content view and operation to a single display orientation, such as portrait or landscape + +## Competencies + +Skills required for this module: + +[To be developed] + +## Topics to Teach + +Topics to achieve the learning outcomes: + +### Topic: Responsive Design + +#### Learning Outcomes for Topic + +Students should be able to: + +* create designs that preserve content and functionality when accessed using a variety of screen sizes and configurations +* ensure target sizes that are at least 44 by 44 CSS pixels +* ensure content can be presented without loss of information and functionality, and that accessing such content does not require two dimensional scrolling: + * vertically at a width equivalent to 320 CSS pixels + * horizontally at a height equivalent to 256 CSS pixels +* create designs that allow text resizing up to 200% without loss of content and functionality +* create designs that allow users to set the orientation to portrait or landscape, or that include show or hide controls to access contents in portrait and landscape orientations + +### Topic: Page Layout + +#### Learning Outcomes for Topic + +Students should be able to: + +* provide distinctive styles for each of the page regions, heading levels, and user interface components +* ensure positioning of page regions falls under user expectations, such as headers at the top, footers at the bottom, and navigation regions at the top left +* ensure heading levels are used to convey the hierarchical structure of the content +* ensure heading texts describe the purpose of the section they entitle + +### Topic: Text Spacing + +#### Learning Outcomes for Topic + +Students should be able to: + +* create designs that allow users to modify the following properties without loss of content and functionality: + * line spacing -- to at least 1.5 times the font size + * spacing following paragraphs -- to at least 2 times the font size + * Letter spacing (tracking) -- to at least 0.12 times the font size + +## Ideas to Assess Knowledge for Module + +Optional ideas to support assessment: + +[To be developed] + +## Teaching Resources + +Suggested resources to support your teaching: + +[To be developed] + diff --git a/content/designer/navigation-and-input.md b/content/designer/navigation-and-input.md new file mode 100644 index 000000000..fc2c81cc6 --- /dev/null +++ b/content/designer/navigation-and-input.md @@ -0,0 +1,130 @@ +--- +title: "[Draft] Module 4: Navigation and Input" +nav_title: "Navigation and Input" +permalink: /curricula/designer-modules/navigation-and-input/ +ref: /curricula/designer-modules/navigation-and-input/ +lang: en +github: + repository: w3c/wai-curricula + path: content/designer/navigation-and-input.md +license: creative-commons +acknowledgements: /curricula/acknowledgements/ +changelog: /curricula/changelog/ +footer: > +

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

+

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

+

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+navigation: + previous: /curricula/designer-modules/layout-and-structure/ + next: /curricula/designer-modules/instructions-and-feedback/ +--- + +## Introduction +{:.no-display} + +Courses based on this module should: + +[To be developed] + +## Learning Outcomes for Module + +Students should be able to: + +* explain strategies that people with disabilities use to navigate and interact with web pages +* create designs that allow users to bypass blocks of repeated content +* create designs that allow for multiple navigational mechanisms, such as menus, search boxes, breadcrumb trails, tables of contents, and sitemaps +* create designs that allow for mechanisms to stop, adjust, and extend time limits +* ensure interactions do not rely solely on multipoint or path-based gestures, such as swipe or pinch +* ensure that mechanisms to undo or abort an action carried out with pointer operations are always available +* identify related requirements for developers to ensure that navigational mechanisms can be used with the keyboard and other input devices + +{% include excol.html type="all" %} + +## Competencies + +Skills required for this module: + +[To be developed] + +{% comment %} + +Skills required for this module: + +{% include excol.html type="start" %} + +### Students + +{% include excol.html type="middle" %} + +* [Prerequisites for Students](/curricula/developer-modules/#prerequisites-for-students) +* [Module 1: Page Structure](/curricula/developer-modules/page-structure/) from [Developer Modules](/curricula/developer-modules/) + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + +### Instructors + +{% include excol.html type="middle" %} + +* Applied expertise in teaching: + * [WCAG 2 Success Criterion 2.4.1 Bypass Blocks](https://www.w3.org/WAI/WCAG21/quickref/#bypass-blocks) + * [WCAG 2 Success Criterion 2.4.5 Multiple Ways](https://www.w3.org/WAI/WCAG21/quickref/#multiple-ways) + * [WCAG 2 Success Criterion 2.4.8 Location](https://www.w3.org/WAI/WCAG21/quickref/#location) + * [WCAG 2 Success Criterion 3.2.3 Consistent Navigation](https://www.w3.org/WAI/WCAG21/quickref/#consistent-navigation) + +{% endcomment %} + +## Topics to Teach + +Topics to achieve the learning outcomes: + +### Topic: Navigational Mechanisms + +#### Learning Outcomes for Topic + +Students should be able to: + +* create designs that support skipping blocks of repeated content providing at least one of the following techniques: + * a link at the top of each page that goes directly to the main content area + * a link at the beginning of a block of repeated content to go to the end of the block + * links at the top of the page that go to each area of the content + * an expandable and collapsible menu to make it easier for users to skip the menu +* create designs that support site maps to provide an overview of the entire site +* create designs that support breadcrumb trails to provide information about the user's location in a set of web pages +* create designs that support table of contents to give an overview of the whole site or document and to allow users to go to specific parts of the content + +### Topic: Enough Time + +#### Learning Outcomes for Topic + +Students should be able to: + +* create designs that allow users to turn off existing time limits +* create designs that allow users to adjust existing time limits up to at least ten times the original setting +* create designs that support extending existing time limits by warning the user at least twenty seconds before the time limit expires +* ensure content that auto scrolls can be paused and resumed from where it was left to allow users to better read and process content + +### Topic: Input Modalities + +Students should be able to: + +* create designs that support alternatives to multi-pointer gestures (such as swipe or pinch) using single pointer activation +* ensure down event on single pointer gestures: + * do not perform any action, or + * have available mechanisms to abort or undo any action carried on +* create designs that support alternatives to devise or user motion such as shaking, by using user interface components that do not require motion +* ensure response to motion can be disabled by the user to prevent accidental actuation, such as undoing an action by shaking a device + +## Ideas to Assess Knowledge for Module + +Optional ideas to support assessment: + +[To be developed] + +## Teaching Resources + +Suggested resources to support your teaching: + +[To be developed] + From 025f778d0122285b94aaba0aa1546a51f401ca96 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 22 Mar 2021 13:00:18 +0100 Subject: [PATCH 027/416] Updates to designer modules --- _data/navigation.yml | 16 ++--- ...al-design.md => information-perception.md} | 44 ++++++------- content/designer/instructions-and-feedback.md | 26 +++++--- content/designer/labels-and-widgets.md | 21 ++++--- content/designer/navigation-and-input.md | 4 +- ...-and-structure.md => responsive-design.md} | 30 +++------ .../user-research-and-requirements.md | 14 +---- ...vement.md => wireframes-and-prototypes.md} | 63 ++++++++++++------- 8 files changed, 117 insertions(+), 101 deletions(-) rename content/designer/{informational-design.md => information-perception.md} (85%) rename content/designer/{layout-and-structure.md => responsive-design.md} (72%) rename content/designer/{color-and-movement.md => wireframes-and-prototypes.md} (71%) diff --git a/_data/navigation.yml b/_data/navigation.yml index d8524dc16..14058a1c6 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -261,17 +261,17 @@ pages: - name: User Research and Requirements url: /curricula/designer-modules/user-research-and-requirements/ - - name: Colors, Styles, and Animations - url: /curricula/designer-modules/colors-styles-and-animations/ - - name: Layout and Spacing - url: /curricula/designer-modules/layout-and-spacing/ + - name: Wireframes and Prototypes + url: /curricula/designer-modules/wireframes-and-prototypes/ + - name: Responsive Design + url: /curricula/designer-modules/responsive-design/ - name: Navigation and Input url: /curricula/designer-modules/navigation-and-input/ - - name: Informational Design - url: /curricula/designer-modules/informational-design/ - - name: Instructions and Feedback [TBD] + - name: Information Perception + url: /curricula/designer-modules/information-perception/ + - name: Instructions and Feedback url: /curricula/designer-modules/instructions-and-feedback/ - - name: Labels and Widgets [TBD] + - name: Labels and Widgets url: /curricula/designer-modules/labels-and-widgets/ - name: Changelog url: "/curricula/changelog/" diff --git a/content/designer/informational-design.md b/content/designer/information-perception.md similarity index 85% rename from content/designer/informational-design.md rename to content/designer/information-perception.md index 20077a015..94bba5ad2 100644 --- a/content/designer/informational-design.md +++ b/content/designer/information-perception.md @@ -1,12 +1,12 @@ --- -title: "[Draft] Module 5: Informational Design" -nav_title: "Informational Design" -permalink: /curricula/designer-modules/informational-design/ -ref: /curricula/designer-modules/informational-design/ +title: "[Draft] Module 5: Information Perception" +nav_title: "Information Perception" +permalink: /curricula/designer-modules/information-perception/ +ref: /curricula/designer-modules/information-perception/ lang: en github: repository: w3c/wai-curricula - path: content/designer/informational-design.md + path: content/designer/information-perception.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ @@ -30,16 +30,16 @@ Courses based on this module should: Students should be able to: -* explain how people with disabilities rely on different means, structures, and techniques for presenting information, such as textual, graphical, tabular, audio, or video information +* explain how people with disabilities rely on different means, structures, and techniques for preceiving information, such as textual, graphical, tabular, audio, or video information * identify and describe different uses of text, such as for labels, static content, or dynamic messages -* describe alternative ways to convey information presented in text, such as using graphics, color, or shape +* describe alternative ways to convey information presented in text, such as using graphics, color, or shapes * identify and describe different types of images from an accessibility perspective, such as informative, textual, decorative, functional, and complex images * identify and describe different types of tables from an accessibility perspective, such as layout, simple, and complex tables -* identify the different types of multimedia content (for example audio or video content), and relate each of them to the user needs of people with disabilities +* identify different types of audio or video content and relate each of them to the user needs of people with disabilities * provide appropriate text alternatives for images included in the design phase, such as logos or graphical components * provide text that allows users to identify graphical interactive elements such as links or menu items * create designs that allow to provide accurate descriptions for components such as complex tables, charts, or infographics -* create designs that allow to provide alternatives to multimedia content, such as transcripts for audio or audio described content, +* create designs that allow to provide alternatives to multimedia content, such as transcripts for audio and audio described content, * identify related requirements for developers to ensure that table header cells are programmatically associated to their corresponding data cells * identify related requirements for developers to ensure alternatives and descriptions are programmatically associated to their corresponding component @@ -75,32 +75,35 @@ Students should be able to: Students should be able to: * define the following types of images from an accessibility perspective: - * informative, - * textual, - * decorative, - * functional, - * complex images + * informative + * textual + * decorative + * functional + * complex * create designs that support use of text when the information presented is intended to be read as text, instead of using images of text * provide names for controls and components that accept user input * provide descriptive textual information for the following types of graphical information: * those that are part of tests or exercises that would be invalid if presented in text * those that are primarily intended to create a specific sensory experience * provide text alternatives that identify and describe the purpose of graphical elements that are used to confirm that content is accessed by a person rather than a computer, such as captcha -* provide several modalities of captcha that rely on different sensory characteristics +* provide several modalities of captcha that rely on different sensory characteristics, such as visual or auditory ### Topic: Tabular Information #### Learning Outcomes for Topic +Students should be able toÑ + * define the following types of tables from an accessibility perspective - * simple tables - * complex tables - * layout tables + * simple + * complex + * layout * create designs that allow presentation of tables in multiple ways, such as using several lists, or splitting a single table into several simpler ones * create designs that allow to establish a relationship between the table cells both visually and programmatically, included for headers and data cells +* create designs that support the inclusion of table descriptions * describe related requirements for developers to ensure that table header and data cells are programmatically associated -### Topic: MultiMedia Content +### Topic: Multimedia Content #### Learning Outcomes for Topic @@ -111,8 +114,7 @@ Students should be able to * identify and describe different types of synchronized media, for example a dialog in a movie * create designs that allow to provide text alternatives for prerecorded audio-only content that presents equivalent information * create designs that allow to provide either a text alternative or an audio track for a prerecorded video-only content that presents equivalent information -* create designs that allow to provide captions for any prerecorded and live audio content in synchronized media -* create designs that allow to provide audio descriptions for any prerecorded and live video content in synchronized media +* create designs that allow to provide captions and audio descriptions for any prerecorded and live audio content in synchronized media * create designs that allow to provide sign language interpretation for all prerecorded audio content in synchronized media ## Ideas to Assess Knowledge for Module diff --git a/content/designer/instructions-and-feedback.md b/content/designer/instructions-and-feedback.md index bdecd8486..ccbeb8400 100644 --- a/content/designer/instructions-and-feedback.md +++ b/content/designer/instructions-and-feedback.md @@ -30,17 +30,17 @@ Courses based on this module should: Students should be able to: -* explain how people with disabilities rely on instructions and feedback to understand and interact with components such as forms and widgets +* explain how people with disabilities perceive and understand instructions and feedback to interact with components such as forms and widgets * provide overall instructions to help users understand and interact with forms and widgets, such as: * allowed data formats * required and optional input * explanations of what will happen when a change in a control results in a change of context * ways to stop and resume sessions -* provide clear instructions about the current and total number of step and about existing time limits in a form +* provide clear instructions about the current and total number of steps and about existing time limits in a form * provide meaningful and descriptive notification messages about imminent time limits, errors, successes, or any other event resulting from user input * ensure that notification messages are easy to understand and can be distinguished from any other component -* provide suggestions for error correction when they are known -* provide clear warnings about imminent time limits,, and ensure mechanisms are available to stop and extend time limits +* provide suggestions for error correction when the suggestions are known +* provide clear warnings about imminent time limits, and ensure mechanisms are available to stop, adjust, and extend time limits * create designs that allow for mechanisms to reverse, check, and confirm submissions in legal or financial transactions * identify related requirements for developers to ensure that instructions and feedback can be programmatically associated with their corresponding control or component @@ -63,7 +63,6 @@ Topics to achieve the learning outcomes: Students should be able to: * provide overall instructions to help users understand the purpose and intent of interactive user interface components, such as form fields -* provide overall instructions about how data should be entered, such as date formats and particular patterns that specific form fields may require * provide instructions about which input fields are required by: * including information about each of the required form fields before the form control * including text, icons, and color in the label of each of the required form fields that indicates that they are required @@ -77,20 +76,27 @@ Students should be able to: Students should be able to: -* ensure notification messages are easy to understand, and can be distinguished from any other user component -* provide textual information about errors, successes, or any other information resulting from user input +* ensure notification messages are easy to understand and can be distinguished from any other user component +* provide textual information about errors, successes, or any other event resulting from user input * create designs that allow to associate notification messages, errors, and warnings to the component that generated such messages * describe related requirements for developers to ensure that notification messages are associated to their corresponding user interface component and can be rendered by assistive technologies - ### Topic: Help and Error Prevention #### Learning Outcomes for Topic Students should be able to: - - +* create designs that support identification of form fields with automatically detected errors +* create designs that support textual descriptions of errors that can be automatically identified +* provide labels and instructions about how data should be entered, such as date formats and specific ways to introduce identification and phone numbers +* create designs that support provision of suggestions for input errors that are automatically detected when these suggestions are known +* create designs that support reversing, checking, and confirming data entered by the user at least for the following types of information + * financial + * legal + * modifications and deletions of user-controllable data collected in data storage systems + * submissions of user test responses +* create designs that support context help methods for form fields, such as a "help" link next to the form ## Ideas to Assess Knowledge for Module diff --git a/content/designer/labels-and-widgets.md b/content/designer/labels-and-widgets.md index 084b05592..a0305e96b 100644 --- a/content/designer/labels-and-widgets.md +++ b/content/designer/labels-and-widgets.md @@ -33,7 +33,7 @@ Students should be able to: * provide clear and distinguishable names that allow to identify different types of user interface components * ensure that custom widgets have appropriate labels that describe their purpose * ensure that meaningful sequence and clear focus indicators for custom widgets are provided through the widget's lifetime -* create designs for custom widgets that support interaction using multiple input devices, such as keyboard, +* create designs for custom widgets that support operation using the keyboard * define custom interaction patterns, such as where to place focus when a dialog is open or closed, and what the focus management should be within those dialogs * define mechanisms that allow users to obtain information about custom interaction patterns, such as specific keyboard shortcuts for applications and expected behavior of custom widgets * identify related requirements for developers to create designs using native HTML elements to the extent possible and describe their benefits in relation to non-native elements @@ -52,7 +52,7 @@ Skills required for this module: Topics to achieve the learning outcomes: -### Topic: Names and Labels +### Topic: Labels and Names ### Learning outcomes for Topic @@ -67,16 +67,23 @@ Students should be able to: ### Topic: Keyboard Input -* provide designs that support operation with different input devices, such as keyboard +#### Learning Outcomes for Topic + +Students should be able to: + +* provide designs that support operation with the keyboard * describe related requirements for developers to ensure every user interface component can be entered, operated, and exited using the keyboard only -* provide keyboard shortcuts that do not conflict with the operating system, browser, and assistive technology shortcuts +* identify situations when it may be necessary to provide additional keyboard shortcuts, for example when designing a custom functionality +* create designs that allow provision of keyboard shortcuts that avoid conflicts with the operating system, browser, and assistive technologies keyboard shortcuts +* create designs that allow for consistent focus indicators through the whole widget or application lifetime -### Topic: Help and Feedback +### Topic: Notifications #### Learning Outcomes for Topic -* create designs that support mechanisms to queu and prioritize notifications from different user interface compontents and custom widgets - +* create designs that allow users to switch notifications on or off to avoid +* identify different types of notifications based on their priority, relevance, and relation to specific parts of the application or to the application as a whole +* create designs that support mechanisms to queue and prioritize application notifications coming from different user interface components and custom widgets ## Ideas to Assess Knowledge for Module diff --git a/content/designer/navigation-and-input.md b/content/designer/navigation-and-input.md index fc2c81cc6..d2479fb2c 100644 --- a/content/designer/navigation-and-input.md +++ b/content/designer/navigation-and-input.md @@ -33,7 +33,7 @@ Students should be able to: * explain strategies that people with disabilities use to navigate and interact with web pages * create designs that allow users to bypass blocks of repeated content * create designs that allow for multiple navigational mechanisms, such as menus, search boxes, breadcrumb trails, tables of contents, and sitemaps -* create designs that allow for mechanisms to stop, adjust, and extend time limits +* create designs that allow for mechanisms to stop, adjust, and extend time limits, for example time limits in a form or times for which information is shown * ensure interactions do not rely solely on multipoint or path-based gestures, such as swipe or pinch * ensure that mechanisms to undo or abort an action carried out with pointer operations are always available * identify related requirements for developers to ensure that navigational mechanisms can be used with the keyboard and other input devices @@ -113,7 +113,7 @@ Students should be able to: * ensure down event on single pointer gestures: * do not perform any action, or * have available mechanisms to abort or undo any action carried on -* create designs that support alternatives to devise or user motion such as shaking, by using user interface components that do not require motion +* create designs that support alternatives to device or user motion such as shaking, by using user interface components that do not require motion * ensure response to motion can be disabled by the user to prevent accidental actuation, such as undoing an action by shaking a device ## Ideas to Assess Knowledge for Module diff --git a/content/designer/layout-and-structure.md b/content/designer/responsive-design.md similarity index 72% rename from content/designer/layout-and-structure.md rename to content/designer/responsive-design.md index e4713362f..17e168011 100644 --- a/content/designer/layout-and-structure.md +++ b/content/designer/responsive-design.md @@ -1,12 +1,12 @@ --- -title: "[Draft] Module 3: Layout and Structure" -nav_title: "Layout and Structure" -permalink: /curricula/designer-modules/layout-and-structure/ -ref: /curricula/designer-modules/layout-and-structure/ +title: "[Draft] Module 3: Responsive Design" +nav_title: "Responsive Design" +permalink: /curricula/designer-modules/responsive-design/ +ref: /curricula/designer-modules/responsive-design/ lang: en github: repository: w3c/wai-curricula - path: content/designer/layout-and-structure.md + path: content/designer/responsive-design.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ @@ -29,17 +29,16 @@ navigation: Courses based on this module should: +{% comment %} + * explain how people with disabilities rely on layout and structure to orient themselves in websites and applications +{% endcomment %} + ## Learning Outcomes for Module Students should be able to: -* explain how people with disabilities use layout and structure to orient themselves in web pages and applications -* ensure page regions are placed where expected depending on their type and function, for example, page headers at the top and page footers at the bottom -* ensure headings describe the topic of the section they entitle -* identify related requirements for developers to ensure that headings are nested according to the hierarchical structure of the page -* ensure white space and proximity help users determine the relations between different page regions and contents * create designs that allow for target sizes that can be tapped by users with mobility impairments and using different input methods * ensure meaningful sequence, content, and functionality are preserved when using different viewport sizes, screen configurations, and devices to access content * create designs that allow to preserve content and functionality when line height as well as spacing between paragraphs, words, and letters are modified by the user @@ -70,17 +69,6 @@ Students should be able to: * create designs that allow text resizing up to 200% without loss of content and functionality * create designs that allow users to set the orientation to portrait or landscape, or that include show or hide controls to access contents in portrait and landscape orientations -### Topic: Page Layout - -#### Learning Outcomes for Topic - -Students should be able to: - -* provide distinctive styles for each of the page regions, heading levels, and user interface components -* ensure positioning of page regions falls under user expectations, such as headers at the top, footers at the bottom, and navigation regions at the top left -* ensure heading levels are used to convey the hierarchical structure of the content -* ensure heading texts describe the purpose of the section they entitle - ### Topic: Text Spacing #### Learning Outcomes for Topic diff --git a/content/designer/user-research-and-requirements.md b/content/designer/user-research-and-requirements.md index 7b8df5708..14f5cc30b 100644 --- a/content/designer/user-research-and-requirements.md +++ b/content/designer/user-research-and-requirements.md @@ -37,10 +37,10 @@ Students should be able to: * describe how involving users with disabilities early and throughout in the design and development process can lead to better accessibility of websites and applications * explain strategies that people with disabilities use to interact with the Web -* ensure accessibility standards and legal requirements are researched and included in the design phase -* ensure that collected user input in user research includes different groups of users with disabilities and various levels of experience using the Web +* ensure applicable accessibility requirements, such as standards and policies, are researched and included in the overall project requirements * ensure people with disabilities are included in user research activities, for example in focus groups, use cases, user analysis, personas, scenarios, and usability testing -* ensure people with disabilities can provide informed consent, respond to questions, and perform any other activity required of the research process in an accessible way +* ensure that collected user input in user research includes different groups of users with disabilities and various levels of experience using the Web +* ensure people with disabilities can provide informed consent, respond to questions, and perform any other activity required by the research process in an accessible way ## Competencies @@ -77,14 +77,6 @@ Students should be able to: * ensure adequate location is chosen to conduct the activities depending on the activity goals, assistive technology needs, custom setups, transportation means, accessibility of the facilities, and others * ensure adequate timings for participants to carry on activities is allocated, for example different time sets for different levels of experience with the assistive technology and different levels of familiarity with the web or application -### Topic: Working with People with Disabilities - -#### Learning Outcomes for Topic - -Students should be able to: - -* ensure people with disabilities understand the purpose of your interviews, surveys, and questionnaires and are comfortable during the research activities -* ensure people with disabilities can opt out at any time if they desire ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: diff --git a/content/designer/color-and-movement.md b/content/designer/wireframes-and-prototypes.md similarity index 71% rename from content/designer/color-and-movement.md rename to content/designer/wireframes-and-prototypes.md index 9cabbb665..e427c56e2 100644 --- a/content/designer/color-and-movement.md +++ b/content/designer/wireframes-and-prototypes.md @@ -1,12 +1,12 @@ --- -title: "[Draft] Module 2: Color and Movement" -nav_title: "Color and Movement" -permalink: /curricula/designer-modules/color-and-movement/ -ref: /curricula/designer-modules/color-and-movement/ +title: "[Draft] Module 2: Wireframes and Prototypes" +nav_title: "Wireframes and Prototypes" +permalink: /curricula/designer-modules/wireframes-and-prototypes/ +ref: /curricula/designer-modules/wireframes-and-prototypes/ lang: en github: repository: w3c/wai-curricula - path: content/designer/color-and-movement.md + path: content/designer/wireframes-and-prototypes.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ @@ -29,8 +29,14 @@ navigation: Courses based on this module should: +[To be developed.] + +{% comment %} + * demonstrate how people with disabilities read and understand information in websites and applications based on color properties -* explain how different types of content movement (such as blinking and scrolling) affect the ability of people with disabilities to interact and consume information +* explain how different types of content movement (such as blinking and scrolling) affect the ability of people with disabilities to perceive information + +{% endcomment %} ## Learning Outcomes for Module @@ -38,11 +44,13 @@ Students should be able to: * explain how people with disabilities identify and distinguish different user interface components based on color properties * create designs that allow for adequate contrast ratios between foreground user interface components (such as text, images of text, and controls) and their corresponding background +* ensure additional mechanisms apart from color alone are available to convey information, such as text cues, patterns, and icons * create designs that allow for clear and distinguishable focus indicators, for example using borders, background color, and highlighting -* create designs that allow for mechanisms to pause, stop, and hide any moving, blinking, scrolling, and auto-updating content, such as animations or carousels +* create designs that allow for mechanisms to pause, stop, and hide any moving, blinking, scrolling, and auto-updating content, such as animations and carousels * create designs that allow for mechanisms to stop or control the volume of audio that plays automatically -* ensure that different page regions and user interface components are distinguishable from one another through different means, such as color, typography, and borders -* ensure additional mechanisms apart from color alone are available to convey information, such as text cues, patterns, and icons +* ensure different page regions and user interface components are placed where users expect them and are distinguishable from one another through different ways, such as color, typography, borders, and spacing +* provide clear and descriptive heading texts that allow users to identify different sections of the web and parts of the content +* identify related requirements for developers to ensure that headings are nested according to the hierarchical structure of the page ## Competencies @@ -66,29 +74,31 @@ Students should be able to: * create designs that allow user interface components and graphical elements to have a contrast ratio of at least 3:1 with respect to their background * ensure focus indicators have a contrast ratio that allows them to be perceived by users -### Topic: Time, Movement, and Animations +### Topic: Section and Content Identification #### Learning Outcomes for Topic Students should be able to: -* create designs that allow to stop, adjust, or extend any time limit set by the content -* create designs that allow to pause, stop or hide any content that blinks, moves, or auto-updates -* ensure flashing content is below the general flash and red flash thresholds -* create designs that allow content that does not flash more than three times in a second -* create designs that allow to disable motion animation triggered by interaction, such as additional animations when scrolling +* ensure distinguishable styles are applied to different page regions, such as header, navigation, main, and footer +* ensure distinguishable styles are used to identify different components, such as text, links, buttons, or form elements +* create designs that allow for text cues to convey any information that is provided using color alone, such as an asterisk to convey required form fields in a form +* ensure that information conveyed through differences in text color is also conveyed using other visual cues, such as underline, bold, and italics +* ensure that information provided using differences in color is also provided using different patterns, shapes, and icons -### Topic: Section and Content Identification +### Topic: Context, Movement and Timing #### Learning Outcomes for Topic Students should be able to: -* ensure distinguishable styles are applied to different page regions, such as header, navigation, main, or footer -* ensure distinguishable styles are used to identify different components, such as text, links, buttons, or form elements -* create designs that allow for text cues to convey any information that is provided using color alone, such as an asterisk to convey required form fields in a form -* ensure that information conveyed through differences in text color is also conveyed using other visual cues, such as underline, bold, and italics -* ensure that information provided using differences in color is also provided using different patterns, shapes, and icons +* create designs that allow to pause, stop, or hide any content that blinks, moves, or auto-updates +* ensure flashing content is below the general flash and red flash thresholds +* create designs that allow content that does not flash more than three times in a second +* create designs that allow to disable motion animation triggered by interaction, such as additional animations when scrolling +* create designs that allow to stop, adjust, or extend any time limit set by the content +* create designs that support mechanisms to stop or control the volume of any audio that plays automatically for more than 3 seconds +* create designs that prevent changes of context unless the user is aware of them or has explicitly requested such changes ## Ideas to Assess Knowledge for Module @@ -96,6 +106,17 @@ Optional ideas to support assessment: [To be developed] +### Topic: Structure and Layout + +#### Learning Outcomes for Topic + +Students should be able to: + +* provide distinctive styles for each of the page regions, heading levels, and user interface components +* ensure positioning of page regions falls under user expectations, such as headers at the top, footers at the bottom, and navigation regions at the top left +* ensure heading levels are used to convey the hierarchical structure of the content +* ensure heading texts describe the purpose of the section they entitle + ## Teaching Resources Suggested resources to support your teaching: From 75135ff7918b3da7f75e8e29ad347a3ad1aef22c Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 22 Mar 2021 13:10:18 +0100 Subject: [PATCH 028/416] Updates to designer modules --- content/designer/information-perception.md | 4 ++-- content/designer/instructions-and-feedback.md | 2 +- content/designer/responsive-design.md | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/content/designer/information-perception.md b/content/designer/information-perception.md index 94bba5ad2..d2dbe71a9 100644 --- a/content/designer/information-perception.md +++ b/content/designer/information-perception.md @@ -30,7 +30,7 @@ Courses based on this module should: Students should be able to: -* explain how people with disabilities rely on different means, structures, and techniques for preceiving information, such as textual, graphical, tabular, audio, or video information +* explain how people with disabilities rely on different means, structures, and techniques for perceiving information, such as textual, graphical, tabular, audio, or video information * identify and describe different uses of text, such as for labels, static content, or dynamic messages * describe alternative ways to convey information presented in text, such as using graphics, color, or shapes * identify and describe different types of images from an accessibility perspective, such as informative, textual, decorative, functional, and complex images @@ -92,7 +92,7 @@ Students should be able to: #### Learning Outcomes for Topic -Students should be able toÑ +Students should be able to: * define the following types of tables from an accessibility perspective * simple diff --git a/content/designer/instructions-and-feedback.md b/content/designer/instructions-and-feedback.md index ccbeb8400..29181eebb 100644 --- a/content/designer/instructions-and-feedback.md +++ b/content/designer/instructions-and-feedback.md @@ -67,7 +67,7 @@ Students should be able to: * including information about each of the required form fields before the form control * including text, icons, and color in the label of each of the required form fields that indicates that they are required * provide clear instructions of changes in context that happen when there is a change on a control before the control, for example when launching a new window when the user checks a check box or selects a list item -* provide overall instructions about existing time limits in a form and about how they can be turned of,, adjusted, or extended +* provide overall instructions about existing time limits in a form and about how they can be turned off, adjusted, or extended * provide clear instructions about the current step and about the total number of steps involved in a multi-step form ### Topic: Feedback and Notifications diff --git a/content/designer/responsive-design.md b/content/designer/responsive-design.md index 17e168011..abeca12a6 100644 --- a/content/designer/responsive-design.md +++ b/content/designer/responsive-design.md @@ -63,7 +63,7 @@ Students should be able to: * create designs that preserve content and functionality when accessed using a variety of screen sizes and configurations * ensure target sizes that are at least 44 by 44 CSS pixels -* ensure content can be presented without loss of information and functionality, and that accessing such content does not require two dimensional scrolling: +* ensure content can be presented without loss of information and functionality, and that accessing such content does not require two-dimensional scrolling: * vertically at a width equivalent to 320 CSS pixels * horizontally at a height equivalent to 256 CSS pixels * create designs that allow text resizing up to 200% without loss of content and functionality From 73cc9831821a9c6e66ef9d9fdcb8fbc39206f01f Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 22 Mar 2021 13:32:31 +0100 Subject: [PATCH 029/416] Updates to module 1 --- content/designer/user-research-and-requirements.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/designer/user-research-and-requirements.md b/content/designer/user-research-and-requirements.md index 14f5cc30b..187bfffad 100644 --- a/content/designer/user-research-and-requirements.md +++ b/content/designer/user-research-and-requirements.md @@ -21,7 +21,7 @@ parent_in_h1: name: "Curricula on Web Accessibility" navigation: previous: /curricula/designer-modules/ - next: /curricula/designer-modules/colors-styles-and-animations/ + next: /curricula/designer-modules/wireframes-and-prototypes/ --- ## Introduction @@ -37,7 +37,7 @@ Students should be able to: * describe how involving users with disabilities early and throughout in the design and development process can lead to better accessibility of websites and applications * explain strategies that people with disabilities use to interact with the Web -* ensure applicable accessibility requirements, such as standards and policies, are researched and included in the overall project requirements +* ensure applicable accessibility requirements, such as those collected in standards and policies, are researched and included in the overall project requirements * ensure people with disabilities are included in user research activities, for example in focus groups, use cases, user analysis, personas, scenarios, and usability testing * ensure that collected user input in user research includes different groups of users with disabilities and various levels of experience using the Web * ensure people with disabilities can provide informed consent, respond to questions, and perform any other activity required by the research process in an accessible way @@ -58,10 +58,10 @@ Topics to achieve the learning outcomes: Students should be able to: -* explain the use of different assistive technologies and adaptive strategies by various groups of people with disabilities to interact with web pages and applications -* ensure different groups of users with disabilities are included when defining user groups +* explain the use of different assistive technologies and adaptive strategies by various groups of people with disabilities to interact with websites and applications +* ensure different types of disabilities are included when defining user groups * ensure different types of accessibility barriers and features are included in the research phase -* ensure applicable accessibility guidelines, standards, and policies are included in the research phase +* ensure research is conducted on accessibility guidelines, standards, and policies to define and include accessibility requirements in the overall project requirements * determine the characteristics of participants in user research activities based on different factors, such as overall project requirements, level of experience, use of assistive technology, and type of disability * ensure people with disabilities are involved early and throughout the research processes, including in focus groups, questionnaires, and surveys @@ -73,9 +73,9 @@ Students should be able to: * ensure different types of user requirements that relate to people with disabilities are considered, for example adequate contrast ratios, availability of content and functionality in different screen sizes and configurations, keyboard compatibility, and use with assistive technologies and adaptive strategies * create personas that include people with different types of disabilities and different levels of experience using the Web -* create scenarios that include use of the Web or application with different types of assistive technologies and adaptive strategies +* create scenarios that include use of the website or application with different types of assistive technologies and adaptive strategies * ensure adequate location is chosen to conduct the activities depending on the activity goals, assistive technology needs, custom setups, transportation means, accessibility of the facilities, and others -* ensure adequate timings for participants to carry on activities is allocated, for example different time sets for different levels of experience with the assistive technology and different levels of familiarity with the web or application +* ensure adequate timings for participants to carry on activities is allocated, for example different time sets for different levels of experience with the assistive technology and different levels of familiarity with the website or application ## Ideas to Assess Knowledge for Module From 41afc4dedcc15f7ba4be5b6b2ebf8fb7060019ea Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 22 Mar 2021 14:04:42 +0100 Subject: [PATCH 030/416] Updates to module 2 --- content/designer/wireframes-and-prototypes.md | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/content/designer/wireframes-and-prototypes.md b/content/designer/wireframes-and-prototypes.md index e427c56e2..f2918a385 100644 --- a/content/designer/wireframes-and-prototypes.md +++ b/content/designer/wireframes-and-prototypes.md @@ -21,7 +21,7 @@ parent_in_h1: name: "Curricula on Web Accessibility" navigation: previous: /curricula/designer-modules/user-research-and-requirements/ - next: /curricula/designer-modules/layout-and-structure/ + next: /curricula/designer-modules/responsive-design/ --- ## Introduction @@ -42,15 +42,15 @@ Courses based on this module should: Students should be able to: -* explain how people with disabilities identify and distinguish different user interface components based on color properties +* explain how people with disabilities identify and distinguish different user interface components based on color, structure, layout, pattern, and spacing * create designs that allow for adequate contrast ratios between foreground user interface components (such as text, images of text, and controls) and their corresponding background * ensure additional mechanisms apart from color alone are available to convey information, such as text cues, patterns, and icons * create designs that allow for clear and distinguishable focus indicators, for example using borders, background color, and highlighting * create designs that allow for mechanisms to pause, stop, and hide any moving, blinking, scrolling, and auto-updating content, such as animations and carousels * create designs that allow for mechanisms to stop or control the volume of audio that plays automatically -* ensure different page regions and user interface components are placed where users expect them and are distinguishable from one another through different ways, such as color, typography, borders, and spacing -* provide clear and descriptive heading texts that allow users to identify different sections of the web and parts of the content -* identify related requirements for developers to ensure that headings are nested according to the hierarchical structure of the page +* ensure different page regions and user interface components are placed where users expect them and are distinguishable from one another through different ways, such as through color, typography, patterns, and spacing +* provide clear and descriptive heading texts that allow users to identify different sections of the website and parts of the content +* identify related requirements for developers to ensure that headings are coded appropriately and are nested according to the hierarchical structure of the page ## Competencies @@ -86,7 +86,7 @@ Students should be able to: * ensure that information conveyed through differences in text color is also conveyed using other visual cues, such as underline, bold, and italics * ensure that information provided using differences in color is also provided using different patterns, shapes, and icons -### Topic: Context, Movement and Timing +### Topic: Movement, Timing, and Context #### Learning Outcomes for Topic @@ -94,18 +94,12 @@ Students should be able to: * create designs that allow to pause, stop, or hide any content that blinks, moves, or auto-updates * ensure flashing content is below the general flash and red flash thresholds -* create designs that allow content that does not flash more than three times in a second +* create designs that allow to provide content that does not flash more than three times in a second * create designs that allow to disable motion animation triggered by interaction, such as additional animations when scrolling * create designs that allow to stop, adjust, or extend any time limit set by the content * create designs that support mechanisms to stop or control the volume of any audio that plays automatically for more than 3 seconds * create designs that prevent changes of context unless the user is aware of them or has explicitly requested such changes -## Ideas to Assess Knowledge for Module - -Optional ideas to support assessment: - -[To be developed] - ### Topic: Structure and Layout #### Learning Outcomes for Topic @@ -115,7 +109,13 @@ Students should be able to: * provide distinctive styles for each of the page regions, heading levels, and user interface components * ensure positioning of page regions falls under user expectations, such as headers at the top, footers at the bottom, and navigation regions at the top left * ensure heading levels are used to convey the hierarchical structure of the content -* ensure heading texts describe the purpose of the section they entitle +* identify related requirements for developers to ensure headings are coded appropriately, perceived by assistive technologies, and nested according to the specifications + +## Ideas to Assess Knowledge for Module + +Optional ideas to support assessment: + +[To be developed] ## Teaching Resources From 5dd277673f58cd596afd798877d0ee066791ff3e Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 22 Mar 2021 16:29:12 +0100 Subject: [PATCH 031/416] Updates to module 3 --- content/designer/responsive-design.md | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/content/designer/responsive-design.md b/content/designer/responsive-design.md index abeca12a6..747e2c752 100644 --- a/content/designer/responsive-design.md +++ b/content/designer/responsive-design.md @@ -20,7 +20,7 @@ parent_in_h1: - ref: /curricula/ name: "Curricula on Web Accessibility" navigation: - previous: /curricula/designer-modules/color-and-movement/ + previous: /curricula/designer-modules/wireframes-and-prototypes/ next: /curricula/designer-modules/navigation-and-input/ --- @@ -29,16 +29,13 @@ navigation: Courses based on this module should: -{% comment %} - -* explain how people with disabilities rely on layout and structure to orient themselves in websites and applications - -{% endcomment %} +[To be developed.] ## Learning Outcomes for Module Students should be able to: +* explain how people with disabilities use different screen sizes, screen configurations, and style sheets to access websites and applications * create designs that allow for target sizes that can be tapped by users with mobility impairments and using different input methods * ensure meaningful sequence, content, and functionality are preserved when using different viewport sizes, screen configurations, and devices to access content * create designs that allow to preserve content and functionality when line height as well as spacing between paragraphs, words, and letters are modified by the user @@ -55,21 +52,20 @@ Skills required for this module: Topics to achieve the learning outcomes: -### Topic: Responsive Design +### Topic: Zooming, Scrolling, and Resizing #### Learning Outcomes for Topic Students should be able to: -* create designs that preserve content and functionality when accessed using a variety of screen sizes and configurations -* ensure target sizes that are at least 44 by 44 CSS pixels +* create designs that preserve content and functionality when accessed using a variety of screen sizes, screen configurations, and style sheets * ensure content can be presented without loss of information and functionality, and that accessing such content does not require two-dimensional scrolling: - * vertically at a width equivalent to 320 CSS pixels - * horizontally at a height equivalent to 256 CSS pixels + * verticall (at a width equivalent to 320 CSS pixels) + * horizontall (at a height equivalent to 256 CSS pixels) * create designs that allow text resizing up to 200% without loss of content and functionality * create designs that allow users to set the orientation to portrait or landscape, or that include show or hide controls to access contents in portrait and landscape orientations -### Topic: Text Spacing +### Topic: Targets and Spacing #### Learning Outcomes for Topic @@ -79,6 +75,7 @@ Students should be able to: * line spacing -- to at least 1.5 times the font size * spacing following paragraphs -- to at least 2 times the font size * Letter spacing (tracking) -- to at least 0.12 times the font size +* ensure target sizes that are at least 44 by 44 CSS pixels ## Ideas to Assess Knowledge for Module From 9e63d6385c45a4e25bfe9f0c9d400506cc67e00b Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 22 Mar 2021 16:58:21 +0100 Subject: [PATCH 032/416] Updates to designer modules --- content/designer/navigation-and-input.md | 22 +++++++++---------- content/designer/wireframes-and-prototypes.md | 6 ++--- 2 files changed, 13 insertions(+), 15 deletions(-) diff --git a/content/designer/navigation-and-input.md b/content/designer/navigation-and-input.md index d2479fb2c..e7077b067 100644 --- a/content/designer/navigation-and-input.md +++ b/content/designer/navigation-and-input.md @@ -15,7 +15,7 @@ footer: >

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: - previous: /curricula/designer-modules/layout-and-structure/ + previous: /curricula/designer-modules/responsive-design/ next: /curricula/designer-modules/instructions-and-feedback/ --- @@ -30,16 +30,14 @@ Courses based on this module should: Students should be able to: -* explain strategies that people with disabilities use to navigate and interact with web pages +* explain strategies that people with disabilities use to navigate and interact with web pages and applications * create designs that allow users to bypass blocks of repeated content * create designs that allow for multiple navigational mechanisms, such as menus, search boxes, breadcrumb trails, tables of contents, and sitemaps -* create designs that allow for mechanisms to stop, adjust, and extend time limits, for example time limits in a form or times for which information is shown -* ensure interactions do not rely solely on multipoint or path-based gestures, such as swipe or pinch +* create designs that allow users to stop, adjust, and extend existing time limits set by the content +* ensure input modalities do not rely solely on multipoint or path-based gestures, such as swipe or pinch * ensure that mechanisms to undo or abort an action carried out with pointer operations are always available * identify related requirements for developers to ensure that navigational mechanisms can be used with the keyboard and other input devices -{% include excol.html type="all" %} - ## Competencies Skills required for this module: @@ -90,9 +88,9 @@ Students should be able to: * a link at the beginning of a block of repeated content to go to the end of the block * links at the top of the page that go to each area of the content * an expandable and collapsible menu to make it easier for users to skip the menu -* create designs that support site maps to provide an overview of the entire site +* create designs that support site maps to provide an overview of the entire website * create designs that support breadcrumb trails to provide information about the user's location in a set of web pages -* create designs that support table of contents to give an overview of the whole site or document and to allow users to go to specific parts of the content +* create designs that support table of contents to give an overview of the whole website or document and to allow users to go to specific parts of the content ### Topic: Enough Time @@ -100,13 +98,15 @@ Students should be able to: Students should be able to: -* create designs that allow users to turn off existing time limits -* create designs that allow users to adjust existing time limits up to at least ten times the original setting -* create designs that support extending existing time limits by warning the user at least twenty seconds before the time limit expires +* create designs that allow users to turn off time limits, for example time limits in a form or times for which information is shown +* create designs that allow users to adjust existing time limits up to at least 10 times the original setting +* create designs that support extending existing time limits by warning the user at least 20 seconds before the time limit expires * ensure content that auto scrolls can be paused and resumed from where it was left to allow users to better read and process content ### Topic: Input Modalities +#### Learning Outcomes for Topic + Students should be able to: * create designs that support alternatives to multi-pointer gestures (such as swipe or pinch) using single pointer activation diff --git a/content/designer/wireframes-and-prototypes.md b/content/designer/wireframes-and-prototypes.md index f2918a385..e6aca3cb6 100644 --- a/content/designer/wireframes-and-prototypes.md +++ b/content/designer/wireframes-and-prototypes.md @@ -46,8 +46,7 @@ Students should be able to: * create designs that allow for adequate contrast ratios between foreground user interface components (such as text, images of text, and controls) and their corresponding background * ensure additional mechanisms apart from color alone are available to convey information, such as text cues, patterns, and icons * create designs that allow for clear and distinguishable focus indicators, for example using borders, background color, and highlighting -* create designs that allow for mechanisms to pause, stop, and hide any moving, blinking, scrolling, and auto-updating content, such as animations and carousels -* create designs that allow for mechanisms to stop or control the volume of audio that plays automatically +* create designs that allow for mechanisms to pause, stop, and hide any moving, blinking, scrolling, auto-updating, and auto-playing content, such as animations, carousels, or auto-playing audio * ensure different page regions and user interface components are placed where users expect them and are distinguishable from one another through different ways, such as through color, typography, patterns, and spacing * provide clear and descriptive heading texts that allow users to identify different sections of the website and parts of the content * identify related requirements for developers to ensure that headings are coded appropriately and are nested according to the hierarchical structure of the page @@ -86,7 +85,7 @@ Students should be able to: * ensure that information conveyed through differences in text color is also conveyed using other visual cues, such as underline, bold, and italics * ensure that information provided using differences in color is also provided using different patterns, shapes, and icons -### Topic: Movement, Timing, and Context +### Topic: Movement and Context #### Learning Outcomes for Topic @@ -96,7 +95,6 @@ Students should be able to: * ensure flashing content is below the general flash and red flash thresholds * create designs that allow to provide content that does not flash more than three times in a second * create designs that allow to disable motion animation triggered by interaction, such as additional animations when scrolling -* create designs that allow to stop, adjust, or extend any time limit set by the content * create designs that support mechanisms to stop or control the volume of any audio that plays automatically for more than 3 seconds * create designs that prevent changes of context unless the user is aware of them or has explicitly requested such changes From d48d3dafe6cccf897b25709eb3a5d7430ab511ad Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 22 Mar 2021 17:05:28 +0100 Subject: [PATCH 033/416] Fixing nav --- _data/navigation.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_data/navigation.yml b/_data/navigation.yml index 14058a1c6..2bea6d05e 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -256,7 +256,7 @@ url: "/curricula/developer-modules/custom-widgets/" - name: Rich Applications url: "/curricula/developer-modules/rich-applications/" - - name: Designer Modules + - name: Designer Modules url: "/curricula/designer-modules/" pages: - name: User Research and Requirements From 1b1c9214c30f9bca688e7bfe66f120f7d6cb911a Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 22 Mar 2021 18:08:45 +0100 Subject: [PATCH 034/416] updates to designer modules --- _data/navigation.yml | 4 ++-- content/designer/information-perception.md | 7 ++++--- content/designer/navigation-and-input.md | 8 ++++---- content/designer/wireframes-and-prototypes.md | 11 ++--------- 4 files changed, 12 insertions(+), 18 deletions(-) diff --git a/_data/navigation.yml b/_data/navigation.yml index 2bea6d05e..6b749311c 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -265,10 +265,10 @@ url: /curricula/designer-modules/wireframes-and-prototypes/ - name: Responsive Design url: /curricula/designer-modules/responsive-design/ - - name: Navigation and Input - url: /curricula/designer-modules/navigation-and-input/ - name: Information Perception url: /curricula/designer-modules/information-perception/ + - name: Navigation and Input + url: /curricula/designer-modules/navigation-and-input/ - name: Instructions and Feedback url: /curricula/designer-modules/instructions-and-feedback/ - name: Labels and Widgets diff --git a/content/designer/information-perception.md b/content/designer/information-perception.md index d2dbe71a9..dd15f16ea 100644 --- a/content/designer/information-perception.md +++ b/content/designer/information-perception.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 5: Information Perception" +title: "[Draft] Module 4: Information Perception" nav_title: "Information Perception" permalink: /curricula/designer-modules/information-perception/ ref: /curricula/designer-modules/information-perception/ @@ -14,9 +14,10 @@ footer: >

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+ previous: /curricula/designer-modules/responsive-design/ navigation: - previous: /curricula/designer-modules/navigation-and-input/ - next: /curricula/designer-modules/instructions-and-feedback/ + Previous: /curricula/designer-modules/responsive-design/ + next: /curricula/designer-modules/navigation-and-input/ --- ## Introduction diff --git a/content/designer/navigation-and-input.md b/content/designer/navigation-and-input.md index e7077b067..6c27eea19 100644 --- a/content/designer/navigation-and-input.md +++ b/content/designer/navigation-and-input.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 4: Navigation and Input" +title: "[Draft] Module 5: Navigation and Input" nav_title: "Navigation and Input" permalink: /curricula/designer-modules/navigation-and-input/ ref: /curricula/designer-modules/navigation-and-input/ @@ -15,7 +15,7 @@ footer: >

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: - previous: /curricula/designer-modules/responsive-design/ + previous: /curricula/designer-modules/information-perception/ next: /curricula/designer-modules/instructions-and-feedback/ --- @@ -30,8 +30,8 @@ Courses based on this module should: Students should be able to: -* explain strategies that people with disabilities use to navigate and interact with web pages and applications -* create designs that allow users to bypass blocks of repeated content +* explain strategies that people with disabilities use to navigate with web pages and applications +* create designs that allow users to bypass blocks of repeated content, such as navigation links, header contents, or advertisements * create designs that allow for multiple navigational mechanisms, such as menus, search boxes, breadcrumb trails, tables of contents, and sitemaps * create designs that allow users to stop, adjust, and extend existing time limits set by the content * ensure input modalities do not rely solely on multipoint or path-based gestures, such as swipe or pinch diff --git a/content/designer/wireframes-and-prototypes.md b/content/designer/wireframes-and-prototypes.md index e6aca3cb6..9d71a3adf 100644 --- a/content/designer/wireframes-and-prototypes.md +++ b/content/designer/wireframes-and-prototypes.md @@ -31,18 +31,11 @@ Courses based on this module should: [To be developed.] -{% comment %} - -* demonstrate how people with disabilities read and understand information in websites and applications based on color properties -* explain how different types of content movement (such as blinking and scrolling) affect the ability of people with disabilities to perceive information - -{% endcomment %} - ## Learning Outcomes for Module Students should be able to: -* explain how people with disabilities identify and distinguish different user interface components based on color, structure, layout, pattern, and spacing +* explain how people with disabilities identify and distinguish user interface components based on different features such as color, structure, layout, pattern, and spacing * create designs that allow for adequate contrast ratios between foreground user interface components (such as text, images of text, and controls) and their corresponding background * ensure additional mechanisms apart from color alone are available to convey information, such as text cues, patterns, and icons * create designs that allow for clear and distinguishable focus indicators, for example using borders, background color, and highlighting @@ -104,7 +97,7 @@ Students should be able to: Students should be able to: -* provide distinctive styles for each of the page regions, heading levels, and user interface components +* provide distinctive styles and descriptive names for each of the page regions, heading levels, and user interface components * ensure positioning of page regions falls under user expectations, such as headers at the top, footers at the bottom, and navigation regions at the top left * ensure heading levels are used to convey the hierarchical structure of the content * identify related requirements for developers to ensure headings are coded appropriately, perceived by assistive technologies, and nested according to the specifications From 007665a4f33602de8d70523418a73578b3d944bd Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 22 Mar 2021 18:14:22 +0100 Subject: [PATCH 035/416] Fixing bottom nav --- content/designer/instructions-and-feedback.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/instructions-and-feedback.md b/content/designer/instructions-and-feedback.md index 29181eebb..2e82aed9c 100644 --- a/content/designer/instructions-and-feedback.md +++ b/content/designer/instructions-and-feedback.md @@ -15,7 +15,7 @@ footer: >

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: - previous: /curricula/designer-modules/informational-design/ + previous: /curricula/designer-modules/navigation-and-input/ next: /curricula/designer-modules/labels-and-widgets/ --- From 57e45ef0c3dd0072f158bdbd820d150375c05722 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 22 Mar 2021 18:19:54 +0100 Subject: [PATCH 036/416] Updates to designer modules --- content/designer/information-perception.md | 1 - content/designer/labels-and-widgets.md | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/content/designer/information-perception.md b/content/designer/information-perception.md index dd15f16ea..432efc68a 100644 --- a/content/designer/information-perception.md +++ b/content/designer/information-perception.md @@ -14,7 +14,6 @@ footer: >

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

- previous: /curricula/designer-modules/responsive-design/ navigation: Previous: /curricula/designer-modules/responsive-design/ next: /curricula/designer-modules/navigation-and-input/ diff --git a/content/designer/labels-and-widgets.md b/content/designer/labels-and-widgets.md index a0305e96b..fcb35690d 100644 --- a/content/designer/labels-and-widgets.md +++ b/content/designer/labels-and-widgets.md @@ -54,7 +54,7 @@ Topics to achieve the learning outcomes: ### Topic: Labels and Names -### Learning outcomes for Topic +#### Learning outcomes for Topic Students should be able to: From e708c4853ae9d4e3c920b9d50d797ff4e0bf50a9 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 23 Mar 2021 14:36:21 +0100 Subject: [PATCH 037/416] updates to designer modules --- ...nd-requirements.md => inclusive-design.md} | 34 +++++++++++++------ ...-and-feedback.md => input-and-feedback.md} | 8 ++--- ...input.md => navigation-and-orientation.md} | 16 ++++----- ...rames-and-prototypes.md => page-layout.md} | 26 ++++---------- ...-widgets.md => widgets-and-interaction.md} | 24 ++++++++++--- 5 files changed, 61 insertions(+), 47 deletions(-) rename content/designer/{user-research-and-requirements.md => inclusive-design.md} (83%) rename content/designer/{instructions-and-feedback.md => input-and-feedback.md} (92%) rename content/designer/{navigation-and-input.md => navigation-and-orientation.md} (92%) rename content/designer/{wireframes-and-prototypes.md => page-layout.md} (78%) rename content/designer/{labels-and-widgets.md => widgets-and-interaction.md} (80%) diff --git a/content/designer/user-research-and-requirements.md b/content/designer/inclusive-design.md similarity index 83% rename from content/designer/user-research-and-requirements.md rename to content/designer/inclusive-design.md index 187bfffad..7468406fe 100644 --- a/content/designer/user-research-and-requirements.md +++ b/content/designer/inclusive-design.md @@ -1,12 +1,12 @@ --- -title: "[Draft] Module 1: User Research and Requirements" -nav_title: "User Research and Requirements" -permalink: /curricula/designer-modules/user-research-and-requirements/ -ref: /curricula/designer-modules/user-research-and-requirements/ +title: "[Draft] Module 1: Inclusive Design" +nav_title: "Inclusive Design" +permalink: /curricula/designer-modules/inclusive-design/ +ref: /curricula/designer-modules/inclusive-design/ lang: en github: repository: w3c/wai-curricula - path: content/designer/user-research-and-requirements.md + path: content/designer/inclusive-design-and-requirements.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ @@ -21,7 +21,7 @@ parent_in_h1: name: "Curricula on Web Accessibility" navigation: previous: /curricula/designer-modules/ - next: /curricula/designer-modules/wireframes-and-prototypes/ + next: /curricula/designer-modules/page-layout/ --- ## Introduction @@ -38,7 +38,7 @@ Students should be able to: * describe how involving users with disabilities early and throughout in the design and development process can lead to better accessibility of websites and applications * explain strategies that people with disabilities use to interact with the Web * ensure applicable accessibility requirements, such as those collected in standards and policies, are researched and included in the overall project requirements -* ensure people with disabilities are included in user research activities, for example in focus groups, use cases, user analysis, personas, scenarios, and usability testing +* ensure people with disabilities are included in user research activities, for example in focus groups, personas, scenarios, and usability testing * ensure that collected user input in user research includes different groups of users with disabilities and various levels of experience using the Web * ensure people with disabilities can provide informed consent, respond to questions, and perform any other activity required by the research process in an accessible way @@ -52,7 +52,7 @@ Skills required for this module: Topics to achieve the learning outcomes: -### Topic: Research +### Topic: User Research #### Learning Outcomes for Topic @@ -65,7 +65,7 @@ Students should be able to: * determine the characteristics of participants in user research activities based on different factors, such as overall project requirements, level of experience, use of assistive technology, and type of disability * ensure people with disabilities are involved early and throughout the research processes, including in focus groups, questionnaires, and surveys -### Topic: Requirements +### Topic: Gathering Requirements #### Learning Outcomes for Topic @@ -74,7 +74,21 @@ Students should be able to: * ensure different types of user requirements that relate to people with disabilities are considered, for example adequate contrast ratios, availability of content and functionality in different screen sizes and configurations, keyboard compatibility, and use with assistive technologies and adaptive strategies * create personas that include people with different types of disabilities and different levels of experience using the Web * create scenarios that include use of the website or application with different types of assistive technologies and adaptive strategies -* ensure adequate location is chosen to conduct the activities depending on the activity goals, assistive technology needs, custom setups, transportation means, accessibility of the facilities, and others + +### Topic: Testing + +#### Learning Outcomes for Topic + +Students should be able to: + +* ensure people with disabilities are involved in all design process where testing is required, for example in testing prototypes and usability testing +* ensure adequate location is chosen to conduct the activities depending on: + * accessibility of the facilities + * assistive technology needs + * custom setups + * activity goals + * accessibility of transportation means + * and others * ensure adequate timings for participants to carry on activities is allocated, for example different time sets for different levels of experience with the assistive technology and different levels of familiarity with the website or application ## Ideas to Assess Knowledge for Module diff --git a/content/designer/instructions-and-feedback.md b/content/designer/input-and-feedback.md similarity index 92% rename from content/designer/instructions-and-feedback.md rename to content/designer/input-and-feedback.md index 2e82aed9c..8a5984394 100644 --- a/content/designer/instructions-and-feedback.md +++ b/content/designer/input-and-feedback.md @@ -1,6 +1,6 @@ --- -title: "[Draft] Module 6: Instructions and Feedback" -nav_title: "Instructions and Feedback" +title: "[Draft] Module 6: Input and Feedback" +nav_title: "Input and Feedback" permalink: /curricula/designer-modules/instructions-and-feedback/ ref: /curricula/designer-modules/instructions-and-feedback/ lang: en @@ -30,7 +30,7 @@ Courses based on this module should: Students should be able to: -* explain how people with disabilities perceive and understand instructions and feedback to interact with components such as forms and widgets +* explain how people with disabilities perceive and understand feedback to interact with components such as forms and widgets * provide overall instructions to help users understand and interact with forms and widgets, such as: * allowed data formats * required and optional input @@ -42,7 +42,7 @@ Students should be able to: * provide suggestions for error correction when the suggestions are known * provide clear warnings about imminent time limits, and ensure mechanisms are available to stop, adjust, and extend time limits * create designs that allow for mechanisms to reverse, check, and confirm submissions in legal or financial transactions -* identify related requirements for developers to ensure that instructions and feedback can be programmatically associated with their corresponding control or component +* identify related requirements for developers to ensure that feedback can be programmatically associated with their corresponding control or component {% include excol.html type="all" %} diff --git a/content/designer/navigation-and-input.md b/content/designer/navigation-and-orientation.md similarity index 92% rename from content/designer/navigation-and-input.md rename to content/designer/navigation-and-orientation.md index 6c27eea19..a72af5c09 100644 --- a/content/designer/navigation-and-input.md +++ b/content/designer/navigation-and-orientation.md @@ -1,12 +1,12 @@ --- -title: "[Draft] Module 5: Navigation and Input" -nav_title: "Navigation and Input" -permalink: /curricula/designer-modules/navigation-and-input/ -ref: /curricula/designer-modules/navigation-and-input/ +title: "[Draft] Module 5: Navigation and Orientation" +nav_title: "Navigation and Orientation" +permalink: /curricula/designer-modules/navigation-and-orientation/ +ref: /curricula/designer-modules/navigation-and-orientation/ lang: en github: repository: w3c/wai-curricula - path: content/designer/navigation-and-input.md + path: content/designer/navigation-and-orientation.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ @@ -15,8 +15,8 @@ footer: >

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: - previous: /curricula/designer-modules/information-perception/ - next: /curricula/designer-modules/instructions-and-feedback/ + previous: /curricula/designer-modules/page-layout/ + next: /curricula/designer-modules/images/ --- ## Introduction @@ -30,7 +30,7 @@ Courses based on this module should: Students should be able to: -* explain strategies that people with disabilities use to navigate with web pages and applications +* explain strategies that people with disabilities use to navigate and orientate themselves in web pages and applications * create designs that allow users to bypass blocks of repeated content, such as navigation links, header contents, or advertisements * create designs that allow for multiple navigational mechanisms, such as menus, search boxes, breadcrumb trails, tables of contents, and sitemaps * create designs that allow users to stop, adjust, and extend existing time limits set by the content diff --git a/content/designer/wireframes-and-prototypes.md b/content/designer/page-layout.md similarity index 78% rename from content/designer/wireframes-and-prototypes.md rename to content/designer/page-layout.md index 9d71a3adf..d4f4b2ace 100644 --- a/content/designer/wireframes-and-prototypes.md +++ b/content/designer/page-layout.md @@ -1,12 +1,12 @@ --- -title: "[Draft] Module 2: Wireframes and Prototypes" -nav_title: "Wireframes and Prototypes" -permalink: /curricula/designer-modules/wireframes-and-prototypes/ -ref: /curricula/designer-modules/wireframes-and-prototypes/ +title: "[Draft] Module 2: Page Layout" +nav_title: "Page Layout" +permalink: /curricula/designer-modules/page-layout/ +ref: /curricula/designer-modules/page-layout/ lang: en github: repository: w3c/wai-curricula - path: content/designer/wireframes-and-prototypes.md + path: content/designer/page-layout.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ @@ -20,7 +20,7 @@ parent_in_h1: - ref: /curricula/ name: "Curricula on Web Accessibility" navigation: - previous: /curricula/designer-modules/user-research-and-requirements/ + previous: /curricula/designer-modules/inclusive-design/ next: /curricula/designer-modules/responsive-design/ --- @@ -39,7 +39,6 @@ Students should be able to: * create designs that allow for adequate contrast ratios between foreground user interface components (such as text, images of text, and controls) and their corresponding background * ensure additional mechanisms apart from color alone are available to convey information, such as text cues, patterns, and icons * create designs that allow for clear and distinguishable focus indicators, for example using borders, background color, and highlighting -* create designs that allow for mechanisms to pause, stop, and hide any moving, blinking, scrolling, auto-updating, and auto-playing content, such as animations, carousels, or auto-playing audio * ensure different page regions and user interface components are placed where users expect them and are distinguishable from one another through different ways, such as through color, typography, patterns, and spacing * provide clear and descriptive heading texts that allow users to identify different sections of the website and parts of the content * identify related requirements for developers to ensure that headings are coded appropriately and are nested according to the hierarchical structure of the page @@ -78,19 +77,6 @@ Students should be able to: * ensure that information conveyed through differences in text color is also conveyed using other visual cues, such as underline, bold, and italics * ensure that information provided using differences in color is also provided using different patterns, shapes, and icons -### Topic: Movement and Context - -#### Learning Outcomes for Topic - -Students should be able to: - -* create designs that allow to pause, stop, or hide any content that blinks, moves, or auto-updates -* ensure flashing content is below the general flash and red flash thresholds -* create designs that allow to provide content that does not flash more than three times in a second -* create designs that allow to disable motion animation triggered by interaction, such as additional animations when scrolling -* create designs that support mechanisms to stop or control the volume of any audio that plays automatically for more than 3 seconds -* create designs that prevent changes of context unless the user is aware of them or has explicitly requested such changes - ### Topic: Structure and Layout #### Learning Outcomes for Topic diff --git a/content/designer/labels-and-widgets.md b/content/designer/widgets-and-interaction.md similarity index 80% rename from content/designer/labels-and-widgets.md rename to content/designer/widgets-and-interaction.md index fcb35690d..5dcb8bc15 100644 --- a/content/designer/labels-and-widgets.md +++ b/content/designer/widgets-and-interaction.md @@ -1,12 +1,12 @@ --- -title: "[Draft] Module 7: Labels and Widgets" -nav_title: "Labels and Widgets" -permalink: /curricula/designer-modules/labels-and-widgets/ -ref: /curricula/designer-modules/labels-and-widgets/ +title: "[Draft] Module 7: Widgets and Interaction" +nav_title: "Widgets and Interaction" +permalink: /curricula/designer-modules/widgets-and-interaction/ +ref: /curricula/designer-modules/widgets-and-interaction/ lang: en github: repository: w3c/wai-curricula - path: content/designer/labels-and-widgets.md + path: content/designer/widgets-and-interaction.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ @@ -33,6 +33,7 @@ Students should be able to: * provide clear and distinguishable names that allow to identify different types of user interface components * ensure that custom widgets have appropriate labels that describe their purpose * ensure that meaningful sequence and clear focus indicators for custom widgets are provided through the widget's lifetime +* create designs that allow for mechanisms to pause, stop, and hide any moving, blinking, scrolling, auto-updating, and auto-playing content, such as animations, carousels, or auto-playing audio * create designs for custom widgets that support operation using the keyboard * define custom interaction patterns, such as where to place focus when a dialog is open or closed, and what the focus management should be within those dialogs * define mechanisms that allow users to obtain information about custom interaction patterns, such as specific keyboard shortcuts for applications and expected behavior of custom widgets @@ -77,6 +78,19 @@ Students should be able to: * create designs that allow provision of keyboard shortcuts that avoid conflicts with the operating system, browser, and assistive technologies keyboard shortcuts * create designs that allow for consistent focus indicators through the whole widget or application lifetime +### Topic: Movement and Context + +#### Learning Outcomes for Topic + +Students should be able to: + +* create designs that allow to pause, stop, or hide any content that blinks, moves, or auto-updates +* ensure flashing content is below the general flash and red flash thresholds +* create designs that allow to provide content that does not flash more than three times in a second +* create designs that allow to disable motion animation triggered by interaction, such as additional animations when scrolling +* create designs that support mechanisms to stop or control the volume of any audio that plays automatically for more than 3 seconds +* create designs that prevent changes of context unless the user is aware of them or has explicitly requested such changes + ### Topic: Notifications #### Learning Outcomes for Topic From 6fced924d38fe9f0fc3128b8ab409f0e4ab98959 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 23 Mar 2021 18:38:49 +0100 Subject: [PATCH 038/416] Updates to designer modules --- _data/navigation.yml | 26 ++-- content/designer/images.md | 75 ++++++++++ content/designer/information-perception.md | 130 ------------------ content/designer/input-and-feedback.md | 4 +- content/designer/multimedia-and-animations.md | 88 ++++++++++++ .../designer/navigation-and-orientation.md | 2 +- content/designer/page-layout.md | 2 +- content/designer/responsive-design.md | 6 +- content/designer/widgets-and-interaction.md | 14 -- 9 files changed, 184 insertions(+), 163 deletions(-) create mode 100644 content/designer/images.md delete mode 100644 content/designer/information-perception.md create mode 100644 content/designer/multimedia-and-animations.md diff --git a/_data/navigation.yml b/_data/navigation.yml index 6b749311c..356c31669 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -259,20 +259,22 @@ - name: Designer Modules url: "/curricula/designer-modules/" pages: - - name: User Research and Requirements - url: /curricula/designer-modules/user-research-and-requirements/ - - name: Wireframes and Prototypes - url: /curricula/designer-modules/wireframes-and-prototypes/ + - name: Inclusive Design + url: /curricula/designer-modules/inclusuive-design/ + - name: Page Layout + url: /curricula/designer-modules/page-layout/ + - name: Navigation and Orientation + url: /curricula/designer-modules/navigation-and-orientation/ + - name: "Images" + url: /curricula/designer-modules/images/ + - name: "Multimedia and Animations" + url: /curricula/designer-modules/multimedia-and-animations/ - name: Responsive Design + url: /curricula/input-and-feedback/ + - name: "Input and Feedback" url: /curricula/designer-modules/responsive-design/ - - name: Information Perception - url: /curricula/designer-modules/information-perception/ - - name: Navigation and Input - url: /curricula/designer-modules/navigation-and-input/ - - name: Instructions and Feedback - url: /curricula/designer-modules/instructions-and-feedback/ - - name: Labels and Widgets - url: /curricula/designer-modules/labels-and-widgets/ + - name: Widgets and Interaction + url: /curricula/designerr-modules/widgets-and-interaction - name: Changelog url: "/curricula/changelog/" hide: true diff --git a/content/designer/images.md b/content/designer/images.md new file mode 100644 index 000000000..b0a93bce4 --- /dev/null +++ b/content/designer/images.md @@ -0,0 +1,75 @@ +--- +title: "[Draft] Module 4: Images" +nav_title: "Images" +permalink: /curricula/designer-modules/images/ +ref: /curricula/designer-modules/images/ +lang: en +github: + repository: w3c/wai-curricula + path: content/designer/images.md +license: creative-commons +acknowledgements: /curricula/acknowledgements/ +changelog: /curricula/changelog/ +footer: > +

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

+

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

+

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+navigation: + previous: /curricula/designer-modules/navigation-and-orientation/ + next: /curricula/designer-modules/multimedia-and-animations/ +--- + +## Introduction + +Courses based on this module should: + +[To be developed.] + +## Learning Outcomes for Module + +Students should be able to: + +* identify and describe different types of images from an accessibility perspective, such as informative, textual, decorative, functional, and complex images +* provide appropriate text alternatives for images included in the design phase, such as logos or graphical components +* provide text that allows users to identify graphical interactive elements such as links or menu items +* describe alternative ways to convey information presented in text, such as using graphics, color, or shapes +* create designs that allow to provide accurate descriptions for components such as charts or infographics +* identify related requirements for developers to ensure alternatives and descriptions are programmatically associated to their corresponding component + +## Competencies + +Skills required for this module: + +[To be developed] + +## Topics to Teach + +Topics to achieve the learning outcomes: + +### Topic: Image Types + +#### Learning Outcomes for Topic + +Students should be able to: + +* define the following types of images from an accessibility perspective: + * informative + * textual + * decorative + * functional + * complex +* create designs that support use of text when the information presented is intended to be read as text, instead of using images of text + +### Topic: Text Alternatives + +#### Learning Outcomes for Topic + +Students should be able to: + +* provide names for controls and components that accept user input, for example search, print, and save buttons +* provide descriptive textual information for the following types of graphical information: + * those that are part of tests or exercises that would be invalid if presented in text + * those that are primarily intended to create a specific sensory experience +* provide text alternatives that identify and describe the purpose of graphical elements that are used to confirm that content is accessed by a person rather than a computer, such as captcha +* provide several modalities of captcha that rely on different sensory characteristics, such as visual or auditory + diff --git a/content/designer/information-perception.md b/content/designer/information-perception.md deleted file mode 100644 index 432efc68a..000000000 --- a/content/designer/information-perception.md +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: "[Draft] Module 4: Information Perception" -nav_title: "Information Perception" -permalink: /curricula/designer-modules/information-perception/ -ref: /curricula/designer-modules/information-perception/ -lang: en -github: - repository: w3c/wai-curricula - path: content/designer/information-perception.md -license: creative-commons -acknowledgements: /curricula/acknowledgements/ -changelog: /curricula/changelog/ -footer: > -

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

-

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

-

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

-navigation: - Previous: /curricula/designer-modules/responsive-design/ - next: /curricula/designer-modules/navigation-and-input/ ---- - -## Introduction -{:.no-display} - -Courses based on this module should: - -[To be developed] - -## Learning Outcomes for Module - -Students should be able to: - -* explain how people with disabilities rely on different means, structures, and techniques for perceiving information, such as textual, graphical, tabular, audio, or video information -* identify and describe different uses of text, such as for labels, static content, or dynamic messages -* describe alternative ways to convey information presented in text, such as using graphics, color, or shapes -* identify and describe different types of images from an accessibility perspective, such as informative, textual, decorative, functional, and complex images -* identify and describe different types of tables from an accessibility perspective, such as layout, simple, and complex tables -* identify different types of audio or video content and relate each of them to the user needs of people with disabilities -* provide appropriate text alternatives for images included in the design phase, such as logos or graphical components -* provide text that allows users to identify graphical interactive elements such as links or menu items -* create designs that allow to provide accurate descriptions for components such as complex tables, charts, or infographics -* create designs that allow to provide alternatives to multimedia content, such as transcripts for audio and audio described content, -* identify related requirements for developers to ensure that table header cells are programmatically associated to their corresponding data cells -* identify related requirements for developers to ensure alternatives and descriptions are programmatically associated to their corresponding component - -{% include excol.html type="all" %} - -## Competencies - -Skills required for this module: - -[To be developed] - -## Topics to Teach - -Topics to achieve the learning outcomes: - -### Topic: Textual Information - -#### Learning Outcomes for Topic - -Students should be able to: - -* create designs that support additional ways to convey information presented in text, such as required form fields, using icons, shapes, and colors -* create designs that support mechanisms to identify specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon -* create designs that support mechanisms to identify the expanded form or meaning of acronyms and abbreviations -* create designs that support alternatives to text that require reading ability more advanced than the lower secondary education level -* describe related requirements for developers to make language of page and language of parts programmatically determined -* describe related requirements for content authors to provide texts that do not require reading ability more advanced than the lower secondary education level - -### Topic: Graphical Information - -#### Learning Outcomes for Topic - -Students should be able to: - -* define the following types of images from an accessibility perspective: - * informative - * textual - * decorative - * functional - * complex -* create designs that support use of text when the information presented is intended to be read as text, instead of using images of text -* provide names for controls and components that accept user input -* provide descriptive textual information for the following types of graphical information: - * those that are part of tests or exercises that would be invalid if presented in text - * those that are primarily intended to create a specific sensory experience -* provide text alternatives that identify and describe the purpose of graphical elements that are used to confirm that content is accessed by a person rather than a computer, such as captcha -* provide several modalities of captcha that rely on different sensory characteristics, such as visual or auditory - -### Topic: Tabular Information - -#### Learning Outcomes for Topic - -Students should be able to: - -* define the following types of tables from an accessibility perspective - * simple - * complex - * layout -* create designs that allow presentation of tables in multiple ways, such as using several lists, or splitting a single table into several simpler ones -* create designs that allow to establish a relationship between the table cells both visually and programmatically, included for headers and data cells -* create designs that support the inclusion of table descriptions -* describe related requirements for developers to ensure that table header and data cells are programmatically associated - -### Topic: Multimedia Content - -#### Learning Outcomes for Topic - -Students should be able to - -* identify the different types of multimedia content, such as audio and video, and relate them to their corresponding sensory characteristic -* identify the different types of time-based multimedia content, such as pre-recorded and live audio and video -* identify and describe different types of synchronized media, for example a dialog in a movie -* create designs that allow to provide text alternatives for prerecorded audio-only content that presents equivalent information -* create designs that allow to provide either a text alternative or an audio track for a prerecorded video-only content that presents equivalent information -* create designs that allow to provide captions and audio descriptions for any prerecorded and live audio content in synchronized media -* create designs that allow to provide sign language interpretation for all prerecorded audio content in synchronized media - -## Ideas to Assess Knowledge for Module - -Optional ideas to support assessment: - -[To be developed] - -## Teaching Resources - -Suggested resources to support your teaching: - -[To be developed] diff --git a/content/designer/input-and-feedback.md b/content/designer/input-and-feedback.md index 8a5984394..972eb44d2 100644 --- a/content/designer/input-and-feedback.md +++ b/content/designer/input-and-feedback.md @@ -1,12 +1,12 @@ --- -title: "[Draft] Module 6: Input and Feedback" +title: "[Draft] Module 7: Input and Feedback" nav_title: "Input and Feedback" permalink: /curricula/designer-modules/instructions-and-feedback/ ref: /curricula/designer-modules/instructions-and-feedback/ lang: en github: repository: w3c/wai-curricula - path: content/designer/instructions-and-feedback.md + path: content/designer/input-and-feedback.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md new file mode 100644 index 000000000..9bbbea5de --- /dev/null +++ b/content/designer/multimedia-and-animations.md @@ -0,0 +1,88 @@ +--- +title: "[Draft] Module 5: Multimedia and Animations" +nav_title: "Multimedia and Animations" +permalink: /curricula/designer-modules/multimedia-and-animations/ +ref: /curricula/designer-modules/multimedia-and-animations/ +lang: en +github: + repository: w3c/wai-curricula + path: content/designer/multimedia-and-animations.md +license: creative-commons +acknowledgements: /curricula/acknowledgements/ +changelog: /curricula/changelog/ +footer: > +

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

+

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

+

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+navigation: + previous: /curricula/designer-modules/images/ + next: /curricula/designer-modules/responsive-design/ +--- + +## Introduction +{:.no-display} + +Courses based on this module should: + +[To be developed] + +## Learning Outcomes for Module + +Students should be able to: + +* identify different types of audio or video content and relate each of them to the user needs of people with disabilities +* create designs that allow to provide alternatives to multimedia content, such as transcripts for audio and audio described content, +* create designs that allow for mechanisms to pause, stop, and hide any moving, blinking, scrolling, auto-updating, and auto-playing content, such as animations, carousels, or auto-playing audio +* identify different types of audio or video content and relate each of them to the user needs of people with disabilities +* create designs that allow to provide alternatives to multimedia content, such as transcripts for audio and audio described content, + +{% include excol.html type="all" %} + +## Competencies + +Skills required for this module: + +[To be developed] + +## Topics to Teach + +Topics to achieve the learning outcomes: + +### Topic: Captions and Audio Descriptions + +#### Learning Outcomes for Topic + +Students should be able to + +* identify the different types of multimedia content, such as audio and video, and relate them to their corresponding sensory characteristic +* identify the different types of time-based multimedia content, such as pre-recorded and live audio and video +* identify and describe different types of synchronized media, for example a dialog in a movie +* create designs that allow to provide text alternatives for prerecorded audio-only content that presents equivalent information +* create designs that allow to provide either a text alternative or an audio track for a prerecorded video-only content that presents equivalent information +* create designs that allow to provide captions and audio descriptions for any prerecorded and live audio content in synchronized media +* create designs that allow to provide sign language interpretation for all prerecorded audio content in synchronized media + +### Topic: Animations + +#### Learning Outcomes for Topic + +Students should be able to: + +* create designs that allow to pause, stop, or hide any content that blinks, moves, or auto-updates +* ensure flashing content is below the general flash and red flash thresholds +* create designs that allow to provide content that does not flash more than three times in a second +* create designs that allow to disable motion animation triggered by interaction, such as additional animations when scrolling +* create designs that support mechanisms to stop or control the volume of any audio that plays automatically for more than 3 seconds +* create designs that prevent changes of context unless the user is aware of them or has explicitly requested such changes + +## Ideas to Assess Knowledge for Module + +Optional ideas to support assessment: + +[To be developed] + +## Teaching Resources + +Suggested resources to support your teaching: + +[To be developed] diff --git a/content/designer/navigation-and-orientation.md b/content/designer/navigation-and-orientation.md index a72af5c09..071f4a93c 100644 --- a/content/designer/navigation-and-orientation.md +++ b/content/designer/navigation-and-orientation.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 5: Navigation and Orientation" +title: "[Draft] Module 3: Navigation and Orientation" nav_title: "Navigation and Orientation" permalink: /curricula/designer-modules/navigation-and-orientation/ ref: /curricula/designer-modules/navigation-and-orientation/ diff --git a/content/designer/page-layout.md b/content/designer/page-layout.md index d4f4b2ace..ae6ea16ca 100644 --- a/content/designer/page-layout.md +++ b/content/designer/page-layout.md @@ -21,7 +21,7 @@ parent_in_h1: name: "Curricula on Web Accessibility" navigation: previous: /curricula/designer-modules/inclusive-design/ - next: /curricula/designer-modules/responsive-design/ + next: /curricula/designer-modules/navigation-and-orientation/ --- ## Introduction diff --git a/content/designer/responsive-design.md b/content/designer/responsive-design.md index 747e2c752..ca770f46e 100644 --- a/content/designer/responsive-design.md +++ b/content/designer/responsive-design.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 3: Responsive Design" +title: "[Draft] Module 6: Responsive Design" nav_title: "Responsive Design" permalink: /curricula/designer-modules/responsive-design/ ref: /curricula/designer-modules/responsive-design/ @@ -20,8 +20,8 @@ parent_in_h1: - ref: /curricula/ name: "Curricula on Web Accessibility" navigation: - previous: /curricula/designer-modules/wireframes-and-prototypes/ - next: /curricula/designer-modules/navigation-and-input/ + previous: /curricula/designer-modules/multimedia-and-animations/ + next: /curricula/designer-modules/widgets-interaction-and-feedback/ --- ## Introduction diff --git a/content/designer/widgets-and-interaction.md b/content/designer/widgets-and-interaction.md index 5dcb8bc15..722a42ed5 100644 --- a/content/designer/widgets-and-interaction.md +++ b/content/designer/widgets-and-interaction.md @@ -33,7 +33,6 @@ Students should be able to: * provide clear and distinguishable names that allow to identify different types of user interface components * ensure that custom widgets have appropriate labels that describe their purpose * ensure that meaningful sequence and clear focus indicators for custom widgets are provided through the widget's lifetime -* create designs that allow for mechanisms to pause, stop, and hide any moving, blinking, scrolling, auto-updating, and auto-playing content, such as animations, carousels, or auto-playing audio * create designs for custom widgets that support operation using the keyboard * define custom interaction patterns, such as where to place focus when a dialog is open or closed, and what the focus management should be within those dialogs * define mechanisms that allow users to obtain information about custom interaction patterns, such as specific keyboard shortcuts for applications and expected behavior of custom widgets @@ -78,19 +77,6 @@ Students should be able to: * create designs that allow provision of keyboard shortcuts that avoid conflicts with the operating system, browser, and assistive technologies keyboard shortcuts * create designs that allow for consistent focus indicators through the whole widget or application lifetime -### Topic: Movement and Context - -#### Learning Outcomes for Topic - -Students should be able to: - -* create designs that allow to pause, stop, or hide any content that blinks, moves, or auto-updates -* ensure flashing content is below the general flash and red flash thresholds -* create designs that allow to provide content that does not flash more than three times in a second -* create designs that allow to disable motion animation triggered by interaction, such as additional animations when scrolling -* create designs that support mechanisms to stop or control the volume of any audio that plays automatically for more than 3 seconds -* create designs that prevent changes of context unless the user is aware of them or has explicitly requested such changes - ### Topic: Notifications #### Learning Outcomes for Topic From 0314f1a250ae3af244a1cb475ab73c2c3c6c11e8 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 24 Mar 2021 12:58:46 +0100 Subject: [PATCH 039/416] Updates to designer modules --- content/designer/inclusive-design.md | 5 +- content/designer/input-and-feedback.md | 111 ---------------- content/designer/interaction-and-feedback.md | 126 +++++++++++++++++++ content/designer/widgets-and-interaction.md | 99 --------------- 4 files changed, 128 insertions(+), 213 deletions(-) delete mode 100644 content/designer/input-and-feedback.md create mode 100644 content/designer/interaction-and-feedback.md delete mode 100644 content/designer/widgets-and-interaction.md diff --git a/content/designer/inclusive-design.md b/content/designer/inclusive-design.md index 7468406fe..d23fa790f 100644 --- a/content/designer/inclusive-design.md +++ b/content/designer/inclusive-design.md @@ -81,14 +81,13 @@ Students should be able to: Students should be able to: -* ensure people with disabilities are involved in all design process where testing is required, for example in testing prototypes and usability testing -* ensure adequate location is chosen to conduct the activities depending on: +* ensure people with disabilities are involved in all design process where testing is required, for example in testing prototypes, iterative testing phases, and usability testing +* ensure adequate location is chosen to conduct the activities, for example depending on: * accessibility of the facilities * assistive technology needs * custom setups * activity goals * accessibility of transportation means - * and others * ensure adequate timings for participants to carry on activities is allocated, for example different time sets for different levels of experience with the assistive technology and different levels of familiarity with the website or application ## Ideas to Assess Knowledge for Module diff --git a/content/designer/input-and-feedback.md b/content/designer/input-and-feedback.md deleted file mode 100644 index 972eb44d2..000000000 --- a/content/designer/input-and-feedback.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: "[Draft] Module 7: Input and Feedback" -nav_title: "Input and Feedback" -permalink: /curricula/designer-modules/instructions-and-feedback/ -ref: /curricula/designer-modules/instructions-and-feedback/ -lang: en -github: - repository: w3c/wai-curricula - path: content/designer/input-and-feedback.md -license: creative-commons -acknowledgements: /curricula/acknowledgements/ -changelog: /curricula/changelog/ -footer: > -

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

-

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

-

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

-navigation: - previous: /curricula/designer-modules/navigation-and-input/ - next: /curricula/designer-modules/labels-and-widgets/ ---- - -## Introduction -{:.no-display} - -Courses based on this module should: - -[To be developed] - -## Learning Outcomes for Module - -Students should be able to: - -* explain how people with disabilities perceive and understand feedback to interact with components such as forms and widgets -* provide overall instructions to help users understand and interact with forms and widgets, such as: - * allowed data formats - * required and optional input - * explanations of what will happen when a change in a control results in a change of context - * ways to stop and resume sessions -* provide clear instructions about the current and total number of steps and about existing time limits in a form -* provide meaningful and descriptive notification messages about imminent time limits, errors, successes, or any other event resulting from user input -* ensure that notification messages are easy to understand and can be distinguished from any other component -* provide suggestions for error correction when the suggestions are known -* provide clear warnings about imminent time limits, and ensure mechanisms are available to stop, adjust, and extend time limits -* create designs that allow for mechanisms to reverse, check, and confirm submissions in legal or financial transactions -* identify related requirements for developers to ensure that feedback can be programmatically associated with their corresponding control or component - -{% include excol.html type="all" %} - -## Competencies - -Skills required for this module: - -[To be developed] - -## Topics to Teach - -Topics to achieve the learning outcomes: - -### Topic: Overall Instructions - -#### Learning Outcomes for Topic - -Students should be able to: - -* provide overall instructions to help users understand the purpose and intent of interactive user interface components, such as form fields -* provide instructions about which input fields are required by: - * including information about each of the required form fields before the form control - * including text, icons, and color in the label of each of the required form fields that indicates that they are required -* provide clear instructions of changes in context that happen when there is a change on a control before the control, for example when launching a new window when the user checks a check box or selects a list item -* provide overall instructions about existing time limits in a form and about how they can be turned off, adjusted, or extended -* provide clear instructions about the current step and about the total number of steps involved in a multi-step form - -### Topic: Feedback and Notifications - -#### Learning Outcomes for Topic - -Students should be able to: - -* ensure notification messages are easy to understand and can be distinguished from any other user component -* provide textual information about errors, successes, or any other event resulting from user input -* create designs that allow to associate notification messages, errors, and warnings to the component that generated such messages -* describe related requirements for developers to ensure that notification messages are associated to their corresponding user interface component and can be rendered by assistive technologies - -### Topic: Help and Error Prevention - -#### Learning Outcomes for Topic - -Students should be able to: - -* create designs that support identification of form fields with automatically detected errors -* create designs that support textual descriptions of errors that can be automatically identified -* provide labels and instructions about how data should be entered, such as date formats and specific ways to introduce identification and phone numbers -* create designs that support provision of suggestions for input errors that are automatically detected when these suggestions are known -* create designs that support reversing, checking, and confirming data entered by the user at least for the following types of information - * financial - * legal - * modifications and deletions of user-controllable data collected in data storage systems - * submissions of user test responses -* create designs that support context help methods for form fields, such as a "help" link next to the form - -## Ideas to Assess Knowledge for Module - -Optional ideas to support assessment: - -[To be developed] - -## Teaching Resources - -Suggested resources to support your teaching: - -[To be developed] diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md new file mode 100644 index 000000000..5c52c8e7f --- /dev/null +++ b/content/designer/interaction-and-feedback.md @@ -0,0 +1,126 @@ +--- +title: "[Draft] Module 7: Interaction and Feedback" +nav_title: "Interaction and Feedback" +permalink: /curricula/designer-modules/interaction-and-feedback/ +ref: /curricula/designer-modules/interaction-and-feedback/ +lang: en +github: + repository: w3c/wai-curricula + path: content/designer/interaction-and-feedback.md +license: creative-commons +acknowledgements: /curricula/acknowledgements/ +changelog: /curricula/changelog/ +footer: > +

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

+

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

+

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+navigation: + previous: /curricula/designer-modules/responsive-design/ +--- + +## Introduction +{:.no-display} + +Courses based on this module should: + +[To be developed] + +## Learning Outcomes for Module + +Students should be able to: + +* explain strategies that people with disabilities use to identify, operate, and interact with user interface components, such as forms and custom widgets +* provide clear and distinguishable names and instructions that allow to identify user interface components, such as form fields and custom widgets +* provide meaningful and descriptive notification messages about imminent time limits, errors, suggestions for corrections, successes, or any other event resulting from user input +* ensure that meaningful sequence and clear focus indicators for user interface components are provided +* ensure all interactive user interface components can be operated using the keyboard +* define custom interaction patterns, such as where to place focus when a dialog is open and closed, and what the focus order should be within those dialogs +* define mechanisms that allow users to obtain information about custom interaction patterns, such as specific keyboard shortcuts for applications and expected behavior of custom widgets +* identify related requirements for developers to create designs using native HTML elements to the extent possible and describe their benefits in relation to non-native elements +* identify related requirements for developers to ensure that properties of custom user interrface components, such as names, states, and instructions are perceived visually and can be programmaticaly determined +* identify related requirements for developers to write code for specific keyboard interactions that custom widgets may require + +{% include excol.html type="all" %} + +## Competencies + +Skills required for this module: + +[To be developed] + +## Topics to Teach + +Topics to achieve the learning outcomes: + +### Topic: Labels and Instructions + +#### Learning outcomes for Topic + +Students should be able to: + +* provide overall labels and instructions to help users understand the purpose and intent of interactive user interface components, such as form fields and custom widgets +* create designs that allow to position labels where users expect them, for example + * labels for form fields to the left of the field or above in left-to-right languages, or to the right of the field or above it in right-to-left languages + * labels for radio buttons or checkboxes to the right of the field or below it in left-to-right languages or to the left of the field or below it in right-to-left languages +* provide instructions about which input fields are required by: + * including information about each of the required form fields before the form control + * including text, icons, and color in the label of each of the required form fields that indicates that they are required +* provide clear instructions about changes in context that happen when there is a change on a control before the control, for example when launching a new window when the user checks a check box or selects a list item +* provide overall instructions about existing time limits in a form and about how they can be turned off, adjusted, or extended +* provide clear instructions about the current step and about the total number of steps involved in a multi-step form +* identify related requirements for developers to ensure that labels and instructions are programmatically associated to their corresponding user interface component + +### Topic: Feedback and Notifications + +#### Learning Outcomes for Topic + +Students should be able to: + +* ensure notification messages are easy to understand and can be distinguished from any other user interface component +* provide textual information about errors, successes, or any other event resulting from user input +* create designs that allow to switch notifications on or off to allow notifications processing at the users pace +* identify different types of notifications based on their priority, relevance, and relation to specific parts of the application or to the application as a whole +* create designs that support mechanisms to queue and prioritize application notifications coming from different user interface components and custom widgets +* describe related requirements for developers to ensure that notification messages are associated to their corresponding user interface component and can be rendered by assistive technologies + +### Topic: Help and Error Prevention + +#### Learning Outcomes for Topic + +Students should be able to: + +* create designs that support identification of form fields with automatically detected errors +* create designs that support textual descriptions of errors that can be automatically identified +* provide labels and instructions about how data should be entered, such as date formats and specific ways to introduce identification and phone numbers +* create designs that support provision of suggestions for input errors that are automatically detected when these suggestions are known +* create designs that support reversing, checking, and confirming data entered by the user at least for the following types of information + * financial + * legal + * modifications and deletions of user-controllable data collected in data storage systems + * submissions of user test responses +* create designs that support context help methods for form fields, such as a "help" link next to the form + +### Topic: Keyboard Input + +#### Learning Outcomes for Topic + +Students should be able to: + +* provide designs that support operation with the keyboard +* describe related requirements for developers to ensure every user interface component can be entered, operated, and exited using the keyboard only +* identify situations when it may be necessary to provide additional keyboard shortcuts, for example when designing a custom functionality +* create designs that allow provision of keyboard shortcuts that avoid conflicts with the operating system, browser, and assistive technologies keyboard shortcuts +* create designs that allow for consistent focus indicators through the whole widget or application lifetime + +## Ideas to Assess Knowledge for Module + +Optional ideas to support assessment: + +[To be developed] + +## Teaching Resources + +Suggested resources to support your teaching: + +[To be developed] + diff --git a/content/designer/widgets-and-interaction.md b/content/designer/widgets-and-interaction.md deleted file mode 100644 index 722a42ed5..000000000 --- a/content/designer/widgets-and-interaction.md +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: "[Draft] Module 7: Widgets and Interaction" -nav_title: "Widgets and Interaction" -permalink: /curricula/designer-modules/widgets-and-interaction/ -ref: /curricula/designer-modules/widgets-and-interaction/ -lang: en -github: - repository: w3c/wai-curricula - path: content/designer/widgets-and-interaction.md -license: creative-commons -acknowledgements: /curricula/acknowledgements/ -changelog: /curricula/changelog/ -footer: > -

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

-

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

-

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

-navigation: - previous: /curricula/designer-modules/instructions-and-feedback/ ---- - -## Introduction -{:.no-display} - -Courses based on this module should: - -[To be developed] - -## Learning Outcomes for Module - -Students should be able to: - -* explain strategies that people with disabilities use to identify, operate, and interact with widgets -* provide clear and distinguishable names that allow to identify different types of user interface components -* ensure that custom widgets have appropriate labels that describe their purpose -* ensure that meaningful sequence and clear focus indicators for custom widgets are provided through the widget's lifetime -* create designs for custom widgets that support operation using the keyboard -* define custom interaction patterns, such as where to place focus when a dialog is open or closed, and what the focus management should be within those dialogs -* define mechanisms that allow users to obtain information about custom interaction patterns, such as specific keyboard shortcuts for applications and expected behavior of custom widgets -* identify related requirements for developers to create designs using native HTML elements to the extent possible and describe their benefits in relation to non-native elements -* identify related requirements for developers to ensure that states and properties of custom widgets, such as expanded, collapsed, visible, or hidden, are distinguishable both visually and programmatically -* identify related requirements for developers to write code for specific keyboard interactions that custom widgets may require - -{% include excol.html type="all" %} - -## Competencies - -Skills required for this module: - -[To be developed] - -## Topics to Teach - -Topics to achieve the learning outcomes: - -### Topic: Labels and Names - -#### Learning outcomes for Topic - -Students should be able to: - -* provide clear and distinguishable names that allow to identify sections of the content, such as different product categories or different parts of the content -* provide clear and distinguishable names that allow to create labels for different user interface components, such as buttons, edit fields, or dropdown lists -* create designs that allow to position labels where users expect them, for example - * labels for form fields to the left of the field or above in left-to-right languages, or to the right of the field or above it in right-to-left languages - * labels for radio buttons or checkboxes to the right of the field or below it in left-to-right languages or to the left of the field or below it in right-to-left languages -* identify related requirements for developers to ensure that labels are programmatically associated to their corresponding user interface component - -### Topic: Keyboard Input - -#### Learning Outcomes for Topic - -Students should be able to: - -* provide designs that support operation with the keyboard -* describe related requirements for developers to ensure every user interface component can be entered, operated, and exited using the keyboard only -* identify situations when it may be necessary to provide additional keyboard shortcuts, for example when designing a custom functionality -* create designs that allow provision of keyboard shortcuts that avoid conflicts with the operating system, browser, and assistive technologies keyboard shortcuts -* create designs that allow for consistent focus indicators through the whole widget or application lifetime - -### Topic: Notifications - -#### Learning Outcomes for Topic - -* create designs that allow users to switch notifications on or off to avoid -* identify different types of notifications based on their priority, relevance, and relation to specific parts of the application or to the application as a whole -* create designs that support mechanisms to queue and prioritize application notifications coming from different user interface components and custom widgets - -## Ideas to Assess Knowledge for Module - -Optional ideas to support assessment: - -[To be developed] - -## Teaching Resources - -Suggested resources to support your teaching: - -[To be developed] - From 889d8bc97c3842915d27c5eb0c34f36c432f9254 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 24 Mar 2021 13:15:07 +0100 Subject: [PATCH 040/416] Fixing nav --- _data/navigation.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_data/navigation.yml b/_data/navigation.yml index 356c31669..0dfb79d37 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -274,7 +274,7 @@ - name: "Input and Feedback" url: /curricula/designer-modules/responsive-design/ - name: Widgets and Interaction - url: /curricula/designerr-modules/widgets-and-interaction + url: "/curricula/designer-modules/widgets-and-interaction/ - name: Changelog url: "/curricula/changelog/" hide: true From 91257b904884e90aaec02f8b947d3ed39dc0cd17 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 24 Mar 2021 13:25:19 +0100 Subject: [PATCH 041/416] Fixing nav --- _data/navigation.yml | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/_data/navigation.yml b/_data/navigation.yml index 0dfb79d37..f073c6b43 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -260,21 +260,19 @@ url: "/curricula/designer-modules/" pages: - name: Inclusive Design - url: /curricula/designer-modules/inclusuive-design/ + url: "/curricula/designer-modules/inclusive-design/" - name: Page Layout - url: /curricula/designer-modules/page-layout/ + url: "/curricula/designer-modules/page-layout/" - name: Navigation and Orientation - url: /curricula/designer-modules/navigation-and-orientation/ - - name: "Images" - url: /curricula/designer-modules/images/ - - name: "Multimedia and Animations" - url: /curricula/designer-modules/multimedia-and-animations/ + url: "/curricula/designer-modules/navigation-and-orientation/" + - name: Images + url: "/curricula/designer-modules/images/" + - name: Multimedia and Animations + url: "/curricula/designer-modules/multimedia-and-animations/" - name: Responsive Design - url: /curricula/input-and-feedback/ - - name: "Input and Feedback" - url: /curricula/designer-modules/responsive-design/ - - name: Widgets and Interaction - url: "/curricula/designer-modules/widgets-and-interaction/ + url: "/curricula/responsive-design/" + - name: Interaction and Feedback + url: "/curricula/designer-modules/interaction-and-feedback/" - name: Changelog url: "/curricula/changelog/" hide: true From b0553782e8c0f204dab2a466da243b88fd25b704 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 24 Mar 2021 13:43:34 +0100 Subject: [PATCH 042/416] Updates to designer modules --- content/designer/designer-modules.md | 2 +- content/designer/navigation-and-orientation.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 9f56eec54..11ce08724 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -19,7 +19,7 @@ parent_in_h1: name: title navigation: previous: /curricula/developer-modules/rich-applications/ - next: /curricula/designer-modules/user-research-and-requirements/ + next: /curricula/designer-modules/inclusive-design/ --- ## Introduction diff --git a/content/designer/navigation-and-orientation.md b/content/designer/navigation-and-orientation.md index 071f4a93c..30564929b 100644 --- a/content/designer/navigation-and-orientation.md +++ b/content/designer/navigation-and-orientation.md @@ -30,7 +30,7 @@ Courses based on this module should: Students should be able to: -* explain strategies that people with disabilities use to navigate and orientate themselves in web pages and applications +* explain strategies that people with disabilities use to navigate and orient themselves in web pages and applications * create designs that allow users to bypass blocks of repeated content, such as navigation links, header contents, or advertisements * create designs that allow for multiple navigational mechanisms, such as menus, search boxes, breadcrumb trails, tables of contents, and sitemaps * create designs that allow users to stop, adjust, and extend existing time limits set by the content From b24bf72c6c1a352203d8a3d3f4598e952a1df54f Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 24 Mar 2021 15:00:29 +0100 Subject: [PATCH 043/416] Updates to designer modules --- _data/navigation.yml | 2 +- content/designer/responsive-design.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/_data/navigation.yml b/_data/navigation.yml index f073c6b43..02e763b3d 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -270,7 +270,7 @@ - name: Multimedia and Animations url: "/curricula/designer-modules/multimedia-and-animations/" - name: Responsive Design - url: "/curricula/responsive-design/" + url: "/curricula/designer-modules/responsive-design/" - name: Interaction and Feedback url: "/curricula/designer-modules/interaction-and-feedback/" - name: Changelog diff --git a/content/designer/responsive-design.md b/content/designer/responsive-design.md index ca770f46e..8e3e41438 100644 --- a/content/designer/responsive-design.md +++ b/content/designer/responsive-design.md @@ -21,7 +21,7 @@ parent_in_h1: name: "Curricula on Web Accessibility" navigation: previous: /curricula/designer-modules/multimedia-and-animations/ - next: /curricula/designer-modules/widgets-interaction-and-feedback/ + next: /curricula/designer-modules/interaction-and-feedback/ --- ## Introduction @@ -60,7 +60,7 @@ Students should be able to: * create designs that preserve content and functionality when accessed using a variety of screen sizes, screen configurations, and style sheets * ensure content can be presented without loss of information and functionality, and that accessing such content does not require two-dimensional scrolling: - * verticall (at a width equivalent to 320 CSS pixels) + * vertical (at a width equivalent to 320 CSS pixels) * horizontall (at a height equivalent to 256 CSS pixels) * create designs that allow text resizing up to 200% without loss of content and functionality * create designs that allow users to set the orientation to portrait or landscape, or that include show or hide controls to access contents in portrait and landscape orientations From cfccdf2ac5d2930d3596a89c214311c572ed81a9 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 24 Mar 2021 15:21:57 +0100 Subject: [PATCH 044/416] Updates to designer modules --- content/designer/interaction-and-feedback.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 5c52c8e7f..c97b961df 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -29,11 +29,11 @@ Courses based on this module should: Students should be able to: -* explain strategies that people with disabilities use to identify, operate, and interact with user interface components, such as forms and custom widgets -* provide clear and distinguishable names and instructions that allow to identify user interface components, such as form fields and custom widgets -* provide meaningful and descriptive notification messages about imminent time limits, errors, suggestions for corrections, successes, or any other event resulting from user input -* ensure that meaningful sequence and clear focus indicators for user interface components are provided +* explain strategies that people with disabilities use to identify, distinguish, and operate interactive user interface components, such as forms and custom widgets * ensure all interactive user interface components can be operated using the keyboard +* provide clear and distinguishable names and instructions that allow to identify interactive user interface components, such as form fields and custom widgets +* provide meaningful and descriptive notification messages about imminent time limits, errors, suggestions for corrections, successes, or any other event resulting from user input +* create designs that allow for interactive user interface components to have meaningful sequence and clear focus indicators both individually and when operated in the context of a rich application * define custom interaction patterns, such as where to place focus when a dialog is open and closed, and what the focus order should be within those dialogs * define mechanisms that allow users to obtain information about custom interaction patterns, such as specific keyboard shortcuts for applications and expected behavior of custom widgets * identify related requirements for developers to create designs using native HTML elements to the extent possible and describe their benefits in relation to non-native elements @@ -58,7 +58,7 @@ Topics to achieve the learning outcomes: Students should be able to: -* provide overall labels and instructions to help users understand the purpose and intent of interactive user interface components, such as form fields and custom widgets +* provide overall labels and instructions to help users understand the purpose and intent of interactive user interface components, such as names for form fields and custom widgets and instructions about how to operate custom widgets * create designs that allow to position labels where users expect them, for example * labels for form fields to the left of the field or above in left-to-right languages, or to the right of the field or above it in right-to-left languages * labels for radio buttons or checkboxes to the right of the field or below it in left-to-right languages or to the left of the field or below it in right-to-left languages @@ -80,7 +80,7 @@ Students should be able to: * provide textual information about errors, successes, or any other event resulting from user input * create designs that allow to switch notifications on or off to allow notifications processing at the users pace * identify different types of notifications based on their priority, relevance, and relation to specific parts of the application or to the application as a whole -* create designs that support mechanisms to queue and prioritize application notifications coming from different user interface components and custom widgets +* create designs that support mechanisms to queue and prioritize application notifications coming from different interactive user interface components, such as form fields and custom widgets * describe related requirements for developers to ensure that notification messages are associated to their corresponding user interface component and can be rendered by assistive technologies ### Topic: Help and Error Prevention From bc84f990a58094710a663ca21c9bc2fbaeeafecd Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 24 Mar 2021 17:17:20 +0100 Subject: [PATCH 045/416] Updates to designer modules --- content/designer/images.md | 37 ++++++++- content/designer/inclusive-design.md | 55 ++++++++++--- content/designer/interaction-and-feedback.md | 80 +++++++++++++++---- content/designer/multimedia-and-animations.md | 14 +++- .../designer/navigation-and-orientation.md | 36 +++++++++ content/designer/page-layout.md | 34 ++++++-- content/designer/responsive-design.md | 24 ++++++ 7 files changed, 247 insertions(+), 33 deletions(-) diff --git a/content/designer/images.md b/content/designer/images.md index b0a93bce4..c495a2992 100644 --- a/content/designer/images.md +++ b/content/designer/images.md @@ -60,6 +60,18 @@ Students should be able to: * complex * create designs that support use of text when the information presented is intended to be read as text, instead of using images of text +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +[To be developed.] + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] + ### Topic: Text Alternatives #### Learning Outcomes for Topic @@ -70,6 +82,29 @@ Students should be able to: * provide descriptive textual information for the following types of graphical information: * those that are part of tests or exercises that would be invalid if presented in text * those that are primarily intended to create a specific sensory experience -* provide text alternatives that identify and describe the purpose of graphical elements that are used to confirm that content is accessed by a person rather than a computer, such as captcha +* provide text alternatives that identify and describe the purpose of captcha and other graphical elements used to confirm that content is accessed by a person rather than a computer * provide several modalities of captcha that rely on different sensory characteristics, such as visual or auditory +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +[To be developed.] + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] + +## Ideas to Assess Knowledge for Module + +Optional ideas to support assessment: + +[To be developed.] + +## Teaching Resources + +Suggested resources to support your teaching: + +[To be developed] diff --git a/content/designer/inclusive-design.md b/content/designer/inclusive-design.md index d23fa790f..30bc923e5 100644 --- a/content/designer/inclusive-design.md +++ b/content/designer/inclusive-design.md @@ -38,9 +38,9 @@ Students should be able to: * describe how involving users with disabilities early and throughout in the design and development process can lead to better accessibility of websites and applications * explain strategies that people with disabilities use to interact with the Web * ensure applicable accessibility requirements, such as those collected in standards and policies, are researched and included in the overall project requirements -* ensure people with disabilities are included in user research activities, for example in focus groups, personas, scenarios, and usability testing -* ensure that collected user input in user research includes different groups of users with disabilities and various levels of experience using the Web -* ensure people with disabilities can provide informed consent, respond to questions, and perform any other activity required by the research process in an accessible way +* ensure people with disabilities are included in different design and development processes and stages, for example in focus groups, personas, scenarios, and usability testing +* ensure that collected user input includes different groups of users with disabilities and various levels of experience using the Web +* ensure people with disabilities can provide informed consent, respond to questions, and otherwise participate in the design and development processes in an accessible way ## Competencies @@ -65,30 +65,65 @@ Students should be able to: * determine the characteristics of participants in user research activities based on different factors, such as overall project requirements, level of experience, use of assistive technology, and type of disability * ensure people with disabilities are involved early and throughout the research processes, including in focus groups, questionnaires, and surveys +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +[To be developed.] + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] + ### Topic: Gathering Requirements #### Learning Outcomes for Topic Students should be able to: -* ensure different types of user requirements that relate to people with disabilities are considered, for example adequate contrast ratios, availability of content and functionality in different screen sizes and configurations, keyboard compatibility, and use with assistive technologies and adaptive strategies +* ensure different types of user requirements that relate to people with disabilities are considered, for example appropriate contrast ratios, availability of content and functionality in different screen sizes and configurations, keyboard compatibility, and use with assistive technologies and adaptive strategies * create personas that include people with different types of disabilities and different levels of experience using the Web * create scenarios that include use of the website or application with different types of assistive technologies and adaptive strategies +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +[To be developed.] + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] + ### Topic: Testing #### Learning Outcomes for Topic Students should be able to: -* ensure people with disabilities are involved in all design process where testing is required, for example in testing prototypes, iterative testing phases, and usability testing -* ensure adequate location is chosen to conduct the activities, for example depending on: - * accessibility of the facilities +* ensure people with disabilities are involved in all stages where testing is scheduled, for example in testing prototypes, iterative testing phases, and usability testing +* ensure the following factors are taken into account when testing needs to be conducted at a specific location: + * location and accessibility of the facilities * assistive technology needs - * custom setups - * activity goals + * custom setups that users may require * accessibility of transportation means -* ensure adequate timings for participants to carry on activities is allocated, for example different time sets for different levels of experience with the assistive technology and different levels of familiarity with the website or application +* ensure appropriate timings for participants to carry on activities is allocated, for example different time sets for different levels of experience with the assistive technology and different levels of familiarity with the website or application + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +[To be developed.] + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] ## Ideas to Assess Knowledge for Module diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index c97b961df..288af0c5a 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -52,6 +52,30 @@ Skills required for this module: Topics to achieve the learning outcomes: +### Topic: Keyboard Input + +#### Learning Outcomes for Topic + +Students should be able to: + +* provide designs that support operation with the keyboard +* describe related requirements for developers to ensure every user interface component can be entered, operated, and exited using the keyboard only +* identify situations when it may be necessary to provide additional keyboard shortcuts, for example when designing a custom functionality +* create designs that allow provision of keyboard shortcuts that avoid conflicts with the operating system, browser, and assistive technologies keyboard shortcuts +* create designs that allow for consistent focus indicators through the whole widget or application lifetime + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +[To be developed.] + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] + ### Topic: Labels and Instructions #### Learning outcomes for Topic @@ -70,18 +94,17 @@ Students should be able to: * provide clear instructions about the current step and about the total number of steps involved in a multi-step form * identify related requirements for developers to ensure that labels and instructions are programmatically associated to their corresponding user interface component -### Topic: Feedback and Notifications +#### Teaching Ideas for Topic -#### Learning Outcomes for Topic +Optional ideas to teach the learning outcomes: -Students should be able to: +[To be developed.] -* ensure notification messages are easy to understand and can be distinguished from any other user interface component -* provide textual information about errors, successes, or any other event resulting from user input -* create designs that allow to switch notifications on or off to allow notifications processing at the users pace -* identify different types of notifications based on their priority, relevance, and relation to specific parts of the application or to the application as a whole -* create designs that support mechanisms to queue and prioritize application notifications coming from different interactive user interface components, such as form fields and custom widgets -* describe related requirements for developers to ensure that notification messages are associated to their corresponding user interface component and can be rendered by assistive technologies +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] ### Topic: Help and Error Prevention @@ -100,18 +123,43 @@ Students should be able to: * submissions of user test responses * create designs that support context help methods for form fields, such as a "help" link next to the form -### Topic: Keyboard Input +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +[To be developed.] + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] + +### Topic: Feedback and Notifications #### Learning Outcomes for Topic Students should be able to: -* provide designs that support operation with the keyboard -* describe related requirements for developers to ensure every user interface component can be entered, operated, and exited using the keyboard only -* identify situations when it may be necessary to provide additional keyboard shortcuts, for example when designing a custom functionality -* create designs that allow provision of keyboard shortcuts that avoid conflicts with the operating system, browser, and assistive technologies keyboard shortcuts -* create designs that allow for consistent focus indicators through the whole widget or application lifetime - +* ensure notification messages are easy to understand and can be distinguished from any other user interface component +* provide textual information about errors, successes, or any other event resulting from user input +* create designs that allow to switch notifications on or off to allow notifications processing at the users pace +* identify different types of notifications based on their priority, relevance, and relation to specific parts of the application or to the application as a whole +* create designs that support mechanisms to queue and prioritize application notifications coming from different interactive user interface components, such as form fields and custom widgets +* describe related requirements for developers to ensure that notification messages are associated to their corresponding user interface component and can be rendered by assistive technologies + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +[To be developed.] + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] + ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 9bbbea5de..f686ba68a 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -62,7 +62,19 @@ Students should be able to * create designs that allow to provide captions and audio descriptions for any prerecorded and live audio content in synchronized media * create designs that allow to provide sign language interpretation for all prerecorded audio content in synchronized media -### Topic: Animations +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +[To be developed.] + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] + +### Topic: Movement and Animations #### Learning Outcomes for Topic diff --git a/content/designer/navigation-and-orientation.md b/content/designer/navigation-and-orientation.md index 30564929b..0830528eb 100644 --- a/content/designer/navigation-and-orientation.md +++ b/content/designer/navigation-and-orientation.md @@ -92,6 +92,18 @@ Students should be able to: * create designs that support breadcrumb trails to provide information about the user's location in a set of web pages * create designs that support table of contents to give an overview of the whole website or document and to allow users to go to specific parts of the content +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +[To be developed.] + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] + ### Topic: Enough Time #### Learning Outcomes for Topic @@ -103,6 +115,18 @@ Students should be able to: * create designs that support extending existing time limits by warning the user at least 20 seconds before the time limit expires * ensure content that auto scrolls can be paused and resumed from where it was left to allow users to better read and process content +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +[To be developed.] + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] + ### Topic: Input Modalities #### Learning Outcomes for Topic @@ -116,6 +140,18 @@ Students should be able to: * create designs that support alternatives to device or user motion such as shaking, by using user interface components that do not require motion * ensure response to motion can be disabled by the user to prevent accidental actuation, such as undoing an action by shaking a device +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +[To be developed.] + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] + ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: diff --git a/content/designer/page-layout.md b/content/designer/page-layout.md index ae6ea16ca..adc5c6d51 100644 --- a/content/designer/page-layout.md +++ b/content/designer/page-layout.md @@ -36,7 +36,7 @@ Courses based on this module should: Students should be able to: * explain how people with disabilities identify and distinguish user interface components based on different features such as color, structure, layout, pattern, and spacing -* create designs that allow for adequate contrast ratios between foreground user interface components (such as text, images of text, and controls) and their corresponding background +* create designs that allow for appropriate contrast ratios between foreground user interface components (such as text, images of text, and controls) and their corresponding background * ensure additional mechanisms apart from color alone are available to convey information, such as text cues, patterns, and icons * create designs that allow for clear and distinguishable focus indicators, for example using borders, background color, and highlighting * ensure different page regions and user interface components are placed where users expect them and are distinguishable from one another through different ways, such as through color, typography, patterns, and spacing @@ -59,12 +59,24 @@ Topics to achieve the learning outcomes: Students should be able to: -* explain how contrast ratios allow people with disabilities to read, understand, and distinguish foreground from background user interface components +* explain how appropriate contrast ratios allow people with disabilities to read, understand, and distinguish foreground from background user interface components * create designs that allow text and images of text to have a contrast ratio of at least 4.5:1 with respect to their background * create designs that allow for large-scale text and images of text to have a contrast ratio of at least 3:1 with respect to their background * create designs that allow user interface components and graphical elements to have a contrast ratio of at least 3:1 with respect to their background * ensure focus indicators have a contrast ratio that allows them to be perceived by users +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +[To be developed.] + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] + ### Topic: Section and Content Identification #### Learning Outcomes for Topic @@ -77,15 +89,27 @@ Students should be able to: * ensure that information conveyed through differences in text color is also conveyed using other visual cues, such as underline, bold, and italics * ensure that information provided using differences in color is also provided using different patterns, shapes, and icons -### Topic: Structure and Layout +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +[To be developed.] + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] + +### Topic: Page Structure #### Learning Outcomes for Topic Students should be able to: -* provide distinctive styles and descriptive names for each of the page regions, heading levels, and user interface components +* provide distinctive styles and descriptive names for each of the page regions, headings, and for individual user interface components such as links, buttons, or form fields * ensure positioning of page regions falls under user expectations, such as headers at the top, footers at the bottom, and navigation regions at the top left -* ensure heading levels are used to convey the hierarchical structure of the content +* ensure appropriate heading levels are used to convey the hierarchical structure of the content * identify related requirements for developers to ensure headings are coded appropriately, perceived by assistive technologies, and nested according to the specifications ## Ideas to Assess Knowledge for Module diff --git a/content/designer/responsive-design.md b/content/designer/responsive-design.md index 8e3e41438..1d31d6919 100644 --- a/content/designer/responsive-design.md +++ b/content/designer/responsive-design.md @@ -65,6 +65,18 @@ Students should be able to: * create designs that allow text resizing up to 200% without loss of content and functionality * create designs that allow users to set the orientation to portrait or landscape, or that include show or hide controls to access contents in portrait and landscape orientations +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +[To be developed.] + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] + ### Topic: Targets and Spacing #### Learning Outcomes for Topic @@ -77,6 +89,18 @@ Students should be able to: * Letter spacing (tracking) -- to at least 0.12 times the font size * ensure target sizes that are at least 44 by 44 CSS pixels +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +[To be developed.] + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] + ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: From a0ad6b3d39e971cd5d4c9d774bb83210a26451be Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 24 Mar 2021 17:35:50 +0100 Subject: [PATCH 046/416] Updates to designer modules --- .../designer/navigation-and-orientation.md | 27 ------------------- content/designer/responsive-design.md | 27 +++++++++++++++++++ 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/content/designer/navigation-and-orientation.md b/content/designer/navigation-and-orientation.md index 0830528eb..eebcf99cd 100644 --- a/content/designer/navigation-and-orientation.md +++ b/content/designer/navigation-and-orientation.md @@ -34,8 +34,6 @@ Students should be able to: * create designs that allow users to bypass blocks of repeated content, such as navigation links, header contents, or advertisements * create designs that allow for multiple navigational mechanisms, such as menus, search boxes, breadcrumb trails, tables of contents, and sitemaps * create designs that allow users to stop, adjust, and extend existing time limits set by the content -* ensure input modalities do not rely solely on multipoint or path-based gestures, such as swipe or pinch -* ensure that mechanisms to undo or abort an action carried out with pointer operations are always available * identify related requirements for developers to ensure that navigational mechanisms can be used with the keyboard and other input devices ## Competencies @@ -127,31 +125,6 @@ Optional ideas to support assessment: [To be developed.] -### Topic: Input Modalities - -#### Learning Outcomes for Topic - -Students should be able to: - -* create designs that support alternatives to multi-pointer gestures (such as swipe or pinch) using single pointer activation -* ensure down event on single pointer gestures: - * do not perform any action, or - * have available mechanisms to abort or undo any action carried on -* create designs that support alternatives to device or user motion such as shaking, by using user interface components that do not require motion -* ensure response to motion can be disabled by the user to prevent accidental actuation, such as undoing an action by shaking a device - -#### Teaching Ideas for Topic - -Optional ideas to teach the learning outcomes: - -[To be developed.] - -#### Ideas to Assess Knowledge for Topic - -Optional ideas to support assessment: - -[To be developed.] - ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: diff --git a/content/designer/responsive-design.md b/content/designer/responsive-design.md index 1d31d6919..88dca2bb1 100644 --- a/content/designer/responsive-design.md +++ b/content/designer/responsive-design.md @@ -41,6 +41,8 @@ Students should be able to: * create designs that allow to preserve content and functionality when line height as well as spacing between paragraphs, words, and letters are modified by the user * create designs that allow text resizing without loss of content and functionality * create designs that do not restrict the content view and operation to a single display orientation, such as portrait or landscape +* ensure input modalities do not rely solely on multipoint or path-based gestures, such as swipe or pinch +* ensure that mechanisms to undo or abort an action carried out with pointer operations are always available ## Competencies @@ -101,6 +103,31 @@ Optional ideas to support assessment: [To be developed.] +### Topic: Input Modalities + +#### Learning Outcomes for Topic + +Students should be able to: + +* create designs that support alternatives to multi-pointer gestures (such as swipe or pinch) using single pointer activation +* ensure down event on single pointer gestures: + * do not perform any action, or + * have available mechanisms to abort or undo any action carried on +* create designs that support alternatives to device or user motion such as shaking, by using user interface components that do not require motion +* ensure response to motion can be disabled by the user to prevent accidental actuation, such as undoing an action by shaking a device + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +[To be developed.] + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] + ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: From eecedce26e246288c6025e447d0fe77dcaab5f14 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 24 Mar 2021 17:58:30 +0100 Subject: [PATCH 047/416] Updates to designer modules --- content/designer/navigation-and-orientation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/navigation-and-orientation.md b/content/designer/navigation-and-orientation.md index eebcf99cd..b0a5407b9 100644 --- a/content/designer/navigation-and-orientation.md +++ b/content/designer/navigation-and-orientation.md @@ -81,7 +81,7 @@ Topics to achieve the learning outcomes: Students should be able to: -* create designs that support skipping blocks of repeated content providing at least one of the following techniques: +* create designs that support skipping blocks of repeated content providing at least one of the following: * a link at the top of each page that goes directly to the main content area * a link at the beginning of a block of repeated content to go to the end of the block * links at the top of the page that go to each area of the content From e88c6dd77dbb03e348d95f4b8d78d50db67cda62 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 25 Mar 2021 10:16:25 +0100 Subject: [PATCH 048/416] Updates to designer modules --- content/designer/images.md | 24 +++++++++++++++++++- content/designer/interaction-and-feedback.md | 2 +- content/designer/page-layout.md | 4 ++-- 3 files changed, 26 insertions(+), 4 deletions(-) diff --git a/content/designer/images.md b/content/designer/images.md index c495a2992..dc4ad51cc 100644 --- a/content/designer/images.md +++ b/content/designer/images.md @@ -29,6 +29,8 @@ Courses based on this module should: Students should be able to: +* explain how people with disabilities obtain information contained in images through different methods, such as through text alternatives and descriptions +* explain how images can help some groups of people with disabilities better understand the context and functionality of user interface components * identify and describe different types of images from an accessibility perspective, such as informative, textual, decorative, functional, and complex images * provide appropriate text alternatives for images included in the design phase, such as logos or graphical components * provide text that allows users to identify graphical interactive elements such as links or menu items @@ -78,10 +80,30 @@ Optional ideas to support assessment: Students should be able to: -* provide names for controls and components that accept user input, for example search, print, and save buttons +* provide short text that serves as brief description of complex non textual pieces of information, such as charts or diagrams * provide descriptive textual information for the following types of graphical information: * those that are part of tests or exercises that would be invalid if presented in text * those that are primarily intended to create a specific sensory experience + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +[To be developed.] + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] + +### Topic: Functional Images + +#### Learning Outcomes for Topic + +Students should be able to: + +* provide short text alternatives for controls and components that accept user input, for example search, print, and save buttons * provide text alternatives that identify and describe the purpose of captcha and other graphical elements used to confirm that content is accessed by a person rather than a computer * provide several modalities of captcha that rely on different sensory characteristics, such as visual or auditory diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 288af0c5a..c72d9ad79 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -36,7 +36,7 @@ Students should be able to: * create designs that allow for interactive user interface components to have meaningful sequence and clear focus indicators both individually and when operated in the context of a rich application * define custom interaction patterns, such as where to place focus when a dialog is open and closed, and what the focus order should be within those dialogs * define mechanisms that allow users to obtain information about custom interaction patterns, such as specific keyboard shortcuts for applications and expected behavior of custom widgets -* identify related requirements for developers to create designs using native HTML elements to the extent possible and describe their benefits in relation to non-native elements +* identify related requirements for developers to use native HTML elements to the extent possible and describe their benefits in relation to non-native elements * identify related requirements for developers to ensure that properties of custom user interrface components, such as names, states, and instructions are perceived visually and can be programmaticaly determined * identify related requirements for developers to write code for specific keyboard interactions that custom widgets may require diff --git a/content/designer/page-layout.md b/content/designer/page-layout.md index adc5c6d51..dcd8b0062 100644 --- a/content/designer/page-layout.md +++ b/content/designer/page-layout.md @@ -40,7 +40,7 @@ Students should be able to: * ensure additional mechanisms apart from color alone are available to convey information, such as text cues, patterns, and icons * create designs that allow for clear and distinguishable focus indicators, for example using borders, background color, and highlighting * ensure different page regions and user interface components are placed where users expect them and are distinguishable from one another through different ways, such as through color, typography, patterns, and spacing -* provide clear and descriptive heading texts that allow users to identify different sections of the website and parts of the content +* provide clear and descriptive heading texts that allow users to identify different sections of the web page and parts of the content * identify related requirements for developers to ensure that headings are coded appropriately and are nested according to the hierarchical structure of the page ## Competencies @@ -108,7 +108,7 @@ Optional ideas to support assessment: Students should be able to: * provide distinctive styles and descriptive names for each of the page regions, headings, and for individual user interface components such as links, buttons, or form fields -* ensure positioning of page regions falls under user expectations, such as headers at the top, footers at the bottom, and navigation regions at the top left +* ensure positioning of page regions falls under user expectations, such as headers at the top, footers at the bottom, and navigation regions at the top left in a desktop view * ensure appropriate heading levels are used to convey the hierarchical structure of the content * identify related requirements for developers to ensure headings are coded appropriately, perceived by assistive technologies, and nested according to the specifications From 918cb0d19070d759ecd6f5e71047dd921fa78ec5 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 25 Mar 2021 10:39:01 +0100 Subject: [PATCH 049/416] Updates to designer modules --- _data/navigation.yml | 4 ++-- content/designer/images.md | 5 +++-- content/designer/inclusive-design.md | 2 +- content/designer/interaction-and-feedback.md | 7 +++---- content/designer/multimedia-and-animations.md | 6 +++--- content/designer/navigation-and-orientation.md | 5 ++--- content/designer/responsive-design.md | 6 +++--- 7 files changed, 17 insertions(+), 18 deletions(-) diff --git a/_data/navigation.yml b/_data/navigation.yml index 02e763b3d..866c358b6 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -267,10 +267,10 @@ url: "/curricula/designer-modules/navigation-and-orientation/" - name: Images url: "/curricula/designer-modules/images/" - - name: Multimedia and Animations - url: "/curricula/designer-modules/multimedia-and-animations/" - name: Responsive Design url: "/curricula/designer-modules/responsive-design/" + - name: Multimedia and Animations + url: "/curricula/designer-modules/multimedia-and-animations/" - name: Interaction and Feedback url: "/curricula/designer-modules/interaction-and-feedback/" - name: Changelog diff --git a/content/designer/images.md b/content/designer/images.md index dc4ad51cc..c1b7f7046 100644 --- a/content/designer/images.md +++ b/content/designer/images.md @@ -16,10 +16,11 @@ footer: >

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: previous: /curricula/designer-modules/navigation-and-orientation/ - next: /curricula/designer-modules/multimedia-and-animations/ + next: /curricula/designer-modules/responsive-design/ --- ## Introduction +{:.no-display} Courses based on this module should: @@ -35,7 +36,7 @@ Students should be able to: * provide appropriate text alternatives for images included in the design phase, such as logos or graphical components * provide text that allows users to identify graphical interactive elements such as links or menu items * describe alternative ways to convey information presented in text, such as using graphics, color, or shapes -* create designs that allow to provide accurate descriptions for components such as charts or infographics +* create designs that allow to provide accurate descriptions for components such as charts or diagrams * identify related requirements for developers to ensure alternatives and descriptions are programmatically associated to their corresponding component ## Competencies diff --git a/content/designer/inclusive-design.md b/content/designer/inclusive-design.md index 30bc923e5..3a40c71f9 100644 --- a/content/designer/inclusive-design.md +++ b/content/designer/inclusive-design.md @@ -106,7 +106,7 @@ Optional ideas to support assessment: Students should be able to: * ensure people with disabilities are involved in all stages where testing is scheduled, for example in testing prototypes, iterative testing phases, and usability testing -* ensure the following factors are taken into account when testing needs to be conducted at a specific location: +* ensure the following factors are considered when testing needs to be conducted at a specific location: * location and accessibility of the facilities * assistive technology needs * custom setups that users may require diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index c72d9ad79..6528625c5 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -15,7 +15,7 @@ footer: >

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: - previous: /curricula/designer-modules/responsive-design/ + previous: /curricula/designer-modules/multimedia-and-animations/ --- ## Introduction @@ -37,7 +37,7 @@ Students should be able to: * define custom interaction patterns, such as where to place focus when a dialog is open and closed, and what the focus order should be within those dialogs * define mechanisms that allow users to obtain information about custom interaction patterns, such as specific keyboard shortcuts for applications and expected behavior of custom widgets * identify related requirements for developers to use native HTML elements to the extent possible and describe their benefits in relation to non-native elements -* identify related requirements for developers to ensure that properties of custom user interrface components, such as names, states, and instructions are perceived visually and can be programmaticaly determined +* identify related requirements for developers to ensure that properties of custom user interface components, such as names, states, and instructions are perceived visually and can be programmatically determined * identify related requirements for developers to write code for specific keyboard interactions that custom widgets may require {% include excol.html type="all" %} @@ -142,7 +142,7 @@ Optional ideas to support assessment: Students should be able to: * ensure notification messages are easy to understand and can be distinguished from any other user interface component -* provide textual information about errors, successes, or any other event resulting from user input +* provide textual information about errors, successes, or any other event resulting from user input * create designs that allow to switch notifications on or off to allow notifications processing at the users pace * identify different types of notifications based on their priority, relevance, and relation to specific parts of the application or to the application as a whole * create designs that support mechanisms to queue and prioritize application notifications coming from different interactive user interface components, such as form fields and custom widgets @@ -171,4 +171,3 @@ Optional ideas to support assessment: Suggested resources to support your teaching: [To be developed] - diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index f686ba68a..170225d20 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 5: Multimedia and Animations" +title: "[Draft] Module 6: Multimedia and Animations" nav_title: "Multimedia and Animations" permalink: /curricula/designer-modules/multimedia-and-animations/ ref: /curricula/designer-modules/multimedia-and-animations/ @@ -15,8 +15,8 @@ footer: >

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: - previous: /curricula/designer-modules/images/ - next: /curricula/designer-modules/responsive-design/ + previous: /curricula/designer-modules/responsive-design/ + next: /curricula/designer-modules/interaction-and-feedback --- ## Introduction diff --git a/content/designer/navigation-and-orientation.md b/content/designer/navigation-and-orientation.md index b0a5407b9..3cd1d1e95 100644 --- a/content/designer/navigation-and-orientation.md +++ b/content/designer/navigation-and-orientation.md @@ -82,8 +82,8 @@ Topics to achieve the learning outcomes: Students should be able to: * create designs that support skipping blocks of repeated content providing at least one of the following: - * a link at the top of each page that goes directly to the main content area - * a link at the beginning of a block of repeated content to go to the end of the block + * a link at the top of each page that goes directly to the main content area + * a link at the beginning of a block of repeated content to go to the end of the block * links at the top of the page that go to each area of the content * an expandable and collapsible menu to make it easier for users to skip the menu * create designs that support site maps to provide an overview of the entire website @@ -136,4 +136,3 @@ Optional ideas to support assessment: Suggested resources to support your teaching: [To be developed] - diff --git a/content/designer/responsive-design.md b/content/designer/responsive-design.md index 88dca2bb1..dcea2fae2 100644 --- a/content/designer/responsive-design.md +++ b/content/designer/responsive-design.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 6: Responsive Design" +title: "[Draft] Module 5: Responsive Design" nav_title: "Responsive Design" permalink: /curricula/designer-modules/responsive-design/ ref: /curricula/designer-modules/responsive-design/ @@ -20,8 +20,8 @@ parent_in_h1: - ref: /curricula/ name: "Curricula on Web Accessibility" navigation: - previous: /curricula/designer-modules/multimedia-and-animations/ - next: /curricula/designer-modules/interaction-and-feedback/ + previous: /curricula/designer-modules/images/ + next: /curricula/designer-modules/multimedia-and-animations/ --- ## Introduction From 39ca1ba631b83bb26e552ad4ce58609d86dcbc5d Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 25 Mar 2021 10:41:23 +0100 Subject: [PATCH 050/416] Adding missing / --- content/designer/multimedia-and-animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 170225d20..9cf059273 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -16,7 +16,7 @@ footer: >

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: previous: /curricula/designer-modules/responsive-design/ - next: /curricula/designer-modules/interaction-and-feedback + next: /curricula/designer-modules/interaction-and-feedback/ --- ## Introduction From 80f094dc8a2e2ed9d905cc23518be19dfc0906a3 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 25 Mar 2021 17:47:14 +0100 Subject: [PATCH 051/416] Updates to designer modules --- _data/navigation.yml | 6 +- content/designer/images.md | 6 +- content/designer/information-design.md | 146 ++++++++++++++++++ content/designer/interaction-and-feedback.md | 1 + content/designer/multimedia-and-animations.md | 2 +- .../designer/navigation-and-orientation.md | 2 +- content/designer/responsive-design.md | 5 +- 7 files changed, 158 insertions(+), 10 deletions(-) create mode 100644 content/designer/information-design.md diff --git a/_data/navigation.yml b/_data/navigation.yml index 866c358b6..3e59a8d99 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -265,14 +265,16 @@ url: "/curricula/designer-modules/page-layout/" - name: Navigation and Orientation url: "/curricula/designer-modules/navigation-and-orientation/" + - name: Information Design + url: "curricula/designer-modules/information-design" - name: Images url: "/curricula/designer-modules/images/" - - name: Responsive Design - url: "/curricula/designer-modules/responsive-design/" - name: Multimedia and Animations url: "/curricula/designer-modules/multimedia-and-animations/" - name: Interaction and Feedback url: "/curricula/designer-modules/interaction-and-feedback/" + - name: Responsive Design + url: "/curricula/designer-modules/responsive-design/" - name: Changelog url: "/curricula/changelog/" hide: true diff --git a/content/designer/images.md b/content/designer/images.md index c1b7f7046..73a07f685 100644 --- a/content/designer/images.md +++ b/content/designer/images.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 4: Images" +title: "[Draft] Module 5: Images" nav_title: "Images" permalink: /curricula/designer-modules/images/ ref: /curricula/designer-modules/images/ @@ -15,8 +15,8 @@ footer: >

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: - previous: /curricula/designer-modules/navigation-and-orientation/ - next: /curricula/designer-modules/responsive-design/ + previous: /curricula/designer-modules/information-design/ + next: /curricula/designer-modules/multimedia-and-animations/ --- ## Introduction diff --git a/content/designer/information-design.md b/content/designer/information-design.md new file mode 100644 index 000000000..f084cc63c --- /dev/null +++ b/content/designer/information-design.md @@ -0,0 +1,146 @@ +--- +title: "[Draft] Module 4: Information Design" +nav_title: "Information Design" +permalink: /curricula/designer-modules/information-design/ +ref: /curricula/designer-modules/information-design/ +lang: en +github: + repository: w3c/wai-curricula + path: content/designer/information-design.md +license: creative-commons +acknowledgements: /curricula/acknowledgements/ +changelog: /curricula/changelog/ +footer: > +

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

+

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

+

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+navigation: + previous: /curricula/designer-modules/navigation-and-orientation/ + next: /curricula/designer-modules/images/ +--- + +## Introduction +{:.no-display} + +Courses based on this module should: + +[To be developed] + +## Learning Outcomes for Module + +Students should be able to: + +* explain how people with disabilities perceive and access different types of information and perform different tasks within websites and applications +* explain how different users may prefer to access long pieces of textual information in different ways, for example accessing all the text at once and accessing smaller pieces one at a time +* identify different uses of text, for example for labels, static content, or dynamic messages, and describe alternative ways to convey information presented in text, such as using graphics, color, or shapes +* identify and describe different types of tables from an accessibility perspective, such as layout, simple, and complex tables +* describe different ways in which information presented in tables can be consumed, such as using nested lists, using groups of simpler tables, or using information in plain text +* ensure different user journeys, flows, and processes are accessible to all users, for example different flows to perform a task within a website or different ways to check the details of a given product +* describe different techniques to group information in form fields to make it more understandable by all users, such as splitting the form into several more comprehensive steps and providing clear instructions for users to understand what is expected from their input +* identify related requirements for developers to ensure that table header cells are programmatically associated to their corresponding data cells + +{% include excol.html type="all" %} + +## Competencies + +Skills required for this module: + +[To be developed] + +## Topics to Teach + +Topics to achieve the learning outcomes: + +### Topic: Textual Information + +#### Learning Outcomes for Topic + +Students should be able to: + +* create designs that support additional ways to convey information presented in text, such as required form fields, using icons, shapes, and colors +* create designs that support mechanisms to identify specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon +* create designs that support mechanisms to identify the expanded form or meaning of acronyms and abbreviations +* create designs that support alternatives to text that require reading ability more advanced than the lower secondary education level +* describe related requirements for developers to make language of page and language of parts programmatically determined +* describe related requirements for content authors to provide texts that do not require reading ability more advanced than the lower secondary education level + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +[To be developed.] + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] + +### Topic: Tabular Information + +#### Learning Outcomes for Topic + +Students should be able to: + +* define the following types of tables from an accessibility perspective + * simple + * complex + * layout +* create designs that allow presentation of tables in multiple ways, such as using several lists, or splitting a complex table into several simpler ones +* create designs that allow to establish a relationship between the table cells both visually and programmatically, included for headers and data cells +* create designs that support the inclusion of table descriptions +* describe related requirements for developers to ensure that table header and data cells are programmatically associated + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +[To be developed.] + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] + +### Topic: Grouping and Sorting Information + +#### Learning Outcomes for Topic + +Students should be able to: + +* ensure similar form controls, such as those related to personal information, payment methods, and prompts to accept legal conditions are presented each in its corresponding step of the form or are grouped together in a way its relationship is apparent to users +* ensure examples of expected input are provided, such as how a phone number should be entered and what the different credit card fields should be filled in +* ensure related links, such as those from a navigation menu or from a product category are grouped together visually and programmatically + +### Topic: User Flows and Journeys + +#### Learning Outcomes for Topic + +Students should be able to: + +* ensure different products of a store and parts of the content are accessible through different user journeys, such as a navigation menu and a search functionality +* ensure robust and understandable grouping of information is considered, such as grouping related information in the same form step, and categorizing similar products under the same section +* ensure information that is presented visually can also be accessed through different means, for example through equivalent descriptions of a product image + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +[To be developed.] + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] + +## Ideas to Assess Knowledge for Module + +Optional ideas to support assessment: + +## Teaching Resources + +Suggested resources to support your teaching: + +[To be developed diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 6528625c5..5561c9a6c 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -16,6 +16,7 @@ footer: >

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: previous: /curricula/designer-modules/multimedia-and-animations/ + next: /curricula/designer-modules/responsive-design/ --- ## Introduction diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 9cf059273..d6ff53791 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -15,7 +15,7 @@ footer: >

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: - previous: /curricula/designer-modules/responsive-design/ + previous: /curricula/designer-modules/images/ next: /curricula/designer-modules/interaction-and-feedback/ --- diff --git a/content/designer/navigation-and-orientation.md b/content/designer/navigation-and-orientation.md index 3cd1d1e95..3ac4ddb1c 100644 --- a/content/designer/navigation-and-orientation.md +++ b/content/designer/navigation-and-orientation.md @@ -16,7 +16,7 @@ footer: >

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: previous: /curricula/designer-modules/page-layout/ - next: /curricula/designer-modules/images/ + next: /curricula/designer-modules/information-design/ --- ## Introduction diff --git a/content/designer/responsive-design.md b/content/designer/responsive-design.md index dcea2fae2..81f58b0e5 100644 --- a/content/designer/responsive-design.md +++ b/content/designer/responsive-design.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 5: Responsive Design" +title: "[Draft] Module 8: Responsive Design" nav_title: "Responsive Design" permalink: /curricula/designer-modules/responsive-design/ ref: /curricula/designer-modules/responsive-design/ @@ -20,8 +20,7 @@ parent_in_h1: - ref: /curricula/ name: "Curricula on Web Accessibility" navigation: - previous: /curricula/designer-modules/images/ - next: /curricula/designer-modules/multimedia-and-animations/ + previous: /curricula/designer-modules/multimedia-and-animations/ --- ## Introduction From 9ab0c6c4d0aaf66a03885bc40438e51137399d07 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 26 Mar 2021 09:51:05 +0100 Subject: [PATCH 052/416] Updates to designer modules --- content/designer/images.md | 4 +- content/designer/inclusive-design.md | 8 ++-- content/designer/information-design.md | 38 ++++++++++++------- content/designer/interaction-and-feedback.md | 8 ++-- content/designer/multimedia-and-animations.md | 8 ++-- .../designer/navigation-and-orientation.md | 8 ++-- content/designer/page-layout.md | 6 +-- content/designer/responsive-design.md | 6 +-- 8 files changed, 48 insertions(+), 38 deletions(-) diff --git a/content/designer/images.md b/content/designer/images.md index 73a07f685..efca6488e 100644 --- a/content/designer/images.md +++ b/content/designer/images.md @@ -43,7 +43,7 @@ Students should be able to: Skills required for this module: -[To be developed] +[To be developed.] ## Topics to Teach @@ -130,4 +130,4 @@ Optional ideas to support assessment: Suggested resources to support your teaching: -[To be developed] +[To be developed.] diff --git a/content/designer/inclusive-design.md b/content/designer/inclusive-design.md index 3a40c71f9..19ca9226d 100644 --- a/content/designer/inclusive-design.md +++ b/content/designer/inclusive-design.md @@ -29,7 +29,7 @@ navigation: Courses based on this module should: -[To be developed] +[To be developed.] ## Learning Outcomes for Module @@ -46,7 +46,7 @@ Students should be able to: Skills required for this module: -[To be developed] +[To be developed.] ## Topics to Teach @@ -129,11 +129,11 @@ Optional ideas to support assessment: Optional ideas to support assessment: -[To be developed] +[To be developed.] ## Teaching Resources Suggested resources to support your teaching: -[To be developed] +[To be developed.] diff --git a/content/designer/information-design.md b/content/designer/information-design.md index f084cc63c..e80bf5f5c 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -24,28 +24,26 @@ navigation: Courses based on this module should: -[To be developed] +[To be developed.] ## Learning Outcomes for Module Students should be able to: * explain how people with disabilities perceive and access different types of information and perform different tasks within websites and applications -* explain how different users may prefer to access long pieces of textual information in different ways, for example accessing all the text at once and accessing smaller pieces one at a time -* identify different uses of text, for example for labels, static content, or dynamic messages, and describe alternative ways to convey information presented in text, such as using graphics, color, or shapes -* identify and describe different types of tables from an accessibility perspective, such as layout, simple, and complex tables -* describe different ways in which information presented in tables can be consumed, such as using nested lists, using groups of simpler tables, or using information in plain text -* ensure different user journeys, flows, and processes are accessible to all users, for example different flows to perform a task within a website or different ways to check the details of a given product +* explain how different long pieces of text can be presented and visualized in different ways, for example presenting all the text at once and presenting smaller pieces one at a time +* identify different uses of text, for example for labels, static content, and dynamic messages, and describe alternative ways to convey information presented in text, such as using graphics, color, or shapes +* identify and define different types of tables from an accessibility perspective, such as layout, simple, and complex tables +* describe different ways in which information presented in tables can be consumed, such as using nested lists, splitting the table into simpler tables, or presenting information in plain text +* ensure different journeys, flows, and processes are accessible to all users, for example different flows to perform a task within a website or different ways to check the details of a given product * describe different techniques to group information in form fields to make it more understandable by all users, such as splitting the form into several more comprehensive steps and providing clear instructions for users to understand what is expected from their input -* identify related requirements for developers to ensure that table header cells are programmatically associated to their corresponding data cells - -{% include excol.html type="all" %} +* identify related requirements for developers to ensure that instructions for form controls are programmatically associated to their corresponding control and that table header cells are programmatically associated to their corresponding data cells ## Competencies Skills required for this module: -[To be developed] +[To be developed.] ## Topics to Teach @@ -109,18 +107,30 @@ Optional ideas to support assessment: Students should be able to: -* ensure similar form controls, such as those related to personal information, payment methods, and prompts to accept legal conditions are presented each in its corresponding step of the form or are grouped together in a way its relationship is apparent to users -* ensure examples of expected input are provided, such as how a phone number should be entered and what the different credit card fields should be filled in +* ensure related form controls, such as those collecting personal information, payment methods, and consent to legal conditions are presented each in its corresponding step of the form or are grouped together in a way its relationship is apparent to all users +* ensure examples of expected input are provided, such as how a phone number should be entered and what the different credit card fields should contain * ensure related links, such as those from a navigation menu or from a product category are grouped together visually and programmatically -### Topic: User Flows and Journeys +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +[To be developed.] + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] + +### Topic: Journeys and Flows #### Learning Outcomes for Topic Students should be able to: * ensure different products of a store and parts of the content are accessible through different user journeys, such as a navigation menu and a search functionality -* ensure robust and understandable grouping of information is considered, such as grouping related information in the same form step, and categorizing similar products under the same section +* create designs that support robust and understandable grouping of information, such as grouping related information in the same form step and categorizing similar products under the same section * ensure information that is presented visually can also be accessed through different means, for example through equivalent descriptions of a product image #### Teaching Ideas for Topic diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 5561c9a6c..5903be71b 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -24,7 +24,7 @@ navigation: Courses based on this module should: -[To be developed] +[To be developed.] ## Learning Outcomes for Module @@ -47,7 +47,7 @@ Students should be able to: Skills required for this module: -[To be developed] +[To be developed.] ## Topics to Teach @@ -165,10 +165,10 @@ Optional ideas to support assessment: Optional ideas to support assessment: -[To be developed] +[To be developed.] ## Teaching Resources Suggested resources to support your teaching: -[To be developed] +[To be developed.] diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index d6ff53791..463d9dbe0 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -24,7 +24,7 @@ navigation: Courses based on this module should: -[To be developed] +[To be developed.] ## Learning Outcomes for Module @@ -42,7 +42,7 @@ Students should be able to: Skills required for this module: -[To be developed] +[To be developed.] ## Topics to Teach @@ -91,10 +91,10 @@ Students should be able to: Optional ideas to support assessment: -[To be developed] +[To be developed.] ## Teaching Resources Suggested resources to support your teaching: -[To be developed] +[To be developed.] diff --git a/content/designer/navigation-and-orientation.md b/content/designer/navigation-and-orientation.md index 3ac4ddb1c..dbea25d32 100644 --- a/content/designer/navigation-and-orientation.md +++ b/content/designer/navigation-and-orientation.md @@ -24,7 +24,7 @@ navigation: Courses based on this module should: -[To be developed] +[To be developed.] ## Learning Outcomes for Module @@ -40,7 +40,7 @@ Students should be able to: Skills required for this module: -[To be developed] +[To be developed.] {% comment %} @@ -129,10 +129,10 @@ Optional ideas to support assessment: Optional ideas to support assessment: -[To be developed] +[To be developed.] ## Teaching Resources Suggested resources to support your teaching: -[To be developed] +[To be developed.] diff --git a/content/designer/page-layout.md b/content/designer/page-layout.md index dcd8b0062..e5993d928 100644 --- a/content/designer/page-layout.md +++ b/content/designer/page-layout.md @@ -47,7 +47,7 @@ Students should be able to: Skills required for this module: -[To be developed] +[To be developed.] ## Topics to Teach @@ -116,10 +116,10 @@ Students should be able to: Optional ideas to support assessment: -[To be developed] +[To be developed.] ## Teaching Resources Suggested resources to support your teaching: -[To be developed] +[To be developed.] diff --git a/content/designer/responsive-design.md b/content/designer/responsive-design.md index 81f58b0e5..fbf0d9eba 100644 --- a/content/designer/responsive-design.md +++ b/content/designer/responsive-design.md @@ -47,7 +47,7 @@ Students should be able to: Skills required for this module: -[To be developed] +[To be developed.] ## Topics to Teach @@ -131,11 +131,11 @@ Optional ideas to support assessment: Optional ideas to support assessment: -[To be developed] +[To be developed.] ## Teaching Resources Suggested resources to support your teaching: -[To be developed] +[To be developed.] From 72f67b9e21e26b9e52436af51055eef66ee96e80 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 26 Mar 2021 10:13:02 +0100 Subject: [PATCH 053/416] Updating yml --- _data/navigation.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_data/navigation.yml b/_data/navigation.yml index 3e59a8d99..2f8b51c6e 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -266,7 +266,7 @@ - name: Navigation and Orientation url: "/curricula/designer-modules/navigation-and-orientation/" - name: Information Design - url: "curricula/designer-modules/information-design" + url: "/curricula/designer-modules/information-design/" - name: Images url: "/curricula/designer-modules/images/" - name: Multimedia and Animations From 9e0ce5fe42543d138d0b5748f2c187c76d95a26b Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 13 Apr 2021 10:46:53 +0200 Subject: [PATCH 054/416] Updates to designer modules --- _data/navigation.yml | 8 ++--- content/designer/designer-modules.md | 2 +- .../{images.md => images-and-graphics.md} | 21 ++++++------ ...-design.md => inclusive-design-process.md} | 34 +++++++++++-------- content/designer/information-design.md | 20 ++++++----- content/designer/interaction-and-feedback.md | 14 ++++---- content/designer/multimedia-and-animations.md | 14 ++++---- .../designer/navigation-and-orientation.md | 7 ++-- content/designer/page-layout.md | 22 ++++++------ content/designer/responsive-design.md | 10 +++--- 10 files changed, 81 insertions(+), 71 deletions(-) rename content/designer/{images.md => images-and-graphics.md} (79%) rename content/designer/{inclusive-design.md => inclusive-design-process.md} (72%) diff --git a/_data/navigation.yml b/_data/navigation.yml index 2f8b51c6e..876f80305 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -259,16 +259,16 @@ - name: Designer Modules url: "/curricula/designer-modules/" pages: - - name: Inclusive Design - url: "/curricula/designer-modules/inclusive-design/" + - name: Inclusive Design Process + url: "/curricula/designer-modules/inclusive-design-process/" - name: Page Layout url: "/curricula/designer-modules/page-layout/" - name: Navigation and Orientation url: "/curricula/designer-modules/navigation-and-orientation/" - name: Information Design url: "/curricula/designer-modules/information-design/" - - name: Images - url: "/curricula/designer-modules/images/" + - name: Images and Graphics + url: "/curricula/designer-modules/images-and-graphics/" - name: Multimedia and Animations url: "/curricula/designer-modules/multimedia-and-animations/" - name: Interaction and Feedback diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 11ce08724..bfc34a030 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -19,7 +19,7 @@ parent_in_h1: name: title navigation: previous: /curricula/developer-modules/rich-applications/ - next: /curricula/designer-modules/inclusive-design/ + next: /curricula/designer-modules/inclusive-designprocess/ --- ## Introduction diff --git a/content/designer/images.md b/content/designer/images-and-graphics.md similarity index 79% rename from content/designer/images.md rename to content/designer/images-and-graphics.md index efca6488e..bc9151383 100644 --- a/content/designer/images.md +++ b/content/designer/images-and-graphics.md @@ -1,12 +1,12 @@ --- -title: "[Draft] Module 5: Images" -nav_title: "Images" -permalink: /curricula/designer-modules/images/ -ref: /curricula/designer-modules/images/ +title: "[Draft] Module 5: Images and Graphics" +nav_title: "Images and Graphics" +permalink: /curricula/designer-modules/images-and-graphics/ +ref: /curricula/designer-modules/images-and-graphics/ lang: en github: repository: w3c/wai-curricula - path: content/designer/images.md + path: content/designer/images-and-graphics.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ @@ -31,13 +31,12 @@ Courses based on this module should: Students should be able to: * explain how people with disabilities obtain information contained in images through different methods, such as through text alternatives and descriptions -* explain how images can help some groups of people with disabilities better understand the context and functionality of user interface components -* identify and describe different types of images from an accessibility perspective, such as informative, textual, decorative, functional, and complex images -* provide appropriate text alternatives for images included in the design phase, such as logos or graphical components -* provide text that allows users to identify graphical interactive elements such as links or menu items +* explain how images help people with different types of disabilities better understand the information, context, and functionality +* provide appropriate text alternatives for graphical components included in the design phase, such as logos, links`, and menu items * describe alternative ways to convey information presented in text, such as using graphics, color, or shapes -* create designs that allow to provide accurate descriptions for components such as charts or diagrams -* identify related requirements for developers to ensure alternatives and descriptions are programmatically associated to their corresponding component +* create designs that consider descriptions for images and graphics such as charts or diagrams +* identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding images and graphics +* identify related requirements for content authors to provide appropriate text alternatives for different types of images, including informative, textual, decorative, functional, and complex ## Competencies diff --git a/content/designer/inclusive-design.md b/content/designer/inclusive-design-process.md similarity index 72% rename from content/designer/inclusive-design.md rename to content/designer/inclusive-design-process.md index 19ca9226d..b119d13bd 100644 --- a/content/designer/inclusive-design.md +++ b/content/designer/inclusive-design-process.md @@ -1,12 +1,12 @@ --- -title: "[Draft] Module 1: Inclusive Design" -nav_title: "Inclusive Design" -permalink: /curricula/designer-modules/inclusive-design/ -ref: /curricula/designer-modules/inclusive-design/ +title: "[Draft] Module 1: Inclusive Design Process" +nav_title: "Inclusive Design Process" +permalink: /curricula/designer-modules/inclusive-design-process/ +ref: /curricula/designer-modules/inclusive-design-process/ lang: en github: repository: w3c/wai-curricula - path: content/designer/inclusive-design-and-requirements.md + path: content/designer/inclusive-design-process.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ @@ -35,11 +35,11 @@ Courses based on this module should: Students should be able to: -* describe how involving users with disabilities early and throughout in the design and development process can lead to better accessibility of websites and applications -* explain strategies that people with disabilities use to interact with the Web -* ensure applicable accessibility requirements, such as those collected in standards and policies, are researched and included in the overall project requirements -* ensure people with disabilities are included in different design and development processes and stages, for example in focus groups, personas, scenarios, and usability testing -* ensure that collected user input includes different groups of users with disabilities and various levels of experience using the Web +* describe how involving users with disabilities early and throughout in the design and development process leads to better accessibility of websites and applications +* explain strategies and assistive technologies that people with disabilities use to interact with the Web +* research and communicate applicable design requirements, such as those defined by accessibility standards and policies +* ??? manage the involvement of people with disabilities in different stages of the design and development process, for example in focus groups, personas, scenarios, and usability testing +* ??? manage representation of diverse groups of users with disabilities, including people with various levels of skills using assistive technologies and adaptive strategies * ensure people with disabilities can provide informed consent, respond to questions, and otherwise participate in the design and development processes in an accessible way ## Competencies @@ -59,9 +59,9 @@ Topics to achieve the learning outcomes: Students should be able to: * explain the use of different assistive technologies and adaptive strategies by various groups of people with disabilities to interact with websites and applications -* ensure different types of disabilities are included when defining user groups -* ensure different types of accessibility barriers and features are included in the research phase -* ensure research is conducted on accessibility guidelines, standards, and policies to define and include accessibility requirements in the overall project requirements +* ensure different types of users with disabilities are included when defining user groups +* ensure different types of accessibility barriers and features, such as appropriate contrast ratios and meaningful page structure, are included in the research phase +* ensure research is conducted on accessibility guidelines, standards, and policies to define and include accessibilityin the overall project requirements * determine the characteristics of participants in user research activities based on different factors, such as overall project requirements, level of experience, use of assistive technology, and type of disability * ensure people with disabilities are involved early and throughout the research processes, including in focus groups, questionnaires, and surveys @@ -77,13 +77,17 @@ Optional ideas to support assessment: [To be developed.] -### Topic: Gathering Requirements +### Topic: Establishing Requirements #### Learning Outcomes for Topic Students should be able to: -* ensure different types of user requirements that relate to people with disabilities are considered, for example appropriate contrast ratios, availability of content and functionality in different screen sizes and configurations, keyboard compatibility, and use with assistive technologies and adaptive strategies +* ensure different types of user requirements that relate to people with disabilities are considered, such as: + * appropriate contrast ratios + * availability of content and functionality in different screen sizes and configurations + * keyboard compatibility + * use with assistive technologies and adaptive strategies * create personas that include people with different types of disabilities and different levels of experience using the Web * create scenarios that include use of the website or application with different types of assistive technologies and adaptive strategies diff --git a/content/designer/information-design.md b/content/designer/information-design.md index e80bf5f5c..0a34faed0 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -16,7 +16,7 @@ footer: >

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: previous: /curricula/designer-modules/navigation-and-orientation/ - next: /curricula/designer-modules/images/ + next: /curricula/designer-modules/images-and-graphics/ --- ## Introduction @@ -31,13 +31,17 @@ Courses based on this module should: Students should be able to: * explain how people with disabilities perceive and access different types of information and perform different tasks within websites and applications -* explain how different long pieces of text can be presented and visualized in different ways, for example presenting all the text at once and presenting smaller pieces one at a time -* identify different uses of text, for example for labels, static content, and dynamic messages, and describe alternative ways to convey information presented in text, such as using graphics, color, or shapes -* identify and define different types of tables from an accessibility perspective, such as layout, simple, and complex tables -* describe different ways in which information presented in tables can be consumed, such as using nested lists, splitting the table into simpler tables, or presenting information in plain text -* ensure different journeys, flows, and processes are accessible to all users, for example different flows to perform a task within a website or different ways to check the details of a given product -* describe different techniques to group information in form fields to make it more understandable by all users, such as splitting the form into several more comprehensive steps and providing clear instructions for users to understand what is expected from their input -* identify related requirements for developers to ensure that instructions for form controls are programmatically associated to their corresponding control and that table header cells are programmatically associated to their corresponding data cells +* explain the use of headings and pages to divide longer passages of text into smaller pieces +* describe supplemental ways to convey information presented in text, such as using graphics, color, or shapes +* describe the accessibility challenges that complex tables create, including the difficulty to process the relationships between header and data cells and the need to scroll horizontally and vertically to visualize the contents +* explain different ways to present information in tables, including splitting complex tables into simpler tables, lists, and plain text where possible +* ??? ensure different journeys, flows, and processes are accessible to all users, for example different flows to perform a task within a website or different ways to check the details of a given product +* ??? describe the accessibility challenges in form fields, including THE difficulty to relate labels to form controls and the difficulty to understand the purpose of form fields +* ??? describe ways to make forms more understandable, for example providing labels and instructions and grouping related form fields into their corresponding step +* ??? identify related requirements for developers to programmatically associate table header cells to their corresponding data cells +* ??? identify related requirements for developers to programmatically associate instructions for form controls to their corresponding control +* ??? identify related requirements for developers to programmatically associate headings to their corresponding text + ## Competencies diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 5903be71b..b3a7b6edc 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -31,14 +31,16 @@ Courses based on this module should: Students should be able to: * explain strategies that people with disabilities use to identify, distinguish, and operate interactive user interface components, such as forms and custom widgets -* ensure all interactive user interface components can be operated using the keyboard -* provide clear and distinguishable names and instructions that allow to identify interactive user interface components, such as form fields and custom widgets -* provide meaningful and descriptive notification messages about imminent time limits, errors, suggestions for corrections, successes, or any other event resulting from user input -* create designs that allow for interactive user interface components to have meaningful sequence and clear focus indicators both individually and when operated in the context of a rich application +* ??? create designs with mechanisms to operate all interactive user interface components with the keyboard +* ??? provide clear and distinguishable names to identify interactive user interface components, such as form fields and custom widgets +* ??? provide clear instructions to help understand the purpose of user interface components, such as form fields or custom widgets +* provide meaningful and descriptive notifications about imminent time limits, status changes, and feedback from user input, including errors, suggestions for correction, and success messages +* create designs with meaningful sequence of interactive user interface components +* ??? create designs that preserve visibility and operability both individually and in the context of a rich application * define custom interaction patterns, such as where to place focus when a dialog is open and closed, and what the focus order should be within those dialogs -* define mechanisms that allow users to obtain information about custom interaction patterns, such as specific keyboard shortcuts for applications and expected behavior of custom widgets +* define mechanisms to obtain information about custom interaction patterns, such as specific keyboard shortcuts for applications and expected behavior of custom widgets * identify related requirements for developers to use native HTML elements to the extent possible and describe their benefits in relation to non-native elements -* identify related requirements for developers to ensure that properties of custom user interface components, such as names, states, and instructions are perceived visually and can be programmatically determined +* identify related requirements for developers to programmatically associate properties of custom user interface components, such as names, states, and instructions to their corresponding component * identify related requirements for developers to write code for specific keyboard interactions that custom widgets may require {% include excol.html type="all" %} diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 463d9dbe0..6c6729119 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -15,7 +15,7 @@ footer: >

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: - previous: /curricula/designer-modules/images/ + previous: /curricula/designer-modules/images-and-graphics/ next: /curricula/designer-modules/interaction-and-feedback/ --- @@ -30,11 +30,13 @@ Courses based on this module should: Students should be able to: -* identify different types of audio or video content and relate each of them to the user needs of people with disabilities -* create designs that allow to provide alternatives to multimedia content, such as transcripts for audio and audio described content, -* create designs that allow for mechanisms to pause, stop, and hide any moving, blinking, scrolling, auto-updating, and auto-playing content, such as animations, carousels, or auto-playing audio -* identify different types of audio or video content and relate each of them to the user needs of people with disabilities -* create designs that allow to provide alternatives to multimedia content, such as transcripts for audio and audio described content, +* identify accessibility requirements for different types of audio or video content +* ??? create designs that consider alternatives to multimedia content, such as transcripts for audio and audio described content, +* ??? create designs with mechanisms to switch transcripts and audio described content on or off +* ??? create designs with mechanisms to pause, stop, and hide any moving and auto-updating content, including animations and carousels +* ??? create designs with mechanisms to stop or control the volume of auto-playing audio +* identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding media content +* identify related requirements for content authors to provide appropriate text alternatives for different types of media content, including video and audio {% include excol.html type="all" %} diff --git a/content/designer/navigation-and-orientation.md b/content/designer/navigation-and-orientation.md index dbea25d32..635d1aaf0 100644 --- a/content/designer/navigation-and-orientation.md +++ b/content/designer/navigation-and-orientation.md @@ -31,9 +31,8 @@ Courses based on this module should: Students should be able to: * explain strategies that people with disabilities use to navigate and orient themselves in web pages and applications -* create designs that allow users to bypass blocks of repeated content, such as navigation links, header contents, or advertisements -* create designs that allow for multiple navigational mechanisms, such as menus, search boxes, breadcrumb trails, tables of contents, and sitemaps -* create designs that allow users to stop, adjust, and extend existing time limits set by the content +* create designs with mechanisms to bypass blocks of repeated content, such as navigation links, header contents, or advertisements +* create designs with multiple navigational mechanisms, such as menus, search boxes, breadcrumb trails, tables of contents, and sitemaps * identify related requirements for developers to ensure that navigational mechanisms can be used with the keyboard and other input devices ## Competencies @@ -108,7 +107,7 @@ Optional ideas to support assessment: Students should be able to: -* create designs that allow users to turn off time limits, for example time limits in a form or times for which information is shown +* create designs that allow users to turn off time limits, for example to complete a form or to visualize information at the users pace * create designs that allow users to adjust existing time limits up to at least 10 times the original setting * create designs that support extending existing time limits by warning the user at least 20 seconds before the time limit expires * ensure content that auto scrolls can be paused and resumed from where it was left to allow users to better read and process content diff --git a/content/designer/page-layout.md b/content/designer/page-layout.md index e5993d928..24313c4dc 100644 --- a/content/designer/page-layout.md +++ b/content/designer/page-layout.md @@ -20,7 +20,7 @@ parent_in_h1: - ref: /curricula/ name: "Curricula on Web Accessibility" navigation: - previous: /curricula/designer-modules/inclusive-design/ + previous: /curricula/designer-modules/inclusive-design-process/ next: /curricula/designer-modules/navigation-and-orientation/ --- @@ -35,12 +35,12 @@ Courses based on this module should: Students should be able to: -* explain how people with disabilities identify and distinguish user interface components based on different features such as color, structure, layout, pattern, and spacing -* create designs that allow for appropriate contrast ratios between foreground user interface components (such as text, images of text, and controls) and their corresponding background -* ensure additional mechanisms apart from color alone are available to convey information, such as text cues, patterns, and icons -* create designs that allow for clear and distinguishable focus indicators, for example using borders, background color, and highlighting -* ensure different page regions and user interface components are placed where users expect them and are distinguishable from one another through different ways, such as through color, typography, patterns, and spacing -* provide clear and descriptive heading texts that allow users to identify different sections of the web page and parts of the content +* ??? explain how people with disabilities identify and distinguish user interface components based on different features such as color, layout, spacing, position, landmarks, and naming +* create designs with sufficient contrast ratios between foreground user interface components, including text, images of text, and controls, and their corresponding background +* ??? create designs with text cues, patterns, and icons to supplement information conveyed through color +* create designs with clear and distinguishable focus indicators, for example using borders, background color, and highlighting +* ??? ensure different regions and user interface components are placed where users expect them and are distinguishable from one another, for example through color, typography, patterns, spacing, position and naming +* ??? provide clear and descriptive heading texts that allow users to identify different regions and parts of the content * identify related requirements for developers to ensure that headings are coded appropriately and are nested according to the hierarchical structure of the page ## Competencies @@ -59,7 +59,7 @@ Topics to achieve the learning outcomes: Students should be able to: -* explain how appropriate contrast ratios allow people with disabilities to read, understand, and distinguish foreground from background user interface components +* explain how appropriate contrast ratios allow people with disabilities to read, understand, and distinguish user interface components * create designs that allow text and images of text to have a contrast ratio of at least 4.5:1 with respect to their background * create designs that allow for large-scale text and images of text to have a contrast ratio of at least 3:1 with respect to their background * create designs that allow user interface components and graphical elements to have a contrast ratio of at least 3:1 with respect to their background @@ -84,10 +84,10 @@ Optional ideas to support assessment: Students should be able to: * ensure distinguishable styles are applied to different page regions, such as header, navigation, main, and footer -* ensure distinguishable styles are used to identify different components, such as text, links, buttons, or form elements +* ensure distinguishable styles are used for different components, such as text, links, buttons, or form elements * create designs that allow for text cues to convey any information that is provided using color alone, such as an asterisk to convey required form fields in a form -* ensure that information conveyed through differences in text color is also conveyed using other visual cues, such as underline, bold, and italics * ensure that information provided using differences in color is also provided using different patterns, shapes, and icons +* ensure that information conveyed through differences in text color is also conveyed using other visual cues, such as underline, bold, and italics #### Teaching Ideas for Topic @@ -109,7 +109,7 @@ Students should be able to: * provide distinctive styles and descriptive names for each of the page regions, headings, and for individual user interface components such as links, buttons, or form fields * ensure positioning of page regions falls under user expectations, such as headers at the top, footers at the bottom, and navigation regions at the top left in a desktop view -* ensure appropriate heading levels are used to convey the hierarchical structure of the content +* ensure heading levels a-6 are used to convey the hierarchical structure of the content * identify related requirements for developers to ensure headings are coded appropriately, perceived by assistive technologies, and nested according to the specifications ## Ideas to Assess Knowledge for Module diff --git a/content/designer/responsive-design.md b/content/designer/responsive-design.md index fbf0d9eba..b4e7fffc7 100644 --- a/content/designer/responsive-design.md +++ b/content/designer/responsive-design.md @@ -35,10 +35,10 @@ Courses based on this module should: Students should be able to: * explain how people with disabilities use different screen sizes, screen configurations, and style sheets to access websites and applications -* create designs that allow for target sizes that can be tapped by users with mobility impairments and using different input methods -* ensure meaningful sequence, content, and functionality are preserved when using different viewport sizes, screen configurations, and devices to access content -* create designs that allow to preserve content and functionality when line height as well as spacing between paragraphs, words, and letters are modified by the user -* create designs that allow text resizing without loss of content and functionality +* create designs with target sizes and spaces to support tapping by people with mobility impairments and people using different input methods +* create designs that preserve meaningful sequence, content, and functionality when using different viewport sizes, screen configurations, and devices to access content +* create designs that preserve content and functionality when line height as well as spacing between paragraphs, words, and letters are modified by the user +* create designs that support text resizing without loss of content and functionality * create designs that do not restrict the content view and operation to a single display orientation, such as portrait or landscape * ensure input modalities do not rely solely on multipoint or path-based gestures, such as swipe or pinch * ensure that mechanisms to undo or abort an action carried out with pointer operations are always available @@ -87,7 +87,7 @@ Students should be able to: * create designs that allow users to modify the following properties without loss of content and functionality: * line spacing -- to at least 1.5 times the font size * spacing following paragraphs -- to at least 2 times the font size - * Letter spacing (tracking) -- to at least 0.12 times the font size + * letter spacing (tracking) -- to at least 0.12 times the font size * ensure target sizes that are at least 44 by 44 CSS pixels #### Teaching Ideas for Topic From 77b16362c6528c553ad64baf1f375dd1207ef4e6 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 13 Apr 2021 11:02:51 +0200 Subject: [PATCH 055/416] Updates to designer modules --- content/designer/inclusive-design-process.md | 4 ++-- content/designer/information-design.md | 13 ++++++------- content/designer/interaction-and-feedback.md | 8 ++++---- content/designer/multimedia-and-animations.md | 8 ++++---- content/designer/page-layout.md | 8 ++++---- 5 files changed, 20 insertions(+), 21 deletions(-) diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index b119d13bd..4a4b0439d 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -38,8 +38,8 @@ Students should be able to: * describe how involving users with disabilities early and throughout in the design and development process leads to better accessibility of websites and applications * explain strategies and assistive technologies that people with disabilities use to interact with the Web * research and communicate applicable design requirements, such as those defined by accessibility standards and policies -* ??? manage the involvement of people with disabilities in different stages of the design and development process, for example in focus groups, personas, scenarios, and usability testing -* ??? manage representation of diverse groups of users with disabilities, including people with various levels of skills using assistive technologies and adaptive strategies +* manage the involvement of people with disabilities in different stages of the design and development process, for example in focus groups, personas, scenarios, and usability testing +* manage representation of diverse groups of users with disabilities, including people with various levels of skills using assistive technologies and adaptive strategies * ensure people with disabilities can provide informed consent, respond to questions, and otherwise participate in the design and development processes in an accessible way ## Competencies diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 0a34faed0..5af6b3d3d 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -35,13 +35,12 @@ Students should be able to: * describe supplemental ways to convey information presented in text, such as using graphics, color, or shapes * describe the accessibility challenges that complex tables create, including the difficulty to process the relationships between header and data cells and the need to scroll horizontally and vertically to visualize the contents * explain different ways to present information in tables, including splitting complex tables into simpler tables, lists, and plain text where possible -* ??? ensure different journeys, flows, and processes are accessible to all users, for example different flows to perform a task within a website or different ways to check the details of a given product -* ??? describe the accessibility challenges in form fields, including THE difficulty to relate labels to form controls and the difficulty to understand the purpose of form fields -* ??? describe ways to make forms more understandable, for example providing labels and instructions and grouping related form fields into their corresponding step -* ??? identify related requirements for developers to programmatically associate table header cells to their corresponding data cells -* ??? identify related requirements for developers to programmatically associate instructions for form controls to their corresponding control -* ??? identify related requirements for developers to programmatically associate headings to their corresponding text - +* manage the accessibility implications of different processes (including user journeys and workflows), for example different methods to perform a task within a website or application +* describe the accessibility challenges in form fields, including THE difficulty to relate labels to form controls and the difficulty to understand the purpose of form fields +* describe ways to make forms more understandable, for example providing labels and instructions and grouping related form fields into their corresponding step +* identify related requirements for developers to programmatically associate table header cells to their corresponding data cells +* identify related requirements for developers to programmatically associate instructions for form controls to their corresponding control +* identify related requirements for developers to programmatically associate headings to their corresponding text ## Competencies diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index b3a7b6edc..e345aa65b 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -31,12 +31,12 @@ Courses based on this module should: Students should be able to: * explain strategies that people with disabilities use to identify, distinguish, and operate interactive user interface components, such as forms and custom widgets -* ??? create designs with mechanisms to operate all interactive user interface components with the keyboard -* ??? provide clear and distinguishable names to identify interactive user interface components, such as form fields and custom widgets -* ??? provide clear instructions to help understand the purpose of user interface components, such as form fields or custom widgets +* create designs with mechanisms to operate all interactive user interface components with the keyboard +* provide clear and distinguishable names to identify interactive user interface components, such as form fields and custom widgets +* provide clear instructions to help understand the purpose of user interface components, such as form fields or custom widgets * provide meaningful and descriptive notifications about imminent time limits, status changes, and feedback from user input, including errors, suggestions for correction, and success messages * create designs with meaningful sequence of interactive user interface components -* ??? create designs that preserve visibility and operability both individually and in the context of a rich application +* create designs that preserve visibility and operability both individually and in the context of a rich application * define custom interaction patterns, such as where to place focus when a dialog is open and closed, and what the focus order should be within those dialogs * define mechanisms to obtain information about custom interaction patterns, such as specific keyboard shortcuts for applications and expected behavior of custom widgets * identify related requirements for developers to use native HTML elements to the extent possible and describe their benefits in relation to non-native elements diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 6c6729119..38121b086 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -31,10 +31,10 @@ Courses based on this module should: Students should be able to: * identify accessibility requirements for different types of audio or video content -* ??? create designs that consider alternatives to multimedia content, such as transcripts for audio and audio described content, -* ??? create designs with mechanisms to switch transcripts and audio described content on or off -* ??? create designs with mechanisms to pause, stop, and hide any moving and auto-updating content, including animations and carousels -* ??? create designs with mechanisms to stop or control the volume of auto-playing audio +* create designs that consider alternatives to multimedia content, such as transcripts for audio and audio described content, +* create designs with mechanisms to switch transcripts and audio described content on or off +* create designs with mechanisms to pause, stop, and hide any moving and auto-updating content, including animations and carousels +* create designs with mechanisms to stop or control the volume of auto-playing audio * identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding media content * identify related requirements for content authors to provide appropriate text alternatives for different types of media content, including video and audio diff --git a/content/designer/page-layout.md b/content/designer/page-layout.md index 24313c4dc..5a3639d83 100644 --- a/content/designer/page-layout.md +++ b/content/designer/page-layout.md @@ -35,12 +35,12 @@ Courses based on this module should: Students should be able to: -* ??? explain how people with disabilities identify and distinguish user interface components based on different features such as color, layout, spacing, position, landmarks, and naming +* explain how people with disabilities identify and distinguish user interface components based on different features such as color, layout, spacing, position, landmarks, and naming * create designs with sufficient contrast ratios between foreground user interface components, including text, images of text, and controls, and their corresponding background -* ??? create designs with text cues, patterns, and icons to supplement information conveyed through color +* create designs with text cues, patterns, and icons to supplement information conveyed through color * create designs with clear and distinguishable focus indicators, for example using borders, background color, and highlighting -* ??? ensure different regions and user interface components are placed where users expect them and are distinguishable from one another, for example through color, typography, patterns, spacing, position and naming -* ??? provide clear and descriptive heading texts that allow users to identify different regions and parts of the content +* ensure different regions and user interface components are placed where users expect them and are distinguishable from one another, for example through color, typography, patterns, spacing, position and naming +* provide clear and descriptive heading texts that allow users to identify different regions and parts of the content * identify related requirements for developers to ensure that headings are coded appropriately and are nested according to the hierarchical structure of the page ## Competencies From 19959ddfa6cb40240e91d0b516d22748e7f5fe51 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 13 Apr 2021 12:41:53 +0200 Subject: [PATCH 056/416] Updates to designer modules --- content/designer/images-and-graphics.md | 9 ++++----- content/designer/information-design.md | 7 ++++--- content/designer/interaction-and-feedback.md | 10 ++++------ content/designer/multimedia-and-animations.md | 4 ++-- content/designer/responsive-design.md | 4 ++-- 5 files changed, 16 insertions(+), 18 deletions(-) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index bc9151383..33680a3bd 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -30,13 +30,12 @@ Courses based on this module should: Students should be able to: -* explain how people with disabilities obtain information contained in images through different methods, such as through text alternatives and descriptions -* explain how images help people with different types of disabilities better understand the information, context, and functionality -* provide appropriate text alternatives for graphical components included in the design phase, such as logos, links`, and menu items -* describe alternative ways to convey information presented in text, such as using graphics, color, or shapes +* explain how images affect processing of information and understanding of context and functionality by people with disabilities +* provide appropriate text alternatives for graphical components included in the design phase, such as logos, links, and menu items +* describe ways to illustrate information presented in text, including use of graphics, color, or shapes * create designs that consider descriptions for images and graphics such as charts or diagrams * identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding images and graphics -* identify related requirements for content authors to provide appropriate text alternatives for different types of images, including informative, textual, decorative, functional, and complex +* identify related requirements for content authors to provide appropriate text alternatives for images ## Competencies diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 5af6b3d3d..28a96ce4a 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -33,14 +33,15 @@ Students should be able to: * explain how people with disabilities perceive and access different types of information and perform different tasks within websites and applications * explain the use of headings and pages to divide longer passages of text into smaller pieces * describe supplemental ways to convey information presented in text, such as using graphics, color, or shapes -* describe the accessibility challenges that complex tables create, including the difficulty to process the relationships between header and data cells and the need to scroll horizontally and vertically to visualize the contents +* describe the accessibility challenges that complex tables create, including the difficulty to process the relationships between header and data cells and the need to scroll horizontally and vertically to visualize the table content * explain different ways to present information in tables, including splitting complex tables into simpler tables, lists, and plain text where possible * manage the accessibility implications of different processes (including user journeys and workflows), for example different methods to perform a task within a website or application * describe the accessibility challenges in form fields, including THE difficulty to relate labels to form controls and the difficulty to understand the purpose of form fields -* describe ways to make forms more understandable, for example providing labels and instructions and grouping related form fields into their corresponding step +* describe mechanisms to make forms more understandable, including labels and instructions +* create designs that support grouping related form fields into their corresponding step +* identify related requirements for developers to programmatically associate headings to their corresponding text * identify related requirements for developers to programmatically associate table header cells to their corresponding data cells * identify related requirements for developers to programmatically associate instructions for form controls to their corresponding control -* identify related requirements for developers to programmatically associate headings to their corresponding text ## Competencies diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index e345aa65b..e78042c21 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -31,17 +31,15 @@ Courses based on this module should: Students should be able to: * explain strategies that people with disabilities use to identify, distinguish, and operate interactive user interface components, such as forms and custom widgets -* create designs with mechanisms to operate all interactive user interface components with the keyboard -* provide clear and distinguishable names to identify interactive user interface components, such as form fields and custom widgets -* provide clear instructions to help understand the purpose of user interface components, such as form fields or custom widgets +* create designs that consider different input mechanisms, including mouse, touch, and keyboard +* provide clear and distinguishable ways to identify interactive user interface components, including through naming and placement +* provide methods to help understand the context, information, and functionality of user interface components, including through textual instructions, visual cues, and icons * provide meaningful and descriptive notifications about imminent time limits, status changes, and feedback from user input, including errors, suggestions for correction, and success messages * create designs with meaningful sequence of interactive user interface components -* create designs that preserve visibility and operability both individually and in the context of a rich application * define custom interaction patterns, such as where to place focus when a dialog is open and closed, and what the focus order should be within those dialogs * define mechanisms to obtain information about custom interaction patterns, such as specific keyboard shortcuts for applications and expected behavior of custom widgets -* identify related requirements for developers to use native HTML elements to the extent possible and describe their benefits in relation to non-native elements * identify related requirements for developers to programmatically associate properties of custom user interface components, such as names, states, and instructions to their corresponding component -* identify related requirements for developers to write code for specific keyboard interactions that custom widgets may require +* identify related requirements for developers to write code for custom keyboard interactions that custom widgets may require {% include excol.html type="all" %} diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 38121b086..f23229e03 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -31,12 +31,12 @@ Courses based on this module should: Students should be able to: * identify accessibility requirements for different types of audio or video content -* create designs that consider alternatives to multimedia content, such as transcripts for audio and audio described content, +* create designs that consider placement of alternatives to multimedia content, such as transcripts for audio and audio described content, * create designs with mechanisms to switch transcripts and audio described content on or off * create designs with mechanisms to pause, stop, and hide any moving and auto-updating content, including animations and carousels * create designs with mechanisms to stop or control the volume of auto-playing audio * identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding media content -* identify related requirements for content authors to provide appropriate text alternatives for different types of media content, including video and audio +* identify related requirements for content authors to provide appropriate text alternatives and audio descriptions for different types of media content, including video and audio {% include excol.html type="all" %} diff --git a/content/designer/responsive-design.md b/content/designer/responsive-design.md index b4e7fffc7..7d71f3c5c 100644 --- a/content/designer/responsive-design.md +++ b/content/designer/responsive-design.md @@ -40,8 +40,8 @@ Students should be able to: * create designs that preserve content and functionality when line height as well as spacing between paragraphs, words, and letters are modified by the user * create designs that support text resizing without loss of content and functionality * create designs that do not restrict the content view and operation to a single display orientation, such as portrait or landscape -* ensure input modalities do not rely solely on multipoint or path-based gestures, such as swipe or pinch -* ensure that mechanisms to undo or abort an action carried out with pointer operations are always available +* create designs that support alternatives to multipoint or path-based gestures, such as swipe or pinch +* create designs with mechanisms to undo or abort an action carried out with pointer operations ## Competencies From 2d6d2a113fdad8971364862008c77e798d91b265 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 15 Apr 2021 16:39:43 +0200 Subject: [PATCH 057/416] Updates to learning outcomes for modules --- _data/navigation.yml | 4 ++-- ...n.md => flexible-and-responsive-design.md} | 15 +++++++------ content/designer/images-and-graphics.md | 5 ++++- content/designer/inclusive-design-process.md | 11 ++++++++-- content/designer/information-design.md | 21 ++++++++++++------- content/designer/interaction-and-feedback.md | 11 ++++++---- content/designer/multimedia-and-animations.md | 3 +++ .../designer/navigation-and-orientation.md | 10 ++++++++- content/designer/page-layout.md | 14 +++++++------ 9 files changed, 64 insertions(+), 30 deletions(-) rename content/designer/{responsive-design.md => flexible-and-responsive-design.md} (90%) diff --git a/_data/navigation.yml b/_data/navigation.yml index 876f80305..2a3272b9d 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -273,8 +273,8 @@ url: "/curricula/designer-modules/multimedia-and-animations/" - name: Interaction and Feedback url: "/curricula/designer-modules/interaction-and-feedback/" - - name: Responsive Design - url: "/curricula/designer-modules/responsive-design/" + - name: Flexible and Responsive Design + url: "/curricula/designer-modules/flexible-and-responsive-design/" - name: Changelog url: "/curricula/changelog/" hide: true diff --git a/content/designer/responsive-design.md b/content/designer/flexible-and-responsive-design.md similarity index 90% rename from content/designer/responsive-design.md rename to content/designer/flexible-and-responsive-design.md index 7d71f3c5c..4d6c25ac8 100644 --- a/content/designer/responsive-design.md +++ b/content/designer/flexible-and-responsive-design.md @@ -1,12 +1,12 @@ --- -title: "[Draft] Module 8: Responsive Design" -nav_title: "Responsive Design" -permalink: /curricula/designer-modules/responsive-design/ -ref: /curricula/designer-modules/responsive-design/ +title: "[Draft] Module 8: Flexible and Responsive Design" +nav_title: "Flexible and Responsive Design" +permalink: /curricula/designer-modules/flexible-and-responsive-design/ +ref: /curricula/designer-modules/flexible-and-responsive-design/ lang: en github: repository: w3c/wai-curricula - path: content/designer/responsive-design.md + path: content/designer/flexible-and-responsive-design.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ @@ -34,7 +34,7 @@ Courses based on this module should: Students should be able to: -* explain how people with disabilities use different screen sizes, screen configurations, and style sheets to access websites and applications +* explain how use of different screen sizes, screen configurations, and style sheets affects the ability of people with disabilities to identify, distinguish, and process websites and applications * create designs with target sizes and spaces to support tapping by people with mobility impairments and people using different input methods * create designs that preserve meaningful sequence, content, and functionality when using different viewport sizes, screen configurations, and devices to access content * create designs that preserve content and functionality when line height as well as spacing between paragraphs, words, and letters are modified by the user @@ -43,6 +43,8 @@ Students should be able to: * create designs that support alternatives to multipoint or path-based gestures, such as swipe or pinch * create designs with mechanisms to undo or abort an action carried out with pointer operations +{% comment %} + ## Competencies Skills required for this module: @@ -139,3 +141,4 @@ Suggested resources to support your teaching: [To be developed.] +{% endcomment %} \ No newline at end of file diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 33680a3bd..c9cdf07b1 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -33,10 +33,12 @@ Students should be able to: * explain how images affect processing of information and understanding of context and functionality by people with disabilities * provide appropriate text alternatives for graphical components included in the design phase, such as logos, links, and menu items * describe ways to illustrate information presented in text, including use of graphics, color, or shapes -* create designs that consider descriptions for images and graphics such as charts or diagrams +* create designs that consider descriptions for images and graphics, including charts or diagrams * identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding images and graphics * identify related requirements for content authors to provide appropriate text alternatives for images +{% comment %} + ## Competencies Skills required for this module: @@ -129,3 +131,4 @@ Optional ideas to support assessment: Suggested resources to support your teaching: [To be developed.] +{% endcomment %} \ No newline at end of file diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index 4a4b0439d..8106a8337 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -37,10 +37,16 @@ Students should be able to: * describe how involving users with disabilities early and throughout in the design and development process leads to better accessibility of websites and applications * explain strategies and assistive technologies that people with disabilities use to interact with the Web +* identify the scope of accessibility in inclusive design processes * research and communicate applicable design requirements, such as those defined by accessibility standards and policies -* manage the involvement of people with disabilities in different stages of the design and development process, for example in focus groups, personas, scenarios, and usability testing +* manage the recruitment and involvement of people with disabilities for the different user research activities of a project, including in focus groups, personas, scenarios, and usability testing * manage representation of diverse groups of users with disabilities, including people with various levels of skills using assistive technologies and adaptive strategies -* ensure people with disabilities can provide informed consent, respond to questions, and otherwise participate in the design and development processes in an accessible way +* describe different means to communicate with people with disabilities, such as use of braille or sign language +* describe and apply ethical considerations to consider when working with people with disabilities +* describe ways to make documentation for user research activities accessible to people with disabilities, including the use of accessible digital formats +* explain and select different testing methods depending on different types of disabilities, for example wireframe testing for people who have vision or screen reader testing for people who are blind + +{% comment %} ## Competencies @@ -141,3 +147,4 @@ Suggested resources to support your teaching: [To be developed.] +{% endcomment %} \ No newline at end of file diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 28a96ce4a..ad6b22070 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -30,19 +30,22 @@ Courses based on this module should: Students should be able to: -* explain how people with disabilities perceive and access different types of information and perform different tasks within websites and applications +* explain how textual, tabular, or graphical information, are processed differently depending on the type of disability * explain the use of headings and pages to divide longer passages of text into smaller pieces * describe supplemental ways to convey information presented in text, such as using graphics, color, or shapes -* describe the accessibility challenges that complex tables create, including the difficulty to process the relationships between header and data cells and the need to scroll horizontally and vertically to visualize the table content +* describe the accessibility challenges that complex tables create, including the difficulty to process the relationships between header and data cells and the need to scroll horizontally and vertically to visualize the table contents * explain different ways to present information in tables, including splitting complex tables into simpler tables, lists, and plain text where possible -* manage the accessibility implications of different processes (including user journeys and workflows), for example different methods to perform a task within a website or application +* describe the accessibility implications of different processes (including user journeys and workflows), for example different methods to perform a task within a website or application * describe the accessibility challenges in form fields, including THE difficulty to relate labels to form controls and the difficulty to understand the purpose of form fields -* describe mechanisms to make forms more understandable, including labels and instructions -* create designs that support grouping related form fields into their corresponding step +* describe methods to make forms more understandable, including labels and instructions +* create designs that support grouping related form fields (such as those to enter dates or addresses) into their corresponding step of the process +* describe accessibility challenges created when visualizing and interacting with large amounts of data, and describe ways to split these data into shorter chunks * identify related requirements for developers to programmatically associate headings to their corresponding text * identify related requirements for developers to programmatically associate table header cells to their corresponding data cells * identify related requirements for developers to programmatically associate instructions for form controls to their corresponding control +{% comment %} + ## Competencies Skills required for this module: @@ -62,9 +65,9 @@ Students should be able to: * create designs that support additional ways to convey information presented in text, such as required form fields, using icons, shapes, and colors * create designs that support mechanisms to identify specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon * create designs that support mechanisms to identify the expanded form or meaning of acronyms and abbreviations -* create designs that support alternatives to text that require reading ability more advanced than the lower secondary education level -* describe related requirements for developers to make language of page and language of parts programmatically determined -* describe related requirements for content authors to provide texts that do not require reading ability more advanced than the lower secondary education level +* create designs with clear language and easy-to-read content wherever possible +* describe related requirements for developers to make language programmatically determined +* describe related requirements for content authors to provide clear language and easy-to-read texts whenever possible #### Teaching Ideas for Topic @@ -158,3 +161,5 @@ Optional ideas to support assessment: Suggested resources to support your teaching: [To be developed + +{% endcomment %} \ No newline at end of file diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index e78042c21..cff84bada 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -16,7 +16,7 @@ footer: >

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: previous: /curricula/designer-modules/multimedia-and-animations/ - next: /curricula/designer-modules/responsive-design/ + next: /curricula/designer-modules/flexible-and-responsive-design/ --- ## Introduction @@ -30,7 +30,7 @@ Courses based on this module should: Students should be able to: -* explain strategies that people with disabilities use to identify, distinguish, and operate interactive user interface components, such as forms and custom widgets +* explain strategies that people with disabilities use to identify, distinguish, and operate interactive user interface components * create designs that consider different input mechanisms, including mouse, touch, and keyboard * provide clear and distinguishable ways to identify interactive user interface components, including through naming and placement * provide methods to help understand the context, information, and functionality of user interface components, including through textual instructions, visual cues, and icons @@ -38,8 +38,10 @@ Students should be able to: * create designs with meaningful sequence of interactive user interface components * define custom interaction patterns, such as where to place focus when a dialog is open and closed, and what the focus order should be within those dialogs * define mechanisms to obtain information about custom interaction patterns, such as specific keyboard shortcuts for applications and expected behavior of custom widgets -* identify related requirements for developers to programmatically associate properties of custom user interface components, such as names, states, and instructions to their corresponding component -* identify related requirements for developers to write code for custom keyboard interactions that custom widgets may require +* identify related requirements for developers to programmatically associate properties of interactive user interface components, such as names, states, and instructions, to their corresponding component +* identify related requirements for developers to write code for custom keyboard interactions that interactive user interface components may require + +{% comment %} {% include excol.html type="all" %} @@ -172,3 +174,4 @@ Optional ideas to support assessment: Suggested resources to support your teaching: [To be developed.] +{% endcomment %} \ No newline at end of file diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index f23229e03..5ef51f8d3 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -38,6 +38,8 @@ Students should be able to: * identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding media content * identify related requirements for content authors to provide appropriate text alternatives and audio descriptions for different types of media content, including video and audio +{% comment %} + {% include excol.html type="all" %} ## Competencies @@ -100,3 +102,4 @@ Optional ideas to support assessment: Suggested resources to support your teaching: [To be developed.] +{% endcomment %} \ No newline at end of file diff --git a/content/designer/navigation-and-orientation.md b/content/designer/navigation-and-orientation.md index 635d1aaf0..65fdeab68 100644 --- a/content/designer/navigation-and-orientation.md +++ b/content/designer/navigation-and-orientation.md @@ -33,7 +33,14 @@ Students should be able to: * explain strategies that people with disabilities use to navigate and orient themselves in web pages and applications * create designs with mechanisms to bypass blocks of repeated content, such as navigation links, header contents, or advertisements * create designs with multiple navigational mechanisms, such as menus, search boxes, breadcrumb trails, tables of contents, and sitemaps -* identify related requirements for developers to ensure that navigational mechanisms can be used with the keyboard and other input devices +* create designs with text cues, patterns, and icons to supplement information conveyed through color +* create designs that support placement of different regions and user interface components where users expect them +* provide clear and distinguishable landmark names that allow users to identify the different regions +* provide clear and descriptive heading texts that allow users to identify different parts of the content +* identify related requirements for developers to code landmarks and headings appropriately +* identify related requirements for developers to make navigational mechanisms usable with the keyboard and other input devices + +{% comment %} ## Competencies @@ -135,3 +142,4 @@ Optional ideas to support assessment: Suggested resources to support your teaching: [To be developed.] +{% comment %} \ No newline at end of file diff --git a/content/designer/page-layout.md b/content/designer/page-layout.md index 5a3639d83..de4a5e8a2 100644 --- a/content/designer/page-layout.md +++ b/content/designer/page-layout.md @@ -35,13 +35,14 @@ Courses based on this module should: Students should be able to: -* explain how people with disabilities identify and distinguish user interface components based on different features such as color, layout, spacing, position, landmarks, and naming -* create designs with sufficient contrast ratios between foreground user interface components, including text, images of text, and controls, and their corresponding background -* create designs with text cues, patterns, and icons to supplement information conveyed through color +* explain how people with disabilities identify and distinguish user interface components based on different features such as color, layout, spacing, and position +* create designs with appropriate contrast ratios between foreground user interface components, including text, images of text, and controls, and their corresponding background +* create designs with appropriate font sizes to support content processing +* create designs with adequate spacing to help distinguish different user interface components from one another +* creaate designs with color, visual cues, and text to convey information * create designs with clear and distinguishable focus indicators, for example using borders, background color, and highlighting -* ensure different regions and user interface components are placed where users expect them and are distinguishable from one another, for example through color, typography, patterns, spacing, position and naming -* provide clear and descriptive heading texts that allow users to identify different regions and parts of the content -* identify related requirements for developers to ensure that headings are coded appropriately and are nested according to the hierarchical structure of the page + +{% comment %} ## Competencies @@ -123,3 +124,4 @@ Optional ideas to support assessment: Suggested resources to support your teaching: [To be developed.] +{% endcomment %} \ No newline at end of file From 8c8b154f0bfe393b81358b5db037fb37d1c52ea9 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 15 Apr 2021 16:47:24 +0200 Subject: [PATCH 058/416] Updates to submodules and merging master --- _external/data | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_external/data b/_external/data index 28cc8c37c..05a623b06 160000 --- a/_external/data +++ b/_external/data @@ -1 +1 @@ -Subproject commit 28cc8c37c0f708049ef486877f62513882aa4565 +Subproject commit 05a623b0649cb13b2fd9d184e334bf0c6de08f52 From 9174e6459d9ed56ee53cbecf2b195bf34b2824b6 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 15 Apr 2021 17:55:39 +0200 Subject: [PATCH 059/416] Trying new liquid comment syntax --- content/designer/flexible-and-responsive-design.md | 4 ++-- content/designer/images-and-graphics.md | 4 ++-- content/designer/inclusive-design-process.md | 4 ++-- content/designer/information-design.md | 4 ++-- content/designer/interaction-and-feedback.md | 4 ++-- content/designer/multimedia-and-animations.md | 4 ++-- content/designer/navigation-and-orientation.md | 8 ++++---- content/designer/page-layout.md | 4 ++-- 8 files changed, 18 insertions(+), 18 deletions(-) diff --git a/content/designer/flexible-and-responsive-design.md b/content/designer/flexible-and-responsive-design.md index 4d6c25ac8..d1d822563 100644 --- a/content/designer/flexible-and-responsive-design.md +++ b/content/designer/flexible-and-responsive-design.md @@ -43,7 +43,7 @@ Students should be able to: * create designs that support alternatives to multipoint or path-based gestures, such as swipe or pinch * create designs with mechanisms to undo or abort an action carried out with pointer operations -{% comment %} +{%- comment -%} ## Competencies @@ -141,4 +141,4 @@ Suggested resources to support your teaching: [To be developed.] -{% endcomment %} \ No newline at end of file +{%- endcomment -%} \ No newline at end of file diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index c9cdf07b1..24e4d51d0 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -37,7 +37,7 @@ Students should be able to: * identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding images and graphics * identify related requirements for content authors to provide appropriate text alternatives for images -{% comment %} +{%- comment -%} ## Competencies @@ -131,4 +131,4 @@ Optional ideas to support assessment: Suggested resources to support your teaching: [To be developed.] -{% endcomment %} \ No newline at end of file +{%- endcomment -%} \ No newline at end of file diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index 8106a8337..edccfe3e6 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -46,7 +46,7 @@ Students should be able to: * describe ways to make documentation for user research activities accessible to people with disabilities, including the use of accessible digital formats * explain and select different testing methods depending on different types of disabilities, for example wireframe testing for people who have vision or screen reader testing for people who are blind -{% comment %} +{%- comment -%} ## Competencies @@ -147,4 +147,4 @@ Suggested resources to support your teaching: [To be developed.] -{% endcomment %} \ No newline at end of file +{%- endcomment -%} \ No newline at end of file diff --git a/content/designer/information-design.md b/content/designer/information-design.md index ad6b22070..177b8fa27 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -44,7 +44,7 @@ Students should be able to: * identify related requirements for developers to programmatically associate table header cells to their corresponding data cells * identify related requirements for developers to programmatically associate instructions for form controls to their corresponding control -{% comment %} +{%- comment -%} ## Competencies @@ -162,4 +162,4 @@ Suggested resources to support your teaching: [To be developed -{% endcomment %} \ No newline at end of file +{%- endcomment -%} \ No newline at end of file diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index cff84bada..f8db6f68a 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -41,7 +41,7 @@ Students should be able to: * identify related requirements for developers to programmatically associate properties of interactive user interface components, such as names, states, and instructions, to their corresponding component * identify related requirements for developers to write code for custom keyboard interactions that interactive user interface components may require -{% comment %} +{%- comment -%} {% include excol.html type="all" %} @@ -174,4 +174,4 @@ Optional ideas to support assessment: Suggested resources to support your teaching: [To be developed.] -{% endcomment %} \ No newline at end of file +{%- endcomment -%} \ No newline at end of file diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 5ef51f8d3..84599aaba 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -38,7 +38,7 @@ Students should be able to: * identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding media content * identify related requirements for content authors to provide appropriate text alternatives and audio descriptions for different types of media content, including video and audio -{% comment %} +{%- comment -%} {% include excol.html type="all" %} @@ -102,4 +102,4 @@ Optional ideas to support assessment: Suggested resources to support your teaching: [To be developed.] -{% endcomment %} \ No newline at end of file +{%- endcomment -%} \ No newline at end of file diff --git a/content/designer/navigation-and-orientation.md b/content/designer/navigation-and-orientation.md index 65fdeab68..d7e2353e4 100644 --- a/content/designer/navigation-and-orientation.md +++ b/content/designer/navigation-and-orientation.md @@ -40,7 +40,7 @@ Students should be able to: * identify related requirements for developers to code landmarks and headings appropriately * identify related requirements for developers to make navigational mechanisms usable with the keyboard and other input devices -{% comment %} +{%- comment -%} ## Competencies @@ -48,7 +48,7 @@ Skills required for this module: [To be developed.] -{% comment %} +{%- comment -%} Skills required for this module: @@ -75,7 +75,7 @@ Skills required for this module: * [WCAG 2 Success Criterion 2.4.8 Location](https://www.w3.org/WAI/WCAG21/quickref/#location) * [WCAG 2 Success Criterion 3.2.3 Consistent Navigation](https://www.w3.org/WAI/WCAG21/quickref/#consistent-navigation) -{% endcomment %} +{%- endcomment -%} ## Topics to Teach @@ -142,4 +142,4 @@ Optional ideas to support assessment: Suggested resources to support your teaching: [To be developed.] -{% comment %} \ No newline at end of file +{%- comment -%} \ No newline at end of file diff --git a/content/designer/page-layout.md b/content/designer/page-layout.md index de4a5e8a2..9d11bf70e 100644 --- a/content/designer/page-layout.md +++ b/content/designer/page-layout.md @@ -42,7 +42,7 @@ Students should be able to: * creaate designs with color, visual cues, and text to convey information * create designs with clear and distinguishable focus indicators, for example using borders, background color, and highlighting -{% comment %} +{%- comment -%} ## Competencies @@ -124,4 +124,4 @@ Optional ideas to support assessment: Suggested resources to support your teaching: [To be developed.] -{% endcomment %} \ No newline at end of file +{%- endcomment -%} \ No newline at end of file From b3377652d5b4c2a91308d626fafaf6bfa86bf9ac Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 16 Apr 2021 10:42:13 +0200 Subject: [PATCH 060/416] Removing extra comment marks --- content/designer/navigation-and-orientation.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/content/designer/navigation-and-orientation.md b/content/designer/navigation-and-orientation.md index d7e2353e4..ff01b0609 100644 --- a/content/designer/navigation-and-orientation.md +++ b/content/designer/navigation-and-orientation.md @@ -48,8 +48,6 @@ Skills required for this module: [To be developed.] -{%- comment -%} - Skills required for this module: {% include excol.html type="start" %} @@ -75,8 +73,6 @@ Skills required for this module: * [WCAG 2 Success Criterion 2.4.8 Location](https://www.w3.org/WAI/WCAG21/quickref/#location) * [WCAG 2 Success Criterion 3.2.3 Consistent Navigation](https://www.w3.org/WAI/WCAG21/quickref/#consistent-navigation) -{%- endcomment -%} - ## Topics to Teach Topics to achieve the learning outcomes: @@ -142,4 +138,6 @@ Optional ideas to support assessment: Suggested resources to support your teaching: [To be developed.] -{%- comment -%} \ No newline at end of file + +{%- endcomment -%} + From 6f3fc914261a12f13bf6faa97f14640c4fca86b1 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 16 Apr 2021 15:45:11 +0200 Subject: [PATCH 061/416] Updates to designer modules --- content/designer/designer-modules.md | 2 +- content/designer/inclusive-design-process.md | 4 ++-- content/designer/information-design.md | 4 +--- content/designer/navigation-and-orientation.md | 7 ++++--- content/designer/page-layout.md | 2 +- 5 files changed, 9 insertions(+), 10 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index bfc34a030..705d7e3a1 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -19,7 +19,7 @@ parent_in_h1: name: title navigation: previous: /curricula/developer-modules/rich-applications/ - next: /curricula/designer-modules/inclusive-designprocess/ + next: /curricula/designer-modules/inclusive-design-process/ --- ## Introduction diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index edccfe3e6..1ba5f5d61 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -37,12 +37,12 @@ Students should be able to: * describe how involving users with disabilities early and throughout in the design and development process leads to better accessibility of websites and applications * explain strategies and assistive technologies that people with disabilities use to interact with the Web -* identify the scope of accessibility in inclusive design processes +* identify the scope of accessibility in inclusive design processes and relate accessibility to other disciplines, including usability and inclusion * research and communicate applicable design requirements, such as those defined by accessibility standards and policies * manage the recruitment and involvement of people with disabilities for the different user research activities of a project, including in focus groups, personas, scenarios, and usability testing * manage representation of diverse groups of users with disabilities, including people with various levels of skills using assistive technologies and adaptive strategies * describe different means to communicate with people with disabilities, such as use of braille or sign language -* describe and apply ethical considerations to consider when working with people with disabilities +* describe and apply ethical considerations to consider when working with people with disabilities, for example avoiding clichés and myths * describe ways to make documentation for user research activities accessible to people with disabilities, including the use of accessible digital formats * explain and select different testing methods depending on different types of disabilities, for example wireframe testing for people who have vision or screen reader testing for people who are blind diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 177b8fa27..b8d5f997f 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -30,12 +30,10 @@ Courses based on this module should: Students should be able to: -* explain how textual, tabular, or graphical information, are processed differently depending on the type of disability +* explain how different types of information, including textual, tabular, or graphical information, are processed differently by different groups of people with disabilities * explain the use of headings and pages to divide longer passages of text into smaller pieces -* describe supplemental ways to convey information presented in text, such as using graphics, color, or shapes * describe the accessibility challenges that complex tables create, including the difficulty to process the relationships between header and data cells and the need to scroll horizontally and vertically to visualize the table contents * explain different ways to present information in tables, including splitting complex tables into simpler tables, lists, and plain text where possible -* describe the accessibility implications of different processes (including user journeys and workflows), for example different methods to perform a task within a website or application * describe the accessibility challenges in form fields, including THE difficulty to relate labels to form controls and the difficulty to understand the purpose of form fields * describe methods to make forms more understandable, including labels and instructions * create designs that support grouping related form fields (such as those to enter dates or addresses) into their corresponding step of the process diff --git a/content/designer/navigation-and-orientation.md b/content/designer/navigation-and-orientation.md index ff01b0609..d745b523f 100644 --- a/content/designer/navigation-and-orientation.md +++ b/content/designer/navigation-and-orientation.md @@ -32,10 +32,11 @@ Students should be able to: * explain strategies that people with disabilities use to navigate and orient themselves in web pages and applications * create designs with mechanisms to bypass blocks of repeated content, such as navigation links, header contents, or advertisements -* create designs with multiple navigational mechanisms, such as menus, search boxes, breadcrumb trails, tables of contents, and sitemaps -* create designs with text cues, patterns, and icons to supplement information conveyed through color +* create designs that support search functionalities +* create designs that consider accessibility aspects of multiple menus, such as navigational, fly-out, and application menus +* create designs that support additional navigational mechanisms, including breadcrumb trails, tables of contents, and sitemaps * create designs that support placement of different regions and user interface components where users expect them -* provide clear and distinguishable landmark names that allow users to identify the different regions +* provide clear and distinguishable landmark names that allow users to identify different regions of a page or application * provide clear and descriptive heading texts that allow users to identify different parts of the content * identify related requirements for developers to code landmarks and headings appropriately * identify related requirements for developers to make navigational mechanisms usable with the keyboard and other input devices diff --git a/content/designer/page-layout.md b/content/designer/page-layout.md index 9d11bf70e..ac5122589 100644 --- a/content/designer/page-layout.md +++ b/content/designer/page-layout.md @@ -39,7 +39,7 @@ Students should be able to: * create designs with appropriate contrast ratios between foreground user interface components, including text, images of text, and controls, and their corresponding background * create designs with appropriate font sizes to support content processing * create designs with adequate spacing to help distinguish different user interface components from one another -* creaate designs with color, visual cues, and text to convey information +* create designs with text cues, patterns, and icons to supplement information conveyed through color * create designs with clear and distinguishable focus indicators, for example using borders, background color, and highlighting {%- comment -%} From d020c1ee8cb87ccad898b0757e1079544d514525 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 19 Apr 2021 13:52:47 +0200 Subject: [PATCH 062/416] Updates to designer modules --- content/designer/designer-modules.md | 1 + content/designer/images-and-graphics.md | 2 +- content/designer/inclusive-design-process.md | 4 ++-- content/designer/information-design.md | 2 +- content/designer/navigation-and-orientation.md | 2 +- content/designer/page-layout.md | 2 +- 6 files changed, 7 insertions(+), 6 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 705d7e3a1..279d0d080 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -31,6 +31,7 @@ The designer modules guide the creation of courses that: These modules focus on user experience, visual, and interaction aspects to design accessible web pages and applications. The modules primarily address the following roles: +* product owner * user experience designer * visual designer * content designer diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 24e4d51d0..b3713b421 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -30,7 +30,7 @@ Courses based on this module should: Students should be able to: -* explain how images affect processing of information and understanding of context and functionality by people with disabilities +* explain how images affect processing of information, content identifications, and understanding of functionality by people with disabilities * provide appropriate text alternatives for graphical components included in the design phase, such as logos, links, and menu items * describe ways to illustrate information presented in text, including use of graphics, color, or shapes * create designs that consider descriptions for images and graphics, including charts or diagrams diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index 1ba5f5d61..91dbf08c4 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -43,8 +43,8 @@ Students should be able to: * manage representation of diverse groups of users with disabilities, including people with various levels of skills using assistive technologies and adaptive strategies * describe different means to communicate with people with disabilities, such as use of braille or sign language * describe and apply ethical considerations to consider when working with people with disabilities, for example avoiding clichés and myths -* describe ways to make documentation for user research activities accessible to people with disabilities, including the use of accessible digital formats -* explain and select different testing methods depending on different types of disabilities, for example wireframe testing for people who have vision or screen reader testing for people who are blind +* describe ways to make documentation for user research activities accessible to people with disabilities, including the use of braille, sign language, and large font sizes +* explain and select different testing methods depending on different types of disabilities, for example wireframe testing for people who have vision and screen reader testing for people who are blind {%- comment -%} diff --git a/content/designer/information-design.md b/content/designer/information-design.md index b8d5f997f..c87c5b0aa 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -35,7 +35,7 @@ Students should be able to: * describe the accessibility challenges that complex tables create, including the difficulty to process the relationships between header and data cells and the need to scroll horizontally and vertically to visualize the table contents * explain different ways to present information in tables, including splitting complex tables into simpler tables, lists, and plain text where possible * describe the accessibility challenges in form fields, including THE difficulty to relate labels to form controls and the difficulty to understand the purpose of form fields -* describe methods to make forms more understandable, including labels and instructions +* describe methods to make forms more understandable, including labels, instructions, and grouping * create designs that support grouping related form fields (such as those to enter dates or addresses) into their corresponding step of the process * describe accessibility challenges created when visualizing and interacting with large amounts of data, and describe ways to split these data into shorter chunks * identify related requirements for developers to programmatically associate headings to their corresponding text diff --git a/content/designer/navigation-and-orientation.md b/content/designer/navigation-and-orientation.md index d745b523f..13fd54616 100644 --- a/content/designer/navigation-and-orientation.md +++ b/content/designer/navigation-and-orientation.md @@ -32,7 +32,7 @@ Students should be able to: * explain strategies that people with disabilities use to navigate and orient themselves in web pages and applications * create designs with mechanisms to bypass blocks of repeated content, such as navigation links, header contents, or advertisements -* create designs that support search functionalities +* create designs that support search functionalities to help users find specific words or phrases * create designs that consider accessibility aspects of multiple menus, such as navigational, fly-out, and application menus * create designs that support additional navigational mechanisms, including breadcrumb trails, tables of contents, and sitemaps * create designs that support placement of different regions and user interface components where users expect them diff --git a/content/designer/page-layout.md b/content/designer/page-layout.md index ac5122589..9ec40c5f2 100644 --- a/content/designer/page-layout.md +++ b/content/designer/page-layout.md @@ -35,7 +35,7 @@ Courses based on this module should: Students should be able to: -* explain how people with disabilities identify and distinguish user interface components based on different features such as color, layout, spacing, and position +* explain how people with disabilities identify and distinguish user interface components based on different features, such as color, layout, spacing, and position * create designs with appropriate contrast ratios between foreground user interface components, including text, images of text, and controls, and their corresponding background * create designs with appropriate font sizes to support content processing * create designs with adequate spacing to help distinguish different user interface components from one another From 58dfbde23c35186890146d96d3d2bb2372abbc96 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 19 Apr 2021 16:48:39 +0200 Subject: [PATCH 063/416] Updates to designer modules --- _data/navigation.yml | 2 -- content/designer/images-and-graphics.md | 3 --- content/designer/information-design.md | 12 ++++++------ content/designer/multimedia-and-animations.md | 2 +- 4 files changed, 7 insertions(+), 12 deletions(-) diff --git a/_data/navigation.yml b/_data/navigation.yml index 2a3272b9d..a3ba1451e 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -267,8 +267,6 @@ url: "/curricula/designer-modules/navigation-and-orientation/" - name: Information Design url: "/curricula/designer-modules/information-design/" - - name: Images and Graphics - url: "/curricula/designer-modules/images-and-graphics/" - name: Multimedia and Animations url: "/curricula/designer-modules/multimedia-and-animations/" - name: Interaction and Feedback diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index b3713b421..40d358ab1 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -32,9 +32,6 @@ Students should be able to: * explain how images affect processing of information, content identifications, and understanding of functionality by people with disabilities * provide appropriate text alternatives for graphical components included in the design phase, such as logos, links, and menu items -* describe ways to illustrate information presented in text, including use of graphics, color, or shapes -* create designs that consider descriptions for images and graphics, including charts or diagrams -* identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding images and graphics * identify related requirements for content authors to provide appropriate text alternatives for images {%- comment -%} diff --git a/content/designer/information-design.md b/content/designer/information-design.md index c87c5b0aa..ba0c46849 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -16,7 +16,7 @@ footer: >

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: previous: /curricula/designer-modules/navigation-and-orientation/ - next: /curricula/designer-modules/images-and-graphics/ + next: /curricula/designer-modules/multimedia-and-animations/ --- ## Introduction @@ -30,17 +30,17 @@ Courses based on this module should: Students should be able to: -* explain how different types of information, including textual, tabular, or graphical information, are processed differently by different groups of people with disabilities +* explain how different types of information, including textual, tabular, or graphical, are processed differently by various groups of people with disabilities * explain the use of headings and pages to divide longer passages of text into smaller pieces * describe the accessibility challenges that complex tables create, including the difficulty to process the relationships between header and data cells and the need to scroll horizontally and vertically to visualize the table contents * explain different ways to present information in tables, including splitting complex tables into simpler tables, lists, and plain text where possible * describe the accessibility challenges in form fields, including THE difficulty to relate labels to form controls and the difficulty to understand the purpose of form fields * describe methods to make forms more understandable, including labels, instructions, and grouping * create designs that support grouping related form fields (such as those to enter dates or addresses) into their corresponding step of the process -* describe accessibility challenges created when visualizing and interacting with large amounts of data, and describe ways to split these data into shorter chunks -* identify related requirements for developers to programmatically associate headings to their corresponding text -* identify related requirements for developers to programmatically associate table header cells to their corresponding data cells -* identify related requirements for developers to programmatically associate instructions for form controls to their corresponding control +* describe accessibility challenges created when visualizing and interacting with large amounts of data, and describe ways to split these data into smaller chunks +* describe ways to supplement information presented in text, including use of graphics, color, or shapes +* create designs that consider descriptions for images and graphics, including charts or diagrams +* identify related requirements for developers to programmatically associate text alternatives, headings, table header and data cells, and form labels and instructions, to their corresponding control {%- comment -%} diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 84599aaba..8ab66fb09 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -15,7 +15,7 @@ footer: >

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: - previous: /curricula/designer-modules/images-and-graphics/ + previous: /curricula/designer-modules/information-design/ next: /curricula/designer-modules/interaction-and-feedback/ --- From da841dab3622085273b359d0d723400ee07196a1 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 19 Apr 2021 16:50:44 +0200 Subject: [PATCH 064/416] Updating module numbers --- content/designer/flexible-and-responsive-design.md | 2 +- content/designer/multimedia-and-animations.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/flexible-and-responsive-design.md b/content/designer/flexible-and-responsive-design.md index d1d822563..c78b88116 100644 --- a/content/designer/flexible-and-responsive-design.md +++ b/content/designer/flexible-and-responsive-design.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 8: Flexible and Responsive Design" +title: "[Draft] Module 7: Flexible and Responsive Design" nav_title: "Flexible and Responsive Design" permalink: /curricula/designer-modules/flexible-and-responsive-design/ ref: /curricula/designer-modules/flexible-and-responsive-design/ diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 8ab66fb09..43cc98a1b 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 6: Multimedia and Animations" +title: "[Draft] Module 5: Multimedia and Animations" nav_title: "Multimedia and Animations" permalink: /curricula/designer-modules/multimedia-and-animations/ ref: /curricula/designer-modules/multimedia-and-animations/ From b1efbc9740788dabc9e64156160cd7829b3c6fe1 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 20 Apr 2021 12:11:03 +0200 Subject: [PATCH 065/416] Updates to designer modules --- content/designer/flexible-and-responsive-design.md | 2 +- content/designer/inclusive-design-process.md | 4 ++-- content/designer/interaction-and-feedback.md | 2 -- content/designer/multimedia-and-animations.md | 3 +-- content/designer/navigation-and-orientation.md | 1 - content/designer/page-layout.md | 2 +- 6 files changed, 5 insertions(+), 9 deletions(-) diff --git a/content/designer/flexible-and-responsive-design.md b/content/designer/flexible-and-responsive-design.md index c78b88116..87a8b7f97 100644 --- a/content/designer/flexible-and-responsive-design.md +++ b/content/designer/flexible-and-responsive-design.md @@ -64,7 +64,7 @@ Students should be able to: * create designs that preserve content and functionality when accessed using a variety of screen sizes, screen configurations, and style sheets * ensure content can be presented without loss of information and functionality, and that accessing such content does not require two-dimensional scrolling: * vertical (at a width equivalent to 320 CSS pixels) - * horizontall (at a height equivalent to 256 CSS pixels) + * horizontal (at a height equivalent to 256 CSS pixels) * create designs that allow text resizing up to 200% without loss of content and functionality * create designs that allow users to set the orientation to portrait or landscape, or that include show or hide controls to access contents in portrait and landscape orientations diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index 91dbf08c4..9f5ffb995 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -41,7 +41,7 @@ Students should be able to: * research and communicate applicable design requirements, such as those defined by accessibility standards and policies * manage the recruitment and involvement of people with disabilities for the different user research activities of a project, including in focus groups, personas, scenarios, and usability testing * manage representation of diverse groups of users with disabilities, including people with various levels of skills using assistive technologies and adaptive strategies -* describe different means to communicate with people with disabilities, such as use of braille or sign language +* describe different means to communicate with people with disabilities, such as use of braille or sign language * describe and apply ethical considerations to consider when working with people with disabilities, for example avoiding clichés and myths * describe ways to make documentation for user research activities accessible to people with disabilities, including the use of braille, sign language, and large font sizes * explain and select different testing methods depending on different types of disabilities, for example wireframe testing for people who have vision and screen reader testing for people who are blind @@ -67,7 +67,7 @@ Students should be able to: * explain the use of different assistive technologies and adaptive strategies by various groups of people with disabilities to interact with websites and applications * ensure different types of users with disabilities are included when defining user groups * ensure different types of accessibility barriers and features, such as appropriate contrast ratios and meaningful page structure, are included in the research phase -* ensure research is conducted on accessibility guidelines, standards, and policies to define and include accessibilityin the overall project requirements +* ensure research is conducted on accessibility guidelines, standards, and policies to define and include accessibility in the overall project requirements * determine the characteristics of participants in user research activities based on different factors, such as overall project requirements, level of experience, use of assistive technology, and type of disability * ensure people with disabilities are involved early and throughout the research processes, including in focus groups, questionnaires, and surveys diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index f8db6f68a..2244da2e4 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -43,8 +43,6 @@ Students should be able to: {%- comment -%} -{% include excol.html type="all" %} - ## Competencies Skills required for this module: diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 43cc98a1b..6811a0d33 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -33,6 +33,7 @@ Students should be able to: * identify accessibility requirements for different types of audio or video content * create designs that consider placement of alternatives to multimedia content, such as transcripts for audio and audio described content, * create designs with mechanisms to switch transcripts and audio described content on or off +* create designs that consider accessibility implications of images and graphics with decorative purposes * create designs with mechanisms to pause, stop, and hide any moving and auto-updating content, including animations and carousels * create designs with mechanisms to stop or control the volume of auto-playing audio * identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding media content @@ -40,8 +41,6 @@ Students should be able to: {%- comment -%} -{% include excol.html type="all" %} - ## Competencies Skills required for this module: diff --git a/content/designer/navigation-and-orientation.md b/content/designer/navigation-and-orientation.md index 13fd54616..35b40e939 100644 --- a/content/designer/navigation-and-orientation.md +++ b/content/designer/navigation-and-orientation.md @@ -141,4 +141,3 @@ Suggested resources to support your teaching: [To be developed.] {%- endcomment -%} - diff --git a/content/designer/page-layout.md b/content/designer/page-layout.md index 9ec40c5f2..2df0bfd91 100644 --- a/content/designer/page-layout.md +++ b/content/designer/page-layout.md @@ -102,7 +102,7 @@ Optional ideas to support assessment: [To be developed.] -### Topic: Page Structure +### Topic: Page Structure #### Learning Outcomes for Topic From 588b025c09f798a0dc4d49d259df2ae56eef55f2 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 21 Apr 2021 16:38:07 +0200 Subject: [PATCH 066/416] Updates to designer modules --- _data/navigation.yml | 8 +++--- content/designer/designer-modules.md | 4 +-- .../flexible-and-responsive-design.md | 18 ++++++------- content/designer/inclusive-design-process.md | 10 ++++---- content/designer/information-design.md | 14 +++++------ content/designer/interaction-and-feedback.md | 4 +-- content/designer/multimedia-and-animations.md | 10 ++++---- ...ation-and-orientation.md => navigation.md} | 24 +++++++++--------- .../{page-layout.md => visual-design.md} | 25 ++++++++++--------- 9 files changed, 58 insertions(+), 59 deletions(-) rename content/designer/{navigation-and-orientation.md => navigation.md} (82%) rename content/designer/{page-layout.md => visual-design.md} (82%) diff --git a/_data/navigation.yml b/_data/navigation.yml index a3ba1451e..cb78b4d61 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -261,10 +261,10 @@ pages: - name: Inclusive Design Process url: "/curricula/designer-modules/inclusive-design-process/" - - name: Page Layout - url: "/curricula/designer-modules/page-layout/" - - name: Navigation and Orientation - url: "/curricula/designer-modules/navigation-and-orientation/" + - name: Visual Design + url: "/curricula/designer-modules/visual-design/" + - name: Navigation + url: "/curricula/designer-modules/navigation/" - name: Information Design url: "/curricula/designer-modules/information-design/" - name: Multimedia and Animations diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 279d0d080..42782dbb5 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -31,9 +31,7 @@ The designer modules guide the creation of courses that: These modules focus on user experience, visual, and interaction aspects to design accessible web pages and applications. The modules primarily address the following roles: -* product owner * user experience designer * visual designer -* content designer -* interaction designer * information designer +* interaction designer diff --git a/content/designer/flexible-and-responsive-design.md b/content/designer/flexible-and-responsive-design.md index 87a8b7f97..6aee7a0b2 100644 --- a/content/designer/flexible-and-responsive-design.md +++ b/content/designer/flexible-and-responsive-design.md @@ -34,14 +34,14 @@ Courses based on this module should: Students should be able to: -* explain how use of different screen sizes, screen configurations, and style sheets affects the ability of people with disabilities to identify, distinguish, and process websites and applications -* create designs with target sizes and spaces to support tapping by people with mobility impairments and people using different input methods -* create designs that preserve meaningful sequence, content, and functionality when using different viewport sizes, screen configurations, and devices to access content -* create designs that preserve content and functionality when line height as well as spacing between paragraphs, words, and letters are modified by the user -* create designs that support text resizing without loss of content and functionality -* create designs that do not restrict the content view and operation to a single display orientation, such as portrait or landscape -* create designs that support alternatives to multipoint or path-based gestures, such as swipe or pinch -* create designs with mechanisms to undo or abort an action carried out with pointer operations +* explain how the use of different screen sizes, screen configurations, and style sheets affects the ability of people with disabilities to identify, distinguish, and process websites and applications +* design user interfaces with target sizes and spaces to support tapping by people with mobility impairments and people using different input methods +* design user interfaces that adapt their sequence, content, and functionality when used with different viewport sizes, screen configurations, and devices to access content +* design user interfaces that support customizing line height, as well as spacing between paragraphs, words, and letters +* design user interfaces that support text resizing without loss of content and functionality +* design user interfaces that do not restrict the content view and operation to a single display orientation, such as portrait or landscape +* design user interfaces that support alternatives to multipoint or path-based gestures, such as swipe or pinch +* design user interfaces that undoing or aborting an action carried out with pointer operations {%- comment -%} @@ -61,7 +61,7 @@ Topics to achieve the learning outcomes: Students should be able to: -* create designs that preserve content and functionality when accessed using a variety of screen sizes, screen configurations, and style sheets +* design user interfaces that preserve content and functionality when accessed using a variety of screen sizes, screen configurations, and style sheets * ensure content can be presented without loss of information and functionality, and that accessing such content does not require two-dimensional scrolling: * vertical (at a width equivalent to 320 CSS pixels) * horizontal (at a height equivalent to 256 CSS pixels) diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index 9f5ffb995..0002ae039 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -37,14 +37,14 @@ Students should be able to: * describe how involving users with disabilities early and throughout in the design and development process leads to better accessibility of websites and applications * explain strategies and assistive technologies that people with disabilities use to interact with the Web -* identify the scope of accessibility in inclusive design processes and relate accessibility to other disciplines, including usability and inclusion +* identify the scope of accessibility in inclusive design processes and relate accessibility to usability and inclusion * research and communicate applicable design requirements, such as those defined by accessibility standards and policies -* manage the recruitment and involvement of people with disabilities for the different user research activities of a project, including in focus groups, personas, scenarios, and usability testing +* manage the involvement of people with disabilities for the different user research activities of a project, including in focus groups, personas, scenarios, and usability testing * manage representation of diverse groups of users with disabilities, including people with various levels of skills using assistive technologies and adaptive strategies -* describe different means to communicate with people with disabilities, such as use of braille or sign language -* describe and apply ethical considerations to consider when working with people with disabilities, for example avoiding clichés and myths -* describe ways to make documentation for user research activities accessible to people with disabilities, including the use of braille, sign language, and large font sizes +* describe different accomodation means for involving people with disabilities in user research activities +* describe and apply ethical considerations when working with people with disabilities, for example those related to informed consent or to avoiding clichés and myths * explain and select different testing methods depending on different types of disabilities, for example wireframe testing for people who have vision and screen reader testing for people who are blind +* describe related requirements for project owners to involve people with disabilities early and throughout in the design and development processes {%- comment -%} diff --git a/content/designer/information-design.md b/content/designer/information-design.md index ba0c46849..61c830811 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -31,15 +31,15 @@ Courses based on this module should: Students should be able to: * explain how different types of information, including textual, tabular, or graphical, are processed differently by various groups of people with disabilities -* explain the use of headings and pages to divide longer passages of text into smaller pieces -* describe the accessibility challenges that complex tables create, including the difficulty to process the relationships between header and data cells and the need to scroll horizontally and vertically to visualize the table contents -* explain different ways to present information in tables, including splitting complex tables into simpler tables, lists, and plain text where possible -* describe the accessibility challenges in form fields, including THE difficulty to relate labels to form controls and the difficulty to understand the purpose of form fields -* describe methods to make forms more understandable, including labels, instructions, and grouping -* create designs that support grouping related form fields (such as those to enter dates or addresses) into their corresponding step of the process +* describe approaches to break down different types of content into smaller and more manageable pieces, including: + * the use of headings and pages to divide longer passages of text into smaller pieces + * the use of lists, simpler tables, and plain text to convey information presented in complex tables + * the use of labels and instructions to make information in forms more understandable + * the use of groups of form controls that share a common purpose + * the use of search functionalities that allow to select small amounts of data from large data sets * describe accessibility challenges created when visualizing and interacting with large amounts of data, and describe ways to split these data into smaller chunks * describe ways to supplement information presented in text, including use of graphics, color, or shapes -* create designs that consider descriptions for images and graphics, including charts or diagrams +* design user interfaces that consider descriptions for images and graphics, including charts or diagrams * identify related requirements for developers to programmatically associate text alternatives, headings, table header and data cells, and form labels and instructions, to their corresponding control {%- comment -%} diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 2244da2e4..f2ce1422d 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -31,11 +31,11 @@ Courses based on this module should: Students should be able to: * explain strategies that people with disabilities use to identify, distinguish, and operate interactive user interface components -* create designs that consider different input mechanisms, including mouse, touch, and keyboard +* design user interfaces that support different input mechanisms, including mouse, touch, and keyboard * provide clear and distinguishable ways to identify interactive user interface components, including through naming and placement * provide methods to help understand the context, information, and functionality of user interface components, including through textual instructions, visual cues, and icons * provide meaningful and descriptive notifications about imminent time limits, status changes, and feedback from user input, including errors, suggestions for correction, and success messages -* create designs with meaningful sequence of interactive user interface components +* design user interfaces with meaningful sequence of interactive user interface components * define custom interaction patterns, such as where to place focus when a dialog is open and closed, and what the focus order should be within those dialogs * define mechanisms to obtain information about custom interaction patterns, such as specific keyboard shortcuts for applications and expected behavior of custom widgets * identify related requirements for developers to programmatically associate properties of interactive user interface components, such as names, states, and instructions, to their corresponding component diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 6811a0d33..546486e74 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -31,11 +31,11 @@ Courses based on this module should: Students should be able to: * identify accessibility requirements for different types of audio or video content -* create designs that consider placement of alternatives to multimedia content, such as transcripts for audio and audio described content, -* create designs with mechanisms to switch transcripts and audio described content on or off -* create designs that consider accessibility implications of images and graphics with decorative purposes -* create designs with mechanisms to pause, stop, and hide any moving and auto-updating content, including animations and carousels -* create designs with mechanisms to stop or control the volume of auto-playing audio +* design user interfaces that consider placement of alternatives to multimedia content, such as transcripts for audio and audio described content, +* design user interfaces with mechanisms to switch transcripts and audio described content on or off +* design user interfaces that consider accessibility implications of images and graphics with decorative purposes +* design user interfaces with mechanisms to pause, stop, and hide any moving and auto-updating content, including animations and carousels +* design user interfaces with mechanisms to stop or control the volume of auto-playing audio * identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding media content * identify related requirements for content authors to provide appropriate text alternatives and audio descriptions for different types of media content, including video and audio diff --git a/content/designer/navigation-and-orientation.md b/content/designer/navigation.md similarity index 82% rename from content/designer/navigation-and-orientation.md rename to content/designer/navigation.md index 35b40e939..f564f9aae 100644 --- a/content/designer/navigation-and-orientation.md +++ b/content/designer/navigation.md @@ -1,12 +1,12 @@ --- -title: "[Draft] Module 3: Navigation and Orientation" -nav_title: "Navigation and Orientation" -permalink: /curricula/designer-modules/navigation-and-orientation/ -ref: /curricula/designer-modules/navigation-and-orientation/ +title: "[Draft] Module 3: Navigation" +nav_title: "Navigation" +permalink: /curricula/designer-modules/navigation/ +ref: /curricula/designer-modules/navigation/ lang: en github: repository: w3c/wai-curricula - path: content/designer/navigation-and-orientation.md + path: content/designer/navigation.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ @@ -15,7 +15,7 @@ footer: >

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: - previous: /curricula/designer-modules/page-layout/ + previous: /curricula/designer-modules/visual-design/ next: /curricula/designer-modules/information-design/ --- @@ -31,12 +31,12 @@ Courses based on this module should: Students should be able to: * explain strategies that people with disabilities use to navigate and orient themselves in web pages and applications -* create designs with mechanisms to bypass blocks of repeated content, such as navigation links, header contents, or advertisements -* create designs that support search functionalities to help users find specific words or phrases -* create designs that consider accessibility aspects of multiple menus, such as navigational, fly-out, and application menus -* create designs that support additional navigational mechanisms, including breadcrumb trails, tables of contents, and sitemaps -* create designs that support placement of different regions and user interface components where users expect them -* provide clear and distinguishable landmark names that allow users to identify different regions of a page or application +* design user interfaces with mechanisms to bypass blocks of repeated content, such as navigation links, header contents, or advertisements +* design user interfaces with search functionalities to help users find content +* design user interfaces that support accessibility features of multiple menus, such as navigational, fly-out, and application menus +* design user interfaces with additional navigational mechanisms, including breadcrumb trails, tables of contents, and sitemaps +* design user interfaces that support placement of different regions and user interface components where users expect them +* provide clear and descriptive landmark names that allow users to identify different regions of a page or application * provide clear and descriptive heading texts that allow users to identify different parts of the content * identify related requirements for developers to code landmarks and headings appropriately * identify related requirements for developers to make navigational mechanisms usable with the keyboard and other input devices diff --git a/content/designer/page-layout.md b/content/designer/visual-design.md similarity index 82% rename from content/designer/page-layout.md rename to content/designer/visual-design.md index 2df0bfd91..9f6fc72eb 100644 --- a/content/designer/page-layout.md +++ b/content/designer/visual-design.md @@ -1,12 +1,12 @@ --- -title: "[Draft] Module 2: Page Layout" -nav_title: "Page Layout" -permalink: /curricula/designer-modules/page-layout/ -ref: /curricula/designer-modules/page-layout/ +title: "[Draft] Module 2: Visual Design" +nav_title: "Visual Design" +permalink: /curricula/designer-modules/visual-design/ +ref: /curricula/designer-modules/visual-design/ lang: en github: repository: w3c/wai-curricula - path: content/designer/page-layout.md + path: content/designer/visual-design.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ @@ -21,7 +21,7 @@ parent_in_h1: name: "Curricula on Web Accessibility" navigation: previous: /curricula/designer-modules/inclusive-design-process/ - next: /curricula/designer-modules/navigation-and-orientation/ + next: /curricula/designer-modules/navigation/ --- ## Introduction @@ -36,11 +36,12 @@ Courses based on this module should: Students should be able to: * explain how people with disabilities identify and distinguish user interface components based on different features, such as color, layout, spacing, and position -* create designs with appropriate contrast ratios between foreground user interface components, including text, images of text, and controls, and their corresponding background -* create designs with appropriate font sizes to support content processing -* create designs with adequate spacing to help distinguish different user interface components from one another -* create designs with text cues, patterns, and icons to supplement information conveyed through color -* create designs with clear and distinguishable focus indicators, for example using borders, background color, and highlighting +* design user interfaces with alternative means to communicate information conveyed through vision, for example using headings, lists, and textual information +* design user interfaces with appropriate contrast ratios for text, images of text, and controls +* design user interfaces with appropriate font sizes to support content processing +* design user interfaces with adequate spacing to help distinguish different components from one another +* design user interfaces with text cues, patterns, and icons to supplement information conveyed through color +* design user interfaces with clear and distinguishable focus indicators, for example using borders, background color, and highlighting {%- comment -%} @@ -59,7 +60,7 @@ Topics to achieve the learning outcomes: #### Learning Outcomes for Topic Students should be able to: - + * explain how appropriate contrast ratios allow people with disabilities to read, understand, and distinguish user interface components * create designs that allow text and images of text to have a contrast ratio of at least 4.5:1 with respect to their background * create designs that allow for large-scale text and images of text to have a contrast ratio of at least 3:1 with respect to their background From 374c6d1a861d04927126f46ed00700ea3ed262e2 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 23 Apr 2021 10:23:48 +0200 Subject: [PATCH 067/416] Updates to designer modules --- _data/navigation.yml | 2 ++ content/designer/designer-modules.md | 11 +++++++---- content/designer/images-and-graphics.md | 7 ++++++- content/designer/inclusive-design-process.md | 12 ++++++------ content/designer/information-design.md | 9 +++------ content/designer/interaction-and-feedback.md | 4 ++-- content/designer/multimedia-and-animations.md | 2 +- content/designer/navigation.md | 2 ++ content/designer/visual-design.md | 2 +- 9 files changed, 30 insertions(+), 21 deletions(-) diff --git a/_data/navigation.yml b/_data/navigation.yml index cb78b4d61..7b6a9e641 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -267,6 +267,8 @@ url: "/curricula/designer-modules/navigation/" - name: Information Design url: "/curricula/designer-modules/information-design/" + - name: Images and Graphics + url: "/curricula/designer-modules/images-and-graphics/" - name: Multimedia and Animations url: "/curricula/designer-modules/multimedia-and-animations/" - name: Interaction and Feedback diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 42782dbb5..5d7c3b8f2 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -31,7 +31,10 @@ The designer modules guide the creation of courses that: These modules focus on user experience, visual, and interaction aspects to design accessible web pages and applications. The modules primarily address the following roles: -* user experience designer -* visual designer -* information designer -* interaction designer +* User Experience (UX) Designer +* User Researcher +* UX Researcher +* User Experience Analyst +* Service Designer +* Information Architect +* Interaction Designer diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 40d358ab1..d4e2ef557 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -30,9 +30,14 @@ Courses based on this module should: Students should be able to: -* explain how images affect processing of information, content identifications, and understanding of functionality by people with disabilities +* explain how images affect processing of information, content identification, and understanding of functionality by people with disabilities * provide appropriate text alternatives for graphical components included in the design phase, such as logos, links, and menu items +* describe ways to supplement information presented in text, including use of graphics, color, or shapes +* provide equivalent textual information that helps identify the purpose of an image conveying function +* design user interfaces that consider descriptions for images and graphics, including charts or diagrams +* identify related requirements for developers to code text alternatives appropriately * identify related requirements for content authors to provide appropriate text alternatives for images +* identify related requirements for content authors to use text instead of images of text {%- comment -%} diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index 0002ae039..682e37466 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -21,7 +21,7 @@ parent_in_h1: name: "Curricula on Web Accessibility" navigation: previous: /curricula/designer-modules/ - next: /curricula/designer-modules/page-layout/ + next: /curricula/designer-modules/visual-design/ --- ## Introduction @@ -35,15 +35,15 @@ Courses based on this module should: Students should be able to: -* describe how involving users with disabilities early and throughout in the design and development process leads to better accessibility of websites and applications +* explain how involving users with disabilities early and throughout in the design and development process leads to better accessibility of websites and applications * explain strategies and assistive technologies that people with disabilities use to interact with the Web * identify the scope of accessibility in inclusive design processes and relate accessibility to usability and inclusion * research and communicate applicable design requirements, such as those defined by accessibility standards and policies -* manage the involvement of people with disabilities for the different user research activities of a project, including in focus groups, personas, scenarios, and usability testing +* manage the involvement of people with disabilities for the different user research activities of a project, including focus groups, personas, scenarios, and usability testing * manage representation of diverse groups of users with disabilities, including people with various levels of skills using assistive technologies and adaptive strategies -* describe different accomodation means for involving people with disabilities in user research activities -* describe and apply ethical considerations when working with people with disabilities, for example those related to informed consent or to avoiding clichés and myths -* explain and select different testing methods depending on different types of disabilities, for example wireframe testing for people who have vision and screen reader testing for people who are blind +* describe different accommodation means for involving people with disabilities in user research activities +* describe and apply ethical considerations when working with people with disabilities, for example avoiding clichés and myths +* describe accessibility characteristics and limitations of different testing methods, such as paper prototype testing and screen reader testing * describe related requirements for project owners to involve people with disabilities early and throughout in the design and development processes {%- comment -%} diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 61c830811..1af3f7996 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -16,7 +16,7 @@ footer: >

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: previous: /curricula/designer-modules/navigation-and-orientation/ - next: /curricula/designer-modules/multimedia-and-animations/ + next: /curricula/designer-modules/images-and-graphics/ --- ## Introduction @@ -34,12 +34,9 @@ Students should be able to: * describe approaches to break down different types of content into smaller and more manageable pieces, including: * the use of headings and pages to divide longer passages of text into smaller pieces * the use of lists, simpler tables, and plain text to convey information presented in complex tables - * the use of labels and instructions to make information in forms more understandable * the use of groups of form controls that share a common purpose - * the use of search functionalities that allow to select small amounts of data from large data sets -* describe accessibility challenges created when visualizing and interacting with large amounts of data, and describe ways to split these data into smaller chunks -* describe ways to supplement information presented in text, including use of graphics, color, or shapes -* design user interfaces that consider descriptions for images and graphics, including charts or diagrams + * the use of search functionalities that filter large data sets to display small data subsets +* describe the use of labels and instructions to make information in forms more understandable * identify related requirements for developers to programmatically associate text alternatives, headings, table header and data cells, and form labels and instructions, to their corresponding control {%- comment -%} diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index f2ce1422d..1d8f8b267 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -31,11 +31,11 @@ Courses based on this module should: Students should be able to: * explain strategies that people with disabilities use to identify, distinguish, and operate interactive user interface components -* design user interfaces that support different input mechanisms, including mouse, touch, and keyboard +* design user experiences that support different input mechanisms, including mouse, touch, and keyboard * provide clear and distinguishable ways to identify interactive user interface components, including through naming and placement * provide methods to help understand the context, information, and functionality of user interface components, including through textual instructions, visual cues, and icons * provide meaningful and descriptive notifications about imminent time limits, status changes, and feedback from user input, including errors, suggestions for correction, and success messages -* design user interfaces with meaningful sequence of interactive user interface components +* design user experiences with meaningful sequence of interactive user interface components * define custom interaction patterns, such as where to place focus when a dialog is open and closed, and what the focus order should be within those dialogs * define mechanisms to obtain information about custom interaction patterns, such as specific keyboard shortcuts for applications and expected behavior of custom widgets * identify related requirements for developers to programmatically associate properties of interactive user interface components, such as names, states, and instructions, to their corresponding component diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 546486e74..93a456fd1 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -15,7 +15,7 @@ footer: >

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: - previous: /curricula/designer-modules/information-design/ + previous: /curricula/designer-modules/images-and-graphics/ next: /curricula/designer-modules/interaction-and-feedback/ --- diff --git a/content/designer/navigation.md b/content/designer/navigation.md index f564f9aae..52b76a2d6 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -74,6 +74,8 @@ Skills required for this module: * [WCAG 2 Success Criterion 2.4.8 Location](https://www.w3.org/WAI/WCAG21/quickref/#location) * [WCAG 2 Success Criterion 3.2.3 Consistent Navigation](https://www.w3.org/WAI/WCAG21/quickref/#consistent-navigation) +{% include excol.html type="end" %} + ## Topics to Teach Topics to achieve the learning outcomes: diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 9f6fc72eb..dc01d1001 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -36,7 +36,7 @@ Courses based on this module should: Students should be able to: * explain how people with disabilities identify and distinguish user interface components based on different features, such as color, layout, spacing, and position -* design user interfaces with alternative means to communicate information conveyed through vision, for example using headings, lists, and textual information +* design user interfaces with means to supplement information conveyed visually, for example using headings, lists, and textual information * design user interfaces with appropriate contrast ratios for text, images of text, and controls * design user interfaces with appropriate font sizes to support content processing * design user interfaces with adequate spacing to help distinguish different components from one another From b95d0cf779798d7c3c87613f679393aa4d20249c Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 23 Apr 2021 10:49:00 +0200 Subject: [PATCH 068/416] Update module titles --- content/designer/flexible-and-responsive-design.md | 2 +- content/designer/information-design.md | 2 +- content/designer/multimedia-and-animations.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/content/designer/flexible-and-responsive-design.md b/content/designer/flexible-and-responsive-design.md index 6aee7a0b2..9fbd9148f 100644 --- a/content/designer/flexible-and-responsive-design.md +++ b/content/designer/flexible-and-responsive-design.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 7: Flexible and Responsive Design" +title: "[Draft] Module 8: Flexible and Responsive Design" nav_title: "Flexible and Responsive Design" permalink: /curricula/designer-modules/flexible-and-responsive-design/ ref: /curricula/designer-modules/flexible-and-responsive-design/ diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 1af3f7996..885741588 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -15,7 +15,7 @@ footer: >

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: - previous: /curricula/designer-modules/navigation-and-orientation/ + previous: /curricula/designer-modules/navigation/ next: /curricula/designer-modules/images-and-graphics/ --- diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 93a456fd1..f138217e2 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 5: Multimedia and Animations" +title: "[Draft] Module 6: Multimedia and Animations" nav_title: "Multimedia and Animations" permalink: /curricula/designer-modules/multimedia-and-animations/ ref: /curricula/designer-modules/multimedia-and-animations/ From e8bc5413f872a642627e4e971cde451a03cb801e Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 23 Apr 2021 11:07:24 +0200 Subject: [PATCH 069/416] Fixing typo --- content/designer/flexible-and-responsive-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/flexible-and-responsive-design.md b/content/designer/flexible-and-responsive-design.md index 9fbd9148f..73f07b697 100644 --- a/content/designer/flexible-and-responsive-design.md +++ b/content/designer/flexible-and-responsive-design.md @@ -41,7 +41,7 @@ Students should be able to: * design user interfaces that support text resizing without loss of content and functionality * design user interfaces that do not restrict the content view and operation to a single display orientation, such as portrait or landscape * design user interfaces that support alternatives to multipoint or path-based gestures, such as swipe or pinch -* design user interfaces that undoing or aborting an action carried out with pointer operations +* design user interfaces that support undoing or aborting an action carried out with pointer operations {%- comment -%} From ce4c575fadf0a7f13b9ff596d0067ea19955f6b0 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 26 Apr 2021 16:31:17 +0200 Subject: [PATCH 070/416] Adding back some new topics --- .../flexible-and-responsive-design.md | 3 -- content/designer/images-and-graphics.md | 51 ++++++------------- content/designer/inclusive-design-process.md | 23 ++++----- content/designer/information-design.md | 41 +++------------ content/designer/interaction-and-feedback.md | 26 ++++++++-- content/designer/multimedia-and-animations.md | 3 -- content/designer/navigation.md | 34 ++----------- content/designer/visual-design.md | 41 ++++----------- 8 files changed, 73 insertions(+), 149 deletions(-) diff --git a/content/designer/flexible-and-responsive-design.md b/content/designer/flexible-and-responsive-design.md index 73f07b697..8eb72b8fa 100644 --- a/content/designer/flexible-and-responsive-design.md +++ b/content/designer/flexible-and-responsive-design.md @@ -43,8 +43,6 @@ Students should be able to: * design user interfaces that support alternatives to multipoint or path-based gestures, such as swipe or pinch * design user interfaces that support undoing or aborting an action carried out with pointer operations -{%- comment -%} - ## Competencies Skills required for this module: @@ -141,4 +139,3 @@ Suggested resources to support your teaching: [To be developed.] -{%- endcomment -%} \ No newline at end of file diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index d4e2ef557..554a7c4c9 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -31,15 +31,14 @@ Courses based on this module should: Students should be able to: * explain how images affect processing of information, content identification, and understanding of functionality by people with disabilities +* identify and describe different uses of images within a user interfaces, including informative, functional, and decorative * provide appropriate text alternatives for graphical components included in the design phase, such as logos, links, and menu items * describe ways to supplement information presented in text, including use of graphics, color, or shapes * provide equivalent textual information that helps identify the purpose of an image conveying function * design user interfaces that consider descriptions for images and graphics, including charts or diagrams -* identify related requirements for developers to code text alternatives appropriately -* identify related requirements for content authors to provide appropriate text alternatives for images -* identify related requirements for content authors to use text instead of images of text - -{%- comment -%} +* identify related requirements for developers to code images and text alternatives appropriately +* identify related requirements for content authors to provide appropriate text alternatives for images included in the authoring phase +* identify related requirements for content authors to present information as text wherever possible, instead of using images of text ## Competencies @@ -51,19 +50,15 @@ Skills required for this module: Topics to achieve the learning outcomes: -### Topic: Image Types +### Topic: Text Alternatives and Descriptions #### Learning Outcomes for Topic Students should be able to: -* define the following types of images from an accessibility perspective: - * informative - * textual - * decorative - * functional - * complex -* create designs that support use of text when the information presented is intended to be read as text, instead of using images of text +* identify and describe different uses of images to convey information +* provide text alternatives that present equivalent information as that contained in the image +* describe related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, such as diagrams or charts #### Teaching Ideas for Topic @@ -77,16 +72,16 @@ Optional ideas to support assessment: [To be developed.] -### Topic: Text Alternatives +### Topic: Functional Images #### Learning Outcomes for Topic Students should be able to: -* provide short text that serves as brief description of complex non textual pieces of information, such as charts or diagrams -* provide descriptive textual information for the following types of graphical information: - * those that are part of tests or exercises that would be invalid if presented in text - * those that are primarily intended to create a specific sensory experience +* identify and describe different uses of images and graphics to convey function +* provide short text alternatives for controls and components that accept user input, for example search, print, and save buttons +* provide text alternatives that identify and describe the purpose of human verification systems, such as captcha +* manage the provision of several modalities of captcha that rely on different sensory characteristics, such as visual, auditory, and logical #### Teaching Ideas for Topic @@ -100,27 +95,14 @@ Optional ideas to support assessment: [To be developed.] -### Topic: Functional Images +### Topic: Decorative Images #### Learning Outcomes for Topic Students should be able to: -* provide short text alternatives for controls and components that accept user input, for example search, print, and save buttons -* provide text alternatives that identify and describe the purpose of captcha and other graphical elements used to confirm that content is accessed by a person rather than a computer -* provide several modalities of captcha that rely on different sensory characteristics, such as visual or auditory - -#### Teaching Ideas for Topic - -Optional ideas to teach the learning outcomes: - -[To be developed.] - -#### Ideas to Assess Knowledge for Topic - -Optional ideas to support assessment: - -[To be developed.] +* identify and describe different uses of images with decorative meaning +* identify related requirements for developers to code decorative images appropriately ## Ideas to Assess Knowledge for Module @@ -133,4 +115,3 @@ Optional ideas to support assessment: Suggested resources to support your teaching: [To be developed.] -{%- endcomment -%} \ No newline at end of file diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index 682e37466..6f54021a8 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -46,8 +46,6 @@ Students should be able to: * describe accessibility characteristics and limitations of different testing methods, such as paper prototype testing and screen reader testing * describe related requirements for project owners to involve people with disabilities early and throughout in the design and development processes -{%- comment -%} - ## Competencies Skills required for this module: @@ -65,11 +63,12 @@ Topics to achieve the learning outcomes: Students should be able to: * explain the use of different assistive technologies and adaptive strategies by various groups of people with disabilities to interact with websites and applications -* ensure different types of users with disabilities are included when defining user groups -* ensure different types of accessibility barriers and features, such as appropriate contrast ratios and meaningful page structure, are included in the research phase -* ensure research is conducted on accessibility guidelines, standards, and policies to define and include accessibility in the overall project requirements -* determine the characteristics of participants in user research activities based on different factors, such as overall project requirements, level of experience, use of assistive technology, and type of disability -* ensure people with disabilities are involved early and throughout the research processes, including in focus groups, questionnaires, and surveys +* define user groups that include different types of users with disabilities +* research different types of accessibility barriers and features, such as appropriate contrast ratios and meaningful page structure +* research accessibility guidelines, standards, and policies, +* determine the characteristics of participants in user research activities based on different factors, such as overall project requirements, level of skills, use of assistive technology, and type of disability +* manage involvement of people with disabilities early and throughout the research processes, including in focus groups, questionnaires, and surveys +* identify related requirements for project managers to include accessibility in the overall project requirements #### Teaching Ideas for Topic @@ -89,12 +88,13 @@ Optional ideas to support assessment: Students should be able to: -* ensure different types of user requirements that relate to people with disabilities are considered, such as: +* consider different functional requirements that relate to people with disabilities, for example: * appropriate contrast ratios * availability of content and functionality in different screen sizes and configurations * keyboard compatibility * use with assistive technologies and adaptive strategies -* create personas that include people with different types of disabilities and different levels of experience using the Web + * consider different non functional accessibility requirements, for example WCAG and applicable accessibility policies +* create personas that include people with different types of disabilities and different levels of skills using the Web * create scenarios that include use of the website or application with different types of assistive technologies and adaptive strategies #### Teaching Ideas for Topic @@ -115,8 +115,8 @@ Optional ideas to support assessment: Students should be able to: -* ensure people with disabilities are involved in all stages where testing is scheduled, for example in testing prototypes, iterative testing phases, and usability testing -* ensure the following factors are considered when testing needs to be conducted at a specific location: +* involve people with disabilities in all stages where testing is scheduled, for example in testing prototypes, iterative testing phases, and usability testing +* consider the following factors when testing needs to be conducted at a specific location: * location and accessibility of the facilities * assistive technology needs * custom setups that users may require @@ -147,4 +147,3 @@ Suggested resources to support your teaching: [To be developed.] -{%- endcomment -%} \ No newline at end of file diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 885741588..bca33b513 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -36,11 +36,9 @@ Students should be able to: * the use of lists, simpler tables, and plain text to convey information presented in complex tables * the use of groups of form controls that share a common purpose * the use of search functionalities that filter large data sets to display small data subsets -* describe the use of labels and instructions to make information in forms more understandable +* describe the use of labels and instructions to make information in forms understandable * identify related requirements for developers to programmatically associate text alternatives, headings, table header and data cells, and form labels and instructions, to their corresponding control -{%- comment -%} - ## Competencies Skills required for this module: @@ -57,10 +55,10 @@ Topics to achieve the learning outcomes: Students should be able to: -* create designs that support additional ways to convey information presented in text, such as required form fields, using icons, shapes, and colors -* create designs that support mechanisms to identify specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon -* create designs that support mechanisms to identify the expanded form or meaning of acronyms and abbreviations -* create designs with clear language and easy-to-read content wherever possible +* design user interfaces that support additional ways to convey information presented in text, such as required form fields, using icons, shapes, and colors +* design user interfaces that support mechanisms to identify specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon +* design user interfaces that support mechanisms to identify the expanded form or meaning of acronyms and abbreviations +* design user interfaces with clear language and easy-to-read content wherever possible * describe related requirements for developers to make language programmatically determined * describe related requirements for content authors to provide clear language and easy-to-read texts whenever possible @@ -86,9 +84,9 @@ Students should be able to: * simple * complex * layout -* create designs that allow presentation of tables in multiple ways, such as using several lists, or splitting a complex table into several simpler ones -* create designs that allow to establish a relationship between the table cells both visually and programmatically, included for headers and data cells -* create designs that support the inclusion of table descriptions +* design user interfaces that allow presentation of tables in multiple ways, such as using several lists, or splitting a complex table into several simpler ones +* design user interfaces that allow to establish a relationship between the table cells both visually and programmatically, included for headers and data cells +* design user interfaces that support the inclusion of table descriptions * describe related requirements for developers to ensure that table header and data cells are programmatically associated #### Teaching Ideas for Topic @@ -125,28 +123,6 @@ Optional ideas to support assessment: [To be developed.] -### Topic: Journeys and Flows - -#### Learning Outcomes for Topic - -Students should be able to: - -* ensure different products of a store and parts of the content are accessible through different user journeys, such as a navigation menu and a search functionality -* create designs that support robust and understandable grouping of information, such as grouping related information in the same form step and categorizing similar products under the same section -* ensure information that is presented visually can also be accessed through different means, for example through equivalent descriptions of a product image - -#### Teaching Ideas for Topic - -Optional ideas to teach the learning outcomes: - -[To be developed.] - -#### Ideas to Assess Knowledge for Topic - -Optional ideas to support assessment: - -[To be developed.] - ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: @@ -157,4 +133,3 @@ Suggested resources to support your teaching: [To be developed -{%- endcomment -%} \ No newline at end of file diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 1d8f8b267..419cd19f9 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -41,8 +41,6 @@ Students should be able to: * identify related requirements for developers to programmatically associate properties of interactive user interface components, such as names, states, and instructions, to their corresponding component * identify related requirements for developers to write code for custom keyboard interactions that interactive user interface components may require -{%- comment -%} - ## Competencies Skills required for this module: @@ -107,6 +105,29 @@ Optional ideas to support assessment: [To be developed.] +### Topic: Enough Time + +#### Learning Outcomes for Topic + +Students should be able to: + +* design user interfaces that allow users to turn off time limits, for example to complete a form or to visualize information at the users pace +* design user interfaces that allow users to adjust existing time limits up to at least 10 times the original setting +* design user interfaces that support extending existing time limits by warning the user at least 20 seconds before the time limit expires +* ensure content that auto scrolls can be paused and resumed from where it was left to allow users to better read and process content + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +[To be developed.] + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] + ### Topic: Help and Error Prevention #### Learning Outcomes for Topic @@ -172,4 +193,3 @@ Optional ideas to support assessment: Suggested resources to support your teaching: [To be developed.] -{%- endcomment -%} \ No newline at end of file diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index f138217e2..4f071e3cf 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -39,8 +39,6 @@ Students should be able to: * identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding media content * identify related requirements for content authors to provide appropriate text alternatives and audio descriptions for different types of media content, including video and audio -{%- comment -%} - ## Competencies Skills required for this module: @@ -101,4 +99,3 @@ Optional ideas to support assessment: Suggested resources to support your teaching: [To be developed.] -{%- endcomment -%} \ No newline at end of file diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 52b76a2d6..d14dae1e6 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -41,8 +41,6 @@ Students should be able to: * identify related requirements for developers to code landmarks and headings appropriately * identify related requirements for developers to make navigational mechanisms usable with the keyboard and other input devices -{%- comment -%} - ## Competencies Skills required for this module: @@ -86,37 +84,14 @@ Topics to achieve the learning outcomes: Students should be able to: -* create designs that support skipping blocks of repeated content providing at least one of the following: +* design user interfaces that support skipping blocks of repeated content providing at least one of the following: * a link at the top of each page that goes directly to the main content area * a link at the beginning of a block of repeated content to go to the end of the block * links at the top of the page that go to each area of the content * an expandable and collapsible menu to make it easier for users to skip the menu -* create designs that support site maps to provide an overview of the entire website -* create designs that support breadcrumb trails to provide information about the user's location in a set of web pages -* create designs that support table of contents to give an overview of the whole website or document and to allow users to go to specific parts of the content - -#### Teaching Ideas for Topic - -Optional ideas to teach the learning outcomes: - -[To be developed.] - -#### Ideas to Assess Knowledge for Topic - -Optional ideas to support assessment: - -[To be developed.] - -### Topic: Enough Time - -#### Learning Outcomes for Topic - -Students should be able to: - -* create designs that allow users to turn off time limits, for example to complete a form or to visualize information at the users pace -* create designs that allow users to adjust existing time limits up to at least 10 times the original setting -* create designs that support extending existing time limits by warning the user at least 20 seconds before the time limit expires -* ensure content that auto scrolls can be paused and resumed from where it was left to allow users to better read and process content +* design user interfaces with site maps to provide an overview of the entire website +* design user interfaces with breadcrumb trails to provide information about the user's location in a set of web pages +* design user interfaces with tables of contents to give an overview of the whole website or document and to allow users to go to specific parts of the content #### Teaching Ideas for Topic @@ -142,4 +117,3 @@ Suggested resources to support your teaching: [To be developed.] -{%- endcomment -%} diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index dc01d1001..a7fbb4f09 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -43,8 +43,6 @@ Students should be able to: * design user interfaces with text cues, patterns, and icons to supplement information conveyed through color * design user interfaces with clear and distinguishable focus indicators, for example using borders, background color, and highlighting -{%- comment -%} - ## Competencies Skills required for this module: @@ -62,10 +60,10 @@ Topics to achieve the learning outcomes: Students should be able to: * explain how appropriate contrast ratios allow people with disabilities to read, understand, and distinguish user interface components -* create designs that allow text and images of text to have a contrast ratio of at least 4.5:1 with respect to their background -* create designs that allow for large-scale text and images of text to have a contrast ratio of at least 3:1 with respect to their background -* create designs that allow user interface components and graphical elements to have a contrast ratio of at least 3:1 with respect to their background -* ensure focus indicators have a contrast ratio that allows them to be perceived by users +* design user interfaces that allow text and images of text to have a contrast ratio of at least 4.5:1 with respect to their background +* design user interfaces that allow for large-scale text and images of text to have a contrast ratio of at least 3:1 with respect to their background +* design user interfaces that allow components and graphics to have a contrast ratio of at least 3:1 with respect to their background +* design user interfaces with focus indicators that have a contrast ratio that allows them to be perceived by users #### Teaching Ideas for Topic @@ -79,17 +77,18 @@ Optional ideas to support assessment: [To be developed.] -### Topic: Section and Content Identification +### Topic: Content Perception #### Learning Outcomes for Topic Students should be able to: -* ensure distinguishable styles are applied to different page regions, such as header, navigation, main, and footer -* ensure distinguishable styles are used for different components, such as text, links, buttons, or form elements -* create designs that allow for text cues to convey any information that is provided using color alone, such as an asterisk to convey required form fields in a form -* ensure that information provided using differences in color is also provided using different patterns, shapes, and icons -* ensure that information conveyed through differences in text color is also conveyed using other visual cues, such as underline, bold, and italics +* design user interfaces with distinguishable styles for different page regions, such as header, navigation, main, and footer +* design user interfaces with distinguishable styles for different components, such as text, links, buttons, or form elements +* design user interfaces with font sizes to perceive and distinguish content +* design user interfaces with text cues to convey any information that is provided using color alone, such as an asterisk to convey required form fields in a form +* provide information using different patterns, shapes, and icons to supplement information provided only with differences in color +* provide other visual cues, such as underline, bold, and italics, to supplement information conveyed through differences in text color #### Teaching Ideas for Topic @@ -103,26 +102,8 @@ Optional ideas to support assessment: [To be developed.] -### Topic: Page Structure - -#### Learning Outcomes for Topic - -Students should be able to: - -* provide distinctive styles and descriptive names for each of the page regions, headings, and for individual user interface components such as links, buttons, or form fields -* ensure positioning of page regions falls under user expectations, such as headers at the top, footers at the bottom, and navigation regions at the top left in a desktop view -* ensure heading levels a-6 are used to convey the hierarchical structure of the content -* identify related requirements for developers to ensure headings are coded appropriately, perceived by assistive technologies, and nested according to the specifications - -## Ideas to Assess Knowledge for Module - -Optional ideas to support assessment: - -[To be developed.] - ## Teaching Resources Suggested resources to support your teaching: [To be developed.] -{%- endcomment -%} \ No newline at end of file From 058c5d75cec8535c699a67ae5981b0e7c04543a4 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 26 Apr 2021 17:04:50 +0200 Subject: [PATCH 071/416] Updates to topics --- content/designer/flexible-and-responsive-design.md | 8 ++++---- content/designer/inclusive-design-process.md | 1 + 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/content/designer/flexible-and-responsive-design.md b/content/designer/flexible-and-responsive-design.md index 8eb72b8fa..b033ab6c6 100644 --- a/content/designer/flexible-and-responsive-design.md +++ b/content/designer/flexible-and-responsive-design.md @@ -60,7 +60,7 @@ Topics to achieve the learning outcomes: Students should be able to: * design user interfaces that preserve content and functionality when accessed using a variety of screen sizes, screen configurations, and style sheets -* ensure content can be presented without loss of information and functionality, and that accessing such content does not require two-dimensional scrolling: +* create user interfaces that support presentation of content without loss of information and functionality, and that accessing such content does not require two-dimensional scrolling: * vertical (at a width equivalent to 320 CSS pixels) * horizontal (at a height equivalent to 256 CSS pixels) * create designs that allow text resizing up to 200% without loss of content and functionality @@ -88,7 +88,7 @@ Students should be able to: * line spacing -- to at least 1.5 times the font size * spacing following paragraphs -- to at least 2 times the font size * letter spacing (tracking) -- to at least 0.12 times the font size -* ensure target sizes that are at least 44 by 44 CSS pixels +* create user interfaces with target sizes that are at least 44 by 44 CSS pixels #### Teaching Ideas for Topic @@ -109,11 +109,11 @@ Optional ideas to support assessment: Students should be able to: * create designs that support alternatives to multi-pointer gestures (such as swipe or pinch) using single pointer activation -* ensure down event on single pointer gestures: +* design user interfaces with down events on single pointer gestures that: * do not perform any action, or * have available mechanisms to abort or undo any action carried on * create designs that support alternatives to device or user motion such as shaking, by using user interface components that do not require motion -* ensure response to motion can be disabled by the user to prevent accidental actuation, such as undoing an action by shaking a device +* design user interfaces that support disabling response to motion to prevent accidental actuation, such as undoing an action by shaking a device #### Teaching Ideas for Topic diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index 6f54021a8..89d1f47e1 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -64,6 +64,7 @@ Students should be able to: * explain the use of different assistive technologies and adaptive strategies by various groups of people with disabilities to interact with websites and applications * define user groups that include different types of users with disabilities +* research the current accessibility state of a website or application from the perspective of people with disabilities * research different types of accessibility barriers and features, such as appropriate contrast ratios and meaningful page structure * research accessibility guidelines, standards, and policies, * determine the characteristics of participants in user research activities based on different factors, such as overall project requirements, level of skills, use of assistive technology, and type of disability From 4e82d9e4cb0f28b8591f69e6bbd40412e6fb0581 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 27 Apr 2021 12:32:17 +0200 Subject: [PATCH 072/416] Updates to learning outcomes for module --- content/designer/inclusive-design-process.md | 4 ++-- content/designer/information-design.md | 2 +- content/designer/navigation.md | 11 ++++++----- content/designer/visual-design.md | 9 +++++---- 4 files changed, 14 insertions(+), 12 deletions(-) diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index 682e37466..577c09034 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -40,11 +40,11 @@ Students should be able to: * identify the scope of accessibility in inclusive design processes and relate accessibility to usability and inclusion * research and communicate applicable design requirements, such as those defined by accessibility standards and policies * manage the involvement of people with disabilities for the different user research activities of a project, including focus groups, personas, scenarios, and usability testing -* manage representation of diverse groups of users with disabilities, including people with various levels of skills using assistive technologies and adaptive strategies * describe different accommodation means for involving people with disabilities in user research activities +* manage representation of diverse groups of users with disabilities, including people with various levels of skills using assistive technologies and adaptive strategies * describe and apply ethical considerations when working with people with disabilities, for example avoiding clichés and myths * describe accessibility characteristics and limitations of different testing methods, such as paper prototype testing and screen reader testing -* describe related requirements for project owners to involve people with disabilities early and throughout in the design and development processes +* describe related requirements for project owners to plan for the involvement of people with disabilities early and throughout in the design and development processes {%- comment -%} diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 885741588..a5beedfd4 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -35,7 +35,7 @@ Students should be able to: * the use of headings and pages to divide longer passages of text into smaller pieces * the use of lists, simpler tables, and plain text to convey information presented in complex tables * the use of groups of form controls that share a common purpose - * the use of search functionalities that filter large data sets to display small data subsets + * the use of filters to display small data subsets from a given data set * describe the use of labels and instructions to make information in forms more understandable * identify related requirements for developers to programmatically associate text alternatives, headings, table header and data cells, and form labels and instructions, to their corresponding control diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 52b76a2d6..e42a32b71 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -34,12 +34,13 @@ Students should be able to: * design user interfaces with mechanisms to bypass blocks of repeated content, such as navigation links, header contents, or advertisements * design user interfaces with search functionalities to help users find content * design user interfaces that support accessibility features of multiple menus, such as navigational, fly-out, and application menus -* design user interfaces with additional navigational mechanisms, including breadcrumb trails, tables of contents, and sitemaps +* design user interfaces that support different types of navigational mechanisms, including breadcrumb trails, tables of contents, and sitemaps * design user interfaces that support placement of different regions and user interface components where users expect them -* provide clear and descriptive landmark names that allow users to identify different regions of a page or application -* provide clear and descriptive heading texts that allow users to identify different parts of the content -* identify related requirements for developers to code landmarks and headings appropriately -* identify related requirements for developers to make navigational mechanisms usable with the keyboard and other input devices +* provide headings and landmarks to identify different regions of a page or application +* identify related requirements for developers to: + * code landmarks and headings appropriately + * make navigational mechanisms usable with the keyboard and other input devices + * provide clear and descriptive naems for landmarks and headings {%- comment -%} diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index dc01d1001..abae4c187 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -36,12 +36,13 @@ Courses based on this module should: Students should be able to: * explain how people with disabilities identify and distinguish user interface components based on different features, such as color, layout, spacing, and position -* design user interfaces with means to supplement information conveyed visually, for example using headings, lists, and textual information +* design user interfaces that communicate the meaning of components using different sensory characteristics * design user interfaces with appropriate contrast ratios for text, images of text, and controls -* design user interfaces with appropriate font sizes to support content processing -* design user interfaces with adequate spacing to help distinguish different components from one another -* design user interfaces with text cues, patterns, and icons to supplement information conveyed through color +* design user interfaces with adjustable font sizes to support readability +* design user interfaces with adequate spacing to support readability +* design user interfaces with landmarks, text cues, patterns, and icons to supplement information conveyed through color * design user interfaces with clear and distinguishable focus indicators, for example using borders, background color, and highlighting +* identify related requirements for developers to apply the necessary semantics to user interface components {%- comment -%} From 3d0176e86c4fe3f8e26555e2f89ae45b5e7e8695 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 27 Apr 2021 13:00:49 +0200 Subject: [PATCH 073/416] Updates to learning outcomes for module --- content/designer/inclusive-design-process.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index 577c09034..f08faa1d1 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -35,7 +35,7 @@ Courses based on this module should: Students should be able to: -* explain how involving users with disabilities early and throughout in the design and development process leads to better accessibility of websites and applications +* explain how involving users with disabilities in the design and development process leads to better accessibility * explain strategies and assistive technologies that people with disabilities use to interact with the Web * identify the scope of accessibility in inclusive design processes and relate accessibility to usability and inclusion * research and communicate applicable design requirements, such as those defined by accessibility standards and policies From 286a65355587c44be1a9a53608ae4b46f1518e2a Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 27 Apr 2021 16:08:56 +0200 Subject: [PATCH 074/416] Fixing Typo --- content/designer/navigation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/navigation.md b/content/designer/navigation.md index e42a32b71..5122734fc 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -40,7 +40,7 @@ Students should be able to: * identify related requirements for developers to: * code landmarks and headings appropriately * make navigational mechanisms usable with the keyboard and other input devices - * provide clear and descriptive naems for landmarks and headings + * provide clear and descriptive names for landmarks and headings {%- comment -%} From 9b67cb8139410cb989dcde33940ad9dd67a4aa94 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 27 Apr 2021 16:23:15 +0200 Subject: [PATCH 075/416] Restructuring role references --- content/designer/designer-modules.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 5d7c3b8f2..bed133d8e 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -33,8 +33,6 @@ These modules focus on user experience, visual, and interaction aspects to desig * User Experience (UX) Designer * User Researcher -* UX Researcher -* User Experience Analyst -* Service Designer +* Visual Designer * Information Architect * Interaction Designer From cdc2966a14d217ac5fdb9c05f5915fe0429b69a2 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 28 Apr 2021 15:51:06 +0200 Subject: [PATCH 076/416] Working on topics --- content/designer/inclusive-design-process.md | 15 ++++++++--- content/designer/information-design.md | 10 ++++++++ content/designer/navigation.md | 26 +++++++++++++------- content/designer/visual-design.md | 2 +- 4 files changed, 39 insertions(+), 14 deletions(-) diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index 5ee122b53..caed43244 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -56,6 +56,13 @@ Skills required for this module: Topics to achieve the learning outcomes: +### Topic: Accommodations for People with Disabilities + +#### Learning Outcomes for Topic + +Students should be able to: + + ### Topic: User Research #### Learning Outcomes for Topic @@ -63,10 +70,9 @@ Topics to achieve the learning outcomes: Students should be able to: * explain the use of different assistive technologies and adaptive strategies by various groups of people with disabilities to interact with websites and applications -* define user groups that include different types of users with disabilities -* research the current accessibility state of a website or application from the perspective of people with disabilities +* define user groups that include different types of users with disabilities * research different types of accessibility barriers and features, such as appropriate contrast ratios and meaningful page structure -* research accessibility guidelines, standards, and policies, +* research applicable accessibility guidelines, standards, and policies, such as WCAG * determine the characteristics of participants in user research activities based on different factors, such as overall project requirements, level of skills, use of assistive technology, and type of disability * manage involvement of people with disabilities early and throughout the research processes, including in focus groups, questionnaires, and surveys * identify related requirements for project managers to include accessibility in the overall project requirements @@ -94,7 +100,7 @@ Students should be able to: * availability of content and functionality in different screen sizes and configurations * keyboard compatibility * use with assistive technologies and adaptive strategies - * consider different non functional accessibility requirements, for example WCAG and applicable accessibility policies +* consider different non functional accessibility requirements, for example WCAG and applicable accessibility policies * create personas that include people with different types of disabilities and different levels of skills using the Web * create scenarios that include use of the website or application with different types of assistive technologies and adaptive strategies @@ -123,6 +129,7 @@ Students should be able to: * custom setups that users may require * accessibility of transportation means * ensure appropriate timings for participants to carry on activities is allocated, for example different time sets for different levels of experience with the assistive technology and different levels of familiarity with the website or application +* describe how different testing methods can be made accessible #### Teaching Ideas for Topic diff --git a/content/designer/information-design.md b/content/designer/information-design.md index a50d9ef56..092f8229b 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -123,6 +123,16 @@ Optional ideas to support assessment: [To be developed.] +### Topic: Data Visualization + +#### Learning Outcomes for Topic + +Students should be able to: + +* create user interfaces that allow to filter data using different mechanisms such as search boxes or subsets of data +* create user interfaces that allow to use the keyboard to navigate to specific pieces of data +* create user interfaces that allow customizing the resultsthat are shown at a given time + ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 8dd5a558d..3aadc19c3 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -40,16 +40,12 @@ Students should be able to: * identify related requirements for developers to: * code landmarks and headings appropriately * make navigational mechanisms usable with the keyboard and other input devices - * provide clear and descriptive names for landmarks and headings + * implement clear and descriptive names for landmarks and headings ## Competencies Skills required for this module: -[To be developed.] - -Skills required for this module: - {% include excol.html type="start" %} ### Students @@ -79,7 +75,19 @@ Skills required for this module: Topics to achieve the learning outcomes: -### Topic: Navigational Mechanisms +### Topic: Menu Types + +#### Learning OUtcomes for Topic + +Students should be able to: + +* identify uses of different types of menus, such as navigational, fly-out, and application menus +* design user interfaces that support use of menus with the mouse, keyboard, and touch +* design user interfaces that support expanding and collapsing menu items using different methods, such as hovering, tabbing, and tapping +* design user interfaces that support different menu states, such as open, closed, expanded, or collapsed + + +### Topic: Other Navigational Mechanisms #### Learning Outcomes for Topic @@ -90,9 +98,9 @@ Students should be able to: * a link at the beginning of a block of repeated content to go to the end of the block * links at the top of the page that go to each area of the content * an expandable and collapsible menu to make it easier for users to skip the menu -* design user interfaces with site maps to provide an overview of the entire website -* design user interfaces with breadcrumb trails to provide information about the user's location in a set of web pages -* design user interfaces with tables of contents to give an overview of the whole website or document and to allow users to go to specific parts of the content +* design user interfaces that support site maps to provide an overview of the entire website +* design user interfaces that support breadcrumb trails to provide information about the user's location in a set of web pages +* design user interfaces that support tables of contents to give an overview of the whole website or document and to allow users to go to specific parts of the content #### Teaching Ideas for Topic diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index cd7548607..6ec462e0c 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -42,7 +42,7 @@ Students should be able to: * design user interfaces with adequate spacing to support readability * design user interfaces with landmarks, text cues, patterns, and icons to supplement information conveyed through color * design user interfaces with clear and distinguishable focus indicators, for example using borders, background color, and highlighting -* identify related requirements for developers to apply the necessary semantics to user interface components +* design user interfaces that support placement of different regions and user interface components where users expect them* identify related requirements for developers to apply the necessary semantics to user interface components ## Competencies From 217546356a90828f0c71b5f60e4b717e50e32378 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 28 Apr 2021 15:59:19 +0200 Subject: [PATCH 077/416] Direct and indirect involvement of pwd --- content/designer/inclusive-design-process.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index f08faa1d1..c8f86d142 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -36,15 +36,14 @@ Courses based on this module should: Students should be able to: * explain how involving users with disabilities in the design and development process leads to better accessibility -* explain strategies and assistive technologies that people with disabilities use to interact with the Web * identify the scope of accessibility in inclusive design processes and relate accessibility to usability and inclusion * research and communicate applicable design requirements, such as those defined by accessibility standards and policies -* manage the involvement of people with disabilities for the different user research activities of a project, including focus groups, personas, scenarios, and usability testing -* describe different accommodation means for involving people with disabilities in user research activities +* manage direct or indirect involvement of people with disabilities for the different user research activities of a project +* describe different accommodation needs for people with disabilities * manage representation of diverse groups of users with disabilities, including people with various levels of skills using assistive technologies and adaptive strategies * describe and apply ethical considerations when working with people with disabilities, for example avoiding clichés and myths * describe accessibility characteristics and limitations of different testing methods, such as paper prototype testing and screen reader testing -* describe related requirements for project owners to plan for the involvement of people with disabilities early and throughout in the design and development processes +* describe related requirements for product owners and other team roles to plan for the involvement of people with disabilities early and throughout in the design and development processes {%- comment -%} From 2f6beec433af0e4bc1af185cf4402968587cda3d Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 29 Apr 2021 10:23:14 +0200 Subject: [PATCH 078/416] Changes to inclusive design process learning outcomes --- content/designer/inclusive-design-process.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index 871dfe81a..e678783e0 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -40,8 +40,8 @@ Students should be able to: * research and communicate applicable design requirements, such as those defined by accessibility standards and policies * manage direct or indirect involvement of people with disabilities for the different user research activities of a project * describe different accommodation needs for people with disabilities -* manage representation of diverse groups of users with disabilities, including people with various levels of skills using assistive technologies and adaptive strategies -* describe and apply ethical considerations when working with people with disabilities, for example avoiding clichés and myths +* manage user needs of diverse groups of users with disabilities, including people with various levels of skills using assistive technologies and adaptive strategies +* describe ethical considerations when working with people with disabilities, for example avoiding clichés and myths * describe accessibility characteristics and limitations of different testing methods, such as paper prototype testing and screen reader testing * describe related requirements for product owners and other team roles to plan for the involvement of people with disabilities early and throughout in the design and development processes From 4ccf86dd268a2490d91e33caca26b7ec256941e1 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 4 May 2021 12:55:05 +0200 Subject: [PATCH 079/416] Changes to inclusive design learning outcomes for module --- content/designer/inclusive-design-process.md | 30 ++++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index e678783e0..b211365db 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -37,13 +37,14 @@ Students should be able to: * explain how involving users with disabilities in the design and development process leads to better accessibility * identify the scope of accessibility in inclusive design processes and relate accessibility to usability and inclusion -* research and communicate applicable design requirements, such as those defined by accessibility standards and policies -* manage direct or indirect involvement of people with disabilities for the different user research activities of a project -* describe different accommodation needs for people with disabilities -* manage user needs of diverse groups of users with disabilities, including people with various levels of skills using assistive technologies and adaptive strategies -* describe ethical considerations when working with people with disabilities, for example avoiding clichés and myths -* describe accessibility characteristics and limitations of different testing methods, such as paper prototype testing and screen reader testing -* describe related requirements for product owners and other team roles to plan for the involvement of people with disabilities early and throughout in the design and development processes +* research and communicate applicable design requirements for accessibility, such as those defined by accessibility standards and policies +* research and communicate different methods to involve people with disabilities depending on the project scope and the planned research activities +* research and communicate different accommodation needs for people with disabilities +* research and communicate user needs of diverse groups of people with disabilities, including people with various levels of skills using assistive technologies and adaptive strategies +* research and communicate accessibility characteristics and limitations of different testing methods, such as paper prototype testing and screen reader testing +* describe related requirements for product owners and other team roles to plan for the involvement of people with disabilities + +{%- comment -%} ## Competencies @@ -68,13 +69,11 @@ Students should be able to: Students should be able to: -* explain the use of different assistive technologies and adaptive strategies by various groups of people with disabilities to interact with websites and applications -* define user groups that include different types of users with disabilities +* explain the use of different assistive technologies and adaptive strategies by various groups of people with disabilities * research different types of accessibility barriers and features, such as appropriate contrast ratios and meaningful page structure * research applicable accessibility guidelines, standards, and policies, such as WCAG -* determine the characteristics of participants in user research activities based on different factors, such as overall project requirements, level of skills, use of assistive technology, and type of disability -* manage involvement of people with disabilities early and throughout the research processes, including in focus groups, questionnaires, and surveys -* identify related requirements for project managers to include accessibility in the overall project requirements +* research the characteristics of participants in user research activities based on different factors, such as overall project requirements, level of skills, use of assistive technology, and type of disability +* identify related requirements for project managers and other team members to include accessibility in the overall project requirements #### Teaching Ideas for Topic @@ -99,9 +98,9 @@ Students should be able to: * availability of content and functionality in different screen sizes and configurations * keyboard compatibility * use with assistive technologies and adaptive strategies -* consider different non functional accessibility requirements, for example WCAG and applicable accessibility policies -* create personas that include people with different types of disabilities and different levels of skills using the Web -* create scenarios that include use of the website or application with different types of assistive technologies and adaptive strategies +* research different non functional accessibility requirements, for example WCAG and applicable accessibility policies +* research personas that include people with different types of disabilities and different levels of skills using the Web +* research scenarios that include use of the website or application with different types of assistive technologies and adaptive strategies #### Teaching Ideas for Topic @@ -154,3 +153,4 @@ Suggested resources to support your teaching: [To be developed.] +{%- endcomment -%} \ No newline at end of file From 1681430c7c683b108f60a45b14f5f46bab6e934c Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 5 May 2021 13:34:20 +0200 Subject: [PATCH 080/416] UPdating module navigation --- content/designer/navigation.md | 32 +++++++++++++++++++++++++------- 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 3aadc19c3..611787112 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -30,11 +30,11 @@ Courses based on this module should: Students should be able to: -* explain strategies that people with disabilities use to navigate and orient themselves in web pages and applications -* design user interfaces with mechanisms to bypass blocks of repeated content, such as navigation links, header contents, or advertisements +* explain strategies that people with disabilities use to navigate web pages and applications +* design user interfaces with mechanisms to bypass blocks of repeated content, such as navigation links and header contents * design user interfaces with search functionalities to help users find content * design user interfaces that support accessibility features of multiple menus, such as navigational, fly-out, and application menus -* design user interfaces that support different types of navigational mechanisms, including breadcrumb trails, tables of contents, and sitemaps +* design user interfaces that support different types of navigational mechanisms, including breadcrumb trails, tables of contents, and site maps * design user interfaces that support placement of different regions and user interface components where users expect them * provide headings and landmarks to identify different regions of a page or application * identify related requirements for developers to: @@ -77,15 +77,29 @@ Topics to achieve the learning outcomes: ### Topic: Menu Types -#### Learning OUtcomes for Topic +#### Learning Outcomes for Topic Students should be able to: * identify uses of different types of menus, such as navigational, fly-out, and application menus * design user interfaces that support use of menus with the mouse, keyboard, and touch * design user interfaces that support expanding and collapsing menu items using different methods, such as hovering, tabbing, and tapping -* design user interfaces that support different menu states, such as open, closed, expanded, or collapsed +* design user interfaces that communicate the state of menu items using distinguishable and consistent styles +* identify related requirements for developers to convey different menu states, such as open, closed, expanded, or collapsed + +#### Teaching Ideas + +Optional ideas to teach the learning outcomes: + +* Show examples of different types of menus, such as navigational, fly-out, and application menus. Explain the different scenarios where each of them can be used. For references on the different types of menus, see @@@ +* Demonstrate menu interaction using different input devices, such as keyboard, mouse, and touch. Explain that menus need to be operable with all of these input methods. For example, activating a menu option by tapping, pressing the Enter key, or clicking it with the mouse. +* Show examples of different menu interaction patterns, such as expanding an collapsing submenu options. Explain that these patterns need to support interaction with the keyboard, mouse, and touch as well. Emphasize that the states of these menu items need to be communicated using styles, icons, and semantics. Explain that providing the icons and style is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. +#### Ideas to Assess Knowledge + +Optional ideas to support assessment. + +[To be developed]. ### Topic: Other Navigational Mechanisms @@ -98,15 +112,19 @@ Students should be able to: * a link at the beginning of a block of repeated content to go to the end of the block * links at the top of the page that go to each area of the content * an expandable and collapsible menu to make it easier for users to skip the menu -* design user interfaces that support site maps to provide an overview of the entire website +* design user interfaces that support search functionalities for users to find content * design user interfaces that support breadcrumb trails to provide information about the user's location in a set of web pages +* design user interfaces that support site maps to provide an overview of the entire website * design user interfaces that support tables of contents to give an overview of the whole website or document and to allow users to go to specific parts of the content #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -[To be developed.] +* Show examples of mechanisms to bypass blocks of repeated content, such as a link at the top of the page and the use of expandable and collapsible components. Explain that people using the keyboard only find it very frustrating to navigate through sets of repeated blocks of content, such as navigation bars or header contents. For references on how to provide a mechanism to bypass blocks of repeated content, see @@@ +* Show examples of breadcrumb trails. Explain that they provide information about the user's location within the context of a set of websites. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see @@@ +* Show examples of site maps and explain that they serve the purpose of providing an overview of the whole site. Explain that some users rely on them to better understand the structure of the site and to more easily find its way through it. For references on how to provide a site map, see @@@ +* Show examples of tables of contents, for example in an electronic book or document. Explain that they provide an overview of the whole document and allow navigation to specific parts of the content. #### Ideas to Assess Knowledge for Topic From 1acab89eb68abdeb72d0fb189c2045539a6f1037 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 5 May 2021 13:50:16 +0200 Subject: [PATCH 081/416] UPdating module 2 visual design --- content/designer/visual-design.md | 54 +++++++++++++++++++------------ 1 file changed, 34 insertions(+), 20 deletions(-) diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 6ec462e0c..bb1f2b316 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -37,12 +37,13 @@ Students should be able to: * explain how people with disabilities identify and distinguish user interface components based on different features, such as color, layout, spacing, and position * design user interfaces that communicate the meaning of components using different sensory characteristics -* design user interfaces with appropriate contrast ratios for text, images of text, and controls * design user interfaces with adjustable font sizes to support readability * design user interfaces with adequate spacing to support readability * design user interfaces with landmarks, text cues, patterns, and icons to supplement information conveyed through color +* design user interfaces with appropriate contrast ratios for text, images of text, and controls * design user interfaces with clear and distinguishable focus indicators, for example using borders, background color, and highlighting -* design user interfaces that support placement of different regions and user interface components where users expect them* identify related requirements for developers to apply the necessary semantics to user interface components +* design user interfaces that support placement of different regions and user interface components where users expect them +* identify related requirements for developers to apply the necessary semantics to user interface components ## Competencies @@ -54,23 +55,27 @@ Skills required for this module: Topics to achieve the learning outcomes: -### Topic: Contrast Ratios +### Topic: Content Perception #### Learning Outcomes for Topic Students should be able to: - -* explain how appropriate contrast ratios allow people with disabilities to read, understand, and distinguish user interface components -* design user interfaces that allow text and images of text to have a contrast ratio of at least 4.5:1 with respect to their background -* design user interfaces that allow for large-scale text and images of text to have a contrast ratio of at least 3:1 with respect to their background -* design user interfaces that allow components and graphics to have a contrast ratio of at least 3:1 with respect to their background -* design user interfaces with focus indicators that have a contrast ratio that allows them to be perceived by users + +* design user interfaces with distinguishable styles for different components, such as text, links, buttons, or form elements +* design user interfaces with font sizes that allow content readability +* design user interfaces with adequate spacing to support content identification +* design user interfaces with text cues to convey any information that is provided using color alone, such as an asterisk to convey required form fields in a form +* design user interfaces with different patterns, shapes, and icons to supplement information provided only with differences in color +* provide other visual cues, such as underline, bold, and italics, to supplement information conveyed through differences in text color #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -[To be developed.] +* Demonstrate use of different styles for different user interface components, such as links ,buttons, texts, and menus. Explain how people rely on font sizes, spacing, and typography to distinguish components from one another. For references on how to apply distinguishable styles for user interface components, see @@@ +* Demonstrate use of different font sizes and explain how they affect readability of the content. For reference on how to apply font sizes that allow content readability, see @@@ +* Show examples of different page layouts with and without adequate spacing. Explain how spacing allow to distinguish different pieces of content from one another. For references on how to apply adequate spacing, see @@@ +* Show examples where information is conveyed exclusively with differences sin color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so alternative methods to convey that information are required. For references on how to convey information without using color alone, see @@@ #### Ideas to Assess Knowledge for Topic @@ -78,30 +83,39 @@ Optional ideas to support assessment: [To be developed.] -### Topic: Content Perception +### Topic: Contrast Ratios #### Learning Outcomes for Topic Students should be able to: - -* design user interfaces with distinguishable styles for different page regions, such as header, navigation, main, and footer -* design user interfaces with distinguishable styles for different components, such as text, links, buttons, or form elements -* design user interfaces with font sizes to perceive and distinguish content -* design user interfaces with text cues to convey any information that is provided using color alone, such as an asterisk to convey required form fields in a form -* provide information using different patterns, shapes, and icons to supplement information provided only with differences in color -* provide other visual cues, such as underline, bold, and italics, to supplement information conveyed through differences in text color + +* explain how appropriate contrast ratios allow people with disabilities to read, understand, and distinguish user interface components +* design user interfaces that allow text (including images of text) to have a contrast ratio of at least 4.5:1 with respect to their background +* design user interfaces that allow for large-scale text and images of text to have a contrast ratio of at least 3:1 with respect to their background +* design user interfaces that allow components and graphics to have a contrast ratio of at least 3:1 with respect to their background +* design user interfaces with focus indicators that have a contrast ratio that allows them to be perceived by users #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -[To be developed.] +* Show examples of different foreground and background combinations. Explain how contrast ratios between foreground and background allow users to perceive content and distinguish components from one another. For references on contrast ratios , see @@@ +* Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios need to be at least 4.5:1. For references on how to apply contrast ratios to text (including images of text), see @@@ +* @@@ +* Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. For techniques on how to add contrast ratios for graphics and interface components, see@@@ #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -[To be developed.] +* Short Answer Questions — Give students a set of user interface components and ask them what the contrast ration should be. Assess how students understand and distinguish contrast ratios for different user interface components. +* Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing + +## Ideas to Assess Knowledge for Module + +Optional ideas to support assessment: + +[To be developed]. ## Teaching Resources From 725e98bb5c9e2dcfb836ca80f181697e4f88e314 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 10 May 2021 13:29:23 +0200 Subject: [PATCH 082/416] Updating "Inclusive Design Process" --- content/designer/inclusive-design-process.md | 87 +++++++++++++------- 1 file changed, 58 insertions(+), 29 deletions(-) diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index b211365db..982a8e618 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -29,22 +29,21 @@ navigation: Courses based on this module should: -[To be developed.] +* discuss the importance of involving people with disabilities +* discuss user requirements and needs of people with disabilities ## Learning Outcomes for Module Students should be able to: -* explain how involving users with disabilities in the design and development process leads to better accessibility -* identify the scope of accessibility in inclusive design processes and relate accessibility to usability and inclusion -* research and communicate applicable design requirements for accessibility, such as those defined by accessibility standards and policies -* research and communicate different methods to involve people with disabilities depending on the project scope and the planned research activities -* research and communicate different accommodation needs for people with disabilities -* research and communicate user needs of diverse groups of people with disabilities, including people with various levels of skills using assistive technologies and adaptive strategies -* research and communicate accessibility characteristics and limitations of different testing methods, such as paper prototype testing and screen reader testing -* describe related requirements for product owners and other team roles to plan for the involvement of people with disabilities - -{%- comment -%} +* explain how involving people with disabilities in the design and development process leads to better accessibility +* assess and communicate the need for involvement of people with disabilities +* examine applicable design requirements for accessibility, such as those defined by accessibility standards and policies +* articulate the potential risks of not involving people with disabilities +* describe different accommodation needs for people with disabilities +* describe user needs of diverse groups of people with disabilities, including people with various levels of skills using assistive technologies and adaptive strategies +* describe accessibility characteristics and limitations of different testing methods +* identify related requirements for product owners and other team roles to plan for the involvement of people with disabilities ## Competencies @@ -56,23 +55,42 @@ Skills required for this module: Topics to achieve the learning outcomes: -### Topic: Accommodations for People with Disabilities +### Topic: Assessing the Involvement of People with Disabilities + +Explain how involving people with disabilities can lead to better accessibility of websites and applications. Discuss scenarios where recruiting people with disabilities may not be feasible, and explain the potential risks of not involving people with disabilities. #### Learning Outcomes for Topic Students should be able to: +* assess and communicate the need for involving people with disabilities depending on the project scope +* identify different mechanisms to include people with disabilities in user research activities, such as recruiting people with disabilities, asking for experts advice, or following documented best practices +* articulate and communicate the potential risks of not involving users with disabilities, for example higher costs to implement accessibility at a later stage + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +[To be developed.] + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] ### Topic: User Research +Explain different aspects for organizations conducting user research to involve people with disabilities. + #### Learning Outcomes for Topic Students should be able to: -* explain the use of different assistive technologies and adaptive strategies by various groups of people with disabilities -* research different types of accessibility barriers and features, such as appropriate contrast ratios and meaningful page structure -* research applicable accessibility guidelines, standards, and policies, such as WCAG -* research the characteristics of participants in user research activities based on different factors, such as overall project requirements, level of skills, use of assistive technology, and type of disability +* describe the use of different assistive technologies and adaptive strategies by various groups of people with disabilities +* describe different types of accessibility barriers and features, such as appropriate contrast ratios and meaningful page structure +* describe applicable accessibility guidelines, standards, and policies, such as WCAG +* describe the characteristics of potential participants in user research activities based on different factors, such as overall project requirements, type of disability, and level of skills using assistive technologies and adaptive strategies * identify related requirements for project managers and other team members to include accessibility in the overall project requirements #### Teaching Ideas for Topic @@ -89,6 +107,8 @@ Optional ideas to support assessment: ### Topic: Establishing Requirements +Present accessibility standards (such as WCAG2) and policies that may apply in the students' region. Discuss functional and non-functional requirements related to people with disabilities. + #### Learning Outcomes for Topic Students should be able to: @@ -97,10 +117,10 @@ Students should be able to: * appropriate contrast ratios * availability of content and functionality in different screen sizes and configurations * keyboard compatibility - * use with assistive technologies and adaptive strategies -* research different non functional accessibility requirements, for example WCAG and applicable accessibility policies -* research personas that include people with different types of disabilities and different levels of skills using the Web -* research scenarios that include use of the website or application with different types of assistive technologies and adaptive strategies + * compatibility with assistive technologies and adaptive strategies +* identify different non-functional accessibility requirements, for example those included in WCAG and in applicable accessibility policies +* identify personas that include people with different types of disabilities and different levels of skills using the Web +* identify scenarios that include use of the website or application with different types of assistive technologies and adaptive strategies #### Teaching Ideas for Topic @@ -114,20 +134,24 @@ Optional ideas to support assessment: [To be developed.] -### Topic: Testing +### Topic: Including Users with Disabilities + +Discuss different aspects to consider when working with real people with disabilities. #### Learning Outcomes for Topic Students should be able to: -* involve people with disabilities in all stages where testing is scheduled, for example in testing prototypes, iterative testing phases, and usability testing -* consider the following factors when testing needs to be conducted at a specific location: - * location and accessibility of the facilities +* assess and communicate the need for including real people with disabilities depending on the project scope and the activities to be conducted +* articulate the advantages and disadvantages of remote versus face-to-face participation when working with people with disabilities +* articulate the advantages and disadvantages of guided and non-guided testing +* identify the following needs when research activities are conducted at a specific location: + * accessibility of the facilities * assistive technology needs * custom setups that users may require - * accessibility of transportation means -* ensure appropriate timings for participants to carry on activities is allocated, for example different time sets for different levels of experience with the assistive technology and different levels of familiarity with the website or application -* describe how different testing methods can be made accessible + * accessibility of transportation means to get to the chosen venue +* identify the need for appropriate timings for participants with different levels of skills to conduct the research activities +* relate different testing methods to different accessibility outcomes #### Teaching Ideas for Topic @@ -135,6 +159,13 @@ Optional ideas to teach the learning outcomes: [To be developed.] +{%- comment -%} + +* Discuss the different levels of skills that users may have when using an assistive technology or an adaptive strategy. Explain that different people may need different amounts of time to conduct the proposed activities. For example, setting up different time expectations depending on different levels of experience with the assistive technology and different levels of familiarity with the website or application +* Explain different testing methods that exist, such as testing with an assistive technology, testing a paper prototype, or testing an HTML template. Explain that each of these methods delivers different types of outputs. For example, testing a paper prototype is more likely to deliver results related to vision, and assistive technology testing is more likely to deliver results related to the compatibility of the product with assistive technology. + +{%- endcomment -%} + #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: @@ -152,5 +183,3 @@ Optional ideas to support assessment: Suggested resources to support your teaching: [To be developed.] - -{%- endcomment -%} \ No newline at end of file From 71ab736c1fa9f4ced743e6745ff73027d1ced1e8 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 10 May 2021 13:41:53 +0200 Subject: [PATCH 083/416] Users -> Real People --- content/designer/inclusive-design-process.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index 982a8e618..333d72ff7 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -65,7 +65,7 @@ Students should be able to: * assess and communicate the need for involving people with disabilities depending on the project scope * identify different mechanisms to include people with disabilities in user research activities, such as recruiting people with disabilities, asking for experts advice, or following documented best practices -* articulate and communicate the potential risks of not involving users with disabilities, for example higher costs to implement accessibility at a later stage +* articulate and communicate the potential risks of not involving people with disabilities, for example higher costs to implement accessibility at a later stage #### Teaching Ideas for Topic @@ -134,7 +134,7 @@ Optional ideas to support assessment: [To be developed.] -### Topic: Including Users with Disabilities +### Topic: Including Real People with Disabilities Discuss different aspects to consider when working with real people with disabilities. @@ -148,7 +148,7 @@ Students should be able to: * identify the following needs when research activities are conducted at a specific location: * accessibility of the facilities * assistive technology needs - * custom setups that users may require + * custom setups that people with disabilities may require * accessibility of transportation means to get to the chosen venue * identify the need for appropriate timings for participants with different levels of skills to conduct the research activities * relate different testing methods to different accessibility outcomes @@ -161,7 +161,7 @@ Optional ideas to teach the learning outcomes: {%- comment -%} -* Discuss the different levels of skills that users may have when using an assistive technology or an adaptive strategy. Explain that different people may need different amounts of time to conduct the proposed activities. For example, setting up different time expectations depending on different levels of experience with the assistive technology and different levels of familiarity with the website or application +* Discuss the different levels of skills of people with disabilities when using an assistive technology or an adaptive strategy. Emphasize that some assistive technologies and adaptive strategies are difficult to learn. Explain that different people may need different timings to conduct the proposed activities. For example, setting up different time expectations depending on different levels of experience with the assistive technology and different levels of familiarity with the website or application * Explain different testing methods that exist, such as testing with an assistive technology, testing a paper prototype, or testing an HTML template. Explain that each of these methods delivers different types of outputs. For example, testing a paper prototype is more likely to deliver results related to vision, and assistive technology testing is more likely to deliver results related to the compatibility of the product with assistive technology. {%- endcomment -%} From 2cb141dd9ce097b454f5b61fa5b687bb9b43343f Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 10 May 2021 15:27:21 +0200 Subject: [PATCH 084/416] Trying new module structure --- _data/navigation.yml | 10 +- content/designer/designer-modules.md | 2 +- .../flexible-and-responsive-design.md | 96 +++++++------- content/designer/images-and-graphics.md | 7 +- content/designer/inclusive-design-process.md | 4 +- content/designer/information-design.md | 2 +- content/designer/interaction-and-feedback.md | 87 +++++------- content/designer/navigation.md | 6 +- content/designer/visual-design.md | 124 ------------------ 9 files changed, 90 insertions(+), 248 deletions(-) delete mode 100644 content/designer/visual-design.md diff --git a/_data/navigation.yml b/_data/navigation.yml index 7b6a9e641..cd0c54d70 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -259,10 +259,8 @@ - name: Designer Modules url: "/curricula/designer-modules/" pages: - - name: Inclusive Design Process - url: "/curricula/designer-modules/inclusive-design-process/" - - name: Visual Design - url: "/curricula/designer-modules/visual-design/" +Flexible and Responsive Design + url: "/curricula/designer-modules/flexible-and-responsive-design/" - name: Navigation url: "/curricula/designer-modules/navigation/" - name: Information Design @@ -273,8 +271,8 @@ url: "/curricula/designer-modules/multimedia-and-animations/" - name: Interaction and Feedback url: "/curricula/designer-modules/interaction-and-feedback/" - - name: Flexible and Responsive Design - url: "/curricula/designer-modules/flexible-and-responsive-design/" + - name: Inclusive Design Process + url: "/curricula/designer-modules/inclusive-design-process/" - name: Changelog url: "/curricula/changelog/" hide: true diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index bed133d8e..11a3352c2 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -19,7 +19,7 @@ parent_in_h1: name: title navigation: previous: /curricula/developer-modules/rich-applications/ - next: /curricula/designer-modules/inclusive-design-process/ + next: /curricula/designer-modules/flexible-and-responsive-design/ --- ## Introduction diff --git a/content/designer/flexible-and-responsive-design.md b/content/designer/flexible-and-responsive-design.md index b033ab6c6..585749f38 100644 --- a/content/designer/flexible-and-responsive-design.md +++ b/content/designer/flexible-and-responsive-design.md @@ -1,12 +1,12 @@ --- -title: "[Draft] Module 8: Flexible and Responsive Design" -nav_title: "Flexible and Responsive Design" +title: "[Draft] Module 2: Flexible and Responsive Design" +nav_title: "Flexible and Responsivee Design" permalink: /curricula/designer-modules/flexible-and-responsive-design/ ref: /curricula/designer-modules/flexible-and-responsive-design/ lang: en github: repository: w3c/wai-curricula - path: content/designer/flexible-and-responsive-design.md + path: content/designer/flexible-and-responsivee-design.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ @@ -20,7 +20,8 @@ parent_in_h1: - ref: /curricula/ name: "Curricula on Web Accessibility" navigation: - previous: /curricula/designer-modules/multimedia-and-animations/ + previous: /curricula/designer-modules/ + next: /curricula/designer-modules/navigation/ --- ## Introduction @@ -34,14 +35,13 @@ Courses based on this module should: Students should be able to: -* explain how the use of different screen sizes, screen configurations, and style sheets affects the ability of people with disabilities to identify, distinguish, and process websites and applications -* design user interfaces with target sizes and spaces to support tapping by people with mobility impairments and people using different input methods -* design user interfaces that adapt their sequence, content, and functionality when used with different viewport sizes, screen configurations, and devices to access content -* design user interfaces that support customizing line height, as well as spacing between paragraphs, words, and letters -* design user interfaces that support text resizing without loss of content and functionality -* design user interfaces that do not restrict the content view and operation to a single display orientation, such as portrait or landscape -* design user interfaces that support alternatives to multipoint or path-based gestures, such as swipe or pinch -* design user interfaces that support undoing or aborting an action carried out with pointer operations +* explain how people with disabilities identify and distinguish user interface components based on different features, such as color, layout, spacing, and position +* design user interfaces with landmarks, text cues, patterns, and icons to supplement information conveyed through color alone +* design user interfaces with adjustable font sizes, adequate spacing, and sufficient targets to support readability +* design user interfaces with appropriate contrast ratios for text, images of text, and controls +* design user interfaces with clear and distinguishable focus indicators, for example using borders, background color, and highlighting +* design user interfaces that support placement of different regions and user interface components where users expect them +* identify related requirements for developers to apply the necessary semantics to user interface components ## Competencies @@ -53,24 +53,27 @@ Skills required for this module: Topics to achieve the learning outcomes: -### Topic: Zooming, Scrolling, and Resizing +### Topic: Content Perception #### Learning Outcomes for Topic Students should be able to: -* design user interfaces that preserve content and functionality when accessed using a variety of screen sizes, screen configurations, and style sheets -* create user interfaces that support presentation of content without loss of information and functionality, and that accessing such content does not require two-dimensional scrolling: - * vertical (at a width equivalent to 320 CSS pixels) - * horizontal (at a height equivalent to 256 CSS pixels) -* create designs that allow text resizing up to 200% without loss of content and functionality -* create designs that allow users to set the orientation to portrait or landscape, or that include show or hide controls to access contents in portrait and landscape orientations +* design user interfaces with distinguishable styles for different components, such as text, links, buttons, or form elements +* design user interfaces with font sizes that allow content readability +* design user interfaces with adequate spacing to support readability +* design user interfaces with text cues to convey any information that is provided using color alone, such as an asterisk to convey required form fields in a form +* design user interfaces with different patterns, shapes, and icons to supplement information provided only with differences in color +* provide other visual cues, such as underline, bold, and italics, to supplement information conveyed through differences in text color #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -[To be developed.] +* Demonstrate use of different styles for different user interface components, such as links ,buttons, texts, and menus. Explain how people rely on font sizes, spacing, and typography to distinguish components from one another. For references on how to apply distinguishable styles for user interface components, see @@@ +* Demonstrate use of different font sizes and explain how they affect readability of the content. For reference on how to apply font sizes that allow content readability, see @@@ +* Show examples of different page layouts with and without adequate spacing. Explain how spacing allow to distinguish different pieces of content from one another. For references on how to apply adequate spacing, see @@@ +* Show examples where information is conveyed exclusively with differences sin color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so alternative methods to convey that information are required. For references on how to convey information without using color alone, see @@@ #### Ideas to Assess Knowledge for Topic @@ -78,64 +81,57 @@ Optional ideas to support assessment: [To be developed.] -### Topic: Targets and Spacing +### Topic: Contrast Ratios #### Learning Outcomes for Topic Students should be able to: - -* create designs that allow users to modify the following properties without loss of content and functionality: - * line spacing -- to at least 1.5 times the font size - * spacing following paragraphs -- to at least 2 times the font size - * letter spacing (tracking) -- to at least 0.12 times the font size -* create user interfaces with target sizes that are at least 44 by 44 CSS pixels + +* explain how appropriate contrast ratios allow people with disabilities to read, understand, and distinguish user interface components +* design user interfaces that allow text (including images of text) to have a contrast ratio of at least 4.5:1 with respect to their background +* design user interfaces that allow for large-scale text and images of text to have a contrast ratio of at least 3:1 with respect to their background +* design user interfaces that allow components and graphics to have a contrast ratio of at least 3:1 with respect to their background +* design user interfaces with focus indicators that have a contrast ratio that allows them to be perceived by users #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -[To be developed.] +* Show examples of different foreground and background combinations. Explain how contrast ratios between foreground and background allow users to perceive content and distinguish components from one another. For references on contrast ratios , see @@@ +* Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios need to be at least 4.5:1. For references on how to apply contrast ratios to text (including images of text), see @@@ +* @@@ +* Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. For techniques on how to add contrast ratios for graphics and interface components, see@@@ #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -[To be developed.] +* Short Answer Questions — Give students a set of user interface components and ask them what the contrast ration should be. Assess how students understand and distinguish contrast ratios for different user interface components. +* Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing -### Topic: Input Modalities +### Topic: Flexible Design #### Learning Outcomes for Topic Students should be able to: -* create designs that support alternatives to multi-pointer gestures (such as swipe or pinch) using single pointer activation -* design user interfaces with down events on single pointer gestures that: - * do not perform any action, or - * have available mechanisms to abort or undo any action carried on -* create designs that support alternatives to device or user motion such as shaking, by using user interface components that do not require motion -* design user interfaces that support disabling response to motion to prevent accidental actuation, such as undoing an action by shaking a device - -#### Teaching Ideas for Topic - -Optional ideas to teach the learning outcomes: - -[To be developed.] - -#### Ideas to Assess Knowledge for Topic - -Optional ideas to support assessment: - -[To be developed.] +* explain how the use of different screen sizes, screen configurations, break points, and style sheets affects the ability of people with disabilities to identify, distinguish, and process contents +* design user interfaces that adapt their sequence, content, and functionality when used with different viewport sizes, screen configurations, and devices to access content +* design user interfaces with target sizes and spaces to support tapping by people with mobility impairments and people using different input methods +* design user interfaces that support customizing line height, as well as spacing between paragraphs, words, and letters +* design user interfaces that support text resizing without loss of content and functionality +* design user interfaces that do not restrict the content view and operation to a single display orientation, such as portrait or landscape +* design user interfaces that support alternatives to multi-pointer or path-based gestures, such as swipe or pinch +* design user interfaces that support undoing or aborting an action carried out with pointer operations ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: -[To be developed.] +[To be developed]. ## Teaching Resources Suggested resources to support your teaching: [To be developed.] - diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 554a7c4c9..17ace0d7e 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -64,7 +64,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -[To be developed.] +* Show examples of different images that convey information, such as images to provide instructions, or to identify objects. Explain that such information needs to be provided using text alternatives, so that the purpose of the image can be understood without having to look at the image. For references on how to provide text alternatives for images, see #### Ideas to Assess Knowledge for Topic @@ -72,7 +72,7 @@ Optional ideas to support assessment: [To be developed.] -### Topic: Functional Images +### Topic: Images Conveying Function #### Learning Outcomes for Topic @@ -87,7 +87,8 @@ Students should be able to: Optional ideas to teach the learning outcomes: -[To be developed.] +* Show examples of different images used to convey functionality, such as for printing, searching, or saving. Explain that it is necessary to provide and equivalent, succinct text alternative that explain the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see +* Show examples of different verification systems, such as captcha, to identify human beings trying to access a service or system. Explain that these mechanisms need to support several sensory characteristics, such as visual, auditory, or cognitive. SFor references on how to provide accessible captcha, see #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index 333d72ff7..6ab062ac6 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -20,8 +20,8 @@ parent_in_h1: - ref: /curricula/ name: "Curricula on Web Accessibility" navigation: - previous: /curricula/designer-modules/ - next: /curricula/designer-modules/visual-design/ + previous: /curricula/designer-modules/itneraction-and-feedback/ + next: --- ## Introduction diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 092f8229b..781914f0c 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -131,7 +131,7 @@ Students should be able to: * create user interfaces that allow to filter data using different mechanisms such as search boxes or subsets of data * create user interfaces that allow to use the keyboard to navigate to specific pieces of data -* create user interfaces that allow customizing the resultsthat are shown at a given time +* create user interfaces that allow customizing the results that are shown at a given time ## Ideas to Assess Knowledge for Module diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 419cd19f9..adf2ba098 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -31,11 +31,11 @@ Courses based on this module should: Students should be able to: * explain strategies that people with disabilities use to identify, distinguish, and operate interactive user interface components -* design user experiences that support different input mechanisms, including mouse, touch, and keyboard +* design user interfaces that support different input mechanisms, including mouse, touch, and keyboard * provide clear and distinguishable ways to identify interactive user interface components, including through naming and placement * provide methods to help understand the context, information, and functionality of user interface components, including through textual instructions, visual cues, and icons * provide meaningful and descriptive notifications about imminent time limits, status changes, and feedback from user input, including errors, suggestions for correction, and success messages -* design user experiences with meaningful sequence of interactive user interface components +* design user interfaces with meaningful sequence of interactive user interface components * define custom interaction patterns, such as where to place focus when a dialog is open and closed, and what the focus order should be within those dialogs * define mechanisms to obtain information about custom interaction patterns, such as specific keyboard shortcuts for applications and expected behavior of custom widgets * identify related requirements for developers to programmatically associate properties of interactive user interface components, such as names, states, and instructions, to their corresponding component @@ -57,18 +57,15 @@ Topics to achieve the learning outcomes: Students should be able to: -* provide designs that support operation with the keyboard -* describe related requirements for developers to ensure every user interface component can be entered, operated, and exited using the keyboard only +* design user interfaces that support operation with the keyboard * identify situations when it may be necessary to provide additional keyboard shortcuts, for example when designing a custom functionality -* create designs that allow provision of keyboard shortcuts that avoid conflicts with the operating system, browser, and assistive technologies keyboard shortcuts -* create designs that allow for consistent focus indicators through the whole widget or application lifetime +* design user interfaces that support keyboard shortcuts that avoid conflicts with the operating system, browser, and assistive technologies keyboard shortcuts +* describe related requirements for developers to ensure every user interface component can be entered, operated, and exited using the keyboard only #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -[To be developed.] - #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: @@ -81,23 +78,25 @@ Optional ideas to support assessment: Students should be able to: -* provide overall labels and instructions to help users understand the purpose and intent of interactive user interface components, such as names for form fields and custom widgets and instructions about how to operate custom widgets -* create designs that allow to position labels where users expect them, for example - * labels for form fields to the left of the field or above in left-to-right languages, or to the right of the field or above it in right-to-left languages - * labels for radio buttons or checkboxes to the right of the field or below it in left-to-right languages or to the left of the field or below it in right-to-left languages +* provide names to help users understand the purpose and intent of interactive user interface components +* design user interfaces that allow to position labels where users expect them, for example * provide instructions about which input fields are required by: * including information about each of the required form fields before the form control * including text, icons, and color in the label of each of the required form fields that indicates that they are required * provide clear instructions about changes in context that happen when there is a change on a control before the control, for example when launching a new window when the user checks a check box or selects a list item * provide overall instructions about existing time limits in a form and about how they can be turned off, adjusted, or extended * provide clear instructions about the current step and about the total number of steps involved in a multi-step form -* identify related requirements for developers to ensure that labels and instructions are programmatically associated to their corresponding user interface component +* identify related requirements for developers to code labels and instructions appropriately #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -[To be developed.] +* Show examples of different interactive components, such as buttons, links, or widgets, and emphasize that each should have a clear name that allows to identify its purpose. For reference on how to provide names for different user interface components, see +* Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. FOr example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. For references on how to place labels for form fields, see +* Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several mechanisms, including color, text, or icons. For references on how to communicate that form fields are required, see +* Discuss reasons for implementing time limits, such as exams or security purposes. Explain that instructions need to be provided so that users are aware of the time limits, and mechanisms need to be put in place to stop, adjust, or extend time limits. Explain that providing the instructions is a responsibility of the designer, whereas implementing mechanisms to stop, extend, or adjust time limits is a responsibility shared with the developer. +*( Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. #### Ideas to Assess Knowledge for Topic @@ -105,51 +104,25 @@ Optional ideas to support assessment: [To be developed.] -### Topic: Enough Time - -#### Learning Outcomes for Topic - -Students should be able to: - -* design user interfaces that allow users to turn off time limits, for example to complete a form or to visualize information at the users pace -* design user interfaces that allow users to adjust existing time limits up to at least 10 times the original setting -* design user interfaces that support extending existing time limits by warning the user at least 20 seconds before the time limit expires -* ensure content that auto scrolls can be paused and resumed from where it was left to allow users to better read and process content - -#### Teaching Ideas for Topic - -Optional ideas to teach the learning outcomes: - -[To be developed.] - -#### Ideas to Assess Knowledge for Topic - -Optional ideas to support assessment: - -[To be developed.] - -### Topic: Help and Error Prevention +### Topic: Feedback and Notifications #### Learning Outcomes for Topic Students should be able to: -* create designs that support identification of form fields with automatically detected errors -* create designs that support textual descriptions of errors that can be automatically identified -* provide labels and instructions about how data should be entered, such as date formats and specific ways to introduce identification and phone numbers -* create designs that support provision of suggestions for input errors that are automatically detected when these suggestions are known -* create designs that support reversing, checking, and confirming data entered by the user at least for the following types of information - * financial - * legal - * modifications and deletions of user-controllable data collected in data storage systems - * submissions of user test responses -* create designs that support context help methods for form fields, such as a "help" link next to the form +* design user interfaces with notifications that are easy to understand and that can be distinguished from any other user interface component +* provide meaningful and descriptive messages about errors, suggestions for corrections, successes, or any other event +* design user interfaces that allow to switch notifications on or off to allow notifications processing at the users pace +* design user interfaces that support mechanisms to queue and prioritize application notifications coming from different interactive user interface components, such as form fields and custom widgets +* describe related requirements for developers to code notification messages appropriately #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -[To be developed.] +* Show examples of different mechanisms to communicate notifications, such as through text messages, haptic and audio feedback, and pop up windows. +* Demonstrate different types of error messages and explain why it is necessary to communicate the specific field where the error has occurred and, if possible, provide suggestions for users to correct the error. +* Show examples of overlapping notifications in the context of a web applications. Explain that some users may find it daunting to process several notifications at the same time, so there should be a mechanism that allows to prioritize notifications based on their relevance. #### Ideas to Assess Knowledge for Topic @@ -157,19 +130,19 @@ Optional ideas to support assessment: [To be developed.] -### Topic: Feedback and Notifications +### Topic: Gestures and Animations #### Learning Outcomes for Topic Students should be able to: -* ensure notification messages are easy to understand and can be distinguished from any other user interface component -* provide textual information about errors, successes, or any other event resulting from user input -* create designs that allow to switch notifications on or off to allow notifications processing at the users pace -* identify different types of notifications based on their priority, relevance, and relation to specific parts of the application or to the application as a whole -* create designs that support mechanisms to queue and prioritize application notifications coming from different interactive user interface components, such as form fields and custom widgets -* describe related requirements for developers to ensure that notification messages are associated to their corresponding user interface component and can be rendered by assistive technologies - +* design user interfaces that support alternatives to device or user motion such as shaking, by using user interface components that do not require motion +* design user interfaces that support disabling response to motion to prevent accidental actuation, such as undoing an action by shaking a device +* create designs that support alternatives to multi-pointer gestures (such as swipe or pinch) using single pointer activation +* design user interfaces with down events on single pointer gestures that: + * do not perform any action, or + * have available mechanisms to abort or undo any action carried on +S #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 611787112..2d1c88cca 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -15,7 +15,7 @@ footer: >

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: - previous: /curricula/designer-modules/visual-design/ + previous: /curricula/designer-modules/flexible-and-responsive-design/ next: /curricula/designer-modules/information-design/ --- @@ -31,12 +31,10 @@ Courses based on this module should: Students should be able to: * explain strategies that people with disabilities use to navigate web pages and applications +* design user interfaces that support different types of navigational mechanisms, including breadcrumb trails, tables of contents, and site maps * design user interfaces with mechanisms to bypass blocks of repeated content, such as navigation links and header contents * design user interfaces with search functionalities to help users find content * design user interfaces that support accessibility features of multiple menus, such as navigational, fly-out, and application menus -* design user interfaces that support different types of navigational mechanisms, including breadcrumb trails, tables of contents, and site maps -* design user interfaces that support placement of different regions and user interface components where users expect them -* provide headings and landmarks to identify different regions of a page or application * identify related requirements for developers to: * code landmarks and headings appropriately * make navigational mechanisms usable with the keyboard and other input devices diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md deleted file mode 100644 index bb1f2b316..000000000 --- a/content/designer/visual-design.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: "[Draft] Module 2: Visual Design" -nav_title: "Visual Design" -permalink: /curricula/designer-modules/visual-design/ -ref: /curricula/designer-modules/visual-design/ -lang: en -github: - repository: w3c/wai-curricula - path: content/designer/visual-design.md -license: creative-commons -acknowledgements: /curricula/acknowledgements/ -changelog: /curricula/changelog/ -footer: > -

Date: Updated @@ Month 2021. First published December 2019.

-

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

-

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

-parent_in_h1: - - ref: /curricula/designer-modules/ - name: nav_title - - ref: /curricula/ - name: "Curricula on Web Accessibility" -navigation: - previous: /curricula/designer-modules/inclusive-design-process/ - next: /curricula/designer-modules/navigation/ ---- - -## Introduction -{:.no-display} - -Courses based on this module should: - -[To be developed.] - -## Learning Outcomes for Module - -Students should be able to: - -* explain how people with disabilities identify and distinguish user interface components based on different features, such as color, layout, spacing, and position -* design user interfaces that communicate the meaning of components using different sensory characteristics -* design user interfaces with adjustable font sizes to support readability -* design user interfaces with adequate spacing to support readability -* design user interfaces with landmarks, text cues, patterns, and icons to supplement information conveyed through color -* design user interfaces with appropriate contrast ratios for text, images of text, and controls -* design user interfaces with clear and distinguishable focus indicators, for example using borders, background color, and highlighting -* design user interfaces that support placement of different regions and user interface components where users expect them -* identify related requirements for developers to apply the necessary semantics to user interface components - -## Competencies - -Skills required for this module: - -[To be developed.] - -## Topics to Teach - -Topics to achieve the learning outcomes: - -### Topic: Content Perception - -#### Learning Outcomes for Topic - -Students should be able to: - -* design user interfaces with distinguishable styles for different components, such as text, links, buttons, or form elements -* design user interfaces with font sizes that allow content readability -* design user interfaces with adequate spacing to support content identification -* design user interfaces with text cues to convey any information that is provided using color alone, such as an asterisk to convey required form fields in a form -* design user interfaces with different patterns, shapes, and icons to supplement information provided only with differences in color -* provide other visual cues, such as underline, bold, and italics, to supplement information conveyed through differences in text color - -#### Teaching Ideas for Topic - -Optional ideas to teach the learning outcomes: - -* Demonstrate use of different styles for different user interface components, such as links ,buttons, texts, and menus. Explain how people rely on font sizes, spacing, and typography to distinguish components from one another. For references on how to apply distinguishable styles for user interface components, see @@@ -* Demonstrate use of different font sizes and explain how they affect readability of the content. For reference on how to apply font sizes that allow content readability, see @@@ -* Show examples of different page layouts with and without adequate spacing. Explain how spacing allow to distinguish different pieces of content from one another. For references on how to apply adequate spacing, see @@@ -* Show examples where information is conveyed exclusively with differences sin color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so alternative methods to convey that information are required. For references on how to convey information without using color alone, see @@@ - -#### Ideas to Assess Knowledge for Topic - -Optional ideas to support assessment: - -[To be developed.] - -### Topic: Contrast Ratios - -#### Learning Outcomes for Topic - -Students should be able to: - -* explain how appropriate contrast ratios allow people with disabilities to read, understand, and distinguish user interface components -* design user interfaces that allow text (including images of text) to have a contrast ratio of at least 4.5:1 with respect to their background -* design user interfaces that allow for large-scale text and images of text to have a contrast ratio of at least 3:1 with respect to their background -* design user interfaces that allow components and graphics to have a contrast ratio of at least 3:1 with respect to their background -* design user interfaces with focus indicators that have a contrast ratio that allows them to be perceived by users - -#### Teaching Ideas for Topic - -Optional ideas to teach the learning outcomes: - -* Show examples of different foreground and background combinations. Explain how contrast ratios between foreground and background allow users to perceive content and distinguish components from one another. For references on contrast ratios , see @@@ -* Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios need to be at least 4.5:1. For references on how to apply contrast ratios to text (including images of text), see @@@ -* @@@ -* Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. For techniques on how to add contrast ratios for graphics and interface components, see@@@ - -#### Ideas to Assess Knowledge for Topic - -Optional ideas to support assessment: - -* Short Answer Questions — Give students a set of user interface components and ask them what the contrast ration should be. Assess how students understand and distinguish contrast ratios for different user interface components. -* Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing - -## Ideas to Assess Knowledge for Module - -Optional ideas to support assessment: - -[To be developed]. - -## Teaching Resources - -Suggested resources to support your teaching: - -[To be developed.] From 0a99161ac593f624dafd61935907e677bab99f88 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 10 May 2021 15:34:18 +0200 Subject: [PATCH 085/416] Trying new structure --- _data/navigation.yml | 2 +- content/designer/flexible-and-responsive-design.md | 2 +- content/designer/images-and-graphics.md | 2 +- content/designer/inclusive-design-process.md | 2 +- content/designer/information-design.md | 2 +- content/designer/interaction-and-feedback.md | 2 +- content/designer/multimedia-and-animations.md | 2 +- content/designer/navigation.md | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/_data/navigation.yml b/_data/navigation.yml index cd0c54d70..6757b84e2 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -259,7 +259,7 @@ - name: Designer Modules url: "/curricula/designer-modules/" pages: -Flexible and Responsive Design + - name: Flexible and Responsive Design url: "/curricula/designer-modules/flexible-and-responsive-design/" - name: Navigation url: "/curricula/designer-modules/navigation/" diff --git a/content/designer/flexible-and-responsive-design.md b/content/designer/flexible-and-responsive-design.md index 585749f38..d32965cbf 100644 --- a/content/designer/flexible-and-responsive-design.md +++ b/content/designer/flexible-and-responsive-design.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 2: Flexible and Responsive Design" +title: "[Draft] Module 1: Flexible and Responsive Design" nav_title: "Flexible and Responsivee Design" permalink: /curricula/designer-modules/flexible-and-responsive-design/ ref: /curricula/designer-modules/flexible-and-responsive-design/ diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 17ace0d7e..baff184c4 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 5: Images and Graphics" +title: "[Draft] Module 4: Images and Graphics" nav_title: "Images and Graphics" permalink: /curricula/designer-modules/images-and-graphics/ ref: /curricula/designer-modules/images-and-graphics/ diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index 6ab062ac6..a816a7c0b 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 1: Inclusive Design Process" +title: "[Draft] Module 7: Inclusive Design Process" nav_title: "Inclusive Design Process" permalink: /curricula/designer-modules/inclusive-design-process/ ref: /curricula/designer-modules/inclusive-design-process/ diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 781914f0c..3ed65db8b 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 4: Information Design" +title: "[Draft] Module 3: Information Design" nav_title: "Information Design" permalink: /curricula/designer-modules/information-design/ ref: /curricula/designer-modules/information-design/ diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index adf2ba098..d3557f2f8 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 7: Interaction and Feedback" +title: "[Draft] Module 6: Interaction and Feedback" nav_title: "Interaction and Feedback" permalink: /curricula/designer-modules/interaction-and-feedback/ ref: /curricula/designer-modules/interaction-and-feedback/ diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 4f071e3cf..04cd00e47 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 6: Multimedia and Animations" +title: "[Draft] Module 5: Multimedia and Animations" nav_title: "Multimedia and Animations" permalink: /curricula/designer-modules/multimedia-and-animations/ ref: /curricula/designer-modules/multimedia-and-animations/ diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 2d1c88cca..251ac5e2d 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 3: Navigation" +title: "[Draft] Module 2: Navigation" nav_title: "Navigation" permalink: /curricula/designer-modules/navigation/ ref: /curricula/designer-modules/navigation/ From f96f71beee41737ceb077987fd954eaf4ef492ae Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 10 May 2021 15:41:19 +0200 Subject: [PATCH 086/416] Trying new module structure Updates to inclusive design process --- content/designer/inclusive-design-process.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index a816a7c0b..5cc84847b 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -29,8 +29,8 @@ navigation: Courses based on this module should: -* discuss the importance of involving people with disabilities -* discuss user requirements and needs of people with disabilities +* discuss benefits of involving people with disabilities and risks of not involving people with disabilities +* discuss user requirements and accommodation needs of people with disabilities ## Learning Outcomes for Module @@ -41,8 +41,6 @@ Students should be able to: * examine applicable design requirements for accessibility, such as those defined by accessibility standards and policies * articulate the potential risks of not involving people with disabilities * describe different accommodation needs for people with disabilities -* describe user needs of diverse groups of people with disabilities, including people with various levels of skills using assistive technologies and adaptive strategies -* describe accessibility characteristics and limitations of different testing methods * identify related requirements for product owners and other team roles to plan for the involvement of people with disabilities ## Competencies From a8074db459382c7b6c143ffd6a0840df585f2a9d Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 10 May 2021 16:29:54 +0200 Subject: [PATCH 087/416] commenting drafted parts --- .../flexible-and-responsive-design.md | 28 ++++++++++++++++ content/designer/images-and-graphics.md | 24 ++++++++++++++ content/designer/inclusive-design-process.md | 14 ++++++++ content/designer/information-design.md | 32 +++++++++++++++++++ content/designer/interaction-and-feedback.md | 14 +++++++- content/designer/multimedia-and-animations.md | 24 ++++++++++++++ content/designer/navigation.md | 10 +++++- 7 files changed, 144 insertions(+), 2 deletions(-) diff --git a/content/designer/flexible-and-responsive-design.md b/content/designer/flexible-and-responsive-design.md index d32965cbf..dbe7455a1 100644 --- a/content/designer/flexible-and-responsive-design.md +++ b/content/designer/flexible-and-responsive-design.md @@ -66,6 +66,8 @@ Students should be able to: * design user interfaces with different patterns, shapes, and icons to supplement information provided only with differences in color * provide other visual cues, such as underline, bold, and italics, to supplement information conveyed through differences in text color +{%- comment -%} + #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: @@ -81,6 +83,8 @@ Optional ideas to support assessment: [To be developed.] +{%- endcomment -%} + ### Topic: Contrast Ratios #### Learning Outcomes for Topic @@ -93,6 +97,8 @@ Students should be able to: * design user interfaces that allow components and graphics to have a contrast ratio of at least 3:1 with respect to their background * design user interfaces with focus indicators that have a contrast ratio that allows them to be perceived by users +{%- comment -%} + #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: @@ -109,6 +115,8 @@ Optional ideas to support assessment: * Short Answer Questions — Give students a set of user interface components and ask them what the contrast ration should be. Assess how students understand and distinguish contrast ratios for different user interface components. * Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing +{%- endcomment -%} + ### Topic: Flexible Design #### Learning Outcomes for Topic @@ -124,6 +132,26 @@ Students should be able to: * design user interfaces that support alternatives to multi-pointer or path-based gestures, such as swipe or pinch * design user interfaces that support undoing or aborting an action carried out with pointer operations +{%- comment -%} + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +* Show examples of different foreground and background combinations. Explain how contrast ratios between foreground and background allow users to perceive content and distinguish components from one another. For references on contrast ratios , see @@@ +* Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios need to be at least 4.5:1. For references on how to apply contrast ratios to text (including images of text), see @@@ +* @@@ +* Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. For techniques on how to add contrast ratios for graphics and interface components, see@@@ + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +* Short Answer Questions — Give students a set of user interface components and ask them what the contrast ration should be. Assess how students understand and distinguish contrast ratios for different user interface components. +* Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing + +{%- endcomment -%} + ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index baff184c4..fbe712262 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -83,6 +83,8 @@ Students should be able to: * provide text alternatives that identify and describe the purpose of human verification systems, such as captcha * manage the provision of several modalities of captcha that rely on different sensory characteristics, such as visual, auditory, and logical +{%- comment -%} + #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: @@ -96,6 +98,8 @@ Optional ideas to support assessment: [To be developed.] +{%- endcomment -%} + ### Topic: Decorative Images #### Learning Outcomes for Topic @@ -105,6 +109,26 @@ Students should be able to: * identify and describe different uses of images with decorative meaning * identify related requirements for developers to code decorative images appropriately +{%- comment -%} + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +* Show examples of different foreground and background combinations. Explain how contrast ratios between foreground and background allow users to perceive content and distinguish components from one another. For references on contrast ratios , see @@@ +* Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios need to be at least 4.5:1. For references on how to apply contrast ratios to text (including images of text), see @@@ +* @@@ +* Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. For techniques on how to add contrast ratios for graphics and interface components, see@@@ + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +* Short Answer Questions — Give students a set of user interface components and ask them what the contrast ration should be. Assess how students understand and distinguish contrast ratios for different user interface components. +* Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing + +{%- endcomment -%} + ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index 5cc84847b..f312d52ce 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -65,6 +65,8 @@ Students should be able to: * identify different mechanisms to include people with disabilities in user research activities, such as recruiting people with disabilities, asking for experts advice, or following documented best practices * articulate and communicate the potential risks of not involving people with disabilities, for example higher costs to implement accessibility at a later stage +{%- comment -%} + #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: @@ -77,6 +79,8 @@ Optional ideas to support assessment: [To be developed.] +{%- endcomment -%} + ### Topic: User Research Explain different aspects for organizations conducting user research to involve people with disabilities. @@ -91,6 +95,8 @@ Students should be able to: * describe the characteristics of potential participants in user research activities based on different factors, such as overall project requirements, type of disability, and level of skills using assistive technologies and adaptive strategies * identify related requirements for project managers and other team members to include accessibility in the overall project requirements +{%- comment -%} + #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: @@ -103,6 +109,8 @@ Optional ideas to support assessment: [To be developed.] +{%- endcomment -%} + ### Topic: Establishing Requirements Present accessibility standards (such as WCAG2) and policies that may apply in the students' region. Discuss functional and non-functional requirements related to people with disabilities. @@ -120,6 +128,8 @@ Students should be able to: * identify personas that include people with different types of disabilities and different levels of skills using the Web * identify scenarios that include use of the website or application with different types of assistive technologies and adaptive strategies +{%- comment -%} + #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: @@ -132,6 +142,8 @@ Optional ideas to support assessment: [To be developed.] +{%- endcomment -%} + ### Topic: Including Real People with Disabilities Discuss different aspects to consider when working with real people with disabilities. @@ -151,6 +163,8 @@ Students should be able to: * identify the need for appropriate timings for participants with different levels of skills to conduct the research activities * relate different testing methods to different accessibility outcomes +{%- endcomment -%} + #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 3ed65db8b..c7ef28432 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -62,6 +62,8 @@ Students should be able to: * describe related requirements for developers to make language programmatically determined * describe related requirements for content authors to provide clear language and easy-to-read texts whenever possible +{%- comment -%} + #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: @@ -74,6 +76,8 @@ Optional ideas to support assessment: [To be developed.] +{%- endcomment -%} + ### Topic: Tabular Information #### Learning Outcomes for Topic @@ -89,6 +93,8 @@ Students should be able to: * design user interfaces that support the inclusion of table descriptions * describe related requirements for developers to ensure that table header and data cells are programmatically associated +{%- comment -%} + #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: @@ -101,6 +107,8 @@ Optional ideas to support assessment: [To be developed.] +{%- endcomment -%} + ### Topic: Grouping and Sorting Information #### Learning Outcomes for Topic @@ -111,6 +119,8 @@ Students should be able to: * ensure examples of expected input are provided, such as how a phone number should be entered and what the different credit card fields should contain * ensure related links, such as those from a navigation menu or from a product category are grouped together visually and programmatically +{%- comment -%} + #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: @@ -123,6 +133,8 @@ Optional ideas to support assessment: [To be developed.] +{%- endcomment -%} + ### Topic: Data Visualization #### Learning Outcomes for Topic @@ -133,6 +145,26 @@ Students should be able to: * create user interfaces that allow to use the keyboard to navigate to specific pieces of data * create user interfaces that allow customizing the results that are shown at a given time +{%- comment -%} + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +* Show examples of different foreground and background combinations. Explain how contrast ratios between foreground and background allow users to perceive content and distinguish components from one another. For references on contrast ratios , see @@@ +* Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios need to be at least 4.5:1. For references on how to apply contrast ratios to text (including images of text), see @@@ +* @@@ +* Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. For techniques on how to add contrast ratios for graphics and interface components, see@@@ + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +* Short Answer Questions — Give students a set of user interface components and ask them what the contrast ration should be. Assess how students understand and distinguish contrast ratios for different user interface components. +* Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing + +{%- endcomment -%} + ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index d3557f2f8..08e61c1b5 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -62,6 +62,8 @@ Students should be able to: * design user interfaces that support keyboard shortcuts that avoid conflicts with the operating system, browser, and assistive technologies keyboard shortcuts * describe related requirements for developers to ensure every user interface component can be entered, operated, and exited using the keyboard only +{%- comment -%} + #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: @@ -72,6 +74,8 @@ Optional ideas to support assessment: [To be developed.] +{%- endcomment -%} + ### Topic: Labels and Instructions #### Learning outcomes for Topic @@ -88,6 +92,8 @@ Students should be able to: * provide clear instructions about the current step and about the total number of steps involved in a multi-step form * identify related requirements for developers to code labels and instructions appropriately +{%- comment -%} + #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: @@ -104,6 +110,8 @@ Optional ideas to support assessment: [To be developed.] +{%- endcomment -%} + ### Topic: Feedback and Notifications #### Learning Outcomes for Topic @@ -116,6 +124,8 @@ Students should be able to: * design user interfaces that support mechanisms to queue and prioritize application notifications coming from different interactive user interface components, such as form fields and custom widgets * describe related requirements for developers to code notification messages appropriately +{%- comment -%} + #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: @@ -142,7 +152,7 @@ Students should be able to: * design user interfaces with down events on single pointer gestures that: * do not perform any action, or * have available mechanisms to abort or undo any action carried on -S + #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: @@ -155,6 +165,8 @@ Optional ideas to support assessment: [To be developed.] +{%- endcomment -%} + ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 04cd00e47..8e27dedfa 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -63,6 +63,8 @@ Students should be able to * create designs that allow to provide captions and audio descriptions for any prerecorded and live audio content in synchronized media * create designs that allow to provide sign language interpretation for all prerecorded audio content in synchronized media +{%- comment -%} + #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: @@ -75,6 +77,8 @@ Optional ideas to support assessment: [To be developed.] +{%- endcomment -%} + ### Topic: Movement and Animations #### Learning Outcomes for Topic @@ -88,6 +92,26 @@ Students should be able to: * create designs that support mechanisms to stop or control the volume of any audio that plays automatically for more than 3 seconds * create designs that prevent changes of context unless the user is aware of them or has explicitly requested such changes +{%- comment -%} + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +* Show examples of different foreground and background combinations. Explain how contrast ratios between foreground and background allow users to perceive content and distinguish components from one another. For references on contrast ratios , see @@@ +* Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios need to be at least 4.5:1. For references on how to apply contrast ratios to text (including images of text), see @@@ +* @@@ +* Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. For techniques on how to add contrast ratios for graphics and interface components, see@@@ + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +* Short Answer Questions — Give students a set of user interface components and ask them what the contrast ration should be. Assess how students understand and distinguish contrast ratios for different user interface components. +* Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing + +{%- endcomment -%} + ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 251ac5e2d..3fafeb989 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -85,6 +85,8 @@ Students should be able to: * design user interfaces that communicate the state of menu items using distinguishable and consistent styles * identify related requirements for developers to convey different menu states, such as open, closed, expanded, or collapsed +{%- comment -%} + #### Teaching Ideas Optional ideas to teach the learning outcomes: @@ -93,12 +95,14 @@ Optional ideas to teach the learning outcomes: * Demonstrate menu interaction using different input devices, such as keyboard, mouse, and touch. Explain that menus need to be operable with all of these input methods. For example, activating a menu option by tapping, pressing the Enter key, or clicking it with the mouse. * Show examples of different menu interaction patterns, such as expanding an collapsing submenu options. Explain that these patterns need to support interaction with the keyboard, mouse, and touch as well. Emphasize that the states of these menu items need to be communicated using styles, icons, and semantics. Explain that providing the icons and style is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. -#### Ideas to Assess Knowledge +#### Ideas to Assess Knowledge for Topic Optional ideas to support assessment. [To be developed]. +{%- endcomment -%} + ### Topic: Other Navigational Mechanisms #### Learning Outcomes for Topic @@ -115,6 +119,8 @@ Students should be able to: * design user interfaces that support site maps to provide an overview of the entire website * design user interfaces that support tables of contents to give an overview of the whole website or document and to allow users to go to specific parts of the content +{%- comment -%} + #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: @@ -130,6 +136,8 @@ Optional ideas to support assessment: [To be developed.] +{%- endcomment -%} + ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: From 0b5135578d3a5d20df84427278f0e2d84ef233f2 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 10 May 2021 16:39:33 +0200 Subject: [PATCH 088/416] Fixing comments --- content/designer/inclusive-design-process.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index f312d52ce..49cf923d4 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -163,7 +163,7 @@ Students should be able to: * identify the need for appropriate timings for participants with different levels of skills to conduct the research activities * relate different testing methods to different accessibility outcomes -{%- endcomment -%} +{%- comment -%} #### Teaching Ideas for Topic @@ -171,19 +171,17 @@ Optional ideas to teach the learning outcomes: [To be developed.] -{%- comment -%} - * Discuss the different levels of skills of people with disabilities when using an assistive technology or an adaptive strategy. Emphasize that some assistive technologies and adaptive strategies are difficult to learn. Explain that different people may need different timings to conduct the proposed activities. For example, setting up different time expectations depending on different levels of experience with the assistive technology and different levels of familiarity with the website or application * Explain different testing methods that exist, such as testing with an assistive technology, testing a paper prototype, or testing an HTML template. Explain that each of these methods delivers different types of outputs. For example, testing a paper prototype is more likely to deliver results related to vision, and assistive technology testing is more likely to deliver results related to the compatibility of the product with assistive technology. -{%- endcomment -%} - #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: [To be developed.] +{%- endcomment -%} + ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: From 69e6e4a7bccd55b957fe3a3952a7967e1c4521ee Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 10 May 2021 16:42:12 +0200 Subject: [PATCH 089/416] Fixing syntax --- content/designer/inclusive-design-process.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index 49cf923d4..a35c66572 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -65,8 +65,6 @@ Students should be able to: * identify different mechanisms to include people with disabilities in user research activities, such as recruiting people with disabilities, asking for experts advice, or following documented best practices * articulate and communicate the potential risks of not involving people with disabilities, for example higher costs to implement accessibility at a later stage -{%- comment -%} - #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: @@ -79,8 +77,6 @@ Optional ideas to support assessment: [To be developed.] -{%- endcomment -%} - ### Topic: User Research Explain different aspects for organizations conducting user research to involve people with disabilities. From 503dcfa0b46f34d0f4a4832fd51ce30410d3c663 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 10 May 2021 16:44:42 +0200 Subject: [PATCH 090/416] Fixing syntax --- content/designer/inclusive-design-process.md | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index a35c66572..00c825396 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -91,8 +91,6 @@ Students should be able to: * describe the characteristics of potential participants in user research activities based on different factors, such as overall project requirements, type of disability, and level of skills using assistive technologies and adaptive strategies * identify related requirements for project managers and other team members to include accessibility in the overall project requirements -{%- comment -%} - #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: @@ -105,8 +103,6 @@ Optional ideas to support assessment: [To be developed.] -{%- endcomment -%} - ### Topic: Establishing Requirements Present accessibility standards (such as WCAG2) and policies that may apply in the students' region. Discuss functional and non-functional requirements related to people with disabilities. @@ -124,8 +120,6 @@ Students should be able to: * identify personas that include people with different types of disabilities and different levels of skills using the Web * identify scenarios that include use of the website or application with different types of assistive technologies and adaptive strategies -{%- comment -%} - #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: @@ -138,8 +132,6 @@ Optional ideas to support assessment: [To be developed.] -{%- endcomment -%} - ### Topic: Including Real People with Disabilities Discuss different aspects to consider when working with real people with disabilities. @@ -159,14 +151,14 @@ Students should be able to: * identify the need for appropriate timings for participants with different levels of skills to conduct the research activities * relate different testing methods to different accessibility outcomes -{%- comment -%} - #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: [To be developed.] +{%- comment -%} + * Discuss the different levels of skills of people with disabilities when using an assistive technology or an adaptive strategy. Emphasize that some assistive technologies and adaptive strategies are difficult to learn. Explain that different people may need different timings to conduct the proposed activities. For example, setting up different time expectations depending on different levels of experience with the assistive technology and different levels of familiarity with the website or application * Explain different testing methods that exist, such as testing with an assistive technology, testing a paper prototype, or testing an HTML template. Explain that each of these methods delivers different types of outputs. For example, testing a paper prototype is more likely to deliver results related to vision, and assistive technology testing is more likely to deliver results related to the compatibility of the product with assistive technology. From c416667cd45e507cffeca3ce67cacd983cf21ddc Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 10 May 2021 20:35:46 +0200 Subject: [PATCH 091/416] Updates to "Inclusive Design Process" --- content/designer/inclusive-design-process.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index 00c825396..26a908a9b 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -20,7 +20,7 @@ parent_in_h1: - ref: /curricula/ name: "Curricula on Web Accessibility" navigation: - previous: /curricula/designer-modules/itneraction-and-feedback/ + previous: /curricula/designer-modules/interaction-and-feedback/ next: --- @@ -29,7 +29,7 @@ navigation: Courses based on this module should: -* discuss benefits of involving people with disabilities and risks of not involving people with disabilities +* discuss benefits of involving people with disabilities and risks of not involving people with disabilities in user research activities * discuss user requirements and accommodation needs of people with disabilities ## Learning Outcomes for Module @@ -55,14 +55,14 @@ Topics to achieve the learning outcomes: ### Topic: Assessing the Involvement of People with Disabilities -Explain how involving people with disabilities can lead to better accessibility of websites and applications. Discuss scenarios where recruiting people with disabilities may not be feasible, and explain the potential risks of not involving people with disabilities. +Explain how involving people with disabilities can lead to better accessibility of websites and applications. Discuss scenarios where including real people with disabilities may not be feasible and discuss other alternatives, for example requesting for experts advice or adhering to established best practices. Explain the potential risks of not involving people with disabilities. #### Learning Outcomes for Topic Students should be able to: * assess and communicate the need for involving people with disabilities depending on the project scope -* identify different mechanisms to include people with disabilities in user research activities, such as recruiting people with disabilities, asking for experts advice, or following documented best practices +* identify different mechanisms to include people with disabilities in user research activities, such as including real people with disabilities, asking for experts advice, or following documented best practices * articulate and communicate the potential risks of not involving people with disabilities, for example higher costs to implement accessibility at a later stage #### Teaching Ideas for Topic @@ -79,7 +79,7 @@ Optional ideas to support assessment: ### Topic: User Research -Explain different aspects for organizations conducting user research to involve people with disabilities. +Refer back to [foundation module 2: People and Digital Technology](/curricula/foundation-modules/people-and-digital-technology/). Discuss how organizations conducting user research can include different accessibility features, barriers, and requirements that relate to people with disabilities. #### Learning Outcomes for Topic @@ -162,14 +162,14 @@ Optional ideas to teach the learning outcomes: * Discuss the different levels of skills of people with disabilities when using an assistive technology or an adaptive strategy. Emphasize that some assistive technologies and adaptive strategies are difficult to learn. Explain that different people may need different timings to conduct the proposed activities. For example, setting up different time expectations depending on different levels of experience with the assistive technology and different levels of familiarity with the website or application * Explain different testing methods that exist, such as testing with an assistive technology, testing a paper prototype, or testing an HTML template. Explain that each of these methods delivers different types of outputs. For example, testing a paper prototype is more likely to deliver results related to vision, and assistive technology testing is more likely to deliver results related to the compatibility of the product with assistive technology. +{%- endcomment -%} + #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: [To be developed.] -{%- endcomment -%} - ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: From b078336cffe751e6c6f4970a73d5659d39f8fccf Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 11 May 2021 08:46:02 +0200 Subject: [PATCH 092/416] Updates to flexible and responsive design --- .../flexible-and-responsive-design.md | 24 ++++++++++++------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/content/designer/flexible-and-responsive-design.md b/content/designer/flexible-and-responsive-design.md index dbe7455a1..c881d66d0 100644 --- a/content/designer/flexible-and-responsive-design.md +++ b/content/designer/flexible-and-responsive-design.md @@ -66,25 +66,25 @@ Students should be able to: * design user interfaces with different patterns, shapes, and icons to supplement information provided only with differences in color * provide other visual cues, such as underline, bold, and italics, to supplement information conveyed through differences in text color -{%- comment -%} - #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: +{%- comment -%} + * Demonstrate use of different styles for different user interface components, such as links ,buttons, texts, and menus. Explain how people rely on font sizes, spacing, and typography to distinguish components from one another. For references on how to apply distinguishable styles for user interface components, see @@@ * Demonstrate use of different font sizes and explain how they affect readability of the content. For reference on how to apply font sizes that allow content readability, see @@@ * Show examples of different page layouts with and without adequate spacing. Explain how spacing allow to distinguish different pieces of content from one another. For references on how to apply adequate spacing, see @@@ * Show examples where information is conveyed exclusively with differences sin color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so alternative methods to convey that information are required. For references on how to convey information without using color alone, see @@@ +{%- endcomment -%} + #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: [To be developed.] -{%- endcomment -%} - ### Topic: Contrast Ratios #### Learning Outcomes for Topic @@ -97,21 +97,25 @@ Students should be able to: * design user interfaces that allow components and graphics to have a contrast ratio of at least 3:1 with respect to their background * design user interfaces with focus indicators that have a contrast ratio that allows them to be perceived by users -{%- comment -%} - #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: +{%- comment -%} + * Show examples of different foreground and background combinations. Explain how contrast ratios between foreground and background allow users to perceive content and distinguish components from one another. For references on contrast ratios , see @@@ * Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios need to be at least 4.5:1. For references on how to apply contrast ratios to text (including images of text), see @@@ * @@@ * Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. For techniques on how to add contrast ratios for graphics and interface components, see@@@ +{%- endcomment -%} + #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: +{%- comment -%} + * Short Answer Questions — Give students a set of user interface components and ask them what the contrast ration should be. Assess how students understand and distinguish contrast ratios for different user interface components. * Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing @@ -132,21 +136,25 @@ Students should be able to: * design user interfaces that support alternatives to multi-pointer or path-based gestures, such as swipe or pinch * design user interfaces that support undoing or aborting an action carried out with pointer operations -{%- comment -%} - #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: +{%- comment -%} + * Show examples of different foreground and background combinations. Explain how contrast ratios between foreground and background allow users to perceive content and distinguish components from one another. For references on contrast ratios , see @@@ * Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios need to be at least 4.5:1. For references on how to apply contrast ratios to text (including images of text), see @@@ * @@@ * Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. For techniques on how to add contrast ratios for graphics and interface components, see@@@ +{%- endcomment -%} + #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: +{%- comment -%} + * Short Answer Questions — Give students a set of user interface components and ask them what the contrast ration should be. Assess how students understand and distinguish contrast ratios for different user interface components. * Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing From 89fdfe2f622b8acae4be7b0dc2b91f8085614001 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 11 May 2021 08:49:01 +0200 Subject: [PATCH 093/416] Updates to flexible and responsive design --- content/designer/flexible-and-responsive-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/flexible-and-responsive-design.md b/content/designer/flexible-and-responsive-design.md index c881d66d0..271b82f44 100644 --- a/content/designer/flexible-and-responsive-design.md +++ b/content/designer/flexible-and-responsive-design.md @@ -37,7 +37,7 @@ Students should be able to: * explain how people with disabilities identify and distinguish user interface components based on different features, such as color, layout, spacing, and position * design user interfaces with landmarks, text cues, patterns, and icons to supplement information conveyed through color alone -* design user interfaces with adjustable font sizes, adequate spacing, and sufficient targets to support readability +* design user interfaces with adjustable font sizes and adequate spacing to support readability * design user interfaces with appropriate contrast ratios for text, images of text, and controls * design user interfaces with clear and distinguishable focus indicators, for example using borders, background color, and highlighting * design user interfaces that support placement of different regions and user interface components where users expect them From 8984e37b2eed616e4853bf1b4c9376b1c7abaacf Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 11 May 2021 08:54:29 +0200 Subject: [PATCH 094/416] Updates to flexible and responsive design --- content/designer/flexible-and-responsive-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/flexible-and-responsive-design.md b/content/designer/flexible-and-responsive-design.md index 271b82f44..918c69789 100644 --- a/content/designer/flexible-and-responsive-design.md +++ b/content/designer/flexible-and-responsive-design.md @@ -132,7 +132,7 @@ Students should be able to: * design user interfaces with target sizes and spaces to support tapping by people with mobility impairments and people using different input methods * design user interfaces that support customizing line height, as well as spacing between paragraphs, words, and letters * design user interfaces that support text resizing without loss of content and functionality -* design user interfaces that do not restrict the content view and operation to a single display orientation, such as portrait or landscape +* design user interfaces that support content view and operation in both portrait and landscape orientations * design user interfaces that support alternatives to multi-pointer or path-based gestures, such as swipe or pinch * design user interfaces that support undoing or aborting an action carried out with pointer operations From f6fcf658474e9fe22b241c04a34ea13eec48b802 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 11 May 2021 15:59:11 +0200 Subject: [PATCH 095/416] Updates to modules --- .../flexible-and-responsive-design.md | 22 ++++---- content/designer/navigation.md | 51 ++++++++++--------- 2 files changed, 40 insertions(+), 33 deletions(-) diff --git a/content/designer/flexible-and-responsive-design.md b/content/designer/flexible-and-responsive-design.md index 918c69789..ad4634c18 100644 --- a/content/designer/flexible-and-responsive-design.md +++ b/content/designer/flexible-and-responsive-design.md @@ -1,12 +1,12 @@ --- +nav_title: "Flexible and Responsive Design" title: "[Draft] Module 1: Flexible and Responsive Design" -nav_title: "Flexible and Responsivee Design" permalink: /curricula/designer-modules/flexible-and-responsive-design/ ref: /curricula/designer-modules/flexible-and-responsive-design/ lang: en github: repository: w3c/wai-curricula - path: content/designer/flexible-and-responsivee-design.md + path: content/designer/flexible-and-responsive-design.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ @@ -36,7 +36,7 @@ Courses based on this module should: Students should be able to: * explain how people with disabilities identify and distinguish user interface components based on different features, such as color, layout, spacing, and position -* design user interfaces with landmarks, text cues, patterns, and icons to supplement information conveyed through color alone +* design user interfaces with headings, landmarks, text cues, patterns, and icons to supplement information conveyed through color alone * design user interfaces with adjustable font sizes and adequate spacing to support readability * design user interfaces with appropriate contrast ratios for text, images of text, and controls * design user interfaces with clear and distinguishable focus indicators, for example using borders, background color, and highlighting @@ -62,20 +62,22 @@ Students should be able to: * design user interfaces with distinguishable styles for different components, such as text, links, buttons, or form elements * design user interfaces with font sizes that allow content readability * design user interfaces with adequate spacing to support readability -* design user interfaces with text cues to convey any information that is provided using color alone, such as an asterisk to convey required form fields in a form -* design user interfaces with different patterns, shapes, and icons to supplement information provided only with differences in color -* provide other visual cues, such as underline, bold, and italics, to supplement information conveyed through differences in text color +* design user interfaces with text cues to convey any information that is provided through vision only, such as an asterisk to convey required form fields in a form +* design user interfaces with other visual cues in addition to color, for example using different patterns, shapes, and icons #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: +[To be de8eloped.] + {%- comment -%} * Demonstrate use of different styles for different user interface components, such as links ,buttons, texts, and menus. Explain how people rely on font sizes, spacing, and typography to distinguish components from one another. For references on how to apply distinguishable styles for user interface components, see @@@ * Demonstrate use of different font sizes and explain how they affect readability of the content. For reference on how to apply font sizes that allow content readability, see @@@ -* Show examples of different page layouts with and without adequate spacing. Explain how spacing allow to distinguish different pieces of content from one another. For references on how to apply adequate spacing, see @@@ -* Show examples where information is conveyed exclusively with differences sin color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so alternative methods to convey that information are required. For references on how to convey information without using color alone, see @@@ +* Show examples of different page layouts with and without adequate spacing. Explain how spacing allows to distinguish different pieces of content from one another. For references on how to apply adequate spacing, see @@@ +* Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a store is open or closed. Explain that some people cannot rely on visual means to obtain information, so text (or alternatives) are needed for them to understand the information provided. +* Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so alternative methods to convey that information are required. For references on how to convey information without using color alone, see @@@ {%- endcomment -%} @@ -103,7 +105,7 @@ Optional ideas to teach the learning outcomes: {%- comment -%} -* Show examples of different foreground and background combinations. Explain how contrast ratios between foreground and background allow users to perceive content and distinguish components from one another. For references on contrast ratios , see @@@ +* Show examples of different foreground and background color combinations. Explain how contrast ratios between foreground and background allow users to perceive content and distinguish components from one another. For references on contrast ratios , see @@@ * Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios need to be at least 4.5:1. For references on how to apply contrast ratios to text (including images of text), see @@@ * @@@ * Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. For techniques on how to add contrast ratios for graphics and interface components, see@@@ @@ -116,7 +118,7 @@ Optional ideas to support assessment: {%- comment -%} -* Short Answer Questions — Give students a set of user interface components and ask them what the contrast ration should be. Assess how students understand and distinguish contrast ratios for different user interface components. +* Short Answer Questions — Give students a set of user interface components and ask them what the contrast ratio should be. Assess how students understand and distinguish contrast ratios for different user interface components. * Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing {%- endcomment -%} diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 3fafeb989..0a2cfd5c9 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -30,15 +30,17 @@ Courses based on this module should: Students should be able to: -* explain strategies that people with disabilities use to navigate web pages and applications -* design user interfaces that support different types of navigational mechanisms, including breadcrumb trails, tables of contents, and site maps -* design user interfaces with mechanisms to bypass blocks of repeated content, such as navigation links and header contents -* design user interfaces with search functionalities to help users find content -* design user interfaces that support accessibility features of multiple menus, such as navigational, fly-out, and application menus +* explain strategies that people with disabilities use to navigate multipages websites and applications +* design user interfaces that support different types of navigations, including menus, breadcrumb trails, tables of contents, and site maps +* define bllocks of repeated content and coordinate with developers to implement mechanisms to bypass such blocks +* define keyboard, mouse, and touch interaction for menus and other navigational mechanisms +* provide clear and consistent styles for navigational mechanisms, including menus, menu item states, and other navigational mechanisms * identify related requirements for developers to: * code landmarks and headings appropriately - * make navigational mechanisms usable with the keyboard and other input devices - * implement clear and descriptive names for landmarks and headings + * implement keyboard, mouse, and touch interactions for navigational mechanisms + * implement clear and descriptive names for navigational mechanisms + +{%- comment -%} ## Competencies @@ -50,8 +52,8 @@ Skills required for this module: {% include excol.html type="middle" %} -* [Prerequisites for Students](/curricula/developer-modules/#prerequisites-for-students) -* [Module 1: Page Structure](/curricula/developer-modules/page-structure/) from [Developer Modules](/curricula/developer-modules/) +* [Prerequisites for Students](/curricula/designer-modules/#prerequisites-for-students) +* [Module 1: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design/) from [Developer Modules](/curricula/developer-modules/) {% include excol.html type="end" %} @@ -62,6 +64,7 @@ Skills required for this module: {% include excol.html type="middle" %} * Applied expertise in teaching: + * [WCAG Success Criterion 1.3.1 Info And Relationships]() * [WCAG 2 Success Criterion 2.4.1 Bypass Blocks](https://www.w3.org/WAI/WCAG21/quickref/#bypass-blocks) * [WCAG 2 Success Criterion 2.4.5 Multiple Ways](https://www.w3.org/WAI/WCAG21/quickref/#multiple-ways) * [WCAG 2 Success Criterion 2.4.8 Location](https://www.w3.org/WAI/WCAG21/quickref/#location) @@ -69,40 +72,42 @@ Skills required for this module: {% include excol.html type="end" %} +{%- endcomment -%} + ## Topics to Teach Topics to achieve the learning outcomes: -### Topic: Menu Types +### Topic: Menu Behavior #### Learning Outcomes for Topic Students should be able to: -* identify uses of different types of menus, such as navigational, fly-out, and application menus -* design user interfaces that support use of menus with the mouse, keyboard, and touch -* design user interfaces that support expanding and collapsing menu items using different methods, such as hovering, tabbing, and tapping +* identify and describe uses of different types of menus, for example to navigate across web pages and across application +* provide distinguishable styles for menus that allow to distinguish them from otehr components, and consistent styling for menus across a set of web pages +* define mouse, keyboard, and touch interactions within menus * design user interfaces that communicate the state of menu items using distinguishable and consistent styles -* identify related requirements for developers to convey different menu states, such as open, closed, expanded, or collapsed - -{%- comment -%} +* identify related requirements for developers to implement semantics for different menu states and properties, such as open, closed, expanded, or collapsed #### Teaching Ideas Optional ideas to teach the learning outcomes: +{%- comment -%} + * Show examples of different types of menus, such as navigational, fly-out, and application menus. Explain the different scenarios where each of them can be used. For references on the different types of menus, see @@@ * Demonstrate menu interaction using different input devices, such as keyboard, mouse, and touch. Explain that menus need to be operable with all of these input methods. For example, activating a menu option by tapping, pressing the Enter key, or clicking it with the mouse. * Show examples of different menu interaction patterns, such as expanding an collapsing submenu options. Explain that these patterns need to support interaction with the keyboard, mouse, and touch as well. Emphasize that the states of these menu items need to be communicated using styles, icons, and semantics. Explain that providing the icons and style is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. +{%- endcomment -%} + #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment. [To be developed]. -{%- endcomment -%} - ### Topic: Other Navigational Mechanisms #### Learning Outcomes for Topic @@ -114,30 +119,30 @@ Students should be able to: * a link at the beginning of a block of repeated content to go to the end of the block * links at the top of the page that go to each area of the content * an expandable and collapsible menu to make it easier for users to skip the menu -* design user interfaces that support search functionalities for users to find content +* assess the need for other navigational mechanisms, such as breadcrumb trails, tables of contents, and sitemaps depending on the characteristics of the user interface * design user interfaces that support breadcrumb trails to provide information about the user's location in a set of web pages * design user interfaces that support site maps to provide an overview of the entire website * design user interfaces that support tables of contents to give an overview of the whole website or document and to allow users to go to specific parts of the content -{%- comment -%} - #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: +{%- comment -%} + * Show examples of mechanisms to bypass blocks of repeated content, such as a link at the top of the page and the use of expandable and collapsible components. Explain that people using the keyboard only find it very frustrating to navigate through sets of repeated blocks of content, such as navigation bars or header contents. For references on how to provide a mechanism to bypass blocks of repeated content, see @@@ * Show examples of breadcrumb trails. Explain that they provide information about the user's location within the context of a set of websites. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see @@@ * Show examples of site maps and explain that they serve the purpose of providing an overview of the whole site. Explain that some users rely on them to better understand the structure of the site and to more easily find its way through it. For references on how to provide a site map, see @@@ * Show examples of tables of contents, for example in an electronic book or document. Explain that they provide an overview of the whole document and allow navigation to specific parts of the content. +{%- endcomment -%} + #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: [To be developed.] -{%- endcomment -%} - ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: From f596dd812aab262aa4a9cd1739da0ef76fb8d828 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 12 May 2021 10:26:26 +0200 Subject: [PATCH 096/416] Trying older structure --- .../flexible-and-responsive-design.md | 2 +- content/designer/images-and-graphics.md | 2 +- content/designer/inclusive-design-process.md | 74 +++++-------------- content/designer/information-design.md | 2 +- content/designer/interaction-and-feedback.md | 4 +- content/designer/multimedia-and-animations.md | 2 +- content/designer/navigation.md | 2 +- 7 files changed, 26 insertions(+), 62 deletions(-) diff --git a/content/designer/flexible-and-responsive-design.md b/content/designer/flexible-and-responsive-design.md index ad4634c18..8c6985bc6 100644 --- a/content/designer/flexible-and-responsive-design.md +++ b/content/designer/flexible-and-responsive-design.md @@ -1,6 +1,6 @@ --- +title: "[Draft] Module 2: Flexible and Responsive Design" nav_title: "Flexible and Responsive Design" -title: "[Draft] Module 1: Flexible and Responsive Design" permalink: /curricula/designer-modules/flexible-and-responsive-design/ ref: /curricula/designer-modules/flexible-and-responsive-design/ lang: en diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index fbe712262..90d6c5a7f 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 4: Images and Graphics" +title: "[Draft] Module 5: Images and Graphics" nav_title: "Images and Graphics" permalink: /curricula/designer-modules/images-and-graphics/ ref: /curricula/designer-modules/images-and-graphics/ diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md index 26a908a9b..6cc45adb5 100644 --- a/content/designer/inclusive-design-process.md +++ b/content/designer/inclusive-design-process.md @@ -1,12 +1,12 @@ --- -title: "[Draft] Module 7: Inclusive Design Process" -nav_title: "Inclusive Design Process" -permalink: /curricula/designer-modules/inclusive-design-process/ -ref: /curricula/designer-modules/inclusive-design-process/ +title: "[Draft] Module 1: Understanding and Involving Users" +nav_title: "Understanding and Involving Users" +permalink: /curricula/designer-modules/understanding-and-involving-users/ +ref: /curricula/designer-modules/understanding-and-involving-users/ lang: en github: repository: w3c/wai-curricula - path: content/designer/inclusive-design-process.md + path: content/designer/understanding-and-involving-users.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ @@ -20,8 +20,8 @@ parent_in_h1: - ref: /curricula/ name: "Curricula on Web Accessibility" navigation: - previous: /curricula/designer-modules/interaction-and-feedback/ - next: + previous: /curricula/designer-modules/ + next: /curricula/designer-modules/flexible-and-responsive-design/ --- ## Introduction @@ -29,14 +29,14 @@ navigation: Courses based on this module should: -* discuss benefits of involving people with disabilities and risks of not involving people with disabilities in user research activities -* discuss user requirements and accommodation needs of people with disabilities +* discuss aspects related to involving people with disabilities when conducting user research activities +* discuss the impact of involving people with disabilities to create more accessible designs ## Learning Outcomes for Module Students should be able to: -* explain how involving people with disabilities in the design and development process leads to better accessibility +* explain how involving people with disabilities can lead to more accessible designs * assess and communicate the need for involvement of people with disabilities * examine applicable design requirements for accessibility, such as those defined by accessibility standards and policies * articulate the potential risks of not involving people with disabilities @@ -55,28 +55,16 @@ Topics to achieve the learning outcomes: ### Topic: Assessing the Involvement of People with Disabilities -Explain how involving people with disabilities can lead to better accessibility of websites and applications. Discuss scenarios where including real people with disabilities may not be feasible and discuss other alternatives, for example requesting for experts advice or adhering to established best practices. Explain the potential risks of not involving people with disabilities. +Explain how involving people with disabilities can lead to more accessible designs. Discuss scenarios where including real people with disabilities may not be feasible and present possible workarounds, for example requesting for experts advice and adhering to established best practices. Explain the potential risks of not involving people with disabilities. #### Learning Outcomes for Topic Students should be able to: -* assess and communicate the need for involving people with disabilities depending on the project scope -* identify different mechanisms to include people with disabilities in user research activities, such as including real people with disabilities, asking for experts advice, or following documented best practices +* describe the impact of including real people with disabilities in user research activities +* describe desktop research activities to conduct when it is not possible to include real people with disabilities, such as asking for experts advice, or following documented best practices * articulate and communicate the potential risks of not involving people with disabilities, for example higher costs to implement accessibility at a later stage -#### Teaching Ideas for Topic - -Optional ideas to teach the learning outcomes: - -[To be developed.] - -#### Ideas to Assess Knowledge for Topic - -Optional ideas to support assessment: - -[To be developed.] - ### Topic: User Research Refer back to [foundation module 2: People and Digital Technology](/curricula/foundation-modules/people-and-digital-technology/). Discuss how organizations conducting user research can include different accessibility features, barriers, and requirements that relate to people with disabilities. @@ -85,27 +73,15 @@ Refer back to [foundation module 2: People and Digital Technology](/curricula/fo Students should be able to: -* describe the use of different assistive technologies and adaptive strategies by various groups of people with disabilities -* describe different types of accessibility barriers and features, such as appropriate contrast ratios and meaningful page structure -* describe applicable accessibility guidelines, standards, and policies, such as WCAG +* describe the impact of including real people with disabilities in user research activities +* describe desktop research activities to conduct when it is not feasible to include real people with disabilities, such as asking for experts advice, or following documented best practices +* articulate and communicate the consequences of not involving people with disabilities, for example higher costs to implement accessibility at a later stage * describe the characteristics of potential participants in user research activities based on different factors, such as overall project requirements, type of disability, and level of skills using assistive technologies and adaptive strategies * identify related requirements for project managers and other team members to include accessibility in the overall project requirements -#### Teaching Ideas for Topic - -Optional ideas to teach the learning outcomes: - -[To be developed.] - -#### Ideas to Assess Knowledge for Topic - -Optional ideas to support assessment: - -[To be developed.] - ### Topic: Establishing Requirements -Present accessibility standards (such as WCAG2) and policies that may apply in the students' region. Discuss functional and non-functional requirements related to people with disabilities. +Present accessibility standards (such as WCAG2) and policies that apply in the students' region. Discuss functional and non-functional requirements related to people with disabilities. #### Learning Outcomes for Topic @@ -117,20 +93,8 @@ Students should be able to: * keyboard compatibility * compatibility with assistive technologies and adaptive strategies * identify different non-functional accessibility requirements, for example those included in WCAG and in applicable accessibility policies -* identify personas that include people with different types of disabilities and different levels of skills using the Web -* identify scenarios that include use of the website or application with different types of assistive technologies and adaptive strategies - -#### Teaching Ideas for Topic - -Optional ideas to teach the learning outcomes: - -[To be developed.] - -#### Ideas to Assess Knowledge for Topic - -Optional ideas to support assessment: - -[To be developed.] +* identify and create personas that include people with different types of disabilities and different levels of skills using the Web +* identify scenarios that include use of the product with different types of assistive technologies and adaptive strategies ### Topic: Including Real People with Disabilities diff --git a/content/designer/information-design.md b/content/designer/information-design.md index c7ef28432..9ced20ae2 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 3: Information Design" +title: "[Draft] Module 4: Information Design" nav_title: "Information Design" permalink: /curricula/designer-modules/information-design/ ref: /curricula/designer-modules/information-design/ diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 08e61c1b5..8300d0a4a 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 6: Interaction and Feedback" +title: "[Draft] Module 7: Interaction and Feedback" nav_title: "Interaction and Feedback" permalink: /curricula/designer-modules/interaction-and-feedback/ ref: /curricula/designer-modules/interaction-and-feedback/ @@ -16,7 +16,7 @@ footer: >

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: previous: /curricula/designer-modules/multimedia-and-animations/ - next: /curricula/designer-modules/flexible-and-responsive-design/ + next: --- ## Introduction diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 8e27dedfa..4824a4132 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 5: Multimedia and Animations" +title: "[Draft] Module 6: Multimedia and Animations" nav_title: "Multimedia and Animations" permalink: /curricula/designer-modules/multimedia-and-animations/ ref: /curricula/designer-modules/multimedia-and-animations/ diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 0a2cfd5c9..fdfeacb43 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 2: Navigation" +title: "[Draft] Module 3: Navigation" nav_title: "Navigation" permalink: /curricula/designer-modules/navigation/ ref: /curricula/designer-modules/navigation/ From 099f81ba9852782e7646dad34510adc1df904a72 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 12 May 2021 10:38:14 +0200 Subject: [PATCH 097/416] Updating left nav --- _data/navigation.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_data/navigation.yml b/_data/navigation.yml index 6757b84e2..42da94f89 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -259,6 +259,8 @@ - name: Designer Modules url: "/curricula/designer-modules/" pages: + - name: Understanding and Involving User + url: "/curricula/designer-modules/understanding-and-involving-users/" - name: Flexible and Responsive Design url: "/curricula/designer-modules/flexible-and-responsive-design/" - name: Navigation @@ -271,8 +273,6 @@ url: "/curricula/designer-modules/multimedia-and-animations/" - name: Interaction and Feedback url: "/curricula/designer-modules/interaction-and-feedback/" - - name: Inclusive Design Process - url: "/curricula/designer-modules/inclusive-design-process/" - name: Changelog url: "/curricula/changelog/" hide: true From f6c77af3eceda5b6327c220468d679ef5a92cf24 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 12 May 2021 10:42:46 +0200 Subject: [PATCH 098/416] Fixing typo --- _data/navigation.yml | 2 +- content/designer/inclusive-design-process.md | 147 ------------------- 2 files changed, 1 insertion(+), 148 deletions(-) delete mode 100644 content/designer/inclusive-design-process.md diff --git a/_data/navigation.yml b/_data/navigation.yml index 42da94f89..5364fa80d 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -259,7 +259,7 @@ - name: Designer Modules url: "/curricula/designer-modules/" pages: - - name: Understanding and Involving User + - name: Understanding and Involving Users url: "/curricula/designer-modules/understanding-and-involving-users/" - name: Flexible and Responsive Design url: "/curricula/designer-modules/flexible-and-responsive-design/" diff --git a/content/designer/inclusive-design-process.md b/content/designer/inclusive-design-process.md deleted file mode 100644 index 6cc45adb5..000000000 --- a/content/designer/inclusive-design-process.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: "[Draft] Module 1: Understanding and Involving Users" -nav_title: "Understanding and Involving Users" -permalink: /curricula/designer-modules/understanding-and-involving-users/ -ref: /curricula/designer-modules/understanding-and-involving-users/ -lang: en -github: - repository: w3c/wai-curricula - path: content/designer/understanding-and-involving-users.md -license: creative-commons -acknowledgements: /curricula/acknowledgements/ -changelog: /curricula/changelog/ -footer: > -

Date: Updated @@ Month 2021. First published December 2019.

-

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

-

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

-parent_in_h1: - - ref: /curricula/designer-modules/ - name: nav_title - - ref: /curricula/ - name: "Curricula on Web Accessibility" -navigation: - previous: /curricula/designer-modules/ - next: /curricula/designer-modules/flexible-and-responsive-design/ ---- - -## Introduction -{:.no-display} - -Courses based on this module should: - -* discuss aspects related to involving people with disabilities when conducting user research activities -* discuss the impact of involving people with disabilities to create more accessible designs - -## Learning Outcomes for Module - -Students should be able to: - -* explain how involving people with disabilities can lead to more accessible designs -* assess and communicate the need for involvement of people with disabilities -* examine applicable design requirements for accessibility, such as those defined by accessibility standards and policies -* articulate the potential risks of not involving people with disabilities -* describe different accommodation needs for people with disabilities -* identify related requirements for product owners and other team roles to plan for the involvement of people with disabilities - -## Competencies - -Skills required for this module: - -[To be developed.] - -## Topics to Teach - -Topics to achieve the learning outcomes: - -### Topic: Assessing the Involvement of People with Disabilities - -Explain how involving people with disabilities can lead to more accessible designs. Discuss scenarios where including real people with disabilities may not be feasible and present possible workarounds, for example requesting for experts advice and adhering to established best practices. Explain the potential risks of not involving people with disabilities. - -#### Learning Outcomes for Topic - -Students should be able to: - -* describe the impact of including real people with disabilities in user research activities -* describe desktop research activities to conduct when it is not possible to include real people with disabilities, such as asking for experts advice, or following documented best practices -* articulate and communicate the potential risks of not involving people with disabilities, for example higher costs to implement accessibility at a later stage - -### Topic: User Research - -Refer back to [foundation module 2: People and Digital Technology](/curricula/foundation-modules/people-and-digital-technology/). Discuss how organizations conducting user research can include different accessibility features, barriers, and requirements that relate to people with disabilities. - -#### Learning Outcomes for Topic - -Students should be able to: - -* describe the impact of including real people with disabilities in user research activities -* describe desktop research activities to conduct when it is not feasible to include real people with disabilities, such as asking for experts advice, or following documented best practices -* articulate and communicate the consequences of not involving people with disabilities, for example higher costs to implement accessibility at a later stage -* describe the characteristics of potential participants in user research activities based on different factors, such as overall project requirements, type of disability, and level of skills using assistive technologies and adaptive strategies -* identify related requirements for project managers and other team members to include accessibility in the overall project requirements - -### Topic: Establishing Requirements - -Present accessibility standards (such as WCAG2) and policies that apply in the students' region. Discuss functional and non-functional requirements related to people with disabilities. - -#### Learning Outcomes for Topic - -Students should be able to: - -* consider different functional requirements that relate to people with disabilities, for example: - * appropriate contrast ratios - * availability of content and functionality in different screen sizes and configurations - * keyboard compatibility - * compatibility with assistive technologies and adaptive strategies -* identify different non-functional accessibility requirements, for example those included in WCAG and in applicable accessibility policies -* identify and create personas that include people with different types of disabilities and different levels of skills using the Web -* identify scenarios that include use of the product with different types of assistive technologies and adaptive strategies - -### Topic: Including Real People with Disabilities - -Discuss different aspects to consider when working with real people with disabilities. - -#### Learning Outcomes for Topic - -Students should be able to: - -* assess and communicate the need for including real people with disabilities depending on the project scope and the activities to be conducted -* articulate the advantages and disadvantages of remote versus face-to-face participation when working with people with disabilities -* articulate the advantages and disadvantages of guided and non-guided testing -* identify the following needs when research activities are conducted at a specific location: - * accessibility of the facilities - * assistive technology needs - * custom setups that people with disabilities may require - * accessibility of transportation means to get to the chosen venue -* identify the need for appropriate timings for participants with different levels of skills to conduct the research activities -* relate different testing methods to different accessibility outcomes - -#### Teaching Ideas for Topic - -Optional ideas to teach the learning outcomes: - -[To be developed.] - -{%- comment -%} - -* Discuss the different levels of skills of people with disabilities when using an assistive technology or an adaptive strategy. Emphasize that some assistive technologies and adaptive strategies are difficult to learn. Explain that different people may need different timings to conduct the proposed activities. For example, setting up different time expectations depending on different levels of experience with the assistive technology and different levels of familiarity with the website or application -* Explain different testing methods that exist, such as testing with an assistive technology, testing a paper prototype, or testing an HTML template. Explain that each of these methods delivers different types of outputs. For example, testing a paper prototype is more likely to deliver results related to vision, and assistive technology testing is more likely to deliver results related to the compatibility of the product with assistive technology. - -{%- endcomment -%} - -#### Ideas to Assess Knowledge for Topic - -Optional ideas to support assessment: - -[To be developed.] - -## Ideas to Assess Knowledge for Module - -Optional ideas to support assessment: - -[To be developed.] - -## Teaching Resources - -Suggested resources to support your teaching: - -[To be developed.] From 26297edc3221db898471f734875d202103f418a6 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 12 May 2021 10:45:27 +0200 Subject: [PATCH 099/416] Renaming file --- .../understanding-and-involving-users.md | 147 ++++++++++++++++++ 1 file changed, 147 insertions(+) create mode 100644 content/designer/understanding-and-involving-users.md diff --git a/content/designer/understanding-and-involving-users.md b/content/designer/understanding-and-involving-users.md new file mode 100644 index 000000000..6cc45adb5 --- /dev/null +++ b/content/designer/understanding-and-involving-users.md @@ -0,0 +1,147 @@ +--- +title: "[Draft] Module 1: Understanding and Involving Users" +nav_title: "Understanding and Involving Users" +permalink: /curricula/designer-modules/understanding-and-involving-users/ +ref: /curricula/designer-modules/understanding-and-involving-users/ +lang: en +github: + repository: w3c/wai-curricula + path: content/designer/understanding-and-involving-users.md +license: creative-commons +acknowledgements: /curricula/acknowledgements/ +changelog: /curricula/changelog/ +footer: > +

Date: Updated @@ Month 2021. First published December 2019.

+

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

+

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+parent_in_h1: + - ref: /curricula/designer-modules/ + name: nav_title + - ref: /curricula/ + name: "Curricula on Web Accessibility" +navigation: + previous: /curricula/designer-modules/ + next: /curricula/designer-modules/flexible-and-responsive-design/ +--- + +## Introduction +{:.no-display} + +Courses based on this module should: + +* discuss aspects related to involving people with disabilities when conducting user research activities +* discuss the impact of involving people with disabilities to create more accessible designs + +## Learning Outcomes for Module + +Students should be able to: + +* explain how involving people with disabilities can lead to more accessible designs +* assess and communicate the need for involvement of people with disabilities +* examine applicable design requirements for accessibility, such as those defined by accessibility standards and policies +* articulate the potential risks of not involving people with disabilities +* describe different accommodation needs for people with disabilities +* identify related requirements for product owners and other team roles to plan for the involvement of people with disabilities + +## Competencies + +Skills required for this module: + +[To be developed.] + +## Topics to Teach + +Topics to achieve the learning outcomes: + +### Topic: Assessing the Involvement of People with Disabilities + +Explain how involving people with disabilities can lead to more accessible designs. Discuss scenarios where including real people with disabilities may not be feasible and present possible workarounds, for example requesting for experts advice and adhering to established best practices. Explain the potential risks of not involving people with disabilities. + +#### Learning Outcomes for Topic + +Students should be able to: + +* describe the impact of including real people with disabilities in user research activities +* describe desktop research activities to conduct when it is not possible to include real people with disabilities, such as asking for experts advice, or following documented best practices +* articulate and communicate the potential risks of not involving people with disabilities, for example higher costs to implement accessibility at a later stage + +### Topic: User Research + +Refer back to [foundation module 2: People and Digital Technology](/curricula/foundation-modules/people-and-digital-technology/). Discuss how organizations conducting user research can include different accessibility features, barriers, and requirements that relate to people with disabilities. + +#### Learning Outcomes for Topic + +Students should be able to: + +* describe the impact of including real people with disabilities in user research activities +* describe desktop research activities to conduct when it is not feasible to include real people with disabilities, such as asking for experts advice, or following documented best practices +* articulate and communicate the consequences of not involving people with disabilities, for example higher costs to implement accessibility at a later stage +* describe the characteristics of potential participants in user research activities based on different factors, such as overall project requirements, type of disability, and level of skills using assistive technologies and adaptive strategies +* identify related requirements for project managers and other team members to include accessibility in the overall project requirements + +### Topic: Establishing Requirements + +Present accessibility standards (such as WCAG2) and policies that apply in the students' region. Discuss functional and non-functional requirements related to people with disabilities. + +#### Learning Outcomes for Topic + +Students should be able to: + +* consider different functional requirements that relate to people with disabilities, for example: + * appropriate contrast ratios + * availability of content and functionality in different screen sizes and configurations + * keyboard compatibility + * compatibility with assistive technologies and adaptive strategies +* identify different non-functional accessibility requirements, for example those included in WCAG and in applicable accessibility policies +* identify and create personas that include people with different types of disabilities and different levels of skills using the Web +* identify scenarios that include use of the product with different types of assistive technologies and adaptive strategies + +### Topic: Including Real People with Disabilities + +Discuss different aspects to consider when working with real people with disabilities. + +#### Learning Outcomes for Topic + +Students should be able to: + +* assess and communicate the need for including real people with disabilities depending on the project scope and the activities to be conducted +* articulate the advantages and disadvantages of remote versus face-to-face participation when working with people with disabilities +* articulate the advantages and disadvantages of guided and non-guided testing +* identify the following needs when research activities are conducted at a specific location: + * accessibility of the facilities + * assistive technology needs + * custom setups that people with disabilities may require + * accessibility of transportation means to get to the chosen venue +* identify the need for appropriate timings for participants with different levels of skills to conduct the research activities +* relate different testing methods to different accessibility outcomes + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +[To be developed.] + +{%- comment -%} + +* Discuss the different levels of skills of people with disabilities when using an assistive technology or an adaptive strategy. Emphasize that some assistive technologies and adaptive strategies are difficult to learn. Explain that different people may need different timings to conduct the proposed activities. For example, setting up different time expectations depending on different levels of experience with the assistive technology and different levels of familiarity with the website or application +* Explain different testing methods that exist, such as testing with an assistive technology, testing a paper prototype, or testing an HTML template. Explain that each of these methods delivers different types of outputs. For example, testing a paper prototype is more likely to deliver results related to vision, and assistive technology testing is more likely to deliver results related to the compatibility of the product with assistive technology. + +{%- endcomment -%} + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +[To be developed.] + +## Ideas to Assess Knowledge for Module + +Optional ideas to support assessment: + +[To be developed.] + +## Teaching Resources + +Suggested resources to support your teaching: + +[To be developed.] From b449f6c81c31eff45a79457031718c4f722efdd8 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 18 May 2021 16:33:06 +0200 Subject: [PATCH 100/416] Updating page --- content/designer/designer-modules.md | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 11a3352c2..ab01eea59 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -23,16 +23,35 @@ navigation: --- ## Introduction +{:.no-display} The designer modules guide the creation of courses that: * @@@ -... +* @@@ -These modules focus on user experience, visual, and interaction aspects to design accessible web pages and applications. The modules primarily address the following roles: +These modules focus on user research, visual, and interaction aspects to design accessible web pages and applications. The modules primarily address the following roles: * User Experience (UX) Designer * User Researcher * Visual Designer * Information Architect * Interaction Designer + +### Prerequisites for Students + +The designer modules are designed for students who have achieved the learning outcomes from the following subset of [Foundation modules](/curricula/foundation-modules/): + +* [Module 1: What is Web accessibility](/curricula/foundation-modules/what-is-web-accessibility/) + * Topic: Stories of People with Disabilities + * Topic: Scope of Web Accessibility +* [Module 2: People and Digital Technology](/curricula/foundation-modules/people-and-digital-technology/) + * Topic: Diverse Abilities, Tools, and Strategies + * Topic: Components of Web Accessibility +* [Module 4: Principles, Standards, and Checks](/curricula/foundation-modules/principles-standards-and-checks/) + * Topic: Principles of Web Accessibility + * Topic: W3C Accessibility Standards + * Topic: Hands-on Experience of Standards +* [Module 5: Getting Started with Accessibility](/curricula/foundation-modules/getting-started-with-accessibility/) + * Topic: Roles and Responsibilities + From 7c9549c30511479d2860cf47b40c7c8edcd57c02 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 18 May 2021 16:33:16 +0200 Subject: [PATCH 101/416] Update page --- .../understanding-and-involving-users.md | 132 ++++++++++++++---- 1 file changed, 107 insertions(+), 25 deletions(-) diff --git a/content/designer/understanding-and-involving-users.md b/content/designer/understanding-and-involving-users.md index 6cc45adb5..877daa1be 100644 --- a/content/designer/understanding-and-involving-users.md +++ b/content/designer/understanding-and-involving-users.md @@ -29,82 +29,154 @@ navigation: Courses based on this module should: -* discuss aspects related to involving people with disabilities when conducting user research activities -* discuss the impact of involving people with disabilities to create more accessible designs +* explain aspects related to involving people with disabilities when conducting user research activities +* explain the impact of involving people with disabilities to create more accessible designs ## Learning Outcomes for Module Students should be able to: * explain how involving people with disabilities can lead to more accessible designs -* assess and communicate the need for involvement of people with disabilities * examine applicable design requirements for accessibility, such as those defined by accessibility standards and policies * articulate the potential risks of not involving people with disabilities -* describe different accommodation needs for people with disabilities +* describe different accommodations for people with disabilities * identify related requirements for product owners and other team roles to plan for the involvement of people with disabilities +{% include excol.html type="all" %} + ## Competencies Skills required for this module: -[To be developed.] +{% include excol.html type="start" %} -## Topics to Teach +### Students -Topics to achieve the learning outcomes: +{% include excol.html type="middle" %} -### Topic: Assessing the Involvement of People with Disabilities +* [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) -Explain how involving people with disabilities can lead to more accessible designs. Discuss scenarios where including real people with disabilities may not be feasible and present possible workarounds, for example requesting for experts advice and adhering to established best practices. Explain the potential risks of not involving people with disabilities. +{% include excol.html type="end" %} -#### Learning Outcomes for Topic +{% include excol.html type="start" %} -Students should be able to: +### Instructors -* describe the impact of including real people with disabilities in user research activities -* describe desktop research activities to conduct when it is not possible to include real people with disabilities, such as asking for experts advice, or following documented best practices -* articulate and communicate the potential risks of not involving people with disabilities, for example higher costs to implement accessibility at a later stage +{% include excol.html type="middle" %} + +* In-depth knowledge of: + * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) + +{% include excol.html type="end" %} + +## Topics to Teach + +Topics to achieve the learning outcomes: + +{% include excol.html type="start" %} ### Topic: User Research -Refer back to [foundation module 2: People and Digital Technology](/curricula/foundation-modules/people-and-digital-technology/). Discuss how organizations conducting user research can include different accessibility features, barriers, and requirements that relate to people with disabilities. +{% include excol.html type="middle" %} + +Refer back to [foundation module 2: People and Digital Technology](/curricula/foundation-modules/people-and-digital-technology/). Discuss how organizations conducting user research can include feedback on different accessibility features, barriers, and requirements that relate to people with disabilities. #### Learning Outcomes for Topic Students should be able to: * describe the impact of including real people with disabilities in user research activities -* describe desktop research activities to conduct when it is not feasible to include real people with disabilities, such as asking for experts advice, or following documented best practices +* describe desktop research activities to be conducted in situations where it is not feasible to include real people with disabilities, such as asking for experts advice, or following documented best practices * articulate and communicate the consequences of not involving people with disabilities, for example higher costs to implement accessibility at a later stage -* describe the characteristics of potential participants in user research activities based on different factors, such as overall project requirements, type of disability, and level of skills using assistive technologies and adaptive strategies +* describe the characteristics of potential participants in user research activities based on different factors, such as the type of disability and the level of skills using assistive technologies and adaptive strategies * identify related requirements for project managers and other team members to include accessibility in the overall project requirements +### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +{%- comment -%} + +* Discuss different examples of involving people with disabilities. Explain that this gives user researchers the opportunity to collect direct feedback from people with disabilities on products that are working for them and on products that are not. Emphasize that you can then include that feedback in the research conclusions, and that will lead to better overall design for everybody. +* Discuss scenarios where it might not be economically feasible to involve people with disabilities. Explain different search methods that can be used to get an understanding of how people with disabilities interact with technology and to get an understanding about different solutions to common pitfalls that people with disabilities may encounter when interacting with a product or service. +* Explain the consequences of not involving people with disabilities in design processes. Emphasize that accessibility remediation is often difficult and can lead to higher costs when implementing accessibility later on in the development phase. +* Present characteristics of potential participants in user research activities based on several factors, such as the type of disability and the level of skills using assistive technologies and adaptive strategies. + +{%- endcomment -%} + +### Ideas to Assess Knowledge + +Optional ideas to support assessment. + +{%- comment -%} + +* Short Answer Questions — Students reflect about how they could include people with disabilities in their user research activities. Assess how students understand the added value of involving people with disabilities. +* Short Answer Questions — Students reflect about the characteristics of potential participants with disabilities in user research activities. Assess how students understand the diversity among people with disabilities. + +{%- endcomment -%} + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + ### Topic: Establishing Requirements -Present accessibility standards (such as WCAG2) and policies that apply in the students' region. Discuss functional and non-functional requirements related to people with disabilities. +{% include excol.html type="middle" %} + +Present accessibility standards (such as WCAG2) and policies that apply in the students' region. Explain functional and non-functional requirements related to people with disabilities. #### Learning Outcomes for Topic Students should be able to: +* identify different non-functional accessibility requirements, for example those included in WCAG and in applicable accessibility policies * consider different functional requirements that relate to people with disabilities, for example: * appropriate contrast ratios * availability of content and functionality in different screen sizes and configurations * keyboard compatibility * compatibility with assistive technologies and adaptive strategies -* identify different non-functional accessibility requirements, for example those included in WCAG and in applicable accessibility policies * identify and create personas that include people with different types of disabilities and different levels of skills using the Web * identify scenarios that include use of the product with different types of assistive technologies and adaptive strategies +### Teaching Ideas + +Optional ideas to support assessment: + +{%- comment -%} + +* Refer back to foundation [Module 4 principles, Standards, and Checks](/curricula/foundation-modules/principles-standards-and-checks) explain the importance of including international standards. +* Explain some functional requirements of products and services, such as compatibility with assistive technologies and adaptive strategies and keyboard support. +* Reflect on the diversity of people with disabilities. Explain that, when creating personas, these need to reflect the different types of abilities people have and their level of skills using assistive technologies and adaptive strategies. + +{%- endcomment -%} + +### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +{%- comment -%} + +* Short answer questions — Ask students about three different types of non-functional requirements included in accessibility standards, such as WCAG2. Assess how students understand non-functional requirements included in accessibility standards. +* Short Answer Questions — Ask students about three types of functional requirements that are related to people with disabilities. Assess how students understand functional requirements that relate to people with disabilities. +* Practical — Students create several personas that include different types of disabilities and different levels of skills using assistive technologies and adaptive strategies. Assess how students understand diversity among people with disabilities. + +{%- endcomment -%} + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + ### Topic: Including Real People with Disabilities -Discuss different aspects to consider when working with real people with disabilities. +{% include excol.html type="middle" %} + +Discuss different aspects to consider when working with real people with disabilities, such as accommodations, accessibility of the facilities, and specific setups people with disabilities may require. #### Learning Outcomes for Topic Students should be able to: -* assess and communicate the need for including real people with disabilities depending on the project scope and the activities to be conducted +* identify the need for including real people with disabilities depending on the project requirements and the activities to be conducted * articulate the advantages and disadvantages of remote versus face-to-face participation when working with people with disabilities * articulate the advantages and disadvantages of guided and non-guided testing * identify the following needs when research activities are conducted at a specific location: @@ -119,11 +191,10 @@ Students should be able to: Optional ideas to teach the learning outcomes: -[To be developed.] - {%- comment -%} -* Discuss the different levels of skills of people with disabilities when using an assistive technology or an adaptive strategy. Emphasize that some assistive technologies and adaptive strategies are difficult to learn. Explain that different people may need different timings to conduct the proposed activities. For example, setting up different time expectations depending on different levels of experience with the assistive technology and different levels of familiarity with the website or application +* Explain how including real people with disabilities can help better inform the decisions taken in iterative design processes. For example, mention complex interaction patterns, such as complex form fields or custom dialogs, and reinforce the idea that feedback on expected behaviors and interaction patterns will help take the best decision. +* Discuss the different levels of skills of people with disabilities when using an assistive technology or an adaptive strategy. Emphasize that some assistive technologies and adaptive strategies are difficult to learn. Explain that different people may need different timings to conduct the proposed activities. Present different strategies to include these differences. For example, setting up different time expectations depending on different levels of experience with the assistive technology and different levels of familiarity with the product. * Explain different testing methods that exist, such as testing with an assistive technology, testing a paper prototype, or testing an HTML template. Explain that each of these methods delivers different types of outputs. For example, testing a paper prototype is more likely to deliver results related to vision, and assistive technology testing is more likely to deliver results related to the compatibility of the product with assistive technology. {%- endcomment -%} @@ -134,14 +205,25 @@ Optional ideas to support assessment: [To be developed.] +{% include excol.html type="end" %} + +{% include excol.html type="all" %} + ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: -[To be developed.] +{%- comment -%} + +* Portfolio — Students design a focus group involving users with disabilities to research about people with disabilities needs for a chat bot application. Assess how students include real people with disabilities in user research activities. + +{%- endcomment -%} ## Teaching Resources Suggested resources to support your teaching: +* [[Involving Users in Web Projects for Better, Easier Accessibility]](https://www.w3.org/WAI/planning/involving-users/) — Helps you understand real-world accessibility issues, such as how people with disabilities and older people use the web with adaptive strategies and assistive technologies. +* [[How People with Disabilities Use the Web]](/people-use-web/) — Describes some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. + [To be developed.] From 2de5e33ee02c96401861db9b5aef338f7eca1aee Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 18 May 2021 16:33:57 +0200 Subject: [PATCH 102/416] Updating page --- .../flexible-and-responsive-design.md | 125 +++++++++++------- 1 file changed, 80 insertions(+), 45 deletions(-) diff --git a/content/designer/flexible-and-responsive-design.md b/content/designer/flexible-and-responsive-design.md index 8c6985bc6..4cfc01f9c 100644 --- a/content/designer/flexible-and-responsive-design.md +++ b/content/designer/flexible-and-responsive-design.md @@ -20,7 +20,7 @@ parent_in_h1: - ref: /curricula/ name: "Curricula on Web Accessibility" navigation: - previous: /curricula/designer-modules/ + previous: /curricula/designer-modules/understanding-and-involving-users/ next: /curricula/designer-modules/navigation/ --- @@ -29,7 +29,8 @@ navigation: Courses based on this module should: -[To be developed.] +* explain how people with disabilities identify and distinguish user interface components based on different features, such as color, layout, spacing, and position +* explain how people with disabilities use different screen sizes, screen configurations, break points, and style sheets to identify, distinguish, and process contents ## Learning Outcomes for Module @@ -43,23 +44,69 @@ Students should be able to: * design user interfaces that support placement of different regions and user interface components where users expect them * identify related requirements for developers to apply the necessary semantics to user interface components +{% include excol.html type="all" %} + ## Competencies Skills required for this module: -[To be developed.] +{% include excol.html type="start" %} + +### Students + +{% include excol.html type="middle" %} + +* [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + +### Instructors + +{% include excol.html type="middle" %} + +* In-depth knowledge of: + * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) +* Applied expertise in teaching: +* [WCAG Success Criterion 1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG21/quickref/#time-based-media) +* [WCAG Success Criterion 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) +* [WCAG Success Criterion 1.3.2 Meaningful Sequence](https://www.w3.org/WAI/WCAG21/quickref/#meaningful-sequence) +* [WCAG Success Criterion 1.3.3 Sensory Characteristics](https://www.w3.org/WAI/WCAG21/quickref/#sensory-characteristics) +* [WCAG Success Criterion 1.3.4 Orientation](https://www.w3.org/WAI/WCAG21/quickref/#orientation) +* [WCAG Success Criterion 1.4.1 Use of Color](https://www.w3.org/WAI/WCAG21/quickref/#use-of-color) +* [WCAG Success Criterion 1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum) +* [WCAG Success Criterion 1.4.4 Resize Text](https://www.w3.org/WAI/WCAG21/quickref/#resize-text) +* [WCAG Success Criterion 1.4.6 Contrast (Enhanced)](https://www.w3.org/WAI/WCAG21/quickref/#contrast-enhanced) +* [WCAG Success Criterion 1.4.10 Reflow](https://www.w3.org/WAI/WCAG21/quickref/#reflow) +* [WCAG Success Criterion 1.4.11 Non-Text Contrast](https://www.w3.org/WAI/WCAG21/quickref/#non-text-contrast) +* [WCAG Success Criterion 1.4.12 Text Spacing](https://www.w3.org/WAI/WCAG21/quickref/#text-spacing) +* [WCAG Success Criterion 2.3.1 Three Flashes or Below Threshold ](https://www.w3.org/WAI/WCAG21/quickref/#three-flashes-or-below-threshold) +* [WCAG Success Criterion 2.3.2 Three Flashes](https://www.w3.org/WAI/WCAG21/quickref/#three-flashes) +* [WCAG Success Criterion 2.4.2 Page Titled](https://www.w3.org/WAI/WCAG21/quickref/#page-titled) +* [WCAG Success Criterion 2.4.3 Focus Order](https://www.w3.org/WAI/WCAG21/quickref/#focus-order) +* [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) +* [WCAG Success Criterion 2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG21/quickref/#focus-visible) + +{% include excol.html type="end" %} ## Topics to Teach Topics to achieve the learning outcomes: +{% include excol.html type="start" %} + ### Topic: Content Perception +{% include excol.html type="middle" %} + +Explain how people with disabilities rely on different style properties such as font sizes, and spacing to perceive contents. + #### Learning Outcomes for Topic Students should be able to: -* design user interfaces with distinguishable styles for different components, such as text, links, buttons, or form elements +* design user interfaces with clear and distinguishable styles for different components, such as links, buttons, form elements, or texts * design user interfaces with font sizes that allow content readability * design user interfaces with adequate spacing to support readability * design user interfaces with text cues to convey any information that is provided through vision only, such as an asterisk to convey required form fields in a form @@ -69,104 +116,92 @@ Students should be able to: Optional ideas to teach the learning outcomes: -[To be de8eloped.] - -{%- comment -%} - -* Demonstrate use of different styles for different user interface components, such as links ,buttons, texts, and menus. Explain how people rely on font sizes, spacing, and typography to distinguish components from one another. For references on how to apply distinguishable styles for user interface components, see @@@ +* Demonstrate the use of styles for distinguishing user interface components from one another, such as links, buttons, form elements, and texts. Explain how people rely on font sizes, spacing, and typography to distinguish components from one another. For references on how to apply distinguishable styles for user interface components, see @@@ * Demonstrate use of different font sizes and explain how they affect readability of the content. For reference on how to apply font sizes that allow content readability, see @@@ * Show examples of different page layouts with and without adequate spacing. Explain how spacing allows to distinguish different pieces of content from one another. For references on how to apply adequate spacing, see @@@ -* Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a store is open or closed. Explain that some people cannot rely on visual means to obtain information, so text (or alternatives) are needed for them to understand the information provided. +* Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a store is open or closed. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. * Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so alternative methods to convey that information are required. For references on how to convey information without using color alone, see @@@ -{%- endcomment -%} - #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -[To be developed.] +* Practical — Students design a paper prototype with distinguishable styles that help perceive different contents. Assess how students use different styles and style properties to make content perceivable and to distinguish contents from one another. +* Practical &mdash: Give students examples of color alone used to provide information and ask them to provide text information and visual cues to supplement that information. Assess how students provide the necessary textual information and visual cues to supplement information provided exclusively with color. + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} ### Topic: Contrast Ratios +{% include excol.html type="middle" %} + +Explain how contrast ratios are essential for people with low vision to perceive, distinguish, and understand contents. + #### Learning Outcomes for Topic Students should be able to: * explain how appropriate contrast ratios allow people with disabilities to read, understand, and distinguish user interface components -* design user interfaces that allow text (including images of text) to have a contrast ratio of at least 4.5:1 with respect to their background -* design user interfaces that allow for large-scale text and images of text to have a contrast ratio of at least 3:1 with respect to their background -* design user interfaces that allow components and graphics to have a contrast ratio of at least 3:1 with respect to their background -* design user interfaces with focus indicators that have a contrast ratio that allows them to be perceived by users +* design user interfaces with texts and images of text that have a contrast ratio of at least 4.5:1 with respect to their background +* design user interfaces with large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background +* design user interfaces with components and graphics that have a contrast ratio of at least 3:1 with respect to their background #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -{%- comment -%} - * Show examples of different foreground and background color combinations. Explain how contrast ratios between foreground and background allow users to perceive content and distinguish components from one another. For references on contrast ratios , see @@@ * Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios need to be at least 4.5:1. For references on how to apply contrast ratios to text (including images of text), see @@@ -* @@@ * Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. For techniques on how to add contrast ratios for graphics and interface components, see@@@ -{%- endcomment -%} - #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -{%- comment -%} - * Short Answer Questions — Give students a set of user interface components and ask them what the contrast ratio should be. Assess how students understand and distinguish contrast ratios for different user interface components. * Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing -{%- endcomment -%} +{% include excol.html type="end" %} + +{% include excol.html type="start" %} ### Topic: Flexible Design +{% include excol.html type="middle" %} + +Explain how people with disabilities use different screen sizes, screen configurations, break points, and style sheets to identify, distinguish, and process contents. + #### Learning Outcomes for Topic Students should be able to: -* explain how the use of different screen sizes, screen configurations, break points, and style sheets affects the ability of people with disabilities to identify, distinguish, and process contents -* design user interfaces that adapt their sequence, content, and functionality when used with different viewport sizes, screen configurations, and devices to access content -* design user interfaces with target sizes and spaces to support tapping by people with mobility impairments and people using different input methods * design user interfaces that support customizing line height, as well as spacing between paragraphs, words, and letters * design user interfaces that support text resizing without loss of content and functionality * design user interfaces that support content view and operation in both portrait and landscape orientations -* design user interfaces that support alternatives to multi-pointer or path-based gestures, such as swipe or pinch -* design user interfaces that support undoing or aborting an action carried out with pointer operations +* design user interfaces with target sizes and spaces to support tapping by people with mobility impairments and people using different input methods #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -{%- comment -%} - -* Show examples of different foreground and background combinations. Explain how contrast ratios between foreground and background allow users to perceive content and distinguish components from one another. For references on contrast ratios , see @@@ -* Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios need to be at least 4.5:1. For references on how to apply contrast ratios to text (including images of text), see @@@ -* @@@ -* Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. For techniques on how to add contrast ratios for graphics and interface components, see@@@ - -{%- endcomment -%} +* Show examples of different user interfaces that support customizing line height as well as spacing between paragraphs, words, and letters to support readability. +* Explain that people with disabilities may need to resize text to be able to read it properly. This includes resizing settings in the assistive technology, browser, and operating system. +* Show examples of user interfaces showing up in both portrait and landscape modes. Explain that the ability to show an interface both in portrait and landscape is crucial for people who cannot change their device orientation due to mobility impairments. +* Show examples of different tap targets, and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that tap targets need to be big enough to accommodate different people's needs. #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -{%- comment -%} - -* Short Answer Questions — Give students a set of user interface components and ask them what the contrast ration should be. Assess how students understand and distinguish contrast ratios for different user interface components. -* Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing - -{%- endcomment -%} +* Practice — Students design different paper prototypes with different interface layouts considering text resizing, line height, spacing between paragraphs, words, and letters. Assess how students consider text resizing, line height, and spacing between paragraphs, words, and letters while designing user interfaces. ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: -[To be developed]. +* Portfolio — Students design a prototype of a single web page. Assess how students use color, layout, spacing, and position to support content perception and identification. ## Teaching Resources From ad85832091ea5233b2cad93abaecfff9dc0ab78f Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 18 May 2021 16:34:09 +0200 Subject: [PATCH 103/416] Updating page --- content/designer/navigation.md | 58 ++++++++++++++++++---------------- 1 file changed, 30 insertions(+), 28 deletions(-) diff --git a/content/designer/navigation.md b/content/designer/navigation.md index fdfeacb43..9b6c93470 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -24,24 +24,22 @@ navigation: Courses based on this module should: -[To be developed.] +* introduce strategies that people with disabilities use to navigate multi page websites and applications +* explain some behaviors, visual affordances, and interaction patterns of menus and relate them to accessibility ## Learning Outcomes for Module Students should be able to: -* explain strategies that people with disabilities use to navigate multipages websites and applications +* explain strategies that people with disabilities use to navigate multipage websites and applications * design user interfaces that support different types of navigations, including menus, breadcrumb trails, tables of contents, and site maps -* define bllocks of repeated content and coordinate with developers to implement mechanisms to bypass such blocks * define keyboard, mouse, and touch interaction for menus and other navigational mechanisms -* provide clear and consistent styles for navigational mechanisms, including menus, menu item states, and other navigational mechanisms +* provide clear and consistent visual cues for navigational mechanisms, including menus, menu item states, and other navigational mechanisms +* define blocks of repeated content and coordinate with developers to implement mechanisms that bypass such blocks * identify related requirements for developers to: - * code landmarks and headings appropriately * implement keyboard, mouse, and touch interactions for navigational mechanisms * implement clear and descriptive names for navigational mechanisms -{%- comment -%} - ## Competencies Skills required for this module: @@ -53,7 +51,7 @@ Skills required for this module: {% include excol.html type="middle" %} * [Prerequisites for Students](/curricula/designer-modules/#prerequisites-for-students) -* [Module 1: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design/) from [Developer Modules](/curricula/developer-modules/) +* [Module 2: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design/) from [Designer Modules](/curricula/designer-modules/) {% include excol.html type="end" %} @@ -64,7 +62,7 @@ Skills required for this module: {% include excol.html type="middle" %} * Applied expertise in teaching: - * [WCAG Success Criterion 1.3.1 Info And Relationships]() + * [WCAG Success Criterion 1.3.1 Info And Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) * [WCAG 2 Success Criterion 2.4.1 Bypass Blocks](https://www.w3.org/WAI/WCAG21/quickref/#bypass-blocks) * [WCAG 2 Success Criterion 2.4.5 Multiple Ways](https://www.w3.org/WAI/WCAG21/quickref/#multiple-ways) * [WCAG 2 Success Criterion 2.4.8 Location](https://www.w3.org/WAI/WCAG21/quickref/#location) @@ -72,20 +70,24 @@ Skills required for this module: {% include excol.html type="end" %} -{%- endcomment -%} - ## Topics to Teach Topics to achieve the learning outcomes: -### Topic: Menu Behavior +{% include excol.html type="start" %} + +### Topic: Menu Behaviors and Patterns + +{% include excol.html type="middle" %} + +Explain menu conventions that relate to accessibility, such as clear and consistent styling to convey menu states, and different patterns for mouse, keyboard, and touch interactions. #### Learning Outcomes for Topic Students should be able to: -* identify and describe uses of different types of menus, for example to navigate across web pages and across application -* provide distinguishable styles for menus that allow to distinguish them from otehr components, and consistent styling for menus across a set of web pages +* identify and describe uses of different types of menus, for example to navigate across web pages, to select categories from a crowded web page, and to navigate across applications +* provide visual cues for menus that allow to distinguish them from other components, and consistent styling for menu identification across a set of web pages * define mouse, keyboard, and touch interactions within menus * design user interfaces that communicate the state of menu items using distinguishable and consistent styles * identify related requirements for developers to implement semantics for different menu states and properties, such as open, closed, expanded, or collapsed @@ -94,22 +96,24 @@ Students should be able to: Optional ideas to teach the learning outcomes: -{%- comment -%} - -* Show examples of different types of menus, such as navigational, fly-out, and application menus. Explain the different scenarios where each of them can be used. For references on the different types of menus, see @@@ -* Demonstrate menu interaction using different input devices, such as keyboard, mouse, and touch. Explain that menus need to be operable with all of these input methods. For example, activating a menu option by tapping, pressing the Enter key, or clicking it with the mouse. -* Show examples of different menu interaction patterns, such as expanding an collapsing submenu options. Explain that these patterns need to support interaction with the keyboard, mouse, and touch as well. Emphasize that the states of these menu items need to be communicated using styles, icons, and semantics. Explain that providing the icons and style is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. - -{%- endcomment -%} +* Show examples of different types of menus, such as navigational, fly-out, and application menus. Explain the different scenarios where each of them can be used. For references on the different types of menus and their uses, see @@@ +* Demonstrate menu interaction using different input devices, such as keyboard, mouse, and touch. Explain that users operate menus with all of these input methods. For example, activating a menu option by tapping, pressing the Enter key, or clicking it with the mouse. +* Show examples of different menu interaction patterns, such as expanding an collapsing submenu items. Explain that these patterns need to support interaction with the keyboard, mouse, and touch as well. Emphasize that the states of these menu items need to be communicated using visual cues and semantics. Explain that providing the visual cues is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment. -[To be developed]. +* Practical — Students design mouse, keyboard, and touch interactions for menus. for example how to open, navigate, activate, and close such menus using the mouse, keyboard, and touch. Assess how students understand the need for different interaction patterns based on the input method in use. + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} ### Topic: Other Navigational Mechanisms +Introduce other navigational mechanisms that may be used depending on the characteristics of the website or application. Emphasize that there should be multiple ways to reach a specific web page or application view, but that it is not compulsory to use every single navigational mechanisms described. + #### Learning Outcomes for Topic Students should be able to: @@ -128,26 +132,24 @@ Students should be able to: Optional ideas to teach the learning outcomes: -{%- comment -%} - * Show examples of mechanisms to bypass blocks of repeated content, such as a link at the top of the page and the use of expandable and collapsible components. Explain that people using the keyboard only find it very frustrating to navigate through sets of repeated blocks of content, such as navigation bars or header contents. For references on how to provide a mechanism to bypass blocks of repeated content, see @@@ * Show examples of breadcrumb trails. Explain that they provide information about the user's location within the context of a set of websites. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see @@@ * Show examples of site maps and explain that they serve the purpose of providing an overview of the whole site. Explain that some users rely on them to better understand the structure of the site and to more easily find its way through it. For references on how to provide a site map, see @@@ * Show examples of tables of contents, for example in an electronic book or document. Explain that they provide an overview of the whole document and allow navigation to specific parts of the content. -{%- endcomment -%} - #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -[To be developed.] +* Practical — Students define the block of repeated content within a website and coordinate with developers to provide a way for users to bypass that block. Assess how students understand the concept of block of repeated content and how they provide a mechanism to bypass it. +* Practical — Present students with an interface and ask them to provide multiple ways to navigate across the website. Asses how students provide multiple navigational mechanisms where appropriate, such as tables of contents and sitemaps. +* Practice — Present students with a second-level web page within a website and ask them to provide a breadcrumb trail for users to understand where a page is located with respect to the whole website. Assess how students provide a breadcrumb trail. ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: -[To be developed.] +* Portfolio — Students add navigation across web pages or applications views. Assess how students understand accessibility features of navigation across multipage websites and applications ## Teaching Resources From 62d1d22f8d474cf5fd33b96a93ef57d9055f3183 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 18 May 2021 16:37:36 +0200 Subject: [PATCH 104/416] Fixing list --- .../flexible-and-responsive-design.md | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/content/designer/flexible-and-responsive-design.md b/content/designer/flexible-and-responsive-design.md index 4cfc01f9c..267a2663f 100644 --- a/content/designer/flexible-and-responsive-design.md +++ b/content/designer/flexible-and-responsive-design.md @@ -69,24 +69,24 @@ Skills required for this module: * In-depth knowledge of: * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Applied expertise in teaching: -* [WCAG Success Criterion 1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG21/quickref/#time-based-media) -* [WCAG Success Criterion 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) -* [WCAG Success Criterion 1.3.2 Meaningful Sequence](https://www.w3.org/WAI/WCAG21/quickref/#meaningful-sequence) -* [WCAG Success Criterion 1.3.3 Sensory Characteristics](https://www.w3.org/WAI/WCAG21/quickref/#sensory-characteristics) -* [WCAG Success Criterion 1.3.4 Orientation](https://www.w3.org/WAI/WCAG21/quickref/#orientation) -* [WCAG Success Criterion 1.4.1 Use of Color](https://www.w3.org/WAI/WCAG21/quickref/#use-of-color) -* [WCAG Success Criterion 1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum) -* [WCAG Success Criterion 1.4.4 Resize Text](https://www.w3.org/WAI/WCAG21/quickref/#resize-text) -* [WCAG Success Criterion 1.4.6 Contrast (Enhanced)](https://www.w3.org/WAI/WCAG21/quickref/#contrast-enhanced) -* [WCAG Success Criterion 1.4.10 Reflow](https://www.w3.org/WAI/WCAG21/quickref/#reflow) -* [WCAG Success Criterion 1.4.11 Non-Text Contrast](https://www.w3.org/WAI/WCAG21/quickref/#non-text-contrast) -* [WCAG Success Criterion 1.4.12 Text Spacing](https://www.w3.org/WAI/WCAG21/quickref/#text-spacing) -* [WCAG Success Criterion 2.3.1 Three Flashes or Below Threshold ](https://www.w3.org/WAI/WCAG21/quickref/#three-flashes-or-below-threshold) -* [WCAG Success Criterion 2.3.2 Three Flashes](https://www.w3.org/WAI/WCAG21/quickref/#three-flashes) -* [WCAG Success Criterion 2.4.2 Page Titled](https://www.w3.org/WAI/WCAG21/quickref/#page-titled) -* [WCAG Success Criterion 2.4.3 Focus Order](https://www.w3.org/WAI/WCAG21/quickref/#focus-order) -* [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) -* [WCAG Success Criterion 2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG21/quickref/#focus-visible) + * [WCAG Success Criterion 1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG21/quickref/#time-based-media) + * [WCAG Success Criterion 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) + * [WCAG Success Criterion 1.3.2 Meaningful Sequence](https://www.w3.org/WAI/WCAG21/quickref/#meaningful-sequence) + * [WCAG Success Criterion 1.3.3 Sensory Characteristics](https://www.w3.org/WAI/WCAG21/quickref/#sensory-characteristics) + * [WCAG Success Criterion 1.3.4 Orientation](https://www.w3.org/WAI/WCAG21/quickref/#orientation) + * [WCAG Success Criterion 1.4.1 Use of Color](https://www.w3.org/WAI/WCAG21/quickref/#use-of-color) + * [WCAG Success Criterion 1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum) + * [WCAG Success Criterion 1.4.4 Resize Text](https://www.w3.org/WAI/WCAG21/quickref/#resize-text) + * [WCAG Success Criterion 1.4.6 Contrast (Enhanced)](https://www.w3.org/WAI/WCAG21/quickref/#contrast-enhanced) + * [WCAG Success Criterion 1.4.10 Reflow](https://www.w3.org/WAI/WCAG21/quickref/#reflow) + * [WCAG Success Criterion 1.4.11 Non-Text Contrast](https://www.w3.org/WAI/WCAG21/quickref/#non-text-contrast) + * [WCAG Success Criterion 1.4.12 Text Spacing](https://www.w3.org/WAI/WCAG21/quickref/#text-spacing) + * [WCAG Success Criterion 2.3.1 Three Flashes or Below Threshold ](https://www.w3.org/WAI/WCAG21/quickref/#three-flashes-or-below-threshold) + * [WCAG Success Criterion 2.3.2 Three Flashes](https://www.w3.org/WAI/WCAG21/quickref/#three-flashes) + * [WCAG Success Criterion 2.4.2 Page Titled](https://www.w3.org/WAI/WCAG21/quickref/#page-titled) + * [WCAG Success Criterion 2.4.3 Focus Order](https://www.w3.org/WAI/WCAG21/quickref/#focus-order) + * [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) + * [WCAG Success Criterion 2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG21/quickref/#focus-visible) {% include excol.html type="end" %} From f9b746cf0af3faec6e579f417934f7f03fe25a4f Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 18 May 2021 16:39:41 +0200 Subject: [PATCH 105/416] Fixing punctuation --- content/designer/flexible-and-responsive-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/flexible-and-responsive-design.md b/content/designer/flexible-and-responsive-design.md index 267a2663f..d2d90892e 100644 --- a/content/designer/flexible-and-responsive-design.md +++ b/content/designer/flexible-and-responsive-design.md @@ -100,7 +100,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Explain how people with disabilities rely on different style properties such as font sizes, and spacing to perceive contents. +Explain how people with disabilities rely on different style properties, such as font sizes and spacing, to perceive contents. #### Learning Outcomes for Topic From 9ab1d509162bdcea4aae47e26399db550c019c2b Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 21 May 2021 09:35:07 +0200 Subject: [PATCH 106/416] Updating module 1 --- .../understanding-and-involving-users.md | 45 +++++-------------- 1 file changed, 10 insertions(+), 35 deletions(-) diff --git a/content/designer/understanding-and-involving-users.md b/content/designer/understanding-and-involving-users.md index 877daa1be..07a472928 100644 --- a/content/designer/understanding-and-involving-users.md +++ b/content/designer/understanding-and-involving-users.md @@ -29,8 +29,8 @@ navigation: Courses based on this module should: -* explain aspects related to involving people with disabilities when conducting user research activities * explain the impact of involving people with disabilities to create more accessible designs +* present strategies to consider when working with real people with disabilities ## Learning Outcomes for Module @@ -79,7 +79,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Refer back to [foundation module 2: People and Digital Technology](/curricula/foundation-modules/people-and-digital-technology/). Discuss how organizations conducting user research can include feedback on different accessibility features, barriers, and requirements that relate to people with disabilities. +Refer back to [Foundation Module 2: People and Digital Technology](/curricula/foundation-modules/people-and-digital-technology/). Discuss how organizations conducting user research can include feedback on different accessibility features, barriers, and requirements that relate to people with disabilities. #### Learning Outcomes for Topic @@ -91,30 +91,22 @@ Students should be able to: * describe the characteristics of potential participants in user research activities based on different factors, such as the type of disability and the level of skills using assistive technologies and adaptive strategies * identify related requirements for project managers and other team members to include accessibility in the overall project requirements -### Teaching Ideas for Topic +#### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -{%- comment -%} - * Discuss different examples of involving people with disabilities. Explain that this gives user researchers the opportunity to collect direct feedback from people with disabilities on products that are working for them and on products that are not. Emphasize that you can then include that feedback in the research conclusions, and that will lead to better overall design for everybody. * Discuss scenarios where it might not be economically feasible to involve people with disabilities. Explain different search methods that can be used to get an understanding of how people with disabilities interact with technology and to get an understanding about different solutions to common pitfalls that people with disabilities may encounter when interacting with a product or service. * Explain the consequences of not involving people with disabilities in design processes. Emphasize that accessibility remediation is often difficult and can lead to higher costs when implementing accessibility later on in the development phase. * Present characteristics of potential participants in user research activities based on several factors, such as the type of disability and the level of skills using assistive technologies and adaptive strategies. -{%- endcomment -%} - -### Ideas to Assess Knowledge +#### Ideas to Assess Knowledge for Topic Optional ideas to support assessment. -{%- comment -%} - * Short Answer Questions — Students reflect about how they could include people with disabilities in their user research activities. Assess how students understand the added value of involving people with disabilities. * Short Answer Questions — Students reflect about the characteristics of potential participants with disabilities in user research activities. Assess how students understand the diversity among people with disabilities. -{%- endcomment -%} - {% include excol.html type="end" %} {% include excol.html type="start" %} @@ -142,25 +134,18 @@ Students should be able to: Optional ideas to support assessment: -{%- comment -%} - -* Refer back to foundation [Module 4 principles, Standards, and Checks](/curricula/foundation-modules/principles-standards-and-checks) explain the importance of including international standards. +* Refer back to [Foundation Module 4: Principles, Standards, and Checks](/curricula/foundation-modules/principles-standards-and-checks) and explain the importance of including international standards. * Explain some functional requirements of products and services, such as compatibility with assistive technologies and adaptive strategies and keyboard support. * Reflect on the diversity of people with disabilities. Explain that, when creating personas, these need to reflect the different types of abilities people have and their level of skills using assistive technologies and adaptive strategies. -{%- endcomment -%} - ### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -{%- comment -%} - * Short answer questions — Ask students about three different types of non-functional requirements included in accessibility standards, such as WCAG2. Assess how students understand non-functional requirements included in accessibility standards. * Short Answer Questions — Ask students about three types of functional requirements that are related to people with disabilities. Assess how students understand functional requirements that relate to people with disabilities. -* Practical — Students create several personas that include different types of disabilities and different levels of skills using assistive technologies and adaptive strategies. Assess how students understand diversity among people with disabilities. - -{%- endcomment -%} +* Practical — Students create several personas different types of disabilities and different levels of skills using assistive technologies and adaptive strategies. Assess how students understand diversity among people with disabilities. +* Practical — Students create several scenarios that include use of the product with different assistive technologies and adaptive strategies. Assess how students understand different scenarios that include use of the product with different assistive technologies and adaptive strategies. {% include excol.html type="end" %} @@ -170,7 +155,7 @@ Optional ideas to support assessment: {% include excol.html type="middle" %} -Discuss different aspects to consider when working with real people with disabilities, such as accommodations, accessibility of the facilities, and specific setups people with disabilities may require. +Discuss different strategies to consider when working with real people with disabilities, such as accommodations, accessibility of the facilities, and specific setups people with disabilities may require. #### Learning Outcomes for Topic @@ -191,19 +176,15 @@ Students should be able to: Optional ideas to teach the learning outcomes: -{%- comment -%} - -* Explain how including real people with disabilities can help better inform the decisions taken in iterative design processes. For example, mention complex interaction patterns, such as complex form fields or custom dialogs, and reinforce the idea that feedback on expected behaviors and interaction patterns will help take the best decision. +* Explain how including real people with disabilities can help better inform the decisions taken in iterative design processes. For example, mention complex interaction patterns, such as complex form fields or custom dialogs, and reinforce the idea that feedback on expected behaviors and interaction patterns will help take the best design decision. * Discuss the different levels of skills of people with disabilities when using an assistive technology or an adaptive strategy. Emphasize that some assistive technologies and adaptive strategies are difficult to learn. Explain that different people may need different timings to conduct the proposed activities. Present different strategies to include these differences. For example, setting up different time expectations depending on different levels of experience with the assistive technology and different levels of familiarity with the product. * Explain different testing methods that exist, such as testing with an assistive technology, testing a paper prototype, or testing an HTML template. Explain that each of these methods delivers different types of outputs. For example, testing a paper prototype is more likely to deliver results related to vision, and assistive technology testing is more likely to deliver results related to the compatibility of the product with assistive technology. -{%- endcomment -%} - #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -[To be developed.] +[To be developed]. {% include excol.html type="end" %} @@ -213,17 +194,11 @@ Optional ideas to support assessment: Optional ideas to support assessment: -{%- comment -%} - * Portfolio — Students design a focus group involving users with disabilities to research about people with disabilities needs for a chat bot application. Assess how students include real people with disabilities in user research activities. -{%- endcomment -%} - ## Teaching Resources Suggested resources to support your teaching: * [[Involving Users in Web Projects for Better, Easier Accessibility]](https://www.w3.org/WAI/planning/involving-users/) — Helps you understand real-world accessibility issues, such as how people with disabilities and older people use the web with adaptive strategies and assistive technologies. * [[How People with Disabilities Use the Web]](/people-use-web/) — Describes some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. - -[To be developed.] From 5ee777bd94807e894ee722d0b0ad798b11b0b7a7 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 24 May 2021 11:39:43 +0200 Subject: [PATCH 107/416] updates to modules and topics --- .../flexible-and-responsive-design.md | 19 ++-- content/designer/images-and-graphics.md | 75 +++++------- content/designer/information-design.md | 107 +++++++++++------- content/designer/interaction-and-feedback.md | 105 +++++++++-------- content/designer/multimedia-and-animations.md | 47 +++----- content/designer/navigation.md | 51 +++++---- 6 files changed, 206 insertions(+), 198 deletions(-) diff --git a/content/designer/flexible-and-responsive-design.md b/content/designer/flexible-and-responsive-design.md index d2d90892e..6b610fe38 100644 --- a/content/designer/flexible-and-responsive-design.md +++ b/content/designer/flexible-and-responsive-design.md @@ -29,8 +29,8 @@ navigation: Courses based on this module should: -* explain how people with disabilities identify and distinguish user interface components based on different features, such as color, layout, spacing, and position * explain how people with disabilities use different screen sizes, screen configurations, break points, and style sheets to identify, distinguish, and process contents +* explain accessibility requirements that relate to color, layout, spacing, and position ## Learning Outcomes for Module @@ -81,8 +81,6 @@ Skills required for this module: * [WCAG Success Criterion 1.4.10 Reflow](https://www.w3.org/WAI/WCAG21/quickref/#reflow) * [WCAG Success Criterion 1.4.11 Non-Text Contrast](https://www.w3.org/WAI/WCAG21/quickref/#non-text-contrast) * [WCAG Success Criterion 1.4.12 Text Spacing](https://www.w3.org/WAI/WCAG21/quickref/#text-spacing) - * [WCAG Success Criterion 2.3.1 Three Flashes or Below Threshold ](https://www.w3.org/WAI/WCAG21/quickref/#three-flashes-or-below-threshold) - * [WCAG Success Criterion 2.3.2 Three Flashes](https://www.w3.org/WAI/WCAG21/quickref/#three-flashes) * [WCAG Success Criterion 2.4.2 Page Titled](https://www.w3.org/WAI/WCAG21/quickref/#page-titled) * [WCAG Success Criterion 2.4.3 Focus Order](https://www.w3.org/WAI/WCAG21/quickref/#focus-order) * [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) @@ -109,7 +107,7 @@ Students should be able to: * design user interfaces with clear and distinguishable styles for different components, such as links, buttons, form elements, or texts * design user interfaces with font sizes that allow content readability * design user interfaces with adequate spacing to support readability -* design user interfaces with text cues to convey any information that is provided through vision only, such as an asterisk to convey required form fields in a form +* design user interfaces with text cues to convey information provided through vision only, such as an asterisk to convey required form fields in a form * design user interfaces with other visual cues in addition to color, for example using different patterns, shapes, and icons #### Teaching Ideas for Topic @@ -126,7 +124,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to support assessment: -* Practical — Students design a paper prototype with distinguishable styles that help perceive different contents. Assess how students use different styles and style properties to make content perceivable and to distinguish contents from one another. +* Practical — Students design a paper prototype with distinguishable styles that help perceive different contents. Assess how students use different style properties to make content perceivable and to distinguish contents from one another. * Practical &mdash: Give students examples of color alone used to provide information and ask them to provide text information and visual cues to supplement that information. Assess how students provide the necessary textual information and visual cues to supplement information provided exclusively with color. {% include excol.html type="end" %} @@ -187,9 +185,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of different user interfaces that support customizing line height as well as spacing between paragraphs, words, and letters to support readability. -* Explain that people with disabilities may need to resize text to be able to read it properly. This includes resizing settings in the assistive technology, browser, and operating system. +* Explain that people with low vision often need to resize text to be able to read it properly. This includes resizing settings in the assistive technology, browser, and operating system. * Show examples of user interfaces showing up in both portrait and landscape modes. Explain that the ability to show an interface both in portrait and landscape is crucial for people who cannot change their device orientation due to mobility impairments. -* Show examples of different tap targets, and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that tap targets need to be big enough to accommodate different people's needs. +* Show examples of different tap targets, and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that tap targets need to be large enough to accommodate different people's needs. #### Ideas to Assess Knowledge for Topic @@ -197,6 +195,10 @@ Optional ideas to support assessment: * Practice — Students design different paper prototypes with different interface layouts considering text resizing, line height, spacing between paragraphs, words, and letters. Assess how students consider text resizing, line height, and spacing between paragraphs, words, and letters while designing user interfaces. +{% include excol.html type="end" %} + +{% include excol.html type="all" %} + ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: @@ -207,4 +209,5 @@ Optional ideas to support assessment: Suggested resources to support your teaching: -[To be developed.] +* @@@ +* [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. \ No newline at end of file diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 90d6c5a7f..9116a0b39 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -24,18 +24,18 @@ navigation: Courses based on this module should: -[To be developed.] +* explain strategies that people with disabilities use to interact with images +* explain accessibility requirements related to images and graphics, such as text alternatives for images ## Learning Outcomes for Module Students should be able to: * explain how images affect processing of information, content identification, and understanding of functionality by people with disabilities -* identify and describe different uses of images within a user interfaces, including informative, functional, and decorative +* identify and describe different uses of images, including for informative, functional, and decorative purposes * provide appropriate text alternatives for graphical components included in the design phase, such as logos, links, and menu items -* describe ways to supplement information presented in text, including use of graphics, color, or shapes -* provide equivalent textual information that helps identify the purpose of an image conveying function -* design user interfaces that consider descriptions for images and graphics, including charts or diagrams +* design user interfaces with alternative methods to verify human interaction +* provide images with appropriate contrast ratios and ensure images resize as required * identify related requirements for developers to code images and text alternatives appropriately * identify related requirements for content authors to provide appropriate text alternatives for images included in the authoring phase * identify related requirements for content authors to present information as text wherever possible, instead of using images of text @@ -50,84 +50,61 @@ Skills required for this module: Topics to achieve the learning outcomes: -### Topic: Text Alternatives and Descriptions +### Topic: Decorative Images + +Decorative images are those which convey no information or function and are used for ornamental purposes. Discuss examples of these types of images and explain accessibility requirements that these images have, such as contrast ratios and ability of the image to resize. #### Learning Outcomes for Topic Students should be able to: -* identify and describe different uses of images to convey information -* provide text alternatives that present equivalent information as that contained in the image -* describe related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, such as diagrams or charts +* identify and describe different uses of images with decorative meaning, such as visual and ornamental +* provide decorative images with appropriate contrast ratios when these images are necessary to understand the content +* provide decorative images that resize according to user needs and preferences +* identify related requirements for developers to code decorative images appropriately #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of different images that convey information, such as images to provide instructions, or to identify objects. Explain that such information needs to be provided using text alternatives, so that the purpose of the image can be understood without having to look at the image. For references on how to provide text alternatives for images, see +* Show examples of borders and icons that do not convey function or information. Explain that they serve ornamental purposes. +* Provide examples of images and graphics that are necessary to understand the overall content, and explain that they have a contrast ratio requirement of at least 3:1. #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -[To be developed.] +* Practical — Ask students to provide decorative images to illustrate a text article and ask them to ensure these icons are visible in different screen sizes and devicess. Assess how students understand the requirement for decorative images to have appropriate contrast ratios and to resize depending on the user needs and preferences. + +### Topic: Text Alternatives -### Topic: Images Conveying Function +Explain several uses of text alternatives, such as to describe the function of a user interface component or to describe the images so that they can be understood without looking at them. Explain that describing the functions of user interface components is a designer's responsibility, whereas providing other text alternatives and descriptions is a responsibility shared with the content author. #### Learning Outcomes for Topic Students should be able to: -* identify and describe different uses of images and graphics to convey function +* identify and describe different uses of text alternatives, such as to describe function or to describe information conveyed in an image * provide short text alternatives for controls and components that accept user input, for example search, print, and save buttons +* identify situations where it is necessary to provide text alternatives that present equivalent information as that contained in the image * provide text alternatives that identify and describe the purpose of human verification systems, such as captcha * manage the provision of several modalities of captcha that rely on different sensory characteristics, such as visual, auditory, and logical - -{%- comment -%} +* [in topic complex images] describe related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, such as diagrams or charts #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of different images used to convey functionality, such as for printing, searching, or saving. Explain that it is necessary to provide and equivalent, succinct text alternative that explain the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see -* Show examples of different verification systems, such as captcha, to identify human beings trying to access a service or system. Explain that these mechanisms need to support several sensory characteristics, such as visual, auditory, or cognitive. SFor references on how to provide accessible captcha, see +* Show examples of different images used to convey functionality, such as for printing, searching, or saving a document. Explain that it is necessary to provide and equivalent, succinct text alternative that explain the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see +* Show examples of different images that convey information, such as images to provide instructions, or to identify objects. Explain that such information needs to be provided using text alternatives, so that the purpose of the image can be understood without having to look at the image. Emphasize that these alternatives may require coordination between designers, developers, and content authors. For references on how to provide text alternatives for images, see +* Show examples of different verification systems, such as captcha, to identify human beings trying to access a service or system. Explain that these mechanisms need to support several sensory characteristics, such as visual, auditory, or cognitive. For references on how to provide accessible captcha, see #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -[To be developed.] - -{%- endcomment -%} - -### Topic: Decorative Images - -#### Learning Outcomes for Topic - -Students should be able to: - -* identify and describe different uses of images with decorative meaning -* identify related requirements for developers to code decorative images appropriately - -{%- comment -%} - -#### Teaching Ideas for Topic - -Optional ideas to teach the learning outcomes: - -* Show examples of different foreground and background combinations. Explain how contrast ratios between foreground and background allow users to perceive content and distinguish components from one another. For references on contrast ratios , see @@@ -* Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios need to be at least 4.5:1. For references on how to apply contrast ratios to text (including images of text), see @@@ -* @@@ -* Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. For techniques on how to add contrast ratios for graphics and interface components, see@@@ - -#### Ideas to Assess Knowledge for Topic - -Optional ideas to support assessment: - -* Short Answer Questions — Give students a set of user interface components and ask them what the contrast ration should be. Assess how students understand and distinguish contrast ratios for different user interface components. -* Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing - -{%- endcomment -%} +* Practice — Give students a set of images conveying fiction, such as print or search buttons, and ask them to provide their corresponding text alternative. Assess how students identify images that convey function and provide their corresponding text alternative. +* Short Answer Questions — Present students with a situation where a human verification system needs to be used, and ask them to provide authentication alternatives for other sensory characteristics different than vision. Assess how students understand the need for providing human verification systems that rely on different sensory characteristics in addition to captcha. ## Ideas to Assess Knowledge for Module diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 9ced20ae2..5c1a7e43a 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -24,13 +24,13 @@ navigation: Courses based on this module should: -[To be developed.] +* present strategies to split large blocks of information into smaller pieces +* present strategies to group information that shares a common purpose so that it is easier to process ## Learning Outcomes for Module Students should be able to: -* explain how different types of information, including textual, tabular, or graphical, are processed differently by various groups of people with disabilities * describe approaches to break down different types of content into smaller and more manageable pieces, including: * the use of headings and pages to divide longer passages of text into smaller pieces * the use of lists, simpler tables, and plain text to convey information presented in complex tables @@ -39,30 +39,56 @@ Students should be able to: * describe the use of labels and instructions to make information in forms more understandable * identify related requirements for developers to programmatically associate text alternatives, headings, table header and data cells, and form labels and instructions, to their corresponding control +{% include excol.html type="all" %} + ## Competencies Skills required for this module: -[To be developed.] +{% include excol.html type="start" %} + +### Students + +{% include excol.html type="middle" %} + +* [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + +### Instructors + +{% include excol.html type="middle" %} + +* Applied expertise in teaching: + * [WCAG Success Criterion 3.3.2 Labels or Instructions](https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions) + +{% include excol.html type="end" %} ## Topics to Teach Topics to achieve the learning outcomes: +{% include excol.html type="start" %} + ### Topic: Textual Information +{% include excol.html type="middle" %} + +Present ways to split large amounts of text into smaller pieces, such as by using headings or pages. + +Discuss mechanisms to supplement information presented only with text, such as use of icons and other visual cues. + #### Learning Outcomes for Topic Students should be able to: -* design user interfaces that support additional ways to convey information presented in text, such as required form fields, using icons, shapes, and colors +* design user interfaces that support additional ways to convey information presented in text, using icons and other visual cues * design user interfaces that support mechanisms to identify specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon * design user interfaces that support mechanisms to identify the expanded form or meaning of acronyms and abbreviations -* design user interfaces with clear language and easy-to-read content wherever possible -* describe related requirements for developers to make language programmatically determined -* describe related requirements for content authors to provide clear language and easy-to-read texts whenever possible - -{%- comment -%} +* identify related requirements for developers to make language programmatically determined +* identify related requirements for content authors to provide clear language and easy-to-read texts whenever possible #### Teaching Ideas for Topic @@ -76,38 +102,44 @@ Optional ideas to support assessment: [To be developed.] -{%- endcomment -%} +{% include excol.html type="end" %} + +{% include excol.html type="start" %} ### Topic: Tabular Information +{% include excol.html type="middle" %} + +Explain different ways in which people with disabilities visualize tabular information, for example split into several simpler tables or putting the information in lists. + #### Learning Outcomes for Topic Students should be able to: -* define the following types of tables from an accessibility perspective - * simple - * complex - * layout -* design user interfaces that allow presentation of tables in multiple ways, such as using several lists, or splitting a complex table into several simpler ones -* design user interfaces that allow to establish a relationship between the table cells both visually and programmatically, included for headers and data cells -* design user interfaces that support the inclusion of table descriptions -* describe related requirements for developers to ensure that table header and data cells are programmatically associated - -{%- comment -%} +* identify uses of tables to present data that share a logical relationship +* design user interfaces that support multiple ways of presenting tabular information, such as using several lists, or splitting a complex table into several simpler ones +* define table header and data cells, and provide clear and distinguishable styles for each +* identify related requirements for content authors to write table descriptions that provide information about what the table is about +* identify related requirements for developers to programmatically associate table descriptions, data cells, and header cells with their corresponding table #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -[To be developed.] +* Show examples of different types of information presented in tables. Explain that tables are used when there is a logical relationship between the information presented, for example when presenting a list of events with their date and venue. +* Refer back to [Module 2: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design) and explain that some users may require different ways of presenting tabular information. Explain that these include splitting complex tables into simpler ones, and using lists to group the logically related information. +* Show examples of table data cells and header cells. Discuss with students which of these cells should be the header and which should be the data cells. Emphasize that the relation between the table data cells and header cells needs to be perceived both visually and programmatically for users to understand the relationship between these two types of cells, and that clear styles should be provided. Explain that providing the styles is a designer's responsibility, whereas establishing the programmatic relationship is a responsibility shared with the developers. #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -[To be developed.] +* Practical — Give students a set of tables and ask them to define their header and data cells. Assess how students understand the difference between header and data cells. +* Practical — Present students with a set of tables and ask them to provide clear styles to distinguish data cells from header cells. Assess how students provide clear and distinguishable styles for header cells and data cells. + +{% include excol.html type="end" %} -{%- endcomment -%} +{% include excol.html type="start" %} ### Topic: Grouping and Sorting Information @@ -115,11 +147,9 @@ Optional ideas to support assessment: Students should be able to: -* ensure related form controls, such as those collecting personal information, payment methods, and consent to legal conditions are presented each in its corresponding step of the form or are grouped together in a way its relationship is apparent to all users -* ensure examples of expected input are provided, such as how a phone number should be entered and what the different credit card fields should contain -* ensure related links, such as those from a navigation menu or from a product category are grouped together visually and programmatically - -{%- comment -%} +* design user interfaces that support grouping of related form controls, such as those collecting personal information, payment methods, and consent to legal conditions +* provide examples of expected input wherever possible, such as how a phone number should be entered and what the different credit card fields should contain +* design user interfaces that support programmatic and visual grouping of related links, such as those from a navigation menu or from a product category #### Teaching Ideas for Topic @@ -133,7 +163,9 @@ Optional ideas to support assessment: [To be developed.] -{%- endcomment -%} +{% include excol.html type="end" %} + +{% include excol.html type="start" %} ### Topic: Data Visualization @@ -141,37 +173,34 @@ Optional ideas to support assessment: Students should be able to: -* create user interfaces that allow to filter data using different mechanisms such as search boxes or subsets of data +* create user interfaces that support filtering of data using different mechanisms such as search boxes or subsets of data * create user interfaces that allow to use the keyboard to navigate to specific pieces of data * create user interfaces that allow customizing the results that are shown at a given time -{%- comment -%} #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of different foreground and background combinations. Explain how contrast ratios between foreground and background allow users to perceive content and distinguish components from one another. For references on contrast ratios , see @@@ -* Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios need to be at least 4.5:1. For references on how to apply contrast ratios to text (including images of text), see @@@ -* @@@ -* Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. For techniques on how to add contrast ratios for graphics and interface components, see@@@ +[To be developed]. #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -* Short Answer Questions — Give students a set of user interface components and ask them what the contrast ration should be. Assess how students understand and distinguish contrast ratios for different user interface components. -* Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing +[To be developed]. -{%- endcomment -%} +{% include excol.html type="end" %} ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: +[To be developed]. + ## Teaching Resources Suggested resources to support your teaching: -[To be developed +[To be developed]. diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 8300d0a4a..38427d9e4 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -24,16 +24,17 @@ navigation: Courses based on this module should: -[To be developed.] +* explain strategies that people with disabilities use to interact with and operate user interface components +* describe some accessibilty requirements related to keyboard interactions, input gesture, labels, instructions, notifications and feedback ## Learning Outcomes for Module Students should be able to: -* explain strategies that people with disabilities use to identify, distinguish, and operate interactive user interface components +* explain strategies that people with disabilities use to operate interactive user interface components * design user interfaces that support different input mechanisms, including mouse, touch, and keyboard * provide clear and distinguishable ways to identify interactive user interface components, including through naming and placement -* provide methods to help understand the context, information, and functionality of user interface components, including through textual instructions, visual cues, and icons +* provide methods to help understand the context, information, and functionality of user interface components, including through textual instructions, color, and other visual cues icons * provide meaningful and descriptive notifications about imminent time limits, status changes, and feedback from user input, including errors, suggestions for correction, and success messages * design user interfaces with meaningful sequence of interactive user interface components * define custom interaction patterns, such as where to place focus when a dialog is open and closed, and what the focus order should be within those dialogs @@ -45,37 +46,67 @@ Students should be able to: Skills required for this module: +### Instructors + +* Applied expertise in teaching: + * [WCAG Success Criterion 2.3.1 Three Flashes or Below Threshold ](https://www.w3.org/WAI/WCAG21/quickref/#three-flashes-or-below-threshold) + * [WCAG Success Criterion 2.3.2 Three Flashes](https://www.w3.org/WAI/WCAG21/quickref/#three-flashes) + [To be developed.] ## Topics to Teach Topics to achieve the learning outcomes: -### Topic: Keyboard Input +### Topic: Keyboard Interaction #### Learning Outcomes for Topic Students should be able to: -* design user interfaces that support operation with the keyboard -* identify situations when it may be necessary to provide additional keyboard shortcuts, for example when designing a custom functionality -* design user interfaces that support keyboard shortcuts that avoid conflicts with the operating system, browser, and assistive technologies keyboard shortcuts -* describe related requirements for developers to ensure every user interface component can be entered, operated, and exited using the keyboard only +* design custom user interfaces that support operation with the keyboard +* identify situations when it is necessary to provide additional keyboard shortcuts, for example when designing a custom functionality that is not keyboard supported by default +* design user interfaces that wherever possible avoid keyboard shortcut conflicts with the operating system, browser, and assistive technologies +* describe related requirements for developers to write code for user interface components to be entered, operated, and exited using the keyboard only -{%- comment -%} +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +* Reflect on standard keyboard conventions. For example, use of the tab to move through interactive controls, use of the arrow keys to move through lists items, and use of the Enter key to select an item. Explain that these need to be preserved as much as possible when designing custom functionality, and custom keyboard interaction should be defined when these standard conventions are not enough to achieve the goals of the user interface. Explain that defining keyboard interaction is a designer's responsibility, whereas implementing such interaction is a responsibility shared with the developer. is a responsibility +* Present some examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys. Explain that these keystrokes should be avoided wherever possible. + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +* Practice — Present students with a user interface that can be interacted only with the mouse and ask them to define keyboard interaction patterns. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions wherever possible. + +### Topic: Gestures and Animations + +#### Learning Outcomes for Topic + +Students should be able to: + +* design user interfaces that support alternatives to device or user motion such as shaking, by using user interface components that do not require motion +* design user interfaces that support disabling response to motion to prevent accidental actuation, such as undoing an action by shaking a device +* design user interfaces that support alternatives to multi-pointer gestures (such as swipe or pinch) using single pointer activation +* design user interfaces that support undoing or aborting an action carried out with path-based operations #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: +* Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments cannot perform such gestures, thus user interfaces need to have alternatives that do ont require motion for these gestures. +* Show examples of gestures such as swipe or ping. Explain that users with mobility impairments cannot perform such gestures, thus user interfaces need to have alternatives that do not require swiping or pinching to perform an action. +* Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events, so user interface need to support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. + #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: [To be developed.] -{%- endcomment -%} - ### Topic: Labels and Instructions #### Learning outcomes for Topic @@ -86,31 +117,28 @@ Students should be able to: * design user interfaces that allow to position labels where users expect them, for example * provide instructions about which input fields are required by: * including information about each of the required form fields before the form control - * including text, icons, and color in the label of each of the required form fields that indicates that they are required -* provide clear instructions about changes in context that happen when there is a change on a control before the control, for example when launching a new window when the user checks a check box or selects a list item + * including color, text, and visual cues in the label of each of the required form fields that indicates that they are required +* provide clear instructions about changes in context before the control that originates such changes * provide overall instructions about existing time limits in a form and about how they can be turned off, adjusted, or extended * provide clear instructions about the current step and about the total number of steps involved in a multi-step form * identify related requirements for developers to code labels and instructions appropriately -{%- comment -%} - #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: * Show examples of different interactive components, such as buttons, links, or widgets, and emphasize that each should have a clear name that allows to identify its purpose. For reference on how to provide names for different user interface components, see -* Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. FOr example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. For references on how to place labels for form fields, see -* Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several mechanisms, including color, text, or icons. For references on how to communicate that form fields are required, see -* Discuss reasons for implementing time limits, such as exams or security purposes. Explain that instructions need to be provided so that users are aware of the time limits, and mechanisms need to be put in place to stop, adjust, or extend time limits. Explain that providing the instructions is a responsibility of the designer, whereas implementing mechanisms to stop, extend, or adjust time limits is a responsibility shared with the developer. -*( Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. +* Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. For references on how to place labels for form fields, see +* Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several mechanisms, including color, text, and other visual cues. For references on how to communicate that form fields are required, see +* Present examples of time limits, such as those warning about session expirations. Explain that instructions need to be provided so that users are aware of the time limits, and mechanisms need to be put in place to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a responsibility of the designer, whereas implementing mechanisms to stop, extend, or adjust time limits is a responsibility shared with the developer. +* Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -[To be developed.] - -{%- endcomment -%} +* Practical — Present students with a form fields and ask them to define labels for each. Assess how students provide clear and descriptive names for each of the form fields. +* Practical — Give students a form field and ask them to provide the necessary instructions for users to understand and fill in the form. Assess how sutdents provide clear and concise instructions. ### Topic: Feedback and Notifications @@ -124,48 +152,19 @@ Students should be able to: * design user interfaces that support mechanisms to queue and prioritize application notifications coming from different interactive user interface components, such as form fields and custom widgets * describe related requirements for developers to code notification messages appropriately -{%- comment -%} - #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: * Show examples of different mechanisms to communicate notifications, such as through text messages, haptic and audio feedback, and pop up windows. * Demonstrate different types of error messages and explain why it is necessary to communicate the specific field where the error has occurred and, if possible, provide suggestions for users to correct the error. -* Show examples of overlapping notifications in the context of a web applications. Explain that some users may find it daunting to process several notifications at the same time, so there should be a mechanism that allows to prioritize notifications based on their relevance. +* Show examples of overlapping notifications in the context of web applications. Explain that some users may find it daunting to process several notifications at the same time, so there should be a mechanism that allows to prioritize notifications based on their relevance. #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -[To be developed.] - -### Topic: Gestures and Animations - -#### Learning Outcomes for Topic - -Students should be able to: - -* design user interfaces that support alternatives to device or user motion such as shaking, by using user interface components that do not require motion -* design user interfaces that support disabling response to motion to prevent accidental actuation, such as undoing an action by shaking a device -* create designs that support alternatives to multi-pointer gestures (such as swipe or pinch) using single pointer activation -* design user interfaces with down events on single pointer gestures that: - * do not perform any action, or - * have available mechanisms to abort or undo any action carried on - -#### Teaching Ideas for Topic - -Optional ideas to teach the learning outcomes: - -[To be developed.] - -#### Ideas to Assess Knowledge for Topic - -Optional ideas to support assessment: - -[To be developed.] - -{%- endcomment -%} +* Practical — Present students with a form field submission containing errors and ask them to provide notifications about each wrong form fields, together with suggestions for corrections whenever possible. Assess how sutdents provide adequate error messages for each of the wrong fields and how they provide suggestions for corrections whenever possible. ## Ideas to Assess Knowledge for Module diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 4824a4132..94140ebcf 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -24,6 +24,10 @@ navigation: Courses based on this module should: +* explain strategies that people with disabilities use to access multimedia contents, such as audio and video +* explain accessibility requirements for multimedia content, such as captions, sign language, and audio descriptions + + [To be developed.] ## Learning Outcomes for Module @@ -32,7 +36,7 @@ Students should be able to: * identify accessibility requirements for different types of audio or video content * design user interfaces that consider placement of alternatives to multimedia content, such as transcripts for audio and audio described content, -* design user interfaces with mechanisms to switch transcripts and audio described content on or off +* design user interfaces with that support switching transcripts and audio described content on or off * design user interfaces that consider accessibility implications of images and graphics with decorative purposes * design user interfaces with mechanisms to pause, stop, and hide any moving and auto-updating content, including animations and carousels * design user interfaces with mechanisms to stop or control the volume of auto-playing audio @@ -55,29 +59,24 @@ Topics to achieve the learning outcomes: Students should be able to -* identify the different types of multimedia content, such as audio and video, and relate them to their corresponding sensory characteristic -* identify the different types of time-based multimedia content, such as pre-recorded and live audio and video -* identify and describe different types of synchronized media, for example a dialog in a movie -* create designs that allow to provide text alternatives for prerecorded audio-only content that presents equivalent information -* create designs that allow to provide either a text alternative or an audio track for a prerecorded video-only content that presents equivalent information +* identify and distinguish the different types of multimedia content, such as pre-recorded versus live, synchronous versus asynchronous audio and video +* create designs that support equivalent text alternatives for prerecorded audio-only content +* create designs that support text alternatives and audio track for a prerecorded video-only content that presents equivalent information * create designs that allow to provide captions and audio descriptions for any prerecorded and live audio content in synchronized media * create designs that allow to provide sign language interpretation for all prerecorded audio content in synchronized media -{%- comment -%} - #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -[To be developed.] +* Show examples of captions. Explain that these are needed for people who cannot hear the audiok, and they can be very useful in other situations. Explain that identifying the situations where captions are needed is a designer's responsibility, whereas providing such captions is a responsibility shared with the content author. For reference on how to provide captions, see +*( Show examples of audio described content. Explain that it is needed for people who cannot see the video. Explain that identifying the situations where audio dewscribed content is needes is a designer's responsibility, whereas providing the audio description is a responsibility shared with the content author.For references on how to provide audio descriptions, see #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -[To be developed.] - -{%- endcomment -%} +* Short Answer Questions — Give students some pieces of multimedia contnet and ask them whether or not they should contain captions and audio descriptions. Assess students' understanding of the requirements for alternatives to multimedia content. ### Topic: Movement and Animations @@ -85,33 +84,21 @@ Optional ideas to support assessment: Students should be able to: -* create designs that allow to pause, stop, or hide any content that blinks, moves, or auto-updates -* ensure flashing content is below the general flash and red flash thresholds -* create designs that allow to provide content that does not flash more than three times in a second -* create designs that allow to disable motion animation triggered by interaction, such as additional animations when scrolling -* create designs that support mechanisms to stop or control the volume of any audio that plays automatically for more than 3 seconds -* create designs that prevent changes of context unless the user is aware of them or has explicitly requested such changes - -{%- comment -%} +* design user interfaces that support pausing, stopping, or hiding any content that blinks, moves, or auto-updates +* design user interfaces with flashing content that is below the general flash and red flash thresholds +* design user interfaces that allow to provide content that does not flash more than three times in a second +* design user interfaces that support disabling motion animation triggered by interaction, such as additional animations when scrolling +* design user interfaces that support stopping or controling the volume of any audio that plays automatically for more than 3 seconds +* design user interfaces that prevent changes of context unless the user is aware of them or has explicitly requested such changes #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of different foreground and background combinations. Explain how contrast ratios between foreground and background allow users to perceive content and distinguish components from one another. For references on contrast ratios , see @@@ -* Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios need to be at least 4.5:1. For references on how to apply contrast ratios to text (including images of text), see @@@ -* @@@ -* Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. For techniques on how to add contrast ratios for graphics and interface components, see@@@ - #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -* Short Answer Questions — Give students a set of user interface components and ask them what the contrast ration should be. Assess how students understand and distinguish contrast ratios for different user interface components. -* Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing - -{%- endcomment -%} - ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 9b6c93470..0080633eb 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -24,8 +24,8 @@ navigation: Courses based on this module should: -* introduce strategies that people with disabilities use to navigate multi page websites and applications -* explain some behaviors, visual affordances, and interaction patterns of menus and relate them to accessibility +* explain strategies that people with disabilities use to navigate multi page websites and applications +* present some behaviors, visual affordances, and interaction patterns of menus that relate to accessible design ## Learning Outcomes for Module @@ -33,12 +33,14 @@ Students should be able to: * explain strategies that people with disabilities use to navigate multipage websites and applications * design user interfaces that support different types of navigations, including menus, breadcrumb trails, tables of contents, and site maps -* define keyboard, mouse, and touch interaction for menus and other navigational mechanisms -* provide clear and consistent visual cues for navigational mechanisms, including menus, menu item states, and other navigational mechanisms +* define keyboard, mouse, and tactile interactions for menus and other navigation mechanisms +* provide clear and consistent visual cues for menus, menu item states, and other navigation mechanisms * define blocks of repeated content and coordinate with developers to implement mechanisms that bypass such blocks * identify related requirements for developers to: - * implement keyboard, mouse, and touch interactions for navigational mechanisms - * implement clear and descriptive names for navigational mechanisms + * implement keyboard, mouse, and tactile interactions for navigation mechanisms + * implement clear and descriptive names for navigation mechanisms + +{% include excol.html type="all" %} ## Competencies @@ -65,6 +67,7 @@ Skills required for this module: * [WCAG Success Criterion 1.3.1 Info And Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) * [WCAG 2 Success Criterion 2.4.1 Bypass Blocks](https://www.w3.org/WAI/WCAG21/quickref/#bypass-blocks) * [WCAG 2 Success Criterion 2.4.5 Multiple Ways](https://www.w3.org/WAI/WCAG21/quickref/#multiple-ways) + * [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) * [WCAG 2 Success Criterion 2.4.8 Location](https://www.w3.org/WAI/WCAG21/quickref/#location) * [WCAG 2 Success Criterion 3.2.3 Consistent Navigation](https://www.w3.org/WAI/WCAG21/quickref/#consistent-navigation) @@ -80,15 +83,15 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Explain menu conventions that relate to accessibility, such as clear and consistent styling to convey menu states, and different patterns for mouse, keyboard, and touch interactions. +Explain menu conventions that relate to accessibility, such as clear and consistent styling to convey menu states. Introduce patterns for mouse, keyboard, and tactile interaction with menus. #### Learning Outcomes for Topic Students should be able to: * identify and describe uses of different types of menus, for example to navigate across web pages, to select categories from a crowded web page, and to navigate across applications -* provide visual cues for menus that allow to distinguish them from other components, and consistent styling for menu identification across a set of web pages -* define mouse, keyboard, and touch interactions within menus +* provide visual cues for menus to distinguish them from other components, and consistent styling for menu identification across a set of web pages +* define mouse, keyboard, and tactile interactions within menus * design user interfaces that communicate the state of menu items using distinguishable and consistent styles * identify related requirements for developers to implement semantics for different menu states and properties, such as open, closed, expanded, or collapsed @@ -97,22 +100,25 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of different types of menus, such as navigational, fly-out, and application menus. Explain the different scenarios where each of them can be used. For references on the different types of menus and their uses, see @@@ -* Demonstrate menu interaction using different input devices, such as keyboard, mouse, and touch. Explain that users operate menus with all of these input methods. For example, activating a menu option by tapping, pressing the Enter key, or clicking it with the mouse. -* Show examples of different menu interaction patterns, such as expanding an collapsing submenu items. Explain that these patterns need to support interaction with the keyboard, mouse, and touch as well. Emphasize that the states of these menu items need to be communicated using visual cues and semantics. Explain that providing the visual cues is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. +* Demonstrate menu interaction using different input devices, such as keyboard, mouse, and tactile. For example, activating a menu option by tapping, pressing the Enter key, and mouse clicking. Explain that defining the interactions is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. +* Show examples of different menu states, such as expanded, collapsed, open, and closed menu and submenu items. Emphasize that the states of these menu items need to be communicated using visual cues as well as semantics. Explain that providing the visual cues is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment. -* Practical — Students design mouse, keyboard, and touch interactions for menus. for example how to open, navigate, activate, and close such menus using the mouse, keyboard, and touch. Assess how students understand the need for different interaction patterns based on the input method in use. +* Practical — Students define mouse, keyboard, and tactile interactions for menus. for example how to open, navigate, activate, and close such menus using the mouse, keyboard, and touch. Assess how students understand the need for different interaction patterns based on the input method in use. +* Practical — Present students with different menu states, such as expanded, collapsed, open, and closed, and ask them to provide visual cues to distinguish them from one another. Assess how students communicate visually the state of menus and menu items. {% include excol.html type="end" %} {% include excol.html type="start" %} -### Topic: Other Navigational Mechanisms +### Topic: Other Navigation Mechanisms + +{% include excol.html type="middle" %} -Introduce other navigational mechanisms that may be used depending on the characteristics of the website or application. Emphasize that there should be multiple ways to reach a specific web page or application view, but that it is not compulsory to use every single navigational mechanisms described. +Introduce other navigation mechanisms that may be used depending on the characteristics of the website or application. Emphasize that there should be multiple ways to reach a specific web page or application view, but that it is not required to use every single navigation mechanisms described. #### Learning Outcomes for Topic @@ -123,7 +129,7 @@ Students should be able to: * a link at the beginning of a block of repeated content to go to the end of the block * links at the top of the page that go to each area of the content * an expandable and collapsible menu to make it easier for users to skip the menu -* assess the need for other navigational mechanisms, such as breadcrumb trails, tables of contents, and sitemaps depending on the characteristics of the user interface +* assess the need for other navigation mechanisms, such as breadcrumb trails, tables of contents, and sitemaps depending on the characteristics of the user interface * design user interfaces that support breadcrumb trails to provide information about the user's location in a set of web pages * design user interfaces that support site maps to provide an overview of the entire website * design user interfaces that support tables of contents to give an overview of the whole website or document and to allow users to go to specific parts of the content @@ -141,10 +147,14 @@ Optional ideas to teach the learning outcomes: Optional ideas to support assessment: -* Practical — Students define the block of repeated content within a website and coordinate with developers to provide a way for users to bypass that block. Assess how students understand the concept of block of repeated content and how they provide a mechanism to bypass it. -* Practical — Present students with an interface and ask them to provide multiple ways to navigate across the website. Asses how students provide multiple navigational mechanisms where appropriate, such as tables of contents and sitemaps. +* Practical — Students define the block of repeated content within a website and coordinate with developers to provide a way for users to bypass that block. Assess how students identify blocks of repeated content and how they provide a mechanism to bypass it. +* Practical — Present students with an interface and ask them to provide multiple ways to navigate across the website. Assess how students provide multiple navigation mechanisms where appropriate, such as tables of contents and sitemaps. * Practice — Present students with a second-level web page within a website and ask them to provide a breadcrumb trail for users to understand where a page is located with respect to the whole website. Assess how students provide a breadcrumb trail. +{% include excol.html type="end" %} + +{% include excol.html type="all" %} + ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: @@ -155,5 +165,8 @@ Optional ideas to support assessment: Suggested resources to support your teaching: -[To be developed.] - +* @@@ +* [Menus (WAI Web Accessibility Tutorials)](https://www.w3.org/WAI/tutorials/menus/) — Shows how to develop navigational mechanisms that are accessible to people with disabilities. +* [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. +* [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. From b988c6f18b688ceb8619b2fa618cabbfc12694d9 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 24 May 2021 11:48:23 +0200 Subject: [PATCH 108/416] Fixing nav --- content/designer/designer-modules.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index ab01eea59..5114dd13b 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -19,7 +19,7 @@ parent_in_h1: name: title navigation: previous: /curricula/developer-modules/rich-applications/ - next: /curricula/designer-modules/flexible-and-responsive-design/ + next: /curricula/designer-modules/understanding-and-involving-users/ --- ## Introduction From 3a8795481e24f0c59e35a1b11e93a97cbaf8f05d Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 24 May 2021 12:42:10 +0200 Subject: [PATCH 109/416] updates to modules and topics --- content/designer/flexible-and-responsive-design.md | 6 +++--- content/designer/images-and-graphics.md | 6 +++--- content/designer/information-design.md | 2 +- content/designer/interaction-and-feedback.md | 12 ++++++------ content/designer/multimedia-and-animations.md | 8 ++++---- content/designer/navigation.md | 8 ++++---- .../designer/understanding-and-involving-users.md | 2 +- 7 files changed, 22 insertions(+), 22 deletions(-) diff --git a/content/designer/flexible-and-responsive-design.md b/content/designer/flexible-and-responsive-design.md index 6b610fe38..1b0ec2d0f 100644 --- a/content/designer/flexible-and-responsive-design.md +++ b/content/designer/flexible-and-responsive-design.md @@ -105,8 +105,8 @@ Explain how people with disabilities rely on different style properties, such as Students should be able to: * design user interfaces with clear and distinguishable styles for different components, such as links, buttons, form elements, or texts -* design user interfaces with font sizes that allow content readability -* design user interfaces with adequate spacing to support readability +* design user interfaces with font sizes that enhance content readability +* design user interfaces with adequate spacing to support readability and content identification * design user interfaces with text cues to convey information provided through vision only, such as an asterisk to convey required form fields in a form * design user interfaces with other visual cues in addition to color, for example using different patterns, shapes, and icons @@ -187,7 +187,7 @@ Optional ideas to teach the learning outcomes: * Show examples of different user interfaces that support customizing line height as well as spacing between paragraphs, words, and letters to support readability. * Explain that people with low vision often need to resize text to be able to read it properly. This includes resizing settings in the assistive technology, browser, and operating system. * Show examples of user interfaces showing up in both portrait and landscape modes. Explain that the ability to show an interface both in portrait and landscape is crucial for people who cannot change their device orientation due to mobility impairments. -* Show examples of different tap targets, and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that tap targets need to be large enough to accommodate different people's needs. +* Show examples of different tap targets and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that tap targets need to be large enough to accommodate different people's needs. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 9116a0b39..7fc581e3f 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -68,13 +68,13 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of borders and icons that do not convey function or information. Explain that they serve ornamental purposes. -* Provide examples of images and graphics that are necessary to understand the overall content, and explain that they have a contrast ratio requirement of at least 3:1. +* Provide examples of images and graphics that are necessary to understand the overall content and explain that they have a contrast ratio requirement of at least 3:1. #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -* Practical — Ask students to provide decorative images to illustrate a text article and ask them to ensure these icons are visible in different screen sizes and devicess. Assess how students understand the requirement for decorative images to have appropriate contrast ratios and to resize depending on the user needs and preferences. +* Practical — Ask students to provide decorative images to illustrate a text article and ask them to ensure these icons are visible in different screen sizes and devices. Assess how students understand the requirement for decorative images to have appropriate contrast ratios and to resize depending on the user needs and preferences. ### Topic: Text Alternatives @@ -104,7 +104,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to support assessment: * Practice — Give students a set of images conveying fiction, such as print or search buttons, and ask them to provide their corresponding text alternative. Assess how students identify images that convey function and provide their corresponding text alternative. -* Short Answer Questions — Present students with a situation where a human verification system needs to be used, and ask them to provide authentication alternatives for other sensory characteristics different than vision. Assess how students understand the need for providing human verification systems that rely on different sensory characteristics in addition to captcha. +* Short Answer Questions — Present students with a situation where a human verification system needs to be used and ask them to provide authentication alternatives for other sensory characteristics different than vision. Assess how students understand the need for providing human verification systems that rely on different sensory characteristics in addition to captcha. ## Ideas to Assess Knowledge for Module diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 5c1a7e43a..60b657b3c 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -127,7 +127,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of different types of information presented in tables. Explain that tables are used when there is a logical relationship between the information presented, for example when presenting a list of events with their date and venue. -* Refer back to [Module 2: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design) and explain that some users may require different ways of presenting tabular information. Explain that these include splitting complex tables into simpler ones, and using lists to group the logically related information. +* Refer back to [Module 2: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design) and explain that some users may require different ways of presenting tabular information. Explain that these include splitting complex tables into simpler ones and using lists to group the logically related information. * Show examples of table data cells and header cells. Discuss with students which of these cells should be the header and which should be the data cells. Emphasize that the relation between the table data cells and header cells needs to be perceived both visually and programmatically for users to understand the relationship between these two types of cells, and that clear styles should be provided. Explain that providing the styles is a designer's responsibility, whereas establishing the programmatic relationship is a responsibility shared with the developers. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 38427d9e4..d51187ab4 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -25,7 +25,7 @@ navigation: Courses based on this module should: * explain strategies that people with disabilities use to interact with and operate user interface components -* describe some accessibilty requirements related to keyboard interactions, input gesture, labels, instructions, notifications and feedback +* describe some accessibility requirements related to keyboard interactions, input gesture, labels, instructions, notifications, and feedback ## Learning Outcomes for Module @@ -97,7 +97,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments cannot perform such gestures, thus user interfaces need to have alternatives that do ont require motion for these gestures. +* Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments cannot perform such gestures, thus user interfaces need to have alternatives that do not require motion for these gestures. * Show examples of gestures such as swipe or ping. Explain that users with mobility impairments cannot perform such gestures, thus user interfaces need to have alternatives that do not require swiping or pinching to perform an action. * Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events, so user interface need to support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. @@ -138,7 +138,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to support assessment: * Practical — Present students with a form fields and ask them to define labels for each. Assess how students provide clear and descriptive names for each of the form fields. -* Practical — Give students a form field and ask them to provide the necessary instructions for users to understand and fill in the form. Assess how sutdents provide clear and concise instructions. +* Practical — Give students a form field and ask them to provide the necessary instructions for users to understand and fill in the form. Assess how students provide clear and concise instructions. ### Topic: Feedback and Notifications @@ -148,7 +148,7 @@ Students should be able to: * design user interfaces with notifications that are easy to understand and that can be distinguished from any other user interface component * provide meaningful and descriptive messages about errors, suggestions for corrections, successes, or any other event -* design user interfaces that allow to switch notifications on or off to allow notifications processing at the users pace +* design user interfaces that allow to switch notifications on or off to allow notifications processing at the users' pace * design user interfaces that support mechanisms to queue and prioritize application notifications coming from different interactive user interface components, such as form fields and custom widgets * describe related requirements for developers to code notification messages appropriately @@ -156,7 +156,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different mechanisms to communicate notifications, such as through text messages, haptic and audio feedback, and pop up windows. +* Show examples of different mechanisms to communicate notifications, such as through text messages, haptic and audio feedback, and popup windows. * Demonstrate different types of error messages and explain why it is necessary to communicate the specific field where the error has occurred and, if possible, provide suggestions for users to correct the error. * Show examples of overlapping notifications in the context of web applications. Explain that some users may find it daunting to process several notifications at the same time, so there should be a mechanism that allows to prioritize notifications based on their relevance. @@ -164,7 +164,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to support assessment: -* Practical — Present students with a form field submission containing errors and ask them to provide notifications about each wrong form fields, together with suggestions for corrections whenever possible. Assess how sutdents provide adequate error messages for each of the wrong fields and how they provide suggestions for corrections whenever possible. +* Practical — Present students with a form field submission containing errors and ask them to provide notifications about each wrong form fields, together with suggestions for corrections whenever possible. Assess how students provide adequate error messages for each of the wrong fields and how they provide suggestions for corrections whenever possible. ## Ideas to Assess Knowledge for Module diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 94140ebcf..ec188348e 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -69,14 +69,14 @@ Students should be able to Optional ideas to teach the learning outcomes: -* Show examples of captions. Explain that these are needed for people who cannot hear the audiok, and they can be very useful in other situations. Explain that identifying the situations where captions are needed is a designer's responsibility, whereas providing such captions is a responsibility shared with the content author. For reference on how to provide captions, see -*( Show examples of audio described content. Explain that it is needed for people who cannot see the video. Explain that identifying the situations where audio dewscribed content is needes is a designer's responsibility, whereas providing the audio description is a responsibility shared with the content author.For references on how to provide audio descriptions, see +* Show examples of captions. Explain that these are needed for people who cannot hear the audio, and that they are useful in other situations. Explain that identifying the situations where captions are needed is a designer's responsibility, whereas providing such captions is a responsibility shared with the content author. For reference on how to provide captions, see +*( Show examples of audio described content. Explain that it is needed for people who cannot see the video. Explain that identifying the situations where audio described content is needed is a designer's responsibility, whereas providing the audio description is a responsibility shared with the content author. For references on how to provide audio descriptions, see #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -* Short Answer Questions — Give students some pieces of multimedia contnet and ask them whether or not they should contain captions and audio descriptions. Assess students' understanding of the requirements for alternatives to multimedia content. +* Short Answer Questions — Give students some pieces of multimedia content and ask them whether or not they should contain captions and audio descriptions. Assess students' understanding of the requirements for alternatives to multimedia content. ### Topic: Movement and Animations @@ -88,7 +88,7 @@ Students should be able to: * design user interfaces with flashing content that is below the general flash and red flash thresholds * design user interfaces that allow to provide content that does not flash more than three times in a second * design user interfaces that support disabling motion animation triggered by interaction, such as additional animations when scrolling -* design user interfaces that support stopping or controling the volume of any audio that plays automatically for more than 3 seconds +* design user interfaces that support stopping or controlling the volume of any audio that plays automatically for more than 3 seconds * design user interfaces that prevent changes of context unless the user is aware of them or has explicitly requested such changes #### Teaching Ideas for Topic diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 0080633eb..d560f02b1 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -64,7 +64,7 @@ Skills required for this module: {% include excol.html type="middle" %} * Applied expertise in teaching: - * [WCAG Success Criterion 1.3.1 Info And Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) + * [WCAG Success Criterion 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) * [WCAG 2 Success Criterion 2.4.1 Bypass Blocks](https://www.w3.org/WAI/WCAG21/quickref/#bypass-blocks) * [WCAG 2 Success Criterion 2.4.5 Multiple Ways](https://www.w3.org/WAI/WCAG21/quickref/#multiple-ways) * [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) @@ -107,7 +107,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to support assessment. -* Practical — Students define mouse, keyboard, and tactile interactions for menus. for example how to open, navigate, activate, and close such menus using the mouse, keyboard, and touch. Assess how students understand the need for different interaction patterns based on the input method in use. +* Practical — Students define mouse, keyboard, and tactile interactions for menus. for example, how to open, navigate, activate, and close such menus using the mouse, keyboard, and touch. Assess how students understand the need for different interaction patterns based on the input method in use. * Practical — Present students with different menu states, such as expanded, collapsed, open, and closed, and ask them to provide visual cues to distinguish them from one another. Assess how students communicate visually the state of menus and menu items. {% include excol.html type="end" %} @@ -118,7 +118,7 @@ Optional ideas to support assessment. {% include excol.html type="middle" %} -Introduce other navigation mechanisms that may be used depending on the characteristics of the website or application. Emphasize that there should be multiple ways to reach a specific web page or application view, but that it is not required to use every single navigation mechanisms described. +Introduce other navigation mechanisms that may be used depending on the characteristics of the website or application. Emphasize that there should be multiple ways to reach a specific web page or application view, but that it is not required to use every single navigation mechanism described. #### Learning Outcomes for Topic @@ -140,7 +140,7 @@ Optional ideas to teach the learning outcomes: * Show examples of mechanisms to bypass blocks of repeated content, such as a link at the top of the page and the use of expandable and collapsible components. Explain that people using the keyboard only find it very frustrating to navigate through sets of repeated blocks of content, such as navigation bars or header contents. For references on how to provide a mechanism to bypass blocks of repeated content, see @@@ * Show examples of breadcrumb trails. Explain that they provide information about the user's location within the context of a set of websites. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see @@@ -* Show examples of site maps and explain that they serve the purpose of providing an overview of the whole site. Explain that some users rely on them to better understand the structure of the site and to more easily find its way through it. For references on how to provide a site map, see @@@ +* Show examples of site maps and explain that they serve the purpose of providing an overview of the whole site. Explain that some users rely on them to better understand the structure of the site and to find its way more easily through it. For references on how to provide a site map, see @@@ * Show examples of tables of contents, for example in an electronic book or document. Explain that they provide an overview of the whole document and allow navigation to specific parts of the content. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/understanding-and-involving-users.md b/content/designer/understanding-and-involving-users.md index 07a472928..7878a4fce 100644 --- a/content/designer/understanding-and-involving-users.md +++ b/content/designer/understanding-and-involving-users.md @@ -86,7 +86,7 @@ Refer back to [Foundation Module 2: People and Digital Technology](/curricula/fo Students should be able to: * describe the impact of including real people with disabilities in user research activities -* describe desktop research activities to be conducted in situations where it is not feasible to include real people with disabilities, such as asking for experts advice, or following documented best practices +* describe desktop research activities to be conducted in situations where it is not feasible to include real people with disabilities, such as asking for experts' advice, or following documented best practices * articulate and communicate the consequences of not involving people with disabilities, for example higher costs to implement accessibility at a later stage * describe the characteristics of potential participants in user research activities based on different factors, such as the type of disability and the level of skills using assistive technologies and adaptive strategies * identify related requirements for project managers and other team members to include accessibility in the overall project requirements From 3ab3b645a5bc10f8d1c51f3c7ec5017d103c16cf Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 25 May 2021 12:25:15 +0200 Subject: [PATCH 110/416] Fixing markup --- content/designer/information-design.md | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 60b657b3c..e4d453212 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -37,7 +37,7 @@ Students should be able to: * the use of groups of form controls that share a common purpose * the use of filters to display small data subsets from a given data set * describe the use of labels and instructions to make information in forms more understandable -* identify related requirements for developers to programmatically associate text alternatives, headings, table header and data cells, and form labels and instructions, to their corresponding control +* identify related requirements for developers to programmatically associate text alternatives, headings, table header cells and data cells, and form labels and instructions, to their corresponding control {% include excol.html type="all" %} @@ -52,6 +52,8 @@ Skills required for this module: {% include excol.html type="middle" %} * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) +* [Module 2: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design/) +* [Module 3: Navigation](/curricula/designer-mdoules/navigation/) {% include excol.html type="end" %} @@ -61,8 +63,11 @@ Skills required for this module: {% include excol.html type="middle" %} +* In-depth knowledge of: + * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Applied expertise in teaching: * [WCAG Success Criterion 3.3.2 Labels or Instructions](https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions) + * @@@ {% include excol.html type="end" %} @@ -118,7 +123,7 @@ Students should be able to: * identify uses of tables to present data that share a logical relationship * design user interfaces that support multiple ways of presenting tabular information, such as using several lists, or splitting a complex table into several simpler ones -* define table header and data cells, and provide clear and distinguishable styles for each +* define table header cells and data cells, and provide clear and distinguishable styles for each * identify related requirements for content authors to write table descriptions that provide information about what the table is about * identify related requirements for developers to programmatically associate table descriptions, data cells, and header cells with their corresponding table @@ -128,13 +133,13 @@ Optional ideas to teach the learning outcomes: * Show examples of different types of information presented in tables. Explain that tables are used when there is a logical relationship between the information presented, for example when presenting a list of events with their date and venue. * Refer back to [Module 2: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design) and explain that some users may require different ways of presenting tabular information. Explain that these include splitting complex tables into simpler ones and using lists to group the logically related information. -* Show examples of table data cells and header cells. Discuss with students which of these cells should be the header and which should be the data cells. Emphasize that the relation between the table data cells and header cells needs to be perceived both visually and programmatically for users to understand the relationship between these two types of cells, and that clear styles should be provided. Explain that providing the styles is a designer's responsibility, whereas establishing the programmatic relationship is a responsibility shared with the developers. +* Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells needs to be perceived both visually and programmatically for users to understand the relationship between these two types of cells, and that clear styles should be provided. Explain that providing the styles is a designer's responsibility, whereas establishing the programmatic relationship is a responsibility shared with the developers. #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -* Practical — Give students a set of tables and ask them to define their header and data cells. Assess how students understand the difference between header and data cells. +* Practical — Give students a set of tables and ask them to define their header cells and data cells. Assess how students understand the difference between header cells and data cells. * Practical — Present students with a set of tables and ask them to provide clear styles to distinguish data cells from header cells. Assess how students provide clear and distinguishable styles for header cells and data cells. {% include excol.html type="end" %} @@ -143,6 +148,8 @@ Optional ideas to support assessment: ### Topic: Grouping and Sorting Information +{% include excol.html type="middle" %} + #### Learning Outcomes for Topic Students should be able to: From c5ef3d54683215d18b3cda43b82a3a5354a72336 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 25 May 2021 12:29:34 +0200 Subject: [PATCH 111/416] Fixing markup --- content/designer/information-design.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index e4d453212..b11d8c68f 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -176,6 +176,8 @@ Optional ideas to support assessment: ### Topic: Data Visualization +{% include excol.html type="middle" %} + #### Learning Outcomes for Topic Students should be able to: @@ -184,18 +186,17 @@ Students should be able to: * create user interfaces that allow to use the keyboard to navigate to specific pieces of data * create user interfaces that allow customizing the results that are shown at a given time - #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -[To be developed]. +[To be developed.] #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -[To be developed]. +[To be developed.] {% include excol.html type="end" %} From 3ed1a73384abf6b55aae536a71bb824ca967cb9b Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 25 May 2021 12:33:03 +0200 Subject: [PATCH 112/416] Adding introductory paragraph --- content/designer/information-design.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index b11d8c68f..74c8433e0 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -53,7 +53,7 @@ Skills required for this module: * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * [Module 2: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design/) -* [Module 3: Navigation](/curricula/designer-mdoules/navigation/) +* [Module 3: Navigation](/curricula/designer-modules/navigation/) {% include excol.html type="end" %} @@ -178,6 +178,8 @@ Optional ideas to support assessment: {% include excol.html type="middle" %} +Show examples of how different groups of people visualize large amounts of data, such as a list of countries. Explain that some prefer filtering out data into smaller piece to better handle them, some other prefer to type the first letters of their desire option to select it more efficiently. + #### Learning Outcomes for Topic Students should be able to: From a1ff07d5c836392fdfdcb83bdba8165eb2d44380 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 25 May 2021 12:34:19 +0200 Subject: [PATCH 113/416] Adding missing excol all at the end --- content/designer/information-design.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 74c8433e0..500aa5fa2 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -202,6 +202,8 @@ Optional ideas to support assessment: {% include excol.html type="end" %} +{% include excol.html type="all" %} + ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: From cb81d4c216a5026906315ee304aeaf5456724b26 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 25 May 2021 12:43:27 +0200 Subject: [PATCH 114/416] Adding expand and collapse functionality --- content/designer/images-and-graphics.md | 44 +++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 7fc581e3f..8e1b5bf7c 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -40,18 +40,52 @@ Students should be able to: * identify related requirements for content authors to provide appropriate text alternatives for images included in the authoring phase * identify related requirements for content authors to present information as text wherever possible, instead of using images of text +{% include excol.html type="all" %} + ## Competencies Skills required for this module: [To be developed.] +{% include excol.html type="start" %} + +### Students + +{% include excol.html type="middle" %} + +* [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) +* [Module 2: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design/) +* [Module 3: Navigation](/curricula/designer-modules/navigation/) +* [Module 4: Information Design](/curricula/designer-modules/information-design/) + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + +### Instructors + +{% include excol.html type="middle" %} + +* In-depth knowledge of: + * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) +* Applied expertise in teaching: + * [WCAG Success Criterion 1.1.1 Non-Text Content](https://www.w3.org/WAI/WCAG21/quickref/#non-text-content) + * [WCAG Success Criterion 1.4.5 Images of Text](https://www.w3.org/WAI/WCAG21/quickref/#images-of-text) + * @@@ + +{% include excol.html type="end" %} + ## Topics to Teach Topics to achieve the learning outcomes: +{% include excol.html type="start" %} + ### Topic: Decorative Images +{% include excol.html type="middle" %} + Decorative images are those which convey no information or function and are used for ornamental purposes. Discuss examples of these types of images and explain accessibility requirements that these images have, such as contrast ratios and ability of the image to resize. #### Learning Outcomes for Topic @@ -76,8 +110,14 @@ Optional ideas to support assessment: * Practical — Ask students to provide decorative images to illustrate a text article and ask them to ensure these icons are visible in different screen sizes and devices. Assess how students understand the requirement for decorative images to have appropriate contrast ratios and to resize depending on the user needs and preferences. +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + ### Topic: Text Alternatives +{% include excol.html type="middle" %} + Explain several uses of text alternatives, such as to describe the function of a user interface component or to describe the images so that they can be understood without looking at them. Explain that describing the functions of user interface components is a designer's responsibility, whereas providing other text alternatives and descriptions is a responsibility shared with the content author. #### Learning Outcomes for Topic @@ -106,6 +146,10 @@ Optional ideas to support assessment: * Practice — Give students a set of images conveying fiction, such as print or search buttons, and ask them to provide their corresponding text alternative. Assess how students identify images that convey function and provide their corresponding text alternative. * Short Answer Questions — Present students with a situation where a human verification system needs to be used and ask them to provide authentication alternatives for other sensory characteristics different than vision. Assess how students understand the need for providing human verification systems that rely on different sensory characteristics in addition to captcha. +{% include excol.html type="end" %} + +{% include excol.html type="all" %} + ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: From fe6f49d0c3d4e0221e7bb1b322a82acc532dc8ac Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 25 May 2021 13:50:38 +0200 Subject: [PATCH 115/416] Updates to modules --- .../flexible-and-responsive-design.md | 10 +-- content/designer/images-and-graphics.md | 21 +++--- content/designer/interaction-and-feedback.md | 68 +++++++++++++++++-- content/designer/multimedia-and-animations.md | 58 +++++++++++++++- content/designer/navigation.md | 11 ++- .../understanding-and-involving-users.md | 2 +- 6 files changed, 141 insertions(+), 29 deletions(-) diff --git a/content/designer/flexible-and-responsive-design.md b/content/designer/flexible-and-responsive-design.md index 1b0ec2d0f..1b02f5e65 100644 --- a/content/designer/flexible-and-responsive-design.md +++ b/content/designer/flexible-and-responsive-design.md @@ -30,7 +30,7 @@ navigation: Courses based on this module should: * explain how people with disabilities use different screen sizes, screen configurations, break points, and style sheets to identify, distinguish, and process contents -* explain accessibility requirements that relate to color, layout, spacing, and position +* explain accessibility requirements for user interface components that relate to color, layout, spacing, and position ## Learning Outcomes for Module @@ -106,7 +106,7 @@ Students should be able to: * design user interfaces with clear and distinguishable styles for different components, such as links, buttons, form elements, or texts * design user interfaces with font sizes that enhance content readability -* design user interfaces with adequate spacing to support readability and content identification +* design user interfaces with adequate spacing to support readability and to help distinguish components from one another * design user interfaces with text cues to convey information provided through vision only, such as an asterisk to convey required form fields in a form * design user interfaces with other visual cues in addition to color, for example using different patterns, shapes, and icons @@ -116,7 +116,7 @@ Optional ideas to teach the learning outcomes: * Demonstrate the use of styles for distinguishing user interface components from one another, such as links, buttons, form elements, and texts. Explain how people rely on font sizes, spacing, and typography to distinguish components from one another. For references on how to apply distinguishable styles for user interface components, see @@@ * Demonstrate use of different font sizes and explain how they affect readability of the content. For reference on how to apply font sizes that allow content readability, see @@@ -* Show examples of different page layouts with and without adequate spacing. Explain how spacing allows to distinguish different pieces of content from one another. For references on how to apply adequate spacing, see @@@ +* Show examples of different page layouts with and without adequate spacing. Explain how spacing allows to distinguish different user interface components and pieces of content from one another. For references on how to apply adequate spacing, see @@@ * Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a store is open or closed. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. * Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so alternative methods to convey that information are required. For references on how to convey information without using color alone, see @@@ @@ -124,7 +124,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to support assessment: -* Practical — Students design a paper prototype with distinguishable styles that help perceive different contents. Assess how students use different style properties to make content perceivable and to distinguish contents from one another. +* Practical — Students design a paper prototype with distinguishable styles that help perceive different contents. Assess how students use different style properties to make content perceivable and to distinguish components from one another. * Practical &mdash: Give students examples of color alone used to provide information and ask them to provide text information and visual cues to supplement that information. Assess how students provide the necessary textual information and visual cues to supplement information provided exclusively with color. {% include excol.html type="end" %} @@ -193,7 +193,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to support assessment: -* Practice — Students design different paper prototypes with different interface layouts considering text resizing, line height, spacing between paragraphs, words, and letters. Assess how students consider text resizing, line height, and spacing between paragraphs, words, and letters while designing user interfaces. +* Practical — Students design different paper prototypes with different interface layouts considering text resizing, line height, spacing between paragraphs, words, and letters. Assess how students consider text resizing, line height, and spacing between paragraphs, words, and letters while designing user interfaces. {% include excol.html type="end" %} diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 8e1b5bf7c..8bec41379 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -34,7 +34,7 @@ Students should be able to: * explain how images affect processing of information, content identification, and understanding of functionality by people with disabilities * identify and describe different uses of images, including for informative, functional, and decorative purposes * provide appropriate text alternatives for graphical components included in the design phase, such as logos, links, and menu items -* design user interfaces with alternative methods to verify human interaction +* design user interfaces with alternative systems to verify captcha and other methods to verify human interaction * provide images with appropriate contrast ratios and ensure images resize as required * identify related requirements for developers to code images and text alternatives appropriately * identify related requirements for content authors to provide appropriate text alternatives for images included in the authoring phase @@ -46,8 +46,6 @@ Students should be able to: Skills required for this module: -[To be developed.] - {% include excol.html type="start" %} ### Students @@ -124,27 +122,26 @@ Explain several uses of text alternatives, such as to describe the function of a Students should be able to: -* identify and describe different uses of text alternatives, such as to describe function or to describe information conveyed in an image -* provide short text alternatives for controls and components that accept user input, for example search, print, and save buttons * identify situations where it is necessary to provide text alternatives that present equivalent information as that contained in the image +* provide short text alternatives for controls and components that accept user input, for example search, print, and save buttons * provide text alternatives that identify and describe the purpose of human verification systems, such as captcha -* manage the provision of several modalities of captcha that rely on different sensory characteristics, such as visual, auditory, and logical -* [in topic complex images] describe related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, such as diagrams or charts +* collaborate with other team members to implement several modalities of captcha that rely on other sensory characteristics apart from vision, such as visual, auditory, and logical +* describe related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, such as diagrams or charts #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of different images used to convey functionality, such as for printing, searching, or saving a document. Explain that it is necessary to provide and equivalent, succinct text alternative that explain the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see -* Show examples of different images that convey information, such as images to provide instructions, or to identify objects. Explain that such information needs to be provided using text alternatives, so that the purpose of the image can be understood without having to look at the image. Emphasize that these alternatives may require coordination between designers, developers, and content authors. For references on how to provide text alternatives for images, see -* Show examples of different verification systems, such as captcha, to identify human beings trying to access a service or system. Explain that these mechanisms need to support several sensory characteristics, such as visual, auditory, or cognitive. For references on how to provide accessible captcha, see +* Show examples of different images used to convey functionality, such as for printing, searching, or saving a document. Explain that it is necessary to provide and equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see @@@ +* Show examples of different images that convey information, such as images to provide instructions, or to identify objects. Explain that such information needs to be provided using text alternatives, so that the purpose of the image can be understood without having to look at the image. Emphasize that these alternatives may require coordination between designers, developers, and content authors. For references on how to provide text alternatives for images, see @@@ +* Show examples of different verification systems, such as captcha, to identify human beings trying to access a service or system. Explain that these mechanisms need to support several sensory characteristics, such as visual, auditory, or cognitive. For references on how to provide accessible captcha, see @@@ #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -* Practice — Give students a set of images conveying fiction, such as print or search buttons, and ask them to provide their corresponding text alternative. Assess how students identify images that convey function and provide their corresponding text alternative. -* Short Answer Questions — Present students with a situation where a human verification system needs to be used and ask them to provide authentication alternatives for other sensory characteristics different than vision. Assess how students understand the need for providing human verification systems that rely on different sensory characteristics in addition to captcha. +* Practice — Give students a set of images conveying function, such as print or search buttons, and ask them to provide their corresponding text alternative. Assess how students identify images that convey function and provide their corresponding text alternative. +* Short Answer Questions — Present students with a situation where a human verification system needs to be used and ask them to provide authentication alternatives for other sensory characteristics apart from vision. Assess how students understand the need for providing human verification systems that rely on different sensory characteristics in addition to captcha. {% include excol.html type="end" %} diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index d51187ab4..9de4f356e 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -25,7 +25,7 @@ navigation: Courses based on this module should: * explain strategies that people with disabilities use to interact with and operate user interface components -* describe some accessibility requirements related to keyboard interactions, input gesture, labels, instructions, notifications, and feedback +* describe some accessibility requirements related to keyboard interactions, input gestures, labels, instructions, notifications, and feedback ## Learning Outcomes for Module @@ -34,7 +34,7 @@ Students should be able to: * explain strategies that people with disabilities use to operate interactive user interface components * design user interfaces that support different input mechanisms, including mouse, touch, and keyboard * provide clear and distinguishable ways to identify interactive user interface components, including through naming and placement -* provide methods to help understand the context, information, and functionality of user interface components, including through textual instructions, color, and other visual cues icons +* provide methods to help understand the context, information, and functionality of user interface components, including through textual instructions, color, and other visual cues * provide meaningful and descriptive notifications about imminent time limits, status changes, and feedback from user input, including errors, suggestions for correction, and success messages * design user interfaces with meaningful sequence of interactive user interface components * define custom interaction patterns, such as where to place focus when a dialog is open and closed, and what the focus order should be within those dialogs @@ -42,24 +42,48 @@ Students should be able to: * identify related requirements for developers to programmatically associate properties of interactive user interface components, such as names, states, and instructions, to their corresponding component * identify related requirements for developers to write code for custom keyboard interactions that interactive user interface components may require +{% include excol.html type="all" %} + ## Competencies Skills required for this module: +{% include excol.html type="start" %} + +### Students + +{% include excol.html type="middle" %} + +* [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) +* Prior [Designer Modules](/curricula/designer-modules/) + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + ### Instructors +{% include excol.html type="middle" %} + * Applied expertise in teaching: - * [WCAG Success Criterion 2.3.1 Three Flashes or Below Threshold ](https://www.w3.org/WAI/WCAG21/quickref/#three-flashes-or-below-threshold) - * [WCAG Success Criterion 2.3.2 Three Flashes](https://www.w3.org/WAI/WCAG21/quickref/#three-flashes) + * @@@ -[To be developed.] +{% include excol.html type="end" %} ## Topics to Teach Topics to achieve the learning outcomes: +{% include excol.html type="start" %} + ### Topic: Keyboard Interaction +{% include excol.html type="middle" %} + +Discuss standard keyboard interactions, such as the use of the Tab, Enter, or arrow keys. Explain that if non-standard keyboard interactions are to be used, designers need to define them and collaborate with developers to implement them. + +{% include excol.html type="middle" %} + #### Learning Outcomes for Topic Students should be able to: @@ -82,7 +106,17 @@ Optional ideas to support assessment: * Practice — Present students with a user interface that can be interacted only with the mouse and ask them to define keyboard interaction patterns. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions wherever possible. -### Topic: Gestures and Animations +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + +### Topic: Gestures and Motion + +{% include excol.html type="middle" %} + +Discuss some gestures that require dragging and drawing specific shapes on a tactile screen. Explain that these are difficult for some people with mobility impairments. + +@@@ [Reference to motion] #### Learning Outcomes for Topic @@ -107,8 +141,16 @@ Optional ideas to support assessment: [To be developed.] +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + ### Topic: Labels and Instructions +{% include excol.html type="middle" %} + +Show examples of labels and instructions for form controls and custom widgets. Explain that they are essential for cognitive disabilities to understand and interact with these components. + #### Learning outcomes for Topic Students should be able to: @@ -140,8 +182,18 @@ Optional ideas to support assessment: * Practical — Present students with a form fields and ask them to define labels for each. Assess how students provide clear and descriptive names for each of the form fields. * Practical — Give students a form field and ask them to provide the necessary instructions for users to understand and fill in the form. Assess how students provide clear and concise instructions. +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + ### Topic: Feedback and Notifications +{% include excol.html type="middle" %} + +Show examples of notification messages. Explain that they need to be distinguishable by all users, including through visual cues and programmatically. + +Explain that applications may have different levels of priority when in the context of a complex application, so defining such levels of priority and which types of notifications each of them should contain is a designers responsibility. + #### Learning Outcomes for Topic Students should be able to: @@ -166,6 +218,10 @@ Optional ideas to support assessment: * Practical — Present students with a form field submission containing errors and ask them to provide notifications about each wrong form fields, together with suggestions for corrections whenever possible. Assess how students provide adequate error messages for each of the wrong fields and how they provide suggestions for corrections whenever possible. +{% include excol.html type="end" %} + +{% include excol.html type="all" %} + ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index ec188348e..c25646702 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -36,25 +36,63 @@ Students should be able to: * identify accessibility requirements for different types of audio or video content * design user interfaces that consider placement of alternatives to multimedia content, such as transcripts for audio and audio described content, -* design user interfaces with that support switching transcripts and audio described content on or off +* design user interfaces that support switching transcripts and audio described content on or off * design user interfaces that consider accessibility implications of images and graphics with decorative purposes * design user interfaces with mechanisms to pause, stop, and hide any moving and auto-updating content, including animations and carousels * design user interfaces with mechanisms to stop or control the volume of auto-playing audio * identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding media content * identify related requirements for content authors to provide appropriate text alternatives and audio descriptions for different types of media content, including video and audio +{% include excol.html type="all" %} + ## Competencies Skills required for this module: -[To be developed.] +{% include excol.html type="start" %} + +### Students + +{% include excol.html type="middle" %} + +* [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) +* [Module 2: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design/) +* [Module 3: Navigation](/curricula/designer-modules/navigation/) +* [Module 4: Information Design](/curricula/designer-modules/information-design/) + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + +### Instructors + +{% include excol.html type="middle" %} + +* In-depth knowledge of: + * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) +* Applied expertise in teaching: + * [WCAG Success Criterion 1.2.1 Audio-only and Video-only (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#captions-prerecorded0 + * [WCAG Success Criterion 1.2.2 Captions (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#captions-prerecorded) + * [WCAG Success Criterion 1.2.3 Audio Description or Media Alternative (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#audio-description-or-media-alternative-prerecorded) + * [WCAG Success Criterion 1.4.4 Captions (Live)](https://www.w3.org/WAI/WCAG21/quickref/#captions-live) + * [WCAG Success Criterion 1.2.5 Audio Descriptions (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#audio-description-prerecorded) + * [WCAG Success Criterion 2.3.1 Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG21/quickref/#three-flashes-or-below-threshold) + * @@@ + +{% include excol.html type="end" %} ## Topics to Teach Topics to achieve the learning outcomes: +{% include excol.html type="start" %} + ### Topic: Captions and Audio Descriptions +{% include excol.html type="middle" %} + +Audio descriptions are essential for people who cannot see the video. Captions and text alternatives are essential for people who cannot hear the audio. + #### Learning Outcomes for Topic Students should be able to @@ -78,8 +116,16 @@ Optional ideas to support assessment: * Short Answer Questions — Give students some pieces of multimedia content and ask them whether or not they should contain captions and audio descriptions. Assess students' understanding of the requirements for alternatives to multimedia content. +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + ### Topic: Movement and Animations +Show examples of different types of animations. Explain that they can cause seizures or physical reactions for some people, so additional requirements when designing animations should be considered. + +{% include excol.html type="middle" %} + #### Learning Outcomes for Topic Students should be able to: @@ -95,10 +141,18 @@ Students should be able to: Optional ideas to teach the learning outcomes: +[To be developed]. + #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: +[To be developed]. + +{% include excol.html type="end" %} + +{% include excol.html type="all" %} + ## Ideas to Assess Knowledge for Module Optional ideas to support assessment: diff --git a/content/designer/navigation.md b/content/designer/navigation.md index d560f02b1..a7bcb7559 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -63,6 +63,8 @@ Skills required for this module: {% include excol.html type="middle" %} +* In-depth knowledge of: + * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Applied expertise in teaching: * [WCAG Success Criterion 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) * [WCAG 2 Success Criterion 2.4.1 Bypass Blocks](https://www.w3.org/WAI/WCAG21/quickref/#bypass-blocks) @@ -70,6 +72,7 @@ Skills required for this module: * [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) * [WCAG 2 Success Criterion 2.4.8 Location](https://www.w3.org/WAI/WCAG21/quickref/#location) * [WCAG 2 Success Criterion 3.2.3 Consistent Navigation](https://www.w3.org/WAI/WCAG21/quickref/#consistent-navigation) + * @@@ {% include excol.html type="end" %} @@ -92,8 +95,9 @@ Students should be able to: * identify and describe uses of different types of menus, for example to navigate across web pages, to select categories from a crowded web page, and to navigate across applications * provide visual cues for menus to distinguish them from other components, and consistent styling for menu identification across a set of web pages * define mouse, keyboard, and tactile interactions within menus +* design user interfaces that support appropriate sizing of menus and menu items to fit all text in different viewports and screen configurations * design user interfaces that communicate the state of menu items using distinguishable and consistent styles -* identify related requirements for developers to implement semantics for different menu states and properties, such as open, closed, expanded, or collapsed +* identify related requirements for developers to implement semantics for different menu states and properties, such as hover, focus, current, active, and visited #### Teaching Ideas @@ -101,14 +105,15 @@ Optional ideas to teach the learning outcomes: * Show examples of different types of menus, such as navigational, fly-out, and application menus. Explain the different scenarios where each of them can be used. For references on the different types of menus and their uses, see @@@ * Demonstrate menu interaction using different input devices, such as keyboard, mouse, and tactile. For example, activating a menu option by tapping, pressing the Enter key, and mouse clicking. Explain that defining the interactions is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. -* Show examples of different menu states, such as expanded, collapsed, open, and closed menu and submenu items. Emphasize that the states of these menu items need to be communicated using visual cues as well as semantics. Explain that providing the visual cues is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. +* Show examples of menu and menu items that contain large texts. Explain that, when used in smaller viewports or with different screen configurations, these text need to resize so that they are perceived in their entirety. +* Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Emphasize that the states of these menu items need to be communicated using visual cues as well as semantics. Explain that providing the visual cues is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment. * Practical — Students define mouse, keyboard, and tactile interactions for menus. for example, how to open, navigate, activate, and close such menus using the mouse, keyboard, and touch. Assess how students understand the need for different interaction patterns based on the input method in use. -* Practical — Present students with different menu states, such as expanded, collapsed, open, and closed, and ask them to provide visual cues to distinguish them from one another. Assess how students communicate visually the state of menus and menu items. +* Practical — Present students with different menu states, such as hover, focus, current, active, and visited, and ask them to provide visual cues to distinguish them from one another. Assess how students communicate visually the state of menus and menu items. {% include excol.html type="end" %} diff --git a/content/designer/understanding-and-involving-users.md b/content/designer/understanding-and-involving-users.md index 7878a4fce..67e8f7b99 100644 --- a/content/designer/understanding-and-involving-users.md +++ b/content/designer/understanding-and-involving-users.md @@ -144,7 +144,7 @@ Optional ideas to support assessment: * Short answer questions — Ask students about three different types of non-functional requirements included in accessibility standards, such as WCAG2. Assess how students understand non-functional requirements included in accessibility standards. * Short Answer Questions — Ask students about three types of functional requirements that are related to people with disabilities. Assess how students understand functional requirements that relate to people with disabilities. -* Practical — Students create several personas different types of disabilities and different levels of skills using assistive technologies and adaptive strategies. Assess how students understand diversity among people with disabilities. +* Practical — Students create several personas that include different types of disabilities and different levels of skills using assistive technologies and adaptive strategies. Assess how students understand diversity among people with disabilities. * Practical — Students create several scenarios that include use of the product with different assistive technologies and adaptive strategies. Assess how students understand different scenarios that include use of the product with different assistive technologies and adaptive strategies. {% include excol.html type="end" %} From 9a33cc0ca6e52f656118ac1de7e8318605b2c3a3 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 25 May 2021 14:09:32 +0200 Subject: [PATCH 116/416] Updatesr to modules --- content/designer/interaction-and-feedback.md | 8 +++----- content/designer/multimedia-and-animations.md | 10 +++------- 2 files changed, 6 insertions(+), 12 deletions(-) diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 9de4f356e..814ac2709 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -24,7 +24,7 @@ navigation: Courses based on this module should: -* explain strategies that people with disabilities use to interact with and operate user interface components +* explain strategies that people with disabilities use to operate interactive user interface components * describe some accessibility requirements related to keyboard interactions, input gestures, labels, instructions, notifications, and feedback ## Learning Outcomes for Module @@ -82,8 +82,6 @@ Topics to achieve the learning outcomes: Discuss standard keyboard interactions, such as the use of the Tab, Enter, or arrow keys. Explain that if non-standard keyboard interactions are to be used, designers need to define them and collaborate with developers to implement them. -{% include excol.html type="middle" %} - #### Learning Outcomes for Topic Students should be able to: @@ -97,8 +95,8 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Reflect on standard keyboard conventions. For example, use of the tab to move through interactive controls, use of the arrow keys to move through lists items, and use of the Enter key to select an item. Explain that these need to be preserved as much as possible when designing custom functionality, and custom keyboard interaction should be defined when these standard conventions are not enough to achieve the goals of the user interface. Explain that defining keyboard interaction is a designer's responsibility, whereas implementing such interaction is a responsibility shared with the developer. is a responsibility -* Present some examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys. Explain that these keystrokes should be avoided wherever possible. +* Reflect on standard keyboard conventions. For example, use of the tab to move through interactive controls, use of the arrow keys to move through list items, and use of the Enter key to select an item. Explain that these need to be preserved as much as possible when designing custom functionality, and custom keyboard interaction should be defined when these standard conventions are not enough to achieve the goals of the user interface. Explain that defining keyboard interaction is a designer's responsibility, whereas implementing such interaction is a responsibility shared with the developer. +* Present some examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided wherever possible. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index c25646702..1696313ad 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -27,9 +27,6 @@ Courses based on this module should: * explain strategies that people with disabilities use to access multimedia contents, such as audio and video * explain accessibility requirements for multimedia content, such as captions, sign language, and audio descriptions - -[To be developed.] - ## Learning Outcomes for Module Students should be able to: @@ -37,7 +34,6 @@ Students should be able to: * identify accessibility requirements for different types of audio or video content * design user interfaces that consider placement of alternatives to multimedia content, such as transcripts for audio and audio described content, * design user interfaces that support switching transcripts and audio described content on or off -* design user interfaces that consider accessibility implications of images and graphics with decorative purposes * design user interfaces with mechanisms to pause, stop, and hide any moving and auto-updating content, including animations and carousels * design user interfaces with mechanisms to stop or control the volume of auto-playing audio * identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding media content @@ -108,7 +104,7 @@ Students should be able to Optional ideas to teach the learning outcomes: * Show examples of captions. Explain that these are needed for people who cannot hear the audio, and that they are useful in other situations. Explain that identifying the situations where captions are needed is a designer's responsibility, whereas providing such captions is a responsibility shared with the content author. For reference on how to provide captions, see -*( Show examples of audio described content. Explain that it is needed for people who cannot see the video. Explain that identifying the situations where audio described content is needed is a designer's responsibility, whereas providing the audio description is a responsibility shared with the content author. For references on how to provide audio descriptions, see +* Show examples of audio described content. Explain that it is needed for people who cannot see the video. Explain that identifying the situations where audio described content is needed is a designer's responsibility, whereas providing the audio description is a responsibility shared with the content author. For references on how to provide audio descriptions, see #### Ideas to Assess Knowledge for Topic @@ -122,10 +118,10 @@ Optional ideas to support assessment: ### Topic: Movement and Animations -Show examples of different types of animations. Explain that they can cause seizures or physical reactions for some people, so additional requirements when designing animations should be considered. - {% include excol.html type="middle" %} +Show examples of different types of animations. Explain that they can cause seizures or physical reactions for some people, so additional requirements when designing animations should be considered. + #### Learning Outcomes for Topic Students should be able to: From f5ef57a25d7beac3b649227472acbb1aae7926a4 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 25 May 2021 14:17:50 +0200 Subject: [PATCH 117/416] Updating modules --- content/designer/interaction-and-feedback.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 814ac2709..9e4ef49b2 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -131,7 +131,7 @@ Optional ideas to teach the learning outcomes: * Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments cannot perform such gestures, thus user interfaces need to have alternatives that do not require motion for these gestures. * Show examples of gestures such as swipe or ping. Explain that users with mobility impairments cannot perform such gestures, thus user interfaces need to have alternatives that do not require swiping or pinching to perform an action. -* Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events, so user interface need to support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. +* Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events, thus user interfaces need to support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. #### Ideas to Assess Knowledge for Topic @@ -154,7 +154,7 @@ Show examples of labels and instructions for form controls and custom widgets. E Students should be able to: * provide names to help users understand the purpose and intent of interactive user interface components -* design user interfaces that allow to position labels where users expect them, for example +* design user interfaces that allow to position labels where users expect them * provide instructions about which input fields are required by: * including information about each of the required form fields before the form control * including color, text, and visual cues in the label of each of the required form fields that indicates that they are required @@ -190,7 +190,7 @@ Optional ideas to support assessment: Show examples of notification messages. Explain that they need to be distinguishable by all users, including through visual cues and programmatically. -Explain that applications may have different levels of priority when in the context of a complex application, so defining such levels of priority and which types of notifications each of them should contain is a designers responsibility. +Explain that applications may have different levels of priority when in the context of a complex application. Defining such levels of priority and which types of notifications each of them should contain is a designers responsibility. #### Learning Outcomes for Topic @@ -214,7 +214,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to support assessment: -* Practical — Present students with a form field submission containing errors and ask them to provide notifications about each wrong form fields, together with suggestions for corrections whenever possible. Assess how students provide adequate error messages for each of the wrong fields and how they provide suggestions for corrections whenever possible. +* Practical — Present students with a form field submission containing errors and ask them to provide notifications about each form field that contains errors, together with suggestions for corrections whenever possible. Assess how students provide adequate error messages for each of the wrong fields and how they provide suggestions for corrections whenever possible. {% include excol.html type="end" %} From d8e9189dbe5a36a3d47c8e6b38586589d923fa3e Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 26 May 2021 18:00:09 +0200 Subject: [PATCH 118/416] updates to module 1 --- .../understanding-and-involving-users.md | 30 ++++++++++++------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/content/designer/understanding-and-involving-users.md b/content/designer/understanding-and-involving-users.md index 67e8f7b99..380a233af 100644 --- a/content/designer/understanding-and-involving-users.md +++ b/content/designer/understanding-and-involving-users.md @@ -21,7 +21,7 @@ parent_in_h1: name: "Curricula on Web Accessibility" navigation: previous: /curricula/designer-modules/ - next: /curricula/designer-modules/flexible-and-responsive-design/ + next: /curricula/designer-modules/flexible-layout-and-design/ --- ## Introduction @@ -39,7 +39,7 @@ Students should be able to: * explain how involving people with disabilities can lead to more accessible designs * examine applicable design requirements for accessibility, such as those defined by accessibility standards and policies * articulate the potential risks of not involving people with disabilities -* describe different accommodations for people with disabilities +* describe different strategies when including real people with disabilities, such as accommodations, accessibility of the facilities, and different timings depending on user skills * identify related requirements for product owners and other team roles to plan for the involvement of people with disabilities {% include excol.html type="all" %} @@ -55,6 +55,8 @@ Skills required for this module: {% include excol.html type="middle" %} * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) +* Basic knowledge of: + * User Research Techniques {% include excol.html type="end" %} @@ -66,6 +68,7 @@ Skills required for this module: * In-depth knowledge of: * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) + * User Research Techniques {% include excol.html type="end" %} @@ -86,7 +89,7 @@ Refer back to [Foundation Module 2: People and Digital Technology](/curricula/fo Students should be able to: * describe the impact of including real people with disabilities in user research activities -* describe desktop research activities to be conducted in situations where it is not feasible to include real people with disabilities, such as asking for experts' advice, or following documented best practices +* describe desktop research activities to be conducted in situations where it is not feasible to include real people with disabilities, such as asking for experts' advice, or following documented best practices for accessibility * articulate and communicate the consequences of not involving people with disabilities, for example higher costs to implement accessibility at a later stage * describe the characteristics of potential participants in user research activities based on different factors, such as the type of disability and the level of skills using assistive technologies and adaptive strategies * identify related requirements for project managers and other team members to include accessibility in the overall project requirements @@ -96,7 +99,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Discuss different examples of involving people with disabilities. Explain that this gives user researchers the opportunity to collect direct feedback from people with disabilities on products that are working for them and on products that are not. Emphasize that you can then include that feedback in the research conclusions, and that will lead to better overall design for everybody. -* Discuss scenarios where it might not be economically feasible to involve people with disabilities. Explain different search methods that can be used to get an understanding of how people with disabilities interact with technology and to get an understanding about different solutions to common pitfalls that people with disabilities may encounter when interacting with a product or service. +* Discuss scenarios where it might not be economically feasible to involve people with disabilities. Explain different research methods that can be used to get an understanding of how people with disabilities interact with technology. Explain that these research activities help the team get an understanding about different solutions to common pitfalls that people with disabilities may encounter when using the product or service. * Explain the consequences of not involving people with disabilities in design processes. Emphasize that accessibility remediation is often difficult and can lead to higher costs when implementing accessibility later on in the development phase. * Present characteristics of potential participants in user research activities based on several factors, such as the type of disability and the level of skills using assistive technologies and adaptive strategies. @@ -122,7 +125,7 @@ Present accessibility standards (such as WCAG2) and policies that apply in the s Students should be able to: * identify different non-functional accessibility requirements, for example those included in WCAG and in applicable accessibility policies -* consider different functional requirements that relate to people with disabilities, for example: +* identify different functional requirements that relate to people with disabilities, for example: * appropriate contrast ratios * availability of content and functionality in different screen sizes and configurations * keyboard compatibility @@ -130,12 +133,12 @@ Students should be able to: * identify and create personas that include people with different types of disabilities and different levels of skills using the Web * identify scenarios that include use of the product with different types of assistive technologies and adaptive strategies -### Teaching Ideas +### Teaching Ideas for Topic Optional ideas to support assessment: -* Refer back to [Foundation Module 4: Principles, Standards, and Checks](/curricula/foundation-modules/principles-standards-and-checks) and explain the importance of including international standards. -* Explain some functional requirements of products and services, such as compatibility with assistive technologies and adaptive strategies and keyboard support. +* Refer back to [Foundation Module 4: Principles, Standards, and Checks](/curricula/foundation-modules/principles-standards-and-checks) and explain the importance of including international standards in the overall project requirements. +* Explain some functional requirements of products and services that relate to accessibility, such as appropriate contrast ratios, compatibility with assistive technologies and adaptive strategies, and keyboard support. * Reflect on the diversity of people with disabilities. Explain that, when creating personas, these need to reflect the different types of abilities people have and their level of skills using assistive technologies and adaptive strategies. ### Ideas to Assess Knowledge for Topic @@ -178,13 +181,17 @@ Optional ideas to teach the learning outcomes: * Explain how including real people with disabilities can help better inform the decisions taken in iterative design processes. For example, mention complex interaction patterns, such as complex form fields or custom dialogs, and reinforce the idea that feedback on expected behaviors and interaction patterns will help take the best design decision. * Discuss the different levels of skills of people with disabilities when using an assistive technology or an adaptive strategy. Emphasize that some assistive technologies and adaptive strategies are difficult to learn. Explain that different people may need different timings to conduct the proposed activities. Present different strategies to include these differences. For example, setting up different time expectations depending on different levels of experience with the assistive technology and different levels of familiarity with the product. -* Explain different testing methods that exist, such as testing with an assistive technology, testing a paper prototype, or testing an HTML template. Explain that each of these methods delivers different types of outputs. For example, testing a paper prototype is more likely to deliver results related to vision, and assistive technology testing is more likely to deliver results related to the compatibility of the product with assistive technology. +* Explain different testing methods that exist, such as testing with an assistive technology, testing a paper prototype, or testing an HTML template. Explain that each of these methods delivers different types of outputs. For example, testing a paper prototype is more likely to deliver results related to visual aspects, and assistive technology testing is more likely to deliver results related to the compatibility of the product with assistive technology. #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -[To be developed]. +{%- comment -%} + +* Practice — Give students an activity and ask them to provide different timings depending on the different levels of skills with adaptive strategies and assistive technologies that users have. Assess how students consider different timings depending on the participants' level of skills using assistive technologies and adaptive strategies. + +{%- endcomment -%} {% include excol.html type="end" %} @@ -194,7 +201,8 @@ Optional ideas to support assessment: Optional ideas to support assessment: -* Portfolio — Students design a focus group involving users with disabilities to research about people with disabilities needs for a chat bot application. Assess how students include real people with disabilities in user research activities. +* Portfolio — Students design a focus group involving users with disabilities to research about people with disabilities needs for a chat bot application. Assess how students research and include user requirements of people with disabilities in user research activities. +* Portfolio — Students pick a product feature of their choice and conduct a usability testing session including real people with disabilities. Explain how students consider aspects related to involving real people with disabilities, such as accommodations, and accessibility of the facilities, and different timings to conduct the activities. ## Teaching Resources From c3058613206966e7fdd96836a1f48d001942bed2 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 31 May 2021 10:03:34 +0200 Subject: [PATCH 119/416] Updates to modules --- _data/navigation.yml | 4 +- content/designer/designer-modules.md | 2 +- .../flexible-and-responsive-design.md | 213 ------------------ content/designer/images-and-graphics.md | 15 +- content/designer/information-design.md | 54 ++--- content/designer/interaction-and-feedback.md | 65 +++--- content/designer/multimedia-and-animations.md | 23 +- content/designer/navigation.md | 25 +- 8 files changed, 94 insertions(+), 307 deletions(-) delete mode 100644 content/designer/flexible-and-responsive-design.md diff --git a/_data/navigation.yml b/_data/navigation.yml index 5364fa80d..280fdcb7c 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -261,8 +261,8 @@ pages: - name: Understanding and Involving Users url: "/curricula/designer-modules/understanding-and-involving-users/" - - name: Flexible and Responsive Design - url: "/curricula/designer-modules/flexible-and-responsive-design/" + - name: Flexible Layout and Design + url: "/curricula/designer-modules/flexible-layout-and-design/" - name: Navigation url: "/curricula/designer-modules/navigation/" - name: Information Design diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 5114dd13b..cd4e0bfab 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -32,10 +32,10 @@ The designer modules guide the creation of courses that: These modules focus on user research, visual, and interaction aspects to design accessible web pages and applications. The modules primarily address the following roles: -* User Experience (UX) Designer * User Researcher * Visual Designer * Information Architect +* User Experience (UX) Designer * Interaction Designer ### Prerequisites for Students diff --git a/content/designer/flexible-and-responsive-design.md b/content/designer/flexible-and-responsive-design.md deleted file mode 100644 index 1b02f5e65..000000000 --- a/content/designer/flexible-and-responsive-design.md +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: "[Draft] Module 2: Flexible and Responsive Design" -nav_title: "Flexible and Responsive Design" -permalink: /curricula/designer-modules/flexible-and-responsive-design/ -ref: /curricula/designer-modules/flexible-and-responsive-design/ -lang: en -github: - repository: w3c/wai-curricula - path: content/designer/flexible-and-responsive-design.md -license: creative-commons -acknowledgements: /curricula/acknowledgements/ -changelog: /curricula/changelog/ -footer: > -

Date: Updated @@ Month 2021. First published December 2019.

-

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

-

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

-parent_in_h1: - - ref: /curricula/designer-modules/ - name: nav_title - - ref: /curricula/ - name: "Curricula on Web Accessibility" -navigation: - previous: /curricula/designer-modules/understanding-and-involving-users/ - next: /curricula/designer-modules/navigation/ ---- - -## Introduction -{:.no-display} - -Courses based on this module should: - -* explain how people with disabilities use different screen sizes, screen configurations, break points, and style sheets to identify, distinguish, and process contents -* explain accessibility requirements for user interface components that relate to color, layout, spacing, and position - -## Learning Outcomes for Module - -Students should be able to: - -* explain how people with disabilities identify and distinguish user interface components based on different features, such as color, layout, spacing, and position -* design user interfaces with headings, landmarks, text cues, patterns, and icons to supplement information conveyed through color alone -* design user interfaces with adjustable font sizes and adequate spacing to support readability -* design user interfaces with appropriate contrast ratios for text, images of text, and controls -* design user interfaces with clear and distinguishable focus indicators, for example using borders, background color, and highlighting -* design user interfaces that support placement of different regions and user interface components where users expect them -* identify related requirements for developers to apply the necessary semantics to user interface components - -{% include excol.html type="all" %} - -## Competencies - -Skills required for this module: - -{% include excol.html type="start" %} - -### Students - -{% include excol.html type="middle" %} - -* [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) - -{% include excol.html type="end" %} - -{% include excol.html type="start" %} - -### Instructors - -{% include excol.html type="middle" %} - -* In-depth knowledge of: - * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) -* Applied expertise in teaching: - * [WCAG Success Criterion 1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG21/quickref/#time-based-media) - * [WCAG Success Criterion 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) - * [WCAG Success Criterion 1.3.2 Meaningful Sequence](https://www.w3.org/WAI/WCAG21/quickref/#meaningful-sequence) - * [WCAG Success Criterion 1.3.3 Sensory Characteristics](https://www.w3.org/WAI/WCAG21/quickref/#sensory-characteristics) - * [WCAG Success Criterion 1.3.4 Orientation](https://www.w3.org/WAI/WCAG21/quickref/#orientation) - * [WCAG Success Criterion 1.4.1 Use of Color](https://www.w3.org/WAI/WCAG21/quickref/#use-of-color) - * [WCAG Success Criterion 1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum) - * [WCAG Success Criterion 1.4.4 Resize Text](https://www.w3.org/WAI/WCAG21/quickref/#resize-text) - * [WCAG Success Criterion 1.4.6 Contrast (Enhanced)](https://www.w3.org/WAI/WCAG21/quickref/#contrast-enhanced) - * [WCAG Success Criterion 1.4.10 Reflow](https://www.w3.org/WAI/WCAG21/quickref/#reflow) - * [WCAG Success Criterion 1.4.11 Non-Text Contrast](https://www.w3.org/WAI/WCAG21/quickref/#non-text-contrast) - * [WCAG Success Criterion 1.4.12 Text Spacing](https://www.w3.org/WAI/WCAG21/quickref/#text-spacing) - * [WCAG Success Criterion 2.4.2 Page Titled](https://www.w3.org/WAI/WCAG21/quickref/#page-titled) - * [WCAG Success Criterion 2.4.3 Focus Order](https://www.w3.org/WAI/WCAG21/quickref/#focus-order) - * [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) - * [WCAG Success Criterion 2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG21/quickref/#focus-visible) - -{% include excol.html type="end" %} - -## Topics to Teach - -Topics to achieve the learning outcomes: - -{% include excol.html type="start" %} - -### Topic: Content Perception - -{% include excol.html type="middle" %} - -Explain how people with disabilities rely on different style properties, such as font sizes and spacing, to perceive contents. - -#### Learning Outcomes for Topic - -Students should be able to: - -* design user interfaces with clear and distinguishable styles for different components, such as links, buttons, form elements, or texts -* design user interfaces with font sizes that enhance content readability -* design user interfaces with adequate spacing to support readability and to help distinguish components from one another -* design user interfaces with text cues to convey information provided through vision only, such as an asterisk to convey required form fields in a form -* design user interfaces with other visual cues in addition to color, for example using different patterns, shapes, and icons - -#### Teaching Ideas for Topic - -Optional ideas to teach the learning outcomes: - -* Demonstrate the use of styles for distinguishing user interface components from one another, such as links, buttons, form elements, and texts. Explain how people rely on font sizes, spacing, and typography to distinguish components from one another. For references on how to apply distinguishable styles for user interface components, see @@@ -* Demonstrate use of different font sizes and explain how they affect readability of the content. For reference on how to apply font sizes that allow content readability, see @@@ -* Show examples of different page layouts with and without adequate spacing. Explain how spacing allows to distinguish different user interface components and pieces of content from one another. For references on how to apply adequate spacing, see @@@ -* Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a store is open or closed. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. -* Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so alternative methods to convey that information are required. For references on how to convey information without using color alone, see @@@ - -#### Ideas to Assess Knowledge for Topic - -Optional ideas to support assessment: - -* Practical — Students design a paper prototype with distinguishable styles that help perceive different contents. Assess how students use different style properties to make content perceivable and to distinguish components from one another. -* Practical &mdash: Give students examples of color alone used to provide information and ask them to provide text information and visual cues to supplement that information. Assess how students provide the necessary textual information and visual cues to supplement information provided exclusively with color. - -{% include excol.html type="end" %} - -{% include excol.html type="start" %} - -### Topic: Contrast Ratios - -{% include excol.html type="middle" %} - -Explain how contrast ratios are essential for people with low vision to perceive, distinguish, and understand contents. - -#### Learning Outcomes for Topic - -Students should be able to: - -* explain how appropriate contrast ratios allow people with disabilities to read, understand, and distinguish user interface components -* design user interfaces with texts and images of text that have a contrast ratio of at least 4.5:1 with respect to their background -* design user interfaces with large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background -* design user interfaces with components and graphics that have a contrast ratio of at least 3:1 with respect to their background - -#### Teaching Ideas for Topic - -Optional ideas to teach the learning outcomes: - -* Show examples of different foreground and background color combinations. Explain how contrast ratios between foreground and background allow users to perceive content and distinguish components from one another. For references on contrast ratios , see @@@ -* Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios need to be at least 4.5:1. For references on how to apply contrast ratios to text (including images of text), see @@@ -* Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. For techniques on how to add contrast ratios for graphics and interface components, see@@@ - -#### Ideas to Assess Knowledge for Topic - -Optional ideas to support assessment: - -* Short Answer Questions — Give students a set of user interface components and ask them what the contrast ratio should be. Assess how students understand and distinguish contrast ratios for different user interface components. -* Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing - -{% include excol.html type="end" %} - -{% include excol.html type="start" %} - -### Topic: Flexible Design - -{% include excol.html type="middle" %} - -Explain how people with disabilities use different screen sizes, screen configurations, break points, and style sheets to identify, distinguish, and process contents. - -#### Learning Outcomes for Topic - -Students should be able to: - -* design user interfaces that support customizing line height, as well as spacing between paragraphs, words, and letters -* design user interfaces that support text resizing without loss of content and functionality -* design user interfaces that support content view and operation in both portrait and landscape orientations -* design user interfaces with target sizes and spaces to support tapping by people with mobility impairments and people using different input methods - -#### Teaching Ideas for Topic - -Optional ideas to teach the learning outcomes: - -* Show examples of different user interfaces that support customizing line height as well as spacing between paragraphs, words, and letters to support readability. -* Explain that people with low vision often need to resize text to be able to read it properly. This includes resizing settings in the assistive technology, browser, and operating system. -* Show examples of user interfaces showing up in both portrait and landscape modes. Explain that the ability to show an interface both in portrait and landscape is crucial for people who cannot change their device orientation due to mobility impairments. -* Show examples of different tap targets and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that tap targets need to be large enough to accommodate different people's needs. - -#### Ideas to Assess Knowledge for Topic - -Optional ideas to support assessment: - -* Practical — Students design different paper prototypes with different interface layouts considering text resizing, line height, spacing between paragraphs, words, and letters. Assess how students consider text resizing, line height, and spacing between paragraphs, words, and letters while designing user interfaces. - -{% include excol.html type="end" %} - -{% include excol.html type="all" %} - -## Ideas to Assess Knowledge for Module - -Optional ideas to support assessment: - -* Portfolio — Students design a prototype of a single web page. Assess how students use color, layout, spacing, and position to support content perception and identification. - -## Teaching Resources - -Suggested resources to support your teaching: - -* @@@ -* [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. \ No newline at end of file diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 8bec41379..ec32fc1fb 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -80,7 +80,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="start" %} -### Topic: Decorative Images +### Topic: Ornamental Graphics {% include excol.html type="middle" %} @@ -116,7 +116,7 @@ Optional ideas to support assessment: {% include excol.html type="middle" %} -Explain several uses of text alternatives, such as to describe the function of a user interface component or to describe the images so that they can be understood without looking at them. Explain that describing the functions of user interface components is a designer's responsibility, whereas providing other text alternatives and descriptions is a responsibility shared with the content author. +Explain several uses of text alternatives, such as to describe the function of graphical user interface component (functional images) and to describe the images so that users can understand their purpose without looking at them (informational images). Explain that describing the functions of user graphical interface components is a designer's responsibility, whereas providing text alternatives for informative images is a responsibility shared with the content author. #### Learning Outcomes for Topic @@ -132,9 +132,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different images used to convey functionality, such as for printing, searching, or saving a document. Explain that it is necessary to provide and equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see @@@ -* Show examples of different images that convey information, such as images to provide instructions, or to identify objects. Explain that such information needs to be provided using text alternatives, so that the purpose of the image can be understood without having to look at the image. Emphasize that these alternatives may require coordination between designers, developers, and content authors. For references on how to provide text alternatives for images, see @@@ -* Show examples of different verification systems, such as captcha, to identify human beings trying to access a service or system. Explain that these mechanisms need to support several sensory characteristics, such as visual, auditory, or cognitive. For references on how to provide accessible captcha, see @@@ +* Show examples of different images used to convey functionality, such as for printing, searching, or saving a document. Explain that it is necessary to provide and equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). +* Show examples of different images that convey information, such as images to provide instructions, or to identify objects. Explain that such information needs to be provided using text alternatives, so that the purpose of the image can be understood without having to look at the image. Emphasize that these alternatives may require coordination between designers, developers, and content authors. For references on how to provide text alternatives for images, see [G82: Providing a text alternative that identifies the purpose of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G82.html). +* Show examples of different verification systems, such as captcha, to identify human beings trying to access a service or system. Explain that these mechanisms need to support several sensory characteristics, such as visual, auditory, or cognitive. For references on how to provide accessible captcha, see [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). #### Ideas to Assess Knowledge for Topic @@ -145,6 +145,10 @@ Optional ideas to support assessment: {% include excol.html type="end" %} +### Topic: Data Visualization + +[to be developed]. + {% include excol.html type="all" %} ## Ideas to Assess Knowledge for Module @@ -153,6 +157,7 @@ Optional ideas to support assessment: [To be developed.] +* Portfolio — Students design the imagery for a website. Assess how students include accessibility requirements in the images in graphics they design. ## Teaching Resources Suggested resources to support your teaching: diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 500aa5fa2..3e4f03041 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -89,7 +89,8 @@ Discuss mechanisms to supplement information presented only with text, such as u Students should be able to: -* design user interfaces that support additional ways to convey information presented in text, using icons and other visual cues +* design user interfaces that support splitting large amounts of text into several smaller and more manageable pieces, for example by using headings or pages +* design user interfaces that support additional ways to convey information presented in text, for example using icons and other visual cues * design user interfaces that support mechanisms to identify specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon * design user interfaces that support mechanisms to identify the expanded form or meaning of acronyms and abbreviations * identify related requirements for developers to make language programmatically determined @@ -99,13 +100,17 @@ Students should be able to: Optional ideas to teach the learning outcomes: -[To be developed.] +* Show examples of large amounts of text, for example an ebook. Discuss several ways to divide the text both visually and programmatically so that it is easier to understand and to navigate, for example by using headings or several pages. +* Show examples of how icons, charts, and graphics can complement information presented in text. Explain that they help users with reading disabilities understand difficult pieces of text. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). +* Show examples of words that may be difficult to understand or that are used in a restricted way. Explain that users with cognitive disabilities or those not familiar with such words need definitions to understand the meaning of such words. Explain that defining the mechanisms to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the conten author. For references on how to provide the definition of a word or phrase used in an unusual or restricted way, see technique [G101: Providing the definition of a word or phrase used in an unusual or restricted way](https://www.w3.org/WAI/WCAG21/Techniques/general/G101.html). +* Show examples of abbreviations such as short forms of words and acronyms. Explain that users with cognitive disabilities and those not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the mechanisms to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the conten author. For references on how to provide the expansion or explanation of an abbreviation, see technique [G102: Providing the expansion or explanation of an abbreviation](https://www.w3.org/WAI/WCAG21/Techniques/general/G102). #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -[To be developed.] +* Practical mdash; Present students with an ebook and ask them todefine how it should be split into smaller and more manageable pieces to that it can be easier to navigate and understand. Assess how students use mechanisms to divide large amounts of text into smaller and more manageable pieces. +* Practical — Present students with unusual words and abbreviations and ask them to define a mechanism to provide the explanation of such words or the expansion of the abbleviations. Assess how students define a mechanism to provide explanations of unusual words and expansions of abbreviations. {% include excol.html type="end" %} @@ -115,7 +120,7 @@ Optional ideas to support assessment: {% include excol.html type="middle" %} -Explain different ways in which people with disabilities visualize tabular information, for example split into several simpler tables or putting the information in lists. +Explain different ways in which people with disabilities access tabular information. For example, splitting a complex table into several simpler tables, and splitting the information in the table into individual lists. #### Learning Outcomes for Topic @@ -131,9 +136,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different types of information presented in tables. Explain that tables are used when there is a logical relationship between the information presented, for example when presenting a list of events with their date and venue. +* Show examples of different types of information presented in tables. Explain that tables are used when there is a logical relationship between the information presented, for example when displaying a list of events with their date and venue. * Refer back to [Module 2: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design) and explain that some users may require different ways of presenting tabular information. Explain that these include splitting complex tables into simpler ones and using lists to group the logically related information. -* Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells needs to be perceived both visually and programmatically for users to understand the relationship between these two types of cells, and that clear styles should be provided. Explain that providing the styles is a designer's responsibility, whereas establishing the programmatic relationship is a responsibility shared with the developers. +* Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells needs to be perceived both visually and programmatically for users to understand their relations, and that clear styles should be provided. Explain that providing the styles is a designer's responsibility, whereas establishing the programmatic relationship is a responsibility shared with the developers. #### Ideas to Assess Knowledge for Topic @@ -150,43 +155,16 @@ Optional ideas to support assessment: {% include excol.html type="middle" %} -#### Learning Outcomes for Topic - -Students should be able to: - -* design user interfaces that support grouping of related form controls, such as those collecting personal information, payment methods, and consent to legal conditions -* provide examples of expected input wherever possible, such as how a phone number should be entered and what the different credit card fields should contain -* design user interfaces that support programmatic and visual grouping of related links, such as those from a navigation menu or from a product category - -#### Teaching Ideas for Topic - -Optional ideas to teach the learning outcomes: - -[To be developed.] - -#### Ideas to Assess Knowledge for Topic - -Optional ideas to support assessment: - -[To be developed.] - -{% include excol.html type="end" %} - -{% include excol.html type="start" %} - -### Topic: Data Visualization - -{% include excol.html type="middle" %} - -Show examples of how different groups of people visualize large amounts of data, such as a list of countries. Explain that some prefer filtering out data into smaller piece to better handle them, some other prefer to type the first letters of their desire option to select it more efficiently. +Show examples of how different groups of people interact with large amounts of selectable data, such as a list of countries. Explain that some prefer filtering out data into smaller pieces to better handle them, some other prefer to type the first letters of their desire option to select it more efficiently. #### Learning Outcomes for Topic Students should be able to: -* create user interfaces that support filtering of data using different mechanisms such as search boxes or subsets of data -* create user interfaces that allow to use the keyboard to navigate to specific pieces of data -* create user interfaces that allow customizing the results that are shown at a given time +* design user interfaces that support grouping of related form controls, such as those collecting personal information, payment methods, and consent to legal conditions +* design user interfaces that support filtering data, for example using search boxes or spliting the data set into smaller subsets of data +* design user interfaces that support navigating to specific pieces of data using the keyboard +* design user interfaces that support customizing the results that are shown at a given time #### Teaching Ideas for Topic diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 9e4ef49b2..2ee553a16 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -108,77 +108,78 @@ Optional ideas to support assessment: {% include excol.html type="start" %} -### Topic: Gestures and Motion +### Topic: Labels and Instructions {% include excol.html type="middle" %} -Discuss some gestures that require dragging and drawing specific shapes on a tactile screen. Explain that these are difficult for some people with mobility impairments. - -@@@ [Reference to motion] +Show examples of labels and instructions for form controls and custom widgets. Explain that they are essential for cognitive disabilities to understand and interact with these components. -#### Learning Outcomes for Topic +#### Learning outcomes for Topic Students should be able to: -* design user interfaces that support alternatives to device or user motion such as shaking, by using user interface components that do not require motion -* design user interfaces that support disabling response to motion to prevent accidental actuation, such as undoing an action by shaking a device -* design user interfaces that support alternatives to multi-pointer gestures (such as swipe or pinch) using single pointer activation -* design user interfaces that support undoing or aborting an action carried out with path-based operations +* provide names to help users understand the purpose and intent of interactive user interface components +* design user interfaces that allow to position labels where users expect them +* provide instructions about which input fields are required by: + * including information about each of the required form fields before the form control + * including color, text, and visual cues in the label of each of the required form fields that indicates that they are required +* provide clear instructions about changes in context before the control that originates such changes +* provide overall instructions about existing time limits in a form and about how they can be turned off, adjusted, or extended +* provide clear instructions about the current step and about the total number of steps involved in a multi-step form +* identify related requirements for developers to code labels and instructions appropriately #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments cannot perform such gestures, thus user interfaces need to have alternatives that do not require motion for these gestures. -* Show examples of gestures such as swipe or ping. Explain that users with mobility impairments cannot perform such gestures, thus user interfaces need to have alternatives that do not require swiping or pinching to perform an action. -* Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events, thus user interfaces need to support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. +* Show examples of different interactive components, such as buttons, links, or widgets, and emphasize that each should have a clear name that allows to identify its purpose. For reference on how to provide names for different user interface components, see +* Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. For references on how to place labels for form fields, see +* Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several mechanisms, including color, text, and other visual cues. For references on how to communicate that form fields are required, see +* Present examples of time limits, such as those warning about session expirations. Explain that instructions need to be provided so that users are aware of the time limits, and mechanisms need to be put in place to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a responsibility of the designer, whereas implementing mechanisms to stop, extend, or adjust time limits is a responsibility shared with the developer. +* Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -[To be developed.] +* Practical — Present students with a form fields and ask them to define labels for each. Assess how students provide clear and descriptive names for each of the form fields. +* Practical — Give students a form field and ask them to provide the necessary instructions for users to understand and fill in the form. Assess how students provide clear and concise instructions. {% include excol.html type="end" %} {% include excol.html type="start" %} -### Topic: Labels and Instructions +### Topic: Gestures and Motion {% include excol.html type="middle" %} -Show examples of labels and instructions for form controls and custom widgets. Explain that they are essential for cognitive disabilities to understand and interact with these components. +Show examples of user interfaces that react to motion, such as shaking the device to perform a specific action. Explain that some people may perform these motion based gestures inadvertently, some others may not be able to perform them at all. Discuss some alternatives to motion-based gestures. -#### Learning outcomes for Topic +Discuss some gestures that require dragging and drawing specific shapes on a tactile screen. Explain that these are difficult (and sometimes impossible) for some people with mobility impairments. + +#### Learning Outcomes for Topic Students should be able to: -* provide names to help users understand the purpose and intent of interactive user interface components -* design user interfaces that allow to position labels where users expect them -* provide instructions about which input fields are required by: - * including information about each of the required form fields before the form control - * including color, text, and visual cues in the label of each of the required form fields that indicates that they are required -* provide clear instructions about changes in context before the control that originates such changes -* provide overall instructions about existing time limits in a form and about how they can be turned off, adjusted, or extended -* provide clear instructions about the current step and about the total number of steps involved in a multi-step form -* identify related requirements for developers to code labels and instructions appropriately +* design user interfaces that support alternatives to device or user motion such as shaking, by using user interface components that do not require motion +* design user interfaces that support disabling response to motion to prevent accidental actuation, such as undoing an action by shaking a device +* design user interfaces that support alternatives to multi-pointer gestures (such as swipe or pinch) using single pointer activation +* design user interfaces that support undoing or aborting an action carried out with path-based operations #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of different interactive components, such as buttons, links, or widgets, and emphasize that each should have a clear name that allows to identify its purpose. For reference on how to provide names for different user interface components, see -* Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. For references on how to place labels for form fields, see -* Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several mechanisms, including color, text, and other visual cues. For references on how to communicate that form fields are required, see -* Present examples of time limits, such as those warning about session expirations. Explain that instructions need to be provided so that users are aware of the time limits, and mechanisms need to be put in place to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a responsibility of the designer, whereas implementing mechanisms to stop, extend, or adjust time limits is a responsibility shared with the developer. -* Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. +* Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments cannot perform such gestures, thus user interfaces need to have alternatives that do not require motion for these gestures. +* Show examples of gestures such as swipe or ping. Explain that users with mobility impairments cannot perform such gestures, thus user interfaces need to have alternatives that do not require swiping or pinching to perform an action. +* Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events, thus user interfaces need to support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -* Practical — Present students with a form fields and ask them to define labels for each. Assess how students provide clear and descriptive names for each of the form fields. -* Practical — Give students a form field and ask them to provide the necessary instructions for users to understand and fill in the form. Assess how students provide clear and concise instructions. +* Practical — Give students an interface that uses a motion-based gesture to perform an action and ask them to provide alternatives to that gesture. Assess how students provide alternatives to motion-based gestures. +* Practical — Give students an interface that uses a multi path based gesture to perform an action and ask them to provide alternatives to that gesture. Assess how students provide alternatives to multi-pointer and path-based gestures. {% include excol.html type="end" %} diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 1696313ad..ad25e1440 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -34,7 +34,7 @@ Students should be able to: * identify accessibility requirements for different types of audio or video content * design user interfaces that consider placement of alternatives to multimedia content, such as transcripts for audio and audio described content, * design user interfaces that support switching transcripts and audio described content on or off -* design user interfaces with mechanisms to pause, stop, and hide any moving and auto-updating content, including animations and carousels +* design user interfaces with mechanisms to pause, stop, and hide any moving, blinking, and auto-updating content, including animations and carousels * design user interfaces with mechanisms to stop or control the volume of auto-playing audio * identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding media content * identify related requirements for content authors to provide appropriate text alternatives and audio descriptions for different types of media content, including video and audio @@ -72,7 +72,9 @@ Skills required for this module: * [WCAG Success Criterion 1.2.3 Audio Description or Media Alternative (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#audio-description-or-media-alternative-prerecorded) * [WCAG Success Criterion 1.4.4 Captions (Live)](https://www.w3.org/WAI/WCAG21/quickref/#captions-live) * [WCAG Success Criterion 1.2.5 Audio Descriptions (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#audio-description-prerecorded) + * [WCAG Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide) * [WCAG Success Criterion 2.3.1 Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG21/quickref/#three-flashes-or-below-threshold) + * [WCAG Success Criterion 3.2.1 On Focus](https://www.w3.org/WAI/WCAG21/quickref/#on-focus) * @@@ {% include excol.html type="end" %} @@ -126,18 +128,27 @@ Show examples of different types of animations. Explain that they can cause seiz Students should be able to: -* design user interfaces that support pausing, stopping, or hiding any content that blinks, moves, or auto-updates -* design user interfaces with flashing content that is below the general flash and red flash thresholds -* design user interfaces that allow to provide content that does not flash more than three times in a second +* design user interfaces that support pausing, stopping, or hiding any content that blinks, moves, or auto-updates +* design user interfaces that support flashing below the general flash and red flash thresholds or with content that does not flash more than three times in any one second * design user interfaces that support disabling motion animation triggered by interaction, such as additional animations when scrolling * design user interfaces that support stopping or controlling the volume of any audio that plays automatically for more than 3 seconds -* design user interfaces that prevent changes of context unless the user is aware of them or has explicitly requested such changes #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -[To be developed]. +* Show examples of contents that move or blink, such as animations and carousels. Explain that these can cause problems for some users that cannot keep up with the pace of the auto-updating content or that these animations can cause seizure and physical reactions. For references on how to design suer interfaces that allow to pause, stop, and hide moving, blinking, or auto-updating content, see the following techniques: + * [G4: Allowing the content to be paused and restarted from where it was paused](https://www.w3.org/WAI/WCAG21/Techniques/general/G4) + * [G11: Creating content that blinks for less than 5 seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G11) + * [G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)](https://www.w3.org/WAI/WCAG21/Techniques/general/G152) + * [G186: Using a control in the Web page that stops moving, blinking, or auto-updating content](https://www.w3.org/WAI/WCAG21/Techniques/general/G186) + * [G187: Using a technology to include blinking content that can be turned off via the user agent](https://www.w3.org/WAI/WCAG21/Techniques/general/G187) +* Show examples of flashing content and explain that they can cause seizures or physical reactions for some people. Emphasize that all components of the content need to be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole web page or application. For references on how to design interfaces that support flashing below the general flash and red flash thresholds or that support flashing below 3 seconds, see techniques [G19: Ensuring that no component of the content flashes more than three times in any 1-second period](https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html) and [G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold](https://www.w3.org/WAI/WCAG21/Techniques/general/G15.html). +* Show examples of itneractions triggered by animations, such as additional movements when scrolling. Explain that these animations can cause distraction and vestibular disorders such as dizziness, nausea, and headaches for some people. Discuss different ways to resolve these issues, such as including a preference to disable animations or using technology specific properties to reduce such animations. +* Use a screen reader to navigate an application that plays audio automatically for more than 3 seconds, such as a video player with audio that is longer than 3 seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a mechanism to pause or control the volume of that audio. Explain that the operating system often provides such mechanism. For references on how to design interfaces that support mechanisms to pause or control the volume of any audio that plays automatically, see the following techniques: + * [G60: Playing a sound that turns off automatically within three seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G60.html) + * [G170: Providing a control near the beginning of the Web page that turns off sounds that play automatically](https://www.w3.org/WAI/WCAG21/Techniques/general/G170.html) + * [G171: Playing sounds only on user request](https://www.w3.org/WAI/WCAG21/Techniques/general/G171.html). #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/navigation.md b/content/designer/navigation.md index a7bcb7559..5ed1acf07 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -15,7 +15,7 @@ footer: >

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: - previous: /curricula/designer-modules/flexible-and-responsive-design/ + previous: /curricula/designer-modules/flexible-layout-and-design/ next: /curricula/designer-modules/information-design/ --- @@ -86,7 +86,9 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Explain menu conventions that relate to accessibility, such as clear and consistent styling to convey menu states. Introduce patterns for mouse, keyboard, and tactile interaction with menus. +Show examples of different types of menus, such as navigational, fly-out, and application menus. Explain the different scenarios where each of them can be used. For references on the different types of menus and their uses, see the WAI website tutorials [Menus](https://www.w3.org/WAI/tutorials/menus/). + +Explain styling conventions for menus, such as location, appropriate size and ability for menus and menu items to resize depending on different user configurations. For references on how to apply accessible menu styles, see the WAI website tutorial, [Menu Styling](https://www.w3.org/WAI/tutorials/menus/styling/). #### Learning Outcomes for Topic @@ -103,7 +105,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different types of menus, such as navigational, fly-out, and application menus. Explain the different scenarios where each of them can be used. For references on the different types of menus and their uses, see @@@ +* Explain menu conventions that relate to accessibility, such as clear and consistent styling to convey menu behaviors and states. Introduce patterns for mouse, keyboard, and tactile interaction with menus. * Demonstrate menu interaction using different input devices, such as keyboard, mouse, and tactile. For example, activating a menu option by tapping, pressing the Enter key, and mouse clicking. Explain that defining the interactions is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. * Show examples of menu and menu items that contain large texts. Explain that, when used in smaller viewports or with different screen configurations, these text need to resize so that they are perceived in their entirety. * Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Emphasize that the states of these menu items need to be communicated using visual cues as well as semantics. Explain that providing the visual cues is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. @@ -134,8 +136,9 @@ Students should be able to: * a link at the beginning of a block of repeated content to go to the end of the block * links at the top of the page that go to each area of the content * an expandable and collapsible menu to make it easier for users to skip the menu -* assess the need for other navigation mechanisms, such as breadcrumb trails, tables of contents, and sitemaps depending on the characteristics of the user interface -* design user interfaces that support breadcrumb trails to provide information about the user's location in a set of web pages +* assess the need for other navigation mechanisms, such as search functionalities, breadcrumb trails, tables of contents, and sitemaps depending on the characteristics of the user interface +* provide search functionalities that support navigating to specific parts of the site +* design user interfaces that support breadcrumb trails to provide information about the users' location in a set of web pages * design user interfaces that support site maps to provide an overview of the entire website * design user interfaces that support tables of contents to give an overview of the whole website or document and to allow users to go to specific parts of the content @@ -143,10 +146,12 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of mechanisms to bypass blocks of repeated content, such as a link at the top of the page and the use of expandable and collapsible components. Explain that people using the keyboard only find it very frustrating to navigate through sets of repeated blocks of content, such as navigation bars or header contents. For references on how to provide a mechanism to bypass blocks of repeated content, see @@@ -* Show examples of breadcrumb trails. Explain that they provide information about the user's location within the context of a set of websites. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see @@@ -* Show examples of site maps and explain that they serve the purpose of providing an overview of the whole site. Explain that some users rely on them to better understand the structure of the site and to find its way more easily through it. For references on how to provide a site map, see @@@ -* Show examples of tables of contents, for example in an electronic book or document. Explain that they provide an overview of the whole document and allow navigation to specific parts of the content. +* Show examples of mechanisms to bypass blocks of repeated content, such as a link at the top of the page and the use of expandable and collapsible components. Explain that people using the keyboard only find it very frustrating to navigate through sets of repeated blocks of content, such as navigation bars or header contents. For examples on how to provide a mechanism to bypass blocks of repeated content, see techniques [G1: Adding a link at the top of each page that goes directly to the main content area](https://www.w3.org/WAI/WCAG21/Techniques/general/G1.html), [G123: Adding a link at the beginning of a block of repeated content to go to the end of the block](https://www.w3.org/WAI/WCAG21/Techniques/general/G123.html), and [G124: Adding links at the top of the page to each area of the content](https://www.w3.org/WAI/WCAG21/Techniques/general/G124.html). +* Show examples of search functionalities. Explain that they help users find content by supporting navigation to different parts of the site. Emphasize that some users prefer this way of navigating, especially when they are already familiar with the site and know what they are looking for. For references on how to provide a search functionality, see technique [G161: Providing a search function to help users find content](https://www.w3.org/WAI/WCAG21/Techniques/general/G161). +* Show examples of breadcrumb trails. Explain that they provide information about the user's location within the context of a set of websites. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail +](https://www.w3.org/WAI/WCAG21/Techniques/general/G65). +* Show examples of site maps and explain that they serve the purpose of providing an overview of the whole site. Explain that some users rely on them to better understand the structure of the site and to find its way more easily through it. For references on how to provide a site map, see [G63: Providing a site map](https://www.w3.org/WAI/WCAG21/Techniques/general/G63.html). +* Show examples of tables of contents, for example in an electronic book or document. Explain that they provide an overview of the whole document and allow navigation to specific parts of the content. For references on how to provide a table of contents, see technique [G64: Providing a Table of Contents](https://www.w3.org/WAI/WCAG21/Techniques/general/G64.html). #### Ideas to Assess Knowledge for Topic @@ -171,7 +176,7 @@ Optional ideas to support assessment: Suggested resources to support your teaching: * @@@ -* [Menus (WAI Web Accessibility Tutorials)](https://www.w3.org/WAI/tutorials/menus/) — Shows how to develop navigational mechanisms that are accessible to people with disabilities. +* [Menus (WAI Web Accessibility Tutorials)](https://www.w3.org/WAI/tutorials/menus/) — Shows how to design navigational mechanisms that are accessible to people with disabilities. * [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. * [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. From 0d8db6add7febf29ad4f189f964b89697a9b17cc Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 31 May 2021 10:19:47 +0200 Subject: [PATCH 120/416] Updates to module 1 --- content/designer/understanding-and-involving-users.md | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/content/designer/understanding-and-involving-users.md b/content/designer/understanding-and-involving-users.md index 380a233af..04a81b3a1 100644 --- a/content/designer/understanding-and-involving-users.md +++ b/content/designer/understanding-and-involving-users.md @@ -89,7 +89,7 @@ Refer back to [Foundation Module 2: People and Digital Technology](/curricula/fo Students should be able to: * describe the impact of including real people with disabilities in user research activities -* describe desktop research activities to be conducted in situations where it is not feasible to include real people with disabilities, such as asking for experts' advice, or following documented best practices for accessibility +* describe desk research activities to be conducted in situations where it is not feasible to include real people with disabilities, such as asking for experts' advice, or following documented best practices for accessibility * articulate and communicate the consequences of not involving people with disabilities, for example higher costs to implement accessibility at a later stage * describe the characteristics of potential participants in user research activities based on different factors, such as the type of disability and the level of skills using assistive technologies and adaptive strategies * identify related requirements for project managers and other team members to include accessibility in the overall project requirements @@ -187,12 +187,9 @@ Optional ideas to teach the learning outcomes: Optional ideas to support assessment: -{%- comment -%} - +* Practice — Ask students to select a venue where they would conduct a face-to-face research activity with people with disabilities. Assess how students understand different accommodations and needs of people with disabilities, such as accessibility of the facilities, transportation means, and others. * Practice — Give students an activity and ask them to provide different timings depending on the different levels of skills with adaptive strategies and assistive technologies that users have. Assess how students consider different timings depending on the participants' level of skills using assistive technologies and adaptive strategies. -{%- endcomment -%} - {% include excol.html type="end" %} {% include excol.html type="all" %} From f969d22cf27e86b688bdc49e5cb48a1b80d173be Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 31 May 2021 10:23:21 +0200 Subject: [PATCH 121/416] Practice -> Practical --- content/designer/understanding-and-involving-users.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/understanding-and-involving-users.md b/content/designer/understanding-and-involving-users.md index 04a81b3a1..4503294ab 100644 --- a/content/designer/understanding-and-involving-users.md +++ b/content/designer/understanding-and-involving-users.md @@ -187,8 +187,8 @@ Optional ideas to teach the learning outcomes: Optional ideas to support assessment: -* Practice — Ask students to select a venue where they would conduct a face-to-face research activity with people with disabilities. Assess how students understand different accommodations and needs of people with disabilities, such as accessibility of the facilities, transportation means, and others. -* Practice — Give students an activity and ask them to provide different timings depending on the different levels of skills with adaptive strategies and assistive technologies that users have. Assess how students consider different timings depending on the participants' level of skills using assistive technologies and adaptive strategies. +* Practical — Ask students to select a venue where they would conduct a face-to-face research activity with people with disabilities. Assess how students understand different accommodations and needs of people with disabilities, such as accessibility of the facilities, transportation means, and others. +* Practical — Give students an activity and ask them to provide different timings depending on the different levels of skills with adaptive strategies and assistive technologies that users have. Assess how students consider different timings depending on the participants' level of skills using assistive technologies and adaptive strategies. {% include excol.html type="end" %} From 676ab0c6b6e9358af93b8be7b0cee8dbc36ffe88 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 31 May 2021 10:49:16 +0200 Subject: [PATCH 122/416] updates to modules --- .../designer/flexible-layout-and-design.md | 218 ++++++++++++++++++ 1 file changed, 218 insertions(+) create mode 100644 content/designer/flexible-layout-and-design.md diff --git a/content/designer/flexible-layout-and-design.md b/content/designer/flexible-layout-and-design.md new file mode 100644 index 000000000..4ecd998d8 --- /dev/null +++ b/content/designer/flexible-layout-and-design.md @@ -0,0 +1,218 @@ +--- +title: "[Draft] Module 2: Flexible Layout and Design" +nav_title: "Flexible Layout and Design" +permalink: /curricula/designer-modules/flexible-layout-and-design/ +ref: /curricula/designer-modules/flexible-layout-and-design/ +lang: en +github: + repository: w3c/wai-curricula + path: content/designer/flexible-layout-and-design.md +license: creative-commons +acknowledgements: /curricula/acknowledgements/ +changelog: /curricula/changelog/ +footer: > +

Date: Updated @@ Month 2021. First published December 2019.

+

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

+

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+parent_in_h1: + - ref: /curricula/designer-modules/ + name: nav_title + - ref: /curricula/ + name: "Curricula on Web Accessibility" +navigation: + previous: /curricula/designer-modules/understanding-and-involving-users/ + next: /curricula/designer-modules/navigation/ +--- + +## Introduction +{:.no-display} + +Courses based on this module should: + +* explain how people with disabilities use different screen sizes, screen configurations, break points, and style sheets to identify, distinguish, and process contents +* explain accessibility requirements for user interface components that relate to color, layout, spacing, and position + +## Learning Outcomes for Module + +Students should be able to: + +* explain how people with disabilities identify and distinguish user interface components based on different features, such as color, layout, spacing, and position +* design user interfaces with headings, landmarks, text cues, patterns, and icons to supplement information conveyed through color alone +* design user interfaces with adjustable font sizes and adequate spacing to support readability +* design user interfaces with appropriate contrast ratios for text, images of text, and controls +* design user interfaces with clear and distinguishable focus indicators, for example using borders, background color, and highlighting +* design user interfaces that support placement of different regions and user interface components where users expect them +* identify related requirements for developers to apply the necessary semantics to user interface components + +{% include excol.html type="all" %} + +## Competencies + +Skills required for this module: + +{% include excol.html type="start" %} + +### Students + +{% include excol.html type="middle" %} + +* [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) +* Basic knowledge of: + * Visual Design Techniques + * Responsive Design Techniques + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + +### Instructors + +{% include excol.html type="middle" %} + +* In-depth knowledge of: + * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) + * Visual Design Techniques + * Responsive Design Techniques +* Applied expertise in teaching: + * [WCAG Success Criterion 1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG21/quickref/#time-based-media) + * [WCAG Success Criterion 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) + * [WCAG Success Criterion 1.3.2 Meaningful Sequence](https://www.w3.org/WAI/WCAG21/quickref/#meaningful-sequence) + * [WCAG Success Criterion 1.3.3 Sensory Characteristics](https://www.w3.org/WAI/WCAG21/quickref/#sensory-characteristics) + * [WCAG Success Criterion 1.3.4 Orientation](https://www.w3.org/WAI/WCAG21/quickref/#orientation) + * [WCAG Success Criterion 1.4.1 Use of Color](https://www.w3.org/WAI/WCAG21/quickref/#use-of-color) + * [WCAG Success Criterion 1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum) + * [WCAG Success Criterion 1.4.4 Resize Text](https://www.w3.org/WAI/WCAG21/quickref/#resize-text) + * [WCAG Success Criterion 1.4.6 Contrast (Enhanced)](https://www.w3.org/WAI/WCAG21/quickref/#contrast-enhanced) + * [WCAG Success Criterion 1.4.10 Reflow](https://www.w3.org/WAI/WCAG21/quickref/#reflow) + * [WCAG Success Criterion 1.4.11 Non-Text Contrast](https://www.w3.org/WAI/WCAG21/quickref/#non-text-contrast) + * [WCAG Success Criterion 1.4.12 Text Spacing](https://www.w3.org/WAI/WCAG21/quickref/#text-spacing) + * [WCAG Success Criterion 2.4.2 Page Titled](https://www.w3.org/WAI/WCAG21/quickref/#page-titled) + * [WCAG Success Criterion 2.4.3 Focus Order](https://www.w3.org/WAI/WCAG21/quickref/#focus-order) + * [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) + * [WCAG Success Criterion 2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG21/quickref/#focus-visible) + +{% include excol.html type="end" %} + +## Topics to Teach + +Topics to achieve the learning outcomes: + +{% include excol.html type="start" %} + +### Topic: Content Perception + +{% include excol.html type="middle" %} + +Explain how people with disabilities rely on different style properties, such as font sizes and spacing, to perceive contents. + +#### Learning Outcomes for Topic + +Students should be able to: + +* design user interfaces with clear and distinguishable styles for different components, such as links, buttons, form elements, or texts +* design user interfaces with font sizes that enhance content readability +* design user interfaces with adequate spacing to support readability and to help distinguish components from one another +* design user interfaces with text cues to convey information provided through vision only, such as an asterisk to convey required form fields in a form +* design user interfaces with other visual cues in addition to color, for example using different patterns, shapes, and icons + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +* Demonstrate the use of styles for distinguishing user interface components from one another, such as links, buttons, form elements, and texts. Explain how people rely on font sizes, spacing, and typography to distinguish components from one another. For references on how to apply distinguishable styles for user interface components, see @@@ +* Demonstrate use of different font sizes and explain how they affect readability of the content. For reference on how to apply font sizes that allow content readability, see @@@ +* Show examples of different page layouts with and without adequate spacing. Explain how spacing allows to distinguish different user interface components and pieces of content from one another. For references on how to apply adequate spacing, see @@@ +* Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a store is open or closed. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. For references on how to provide information using sensory characteristics apart form vision, see technique [• G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). +* Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so alternative methods to convey that information are required. For references on how to convey information without using color alone, see techniques [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +* Practical — Students design a paper prototype with distinguishable styles that help perceive different contents. Assess how students use different style properties to make content perceivable and to distinguish components from one another. +* Practical &mdash: Give students examples of color alone used to provide information and ask them to provide text information and visual cues to supplement that information. Assess how students provide the necessary textual information and visual cues to supplement information provided exclusively with color. + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + +### Topic: Contrast Ratios + +{% include excol.html type="middle" %} + +Explain how contrast ratios are essential for people with low vision to perceive, distinguish, and understand contents. + +#### Learning Outcomes for Topic + +Students should be able to: + +* explain how appropriate contrast ratios allow people with disabilities to read, understand, and distinguish user interface components +* design user interfaces with texts and images of text that have a contrast ratio of at least 4.5:1 with respect to their background +* design user interfaces with large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background +* design user interfaces with components and graphics that have a contrast ratio of at least 3:1 with respect to their background + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +* Show examples of different foreground and background color combinations. Explain how contrast ratios between foreground and background allow users to perceive content and distinguish components from one another. +* Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios need to be at least 4.5:1. For references on how to apply contrast ratios to text (including images of text), see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). +* Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. For techniques on how to add contrast ratios for graphics and interface components, see technique [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +* Short Answer Questions — Give students a set of user interface components and ask them what the contrast ratio should be. Assess how students understand and distinguish contrast ratios for different user interface components. +* Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + +### Topic: Flexible Design + +{% include excol.html type="middle" %} + +Explain how people with disabilities use different screen sizes, screen configurations, break points, and style sheets to identify, distinguish, and process contents. + +#### Learning Outcomes for Topic + +Students should be able to: + +* design user interfaces that support customizing line height, as well as spacing between paragraphs, words, and letters +* design user interfaces that support text resizing without loss of content and functionality +* design user interfaces that support content view and operation in both portrait and landscape orientations +* design user interfaces with target sizes and spaces to support tapping by people with mobility impairments and people using different input methods + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +* Show examples of different user interfaces that support customizing line height as well as spacing between paragraphs, words, and letters to support readability. +* Explain that people with low vision often need to resize text to be able to read it properly. This includes resizing settings in the assistive technology, browser, and operating system. +* Show examples of user interfaces showing up in both portrait and landscape modes. Explain that the ability to show an interface both in portrait and landscape is crucial for people who cannot change their device orientation due to mobility impairments. +* Show examples of different tap targets and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that tap targets need to be large enough to accommodate different people's needs. + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +* Practical — Students design different paper prototypes with different interface layouts considering text resizing, line height, spacing between paragraphs, words, and letters. Assess how students consider text resizing, line height, and spacing between paragraphs, words, and letters while designing user interfaces. + +{% include excol.html type="end" %} + +{% include excol.html type="all" %} + +## Ideas to Assess Knowledge for Module + +Optional ideas to support assessment: + +* Portfolio — Students design a prototype of a single web page. Assess how students use color, layout, spacing, and position to support content perception and identification. + +## Teaching Resources + +Suggested resources to support your teaching: + +* @@@ +* [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. From ed9fe4a7783d0fa9a0cb284dbf1f6e8925850dc9 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 31 May 2021 10:55:27 +0200 Subject: [PATCH 123/416] Fixing typo --- content/designer/flexible-layout-and-design.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/flexible-layout-and-design.md b/content/designer/flexible-layout-and-design.md index 4ecd998d8..760e06d35 100644 --- a/content/designer/flexible-layout-and-design.md +++ b/content/designer/flexible-layout-and-design.md @@ -120,9 +120,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Demonstrate the use of styles for distinguishing user interface components from one another, such as links, buttons, form elements, and texts. Explain how people rely on font sizes, spacing, and typography to distinguish components from one another. For references on how to apply distinguishable styles for user interface components, see @@@ -* Demonstrate use of different font sizes and explain how they affect readability of the content. For reference on how to apply font sizes that allow content readability, see @@@ +* Demonstrate the use of different font sizes and explain how they affect readability of the content. For reference on how to apply font sizes that allow content readability, see @@@ * Show examples of different page layouts with and without adequate spacing. Explain how spacing allows to distinguish different user interface components and pieces of content from one another. For references on how to apply adequate spacing, see @@@ -* Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a store is open or closed. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. For references on how to provide information using sensory characteristics apart form vision, see technique [• G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). +* Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a store is open or closed. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. For references on how to provide information using sensory characteristics apart from vision, see technique [• G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). * Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so alternative methods to convey that information are required. For references on how to convey information without using color alone, see techniques [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). #### Ideas to Assess Knowledge for Topic From 804a14bc1447014b108d1d1a85c0c75d1eb394ec Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 31 May 2021 14:08:23 +0200 Subject: [PATCH 124/416] Updates to modules --- .../designer/flexible-layout-and-design.md | 4 +- content/designer/images-and-graphics.md | 88 ++++++++++++------- content/designer/information-design.md | 3 +- content/designer/interaction-and-feedback.md | 1 - content/designer/multimedia-and-animations.md | 1 - content/designer/navigation.md | 1 - 6 files changed, 60 insertions(+), 38 deletions(-) diff --git a/content/designer/flexible-layout-and-design.md b/content/designer/flexible-layout-and-design.md index 760e06d35..50b76bedf 100644 --- a/content/designer/flexible-layout-and-design.md +++ b/content/designer/flexible-layout-and-design.md @@ -198,7 +198,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to support assessment: -* Practical — Students design different paper prototypes with different interface layouts considering text resizing, line height, spacing between paragraphs, words, and letters. Assess how students consider text resizing, line height, and spacing between paragraphs, words, and letters while designing user interfaces. +* Practical — Students design different paper prototypes with different interface layouts considering text resizing, line height, spacing between paragraphs, words, and letters. Assess how students consider text resizing, line height, and spacing between paragraphs, words, and letters. {% include excol.html type="end" %} @@ -208,7 +208,7 @@ Optional ideas to support assessment: Optional ideas to support assessment: -* Portfolio — Students design a prototype of a single web page. Assess how students use color, layout, spacing, and position to support content perception and identification. +* Portfolio — Students design a prototype of a web page. Assess how students use color, layout, spacing, and position to support content perception and identification. ## Teaching Resources diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index ec32fc1fb..6a98cd7cf 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -25,20 +25,20 @@ navigation: Courses based on this module should: * explain strategies that people with disabilities use to interact with images -* explain accessibility requirements related to images and graphics, such as text alternatives for images +* explain accessibility requirements related to images and graphics, such as text alternatives, text descriptions, or contrast ratios ## Learning Outcomes for Module Students should be able to: * explain how images affect processing of information, content identification, and understanding of functionality by people with disabilities -* identify and describe different uses of images, including for informative, functional, and decorative purposes +* identify and describe different uses of images, for example informative, functional, and decorative purposes * provide appropriate text alternatives for graphical components included in the design phase, such as logos, links, and menu items * design user interfaces with alternative systems to verify captcha and other methods to verify human interaction -* provide images with appropriate contrast ratios and ensure images resize as required +* provide images with appropriate contrast ratios +* create user interfaces that present information as text wherever possible, instead of using images of text * identify related requirements for developers to code images and text alternatives appropriately -* identify related requirements for content authors to provide appropriate text alternatives for images included in the authoring phase -* identify related requirements for content authors to present information as text wherever possible, instead of using images of text +* identify related requirements for content authors to provide appropriate text alternatives for images included in the authoring phase, such as complex graphics and charts {% include excol.html type="all" %} @@ -70,7 +70,7 @@ Skills required for this module: * Applied expertise in teaching: * [WCAG Success Criterion 1.1.1 Non-Text Content](https://www.w3.org/WAI/WCAG21/quickref/#non-text-content) * [WCAG Success Criterion 1.4.5 Images of Text](https://www.w3.org/WAI/WCAG21/quickref/#images-of-text) - * @@@ + * [WCAG Success Criterion 1.4.9 Images of Text (No Exception)](https://www.w3.org/WAI/WCAG21/quickref/#images-of-text-no-exception) {% include excol.html type="end" %} @@ -80,74 +80,100 @@ Topics to achieve the learning outcomes: {% include excol.html type="start" %} -### Topic: Ornamental Graphics +### Topic: Text Alternatives {% include excol.html type="middle" %} -Decorative images are those which convey no information or function and are used for ornamental purposes. Discuss examples of these types of images and explain accessibility requirements that these images have, such as contrast ratios and ability of the image to resize. +Explain several uses of text alternatives, such as to describe the function of graphical user interface component (functional images) and to describe the images so that users can understand their purpose without looking at them (informational images). Explain that describing the functions of user graphical interface components is a designer's responsibility, whereas providing text alternatives for informative images is a responsibility shared with the content author. #### Learning Outcomes for Topic Students should be able to: -* identify and describe different uses of images with decorative meaning, such as visual and ornamental -* provide decorative images with appropriate contrast ratios when these images are necessary to understand the content -* provide decorative images that resize according to user needs and preferences -* identify related requirements for developers to code decorative images appropriately +* identify situations where it is necessary to provide text alternatives that present equivalent information as that contained in the image +* provide short text alternatives for controls and components that accept user input, for example search, print, and save buttons +* provide text alternatives that identify and describe the purpose of human verification systems, such as captcha +* collaborate with other team members to implement several modalities of captcha that rely on other sensory characteristics apart from vision, such as visual, auditory, and logical +* describe related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, such as diagrams or charts #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of borders and icons that do not convey function or information. Explain that they serve ornamental purposes. -* Provide examples of images and graphics that are necessary to understand the overall content and explain that they have a contrast ratio requirement of at least 3:1. +* Show examples of different images used to convey functionality, such as for printing, searching, or saving a document. Explain that it is necessary to provide and equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). +* Show examples of different images that convey information, such as images to provide instructions, or to identify objects. Explain that such information needs to be provided using text alternatives, so that the purpose of the image can be understood without having to look at the image. Emphasize that these alternatives may require coordination between designers, developers, and content authors. For references on how to provide text alternatives for images, see [G82: Providing a text alternative that identifies the purpose of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G82.html). +* Show examples of different verification systems, such as captcha, to identify human beings trying to access a service or system. Explain that these mechanisms need to support several sensory characteristics, such as visual, auditory, or cognitive. For references on how to provide accessible captcha, see [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -* Practical — Ask students to provide decorative images to illustrate a text article and ask them to ensure these icons are visible in different screen sizes and devices. Assess how students understand the requirement for decorative images to have appropriate contrast ratios and to resize depending on the user needs and preferences. +* Practice — Give students a set of images conveying function, such as print or search buttons, and ask them to provide their corresponding text alternative. Assess how students identify images that convey function and provide their corresponding text alternative. +* Short Answer Questions — Present students with a situation where a human verification system needs to be used and ask them to provide authentication alternatives for other sensory characteristics apart from vision. Assess how students understand the need for providing human verification systems that rely on different sensory characteristics in addition to captcha. {% include excol.html type="end" %} {% include excol.html type="start" %} -### Topic: Text Alternatives +### Topic: Data Visualization {% include excol.html type="middle" %} -Explain several uses of text alternatives, such as to describe the function of graphical user interface component (functional images) and to describe the images so that users can understand their purpose without looking at them (informational images). Explain that describing the functions of user graphical interface components is a designer's responsibility, whereas providing text alternatives for informative images is a responsibility shared with the content author. +Images of text are those which are intended to be read as text, but are coded as an image. Complex images are those whose description requires more than a short phrase. Show examples of these types of images and explain that coordination among different team members is required to create accessible complex images. Explain accessibility requirements that these images have, such as appropriate contrast ratios. #### Learning Outcomes for Topic Students should be able to: -* identify situations where it is necessary to provide text alternatives that present equivalent information as that contained in the image -* provide short text alternatives for controls and components that accept user input, for example search, print, and save buttons -* provide text alternatives that identify and describe the purpose of human verification systems, such as captcha -* collaborate with other team members to implement several modalities of captcha that rely on other sensory characteristics apart from vision, such as visual, auditory, and logical -* describe related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, such as diagrams or charts +* create user interfaces that support appropriate contrast ratios for complex images when they are required to understand the contents +* create user interfaces that support use of text instead of images of text as much as possible +* identify related requirements for content authors to provide descriptions for complex images that serve the same purpose as the graphical object #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of different images used to convey functionality, such as for printing, searching, or saving a document. Explain that it is necessary to provide and equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). -* Show examples of different images that convey information, such as images to provide instructions, or to identify objects. Explain that such information needs to be provided using text alternatives, so that the purpose of the image can be understood without having to look at the image. Emphasize that these alternatives may require coordination between designers, developers, and content authors. For references on how to provide text alternatives for images, see [G82: Providing a text alternative that identifies the purpose of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G82.html). -* Show examples of different verification systems, such as captcha, to identify human beings trying to access a service or system. Explain that these mechanisms need to support several sensory characteristics, such as visual, auditory, or cognitive. For references on how to provide accessible captcha, see [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). +* Provide examples of complex images and graphics, such as charts and diagrams. Explain that they need to have a contrast ratio requirement of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). +* Explain that images of text present information intended to be read as text. Emphasize that sometimes it is difficult to tell visually if text has been coded as a text or as an image. Explain that coding an image of text appropriately is a responsibility of the developer, whereas providing descriptions for images of text is a responsibility shared with the content author. +* Refer back to examples of complex images and graphics. Explain that they need to have text alternatives and descriptions that allow people to understand and interpret such images without having to look at them. Explain that providing these text alternatives is a designers responsibility, whereas providing the text descriptions is a responsibility shared with the content author. -#### Ideas to Assess Knowledge for Topic +#### IDeas to Assess Knowledge for Topic -Optional ideas to support assessment: +Optional ideas to assess knowledge: -* Practice — Give students a set of images conveying function, such as print or search buttons, and ask them to provide their corresponding text alternative. Assess how students identify images that convey function and provide their corresponding text alternative. -* Short Answer Questions — Present students with a situation where a human verification system needs to be used and ask them to provide authentication alternatives for other sensory characteristics apart from vision. Assess how students understand the need for providing human verification systems that rely on different sensory characteristics in addition to captcha. +* Practical — Students add complex images to a website, such as charts or diagrams, and ensure they have the required contrast ratio. Assess how students understand the contrast requirements for complex images. {% include excol.html type="end" %} -### Topic: Data Visualization +{% include excol.html type="start" %} + +### Topic: Ornamental Graphics + +{% include excol.html type="middle" %} + +Decorative images are used for ornamental purposes and convey no information or function. Explain that these images do not require text alternatives, as these would add clutter to the information that assistive technologies provide to users. + +#### Learning Outcomes for Topic + +Students should be able to: -[to be developed]. +* identify and describe different uses of images with decorative purpose, such as ornamental +* create user interfaces with decorative images that do not overlap with user interface components and contents when viewed using different screen sizes, configurations, and setups +* identify related requirements for developers to code decorative images so that they are ignored by assistive technologies + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +* Show examples of borders and icons that do not convey function or information. Explain that they serve ornamental purposes. + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +* Practical — Ask students to provide decorative images to illustrate a text article and ask them to ensure these icons are visible in different screen sizes and devices. Assess how students understand the need for decorative images to adapt to the different user needs and preferences. + +{% include excol.html type="end" %} {% include excol.html type="all" %} diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 3e4f03041..2acd900a5 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -67,7 +67,6 @@ Skills required for this module: * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Applied expertise in teaching: * [WCAG Success Criterion 3.3.2 Labels or Instructions](https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions) - * @@@ {% include excol.html type="end" %} @@ -162,7 +161,7 @@ Show examples of how different groups of people interact with large amounts of s Students should be able to: * design user interfaces that support grouping of related form controls, such as those collecting personal information, payment methods, and consent to legal conditions -* design user interfaces that support filtering data, for example using search boxes or spliting the data set into smaller subsets of data +* design user interfaces that support filtering data, for example using search boxes or splitting the data set into smaller subsets of data * design user interfaces that support navigating to specific pieces of data using the keyboard * design user interfaces that support customizing the results that are shown at a given time diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 2ee553a16..03f061d21 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -66,7 +66,6 @@ Skills required for this module: {% include excol.html type="middle" %} * Applied expertise in teaching: - * @@@ {% include excol.html type="end" %} diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index ad25e1440..ddc07fb6b 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -75,7 +75,6 @@ Skills required for this module: * [WCAG Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide) * [WCAG Success Criterion 2.3.1 Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG21/quickref/#three-flashes-or-below-threshold) * [WCAG Success Criterion 3.2.1 On Focus](https://www.w3.org/WAI/WCAG21/quickref/#on-focus) - * @@@ {% include excol.html type="end" %} diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 5ed1acf07..91117fe62 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -72,7 +72,6 @@ Skills required for this module: * [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) * [WCAG 2 Success Criterion 2.4.8 Location](https://www.w3.org/WAI/WCAG21/quickref/#location) * [WCAG 2 Success Criterion 3.2.3 Consistent Navigation](https://www.w3.org/WAI/WCAG21/quickref/#consistent-navigation) - * @@@ {% include excol.html type="end" %} From aba3704a8f549c84901cf4ef202b20e3bf5bbf44 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 31 May 2021 15:00:24 +0200 Subject: [PATCH 125/416] Updates to modules --- content/designer/images-and-graphics.md | 12 +++++++---- content/designer/information-design.md | 21 +++++++++++-------- content/designer/interaction-and-feedback.md | 11 ++++++---- content/designer/multimedia-and-animations.md | 8 ++++--- content/designer/navigation.md | 2 +- .../understanding-and-involving-users.md | 1 + 6 files changed, 34 insertions(+), 21 deletions(-) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 6a98cd7cf..e9eff6e3e 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -119,7 +119,7 @@ Optional ideas to support assessment: {% include excol.html type="middle" %} -Images of text are those which are intended to be read as text, but are coded as an image. Complex images are those whose description requires more than a short phrase. Show examples of these types of images and explain that coordination among different team members is required to create accessible complex images. Explain accessibility requirements that these images have, such as appropriate contrast ratios. +Images of text are those which are intended to be read as text but are coded as an image. Complex images are those whose description requires more than a short phrase. Show examples of these types of images and explain that coordination among different team members is required to create accessible complex images. Explain accessibility requirements that these images have, such as appropriate contrast ratios. #### Learning Outcomes for Topic @@ -135,9 +135,9 @@ Optional ideas to teach the learning outcomes: * Provide examples of complex images and graphics, such as charts and diagrams. Explain that they need to have a contrast ratio requirement of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). * Explain that images of text present information intended to be read as text. Emphasize that sometimes it is difficult to tell visually if text has been coded as a text or as an image. Explain that coding an image of text appropriately is a responsibility of the developer, whereas providing descriptions for images of text is a responsibility shared with the content author. -* Refer back to examples of complex images and graphics. Explain that they need to have text alternatives and descriptions that allow people to understand and interpret such images without having to look at them. Explain that providing these text alternatives is a designers responsibility, whereas providing the text descriptions is a responsibility shared with the content author. +* Refer back to examples of complex images and graphics. Explain that they need to have text alternatives and descriptions that allow people to understand and interpret such images without having to look at them. Explain that providing these text alternatives is a designers' responsibility, whereas providing the text descriptions is a responsibility shared with the content author. -#### IDeas to Assess Knowledge for Topic +#### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: @@ -188,4 +188,8 @@ Optional ideas to support assessment: Suggested resources to support your teaching: -[To be developed.] +* @@@ +* [Images (WAI Web Accessibility Tutorials)](https://www.w3.org/WAI/tutorials/images/) — Shows how to provide alternatives to images that are accessible to people with disabilities. +* [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. +* [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. + diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 2acd900a5..8be22a21e 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -101,15 +101,15 @@ Optional ideas to teach the learning outcomes: * Show examples of large amounts of text, for example an ebook. Discuss several ways to divide the text both visually and programmatically so that it is easier to understand and to navigate, for example by using headings or several pages. * Show examples of how icons, charts, and graphics can complement information presented in text. Explain that they help users with reading disabilities understand difficult pieces of text. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). -* Show examples of words that may be difficult to understand or that are used in a restricted way. Explain that users with cognitive disabilities or those not familiar with such words need definitions to understand the meaning of such words. Explain that defining the mechanisms to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the conten author. For references on how to provide the definition of a word or phrase used in an unusual or restricted way, see technique [G101: Providing the definition of a word or phrase used in an unusual or restricted way](https://www.w3.org/WAI/WCAG21/Techniques/general/G101.html). -* Show examples of abbreviations such as short forms of words and acronyms. Explain that users with cognitive disabilities and those not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the mechanisms to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the conten author. For references on how to provide the expansion or explanation of an abbreviation, see technique [G102: Providing the expansion or explanation of an abbreviation](https://www.w3.org/WAI/WCAG21/Techniques/general/G102). +* Show examples of words that may be difficult to understand or that are used in a restricted way. Explain that users with cognitive disabilities or those not familiar with such words need definitions to understand the meaning of such words. Explain that defining the mechanisms to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. For references on how to provide the definition of a word or phrase used in an unusual or restricted way, see technique [G101: Providing the definition of a word or phrase used in an unusual or restricted way](https://www.w3.org/WAI/WCAG21/Techniques/general/G101.html). +* Show examples of abbreviations such as short forms of words and acronyms. Explain that users with cognitive disabilities and those not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the mechanisms to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. For references on how to provide the expansion or explanation of an abbreviation, see technique [G102: Providing the expansion or explanation of an abbreviation](https://www.w3.org/WAI/WCAG21/Techniques/general/G102). #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -* Practical mdash; Present students with an ebook and ask them todefine how it should be split into smaller and more manageable pieces to that it can be easier to navigate and understand. Assess how students use mechanisms to divide large amounts of text into smaller and more manageable pieces. -* Practical — Present students with unusual words and abbreviations and ask them to define a mechanism to provide the explanation of such words or the expansion of the abbleviations. Assess how students define a mechanism to provide explanations of unusual words and expansions of abbreviations. +* Practical mdash; Present students with an ebook and ask them to define how it should be split into smaller and more manageable pieces to that it can be easier to navigate and understand. Assess how students use mechanisms to divide large amounts of text into smaller and more manageable pieces. +* Practical — Present students with unusual words and abbreviations and ask them to define a mechanism to provide the explanation of such words or the expansion of the abbreviations. Assess how students define a mechanism to provide explanations of unusual words and expansions of abbreviations. {% include excol.html type="end" %} @@ -169,13 +169,14 @@ Students should be able to: Optional ideas to teach the learning outcomes: -[To be developed.] +* Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to interact and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and programmatically, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations is a designers' responsibility, whereas coding those relations is a developers' responsibility. +* Show examples of long lists of data, such as lists of countries or cities on a travel application. Explain that these lists are difficult to navigate with the keyboard, as it takes a long time to go through the different options one by one by pressing the arrow keys. Discuss several ways to make these interactions more efficient, such as providing ways for the user to type the first letters of their desired option, which reduces the amount of shown results. #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -[To be developed.] +* Practical — Ask students to group related information in a form that asks for information to open a bank account. Asses how students build groups of related information, such as those collecting personal information, payment methods, and consent to legal conditions, and how they provide ways for users to identify each of the groups. {% include excol.html type="end" %} @@ -185,11 +186,13 @@ Optional ideas to support assessment: Optional ideas to support assessment: -[To be developed]. +* Portfolio — Students include different pieces of information on a website, for example text, forms, and images. Assess how students provide for people to identify different pieces of information, how students split large amounts of information into smaller and more manageable pieces, and how they group related information together. ## Teaching Resources Suggested resources to support your teaching: -[To be developed]. - +* @@@ +* [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. +* [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 03f061d21..4452888cf 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -152,7 +152,7 @@ Optional ideas to support assessment: {% include excol.html type="middle" %} -Show examples of user interfaces that react to motion, such as shaking the device to perform a specific action. Explain that some people may perform these motion based gestures inadvertently, some others may not be able to perform them at all. Discuss some alternatives to motion-based gestures. +Show examples of user interfaces that react to motion, such as shaking the device to perform a specific action. Explain that some people may perform these motion-based gestures inadvertently, some others may not be able to perform them at all. Discuss some alternatives to motion-based gestures. Discuss some gestures that require dragging and drawing specific shapes on a tactile screen. Explain that these are difficult (and sometimes impossible) for some people with mobility impairments. @@ -178,7 +178,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to support assessment: * Practical — Give students an interface that uses a motion-based gesture to perform an action and ask them to provide alternatives to that gesture. Assess how students provide alternatives to motion-based gestures. -* Practical — Give students an interface that uses a multi path based gesture to perform an action and ask them to provide alternatives to that gesture. Assess how students provide alternatives to multi-pointer and path-based gestures. +* Practical — Give students an interface that uses a multi path-based gesture to perform an action and ask them to provide alternatives to that gesture. Assess how students provide alternatives to multi-pointer and path-based gestures. {% include excol.html type="end" %} @@ -190,7 +190,7 @@ Optional ideas to support assessment: Show examples of notification messages. Explain that they need to be distinguishable by all users, including through visual cues and programmatically. -Explain that applications may have different levels of priority when in the context of a complex application. Defining such levels of priority and which types of notifications each of them should contain is a designers responsibility. +Explain that applications may have different levels of priority when in the context of a complex application. Defining such levels of priority and which types of notifications each of them should contain is a designers' responsibility. #### Learning Outcomes for Topic @@ -230,4 +230,7 @@ Optional ideas to support assessment: Suggested resources to support your teaching: -[To be developed.] +* @@@ +* [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. +* [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index ddc07fb6b..14af3d33d 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -136,14 +136,14 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of contents that move or blink, such as animations and carousels. Explain that these can cause problems for some users that cannot keep up with the pace of the auto-updating content or that these animations can cause seizure and physical reactions. For references on how to design suer interfaces that allow to pause, stop, and hide moving, blinking, or auto-updating content, see the following techniques: +* Show examples of contents that move or blink, such as animations and carousels. Explain that these can cause problems for some users that cannot keep up with the pace of the auto-updating content or that these animations can cause seizure and physical reactions. For references on how to design user interfaces that allow to pause, stop, and hide moving, blinking, or auto-updating content, see the following techniques: * [G4: Allowing the content to be paused and restarted from where it was paused](https://www.w3.org/WAI/WCAG21/Techniques/general/G4) * [G11: Creating content that blinks for less than 5 seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G11) * [G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)](https://www.w3.org/WAI/WCAG21/Techniques/general/G152) * [G186: Using a control in the Web page that stops moving, blinking, or auto-updating content](https://www.w3.org/WAI/WCAG21/Techniques/general/G186) * [G187: Using a technology to include blinking content that can be turned off via the user agent](https://www.w3.org/WAI/WCAG21/Techniques/general/G187) * Show examples of flashing content and explain that they can cause seizures or physical reactions for some people. Emphasize that all components of the content need to be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole web page or application. For references on how to design interfaces that support flashing below the general flash and red flash thresholds or that support flashing below 3 seconds, see techniques [G19: Ensuring that no component of the content flashes more than three times in any 1-second period](https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html) and [G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold](https://www.w3.org/WAI/WCAG21/Techniques/general/G15.html). -* Show examples of itneractions triggered by animations, such as additional movements when scrolling. Explain that these animations can cause distraction and vestibular disorders such as dizziness, nausea, and headaches for some people. Discuss different ways to resolve these issues, such as including a preference to disable animations or using technology specific properties to reduce such animations. +* Show examples of interactions triggered by animations, such as additional movements when scrolling. Explain that these animations can cause distraction and vestibular disorders such as dizziness, nausea, and headaches for some people. Discuss different ways to resolve these issues, such as including a preference to disable animations or using technology specific properties to reduce such animations. * Use a screen reader to navigate an application that plays audio automatically for more than 3 seconds, such as a video player with audio that is longer than 3 seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a mechanism to pause or control the volume of that audio. Explain that the operating system often provides such mechanism. For references on how to design interfaces that support mechanisms to pause or control the volume of any audio that plays automatically, see the following techniques: * [G60: Playing a sound that turns off automatically within three seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G60.html) * [G170: Providing a control near the beginning of the Web page that turns off sounds that play automatically](https://www.w3.org/WAI/WCAG21/Techniques/general/G170.html) @@ -169,4 +169,6 @@ Optional ideas to support assessment: Suggested resources to support your teaching: -[To be developed.] +* @@@ +* [Video Captions (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/captions/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 91117fe62..652dfedbe 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -106,7 +106,7 @@ Optional ideas to teach the learning outcomes: * Explain menu conventions that relate to accessibility, such as clear and consistent styling to convey menu behaviors and states. Introduce patterns for mouse, keyboard, and tactile interaction with menus. * Demonstrate menu interaction using different input devices, such as keyboard, mouse, and tactile. For example, activating a menu option by tapping, pressing the Enter key, and mouse clicking. Explain that defining the interactions is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. -* Show examples of menu and menu items that contain large texts. Explain that, when used in smaller viewports or with different screen configurations, these text need to resize so that they are perceived in their entirety. +* Show examples of menu and menu items that contain large texts. Explain that, when used in smaller viewports or with different screen configurations, these texts need to resize so that they are perceived in their entirety. * Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Emphasize that the states of these menu items need to be communicated using visual cues as well as semantics. Explain that providing the visual cues is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/understanding-and-involving-users.md b/content/designer/understanding-and-involving-users.md index 4503294ab..d4fa2dafc 100644 --- a/content/designer/understanding-and-involving-users.md +++ b/content/designer/understanding-and-involving-users.md @@ -206,4 +206,5 @@ Optional ideas to support assessment: Suggested resources to support your teaching: * [[Involving Users in Web Projects for Better, Easier Accessibility]](https://www.w3.org/WAI/planning/involving-users/) — Helps you understand real-world accessibility issues, such as how people with disabilities and older people use the web with adaptive strategies and assistive technologies. +* [Web Accessibility Perspectives Videos: Explore the Impact and Benefits for Everyone | Web Accessibility Initiative (WAI) | W3C](https://www.w3.org/WAI/perspective-videos/) — Explore the impact of accessibility and the benefits for everyone in a variety of situations. * [[How People with Disabilities Use the Web]](/people-use-web/) — Describes some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. From 7815bbb98078c15c3e1e2af02cb8df080771df9a Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 31 May 2021 15:26:50 +0200 Subject: [PATCH 126/416] Updates to modules --- content/designer/multimedia-and-animations.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 14af3d33d..33cff9a01 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -25,14 +25,15 @@ navigation: Courses based on this module should: * explain strategies that people with disabilities use to access multimedia contents, such as audio and video -* explain accessibility requirements for multimedia content, such as captions, sign language, and audio descriptions +* explain accessibility requirements for multimedia content, such as transcripts for audio, sign language, and audio descriptions ## Learning Outcomes for Module Students should be able to: * identify accessibility requirements for different types of audio or video content -* design user interfaces that consider placement of alternatives to multimedia content, such as transcripts for audio and audio described content, +* research and promote accessible media players to access transcripts for audio, audio descriptions, and sign language +* design user interfaces that consider placement of alternatives to multimedia content, such as transcripts for audio and audio described content * design user interfaces that support switching transcripts and audio described content on or off * design user interfaces with mechanisms to pause, stop, and hide any moving, blinking, and auto-updating content, including animations and carousels * design user interfaces with mechanisms to stop or control the volume of auto-playing audio @@ -70,8 +71,9 @@ Skills required for this module: * [WCAG Success Criterion 1.2.1 Audio-only and Video-only (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#captions-prerecorded0 * [WCAG Success Criterion 1.2.2 Captions (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#captions-prerecorded) * [WCAG Success Criterion 1.2.3 Audio Description or Media Alternative (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#audio-description-or-media-alternative-prerecorded) - * [WCAG Success Criterion 1.4.4 Captions (Live)](https://www.w3.org/WAI/WCAG21/quickref/#captions-live) + * [WCAG Success Criterion 1.2.4 Captions (Live)](https://www.w3.org/WAI/WCAG21/quickref/#captions-live) * [WCAG Success Criterion 1.2.5 Audio Descriptions (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#audio-description-prerecorded) + * [WCAG Success Criterion 1.4.6 Sign Language (prerecorded](https://www.w3.org/WAI/WCAG21/quickref/#sign-language-prerecorded) * [WCAG Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide) * [WCAG Success Criterion 2.3.1 Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG21/quickref/#three-flashes-or-below-threshold) * [WCAG Success Criterion 3.2.1 On Focus](https://www.w3.org/WAI/WCAG21/quickref/#on-focus) @@ -94,7 +96,7 @@ Audio descriptions are essential for people who cannot see the video. Captions a Students should be able to -* identify and distinguish the different types of multimedia content, such as pre-recorded versus live, synchronous versus asynchronous audio and video +* identify and distinguish the different types of multimedia content, such as prerecorded versus live, synchronous versus asynchronous audio and video * create designs that support equivalent text alternatives for prerecorded audio-only content * create designs that support text alternatives and audio track for a prerecorded video-only content that presents equivalent information * create designs that allow to provide captions and audio descriptions for any prerecorded and live audio content in synchronized media @@ -163,8 +165,8 @@ Optional ideas to support assessment: Optional ideas to support assessment: -[To be developed.] - +* Research — Students research an accessible media player and explain how different groups of people with disabilities use the player. Assess how students understand how people with disabilities interact with multimedia content and players. +* Portfolio — Students include accessible video and audio contents on a website. Assess how students understand the accessibility requirements of video and audio content, including transcripts for audio, audio descriptions, and sign language. ## Teaching Resources Suggested resources to support your teaching: From d4394b3ddbac4630a7632ef9f27f4d58820a5b73 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 1 Jun 2021 08:14:48 +0200 Subject: [PATCH 127/416] Fixing markdown for resources --- content/designer/understanding-and-involving-users.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/understanding-and-involving-users.md b/content/designer/understanding-and-involving-users.md index d4fa2dafc..8952bd6a6 100644 --- a/content/designer/understanding-and-involving-users.md +++ b/content/designer/understanding-and-involving-users.md @@ -206,5 +206,5 @@ Optional ideas to support assessment: Suggested resources to support your teaching: * [[Involving Users in Web Projects for Better, Easier Accessibility]](https://www.w3.org/WAI/planning/involving-users/) — Helps you understand real-world accessibility issues, such as how people with disabilities and older people use the web with adaptive strategies and assistive technologies. -* [Web Accessibility Perspectives Videos: Explore the Impact and Benefits for Everyone | Web Accessibility Initiative (WAI) | W3C](https://www.w3.org/WAI/perspective-videos/) — Explore the impact of accessibility and the benefits for everyone in a variety of situations. +* [Web Accessibility Perspectives Videos: Explore the Impact and Benefits for Everyone](https://www.w3.org/WAI/perspective-videos/) — Explore the impact of accessibility and the benefits for everyone in a variety of situations. * [[How People with Disabilities Use the Web]](/people-use-web/) — Describes some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. From dc532d7cb3b004cc401618bc05ed673ccf364f3b Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 1 Jun 2021 08:35:21 +0200 Subject: [PATCH 128/416] Adding WCAG to resources. --- content/designer/flexible-layout-and-design.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/designer/flexible-layout-and-design.md b/content/designer/flexible-layout-and-design.md index 50b76bedf..c0ef1485d 100644 --- a/content/designer/flexible-layout-and-design.md +++ b/content/designer/flexible-layout-and-design.md @@ -215,4 +215,5 @@ Optional ideas to support assessment: Suggested resources to support your teaching: * @@@ +* [[How People with Disabilities Use the Web]](/people-use-web/) — Describes some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. * [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. From d48398b46a9a86ec17f00e17396a837bdca5e83d Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 2 Jun 2021 18:43:33 +0200 Subject: [PATCH 129/416] Updating modules --- content/designer/designer-modules.md | 11 ++++- .../designer/flexible-layout-and-design.md | 14 +++--- content/designer/images-and-graphics.md | 43 ++++++++++--------- content/designer/information-design.md | 36 +++++++++------- content/designer/interaction-and-feedback.md | 42 ++++++++++-------- content/designer/multimedia-and-animations.md | 23 ++++++---- content/designer/navigation.md | 34 +++++++-------- .../understanding-and-involving-users.md | 29 +++++++------ 8 files changed, 128 insertions(+), 104 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index cd4e0bfab..5a205b60a 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -27,8 +27,15 @@ navigation: The designer modules guide the creation of courses that: -* @@@ -* @@@ +* introduce key accessibility terms for designers and relate some design terms to accessibility +* present strategies to understand and involve people with disabilities in user research activities +* demonstrate and explain how accessible design enables people with disabilities to use websites and applications +* teach accessible design techniques for: + * user research + * visual design + * information design + * user experience + * interaction design These modules focus on user research, visual, and interaction aspects to design accessible web pages and applications. The modules primarily address the following roles: diff --git a/content/designer/flexible-layout-and-design.md b/content/designer/flexible-layout-and-design.md index c0ef1485d..1ab923264 100644 --- a/content/designer/flexible-layout-and-design.md +++ b/content/designer/flexible-layout-and-design.md @@ -121,9 +121,9 @@ Optional ideas to teach the learning outcomes: * Demonstrate the use of styles for distinguishing user interface components from one another, such as links, buttons, form elements, and texts. Explain how people rely on font sizes, spacing, and typography to distinguish components from one another. For references on how to apply distinguishable styles for user interface components, see @@@ * Demonstrate the use of different font sizes and explain how they affect readability of the content. For reference on how to apply font sizes that allow content readability, see @@@ -* Show examples of different page layouts with and without adequate spacing. Explain how spacing allows to distinguish different user interface components and pieces of content from one another. For references on how to apply adequate spacing, see @@@ -* Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a store is open or closed. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. For references on how to provide information using sensory characteristics apart from vision, see technique [• G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). -* Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so alternative methods to convey that information are required. For references on how to convey information without using color alone, see techniques [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). +* Show examples of different page layouts with and without adequate spacing. Explain how spacing allows to distinguish different user interface components and pieces of content from one another. EMphasize that spacing also allows for better readability of contents and for better identifications of the different parts of the user interface. For references on how to apply adequate spacing, see @@@ +* Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a store is open or closed and those with visual clues only to communicate that a product is sold out. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). +* Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so alternative methods to convey that information are required. For references on how to convey information without using color alone, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). #### Ideas to Assess Knowledge for Topic @@ -156,7 +156,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of different foreground and background color combinations. Explain how contrast ratios between foreground and background allow users to perceive content and distinguish components from one another. -* Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios need to be at least 4.5:1. For references on how to apply contrast ratios to text (including images of text), see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). +* Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios for text (including images of text) need to be at least 4.5:1 with respect to their background. For references on how to apply contrast ratios to text (including images of text), see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). * Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. For techniques on how to add contrast ratios for graphics and interface components, see technique [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). #### Ideas to Assess Knowledge for Topic @@ -180,19 +180,19 @@ Explain how people with disabilities use different screen sizes, screen configur Students should be able to: -* design user interfaces that support customizing line height, as well as spacing between paragraphs, words, and letters * design user interfaces that support text resizing without loss of content and functionality * design user interfaces that support content view and operation in both portrait and landscape orientations * design user interfaces with target sizes and spaces to support tapping by people with mobility impairments and people using different input methods +* design user interfaces that support customizing line height, as well as spacing between paragraphs, words, and letters #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of different user interfaces that support customizing line height as well as spacing between paragraphs, words, and letters to support readability. -* Explain that people with low vision often need to resize text to be able to read it properly. This includes resizing settings in the assistive technology, browser, and operating system. +* Explain that people with low vision often need to resize text to be able to read it properly. This includes resizing text up to 200% using browsers functionality. For references on how to ensure text resizes up to 200%, see technique [G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width](https://www.w3.org/WAI/WCAG21/Techniques/general/G179). * Show examples of user interfaces showing up in both portrait and landscape modes. Explain that the ability to show an interface both in portrait and landscape is crucial for people who cannot change their device orientation due to mobility impairments. * Show examples of different tap targets and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that tap targets need to be large enough to accommodate different people's needs. +* Show examples of different user interfaces that support customizing line height as well as spacing between paragraphs, words, and letters to support readability. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index e9eff6e3e..648140395 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -24,8 +24,8 @@ navigation: Courses based on this module should: -* explain strategies that people with disabilities use to interact with images -* explain accessibility requirements related to images and graphics, such as text alternatives, text descriptions, or contrast ratios +* explain strategies that people with disabilities use to access information contained in images +* explain accessibility requirements related to images and graphics, such as text alternatives, text descriptions, and contrast ratios ## Learning Outcomes for Module @@ -34,9 +34,9 @@ Students should be able to: * explain how images affect processing of information, content identification, and understanding of functionality by people with disabilities * identify and describe different uses of images, for example informative, functional, and decorative purposes * provide appropriate text alternatives for graphical components included in the design phase, such as logos, links, and menu items -* design user interfaces with alternative systems to verify captcha and other methods to verify human interaction +* design user interfaces with alternatives to visual captcha, for example auditory captcha, logical captcha, and biometrics * provide images with appropriate contrast ratios -* create user interfaces that present information as text wherever possible, instead of using images of text +* create user interfaces that present information as text when the desired visual presentation can be achieved by the technology in use, instead of using images of text * identify related requirements for developers to code images and text alternatives appropriately * identify related requirements for content authors to provide appropriate text alternatives for images included in the authoring phase, such as complex graphics and charts @@ -94,22 +94,22 @@ Students should be able to: * provide short text alternatives for controls and components that accept user input, for example search, print, and save buttons * provide text alternatives that identify and describe the purpose of human verification systems, such as captcha * collaborate with other team members to implement several modalities of captcha that rely on other sensory characteristics apart from vision, such as visual, auditory, and logical -* describe related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, such as diagrams or charts +* identify related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, such as diagrams or charts #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: * Show examples of different images used to convey functionality, such as for printing, searching, or saving a document. Explain that it is necessary to provide and equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). -* Show examples of different images that convey information, such as images to provide instructions, or to identify objects. Explain that such information needs to be provided using text alternatives, so that the purpose of the image can be understood without having to look at the image. Emphasize that these alternatives may require coordination between designers, developers, and content authors. For references on how to provide text alternatives for images, see [G82: Providing a text alternative that identifies the purpose of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G82.html). -* Show examples of different verification systems, such as captcha, to identify human beings trying to access a service or system. Explain that these mechanisms need to support several sensory characteristics, such as visual, auditory, or cognitive. For references on how to provide accessible captcha, see [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). +* Show examples of different images that convey information, such as images to provide instructions, or to identify objects. Explain that such information needs to be provided using text alternatives, so that the purpose of the image can be understood without having to look at the image. Emphasize that these alternatives may require coordination among designers, developers, and content authors. For references on how to provide text alternatives for images, see [G82: Providing a text alternative that identifies the purpose of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G82.html). +* Show examples of different verification systems, such as captcha, to identify human beings trying to access a service or system. Explain that these mechanisms need to support several sensory characteristics, such as visual, auditory, or cognitive. For references on how to provide accessible captcha, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -* Practice — Give students a set of images conveying function, such as print or search buttons, and ask them to provide their corresponding text alternative. Assess how students identify images that convey function and provide their corresponding text alternative. -* Short Answer Questions — Present students with a situation where a human verification system needs to be used and ask them to provide authentication alternatives for other sensory characteristics apart from vision. Assess how students understand the need for providing human verification systems that rely on different sensory characteristics in addition to captcha. +* Practical — Give students a set of images conveying function, such as a printer for a "print" button and a magnifying glass fort as "search" button. Ask students to provide an appropriate text alternative. Assess how students identify images that convey function and provide text alternatives that describe the functionality of the component the image is attached to. +* Short Answer Questions — Present students with a situation where a human verification system needs to be used and ask them to provide authentication alternatives for other sensory characteristics apart from vision. Assess how students understand the need for providing human verification systems that rely on different sensory characteristics in addition to vision. {% include excol.html type="end" %} @@ -119,23 +119,25 @@ Optional ideas to support assessment: {% include excol.html type="middle" %} -Images of text are those which are intended to be read as text but are coded as an image. Complex images are those whose description requires more than a short phrase. Show examples of these types of images and explain that coordination among different team members is required to create accessible complex images. Explain accessibility requirements that these images have, such as appropriate contrast ratios. +Show examples of complex images and images of text. Images of text are those which are intended to be read as text but are coded as an image. Complex images are those whose description requires more than a short phrase or sentence. Explain accessibility requirements that these images have, such as appropriate contrast ratios and appropriate text descriptions. + +Explain that coordination among different team members is required to establish the relations between parts of complex images and their adjacent components (for example text and other images) so that the relationship is perceived and understood visually and through the provided descriptions. #### Learning Outcomes for Topic Students should be able to: * create user interfaces that support appropriate contrast ratios for complex images when they are required to understand the contents -* create user interfaces that support use of text instead of images of text as much as possible -* identify related requirements for content authors to provide descriptions for complex images that serve the same purpose as the graphical object +* create user interfaces that support use of text instead of images of text when the technology in use can provide the desired visual presentation +* identify related requirements for content authors to provide descriptions for complex images that convey the same information as the graphical object #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: * Provide examples of complex images and graphics, such as charts and diagrams. Explain that they need to have a contrast ratio requirement of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). -* Explain that images of text present information intended to be read as text. Emphasize that sometimes it is difficult to tell visually if text has been coded as a text or as an image. Explain that coding an image of text appropriately is a responsibility of the developer, whereas providing descriptions for images of text is a responsibility shared with the content author. -* Refer back to examples of complex images and graphics. Explain that they need to have text alternatives and descriptions that allow people to understand and interpret such images without having to look at them. Explain that providing these text alternatives is a designers' responsibility, whereas providing the text descriptions is a responsibility shared with the content author. +* Explain that images of text present information intended to be read as text. Emphasize that sometimes it is difficult to tell visually if text has been coded as a text or as an image, so coordination among designers, developers, and content authors is needed to determine if the technologies in use can achieve the desired visual presentation. Emphasize that, if an image of text is still required, there needs to be a text alternative that conveys the same information as the image of text. Explain that coding an image of text appropriately is a responsibility of the developer, whereas providing descriptions for images of text is a responsibility shared with the content author. +* Show examples of complex images and graphics, such as maps, diagrams, and charts. Explain that they need to have text descriptions that allow people to understand and interpret such images without having to look at them. Explain that providing these text alternatives is a designers' responsibility, whereas providing the text descriptions is a responsibility shared with the content author. #### Ideas to Assess Knowledge for Topic @@ -147,25 +149,25 @@ Optional ideas to assess knowledge: {% include excol.html type="start" %} -### Topic: Ornamental Graphics +### Topic: Decorative Images {% include excol.html type="middle" %} -Decorative images are used for ornamental purposes and convey no information or function. Explain that these images do not require text alternatives, as these would add clutter to the information that assistive technologies provide to users. +Decorative images are used for ornamental purposes and convey no information or function. Explain that these images do not require text alternatives, as these would add clutter to the information that assistive technologies provide. #### Learning Outcomes for Topic Students should be able to: -* identify and describe different uses of images with decorative purpose, such as ornamental +* identify and describe different uses of images with decorative purposes, such as ornamental * create user interfaces with decorative images that do not overlap with user interface components and contents when viewed using different screen sizes, configurations, and setups -* identify related requirements for developers to code decorative images so that they are ignored by assistive technologies +* identify related requirements for developers to code decorative images so that they are skipped by assistive technologies #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of borders and icons that do not convey function or information. Explain that they serve ornamental purposes. +* Show examples of images and graphics that do not convey function or information, such as ornamental icons. Explain that they serve ornamental purposes as long as people can understand and interact with the user interface with or without such icons. Explain that deciding what is the images role is a designers' responsibility, whereas coding the images so that they rendered with the appropriate role is a developers' responsibility. #### Ideas to Assess Knowledge for Topic @@ -181,9 +183,8 @@ Optional ideas to support assessment: Optional ideas to support assessment: -[To be developed.] +* Portfolio — Students design the imagery for a website. Assess how students include accessibility requirements in the images in graphics they design, for example contrast ratios, text alternatives that belong to the design phase, and placeholders for any other text alternative that is planned for later stages of the design and development process. -* Portfolio — Students design the imagery for a website. Assess how students include accessibility requirements in the images in graphics they design. ## Teaching Resources Suggested resources to support your teaching: diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 8be22a21e..ac94eb0f8 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -25,19 +25,19 @@ navigation: Courses based on this module should: * present strategies to split large blocks of information into smaller pieces -* present strategies to group information that shares a common purpose so that it is easier to process +* present strategies for grouping information that shares a common purpose so that it is easier to understand ## Learning Outcomes for Module Students should be able to: * describe approaches to break down different types of content into smaller and more manageable pieces, including: - * the use of headings and pages to divide longer passages of text into smaller pieces + * the use of headings, pages, and chapter marks to divide longer passages of text into smaller pieces * the use of lists, simpler tables, and plain text to convey information presented in complex tables * the use of groups of form controls that share a common purpose - * the use of filters to display small data subsets from a given data set + * the use of filters to display smaller data subsets from a given large data set * describe the use of labels and instructions to make information in forms more understandable -* identify related requirements for developers to programmatically associate text alternatives, headings, table header cells and data cells, and form labels and instructions, to their corresponding control +* identify related requirements for developers to programmatically associate headings, table header cells and data cells, as well as form labels and instructions to their corresponding control {% include excol.html type="all" %} @@ -66,6 +66,10 @@ Skills required for this module: * In-depth knowledge of: * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Applied expertise in teaching: + * @@@ + * [WCAG Success Criterion 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) + * [WCAG Success Criterion 1.3.5 Identify Input Purpose](https://www.w3.org/WAI/WCAG21/quickref/#identify-input-purpose) + * [WCAG Success Criterion 2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/quickref/#keyboard) * [WCAG Success Criterion 3.3.2 Labels or Instructions](https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions) {% include excol.html type="end" %} @@ -80,7 +84,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Present ways to split large amounts of text into smaller pieces, such as by using headings or pages. +Present ways to split large amounts of text into smaller pieces, such as by using headings and chapter marks to identify parts of the content and pages to split the content into logical units. Discuss mechanisms to supplement information presented only with text, such as use of icons and other visual cues. @@ -88,7 +92,7 @@ Discuss mechanisms to supplement information presented only with text, such as u Students should be able to: -* design user interfaces that support splitting large amounts of text into several smaller and more manageable pieces, for example by using headings or pages +* design user interfaces that support splitting large amounts of text into several smaller and more manageable pieces, for example by using headings, pages, and chapter marks * design user interfaces that support additional ways to convey information presented in text, for example using icons and other visual cues * design user interfaces that support mechanisms to identify specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon * design user interfaces that support mechanisms to identify the expanded form or meaning of acronyms and abbreviations @@ -99,16 +103,16 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of large amounts of text, for example an ebook. Discuss several ways to divide the text both visually and programmatically so that it is easier to understand and to navigate, for example by using headings or several pages. +* Show examples of large amounts of text, for example an ebook. Discuss several ways to divide the text both visually and programmatically so that it is easier to understand and to navigate, for example by using headings and several pages. * Show examples of how icons, charts, and graphics can complement information presented in text. Explain that they help users with reading disabilities understand difficult pieces of text. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). * Show examples of words that may be difficult to understand or that are used in a restricted way. Explain that users with cognitive disabilities or those not familiar with such words need definitions to understand the meaning of such words. Explain that defining the mechanisms to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. For references on how to provide the definition of a word or phrase used in an unusual or restricted way, see technique [G101: Providing the definition of a word or phrase used in an unusual or restricted way](https://www.w3.org/WAI/WCAG21/Techniques/general/G101.html). -* Show examples of abbreviations such as short forms of words and acronyms. Explain that users with cognitive disabilities and those not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the mechanisms to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. For references on how to provide the expansion or explanation of an abbreviation, see technique [G102: Providing the expansion or explanation of an abbreviation](https://www.w3.org/WAI/WCAG21/Techniques/general/G102). +* Show examples of abbreviations, such as short forms of words and acronyms. Explain that users with cognitive disabilities and those not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the mechanisms to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. For references on how to provide the expansion or explanation of an abbreviation, see technique [G102: Providing the expansion or explanation of an abbreviation](https://www.w3.org/WAI/WCAG21/Techniques/general/G102). #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -* Practical mdash; Present students with an ebook and ask them to define how it should be split into smaller and more manageable pieces to that it can be easier to navigate and understand. Assess how students use mechanisms to divide large amounts of text into smaller and more manageable pieces. +* Practical — Present students with an ebook and ask them to define how it should be split into smaller and more manageable pieces so that it can be easier to navigate and understand. Assess how students use mechanisms to split large amounts of text into smaller and more manageable pieces, such as headings, pages, and chapter marks. * Practical — Present students with unusual words and abbreviations and ask them to define a mechanism to provide the explanation of such words or the expansion of the abbreviations. Assess how students define a mechanism to provide explanations of unusual words and expansions of abbreviations. {% include excol.html type="end" %} @@ -136,7 +140,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of different types of information presented in tables. Explain that tables are used when there is a logical relationship between the information presented, for example when displaying a list of events with their date and venue. -* Refer back to [Module 2: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design) and explain that some users may require different ways of presenting tabular information. Explain that these include splitting complex tables into simpler ones and using lists to group the logically related information. +* Refer back to Module 2: Flexible Layout and Design [Topic: Flexible Design](/curricula/designer-modules/flexible-layout-and-design/#topic-flexible-design) and explain that some users may require different ways of presenting tabular information. Explain that these include splitting complex tables into simpler ones and using lists to group the logically related information. * Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells needs to be perceived both visually and programmatically for users to understand their relations, and that clear styles should be provided. Explain that providing the styles is a designer's responsibility, whereas establishing the programmatic relationship is a responsibility shared with the developers. #### Ideas to Assess Knowledge for Topic @@ -161,22 +165,22 @@ Show examples of how different groups of people interact with large amounts of s Students should be able to: * design user interfaces that support grouping of related form controls, such as those collecting personal information, payment methods, and consent to legal conditions -* design user interfaces that support filtering data, for example using search boxes or splitting the data set into smaller subsets of data -* design user interfaces that support navigating to specific pieces of data using the keyboard +* design user interfaces that support filtering data from data lists and grids, for example using search boxes or splitting the data set into smaller subsets of data +* design user interfaces that support keyboard navigation to specific list items of data lists and grids, for example using first letter navigation * design user interfaces that support customizing the results that are shown at a given time #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to interact and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and programmatically, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations is a designers' responsibility, whereas coding those relations is a developers' responsibility. -* Show examples of long lists of data, such as lists of countries or cities on a travel application. Explain that these lists are difficult to navigate with the keyboard, as it takes a long time to go through the different options one by one by pressing the arrow keys. Discuss several ways to make these interactions more efficient, such as providing ways for the user to type the first letters of their desired option, which reduces the amount of shown results. +* Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to interact and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and programmatically, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look like is a designers' responsibility, whereas coding those relations is a developers' responsibility. +* Show examples of long lists of data, such as lists of countries or cities on a travel application. Explain that these lists are difficult to navigate with the keyboard, as it takes a long time to go through the different options one by one by pressing the arrow keys. Discuss several ways to make these interactions more efficient, such as providing ways for the user to type the first letters of their desired option, which reduces the amount of shown results, and providing ways for people to filter the datat they want revealed by the use of pseudo-search boxes. #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -* Practical — Ask students to group related information in a form that asks for information to open a bank account. Asses how students build groups of related information, such as those collecting personal information, payment methods, and consent to legal conditions, and how they provide ways for users to identify each of the groups. +* Practical — Students group related information in a form that asks for information to open a bank account. Asses how students build groups of related information, such as those collecting personal information, payment methods, and consent to legal conditions, and how students provide ways for users to identify each of the groups. {% include excol.html type="end" %} @@ -186,7 +190,7 @@ Optional ideas to support assessment: Optional ideas to support assessment: -* Portfolio — Students include different pieces of information on a website, for example text, forms, and images. Assess how students provide for people to identify different pieces of information, how students split large amounts of information into smaller and more manageable pieces, and how they group related information together. +* Portfolio — Students include different pieces of information on a website, for example text, forms, and images. Assess how students provide mechanisms for people to identify different pieces of information, how students split large amounts of information into smaller and more manageable pieces, and how they group related information together. ## Teaching Resources diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 4452888cf..12b8fd987 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -36,11 +36,10 @@ Students should be able to: * provide clear and distinguishable ways to identify interactive user interface components, including through naming and placement * provide methods to help understand the context, information, and functionality of user interface components, including through textual instructions, color, and other visual cues * provide meaningful and descriptive notifications about imminent time limits, status changes, and feedback from user input, including errors, suggestions for correction, and success messages -* design user interfaces with meaningful sequence of interactive user interface components * define custom interaction patterns, such as where to place focus when a dialog is open and closed, and what the focus order should be within those dialogs * define mechanisms to obtain information about custom interaction patterns, such as specific keyboard shortcuts for applications and expected behavior of custom widgets * identify related requirements for developers to programmatically associate properties of interactive user interface components, such as names, states, and instructions, to their corresponding component -* identify related requirements for developers to write code for custom keyboard interactions that interactive user interface components may require +* identify related requirements for developers to write code for custom keyboard interactions that interactive components may require {% include excol.html type="all" %} @@ -56,6 +55,7 @@ Skills required for this module: * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Prior [Designer Modules](/curricula/designer-modules/) +* Knowledge of interaction design {% include excol.html type="end" %} @@ -66,6 +66,9 @@ Skills required for this module: {% include excol.html type="middle" %} * Applied expertise in teaching: + * @@@ +* In-depth knowledge of: + * Interaction design {% include excol.html type="end" %} @@ -94,7 +97,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Reflect on standard keyboard conventions. For example, use of the tab to move through interactive controls, use of the arrow keys to move through list items, and use of the Enter key to select an item. Explain that these need to be preserved as much as possible when designing custom functionality, and custom keyboard interaction should be defined when these standard conventions are not enough to achieve the goals of the user interface. Explain that defining keyboard interaction is a designer's responsibility, whereas implementing such interaction is a responsibility shared with the developer. +* Reflect on standard keyboard conventions. For example, use of the tab to move through interactive controls, use of the arrow keys to move through list items, and use of the Enter key to select an item. Explain that these need to be preserved as much as possible when designing custom functionality, and custom keyboard interaction should be defined when these standard conventions are not enough to achieve the goals of the user interface. Explain that defining keyboard interactions is a designers' responsibility, whereas implementing such interaction is a responsibility shared with the developer. * Present some examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided wherever possible. #### Ideas to Assess Knowledge for Topic @@ -111,7 +114,7 @@ Optional ideas to support assessment: {% include excol.html type="middle" %} -Show examples of labels and instructions for form controls and custom widgets. Explain that they are essential for cognitive disabilities to understand and interact with these components. +Show examples of labels and instructions for form controls and custom widgets. Explain that they are essential for people relying on assistive technologies and for people with cognitive disabilities to understand and interact with these components. #### Learning outcomes for Topic @@ -121,7 +124,7 @@ Students should be able to: * design user interfaces that allow to position labels where users expect them * provide instructions about which input fields are required by: * including information about each of the required form fields before the form control - * including color, text, and visual cues in the label of each of the required form fields that indicates that they are required + * including color, text, and visual cues in the label of each of the required form fields that indicate that they are required * provide clear instructions about changes in context before the control that originates such changes * provide overall instructions about existing time limits in a form and about how they can be turned off, adjusted, or extended * provide clear instructions about the current step and about the total number of steps involved in a multi-step form @@ -131,18 +134,18 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different interactive components, such as buttons, links, or widgets, and emphasize that each should have a clear name that allows to identify its purpose. For reference on how to provide names for different user interface components, see -* Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. For references on how to place labels for form fields, see -* Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several mechanisms, including color, text, and other visual cues. For references on how to communicate that form fields are required, see -* Present examples of time limits, such as those warning about session expirations. Explain that instructions need to be provided so that users are aware of the time limits, and mechanisms need to be put in place to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a responsibility of the designer, whereas implementing mechanisms to stop, extend, or adjust time limits is a responsibility shared with the developer. -* Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. +* Show examples of different interactive components, such as buttons, links, or widgets, and emphasize that each should have a clear name that allows to identify its purpose. For reference on how to provide names for different user interface components, see @@@ +* Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. For references on how to place labels for form fields, see @@@ +* Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several mechanisms, including color, text, and other visual cues. For references on how to communicate that form fields are required, see @@@ +* Present examples of time limits, such as those warning about session expirations. Explain that instructions need to be provided so that users are aware of the time limits, and mechanisms need to be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designers' responsibility, whereas implementing mechanisms to stop, extend, or adjust time limits is a responsibility shared with the developer. +* Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. For reference on how to provide instructions for multi-step forms, see @@@ #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -* Practical — Present students with a form fields and ask them to define labels for each. Assess how students provide clear and descriptive names for each of the form fields. -* Practical — Give students a form field and ask them to provide the necessary instructions for users to understand and fill in the form. Assess how students provide clear and concise instructions. +* Practical — Present students with a form and ask them to define labels for each of the fields. Assess how students provide clear and descriptive names for each of the form fields. +* Practical — Give students a form and ask them to provide the necessary instructions for users to understand each of the fields and fill in the form. Assess how students provide clear and concise instructions. {% include excol.html type="end" %} @@ -169,9 +172,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments cannot perform such gestures, thus user interfaces need to have alternatives that do not require motion for these gestures. -* Show examples of gestures such as swipe or ping. Explain that users with mobility impairments cannot perform such gestures, thus user interfaces need to have alternatives that do not require swiping or pinching to perform an action. -* Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events, thus user interfaces need to support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. +* Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments cannot perform such gestures, so user interfaces need to have alternatives that do not require motion for these gestures. +* Show examples of gestures such as swipe or ping. Explain that users with mobility impairments cannot perform such gestures, so user interfaces need to have alternatives that do not require swiping or pinching to perform an action. +* Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events, so user interfaces need to support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. #### Ideas to Assess Knowledge for Topic @@ -184,13 +187,13 @@ Optional ideas to support assessment: {% include excol.html type="start" %} -### Topic: Feedback and Notifications +### Topic: Notifications and Feedback {% include excol.html type="middle" %} Show examples of notification messages. Explain that they need to be distinguishable by all users, including through visual cues and programmatically. -Explain that applications may have different levels of priority when in the context of a complex application. Defining such levels of priority and which types of notifications each of them should contain is a designers' responsibility. +Explain that notifications may have different levels of priority when in the context of a complex application. Defining such levels of priority and which types of notifications each of them should contain is a designers' responsibility. #### Learning Outcomes for Topic @@ -198,7 +201,7 @@ Students should be able to: * design user interfaces with notifications that are easy to understand and that can be distinguished from any other user interface component * provide meaningful and descriptive messages about errors, suggestions for corrections, successes, or any other event -* design user interfaces that allow to switch notifications on or off to allow notifications processing at the users' pace +* design user interfaces that support switching notifications on or off to allow notifications processing at the users' pace * design user interfaces that support mechanisms to queue and prioritize application notifications coming from different interactive user interface components, such as form fields and custom widgets * describe related requirements for developers to code notification messages appropriately @@ -208,7 +211,7 @@ Optional ideas to teach the learning outcomes: * Show examples of different mechanisms to communicate notifications, such as through text messages, haptic and audio feedback, and popup windows. * Demonstrate different types of error messages and explain why it is necessary to communicate the specific field where the error has occurred and, if possible, provide suggestions for users to correct the error. -* Show examples of overlapping notifications in the context of web applications. Explain that some users may find it daunting to process several notifications at the same time, so there should be a mechanism that allows to prioritize notifications based on their relevance. +* Show examples of overlapping notifications in the context of applications. Explain that some users may find it daunting to process several notifications at the same time, so a mechanism needs to be defined that allows to prioritize notifications based on their relevance. #### Ideas to Assess Knowledge for Topic @@ -233,4 +236,5 @@ Suggested resources to support your teaching: * @@@ * [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. * [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Notifications and Feedback (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/notifications/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 33cff9a01..d0c25aabe 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -32,12 +32,13 @@ Courses based on this module should: Students should be able to: * identify accessibility requirements for different types of audio or video content -* research and promote accessible media players to access transcripts for audio, audio descriptions, and sign language +* research promote accessible media players to access transcripts for audio, audio descriptions, and sign language * design user interfaces that consider placement of alternatives to multimedia content, such as transcripts for audio and audio described content * design user interfaces that support switching transcripts and audio described content on or off * design user interfaces with mechanisms to pause, stop, and hide any moving, blinking, and auto-updating content, including animations and carousels * design user interfaces with mechanisms to stop or control the volume of auto-playing audio * identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding media content +* identify related requirements for developers to include accessibility support for multimedia players * identify related requirements for content authors to provide appropriate text alternatives and audio descriptions for different types of media content, including video and audio {% include excol.html type="all" %} @@ -98,7 +99,7 @@ Students should be able to * identify and distinguish the different types of multimedia content, such as prerecorded versus live, synchronous versus asynchronous audio and video * create designs that support equivalent text alternatives for prerecorded audio-only content -* create designs that support text alternatives and audio track for a prerecorded video-only content that presents equivalent information +* create designs that support text alternatives and alternative audio tracks for a prerecorded video-only content that present equivalent information * create designs that allow to provide captions and audio descriptions for any prerecorded and live audio content in synchronized media * create designs that allow to provide sign language interpretation for all prerecorded audio content in synchronized media @@ -106,8 +107,8 @@ Students should be able to Optional ideas to teach the learning outcomes: -* Show examples of captions. Explain that these are needed for people who cannot hear the audio, and that they are useful in other situations. Explain that identifying the situations where captions are needed is a designer's responsibility, whereas providing such captions is a responsibility shared with the content author. For reference on how to provide captions, see -* Show examples of audio described content. Explain that it is needed for people who cannot see the video. Explain that identifying the situations where audio described content is needed is a designer's responsibility, whereas providing the audio description is a responsibility shared with the content author. For references on how to provide audio descriptions, see +* Show examples of captions. Explain that these are needed for people who cannot hear the audio, and that they are useful in other situations. Explain that identifying the situations where captions are needed is a designer's responsibility, whereas providing such captions is a responsibility shared with the content author. For reference on how to provide captions, see @@@ +* Show examples of audio described content. Explain that it is needed for people who cannot see the video. Explain that identifying the situations where audio described content is needed is a designer's responsibility, whereas providing the audio description is a responsibility shared with the content author. For references on how to provide audio descriptions, see @@@ #### Ideas to Assess Knowledge for Topic @@ -123,7 +124,7 @@ Optional ideas to support assessment: {% include excol.html type="middle" %} -Show examples of different types of animations. Explain that they can cause seizures or physical reactions for some people, so additional requirements when designing animations should be considered. +Show examples of different types of animations. Explain that animations can cause seizures or physical reactions for some people, so additional requirements when designing animations should be considered. #### Learning Outcomes for Topic @@ -138,15 +139,15 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of contents that move or blink, such as animations and carousels. Explain that these can cause problems for some users that cannot keep up with the pace of the auto-updating content or that these animations can cause seizure and physical reactions. For references on how to design user interfaces that allow to pause, stop, and hide moving, blinking, or auto-updating content, see the following techniques: +* Show examples of contents that move or blink, such as animations and carousels. Explain that these can cause problems for some users that cannot keep up with the pace of the auto-updating content. Emphasize that, in addition, these animations can cause seizures and physical reactions. For references on how to design user interfaces that allow to pause, stop, and hide moving, blinking, or auto-updating content, see the following techniques: * [G4: Allowing the content to be paused and restarted from where it was paused](https://www.w3.org/WAI/WCAG21/Techniques/general/G4) * [G11: Creating content that blinks for less than 5 seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G11) * [G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)](https://www.w3.org/WAI/WCAG21/Techniques/general/G152) * [G186: Using a control in the Web page that stops moving, blinking, or auto-updating content](https://www.w3.org/WAI/WCAG21/Techniques/general/G186) * [G187: Using a technology to include blinking content that can be turned off via the user agent](https://www.w3.org/WAI/WCAG21/Techniques/general/G187) * Show examples of flashing content and explain that they can cause seizures or physical reactions for some people. Emphasize that all components of the content need to be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole web page or application. For references on how to design interfaces that support flashing below the general flash and red flash thresholds or that support flashing below 3 seconds, see techniques [G19: Ensuring that no component of the content flashes more than three times in any 1-second period](https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html) and [G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold](https://www.w3.org/WAI/WCAG21/Techniques/general/G15.html). -* Show examples of interactions triggered by animations, such as additional movements when scrolling. Explain that these animations can cause distraction and vestibular disorders such as dizziness, nausea, and headaches for some people. Discuss different ways to resolve these issues, such as including a preference to disable animations or using technology specific properties to reduce such animations. -* Use a screen reader to navigate an application that plays audio automatically for more than 3 seconds, such as a video player with audio that is longer than 3 seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a mechanism to pause or control the volume of that audio. Explain that the operating system often provides such mechanism. For references on how to design interfaces that support mechanisms to pause or control the volume of any audio that plays automatically, see the following techniques: +* Show examples of interactions triggered by animations, such as additional movements when scrolling. Explain that these animations can cause distraction and vestibular disorders (such as dizziness, nausea, and headaches) for some people. Discuss the use of preference and technology specific properties to reduce or disable such animations. +* Demonstrate the use of a screen reader to navigate an application that plays audio automatically for more than 3 seconds, such as a video player with audio that is longer than 3 seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a mechanism to pause or control the volume of that audio. Explain that the operating system often provides such mechanism. For references on how to design interfaces that support mechanisms to pause or control the volume of any audio that plays automatically, see the following techniques: * [G60: Playing a sound that turns off automatically within three seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G60.html) * [G170: Providing a control near the beginning of the Web page that turns off sounds that play automatically](https://www.w3.org/WAI/WCAG21/Techniques/general/G170.html) * [G171: Playing sounds only on user request](https://www.w3.org/WAI/WCAG21/Techniques/general/G171.html). @@ -155,6 +156,9 @@ Optional ideas to teach the learning outcomes: Optional ideas to support assessment: +* Practical — Present students with instances of flashing content and ask them to determine if they are below the general flash and red flash thresholds. Assess how students understand accessibility requirements for flashing content. +* Practical — Present students with a user interface containing animations and ask them to make them accessible. Assess how students define mechanisms to reduce or disable the animations. + [To be developed]. {% include excol.html type="end" %} @@ -167,10 +171,11 @@ Optional ideas to support assessment: * Research — Students research an accessible media player and explain how different groups of people with disabilities use the player. Assess how students understand how people with disabilities interact with multimedia content and players. * Portfolio — Students include accessible video and audio contents on a website. Assess how students understand the accessibility requirements of video and audio content, including transcripts for audio, audio descriptions, and sign language. + ## Teaching Resources Suggested resources to support your teaching: -* @@@ * [Video Captions (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/captions/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. * [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 652dfedbe..57e38caea 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -25,7 +25,7 @@ navigation: Courses based on this module should: * explain strategies that people with disabilities use to navigate multi page websites and applications -* present some behaviors, visual affordances, and interaction patterns of menus that relate to accessible design +* present behaviors, visual affordances, and interaction patterns of menus that relate to accessible design ## Learning Outcomes for Module @@ -35,7 +35,7 @@ Students should be able to: * design user interfaces that support different types of navigations, including menus, breadcrumb trails, tables of contents, and site maps * define keyboard, mouse, and tactile interactions for menus and other navigation mechanisms * provide clear and consistent visual cues for menus, menu item states, and other navigation mechanisms -* define blocks of repeated content and coordinate with developers to implement mechanisms that bypass such blocks +* define blocks of repeated content and collaborate with developers to implement mechanisms that bypass such blocks * identify related requirements for developers to: * implement keyboard, mouse, and tactile interactions for navigation mechanisms * implement clear and descriptive names for navigation mechanisms @@ -87,14 +87,14 @@ Topics to achieve the learning outcomes: Show examples of different types of menus, such as navigational, fly-out, and application menus. Explain the different scenarios where each of them can be used. For references on the different types of menus and their uses, see the WAI website tutorials [Menus](https://www.w3.org/WAI/tutorials/menus/). -Explain styling conventions for menus, such as location, appropriate size and ability for menus and menu items to resize depending on different user configurations. For references on how to apply accessible menu styles, see the WAI website tutorial, [Menu Styling](https://www.w3.org/WAI/tutorials/menus/styling/). +Explain styling conventions for menus, such as location, appropriate size, and ability for menus and menu items to resize depending on different user configurations. For references on how to apply accessible menu styles, see the WAI website tutorial, [Menu Styling](https://www.w3.org/WAI/tutorials/menus/styling/). #### Learning Outcomes for Topic Students should be able to: * identify and describe uses of different types of menus, for example to navigate across web pages, to select categories from a crowded web page, and to navigate across applications -* provide visual cues for menus to distinguish them from other components, and consistent styling for menu identification across a set of web pages +* provide visual cues to distinguish menus from other components, and provide consistent styling for menu identification across a set of web pages * define mouse, keyboard, and tactile interactions within menus * design user interfaces that support appropriate sizing of menus and menu items to fit all text in different viewports and screen configurations * design user interfaces that communicate the state of menu items using distinguishable and consistent styles @@ -104,9 +104,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Explain menu conventions that relate to accessibility, such as clear and consistent styling to convey menu behaviors and states. Introduce patterns for mouse, keyboard, and tactile interaction with menus. +* Explain menu conventions for accessible menus, such as clear and consistent styling to convey menu behaviors and states. Introduce patterns for mouse, keyboard, and tactile interaction with menus. * Demonstrate menu interaction using different input devices, such as keyboard, mouse, and tactile. For example, activating a menu option by tapping, pressing the Enter key, and mouse clicking. Explain that defining the interactions is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. -* Show examples of menu and menu items that contain large texts. Explain that, when used in smaller viewports or with different screen configurations, these texts need to resize so that they are perceived in their entirety. +* Show examples of menu and menu items that contain large texts. Explain that, when used in smaller viewports or with different screen configurations, these texts may need to wrap so that they are perceived in their entirety. * Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Emphasize that the states of these menu items need to be communicated using visual cues as well as semantics. Explain that providing the visual cues is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. #### Ideas to Assess Knowledge for Topic @@ -130,22 +130,22 @@ Introduce other navigation mechanisms that may be used depending on the characte Students should be able to: -* design user interfaces that support skipping blocks of repeated content providing at least one of the following: +* define blocks of repeated content, such as navigation bars or header contents, and define mechanisms to skipp such blocks using at least one of the following: * a link at the top of each page that goes directly to the main content area * a link at the beginning of a block of repeated content to go to the end of the block * links at the top of the page that go to each area of the content * an expandable and collapsible menu to make it easier for users to skip the menu -* assess the need for other navigation mechanisms, such as search functionalities, breadcrumb trails, tables of contents, and sitemaps depending on the characteristics of the user interface -* provide search functionalities that support navigating to specific parts of the site -* design user interfaces that support breadcrumb trails to provide information about the users' location in a set of web pages -* design user interfaces that support site maps to provide an overview of the entire website -* design user interfaces that support tables of contents to give an overview of the whole website or document and to allow users to go to specific parts of the content +* provide other navigation mechanisms to ensure web pages or application views can be reached using several of the following methods: + * search functionalities that support navigating to specific parts of the site + * breadcrumb trails to provide information about the users' location in a set of web pages + * site maps to provide an overview of the entire website + * tables of contents to give an overview of the whole website or document and to allow users to go to specific parts of the content #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of mechanisms to bypass blocks of repeated content, such as a link at the top of the page and the use of expandable and collapsible components. Explain that people using the keyboard only find it very frustrating to navigate through sets of repeated blocks of content, such as navigation bars or header contents. For examples on how to provide a mechanism to bypass blocks of repeated content, see techniques [G1: Adding a link at the top of each page that goes directly to the main content area](https://www.w3.org/WAI/WCAG21/Techniques/general/G1.html), [G123: Adding a link at the beginning of a block of repeated content to go to the end of the block](https://www.w3.org/WAI/WCAG21/Techniques/general/G123.html), and [G124: Adding links at the top of the page to each area of the content](https://www.w3.org/WAI/WCAG21/Techniques/general/G124.html). +* Show examples of mechanisms to bypass blocks of repeated content, such as a link at the top of the page and the use of expandable and collapsible components. Explain that navigating through sets of repeated blocks of content using the tab key only is time consuming. For examples on how to provide a mechanism to bypass blocks of repeated content, see techniques [G1: Adding a link at the top of each page that goes directly to the main content area](https://www.w3.org/WAI/WCAG21/Techniques/general/G1.html), [G123: Adding a link at the beginning of a block of repeated content to go to the end of the block](https://www.w3.org/WAI/WCAG21/Techniques/general/G123.html), and [G124: Adding links at the top of the page to each area of the content](https://www.w3.org/WAI/WCAG21/Techniques/general/G124.html). * Show examples of search functionalities. Explain that they help users find content by supporting navigation to different parts of the site. Emphasize that some users prefer this way of navigating, especially when they are already familiar with the site and know what they are looking for. For references on how to provide a search functionality, see technique [G161: Providing a search function to help users find content](https://www.w3.org/WAI/WCAG21/Techniques/general/G161). * Show examples of breadcrumb trails. Explain that they provide information about the user's location within the context of a set of websites. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail ](https://www.w3.org/WAI/WCAG21/Techniques/general/G65). @@ -156,9 +156,9 @@ Optional ideas to teach the learning outcomes: Optional ideas to support assessment: -* Practical — Students define the block of repeated content within a website and coordinate with developers to provide a way for users to bypass that block. Assess how students identify blocks of repeated content and how they provide a mechanism to bypass it. -* Practical — Present students with an interface and ask them to provide multiple ways to navigate across the website. Assess how students provide multiple navigation mechanisms where appropriate, such as tables of contents and sitemaps. -* Practice — Present students with a second-level web page within a website and ask them to provide a breadcrumb trail for users to understand where a page is located with respect to the whole website. Assess how students provide a breadcrumb trail. +* Practical — Students define the blocks of repeated content within a website and collaborate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they provide a mechanism to bypass them. +* Practical — Present students with an interface and ask them to provide multiple ways to navigate across the website. Assess how students provide multiple navigation mechanisms where appropriate, such as search functionalities, breadcrumb trails, site maps, and tables of contents. +* Practical — Present students with a web page that is deep in the hierarchy of a website and ask them to provide a breadcrumb trail for users to understand where a page is located with respect to the whole website. Assess how students communicate the hiearrchical structore of a web page within a set of web pages. {% include excol.html type="end" %} @@ -168,7 +168,7 @@ Optional ideas to support assessment: Optional ideas to support assessment: -* Portfolio — Students add navigation across web pages or applications views. Assess how students understand accessibility features of navigation across multipage websites and applications +* Portfolio — Students design naviganion menu and other navigational mechanisms for a set of web pages. Assess how students understand accessibility features of navigation across multipage websites and applications . ## Teaching Resources diff --git a/content/designer/understanding-and-involving-users.md b/content/designer/understanding-and-involving-users.md index 8952bd6a6..482daaec4 100644 --- a/content/designer/understanding-and-involving-users.md +++ b/content/designer/understanding-and-involving-users.md @@ -30,7 +30,7 @@ navigation: Courses based on this module should: * explain the impact of involving people with disabilities to create more accessible designs -* present strategies to consider when working with real people with disabilities +* present strategies for involving real people with disabilities ## Learning Outcomes for Module @@ -38,9 +38,10 @@ Students should be able to: * explain how involving people with disabilities can lead to more accessible designs * examine applicable design requirements for accessibility, such as those defined by accessibility standards and policies -* articulate the potential risks of not involving people with disabilities -* describe different strategies when including real people with disabilities, such as accommodations, accessibility of the facilities, and different timings depending on user skills +* articulate the potential risks of not involving people with disabilities, such as increased costs to implement accessibility at a later stage +* describe different strategies when including real people with disabilities, such as providing accommodations, checking te accessibility of the facilities, and considering different timings depending on user skills * identify related requirements for product owners and other team roles to plan for the involvement of people with disabilities +* identify related requirements for developers and content authors to implement user feedback that relates to their tasks during the developing an authoring phases {% include excol.html type="all" %} @@ -82,7 +83,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Refer back to [Foundation Module 2: People and Digital Technology](/curricula/foundation-modules/people-and-digital-technology/). Discuss how organizations conducting user research can include feedback on different accessibility features, barriers, and requirements that relate to people with disabilities. +Refer back to Foundation Module 2: People and Digital Technology, [Topic Diverse Abilities and Barriers](/curricula/foundation-modules/people-and-digital-technology/#topic-diverse-abilities-and-barriers). Discuss how organizations conducting user research can include feedback on different accessibility features, barriers, and requirements that relate to people with disabilities. #### Learning Outcomes for Topic @@ -98,9 +99,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Discuss different examples of involving people with disabilities. Explain that this gives user researchers the opportunity to collect direct feedback from people with disabilities on products that are working for them and on products that are not. Emphasize that you can then include that feedback in the research conclusions, and that will lead to better overall design for everybody. -* Discuss scenarios where it might not be economically feasible to involve people with disabilities. Explain different research methods that can be used to get an understanding of how people with disabilities interact with technology. Explain that these research activities help the team get an understanding about different solutions to common pitfalls that people with disabilities may encounter when using the product or service. -* Explain the consequences of not involving people with disabilities in design processes. Emphasize that accessibility remediation is often difficult and can lead to higher costs when implementing accessibility later on in the development phase. +* Discuss different examples of involving people with disabilities. Explain that this gives user researchers the opportunity to collect direct feedback from people with disabilities on products that are working for them and on products that are not. Emphasize that you can then include that feedback in the research conclusions so that they lead to better overall design for everybody. +* Discuss scenarios where it might not be economically feasible to involve people with disabilities. Explain different research methods that can be used to get an understanding of how people with disabilities interact with technology. For examplee, asking users, checking documentation, or watching videos. Explain that these research activities help the team understanddifferent solutions to common pitfalls that people with disabilities may encounter when using the product or service. +* Explain the consequences of not involving people with disabilities. Emphasize that accessibility remediation is often difficult and can lead to higher costs when implementing accessibility later on in the development phase. * Present characteristics of potential participants in user research activities based on several factors, such as the type of disability and the level of skills using assistive technologies and adaptive strategies. #### Ideas to Assess Knowledge for Topic @@ -118,7 +119,7 @@ Optional ideas to support assessment. {% include excol.html type="middle" %} -Present accessibility standards (such as WCAG2) and policies that apply in the students' region. Explain functional and non-functional requirements related to people with disabilities. +Present accessibility standards (such as WCAG2). Discuss policies that apply in the students' region (if any). Explain functional and non-functional requirements related to people with disabilities. #### Learning Outcomes for Topic @@ -130,16 +131,16 @@ Students should be able to: * availability of content and functionality in different screen sizes and configurations * keyboard compatibility * compatibility with assistive technologies and adaptive strategies -* identify and create personas that include people with different types of disabilities and different levels of skills using the Web -* identify scenarios that include use of the product with different types of assistive technologies and adaptive strategies +* identify and create personas that include people with different types of disabilities and different levels of skills using assistive technologies and adaptive strategies +* identify and create scenarios that include use of the product with different types of assistive technologies and adaptive strategies ### Teaching Ideas for Topic Optional ideas to support assessment: -* Refer back to [Foundation Module 4: Principles, Standards, and Checks](/curricula/foundation-modules/principles-standards-and-checks) and explain the importance of including international standards in the overall project requirements. +* Refer back to Foundation Module 4: Principles, Standards, and Checks, [Topic: W3C Accessibility Standards](/curricula/foundation-modules/principles-standards-and-checks/#topic-w3c-accessibility-standards) and explain the importance of including the W3C accessibility standards in the overall project requirements for ensuring accessible products. * Explain some functional requirements of products and services that relate to accessibility, such as appropriate contrast ratios, compatibility with assistive technologies and adaptive strategies, and keyboard support. -* Reflect on the diversity of people with disabilities. Explain that, when creating personas, these need to reflect the different types of abilities people have and their level of skills using assistive technologies and adaptive strategies. +* Reflect on the diversity of people with disabilities. Explain that, when creating personas, these need to reflect the different types of abilities people have as well as their level of skills using assistive technologies and adaptive strategies. ### Ideas to Assess Knowledge for Topic @@ -174,6 +175,7 @@ Students should be able to: * accessibility of transportation means to get to the chosen venue * identify the need for appropriate timings for participants with different levels of skills to conduct the research activities * relate different testing methods to different accessibility outcomes +* communicate the need for involvement of different roles (such as developers and content authors) to implement received feedback that relates to their specific tasks during the development and authoring phases #### Teaching Ideas for Topic @@ -182,6 +184,7 @@ Optional ideas to teach the learning outcomes: * Explain how including real people with disabilities can help better inform the decisions taken in iterative design processes. For example, mention complex interaction patterns, such as complex form fields or custom dialogs, and reinforce the idea that feedback on expected behaviors and interaction patterns will help take the best design decision. * Discuss the different levels of skills of people with disabilities when using an assistive technology or an adaptive strategy. Emphasize that some assistive technologies and adaptive strategies are difficult to learn. Explain that different people may need different timings to conduct the proposed activities. Present different strategies to include these differences. For example, setting up different time expectations depending on different levels of experience with the assistive technology and different levels of familiarity with the product. * Explain different testing methods that exist, such as testing with an assistive technology, testing a paper prototype, or testing an HTML template. Explain that each of these methods delivers different types of outputs. For example, testing a paper prototype is more likely to deliver results related to visual aspects, and assistive technology testing is more likely to deliver results related to the compatibility of the product with assistive technology. +* Discuss several examples of complex user interfaces. Explain that participation of other team members, such as developers and content authors, may be required to address the feedback received from people with disabilities. Emphasize that requesting that participation is a responsability of the user researcher, whereas coordinating such participation is a responsibility of the project manager. #### Ideas to Assess Knowledge for Topic @@ -206,5 +209,5 @@ Optional ideas to support assessment: Suggested resources to support your teaching: * [[Involving Users in Web Projects for Better, Easier Accessibility]](https://www.w3.org/WAI/planning/involving-users/) — Helps you understand real-world accessibility issues, such as how people with disabilities and older people use the web with adaptive strategies and assistive technologies. -* [Web Accessibility Perspectives Videos: Explore the Impact and Benefits for Everyone](https://www.w3.org/WAI/perspective-videos/) — Explore the impact of accessibility and the benefits for everyone in a variety of situations. +* [[Web Accessibility Perspectives Videos: Explore the Impact and Benefits for Everyone]](https://www.w3.org/WAI/perspective-videos/) — Explore the impact of accessibility and the benefits for everyone in a variety of situations. * [[How People with Disabilities Use the Web]](/people-use-web/) — Describes some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. From 71b46677ea6ee41ca5bcce9aea6ee97d92f1bb61 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 7 Jun 2021 10:43:40 +0200 Subject: [PATCH 130/416] Updating modules --- content/designer/interaction-and-feedback.md | 25 ++++++++++---------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 12b8fd987..6acd05cc6 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -35,7 +35,7 @@ Students should be able to: * design user interfaces that support different input mechanisms, including mouse, touch, and keyboard * provide clear and distinguishable ways to identify interactive user interface components, including through naming and placement * provide methods to help understand the context, information, and functionality of user interface components, including through textual instructions, color, and other visual cues -* provide meaningful and descriptive notifications about imminent time limits, status changes, and feedback from user input, including errors, suggestions for correction, and success messages +* provide meaningful and descriptive notifications about imminent time limits, steps, status changes, and feedback from user input, including errors, suggestions for correction, and success messages * define custom interaction patterns, such as where to place focus when a dialog is open and closed, and what the focus order should be within those dialogs * define mechanisms to obtain information about custom interaction patterns, such as specific keyboard shortcuts for applications and expected behavior of custom widgets * identify related requirements for developers to programmatically associate properties of interactive user interface components, such as names, states, and instructions, to their corresponding component @@ -82,7 +82,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Discuss standard keyboard interactions, such as the use of the Tab, Enter, or arrow keys. Explain that if non-standard keyboard interactions are to be used, designers need to define them and collaborate with developers to implement them. +Discuss standard keyboard interactions, such as the use of the Tab, Enter, or arrow keys. Explain that when non-standard keyboard interactions are to be used, designers need to define them and collaborate with developers to implement them. #### Learning Outcomes for Topic @@ -91,7 +91,7 @@ Students should be able to: * design custom user interfaces that support operation with the keyboard * identify situations when it is necessary to provide additional keyboard shortcuts, for example when designing a custom functionality that is not keyboard supported by default * design user interfaces that wherever possible avoid keyboard shortcut conflicts with the operating system, browser, and assistive technologies -* describe related requirements for developers to write code for user interface components to be entered, operated, and exited using the keyboard only +* describe related requirements for developers to implement keyboard support for interactive user interface components #### Teaching Ideas for Topic @@ -104,7 +104,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to support assessment: -* Practice — Present students with a user interface that can be interacted only with the mouse and ask them to define keyboard interaction patterns. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions wherever possible. +* Practical — Present students with a user interface that can be interacted only with the mouse and ask them to define keyboard interaction patterns. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions wherever possible. {% include excol.html type="end" %} @@ -114,7 +114,7 @@ Optional ideas to support assessment: {% include excol.html type="middle" %} -Show examples of labels and instructions for form controls and custom widgets. Explain that they are essential for people relying on assistive technologies and for people with cognitive disabilities to understand and interact with these components. +Show examples of labels and instructions for interactive user interface components. Explain that they are essential for people relying on assistive technologies and for people with cognitive disabilities to understand the purpose and intent of these components. #### Learning outcomes for Topic @@ -134,9 +134,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different interactive components, such as buttons, links, or widgets, and emphasize that each should have a clear name that allows to identify its purpose. For reference on how to provide names for different user interface components, see @@@ -* Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. For references on how to place labels for form fields, see @@@ -* Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several mechanisms, including color, text, and other visual cues. For references on how to communicate that form fields are required, see @@@ +* Show examples of different interactive components, such as buttons, links, or widgets, and emphasize that each should have a clear name that allows to identify its purpose. For reference on how to provide names for different user interface components, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). +* Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. +* Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several mechanisms, including color, text, and other visual cues. * Present examples of time limits, such as those warning about session expirations. Explain that instructions need to be provided so that users are aware of the time limits, and mechanisms need to be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designers' responsibility, whereas implementing mechanisms to stop, extend, or adjust time limits is a responsibility shared with the developer. * Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. For reference on how to provide instructions for multi-step forms, see @@@ @@ -145,6 +145,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to support assessment: * Practical — Present students with a form and ask them to define labels for each of the fields. Assess how students provide clear and descriptive names for each of the form fields. +* Practical — Give students an application and ask them to provide names for each of the application subsections. Assess how students identify application section and provide clear and understandable names for each. * Practical — Give students a form and ask them to provide the necessary instructions for users to understand each of the fields and fill in the form. Assess how students provide clear and concise instructions. {% include excol.html type="end" %} @@ -200,9 +201,9 @@ Explain that notifications may have different levels of priority when in the con Students should be able to: * design user interfaces with notifications that are easy to understand and that can be distinguished from any other user interface component -* provide meaningful and descriptive messages about errors, suggestions for corrections, successes, or any other event +* provide meaningful and descriptive messages about errors, suggestions for corrections, and successes * design user interfaces that support switching notifications on or off to allow notifications processing at the users' pace -* design user interfaces that support mechanisms to queue and prioritize application notifications coming from different interactive user interface components, such as form fields and custom widgets +* design user interfaces that support mechanisms to queue and prioritize application notifications coming from different interactive user interface components * describe related requirements for developers to code notification messages appropriately #### Teaching Ideas for Topic @@ -211,13 +212,13 @@ Optional ideas to teach the learning outcomes: * Show examples of different mechanisms to communicate notifications, such as through text messages, haptic and audio feedback, and popup windows. * Demonstrate different types of error messages and explain why it is necessary to communicate the specific field where the error has occurred and, if possible, provide suggestions for users to correct the error. -* Show examples of overlapping notifications in the context of applications. Explain that some users may find it daunting to process several notifications at the same time, so a mechanism needs to be defined that allows to prioritize notifications based on their relevance. +* Show examples of overlapping notifications in the context of complex applications. Explain that some users may find it daunting to process several notifications at the same time, so a mechanism needs to be defined that allows to prioritize notifications based on their relevance. #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -* Practical — Present students with a form field submission containing errors and ask them to provide notifications about each form field that contains errors, together with suggestions for corrections whenever possible. Assess how students provide adequate error messages for each of the wrong fields and how they provide suggestions for corrections whenever possible. +* Practical — Present students with a form field submission containing errors and ask them to provide notifications about each form field that contains errors, together with suggestions for corrections when possible. Assess how students provide adequate error messages for each of the wrong fields and how they provide suggestions for corrections when possible. {% include excol.html type="end" %} From ab718bc1dbbffd5db031932579a885616a6d9b75 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 7 Jun 2021 11:11:19 +0200 Subject: [PATCH 131/416] Updates to module --- content/designer/interaction-and-feedback.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 6acd05cc6..d059d2364 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -82,7 +82,8 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Discuss standard keyboard interactions, such as the use of the Tab, Enter, or arrow keys. Explain that when non-standard keyboard interactions are to be used, designers need to define them and collaborate with developers to implement them. +Discuss standard keyboard interactions, such as the use of the tab, enter, escape, and arrow keys. Explain that providing custom keyboard interactions can favor efficiency, but can also disrupt the users expectations, thus these interactions need to be well documented and be consistent throughout the interface. +Emphasize that defining the keyboard interactions is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. #### Learning Outcomes for Topic @@ -90,7 +91,7 @@ Students should be able to: * design custom user interfaces that support operation with the keyboard * identify situations when it is necessary to provide additional keyboard shortcuts, for example when designing a custom functionality that is not keyboard supported by default -* design user interfaces that wherever possible avoid keyboard shortcut conflicts with the operating system, browser, and assistive technologies +* design user interfaces that avoid keyboard shortcut conflicts with the operating system, browser, and assistive technologies when possible * describe related requirements for developers to implement keyboard support for interactive user interface components #### Teaching Ideas for Topic @@ -98,13 +99,13 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Reflect on standard keyboard conventions. For example, use of the tab to move through interactive controls, use of the arrow keys to move through list items, and use of the Enter key to select an item. Explain that these need to be preserved as much as possible when designing custom functionality, and custom keyboard interaction should be defined when these standard conventions are not enough to achieve the goals of the user interface. Explain that defining keyboard interactions is a designers' responsibility, whereas implementing such interaction is a responsibility shared with the developer. -* Present some examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided wherever possible. +* Present some examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -* Practical — Present students with a user interface that can be interacted only with the mouse and ask them to define keyboard interaction patterns. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions wherever possible. +* Practical — Present students with a user interface that can be interacted only with the mouse and ask them to define keyboard interaction patterns. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. {% include excol.html type="end" %} From 0d55209eeb5fe42dc7f7011fb387e11324bab618 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 7 Jun 2021 11:29:17 +0200 Subject: [PATCH 132/416] Updating module --- content/designer/interaction-and-feedback.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index d059d2364..e7347838f 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -37,7 +37,7 @@ Students should be able to: * provide methods to help understand the context, information, and functionality of user interface components, including through textual instructions, color, and other visual cues * provide meaningful and descriptive notifications about imminent time limits, steps, status changes, and feedback from user input, including errors, suggestions for correction, and success messages * define custom interaction patterns, such as where to place focus when a dialog is open and closed, and what the focus order should be within those dialogs -* define mechanisms to obtain information about custom interaction patterns, such as specific keyboard shortcuts for applications and expected behavior of custom widgets +* define mechanisms to obtain information about custom interaction patterns, such as specific keyboard shortcuts for applications * identify related requirements for developers to programmatically associate properties of interactive user interface components, such as names, states, and instructions, to their corresponding component * identify related requirements for developers to write code for custom keyboard interactions that interactive components may require @@ -92,6 +92,7 @@ Students should be able to: * design custom user interfaces that support operation with the keyboard * identify situations when it is necessary to provide additional keyboard shortcuts, for example when designing a custom functionality that is not keyboard supported by default * design user interfaces that avoid keyboard shortcut conflicts with the operating system, browser, and assistive technologies when possible +* define mechanisms to obtain information about custom keyboard shortcuts, for example those used to support efficiency or those used in complex application * describe related requirements for developers to implement keyboard support for interactive user interface components #### Teaching Ideas for Topic @@ -100,6 +101,7 @@ Optional ideas to teach the learning outcomes: * Reflect on standard keyboard conventions. For example, use of the tab to move through interactive controls, use of the arrow keys to move through list items, and use of the Enter key to select an item. Explain that these need to be preserved as much as possible when designing custom functionality, and custom keyboard interaction should be defined when these standard conventions are not enough to achieve the goals of the user interface. Explain that defining keyboard interactions is a designers' responsibility, whereas implementing such interaction is a responsibility shared with the developer. * Present some examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. +* Show examples of help functionality to explain custom keyboard interactions. Explain that, while custom keyboard interactions are preferred by some users for efficiency reasons, it can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these mechanisms is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic From 13865aa2739a44f389ba8c07d91aa779425d1696 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 7 Jun 2021 14:43:54 +0200 Subject: [PATCH 133/416] Trying new topic --- .../designer/flexible-layout-and-design.md | 52 ++++++++++++++----- 1 file changed, 40 insertions(+), 12 deletions(-) diff --git a/content/designer/flexible-layout-and-design.md b/content/designer/flexible-layout-and-design.md index 1ab923264..e58013b52 100644 --- a/content/designer/flexible-layout-and-design.md +++ b/content/designer/flexible-layout-and-design.md @@ -99,7 +99,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="start" %} -### Topic: Content Perception +### Topic: Text Styling {% include excol.html type="middle" %} @@ -112,41 +112,68 @@ Students should be able to: * design user interfaces with clear and distinguishable styles for different components, such as links, buttons, form elements, or texts * design user interfaces with font sizes that enhance content readability * design user interfaces with adequate spacing to support readability and to help distinguish components from one another -* design user interfaces with text cues to convey information provided through vision only, such as an asterisk to convey required form fields in a form -* design user interfaces with other visual cues in addition to color, for example using different patterns, shapes, and icons #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Demonstrate the use of styles for distinguishing user interface components from one another, such as links, buttons, form elements, and texts. Explain how people rely on font sizes, spacing, and typography to distinguish components from one another. For references on how to apply distinguishable styles for user interface components, see @@@ -* Demonstrate the use of different font sizes and explain how they affect readability of the content. For reference on how to apply font sizes that allow content readability, see @@@ -* Show examples of different page layouts with and without adequate spacing. Explain how spacing allows to distinguish different user interface components and pieces of content from one another. EMphasize that spacing also allows for better readability of contents and for better identifications of the different parts of the user interface. For references on how to apply adequate spacing, see @@@ -* Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a store is open or closed and those with visual clues only to communicate that a product is sold out. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). -* Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so alternative methods to convey that information are required. For references on how to convey information without using color alone, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). +* Demonstrate the use of styles for distinguishing user interface components from one another, such as links, buttons, form elements, and texts. Explain how people rely on font sizes, spacing, and typography to distinguish components from one another. +* Demonstrate the use of different font sizes and explain how they affect readability of the content. +* Show examples of different page layouts with and without adequate spacing. Explain how spacing allows to distinguish different user interface components and pieces of content from one another. Emphasize that spacing also allows for better readability of contents and for better identifications of the different parts of the user interface. apply adequate spacing, see @@@ #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: * Practical — Students design a paper prototype with distinguishable styles that help perceive different contents. Assess how students use different style properties to make content perceivable and to distinguish components from one another. + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + +### Topic: Landmarks and Cues + +{% include excol.html type="middle" %} + +Discuss strategies to provide mechanisms for users to perceive different web page regions. Present different strategies to complement different content types, such as visual and textual, through the use of visual and text cues. + +#### Learning Outcomes for Topic + +Students should be able to: + +* define page regions by using appropriate landmarks +* design user interfaces with text cues to convey information provided through vision only, such as an asterisk to convey required form fields in a form + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +* Show examples of different regions of web pages. Explain that the use of landmarks is needed for people to perceive such regions. Explain that defining landmarks is a designers' responsibility, whereas implementing such landmarks is a responsibility shared with the developer. +* Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a store is open or closed and those with visual cues only to communicate that a product is sold out. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). + +#### Ideas to Assess Knowledge + +Optional ideas to support assessment: + +* Practical — Give students a web page and ask them to identify its regions and to define the appropriate landmarks for users to perceive such regions. Assess how students identify page regions and provide mechanisms for people to perceive such regions. * Practical &mdash: Give students examples of color alone used to provide information and ask them to provide text information and visual cues to supplement that information. Assess how students provide the necessary textual information and visual cues to supplement information provided exclusively with color. {% include excol.html type="end" %} {% include excol.html type="start" %} -### Topic: Contrast Ratios +### Topic: Color {% include excol.html type="middle" %} -Explain how contrast ratios are essential for people with low vision to perceive, distinguish, and understand contents. +Describe how some people use color to understand and distinguish contents. Explain different ways to convey information that is conveyed using color alone, such as shapes or icons. Explain how contrast ratios are essential for people with low vision to perceive, distinguish, and understand contents. #### Learning Outcomes for Topic Students should be able to: - -* explain how appropriate contrast ratios allow people with disabilities to read, understand, and distinguish user interface components + +* explain how appropriate use of color allow people with disabilities to read, understand, and distinguish user interface components +* design user interfaces with other visual cues in addition to color, for example using different patterns, shapes, and icons * design user interfaces with texts and images of text that have a contrast ratio of at least 4.5:1 with respect to their background * design user interfaces with large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background * design user interfaces with components and graphics that have a contrast ratio of at least 3:1 with respect to their background @@ -155,6 +182,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: +* Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so alternative methods to convey that information are required. For references on how to convey information without using color alone, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). * Show examples of different foreground and background color combinations. Explain how contrast ratios between foreground and background allow users to perceive content and distinguish components from one another. * Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios for text (including images of text) need to be at least 4.5:1 with respect to their background. For references on how to apply contrast ratios to text (including images of text), see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). * Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. For techniques on how to add contrast ratios for graphics and interface components, see technique [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). From df210293802fb073d735929fb9e25f1b7089a446 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 7 Jun 2021 15:12:44 +0200 Subject: [PATCH 134/416] Clarifying zooming and enlarging --- content/designer/flexible-layout-and-design.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/content/designer/flexible-layout-and-design.md b/content/designer/flexible-layout-and-design.md index e58013b52..1ad87fcbc 100644 --- a/content/designer/flexible-layout-and-design.md +++ b/content/designer/flexible-layout-and-design.md @@ -209,6 +209,7 @@ Explain how people with disabilities use different screen sizes, screen configur Students should be able to: * design user interfaces that support text resizing without loss of content and functionality +* design user interfaces that support zomming and enlarging text in different viewport sizes and through multiple break-points * design user interfaces that support content view and operation in both portrait and landscape orientations * design user interfaces with target sizes and spaces to support tapping by people with mobility impairments and people using different input methods * design user interfaces that support customizing line height, as well as spacing between paragraphs, words, and letters @@ -218,6 +219,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Explain that people with low vision often need to resize text to be able to read it properly. This includes resizing text up to 200% using browsers functionality. For references on how to ensure text resizes up to 200%, see technique [G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width](https://www.w3.org/WAI/WCAG21/Techniques/general/G179). +* Discuss the use of multiple break-points by people with low vision. Explain that these break points often go beyond the traditional mobile, tablet, and desktop break-points. * Show examples of user interfaces showing up in both portrait and landscape modes. Explain that the ability to show an interface both in portrait and landscape is crucial for people who cannot change their device orientation due to mobility impairments. * Show examples of different tap targets and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that tap targets need to be large enough to accommodate different people's needs. * Show examples of different user interfaces that support customizing line height as well as spacing between paragraphs, words, and letters to support readability. From dd6a12e3d5f2c8281ff25eb34ec9a20af73b9344 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 8 Jun 2021 08:44:27 +0200 Subject: [PATCH 135/416] Updating modules --- content/designer/information-design.md | 2 +- content/designer/interaction-and-feedback.md | 2 +- content/designer/navigation.md | 12 ++++++------ .../designer/understanding-and-involving-users.md | 5 +++-- 4 files changed, 11 insertions(+), 10 deletions(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index ac94eb0f8..ad3586ebb 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -154,7 +154,7 @@ Optional ideas to support assessment: {% include excol.html type="start" %} -### Topic: Grouping and Sorting Information +### Topic: Forms and Controls {% include excol.html type="middle" %} diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index e7347838f..25b59ad48 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -167,7 +167,7 @@ Discuss some gestures that require dragging and drawing specific shapes on a tac Students should be able to: -* design user interfaces that support alternatives to device or user motion such as shaking, by using user interface components that do not require motion +* design user interfaces that support alternatives to device or user motion such as shaking by using user interface components that do not require motion * design user interfaces that support disabling response to motion to prevent accidental actuation, such as undoing an action by shaking a device * design user interfaces that support alternatives to multi-pointer gestures (such as swipe or pinch) using single pointer activation * design user interfaces that support undoing or aborting an action carried out with path-based operations diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 57e38caea..c3c43acca 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -33,11 +33,11 @@ Students should be able to: * explain strategies that people with disabilities use to navigate multipage websites and applications * design user interfaces that support different types of navigations, including menus, breadcrumb trails, tables of contents, and site maps -* define keyboard, mouse, and tactile interactions for menus and other navigation mechanisms +* define keyboard, mouse, and touch interactions for menus and other navigation mechanisms * provide clear and consistent visual cues for menus, menu item states, and other navigation mechanisms * define blocks of repeated content and collaborate with developers to implement mechanisms that bypass such blocks * identify related requirements for developers to: - * implement keyboard, mouse, and tactile interactions for navigation mechanisms + * implement keyboard, mouse, and touch interactions for navigation mechanisms * implement clear and descriptive names for navigation mechanisms {% include excol.html type="all" %} @@ -95,7 +95,7 @@ Students should be able to: * identify and describe uses of different types of menus, for example to navigate across web pages, to select categories from a crowded web page, and to navigate across applications * provide visual cues to distinguish menus from other components, and provide consistent styling for menu identification across a set of web pages -* define mouse, keyboard, and tactile interactions within menus +* define mouse, keyboard, and touch interactions within menus * design user interfaces that support appropriate sizing of menus and menu items to fit all text in different viewports and screen configurations * design user interfaces that communicate the state of menu items using distinguishable and consistent styles * identify related requirements for developers to implement semantics for different menu states and properties, such as hover, focus, current, active, and visited @@ -104,8 +104,8 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Explain menu conventions for accessible menus, such as clear and consistent styling to convey menu behaviors and states. Introduce patterns for mouse, keyboard, and tactile interaction with menus. -* Demonstrate menu interaction using different input devices, such as keyboard, mouse, and tactile. For example, activating a menu option by tapping, pressing the Enter key, and mouse clicking. Explain that defining the interactions is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. +* Explain menu conventions for accessible menus, such as clear and consistent styling to convey menu behaviors and states. Introduce patterns for mouse, keyboard, and touch interaction with menus. +* Demonstrate menu interaction using different input devices, such as keyboard, mouse, and touch. For example, activating a menu option by tapping, pressing the Enter key, and mouse clicking. Explain that defining the interactions is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. * Show examples of menu and menu items that contain large texts. Explain that, when used in smaller viewports or with different screen configurations, these texts may need to wrap so that they are perceived in their entirety. * Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Emphasize that the states of these menu items need to be communicated using visual cues as well as semantics. Explain that providing the visual cues is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. @@ -113,7 +113,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to support assessment. -* Practical — Students define mouse, keyboard, and tactile interactions for menus. for example, how to open, navigate, activate, and close such menus using the mouse, keyboard, and touch. Assess how students understand the need for different interaction patterns based on the input method in use. +* Practical — Students define mouse, keyboard, and touch interactions for menus. for example, how to open, navigate, activate, and close such menus using the mouse, keyboard, and touch. Assess how students understand the need for different interaction patterns based on the input method in use. * Practical — Present students with different menu states, such as hover, focus, current, active, and visited, and ask them to provide visual cues to distinguish them from one another. Assess how students communicate visually the state of menus and menu items. {% include excol.html type="end" %} diff --git a/content/designer/understanding-and-involving-users.md b/content/designer/understanding-and-involving-users.md index 482daaec4..a20ed158b 100644 --- a/content/designer/understanding-and-involving-users.md +++ b/content/designer/understanding-and-involving-users.md @@ -70,6 +70,7 @@ Skills required for this module: * In-depth knowledge of: * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * User Research Techniques + * Involving people with disabilities in the design and development processes {% include excol.html type="end" %} @@ -119,7 +120,7 @@ Optional ideas to support assessment. {% include excol.html type="middle" %} -Present accessibility standards (such as WCAG2). Discuss policies that apply in the students' region (if any). Explain functional and non-functional requirements related to people with disabilities. +Present the W3C accessibility standards. Discuss policies that apply in the students' region (if any). Explain functional and non-functional requirements related to people with disabilities. #### Learning Outcomes for Topic @@ -146,7 +147,7 @@ Optional ideas to support assessment: Optional ideas to support assessment: -* Short answer questions — Ask students about three different types of non-functional requirements included in accessibility standards, such as WCAG2. Assess how students understand non-functional requirements included in accessibility standards. +* Short answer questions — Ask students about three different types of non-functional requirements included in accessibility standards, such as WCAG. Assess how students understand non-functional requirements included in accessibility standards. * Short Answer Questions — Ask students about three types of functional requirements that are related to people with disabilities. Assess how students understand functional requirements that relate to people with disabilities. * Practical — Students create several personas that include different types of disabilities and different levels of skills using assistive technologies and adaptive strategies. Assess how students understand diversity among people with disabilities. * Practical — Students create several scenarios that include use of the product with different assistive technologies and adaptive strategies. Assess how students understand different scenarios that include use of the product with different assistive technologies and adaptive strategies. From 302f15d8512c6fe27ea88237e02bc1cc0770833b Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 8 Jun 2021 08:54:40 +0200 Subject: [PATCH 136/416] Removing accidental typos --- content/designer/flexible-layout-and-design.md | 2 +- content/designer/understanding-and-involving-users.md | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/content/designer/flexible-layout-and-design.md b/content/designer/flexible-layout-and-design.md index 1ad87fcbc..efd6aa6af 100644 --- a/content/designer/flexible-layout-and-design.md +++ b/content/designer/flexible-layout-and-design.md @@ -209,7 +209,7 @@ Explain how people with disabilities use different screen sizes, screen configur Students should be able to: * design user interfaces that support text resizing without loss of content and functionality -* design user interfaces that support zomming and enlarging text in different viewport sizes and through multiple break-points +* design user interfaces that support zooming and enlarging text in different viewport sizes and through multiple break-points * design user interfaces that support content view and operation in both portrait and landscape orientations * design user interfaces with target sizes and spaces to support tapping by people with mobility impairments and people using different input methods * design user interfaces that support customizing line height, as well as spacing between paragraphs, words, and letters diff --git a/content/designer/understanding-and-involving-users.md b/content/designer/understanding-and-involving-users.md index a20ed158b..81b69f645 100644 --- a/content/designer/understanding-and-involving-users.md +++ b/content/designer/understanding-and-involving-users.md @@ -39,7 +39,7 @@ Students should be able to: * explain how involving people with disabilities can lead to more accessible designs * examine applicable design requirements for accessibility, such as those defined by accessibility standards and policies * articulate the potential risks of not involving people with disabilities, such as increased costs to implement accessibility at a later stage -* describe different strategies when including real people with disabilities, such as providing accommodations, checking te accessibility of the facilities, and considering different timings depending on user skills +* describe different strategies when including real people with disabilities, such as providing accommodations, checking the accessibility of the facilities, and considering different timings depending on user skills * identify related requirements for product owners and other team roles to plan for the involvement of people with disabilities * identify related requirements for developers and content authors to implement user feedback that relates to their tasks during the developing an authoring phases @@ -101,7 +101,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Discuss different examples of involving people with disabilities. Explain that this gives user researchers the opportunity to collect direct feedback from people with disabilities on products that are working for them and on products that are not. Emphasize that you can then include that feedback in the research conclusions so that they lead to better overall design for everybody. -* Discuss scenarios where it might not be economically feasible to involve people with disabilities. Explain different research methods that can be used to get an understanding of how people with disabilities interact with technology. For examplee, asking users, checking documentation, or watching videos. Explain that these research activities help the team understanddifferent solutions to common pitfalls that people with disabilities may encounter when using the product or service. +* Discuss scenarios where it might not be economically feasible to involve people with disabilities. Explain different research methods that can be used to get an understanding of how people with disabilities interact with technology. For example, asking users, checking documentation, or watching videos. Explain that these research activities help the team understand different solutions to common pitfalls that people with disabilities may encounter when using the product or service. * Explain the consequences of not involving people with disabilities. Emphasize that accessibility remediation is often difficult and can lead to higher costs when implementing accessibility later on in the development phase. * Present characteristics of potential participants in user research activities based on several factors, such as the type of disability and the level of skills using assistive technologies and adaptive strategies. @@ -185,7 +185,7 @@ Optional ideas to teach the learning outcomes: * Explain how including real people with disabilities can help better inform the decisions taken in iterative design processes. For example, mention complex interaction patterns, such as complex form fields or custom dialogs, and reinforce the idea that feedback on expected behaviors and interaction patterns will help take the best design decision. * Discuss the different levels of skills of people with disabilities when using an assistive technology or an adaptive strategy. Emphasize that some assistive technologies and adaptive strategies are difficult to learn. Explain that different people may need different timings to conduct the proposed activities. Present different strategies to include these differences. For example, setting up different time expectations depending on different levels of experience with the assistive technology and different levels of familiarity with the product. * Explain different testing methods that exist, such as testing with an assistive technology, testing a paper prototype, or testing an HTML template. Explain that each of these methods delivers different types of outputs. For example, testing a paper prototype is more likely to deliver results related to visual aspects, and assistive technology testing is more likely to deliver results related to the compatibility of the product with assistive technology. -* Discuss several examples of complex user interfaces. Explain that participation of other team members, such as developers and content authors, may be required to address the feedback received from people with disabilities. Emphasize that requesting that participation is a responsability of the user researcher, whereas coordinating such participation is a responsibility of the project manager. +* Discuss several examples of complex user interfaces. Explain that participation of other team members, such as developers and content authors, may be required to address the feedback received from people with disabilities. Emphasize that requesting that participation is a responsibility of the user researcher, whereas coordinating such participation is a responsibility of the project manager. #### Ideas to Assess Knowledge for Topic From 5c73dca8215a34ff92044cee2457a8c070046fd3 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 8 Jun 2021 12:48:16 +0200 Subject: [PATCH 137/416] Reorganizing competencies for instructors --- content/designer/flexible-layout-and-design.md | 8 ++++---- content/designer/images-and-graphics.md | 7 +++++-- content/designer/information-design.md | 9 ++++++--- content/designer/interaction-and-feedback.md | 4 ++++ content/designer/multimedia-and-animations.md | 8 ++++++-- content/designer/navigation.md | 12 +++++++----- 6 files changed, 32 insertions(+), 16 deletions(-) diff --git a/content/designer/flexible-layout-and-design.md b/content/designer/flexible-layout-and-design.md index efd6aa6af..87e91a6f8 100644 --- a/content/designer/flexible-layout-and-design.md +++ b/content/designer/flexible-layout-and-design.md @@ -69,10 +69,6 @@ Skills required for this module: {% include excol.html type="middle" %} -* In-depth knowledge of: - * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) - * Visual Design Techniques - * Responsive Design Techniques * Applied expertise in teaching: * [WCAG Success Criterion 1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG21/quickref/#time-based-media) * [WCAG Success Criterion 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) @@ -90,6 +86,10 @@ Skills required for this module: * [WCAG Success Criterion 2.4.3 Focus Order](https://www.w3.org/WAI/WCAG21/quickref/#focus-order) * [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) * [WCAG Success Criterion 2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG21/quickref/#focus-visible) +* In-depth knowledge of: + * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) + * Visual Design + * Responsive Design {% include excol.html type="end" %} diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 648140395..1aedd5065 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -65,12 +65,15 @@ Skills required for this module: {% include excol.html type="middle" %} -* In-depth knowledge of: - * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Applied expertise in teaching: * [WCAG Success Criterion 1.1.1 Non-Text Content](https://www.w3.org/WAI/WCAG21/quickref/#non-text-content) * [WCAG Success Criterion 1.4.5 Images of Text](https://www.w3.org/WAI/WCAG21/quickref/#images-of-text) * [WCAG Success Criterion 1.4.9 Images of Text (No Exception)](https://www.w3.org/WAI/WCAG21/quickref/#images-of-text-no-exception) +* In-depth knowledge of: + * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) + * Visual Design + * Responsive Design + * Information Architecture {% include excol.html type="end" %} diff --git a/content/designer/information-design.md b/content/designer/information-design.md index ad3586ebb..77f8ef1a9 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -63,14 +63,17 @@ Skills required for this module: {% include excol.html type="middle" %} -* In-depth knowledge of: - * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Applied expertise in teaching: * @@@ * [WCAG Success Criterion 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) * [WCAG Success Criterion 1.3.5 Identify Input Purpose](https://www.w3.org/WAI/WCAG21/quickref/#identify-input-purpose) * [WCAG Success Criterion 2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/quickref/#keyboard) * [WCAG Success Criterion 3.3.2 Labels or Instructions](https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions) +* In-depth knowledge of: + * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) + * Visual Design + * Responsive Design + * Information Architecture {% include excol.html type="end" %} @@ -174,7 +177,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to interact and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and programmatically, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look like is a designers' responsibility, whereas coding those relations is a developers' responsibility. -* Show examples of long lists of data, such as lists of countries or cities on a travel application. Explain that these lists are difficult to navigate with the keyboard, as it takes a long time to go through the different options one by one by pressing the arrow keys. Discuss several ways to make these interactions more efficient, such as providing ways for the user to type the first letters of their desired option, which reduces the amount of shown results, and providing ways for people to filter the datat they want revealed by the use of pseudo-search boxes. +* Show examples of long lists of data, such as lists of countries or cities on a travel application. Explain that these lists are difficult to navigate with the keyboard, as it takes a long time to go through the different options one by one by pressing the arrow keys. Discuss several ways to make these interactions more efficient, such as providing ways for the user to type the first letters of their desired option, which reduces the amount of shown results, and providing ways for people to filter the data they want revealed by the use of pseudo-search boxes. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 25b59ad48..64f0ebc74 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -68,6 +68,10 @@ Skills required for this module: * Applied expertise in teaching: * @@@ * In-depth knowledge of: + * [Prerequisites for students](/curricula/designer-modules/#prerequisites-for-students) + * Visual Design + * Responsive Design + * Information Architecture * Interaction design {% include excol.html type="end" %} diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index d0c25aabe..88658af1e 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -66,8 +66,6 @@ Skills required for this module: {% include excol.html type="middle" %} -* In-depth knowledge of: - * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Applied expertise in teaching: * [WCAG Success Criterion 1.2.1 Audio-only and Video-only (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#captions-prerecorded0 * [WCAG Success Criterion 1.2.2 Captions (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#captions-prerecorded) @@ -78,6 +76,12 @@ Skills required for this module: * [WCAG Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide) * [WCAG Success Criterion 2.3.1 Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG21/quickref/#three-flashes-or-below-threshold) * [WCAG Success Criterion 3.2.1 On Focus](https://www.w3.org/WAI/WCAG21/quickref/#on-focus) +* In-depth knowledge of: + * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) + * Visual Design + * Responsive Design + * InformationArchitecture + * Information Architecture {% include excol.html type="end" %} diff --git a/content/designer/navigation.md b/content/designer/navigation.md index c3c43acca..18988c31a 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -63,8 +63,6 @@ Skills required for this module: {% include excol.html type="middle" %} -* In-depth knowledge of: - * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Applied expertise in teaching: * [WCAG Success Criterion 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) * [WCAG 2 Success Criterion 2.4.1 Bypass Blocks](https://www.w3.org/WAI/WCAG21/quickref/#bypass-blocks) @@ -72,6 +70,10 @@ Skills required for this module: * [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) * [WCAG 2 Success Criterion 2.4.8 Location](https://www.w3.org/WAI/WCAG21/quickref/#location) * [WCAG 2 Success Criterion 3.2.3 Consistent Navigation](https://www.w3.org/WAI/WCAG21/quickref/#consistent-navigation) +* In-depth knowledge of: + * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) + * Visual Design + * Responsive Design {% include excol.html type="end" %} @@ -130,7 +132,7 @@ Introduce other navigation mechanisms that may be used depending on the characte Students should be able to: -* define blocks of repeated content, such as navigation bars or header contents, and define mechanisms to skipp such blocks using at least one of the following: +* define blocks of repeated content, such as navigation bars or header contents, and define mechanisms to skip such blocks using at least one of the following: * a link at the top of each page that goes directly to the main content area * a link at the beginning of a block of repeated content to go to the end of the block * links at the top of the page that go to each area of the content @@ -158,7 +160,7 @@ Optional ideas to support assessment: * Practical — Students define the blocks of repeated content within a website and collaborate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they provide a mechanism to bypass them. * Practical — Present students with an interface and ask them to provide multiple ways to navigate across the website. Assess how students provide multiple navigation mechanisms where appropriate, such as search functionalities, breadcrumb trails, site maps, and tables of contents. -* Practical — Present students with a web page that is deep in the hierarchy of a website and ask them to provide a breadcrumb trail for users to understand where a page is located with respect to the whole website. Assess how students communicate the hiearrchical structore of a web page within a set of web pages. +* Practical — Present students with a web page that is deep in the hierarchy of a website and ask them to provide a breadcrumb trail for users to understand where a page is located with respect to the whole website. Assess how students communicate the hierarchical structure of a web page within a set of web pages. {% include excol.html type="end" %} @@ -168,7 +170,7 @@ Optional ideas to support assessment: Optional ideas to support assessment: -* Portfolio — Students design naviganion menu and other navigational mechanisms for a set of web pages. Assess how students understand accessibility features of navigation across multipage websites and applications . +* Portfolio — Students design the navigation menu and other navigational mechanisms for a set of web pages. Assess how students understand accessibility features of navigation across multipage websites and applications . ## Teaching Resources From 7ccc2040eca7b836754ca910984b459e0f9c6bdb Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 8 Jun 2021 16:24:06 +0200 Subject: [PATCH 138/416] Updates to modules --- content/designer/interaction-and-feedback.md | 34 +++++++++++-------- content/designer/multimedia-and-animations.md | 4 +-- content/designer/navigation.md | 1 + 3 files changed, 22 insertions(+), 17 deletions(-) diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 64f0ebc74..e0aa5d1f7 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -24,7 +24,7 @@ navigation: Courses based on this module should: -* explain strategies that people with disabilities use to operate interactive user interface components +* explain strategies that people with disabilities use to operate interactive user interface components * describe some accessibility requirements related to keyboard interactions, input gestures, labels, instructions, notifications, and feedback ## Learning Outcomes for Module @@ -37,7 +37,7 @@ Students should be able to: * provide methods to help understand the context, information, and functionality of user interface components, including through textual instructions, color, and other visual cues * provide meaningful and descriptive notifications about imminent time limits, steps, status changes, and feedback from user input, including errors, suggestions for correction, and success messages * define custom interaction patterns, such as where to place focus when a dialog is open and closed, and what the focus order should be within those dialogs -* define mechanisms to obtain information about custom interaction patterns, such as specific keyboard shortcuts for applications +* define mechanisms to obtain information about custom interaction patterns, such as custom keyboard shortcuts for applications and custom widgets * identify related requirements for developers to programmatically associate properties of interactive user interface components, such as names, states, and instructions, to their corresponding component * identify related requirements for developers to write code for custom keyboard interactions that interactive components may require @@ -55,7 +55,11 @@ Skills required for this module: * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Prior [Designer Modules](/curricula/designer-modules/) -* Knowledge of interaction design +* Knowledge of: + * Visual Design + * Responsive Design + * Information Design + * Interaction Design {% include excol.html type="end" %} @@ -72,7 +76,7 @@ Skills required for this module: * Visual Design * Responsive Design * Information Architecture - * Interaction design + * Interaction Design {% include excol.html type="end" %} @@ -103,9 +107,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Reflect on standard keyboard conventions. For example, use of the tab to move through interactive controls, use of the arrow keys to move through list items, and use of the Enter key to select an item. Explain that these need to be preserved as much as possible when designing custom functionality, and custom keyboard interaction should be defined when these standard conventions are not enough to achieve the goals of the user interface. Explain that defining keyboard interactions is a designers' responsibility, whereas implementing such interaction is a responsibility shared with the developer. -* Present some examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. -* Show examples of help functionality to explain custom keyboard interactions. Explain that, while custom keyboard interactions are preferred by some users for efficiency reasons, it can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these mechanisms is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. +* Invite students to try standard keyboard conventions. For example, use of the tab to move through interactive controls, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that these interactions need to be preserved as much as possible when designing custom widgets. Custom keyboard interactions should be defined when these standard conventions are not enough to achieve the goals of the user interface. Explain that defining keyboard interactions is a designers' responsibility, whereas implementing such interaction is a responsibility shared with the developer. +* Present some examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. +* Show examples of help functionality to explain custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using such shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these mechanisms is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic @@ -127,13 +131,13 @@ Show examples of labels and instructions for interactive user interface componen Students should be able to: -* provide names to help users understand the purpose and intent of interactive user interface components +* provide clear and consistent names to help users understand the purpose and intent of interactive user interface components * design user interfaces that allow to position labels where users expect them * provide instructions about which input fields are required by: * including information about each of the required form fields before the form control - * including color, text, and visual cues in the label of each of the required form fields that indicate that they are required + * including textual and visual cues in the label of each of the required form fields that indicate that they are required * provide clear instructions about changes in context before the control that originates such changes -* provide overall instructions about existing time limits in a form and about how they can be turned off, adjusted, or extended +* provide overall instructions about existing time limits in a form and about how they can be adjusted, extended, and turned off * provide clear instructions about the current step and about the total number of steps involved in a multi-step form * identify related requirements for developers to code labels and instructions appropriately @@ -141,9 +145,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different interactive components, such as buttons, links, or widgets, and emphasize that each should have a clear name that allows to identify its purpose. For reference on how to provide names for different user interface components, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). +* Show examples of different interactive components (such as buttons, links, lists, and grids) across rich applications or complex widgets and emphasize that each should have a clear name that allows to identify its purpose. For reference on how to provide names for different user interface components, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). * Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. -* Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several mechanisms, including color, text, and other visual cues. +* Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several mechanisms, including textual and visual cues. * Present examples of time limits, such as those warning about session expirations. Explain that instructions need to be provided so that users are aware of the time limits, and mechanisms need to be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designers' responsibility, whereas implementing mechanisms to stop, extend, or adjust time limits is a responsibility shared with the developer. * Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. For reference on how to provide instructions for multi-step forms, see @@@ @@ -152,7 +156,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to support assessment: * Practical — Present students with a form and ask them to define labels for each of the fields. Assess how students provide clear and descriptive names for each of the form fields. -* Practical — Give students an application and ask them to provide names for each of the application subsections. Assess how students identify application section and provide clear and understandable names for each. +* Practical — Give students an application and ask them to provide names for each of the application subsections. Assess how students identify application subsections and provide clear and understandable names for each. * Practical — Give students a form and ask them to provide the necessary instructions for users to understand each of the fields and fill in the form. Assess how students provide clear and concise instructions. {% include excol.html type="end" %} @@ -165,7 +169,7 @@ Optional ideas to support assessment: Show examples of user interfaces that react to motion, such as shaking the device to perform a specific action. Explain that some people may perform these motion-based gestures inadvertently, some others may not be able to perform them at all. Discuss some alternatives to motion-based gestures. -Discuss some gestures that require dragging and drawing specific shapes on a tactile screen. Explain that these are difficult (and sometimes impossible) for some people with mobility impairments. +Discuss some gestures that require dragging and drawing specific paths on a touch screen. Explain that these are difficult (and sometimes impossible) to perform for some people with mobility impairments. #### Learning Outcomes for Topic @@ -209,7 +213,7 @@ Students should be able to: * design user interfaces with notifications that are easy to understand and that can be distinguished from any other user interface component * provide meaningful and descriptive messages about errors, suggestions for corrections, and successes -* design user interfaces that support switching notifications on or off to allow notifications processing at the users' pace +* design user interfaces that support notification storage to allow notifications checking at the users' pace * design user interfaces that support mechanisms to queue and prioritize application notifications coming from different interactive user interface components * describe related requirements for developers to code notification messages appropriately diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 88658af1e..f4131ff5d 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -67,7 +67,7 @@ Skills required for this module: {% include excol.html type="middle" %} * Applied expertise in teaching: - * [WCAG Success Criterion 1.2.1 Audio-only and Video-only (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#captions-prerecorded0 + * [WCAG Success Criterion 1.2.1 Audio-only and Video-only (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#captions-prerecorded) * [WCAG Success Criterion 1.2.2 Captions (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#captions-prerecorded) * [WCAG Success Criterion 1.2.3 Audio Description or Media Alternative (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#audio-description-or-media-alternative-prerecorded) * [WCAG Success Criterion 1.2.4 Captions (Live)](https://www.w3.org/WAI/WCAG21/quickref/#captions-live) @@ -76,11 +76,11 @@ Skills required for this module: * [WCAG Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide) * [WCAG Success Criterion 2.3.1 Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG21/quickref/#three-flashes-or-below-threshold) * [WCAG Success Criterion 3.2.1 On Focus](https://www.w3.org/WAI/WCAG21/quickref/#on-focus) + * [WCAG Success Criterion 3.2.5 Change on Request](https://www.w3.org/WAI/WCAG21/quickref/#change-on-request) * In-depth knowledge of: * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Visual Design * Responsive Design - * InformationArchitecture * Information Architecture {% include excol.html type="end" %} diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 18988c31a..4fdf55bfc 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -74,6 +74,7 @@ Skills required for this module: * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Visual Design * Responsive Design + * Information Architecture {% include excol.html type="end" %} From 15b39a9c9ec2d4dfea20b6fe66716483a1170cbe Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 9 Jun 2021 12:13:25 +0200 Subject: [PATCH 139/416] Updates to module 1 --- .../understanding-and-involving-users.md | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/content/designer/understanding-and-involving-users.md b/content/designer/understanding-and-involving-users.md index 81b69f645..d907080f4 100644 --- a/content/designer/understanding-and-involving-users.md +++ b/content/designer/understanding-and-involving-users.md @@ -39,8 +39,9 @@ Students should be able to: * explain how involving people with disabilities can lead to more accessible designs * examine applicable design requirements for accessibility, such as those defined by accessibility standards and policies * articulate the potential risks of not involving people with disabilities, such as increased costs to implement accessibility at a later stage +* describe different types of feedback from people with disabilities depending on the project phase where they are involved * describe different strategies when including real people with disabilities, such as providing accommodations, checking the accessibility of the facilities, and considering different timings depending on user skills -* identify related requirements for product owners and other team roles to plan for the involvement of people with disabilities +* identify related requirements for product owners and other team roles to plan for the involvement of people with disabilities during the analysis, design, and development phases * identify related requirements for developers and content authors to implement user feedback that relates to their tasks during the developing an authoring phases {% include excol.html type="all" %} @@ -90,7 +91,7 @@ Refer back to Foundation Module 2: People and Digital Technology, [Topic Diverse Students should be able to: -* describe the impact of including real people with disabilities in user research activities +* describe the impact of including real people with disabilities in user research activities versus including personas or simulations * describe desk research activities to be conducted in situations where it is not feasible to include real people with disabilities, such as asking for experts' advice, or following documented best practices for accessibility * articulate and communicate the consequences of not involving people with disabilities, for example higher costs to implement accessibility at a later stage * describe the characteristics of potential participants in user research activities based on different factors, such as the type of disability and the level of skills using assistive technologies and adaptive strategies @@ -100,7 +101,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Discuss different examples of involving people with disabilities. Explain that this gives user researchers the opportunity to collect direct feedback from people with disabilities on products that are working for them and on products that are not. Emphasize that you can then include that feedback in the research conclusions so that they lead to better overall design for everybody. +* Discuss different examples of involving people with disabilities, such as bringing real people and using personas when you cannot bring real people. Explain that this gives user researchers the opportunity to collect direct feedback from people with disabilities on products that are working for them and on products that are not. Emphasize that you can then include that feedback in the research conclusions so that they lead to better overall design for everybody. * Discuss scenarios where it might not be economically feasible to involve people with disabilities. Explain different research methods that can be used to get an understanding of how people with disabilities interact with technology. For example, asking users, checking documentation, or watching videos. Explain that these research activities help the team understand different solutions to common pitfalls that people with disabilities may encounter when using the product or service. * Explain the consequences of not involving people with disabilities. Emphasize that accessibility remediation is often difficult and can lead to higher costs when implementing accessibility later on in the development phase. * Present characteristics of potential participants in user research activities based on several factors, such as the type of disability and the level of skills using assistive technologies and adaptive strategies. @@ -132,8 +133,9 @@ Students should be able to: * availability of content and functionality in different screen sizes and configurations * keyboard compatibility * compatibility with assistive technologies and adaptive strategies -* identify and create personas that include people with different types of disabilities and different levels of skills using assistive technologies and adaptive strategies -* identify and create scenarios that include use of the product with different types of assistive technologies and adaptive strategies +* research existing personas and scenarios that avoid common clichés and myths related to people with disabilities +* create personas that include people with different types of disabilities and different levels of skills using assistive technologies and adaptive strategies +* create scenarios that include use of the product with different types of assistive technologies and adaptive strategies ### Teaching Ideas for Topic @@ -141,7 +143,7 @@ Optional ideas to support assessment: * Refer back to Foundation Module 4: Principles, Standards, and Checks, [Topic: W3C Accessibility Standards](/curricula/foundation-modules/principles-standards-and-checks/#topic-w3c-accessibility-standards) and explain the importance of including the W3C accessibility standards in the overall project requirements for ensuring accessible products. * Explain some functional requirements of products and services that relate to accessibility, such as appropriate contrast ratios, compatibility with assistive technologies and adaptive strategies, and keyboard support. -* Reflect on the diversity of people with disabilities. Explain that, when creating personas, these need to reflect the different types of abilities people have as well as their level of skills using assistive technologies and adaptive strategies. +* Reflect on the diversity of people with disabilities. Explain that, when creating personas, these need to reflect the different types of abilities people have as well as their level of skills using assistive technologies and adaptive strategies. Explain the importance of creating realistic personas that avoid clichés and myths. For reference, see [Interacting with People with Disabilities](http://www.uiaccess.com/accessucd/interact.html). ### Ideas to Assess Knowledge for Topic @@ -160,23 +162,23 @@ Optional ideas to support assessment: {% include excol.html type="middle" %} -Discuss different strategies to consider when working with real people with disabilities, such as accommodations, accessibility of the facilities, and specific setups people with disabilities may require. +Discuss different strategies to consider when working with people with disabilities, such as accommodations, accessibility of the facilities, and specific setups people with disabilities may require. #### Learning Outcomes for Topic Students should be able to: -* identify the need for including real people with disabilities depending on the project requirements and the activities to be conducted +* identify the need for including people with disabilities depending on the project requirements and the activities to be conducted * articulate the advantages and disadvantages of remote versus face-to-face participation when working with people with disabilities * articulate the advantages and disadvantages of guided and non-guided testing +* identify the existence of custom setups that may require researchers to visit users at their home or office * identify the following needs when research activities are conducted at a specific location: * accessibility of the facilities * assistive technology needs - * custom setups that people with disabilities may require * accessibility of transportation means to get to the chosen venue * identify the need for appropriate timings for participants with different levels of skills to conduct the research activities * relate different testing methods to different accessibility outcomes -* communicate the need for involvement of different roles (such as developers and content authors) to implement received feedback that relates to their specific tasks during the development and authoring phases +* communicate the need for involvement of different roles, such as developers and content authors, to implement received feedback that relates to their specific tasks during the development and authoring phases #### Teaching Ideas for Topic From ee8d62580937c4a8cf19528b1c62ad852fd4da80 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 10 Jun 2021 11:38:55 +0200 Subject: [PATCH 140/416] Examples of functional requirements --- content/designer/understanding-and-involving-users.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/content/designer/understanding-and-involving-users.md b/content/designer/understanding-and-involving-users.md index d907080f4..64c53506c 100644 --- a/content/designer/understanding-and-involving-users.md +++ b/content/designer/understanding-and-involving-users.md @@ -121,7 +121,7 @@ Optional ideas to support assessment. {% include excol.html type="middle" %} -Present the W3C accessibility standards. Discuss policies that apply in the students' region (if any). Explain functional and non-functional requirements related to people with disabilities. +Present non-functional requirements that relate to people with disabilities, such as the W3C accessibility standards. Discuss policies that apply in the students' region (if any). #### Learning Outcomes for Topic @@ -129,10 +129,8 @@ Students should be able to: * identify different non-functional accessibility requirements, for example those included in WCAG and in applicable accessibility policies * identify different functional requirements that relate to people with disabilities, for example: - * appropriate contrast ratios - * availability of content and functionality in different screen sizes and configurations - * keyboard compatibility - * compatibility with assistive technologies and adaptive strategies + * a person with disabilities needs to understand how clothing looks like both through vision and through text descriptions + * a person with disabilities needs to be able to choose their sit when buying a ticket using their assistive technology of choice * research existing personas and scenarios that avoid common clichés and myths related to people with disabilities * create personas that include people with different types of disabilities and different levels of skills using assistive technologies and adaptive strategies * create scenarios that include use of the product with different types of assistive technologies and adaptive strategies From 9b1d5e04348799239c7cbc30f13049708e2aca61 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 10 Jun 2021 11:42:35 +0200 Subject: [PATCH 141/416] Updating intro paragraph --- content/designer/understanding-and-involving-users.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/understanding-and-involving-users.md b/content/designer/understanding-and-involving-users.md index 64c53506c..e4c53f6fe 100644 --- a/content/designer/understanding-and-involving-users.md +++ b/content/designer/understanding-and-involving-users.md @@ -121,7 +121,7 @@ Optional ideas to support assessment. {% include excol.html type="middle" %} -Present non-functional requirements that relate to people with disabilities, such as the W3C accessibility standards. Discuss policies that apply in the students' region (if any). +Present non-functional requirements that relate to people with disabilities, such as the W3C accessibility standards, and discuss some functional requirements that relate to people with disabilities. Invite students to explore policies that may apply in their region (if any). #### Learning Outcomes for Topic From fac02bbf47f6cc39f154677ce3af69db7acd5cb1 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 11 Jun 2021 11:10:39 +0200 Subject: [PATCH 142/416] Adding remote participation in LOs for module --- content/designer/understanding-and-involving-users.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/understanding-and-involving-users.md b/content/designer/understanding-and-involving-users.md index e4c53f6fe..9b6105124 100644 --- a/content/designer/understanding-and-involving-users.md +++ b/content/designer/understanding-and-involving-users.md @@ -40,7 +40,7 @@ Students should be able to: * examine applicable design requirements for accessibility, such as those defined by accessibility standards and policies * articulate the potential risks of not involving people with disabilities, such as increased costs to implement accessibility at a later stage * describe different types of feedback from people with disabilities depending on the project phase where they are involved -* describe different strategies when including real people with disabilities, such as providing accommodations, checking the accessibility of the facilities, and considering different timings depending on user skills +* describe different strategies when including real people with disabilities, such as providing accommodations, checking the accessibility of the facilities, exploring remote participation, and considering different timings depending on user skills * identify related requirements for product owners and other team roles to plan for the involvement of people with disabilities during the analysis, design, and development phases * identify related requirements for developers and content authors to implement user feedback that relates to their tasks during the developing an authoring phases From 46ac2471655903a7a0524f10012a76c54bea929b Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 11 Jun 2021 16:03:59 +0200 Subject: [PATCH 143/416] Update modules --- content/designer/flexible-layout-and-design.md | 8 +++++--- content/designer/navigation.md | 1 + 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/content/designer/flexible-layout-and-design.md b/content/designer/flexible-layout-and-design.md index 87e91a6f8..21a9a35e7 100644 --- a/content/designer/flexible-layout-and-design.md +++ b/content/designer/flexible-layout-and-design.md @@ -58,8 +58,8 @@ Skills required for this module: * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Basic knowledge of: - * Visual Design Techniques - * Responsive Design Techniques + * Visual Design + * Responsive Design {% include excol.html type="end" %} @@ -82,7 +82,6 @@ Skills required for this module: * [WCAG Success Criterion 1.4.10 Reflow](https://www.w3.org/WAI/WCAG21/quickref/#reflow) * [WCAG Success Criterion 1.4.11 Non-Text Contrast](https://www.w3.org/WAI/WCAG21/quickref/#non-text-contrast) * [WCAG Success Criterion 1.4.12 Text Spacing](https://www.w3.org/WAI/WCAG21/quickref/#text-spacing) - * [WCAG Success Criterion 2.4.2 Page Titled](https://www.w3.org/WAI/WCAG21/quickref/#page-titled) * [WCAG Success Criterion 2.4.3 Focus Order](https://www.w3.org/WAI/WCAG21/quickref/#focus-order) * [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) * [WCAG Success Criterion 2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG21/quickref/#focus-visible) @@ -143,6 +142,7 @@ Students should be able to: * define page regions by using appropriate landmarks * design user interfaces with text cues to convey information provided through vision only, such as an asterisk to convey required form fields in a form +* design user interfaces with focus indicators that allow people to tell where they are as they move through the web page and applications using the keyboard #### Teaching Ideas for Topic @@ -150,6 +150,8 @@ Optional ideas to teach the learning outcomes: * Show examples of different regions of web pages. Explain that the use of landmarks is needed for people to perceive such regions. Explain that defining landmarks is a designers' responsibility, whereas implementing such landmarks is a responsibility shared with the developer. * Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a store is open or closed and those with visual cues only to communicate that a product is sold out. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). +* Invite students to navigate a web page with appropriate focus indicators first, and then invite them to navigate a web page without focus indicators. Explain how focus indicators allow people using the keyboard only to determine where they are as they move through web pages and applications using the keyboard only. For reference on how to provide appropriate focus indicators, see technique [G149: Using user interface components that are highlighted by the user agent when they receive focus](https://www.w3.org/WAI/WCAG21/Techniques/general/G149.html). + #### Ideas to Assess Knowledge diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 4fdf55bfc..3f783930c 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -66,6 +66,7 @@ Skills required for this module: * Applied expertise in teaching: * [WCAG Success Criterion 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) * [WCAG 2 Success Criterion 2.4.1 Bypass Blocks](https://www.w3.org/WAI/WCAG21/quickref/#bypass-blocks) + * [WCAG Success Criterion 2.4.2 Page Titled](https://www.w3.org/WAI/WCAG21/quickref/#page-titled) * [WCAG 2 Success Criterion 2.4.5 Multiple Ways](https://www.w3.org/WAI/WCAG21/quickref/#multiple-ways) * [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) * [WCAG 2 Success Criterion 2.4.8 Location](https://www.w3.org/WAI/WCAG21/quickref/#location) From 14e0f425bea0a0afda74c04b0c3f7bd191dfa9a6 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 11 Jun 2021 16:27:24 +0200 Subject: [PATCH 144/416] Trying module move --- _data/navigation.yml | 4 +- .../getting-started-with-accessibility.md | 2 +- .../understanding-and-involving-users.md | 74 +++++++------------ 3 files changed, 30 insertions(+), 50 deletions(-) rename content/{designer => foundation}/understanding-and-involving-users.md (76%) diff --git a/_data/navigation.yml b/_data/navigation.yml index 280fdcb7c..1794f0a7d 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -239,6 +239,8 @@ url: "/curricula/foundation-modules/principles-standards-and-checks/" - name: Getting Started with Accessibility url: "/curricula/foundation-modules/getting-started-with-accessibility/" + - name: Understanding and Involving Users + url: "/curricula/foundation-modules/understanding-and-involving-users/" - name: Developer Modules url: "/curricula/developer-modules/" pages: @@ -259,8 +261,6 @@ - name: Designer Modules url: "/curricula/designer-modules/" pages: - - name: Understanding and Involving Users - url: "/curricula/designer-modules/understanding-and-involving-users/" - name: Flexible Layout and Design url: "/curricula/designer-modules/flexible-layout-and-design/" - name: Navigation diff --git a/content/foundation/getting-started-with-accessibility.md b/content/foundation/getting-started-with-accessibility.md index b19e38bb9..56d88f86a 100644 --- a/content/foundation/getting-started-with-accessibility.md +++ b/content/foundation/getting-started-with-accessibility.md @@ -21,7 +21,7 @@ parent_in_h1: name: "Curricula on Web Accessibility" navigation: previous: /curricula/foundation-modules/principles-standards-and-checks/ - next: /curricula/developer-modules/ + next: /curricula/foundation-modules/understanding-and-involving-users/ --- ## Introduction diff --git a/content/designer/understanding-and-involving-users.md b/content/foundation/understanding-and-involving-users.md similarity index 76% rename from content/designer/understanding-and-involving-users.md rename to content/foundation/understanding-and-involving-users.md index 9b6105124..8bb512304 100644 --- a/content/designer/understanding-and-involving-users.md +++ b/content/foundation/understanding-and-involving-users.md @@ -1,12 +1,12 @@ --- -title: "[Draft] Module 1: Understanding and Involving Users" +title: "[Draft] Module 6: Understanding and Involving Users" nav_title: "Understanding and Involving Users" -permalink: /curricula/designer-modules/understanding-and-involving-users/ -ref: /curricula/designer-modules/understanding-and-involving-users/ +permalink: /curricula/foundation-modules/understanding-and-involving-users/ +ref: /curricula/foundation-modules/understanding-and-involving-users/ lang: en github: repository: w3c/wai-curricula - path: content/designer/understanding-and-involving-users.md + path: content/foundation/understanding-and-involving-users.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ @@ -20,8 +20,8 @@ parent_in_h1: - ref: /curricula/ name: "Curricula on Web Accessibility" navigation: - previous: /curricula/designer-modules/ - next: /curricula/designer-modules/flexible-layout-and-design/ + previous: /curricula/foundation-modules/getting-started-with-accessibility/ + next: /curricula/developer-modules/ --- ## Introduction @@ -29,20 +29,18 @@ navigation: Courses based on this module should: -* explain the impact of involving people with disabilities to create more accessible designs -* present strategies for involving real people with disabilities +* explain the impact of involving people with disabilities to create more accessible products and services +* present strategies for involving real people with disabilities in the analysis, design, and development phases ## Learning Outcomes for Module Students should be able to: -* explain how involving people with disabilities can lead to more accessible designs -* examine applicable design requirements for accessibility, such as those defined by accessibility standards and policies +* explain how involving people with disabilities can lead to more accessible products and services +* examine applicable requirements for accessibility, such as those defined by accessibility standards and policies * articulate the potential risks of not involving people with disabilities, such as increased costs to implement accessibility at a later stage * describe different types of feedback from people with disabilities depending on the project phase where they are involved -* describe different strategies when including real people with disabilities, such as providing accommodations, checking the accessibility of the facilities, exploring remote participation, and considering different timings depending on user skills -* identify related requirements for product owners and other team roles to plan for the involvement of people with disabilities during the analysis, design, and development phases -* identify related requirements for developers and content authors to implement user feedback that relates to their tasks during the developing an authoring phases +* describe strategies to consider when bringing in people with disabilities, such as providing accommodations, checking the accessibility of the facilities, exploring remote participation, and considering different timings depending on user skills {% include excol.html type="all" %} @@ -50,31 +48,15 @@ Students should be able to: Skills required for this module: -{% include excol.html type="start" %} - -### Students - -{% include excol.html type="middle" %} - -* [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) -* Basic knowledge of: - * User Research Techniques - -{% include excol.html type="end" %} +Students: -{% include excol.html type="start" %} - -### Instructors - -{% include excol.html type="middle" %} - -* In-depth knowledge of: - * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) - * User Research Techniques - * Involving people with disabilities in the design and development processes - -{% include excol.html type="end" %} +* Basic understanding of computers and the Web. +Instructors: +* Prior [Foundation Modules](/curricula/foundation-modules/) +* Good understanding of the links between web accessibility components. +* In-depth knowledge of how people with disabilities use the Web (including assistive technologies and adaptive strategies) and of accessibility principles. + ## Topics to Teach Topics to achieve the learning outcomes: @@ -85,14 +67,14 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Refer back to Foundation Module 2: People and Digital Technology, [Topic Diverse Abilities and Barriers](/curricula/foundation-modules/people-and-digital-technology/#topic-diverse-abilities-and-barriers). Discuss how organizations conducting user research can include feedback on different accessibility features, barriers, and requirements that relate to people with disabilities. +Discuss how organizations conducting user research can include feedback on different accessibility features, barriers, and requirements that relate to people with disabilities. #### Learning Outcomes for Topic Students should be able to: -* describe the impact of including real people with disabilities in user research activities versus including personas or simulations -* describe desk research activities to be conducted in situations where it is not feasible to include real people with disabilities, such as asking for experts' advice, or following documented best practices for accessibility +* describe the impact of including real people with disabilities versus including only personas or simulations +* describe other research activities to be conducted in situations where it is not feasible to include real people with disabilities, such as asking for experts' advice, or following documented best practices for accessibility * articulate and communicate the consequences of not involving people with disabilities, for example higher costs to implement accessibility at a later stage * describe the characteristics of potential participants in user research activities based on different factors, such as the type of disability and the level of skills using assistive technologies and adaptive strategies * identify related requirements for project managers and other team members to include accessibility in the overall project requirements @@ -101,7 +83,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Discuss different examples of involving people with disabilities, such as bringing real people and using personas when you cannot bring real people. Explain that this gives user researchers the opportunity to collect direct feedback from people with disabilities on products that are working for them and on products that are not. Emphasize that you can then include that feedback in the research conclusions so that they lead to better overall design for everybody. +* Discuss different examples of involving people with disabilities, such as bringing real people and using personas when you cannot bring real people. Explain that this gives the opportunity to collect direct feedback from people with disabilities on products that are working for them and on products that are not. Emphasize that you can then include that feedback in the research conclusions so that they lead to better overall design for everybody. * Discuss scenarios where it might not be economically feasible to involve people with disabilities. Explain different research methods that can be used to get an understanding of how people with disabilities interact with technology. For example, asking users, checking documentation, or watching videos. Explain that these research activities help the team understand different solutions to common pitfalls that people with disabilities may encounter when using the product or service. * Explain the consequences of not involving people with disabilities. Emphasize that accessibility remediation is often difficult and can lead to higher costs when implementing accessibility later on in the development phase. * Present characteristics of potential participants in user research activities based on several factors, such as the type of disability and the level of skills using assistive technologies and adaptive strategies. @@ -121,14 +103,13 @@ Optional ideas to support assessment. {% include excol.html type="middle" %} -Present non-functional requirements that relate to people with disabilities, such as the W3C accessibility standards, and discuss some functional requirements that relate to people with disabilities. Invite students to explore policies that may apply in their region (if any). +Refer back to Module 4: Principles. Standards, and Checks [Topic: W3C Accessibility Standards](/curricula/foundation-modules/principles-standards-and-checks/#topic-w3c-accessibility-standards). Present requirements that relate to people with disabilities, such as those included in the W3C accessibility standards. Invite students to explore policies that may apply in their region (if any). #### Learning Outcomes for Topic Students should be able to: -* identify different non-functional accessibility requirements, for example those included in WCAG and in applicable accessibility policies -* identify different functional requirements that relate to people with disabilities, for example: +* identify requirements that relate to people with disabilities, for example: * a person with disabilities needs to understand how clothing looks like both through vision and through text descriptions * a person with disabilities needs to be able to choose their sit when buying a ticket using their assistive technology of choice * research existing personas and scenarios that avoid common clichés and myths related to people with disabilities @@ -156,18 +137,17 @@ Optional ideas to support assessment: {% include excol.html type="start" %} -### Topic: Including Real People with Disabilities +### Topic: Working with Real People with Disabilities {% include excol.html type="middle" %} -Discuss different strategies to consider when working with people with disabilities, such as accommodations, accessibility of the facilities, and specific setups people with disabilities may require. +Discuss different strategies to consider when working with people with disabilities, such as accommodations, participation modalities, accessibility of the facilities, and specific setups people with disabilities may require. #### Learning Outcomes for Topic Students should be able to: * identify the need for including people with disabilities depending on the project requirements and the activities to be conducted -* articulate the advantages and disadvantages of remote versus face-to-face participation when working with people with disabilities * articulate the advantages and disadvantages of guided and non-guided testing * identify the existence of custom setups that may require researchers to visit users at their home or office * identify the following needs when research activities are conducted at a specific location: @@ -176,7 +156,7 @@ Students should be able to: * accessibility of transportation means to get to the chosen venue * identify the need for appropriate timings for participants with different levels of skills to conduct the research activities * relate different testing methods to different accessibility outcomes -* communicate the need for involvement of different roles, such as developers and content authors, to implement received feedback that relates to their specific tasks during the development and authoring phases +* identify the need for involvement of different roles, such as project managers, user researchers, designers, developers, and content authors, to implement received feedback that relates to their specific tasks during the development and authoring phases #### Teaching Ideas for Topic From 1cb46829fe8b755895137c02672f7670333c4dcd Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Sun, 13 Jun 2021 17:15:00 +0200 Subject: [PATCH 145/416] Updating module on navigation --- content/designer/navigation.md | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 3f783930c..8f5e0c2a1 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -32,10 +32,11 @@ Courses based on this module should: Students should be able to: * explain strategies that people with disabilities use to navigate multipage websites and applications -* design user interfaces that support different types of navigations, including menus, breadcrumb trails, tables of contents, and site maps -* define keyboard, mouse, and touch interactions for menus and other navigation mechanisms -* provide clear and consistent visual cues for menus, menu item states, and other navigation mechanisms +* design user interfaces that support different types of navigations, including menus, tables of contents, and site maps +* define keyboard, mouse, and touch interactions for menus and other navigations +* provide clear and consistent visual cues for menus, menu item states, and other navigations * define blocks of repeated content and collaborate with developers to implement mechanisms that bypass such blocks +* provide mechanisms for users to locate a specific web page within a set of web pages, such as breadcrumb trails and page titles * identify related requirements for developers to: * implement keyboard, mouse, and touch interactions for navigation mechanisms * implement clear and descriptive names for navigation mechanisms @@ -108,7 +109,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Explain menu conventions for accessible menus, such as clear and consistent styling to convey menu behaviors and states. Introduce patterns for mouse, keyboard, and touch interaction with menus. +* Explain conventions for accessible menus, such as clear and consistent styling to convey menu behaviors and states. Introduce patterns for mouse, keyboard, and touch interaction with menus. * Demonstrate menu interaction using different input devices, such as keyboard, mouse, and touch. For example, activating a menu option by tapping, pressing the Enter key, and mouse clicking. Explain that defining the interactions is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. * Show examples of menu and menu items that contain large texts. Explain that, when used in smaller viewports or with different screen configurations, these texts may need to wrap so that they are perceived in their entirety. * Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Emphasize that the states of these menu items need to be communicated using visual cues as well as semantics. Explain that providing the visual cues is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. @@ -141,9 +142,9 @@ Students should be able to: * an expandable and collapsible menu to make it easier for users to skip the menu * provide other navigation mechanisms to ensure web pages or application views can be reached using several of the following methods: * search functionalities that support navigating to specific parts of the site - * breadcrumb trails to provide information about the users' location in a set of web pages * site maps to provide an overview of the entire website * tables of contents to give an overview of the whole website or document and to allow users to go to specific parts of the content +* provide ways for users to locate a specific web page within a set of web pages, for examples using descriptive page titles or including breadcrumb trails #### Teaching Ideas for Topic @@ -151,10 +152,11 @@ Optional ideas to teach the learning outcomes: * Show examples of mechanisms to bypass blocks of repeated content, such as a link at the top of the page and the use of expandable and collapsible components. Explain that navigating through sets of repeated blocks of content using the tab key only is time consuming. For examples on how to provide a mechanism to bypass blocks of repeated content, see techniques [G1: Adding a link at the top of each page that goes directly to the main content area](https://www.w3.org/WAI/WCAG21/Techniques/general/G1.html), [G123: Adding a link at the beginning of a block of repeated content to go to the end of the block](https://www.w3.org/WAI/WCAG21/Techniques/general/G123.html), and [G124: Adding links at the top of the page to each area of the content](https://www.w3.org/WAI/WCAG21/Techniques/general/G124.html). * Show examples of search functionalities. Explain that they help users find content by supporting navigation to different parts of the site. Emphasize that some users prefer this way of navigating, especially when they are already familiar with the site and know what they are looking for. For references on how to provide a search functionality, see technique [G161: Providing a search function to help users find content](https://www.w3.org/WAI/WCAG21/Techniques/general/G161). -* Show examples of breadcrumb trails. Explain that they provide information about the user's location within the context of a set of websites. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail ](https://www.w3.org/WAI/WCAG21/Techniques/general/G65). * Show examples of site maps and explain that they serve the purpose of providing an overview of the whole site. Explain that some users rely on them to better understand the structure of the site and to find its way more easily through it. For references on how to provide a site map, see [G63: Providing a site map](https://www.w3.org/WAI/WCAG21/Techniques/general/G63.html). * Show examples of tables of contents, for example in an electronic book or document. Explain that they provide an overview of the whole document and allow navigation to specific parts of the content. For references on how to provide a table of contents, see technique [G64: Providing a Table of Contents](https://www.w3.org/WAI/WCAG21/Techniques/general/G64.html). +* Show examples of breadcrumb trails. Explain that they provide information about the user's location within the context of a set of websites. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail +* Invite students to give examples of page titles they are familiar with and reflect with them on how well the titles describe the page contents. Explain that page titles are useful to locate a specific web page within a set of web pages. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page, as some mobile browsers and assistive technologies do not show the information on the title. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). #### Ideas to Assess Knowledge for Topic @@ -163,6 +165,7 @@ Optional ideas to support assessment: * Practical — Students define the blocks of repeated content within a website and collaborate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they provide a mechanism to bypass them. * Practical — Present students with an interface and ask them to provide multiple ways to navigate across the website. Assess how students provide multiple navigation mechanisms where appropriate, such as search functionalities, breadcrumb trails, site maps, and tables of contents. * Practical — Present students with a web page that is deep in the hierarchy of a website and ask them to provide a breadcrumb trail for users to understand where a page is located with respect to the whole website. Assess how students communicate the hierarchical structure of a web page within a set of web pages. +* Practical — Present students with a set of web pages and ask them to provide descriptive titles that identify each of the pages and describe what they are about. Assess how students provide clear and descriptive page titles. {% include excol.html type="end" %} From aa39a51734b4a1388b792466e5de057afddf9054 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 14 Jun 2021 11:02:59 +0200 Subject: [PATCH 146/416] Updates to modules --- content/designer/information-design.md | 8 ++++---- content/designer/multimedia-and-animations.md | 19 +++++++++---------- content/designer/navigation.md | 6 +++--- 3 files changed, 16 insertions(+), 17 deletions(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 77f8ef1a9..23861487f 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -87,7 +87,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Present ways to split large amounts of text into smaller pieces, such as by using headings and chapter marks to identify parts of the content and pages to split the content into logical units. +Present ways to split large amounts of text into smaller pieces, such as by using headings, heading level ranks, and chapter marks to identify parts of the content and pages to split the content into logical units. Discuss mechanisms to supplement information presented only with text, such as use of icons and other visual cues. @@ -95,7 +95,7 @@ Discuss mechanisms to supplement information presented only with text, such as u Students should be able to: -* design user interfaces that support splitting large amounts of text into several smaller and more manageable pieces, for example by using headings, pages, and chapter marks +* design user interfaces that support splitting large amounts of text into several smaller and more manageable pieces, for example by using headings, heading level ranks, pages, and chapter marks * design user interfaces that support additional ways to convey information presented in text, for example using icons and other visual cues * design user interfaces that support mechanisms to identify specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon * design user interfaces that support mechanisms to identify the expanded form or meaning of acronyms and abbreviations @@ -106,7 +106,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of large amounts of text, for example an ebook. Discuss several ways to divide the text both visually and programmatically so that it is easier to understand and to navigate, for example by using headings and several pages. +* Show examples of large amounts of text. for example an ebook. Discuss several ways to divide the text both visually and programmatically so that it is easier to understand and to navigate. For example by using headings together with their corresponding level ranks together with several pages to indicate the different chapters, sections, and subsections of content. * Show examples of how icons, charts, and graphics can complement information presented in text. Explain that they help users with reading disabilities understand difficult pieces of text. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). * Show examples of words that may be difficult to understand or that are used in a restricted way. Explain that users with cognitive disabilities or those not familiar with such words need definitions to understand the meaning of such words. Explain that defining the mechanisms to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. For references on how to provide the definition of a word or phrase used in an unusual or restricted way, see technique [G101: Providing the definition of a word or phrase used in an unusual or restricted way](https://www.w3.org/WAI/WCAG21/Techniques/general/G101.html). * Show examples of abbreviations, such as short forms of words and acronyms. Explain that users with cognitive disabilities and those not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the mechanisms to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. For references on how to provide the expansion or explanation of an abbreviation, see technique [G102: Providing the expansion or explanation of an abbreviation](https://www.w3.org/WAI/WCAG21/Techniques/general/G102). @@ -115,7 +115,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to support assessment: -* Practical — Present students with an ebook and ask them to define how it should be split into smaller and more manageable pieces so that it can be easier to navigate and understand. Assess how students use mechanisms to split large amounts of text into smaller and more manageable pieces, such as headings, pages, and chapter marks. +* Practical — Present students with an ebook and ask them to define how it should be split into smaller and more manageable pieces so that it can be easier to navigate and understand. Assess how students use headings, heading level ranks, pages, and chapter marks to split large amounts of text into smaller and more manageable pieces. * Practical — Present students with unusual words and abbreviations and ask them to define a mechanism to provide the explanation of such words or the expansion of the abbreviations. Assess how students define a mechanism to provide explanations of unusual words and expansions of abbreviations. {% include excol.html type="end" %} diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index f4131ff5d..7e0412f05 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -32,13 +32,12 @@ Courses based on this module should: Students should be able to: * identify accessibility requirements for different types of audio or video content -* research promote accessible media players to access transcripts for audio, audio descriptions, and sign language -* design user interfaces that consider placement of alternatives to multimedia content, such as transcripts for audio and audio described content -* design user interfaces that support switching transcripts and audio described content on or off +* design user interfaces that consider placement and spacing for alternatives to multimedia content, such as transcripts, audio descriptions, captions, and sign language +* design user interfaces that support enabling transcripts, audio descriptions, captions, and sign language +* design user interfaces with multimedia player controls that have clear and descriptive names, that are easy to find, and that do not disappear when the media starts to play * design user interfaces with mechanisms to pause, stop, and hide any moving, blinking, and auto-updating content, including animations and carousels * design user interfaces with mechanisms to stop or control the volume of auto-playing audio -* identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding media content -* identify related requirements for developers to include accessibility support for multimedia players +* identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding media content and to include accessibility support for multimedia players * identify related requirements for content authors to provide appropriate text alternatives and audio descriptions for different types of media content, including video and audio {% include excol.html type="all" %} @@ -101,11 +100,11 @@ Audio descriptions are essential for people who cannot see the video. Captions a Students should be able to -* identify and distinguish the different types of multimedia content, such as prerecorded versus live, synchronous versus asynchronous audio and video -* create designs that support equivalent text alternatives for prerecorded audio-only content -* create designs that support text alternatives and alternative audio tracks for a prerecorded video-only content that present equivalent information -* create designs that allow to provide captions and audio descriptions for any prerecorded and live audio content in synchronized media -* create designs that allow to provide sign language interpretation for all prerecorded audio content in synchronized media +* identify accessibility requirements for the different types of multimedia content, such as text transcripts, audio descriptions for visual information, and captions and sign language for audio information +* design user interfaces that consider availability, placement, and spacing for text alternatives for speech and non-speech audio information +* design user interfaces with mechanisms to enable audio descriptions, captions, and sign language +* design user interfaces with buttons that have descriptive names and that are easy to find +* design user interfaces with player controls that are always reachable and that do not disappear when the multimedia content starts to play #### Teaching Ideas for Topic diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 8f5e0c2a1..f595d046f 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -111,7 +111,7 @@ Optional ideas to teach the learning outcomes: * Explain conventions for accessible menus, such as clear and consistent styling to convey menu behaviors and states. Introduce patterns for mouse, keyboard, and touch interaction with menus. * Demonstrate menu interaction using different input devices, such as keyboard, mouse, and touch. For example, activating a menu option by tapping, pressing the Enter key, and mouse clicking. Explain that defining the interactions is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. -* Show examples of menu and menu items that contain large texts. Explain that, when used in smaller viewports or with different screen configurations, these texts may need to wrap so that they are perceived in their entirety. +* Show examples of menu and menu items that contain large texts. Explain that, when used in smaller viewports and with different screen configurations, these texts may need to wrap so that they are perceived in their entirety. * Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Emphasize that the states of these menu items need to be communicated using visual cues as well as semantics. Explain that providing the visual cues is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. #### Ideas to Assess Knowledge for Topic @@ -135,7 +135,7 @@ Introduce other navigation mechanisms that may be used depending on the characte Students should be able to: -* define blocks of repeated content, such as navigation bars or header contents, and define mechanisms to skip such blocks using at least one of the following: +* define blocks of repeated content, such as navigation bars and header contents, and define mechanisms to skip such blocks using at least one of the following: * a link at the top of each page that goes directly to the main content area * a link at the beginning of a block of repeated content to go to the end of the block * links at the top of the page that go to each area of the content @@ -144,7 +144,7 @@ Students should be able to: * search functionalities that support navigating to specific parts of the site * site maps to provide an overview of the entire website * tables of contents to give an overview of the whole website or document and to allow users to go to specific parts of the content -* provide ways for users to locate a specific web page within a set of web pages, for examples using descriptive page titles or including breadcrumb trails +* provide ways for users to locate a specific web page within a set of web pages, for example using descriptive page titles and including breadcrumb trails #### Teaching Ideas for Topic From 64bdfd32e3ed186c8048b71e4ff0dedb13522aa9 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 14 Jun 2021 11:19:08 +0200 Subject: [PATCH 147/416] updates to modules --- content/designer/images-and-graphics.md | 2 +- content/designer/information-design.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 1aedd5065..6ab6a7af7 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -118,7 +118,7 @@ Optional ideas to support assessment: {% include excol.html type="start" %} -### Topic: Data Visualization +### Topic: Graphics and Charts {% include excol.html type="middle" %} diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 23861487f..b03eed3f0 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -106,7 +106,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of large amounts of text. for example an ebook. Discuss several ways to divide the text both visually and programmatically so that it is easier to understand and to navigate. For example by using headings together with their corresponding level ranks together with several pages to indicate the different chapters, sections, and subsections of content. +* Show examples of large amounts of text. for example an ebook. Discuss several ways to divide the text both visually and programmatically so that it is easier to understand and to navigate. For example by using headings and their corresponding level ranks together with several pages to indicate the different chapters, sections, and subsections of content. * Show examples of how icons, charts, and graphics can complement information presented in text. Explain that they help users with reading disabilities understand difficult pieces of text. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). * Show examples of words that may be difficult to understand or that are used in a restricted way. Explain that users with cognitive disabilities or those not familiar with such words need definitions to understand the meaning of such words. Explain that defining the mechanisms to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. For references on how to provide the definition of a word or phrase used in an unusual or restricted way, see technique [G101: Providing the definition of a word or phrase used in an unusual or restricted way](https://www.w3.org/WAI/WCAG21/Techniques/general/G101.html). * Show examples of abbreviations, such as short forms of words and acronyms. Explain that users with cognitive disabilities and those not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the mechanisms to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. For references on how to provide the expansion or explanation of an abbreviation, see technique [G102: Providing the expansion or explanation of an abbreviation](https://www.w3.org/WAI/WCAG21/Techniques/general/G102). From 13f754de660b9ef4992f0f9bb0fe7377406bbb08 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 14 Jun 2021 11:53:43 +0200 Subject: [PATCH 148/416] Updates to modules --- content/designer/multimedia-and-animations.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 7e0412f05..d52ad6ce4 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -90,11 +90,11 @@ Topics to achieve the learning outcomes: {% include excol.html type="start" %} -### Topic: Captions and Audio Descriptions +### Topic: Alternatives to Multimedia Content {% include excol.html type="middle" %} -Audio descriptions are essential for people who cannot see the video. Captions and text alternatives are essential for people who cannot hear the audio. +Audio descriptions are essential for people who cannot see the visuals. Captions are essential for people who cannot hear the audio. Text transcripts are useful to provide an alternative to visual and audio information. Discuss the need for mechanisms to enable or disable alternatives to multimedia content depending on user needs. Explain that these mechanisms need to be always reachable for users, that they need to have clear names, and that they should not disappear when the media starts playing. #### Learning Outcomes for Topic From 35a350e5e4e7fd9eab6e57de2900b8ab8d44508d Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 14 Jun 2021 12:20:00 +0200 Subject: [PATCH 149/416] updates to module numbers according to move --- content/designer/designer-modules.md | 2 +- content/designer/flexible-layout-and-design.md | 4 ++-- content/designer/images-and-graphics.md | 2 +- content/designer/information-design.md | 2 +- content/designer/interaction-and-feedback.md | 2 +- content/designer/multimedia-and-animations.md | 2 +- content/designer/navigation.md | 2 +- 7 files changed, 8 insertions(+), 8 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 5a205b60a..28f87e7a6 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -19,7 +19,7 @@ parent_in_h1: name: title navigation: previous: /curricula/developer-modules/rich-applications/ - next: /curricula/designer-modules/understanding-and-involving-users/ + next: /curricula/designer-modules/flexible-and-responsive-design/ --- ## Introduction diff --git a/content/designer/flexible-layout-and-design.md b/content/designer/flexible-layout-and-design.md index 21a9a35e7..58206e1fd 100644 --- a/content/designer/flexible-layout-and-design.md +++ b/content/designer/flexible-layout-and-design.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 2: Flexible Layout and Design" +title: "[Draft] Module 1: Flexible Layout and Design" nav_title: "Flexible Layout and Design" permalink: /curricula/designer-modules/flexible-layout-and-design/ ref: /curricula/designer-modules/flexible-layout-and-design/ @@ -20,7 +20,7 @@ parent_in_h1: - ref: /curricula/ name: "Curricula on Web Accessibility" navigation: - previous: /curricula/designer-modules/understanding-and-involving-users/ + previous: /curricula/designer-modules/ next: /curricula/designer-modules/navigation/ --- diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 1aedd5065..8bb5bcce4 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 5: Images and Graphics" +title: "[Draft] Module 4: Images and Graphics" nav_title: "Images and Graphics" permalink: /curricula/designer-modules/images-and-graphics/ ref: /curricula/designer-modules/images-and-graphics/ diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 77f8ef1a9..dc1a651dd 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 4: Information Design" +title: "[Draft] Module 3: Information Design" nav_title: "Information Design" permalink: /curricula/designer-modules/information-design/ ref: /curricula/designer-modules/information-design/ diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index e0aa5d1f7..f4b152f14 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 7: Interaction and Feedback" +title: "[Draft] Module 6: Interaction and Feedback" nav_title: "Interaction and Feedback" permalink: /curricula/designer-modules/interaction-and-feedback/ ref: /curricula/designer-modules/interaction-and-feedback/ diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index f4131ff5d..37c3ce5ab 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 6: Multimedia and Animations" +title: "[Draft] Module 5: Multimedia and Animations" nav_title: "Multimedia and Animations" permalink: /curricula/designer-modules/multimedia-and-animations/ ref: /curricula/designer-modules/multimedia-and-animations/ diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 3f783930c..a14cffcd4 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 3: Navigation" +title: "[Draft] Module 2: Navigation" nav_title: "Navigation" permalink: /curricula/designer-modules/navigation/ ref: /curricula/designer-modules/navigation/ From 34765705289210b346eec3d60fae75cc1d6ac9e5 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 14 Jun 2021 14:29:46 +0200 Subject: [PATCH 150/416] Updates to modules --- content/designer/images-and-graphics.md | 30 ++++++++++++++----------- content/designer/information-design.md | 8 +++---- 2 files changed, 21 insertions(+), 17 deletions(-) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 6ab6a7af7..d63f74fe1 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -32,13 +32,13 @@ Courses based on this module should: Students should be able to: * explain how images affect processing of information, content identification, and understanding of functionality by people with disabilities -* identify and describe different uses of images, for example informative, functional, and decorative purposes -* provide appropriate text alternatives for graphical components included in the design phase, such as logos, links, and menu items +* identify different purposes of images and graphics, for example informative, functional, and decorative, and communicate the intended purpose of images and graphics included in the design phase to other team roles +* provide appropriate text alternatives for for functional and informative images included in the design phase, such as graphical buttons and links +* design user interfaces with recognizable and consistent iconography that allow users to identify the purpose of icons and other graphical components * design user interfaces with alternatives to visual captcha, for example auditory captcha, logical captcha, and biometrics -* provide images with appropriate contrast ratios * create user interfaces that present information as text when the desired visual presentation can be achieved by the technology in use, instead of using images of text * identify related requirements for developers to code images and text alternatives appropriately -* identify related requirements for content authors to provide appropriate text alternatives for images included in the authoring phase, such as complex graphics and charts +* identify related requirements for content authors to provide appropriate descriptions for images included in the authoring phase, such as complex graphics and charts {% include excol.html type="all" %} @@ -83,21 +83,23 @@ Topics to achieve the learning outcomes: {% include excol.html type="start" %} -### Topic: Text Alternatives +### Topic: Functional Images {% include excol.html type="middle" %} -Explain several uses of text alternatives, such as to describe the function of graphical user interface component (functional images) and to describe the images so that users can understand their purpose without looking at them (informational images). Explain that describing the functions of user graphical interface components is a designer's responsibility, whereas providing text alternatives for informative images is a responsibility shared with the content author. +Discuss different purposes that images and graphics can have in the context of user interfaces. For example, providing essential information to understand the content (informative images) and describing functionality of a component vfunctional images). Explain that describing the functions of graphical user interface components is a designer's responsibility, whereas providing text alternatives for informative images is a responsibility shared with the content author. #### Learning Outcomes for Topic Students should be able to: * identify situations where it is necessary to provide text alternatives that present equivalent information as that contained in the image -* provide short text alternatives for controls and components that accept user input, for example search, print, and save buttons -* provide text alternatives that identify and describe the purpose of human verification systems, such as captcha +* identify situations where it is necessary to complement icons with adjacent textual information, such as when those icons convey information +* identify situations where images are used to convey functionality of controls and components that accept user input, for example search, print, and save functionality, and provide short text alternatives for those images +* create designs with consistent naming and iconography for user interface components that have the same functionality within a set of web pages + +* provide names that identify and describe the purpose of captchas and other verification systems * collaborate with other team members to implement several modalities of captcha that rely on other sensory characteristics apart from vision, such as visual, auditory, and logical -* identify related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, such as diagrams or charts #### Teaching Ideas for Topic @@ -130,9 +132,10 @@ Explain that coordination among different team members is required to establish Students should be able to: -* create user interfaces that support appropriate contrast ratios for complex images when they are required to understand the contents -* create user interfaces that support use of text instead of images of text when the technology in use can provide the desired visual presentation -* identify related requirements for content authors to provide descriptions for complex images that convey the same information as the graphical object +* design user interfaces that support appropriate contrast ratios for complex images when these images are required to understand the contents +* design user interfaces that support use of text instead of images of text when the technology in use can provide the desired visual presentation +* communicate the intent +* identify related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, such as diagrams or charts #### Teaching Ideas for Topic @@ -163,7 +166,8 @@ Decorative images are used for ornamental purposes and convey no information or Students should be able to: * identify and describe different uses of images with decorative purposes, such as ornamental -* create user interfaces with decorative images that do not overlap with user interface components and contents when viewed using different screen sizes, configurations, and setups +* design user interfaces with decorative images that do not overlap with user interface components and contents when viewed using different screen sizes, configurations, and setups +* communicate the decorative purpose of images included in the design phase * identify related requirements for developers to code decorative images so that they are skipped by assistive technologies #### Teaching Ideas for Topic diff --git a/content/designer/information-design.md b/content/designer/information-design.md index b03eed3f0..606275416 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -87,7 +87,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Present ways to split large amounts of text into smaller pieces, such as by using headings, heading level ranks, and chapter marks to identify parts of the content and pages to split the content into logical units. +Present ways to split large amounts of text into smaller pieces, such as by using headings and rank levels, and chapter markers to identify parts of the content and pages to split the content into logical units. Discuss mechanisms to supplement information presented only with text, such as use of icons and other visual cues. @@ -95,7 +95,7 @@ Discuss mechanisms to supplement information presented only with text, such as u Students should be able to: -* design user interfaces that support splitting large amounts of text into several smaller and more manageable pieces, for example by using headings, heading level ranks, pages, and chapter marks +* design user interfaces that support splitting large amounts of text into several smaller and more manageable pieces, for example by using headings and rank levels, pages, and chapter markers * design user interfaces that support additional ways to convey information presented in text, for example using icons and other visual cues * design user interfaces that support mechanisms to identify specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon * design user interfaces that support mechanisms to identify the expanded form or meaning of acronyms and abbreviations @@ -106,7 +106,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of large amounts of text. for example an ebook. Discuss several ways to divide the text both visually and programmatically so that it is easier to understand and to navigate. For example by using headings and their corresponding level ranks together with several pages to indicate the different chapters, sections, and subsections of content. +* Show examples of large amounts of text. for example an ebook. Discuss several ways to divide the text both visually and programmatically so that it is easier to understand and to navigate. For example by using headings and their corresponding rank levels together with pages and chapter markers to indicate the different chapters, sections, and subsections of content. * Show examples of how icons, charts, and graphics can complement information presented in text. Explain that they help users with reading disabilities understand difficult pieces of text. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). * Show examples of words that may be difficult to understand or that are used in a restricted way. Explain that users with cognitive disabilities or those not familiar with such words need definitions to understand the meaning of such words. Explain that defining the mechanisms to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. For references on how to provide the definition of a word or phrase used in an unusual or restricted way, see technique [G101: Providing the definition of a word or phrase used in an unusual or restricted way](https://www.w3.org/WAI/WCAG21/Techniques/general/G101.html). * Show examples of abbreviations, such as short forms of words and acronyms. Explain that users with cognitive disabilities and those not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the mechanisms to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. For references on how to provide the expansion or explanation of an abbreviation, see technique [G102: Providing the expansion or explanation of an abbreviation](https://www.w3.org/WAI/WCAG21/Techniques/general/G102). @@ -115,7 +115,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to support assessment: -* Practical — Present students with an ebook and ask them to define how it should be split into smaller and more manageable pieces so that it can be easier to navigate and understand. Assess how students use headings, heading level ranks, pages, and chapter marks to split large amounts of text into smaller and more manageable pieces. +* Practical — Present students with an ebook and ask them to define how it should be split into smaller and more manageable pieces so that it can be easier to navigate and understand. Assess how students use headings and rank levels, pages, and chapter markers to split large amounts of text into smaller and more manageable pieces. * Practical — Present students with unusual words and abbreviations and ask them to define a mechanism to provide the explanation of such words or the expansion of the abbreviations. Assess how students define a mechanism to provide explanations of unusual words and expansions of abbreviations. {% include excol.html type="end" %} From 368940b3a607c3c49cf0d0e9a6ebcb9a9d8c9546 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 15 Jun 2021 08:28:13 +0200 Subject: [PATCH 151/416] Fixing next page nav --- content/designer/designer-modules.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 28f87e7a6..b7158a8ac 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -19,7 +19,7 @@ parent_in_h1: name: title navigation: previous: /curricula/developer-modules/rich-applications/ - next: /curricula/designer-modules/flexible-and-responsive-design/ + next: /curricula/designer-modules/flexible-layout-and-design/ --- ## Introduction From 20d19ab4ab681d269255b7808376e3ebb63a2897 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 16 Jun 2021 10:50:34 +0200 Subject: [PATCH 152/416] Updates to modules and topics --- content/designer/images-and-graphics.md | 100 ++++++++++++++---------- content/designer/information-design.md | 14 ++-- content/designer/navigation.md | 36 ++++++++- 3 files changed, 100 insertions(+), 50 deletions(-) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index d63f74fe1..ae0698885 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -32,13 +32,13 @@ Courses based on this module should: Students should be able to: * explain how images affect processing of information, content identification, and understanding of functionality by people with disabilities -* identify different purposes of images and graphics, for example informative, functional, and decorative, and communicate the intended purpose of images and graphics included in the design phase to other team roles -* provide appropriate text alternatives for for functional and informative images included in the design phase, such as graphical buttons and links -* design user interfaces with recognizable and consistent iconography that allow users to identify the purpose of icons and other graphical components -* design user interfaces with alternatives to visual captcha, for example auditory captcha, logical captcha, and biometrics -* create user interfaces that present information as text when the desired visual presentation can be achieved by the technology in use, instead of using images of text +* communicate the intended purpose of images and graphics included in the design phase to other team roles +* provide appropriate text alternatives for functional images included in the design phase, such as those included in buttons, links, icons and logos +* design user interfaces with consistent iconography to help users recognize the purpose of icons and other graphical components +* design user interfaces with alternatives to visual CAPTCHA, for example auditory CAPTCHA, logical CAPTCHA, and biometrics +* design user interfaces that present information as text when the desired visual presentation can be achieved by the technology in use, instead of using images of text * identify related requirements for developers to code images and text alternatives appropriately -* identify related requirements for content authors to provide appropriate descriptions for images included in the authoring phase, such as complex graphics and charts +* identify related requirements for content authors to provide appropriate descriptions for images included in the authoring phase, such as complex graphics, charts, and diagrams {% include excol.html type="all" %} @@ -83,104 +83,122 @@ Topics to achieve the learning outcomes: {% include excol.html type="start" %} -### Topic: Functional Images +### Topic: Informative Images {% include excol.html type="middle" %} -Discuss different purposes that images and graphics can have in the context of user interfaces. For example, providing essential information to understand the content (informative images) and describing functionality of a component vfunctional images). Explain that describing the functions of graphical user interface components is a designer's responsibility, whereas providing text alternatives for informative images is a responsibility shared with the content author. +Show examples of thumbnails and other icons and discuss with students how they would describe them. Explain that informative images provide essential information to understand the content +Explain that providing text alternatives for informative images is a responsibility shared with the content author. #### Learning Outcomes for Topic Students should be able to: -* identify situations where it is necessary to provide text alternatives that present equivalent information as that contained in the image -* identify situations where it is necessary to complement icons with adjacent textual information, such as when those icons convey information -* identify situations where images are used to convey functionality of controls and components that accept user input, for example search, print, and save functionality, and provide short text alternatives for those images -* create designs with consistent naming and iconography for user interface components that have the same functionality within a set of web pages +* provide text alternatives that present equivalent information as that contained in the image, by using one of the following: + * complementing icons with adjacent textual information, for example in a news headline + * providing a text alternative that describes the information conveyed by the image + * including a boilerplate description that would then be completed in the authoring phase with real images and descriptions -* provide names that identify and describe the purpose of captchas and other verification systems -* collaborate with other team members to implement several modalities of captcha that rely on other sensory characteristics apart from vision, such as visual, auditory, and logical +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + +### Topic: Decorative Images + +{% include excol.html type="middle" %} + +Decorative images are used for ornamental purposes and convey no information or function. Explain that these images do not require text alternatives, as these would add clutter to the information that assistive technologies provide. + +#### Learning Outcomes for Topic + +Students should be able to: + +* identify and describe different uses of images with decorative purposes, such as ornamental +* design user interfaces with decorative images that do not overlap with user interface components and contents when viewed using different screen sizes, configurations, and setups +* communicate the decorative purpose of images included in the design phase +* identify related requirements for developers to code decorative images so that they are skipped by assistive technologies #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of different images used to convey functionality, such as for printing, searching, or saving a document. Explain that it is necessary to provide and equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). -* Show examples of different images that convey information, such as images to provide instructions, or to identify objects. Explain that such information needs to be provided using text alternatives, so that the purpose of the image can be understood without having to look at the image. Emphasize that these alternatives may require coordination among designers, developers, and content authors. For references on how to provide text alternatives for images, see [G82: Providing a text alternative that identifies the purpose of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G82.html). -* Show examples of different verification systems, such as captcha, to identify human beings trying to access a service or system. Explain that these mechanisms need to support several sensory characteristics, such as visual, auditory, or cognitive. For references on how to provide accessible captcha, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). +* Show examples of images and graphics that do not convey function or information, such as ornamental icons. Explain that they serve ornamental purposes as long as people can understand and interact with the user interface with or without such icons. Explain that deciding what is the images role is a designers' responsibility, whereas coding the images so that they rendered with the appropriate role is a developers' responsibility. #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -* Practical — Give students a set of images conveying function, such as a printer for a "print" button and a magnifying glass fort as "search" button. Ask students to provide an appropriate text alternative. Assess how students identify images that convey function and provide text alternatives that describe the functionality of the component the image is attached to. -* Short Answer Questions — Present students with a situation where a human verification system needs to be used and ask them to provide authentication alternatives for other sensory characteristics apart from vision. Assess how students understand the need for providing human verification systems that rely on different sensory characteristics in addition to vision. +* Practical — Ask students to provide decorative images to illustrate a text article and ask them to ensure these icons are visible in different screen sizes and devices. Assess how students understand the need for decorative images to adapt to the different user needs and preferences. {% include excol.html type="end" %} {% include excol.html type="start" %} -### Topic: Graphics and Charts +### Topic: Functional Images {% include excol.html type="middle" %} -Show examples of complex images and images of text. Images of text are those which are intended to be read as text but are coded as an image. Complex images are those whose description requires more than a short phrase or sentence. Explain accessibility requirements that these images have, such as appropriate contrast ratios and appropriate text descriptions. - -Explain that coordination among different team members is required to establish the relations between parts of complex images and their adjacent components (for example text and other images) so that the relationship is perceived and understood visually and through the provided descriptions. +Explain functional images as those who convey functionality of a user interface component. Show examples of graphical links and buttons and discuss with students how they would describe each of them. #### Learning Outcomes for Topic Students should be able to: -* design user interfaces that support appropriate contrast ratios for complex images when these images are required to understand the contents -* design user interfaces that support use of text instead of images of text when the technology in use can provide the desired visual presentation -* communicate the intent -* identify related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, such as diagrams or charts +* provide text alternatives for images that are used to convey functionality of controls and components that accept user input, for example search, print, and save functionality, by using one of the following: + * providing a text alternative for the image + * combining the text alternative of the image with the surrounding text in the component + * providing enough surrounding text in the component to understand its function +* create designs with consistent naming and iconography for user interface components that have the same functionality within a set of web pages #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Provide examples of complex images and graphics, such as charts and diagrams. Explain that they need to have a contrast ratio requirement of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). -* Explain that images of text present information intended to be read as text. Emphasize that sometimes it is difficult to tell visually if text has been coded as a text or as an image, so coordination among designers, developers, and content authors is needed to determine if the technologies in use can achieve the desired visual presentation. Emphasize that, if an image of text is still required, there needs to be a text alternative that conveys the same information as the image of text. Explain that coding an image of text appropriately is a responsibility of the developer, whereas providing descriptions for images of text is a responsibility shared with the content author. -* Show examples of complex images and graphics, such as maps, diagrams, and charts. Explain that they need to have text descriptions that allow people to understand and interpret such images without having to look at them. Explain that providing these text alternatives is a designers' responsibility, whereas providing the text descriptions is a responsibility shared with the content author. +* Show examples of different images used to convey functionality, such as for printing, searching, or saving a document. Explain that it is necessary to provide and equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). +* Show examples of different images that convey information, such as images to provide instructions, or to identify objects. Explain that such information needs to be provided using text alternatives, so that the purpose of the image can be understood without having to look at the image. Emphasize that these alternatives may require coordination among designers, developers, and content authors. For references on how to provide text alternatives for images, see [G82: Providing a text alternative that identifies the purpose of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G82.html). +* Show examples of different verification systems, such as CAPTCHA, to identify human beings trying to access a service or system. Explain that these mechanisms need to support several sensory characteristics, such as visual, auditory, or cognitive. For references on how to provide accessible CAPTCHA, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). #### Ideas to Assess Knowledge for Topic -Optional ideas to assess knowledge: +Optional ideas to support assessment: -* Practical — Students add complex images to a website, such as charts or diagrams, and ensure they have the required contrast ratio. Assess how students understand the contrast requirements for complex images. +* Practical — Give students a set of images conveying function, such as a printer for a "print" button and a magnifying glass fort as "search" button. Ask students to provide an appropriate text alternative. Assess how students identify images that convey function and provide text alternatives that describe the functionality of the component the image is attached to. +* Short Answer Questions — Present students with a situation where a human verification system needs to be used and ask them to provide authentication alternatives for other sensory characteristics apart from vision. Assess how students understand the need for providing human verification systems that rely on different sensory characteristics in addition to vision. {% include excol.html type="end" %} {% include excol.html type="start" %} -### Topic: Decorative Images +### Topic: Complex Images {% include excol.html type="middle" %} -Decorative images are used for ornamental purposes and convey no information or function. Explain that these images do not require text alternatives, as these would add clutter to the information that assistive technologies provide. +Show examples of complex images and images of text. Images of text are those which are intended to be read as text but are coded as an image. Complex images are those whose description requires more than a short phrase or sentence. Explain accessibility requirements that these images have, such as appropriate contrast ratios and appropriate text descriptions. + +Explain that coordination among different team members is required to establish the relations between parts of complex images and their adjacent components (for example text and other images) so that the relationship is perceived and understood visually and through the provided descriptions. #### Learning Outcomes for Topic Students should be able to: -* identify and describe different uses of images with decorative purposes, such as ornamental -* design user interfaces with decorative images that do not overlap with user interface components and contents when viewed using different screen sizes, configurations, and setups -* communicate the decorative purpose of images included in the design phase -* identify related requirements for developers to code decorative images so that they are skipped by assistive technologies +* design user interfaces that support appropriate contrast ratios for complex images when these images are required to understand the contents +* design user interfaces that support use of text instead of images of text when the technology in use can provide the desired visual presentation +* communicate the intent +* identify related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, such as diagrams or charts #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of images and graphics that do not convey function or information, such as ornamental icons. Explain that they serve ornamental purposes as long as people can understand and interact with the user interface with or without such icons. Explain that deciding what is the images role is a designers' responsibility, whereas coding the images so that they rendered with the appropriate role is a developers' responsibility. +* Provide examples of complex images and graphics, such as charts and diagrams. Explain that they need to have a contrast ratio requirement of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). +* Explain that images of text present information intended to be read as text. Emphasize that sometimes it is difficult to tell visually if text has been coded as a text or as an image, so coordination among designers, developers, and content authors is needed to determine if the technologies in use can achieve the desired visual presentation. Emphasize that, if an image of text is still required, there needs to be a text alternative that conveys the same information as the image of text. Explain that coding an image of text appropriately is a responsibility of the developer, whereas providing descriptions for images of text is a responsibility shared with the content author. +* Show examples of complex images and graphics, such as maps, diagrams, and charts. Explain that they need to have text descriptions that allow people to understand and interpret such images without having to look at them. Explain that providing these text alternatives is a designers' responsibility, whereas providing the text descriptions is a responsibility shared with the content author. #### Ideas to Assess Knowledge for Topic -Optional ideas to support assessment: +Optional ideas to assess knowledge: -* Practical — Ask students to provide decorative images to illustrate a text article and ask them to ensure these icons are visible in different screen sizes and devices. Assess how students understand the need for decorative images to adapt to the different user needs and preferences. +* Practical — Students add complex images to a website, such as charts or diagrams, and ensure they have the required contrast ratio. Assess how students understand the contrast requirements for complex images. {% include excol.html type="end" %} diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 606275416..296f7e455 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -89,16 +89,20 @@ Topics to achieve the learning outcomes: Present ways to split large amounts of text into smaller pieces, such as by using headings and rank levels, and chapter markers to identify parts of the content and pages to split the content into logical units. -Discuss mechanisms to supplement information presented only with text, such as use of icons and other visual cues. +Discuss the use of icons and other visual cues to help people understand the context presented in text. #### Learning Outcomes for Topic Students should be able to: -* design user interfaces that support splitting large amounts of text into several smaller and more manageable pieces, for example by using headings and rank levels, pages, and chapter markers -* design user interfaces that support additional ways to convey information presented in text, for example using icons and other visual cues +* design user interfaces that support splitting large amounts of text into several smaller and more manageable pieces, for example: + * using headings and their corresponding rank levels + * using sidebars and other page regions + * using pages, + * using chapter markers +* design user interfaces with icons and other visual cues to help users understand information presented in text * design user interfaces that support mechanisms to identify specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon -* design user interfaces that support mechanisms to identify the expanded form or meaning of acronyms and abbreviations +* design user interfaces that identify the expanded form or meaning of acronyms and abbreviations * identify related requirements for developers to make language programmatically determined * identify related requirements for content authors to provide clear language and easy-to-read texts whenever possible @@ -107,7 +111,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of large amounts of text. for example an ebook. Discuss several ways to divide the text both visually and programmatically so that it is easier to understand and to navigate. For example by using headings and their corresponding rank levels together with pages and chapter markers to indicate the different chapters, sections, and subsections of content. -* Show examples of how icons, charts, and graphics can complement information presented in text. Explain that they help users with reading disabilities understand difficult pieces of text. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). +* Show examples of how icons and other symbols can complement information presented in text. Explain that they help users with reading disabilities understand difficult pieces of text. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). * Show examples of words that may be difficult to understand or that are used in a restricted way. Explain that users with cognitive disabilities or those not familiar with such words need definitions to understand the meaning of such words. Explain that defining the mechanisms to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. For references on how to provide the definition of a word or phrase used in an unusual or restricted way, see technique [G101: Providing the definition of a word or phrase used in an unusual or restricted way](https://www.w3.org/WAI/WCAG21/Techniques/general/G101.html). * Show examples of abbreviations, such as short forms of words and acronyms. Explain that users with cognitive disabilities and those not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the mechanisms to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. For references on how to provide the expansion or explanation of an abbreviation, see technique [G102: Providing the expansion or explanation of an abbreviation](https://www.w3.org/WAI/WCAG21/Techniques/general/G102). diff --git a/content/designer/navigation.md b/content/designer/navigation.md index f595d046f..072495841 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -144,7 +144,6 @@ Students should be able to: * search functionalities that support navigating to specific parts of the site * site maps to provide an overview of the entire website * tables of contents to give an overview of the whole website or document and to allow users to go to specific parts of the content -* provide ways for users to locate a specific web page within a set of web pages, for example using descriptive page titles and including breadcrumb trails #### Teaching Ideas for Topic @@ -155,8 +154,6 @@ Optional ideas to teach the learning outcomes: ](https://www.w3.org/WAI/WCAG21/Techniques/general/G65). * Show examples of site maps and explain that they serve the purpose of providing an overview of the whole site. Explain that some users rely on them to better understand the structure of the site and to find its way more easily through it. For references on how to provide a site map, see [G63: Providing a site map](https://www.w3.org/WAI/WCAG21/Techniques/general/G63.html). * Show examples of tables of contents, for example in an electronic book or document. Explain that they provide an overview of the whole document and allow navigation to specific parts of the content. For references on how to provide a table of contents, see technique [G64: Providing a Table of Contents](https://www.w3.org/WAI/WCAG21/Techniques/general/G64.html). -* Show examples of breadcrumb trails. Explain that they provide information about the user's location within the context of a set of websites. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail -* Invite students to give examples of page titles they are familiar with and reflect with them on how well the titles describe the page contents. Explain that page titles are useful to locate a specific web page within a set of web pages. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page, as some mobile browsers and assistive technologies do not show the information on the title. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). #### Ideas to Assess Knowledge for Topic @@ -164,9 +161,40 @@ Optional ideas to support assessment: * Practical — Students define the blocks of repeated content within a website and collaborate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they provide a mechanism to bypass them. * Practical — Present students with an interface and ask them to provide multiple ways to navigate across the website. Assess how students provide multiple navigation mechanisms where appropriate, such as search functionalities, breadcrumb trails, site maps, and tables of contents. + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + +### Topic: Location + +{% include excol.html type="middle" %} + +Build on foundation [Module 6: Understanding and Involving Users](/curricula/foundation-modules/understanding-and-involving-users/) to research strategies that people with disabilities use to locate a specific web page in a set of web pages. Discuss examples like breadcrumb trails, page titles, and visual cues to indicate the current page. + +#### Learning Outcomes for Topic + +Students should be able to: + +* provide ways for users to locate a specific web page within a set of web pages, for example: + * descriptive page titles + * breadcrumb trails + * visual cues to indicate the current page within a set of web pages +* identify related requirements for developers to programmatically indicate the current page + +### Teaching Ideas + +Optional ideas to teach the learning outcomes: + +* Show examples of breadcrumb trails. Explain that they provide information about the user's location within the context of a set of websites. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail +* Invite students to give examples of page titles they are familiar with and reflect with them on how well the titles describe the page contents. Explain that page titles are useful to locate a specific web page within a set of web pages. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page, as some mobile browsers and assistive technologies do not show the information on the title. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). + +#### Ideas to Assess Knowledge + +Optional ideas to support assessment: + * Practical — Present students with a web page that is deep in the hierarchy of a website and ask them to provide a breadcrumb trail for users to understand where a page is located with respect to the whole website. Assess how students communicate the hierarchical structure of a web page within a set of web pages. * Practical — Present students with a set of web pages and ask them to provide descriptive titles that identify each of the pages and describe what they are about. Assess how students provide clear and descriptive page titles. - {% include excol.html type="end" %} {% include excol.html type="all" %} From 76de2109ee602e69882f5f918fc3021065fdc326 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 16 Jun 2021 11:25:14 +0200 Subject: [PATCH 153/416] updates to modules and topics --- content/designer/information-design.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index f1ab19d94..210b6ca11 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -87,22 +87,22 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Present ways to split large amounts of text into smaller pieces, such as by using headings and rank levels, and chapter markers to identify parts of the content and pages to split the content into logical units. +Refer back to [Module 3: Navigation](/curricula/designer-modules/navigation/). Discuss ways to split large amounts of text into smaller pieces. For example, using headings and their corresponding rank levels, and pages to split the contents into logical units, and chapter markers to indicate chapters in digital publications. -Discuss the use of icons and other visual cues to help people understand the context presented in text. +Discuss the use of icons and other visual cues to help people understand the contents presented in text. #### Learning Outcomes for Topic Students should be able to: -* design user interfaces that support splitting large amounts of text into several smaller and more manageable pieces, for example: - * using headings and their corresponding rank levels - * using sidebars and other page regions - * using pages, - * using chapter markers -* design user interfaces with icons and other visual cues to help users understand information presented in text -* design user interfaces that support mechanisms to identify specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon -* design user interfaces that identify the expanded form or meaning of acronyms and abbreviations +* design user interfaces that support splitting large amounts of text into several smaller and more manageable pieces by using: + * headings and their corresponding rank levels + * sidebars and other page regions + * pages, + * chapter markers +* design user interfaces with icons and other visual cues to help users understand information presented in text +* design user interfaces with mechanisms to identify specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon +* design user interfaces with mechanisms to identify the expanded form or meaning of acronyms and abbreviations * identify related requirements for developers to make language programmatically determined * identify related requirements for content authors to provide clear language and easy-to-read texts whenever possible @@ -110,10 +110,10 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of large amounts of text. for example an ebook. Discuss several ways to divide the text both visually and programmatically so that it is easier to understand and to navigate. For example by using headings and their corresponding rank levels together with pages and chapter markers to indicate the different chapters, sections, and subsections of content. +* Show examples of large amounts of text for example an ebook. Discuss several ways to divide the text both visually and programmatically so that it is easier to understand and to navigate. For example by using headings and their corresponding rank levels together with pages and chapter markers to indicate the different chapters, sections, and subsections of content. * Show examples of how icons and other symbols can complement information presented in text. Explain that they help users with reading disabilities understand difficult pieces of text. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). -* Show examples of words that may be difficult to understand or that are used in a restricted way. Explain that users with cognitive disabilities or those not familiar with such words need definitions to understand the meaning of such words. Explain that defining the mechanisms to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. For references on how to provide the definition of a word or phrase used in an unusual or restricted way, see technique [G101: Providing the definition of a word or phrase used in an unusual or restricted way](https://www.w3.org/WAI/WCAG21/Techniques/general/G101.html). -* Show examples of abbreviations, such as short forms of words and acronyms. Explain that users with cognitive disabilities and those not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the mechanisms to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. For references on how to provide the expansion or explanation of an abbreviation, see technique [G102: Providing the expansion or explanation of an abbreviation](https://www.w3.org/WAI/WCAG21/Techniques/general/G102). +* Show examples of words that may be difficult to understand or that are used in a restricted way. Explain that users with cognitive disabilities or those not familiar with such words need definitions to understand the meaning of such words. Explain that defining the mechanisms to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. +* Show examples of abbreviations, such as short forms of words and acronyms. Explain that users with cognitive disabilities and those not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the mechanisms to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. abbreviation](https://www.w3.org/WAI/WCAG21/Techniques/general/G102). #### Ideas to Assess Knowledge for Topic From bb04e3aeb22c5081b7540b8a48ab073d6caa42af Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 21 Jun 2021 17:33:20 +0200 Subject: [PATCH 154/416] Updating modules --- content/designer/designer-modules.md | 4 +- .../designer/flexible-layout-and-design.md | 46 +++++---- content/designer/images-and-graphics.md | 97 +++++++++++-------- content/designer/information-design.md | 69 +++++++------ content/designer/interaction-and-feedback.md | 74 +++++++++----- content/designer/multimedia-and-animations.md | 38 +++++--- content/designer/navigation.md | 33 ++++--- 7 files changed, 209 insertions(+), 152 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index b7158a8ac..b7c326ea2 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -31,15 +31,13 @@ The designer modules guide the creation of courses that: * present strategies to understand and involve people with disabilities in user research activities * demonstrate and explain how accessible design enables people with disabilities to use websites and applications * teach accessible design techniques for: - * user research * visual design * information design * user experience * interaction design -These modules focus on user research, visual, and interaction aspects to design accessible web pages and applications. The modules primarily address the following roles: +These modules focus on visual, information, user experience, and interaction aspects to design accessible web pages and applications. The modules primarily address the following roles: -* User Researcher * Visual Designer * Information Architect * User Experience (UX) Designer diff --git a/content/designer/flexible-layout-and-design.md b/content/designer/flexible-layout-and-design.md index 58206e1fd..2c27355ec 100644 --- a/content/designer/flexible-layout-and-design.md +++ b/content/designer/flexible-layout-and-design.md @@ -29,7 +29,7 @@ navigation: Courses based on this module should: -* explain how people with disabilities use different screen sizes, screen configurations, break points, and style sheets to identify, distinguish, and process contents +* explain how people with disabilities use different screen sizes, screen configurations, breakpoints, and style sheets to identify, distinguish, and process contents * explain accessibility requirements for user interface components that relate to color, layout, spacing, and position ## Learning Outcomes for Module @@ -41,7 +41,7 @@ Students should be able to: * design user interfaces with adjustable font sizes and adequate spacing to support readability * design user interfaces with appropriate contrast ratios for text, images of text, and controls * design user interfaces with clear and distinguishable focus indicators, for example using borders, background color, and highlighting -* design user interfaces that support placement of different regions and user interface components where users expect them +* design user interfaces that support positioning different regions and user interface components where users expect them * identify related requirements for developers to apply the necessary semantics to user interface components {% include excol.html type="all" %} @@ -70,7 +70,7 @@ Skills required for this module: {% include excol.html type="middle" %} * Applied expertise in teaching: - * [WCAG Success Criterion 1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG21/quickref/#time-based-media) + * [WCAG Success Criterion 1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG21/quickref/#non-text-content) * [WCAG Success Criterion 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) * [WCAG Success Criterion 1.3.2 Meaningful Sequence](https://www.w3.org/WAI/WCAG21/quickref/#meaningful-sequence) * [WCAG Success Criterion 1.3.3 Sensory Characteristics](https://www.w3.org/WAI/WCAG21/quickref/#sensory-characteristics) @@ -116,13 +116,13 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Demonstrate the use of styles for distinguishing user interface components from one another, such as links, buttons, form elements, and texts. Explain how people rely on font sizes, spacing, and typography to distinguish components from one another. +* Demonstrate the use of styles to distinguish user interface components from one another, such as links, buttons, form elements, and texts. Explain how people rely on font sizes, spacing, and typography to distinguish components from one another. * Demonstrate the use of different font sizes and explain how they affect readability of the content. -* Show examples of different page layouts with and without adequate spacing. Explain how spacing allows to distinguish different user interface components and pieces of content from one another. Emphasize that spacing also allows for better readability of contents and for better identifications of the different parts of the user interface. apply adequate spacing, see @@@ +* Show examples of different page layouts with and without adequate spacing. Explain how spacing allows to distinguish different user interface components and pieces of content from one another. Emphasize that spacing also allows for better readability of contents and for better identifications of the different parts of the user interface. #### Ideas to Assess Knowledge for Topic -Optional ideas to support assessment: +Optional ideas to assess knowledge: * Practical — Students design a paper prototype with distinguishable styles that help perceive different contents. Assess how students use different style properties to make content perceivable and to distinguish components from one another. @@ -140,8 +140,8 @@ Discuss strategies to provide mechanisms for users to perceive different web pag Students should be able to: -* define page regions by using appropriate landmarks -* design user interfaces with text cues to convey information provided through vision only, such as an asterisk to convey required form fields in a form +* define page regions by using appropriate visual and programmatical landmarks +* design user interfaces with text cues to convey information provided through vision only, for example to convey required form fields * design user interfaces with focus indicators that allow people to tell where they are as they move through the web page and applications using the keyboard #### Teaching Ideas for Topic @@ -149,16 +149,15 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of different regions of web pages. Explain that the use of landmarks is needed for people to perceive such regions. Explain that defining landmarks is a designers' responsibility, whereas implementing such landmarks is a responsibility shared with the developer. -* Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a store is open or closed and those with visual cues only to communicate that a product is sold out. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). +* Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a form field is required. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). * Invite students to navigate a web page with appropriate focus indicators first, and then invite them to navigate a web page without focus indicators. Explain how focus indicators allow people using the keyboard only to determine where they are as they move through web pages and applications using the keyboard only. For reference on how to provide appropriate focus indicators, see technique [G149: Using user interface components that are highlighted by the user agent when they receive focus](https://www.w3.org/WAI/WCAG21/Techniques/general/G149.html). +#### Ideas to Assess Knowledge for Topic -#### Ideas to Assess Knowledge - -Optional ideas to support assessment: +Optional ideas to assess knowledge: * Practical — Give students a web page and ask them to identify its regions and to define the appropriate landmarks for users to perceive such regions. Assess how students identify page regions and provide mechanisms for people to perceive such regions. -* Practical &mdash: Give students examples of color alone used to provide information and ask them to provide text information and visual cues to supplement that information. Assess how students provide the necessary textual information and visual cues to supplement information provided exclusively with color. +* Practical &mdash: Give students examples required form fields and ask them to provide text information and visual cues to indicate that they are required. Assess how students provide the necessary textual information and visual cues to supplement information. {% include excol.html type="end" %} @@ -174,7 +173,7 @@ Describe how some people use color to understand and distinguish contents. Expla Students should be able to: -* explain how appropriate use of color allow people with disabilities to read, understand, and distinguish user interface components +* explain how appropriate use of color enables people with disabilities to read, understand, and distinguish user interface components * design user interfaces with other visual cues in addition to color, for example using different patterns, shapes, and icons * design user interfaces with texts and images of text that have a contrast ratio of at least 4.5:1 with respect to their background * design user interfaces with large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background @@ -185,16 +184,15 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so alternative methods to convey that information are required. For references on how to convey information without using color alone, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). -* Show examples of different foreground and background color combinations. Explain how contrast ratios between foreground and background allow users to perceive content and distinguish components from one another. * Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios for text (including images of text) need to be at least 4.5:1 with respect to their background. For references on how to apply contrast ratios to text (including images of text), see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). * Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. For techniques on how to add contrast ratios for graphics and interface components, see technique [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). #### Ideas to Assess Knowledge for Topic -Optional ideas to support assessment: +Optional ideas to assess knowledge: * Short Answer Questions — Give students a set of user interface components and ask them what the contrast ratio should be. Assess how students understand and distinguish contrast ratios for different user interface components. -* Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing +* Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing. {% include excol.html type="end" %} @@ -204,31 +202,32 @@ Optional ideas to support assessment: {% include excol.html type="middle" %} -Explain how people with disabilities use different screen sizes, screen configurations, break points, and style sheets to identify, distinguish, and process contents. +Explain how people with disabilities use different screen sizes, screen configurations, breakpoints, and style sheets to identify, distinguish, and process contents. #### Learning Outcomes for Topic Students should be able to: * design user interfaces that support text resizing without loss of content and functionality -* design user interfaces that support zooming and enlarging text in different viewport sizes and through multiple break-points +* design user interfaces that support zooming and enlarging text in different viewport sizes and through multiple breakpoints * design user interfaces that support content view and operation in both portrait and landscape orientations * design user interfaces with target sizes and spaces to support tapping by people with mobility impairments and people using different input methods * design user interfaces that support customizing line height, as well as spacing between paragraphs, words, and letters +* design user interfaces that preserve focus order when accessed using different viewport, screen sizes, and breakpoints #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Explain that people with low vision often need to resize text to be able to read it properly. This includes resizing text up to 200% using browsers functionality. For references on how to ensure text resizes up to 200%, see technique [G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width](https://www.w3.org/WAI/WCAG21/Techniques/general/G179). -* Discuss the use of multiple break-points by people with low vision. Explain that these break points often go beyond the traditional mobile, tablet, and desktop break-points. +* Discuss with students the differences between web sites and applications that preserve content and functionality when resized up to 200% and those which do not. Explain that people with low vision often need to resize text to be able to read it properly. For references on how to ensure text resizes up to 200%, see technique [G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width](https://www.w3.org/WAI/WCAG21/Techniques/general/G179). +* Discuss the use of multiple breakpoints by people with low vision. Explain that these breakpoints often go beyond the traditional mobile, tablet, and desktop breakpoints. * Show examples of user interfaces showing up in both portrait and landscape modes. Explain that the ability to show an interface both in portrait and landscape is crucial for people who cannot change their device orientation due to mobility impairments. * Show examples of different tap targets and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that tap targets need to be large enough to accommodate different people's needs. * Show examples of different user interfaces that support customizing line height as well as spacing between paragraphs, words, and letters to support readability. #### Ideas to Assess Knowledge for Topic -Optional ideas to support assessment: +assess knowledge: * Practical — Students design different paper prototypes with different interface layouts considering text resizing, line height, spacing between paragraphs, words, and letters. Assess how students consider text resizing, line height, and spacing between paragraphs, words, and letters. @@ -238,7 +237,7 @@ Optional ideas to support assessment: ## Ideas to Assess Knowledge for Module -Optional ideas to support assessment: +Optional ideas to assess knowledge: * Portfolio — Students design a prototype of a web page. Assess how students use color, layout, spacing, and position to support content perception and identification. @@ -246,6 +245,5 @@ Optional ideas to support assessment: Suggested resources to support your teaching: -* @@@ * [[How People with Disabilities Use the Web]](/people-use-web/) — Describes some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. * [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 1ee827632..6c210f067 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -32,13 +32,12 @@ Courses based on this module should: Students should be able to: * explain how images affect processing of information, content identification, and understanding of functionality by people with disabilities -* communicate the intended purpose of images and graphics included in the design phase to other team roles -* provide appropriate text alternatives for functional images included in the design phase, such as those included in buttons, links, icons and logos -* design user interfaces with consistent iconography to help users recognize the purpose of icons and other graphical components -* design user interfaces with alternatives to visual CAPTCHA, for example auditory CAPTCHA, logical CAPTCHA, and biometrics +* provide meaningful and consistent text alternatives for functional images included in the design phase, such as those included in buttons, links, icons, and logos +* design user interfaces with consistent iconography to help users recognize the purpose of icons, thumbnails, and other graphical components * design user interfaces that present information as text when the desired visual presentation can be achieved by the technology in use, instead of using images of text +* collaborate with developers and content authors to provide the appropriate alternative for images and graphics included in the design phase based on the image purpose * identify related requirements for developers to code images and text alternatives appropriately -* identify related requirements for content authors to provide appropriate descriptions for images included in the authoring phase, such as complex graphics, charts, and diagrams +* identify related requirements for content authors to provide appropriate descriptions for images included in the authoring phase, such as charts, diagrams, and other complex graphics {% include excol.html type="all" %} @@ -53,7 +52,7 @@ Skills required for this module: {% include excol.html type="middle" %} * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) -* [Module 2: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design/) +* [Module 2: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design/) * [Module 3: Navigation](/curricula/designer-modules/navigation/) * [Module 4: Information Design](/curricula/designer-modules/information-design/) @@ -83,99 +82,112 @@ Topics to achieve the learning outcomes: {% include excol.html type="start" %} -### Topic: Informative Images +### Topic: Functional Images {% include excol.html type="middle" %} -Show examples of thumbnails and other icons and discuss with students how they would describe them. Explain that informative images provide essential information to understand the content -Explain that providing text alternatives for informative images is a responsibility shared with the content author. +Functional images convey functionality of a user interface component. For example search, print, and save functionality. Explain requirements related to color and contrast to help users distinguish these images from other components. Show examples of graphical links and buttons as well as logos. Discuss with students how they would describe each of those examples. #### Learning Outcomes for Topic Students should be able to: -* provide text alternatives that present equivalent information as that contained in the image, by using one of the following: - * complementing icons with adjacent textual information, for example in a news headline - * providing a text alternative that describes the information conveyed by the image - * including a boilerplate description that would then be completed in the authoring phase with real images and descriptions +* design user interfaces with text alternatives for functional images by using one of the following: + * providing a text alternative for the image + * combining the text alternative of the image with the adjacent text inside the component + * providing adjacent text inside the component to understand its function +* create designs with consistent naming and iconography for user interface components that have the same functionality across web pages +* decide if the alternative text should be visible to screen readers only or to all users, to allow for better recognition of the conveyed functionality +* apply appropriate contrast ratios for functional images belonging to components that accept user input + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +* Show examples of different images used to convey functionality, such as for printing, searching, or saving a document. Explain that it is necessary to provide and equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to assess knowledge: + +* Practical — Give students a set of images conveying function, such as a printer for a "print" button and a magnifying glass for a "search" button. Ask students to provide an appropriate text alternative. Assess how students identify images that convey function and provide text alternatives that describe the functionality of the component the image is attached to. +* Practical — Ask students to design a series of graphical buttons and links in a way that they are perceivable and distinguishable by all users. Assess how students apply accessibility requirements, such as contrast ratios, to graphical buttons and links. {% include excol.html type="end" %} {% include excol.html type="start" %} -### Topic: Decorative Images +### Topic: Informative Images {% include excol.html type="middle" %} -Decorative images are used for ornamental purposes and convey no information or function. Explain that these images do not require text alternatives, as these would add clutter to the information that assistive technologies provide. +Informative images convey information that is necessary to understand the content. Show examples of thumbnails and other icons that convey information. Discuss with students how they would describe them. +Explain that providing text alternatives for informative images is a responsibility shared with the content author. #### Learning Outcomes for Topic Students should be able to: -* identify and describe different uses of images with decorative purposes, such as ornamental -* design user interfaces with decorative images that do not overlap with user interface components and contents when viewed using different screen sizes, configurations, and setups -* communicate the decorative purpose of images included in the design phase -* identify related requirements for developers to code decorative images so that they are skipped by assistive technologies +* provide text alternatives that present equivalent information as that contained in informative images, by using one of the following: + * including a boilerplate description that would then be completed in the authoring phase with real descriptions + * complementing thumbnails and icons with adjacent textual information, for example in a news headline + * providing a text alternative that describes the information conveyed by the image +* apply the appropriate contrast ratio to images that are necessary to understand the contents +* identify related requirements for developers to code alternative texts for informative images -#### Teaching Ideas for Topic +### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of images and graphics that do not convey function or information, such as ornamental icons. Explain that they serve ornamental purposes as long as people can understand and interact with the user interface with or without such icons. Explain that deciding what is the images role is a designers' responsibility, whereas coding the images so that they rendered with the appropriate role is a developers' responsibility. +* Show examples of different images that convey information, such as images to provide instructions, and to identify people and objects. Explain that such information needs to be provided using text alternatives, so that the purpose of the image can be understood without having to look at the image. Emphasize that these alternatives may require coordination among designers, developers, and content authors. For references on how to provide text alternatives for images, see [G82: Providing a text alternative that identifies the purpose of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G82.html). #### Ideas to Assess Knowledge for Topic -Optional ideas to support assessment: +Optional ideas to support assesment. -* Practical — Ask students to provide decorative images to illustrate a text article and ask them to ensure these icons are visible in different screen sizes and devices. Assess how students understand the need for decorative images to adapt to the different user needs and preferences. +[To be developed]. {% include excol.html type="end" %} {% include excol.html type="start" %} -### Topic: Functional Images +### Topic: Decorative Images {% include excol.html type="middle" %} -Explain functional images as those who convey functionality of a user interface component. Show examples of graphical links and buttons and discuss with students how they would describe each of them. +Decorative images are used for ornamental purposes and convey no information or function. Explain that these images do not require text alternatives, as these would add clutter to the information that assistive technologies provide. Explain that deciding if an image is decorative is a responsibility shared with the content author. #### Learning Outcomes for Topic Students should be able to: -* provide text alternatives for images that are used to convey functionality of controls and components that accept user input, for example search, print, and save functionality, by using one of the following: - * providing a text alternative for the image - * combining the text alternative of the image with the surrounding text in the component - * providing enough surrounding text in the component to understand its function -* create designs with consistent naming and iconography for user interface components that have the same functionality within a set of web pages +* design user interfaces with decorative images that do not overlap with user interface components and contents when viewed using different screen sizes, configurations, and setups +* indicate to developers which of the images provided in the design phase are decorative, so that they can code them appropriately +* identify related requirements for developers to code decorative images so that they are skipped by assistive technologies #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of different images used to convey functionality, such as for printing, searching, or saving a document. Explain that it is necessary to provide and equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). -* Show examples of different images that convey information, such as images to provide instructions, or to identify objects. Explain that such information needs to be provided using text alternatives, so that the purpose of the image can be understood without having to look at the image. Emphasize that these alternatives may require coordination among designers, developers, and content authors. For references on how to provide text alternatives for images, see [G82: Providing a text alternative that identifies the purpose of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G82.html). -* Show examples of different verification systems, such as CAPTCHA, to identify human beings trying to access a service or system. Explain that these mechanisms need to support several sensory characteristics, such as visual, auditory, or cognitive. For references on how to provide accessible CAPTCHA, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). +* Show examples of images and graphics that do not convey function or information, such as ornamental icons. Explain that they serve ornamental purposes as long as people can understand and interact with the user interface with or without such icons. Explain that deciding what is the images' role is a designers' responsibility, whereas coding the images so that they rendered with the appropriate role is a developers' responsibility. #### Ideas to Assess Knowledge for Topic -Optional ideas to support assessment: +Optional ideas to assess knowledge: -* Practical — Give students a set of images conveying function, such as a printer for a "print" button and a magnifying glass fort as "search" button. Ask students to provide an appropriate text alternative. Assess how students identify images that convey function and provide text alternatives that describe the functionality of the component the image is attached to. -* Short Answer Questions — Present students with a situation where a human verification system needs to be used and ask them to provide authentication alternatives for other sensory characteristics apart from vision. Assess how students understand the need for providing human verification systems that rely on different sensory characteristics in addition to vision. +* Practical — Ask students to provide decorative images to illustrate a text article and ask them to ensure these icons are visible in different screen sizes and devices. Assess how students understand the need for decorative images to adapt to the different user needs and preferences. {% include excol.html type="end" %} {% include excol.html type="start" %} -### Topic: Complex Images +### Topic: Complex and Textual Images {% include excol.html type="middle" %} Show examples of complex images and images of text. Images of text are those which are intended to be read as text but are coded as an image. Complex images are those whose description requires more than a short phrase or sentence. Explain accessibility requirements that these images have, such as appropriate contrast ratios and appropriate text descriptions. -Explain that coordination among different team members is required to establish the relations between parts of complex images and their adjacent components (for example text and other images) so that the relationship is perceived and understood visually and through the provided descriptions. +Explain that coordination among different team members is required to establish the relations between parts of complex images and their adjacent components (for example text and other images) so that the relations are perceived and understood visually and through the provided descriptions. #### Learning Outcomes for Topic @@ -183,22 +195,25 @@ Students should be able to: * design user interfaces that support appropriate contrast ratios for complex images when these images are required to understand the contents * design user interfaces that support use of text instead of images of text when the technology in use can provide the desired visual presentation -* communicate the intent +* design user interfaces with alternatives to visual CAPTCHA, for example auditory CAPTCHA, logical CAPTCHA, and biometrics * identify related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, such as diagrams or charts +* determine if and how complex images are operated using the mouse, keyboard, and other input devices #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Provide examples of complex images and graphics, such as charts and diagrams. Explain that they need to have a contrast ratio requirement of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). +* Provide examples of complex images and graphics, such as charts and diagrams. Explain that they need to have a contrast ratio of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). * Explain that images of text present information intended to be read as text. Emphasize that sometimes it is difficult to tell visually if text has been coded as a text or as an image, so coordination among designers, developers, and content authors is needed to determine if the technologies in use can achieve the desired visual presentation. Emphasize that, if an image of text is still required, there needs to be a text alternative that conveys the same information as the image of text. Explain that coding an image of text appropriately is a responsibility of the developer, whereas providing descriptions for images of text is a responsibility shared with the content author. * Show examples of complex images and graphics, such as maps, diagrams, and charts. Explain that they need to have text descriptions that allow people to understand and interpret such images without having to look at them. Explain that providing these text alternatives is a designers' responsibility, whereas providing the text descriptions is a responsibility shared with the content author. +* Show examples of different verification systems, such as CAPTCHA, to identify human beings trying to access a service or system. Explain that these mechanisms need to support several sensory characteristics, such as visual, auditory, or cognitive. For references on how to provide accessible CAPTCHA, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: * Practical — Students add complex images to a website, such as charts or diagrams, and ensure they have the required contrast ratio. Assess how students understand the contrast requirements for complex images. +* Short Answer Questions — Present students with a situation where a human verification system needs to be used and ask them to provide authentication alternatives for other sensory characteristics apart from vision. Assess how students understand the need for providing human verification systems that rely on different sensory characteristics in addition to vision. {% include excol.html type="end" %} @@ -206,7 +221,7 @@ Optional ideas to assess knowledge: ## Ideas to Assess Knowledge for Module -Optional ideas to support assessment: +Optional ideas to assess knowledge: * Portfolio — Students design the imagery for a website. Assess how students include accessibility requirements in the images in graphics they design, for example contrast ratios, text alternatives that belong to the design phase, and placeholders for any other text alternative that is planned for later stages of the design and development process. diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 210b6ca11..7d35944c9 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -24,7 +24,7 @@ navigation: Courses based on this module should: -* present strategies to split large blocks of information into smaller pieces +* present strategies for splitting large blocks of information into smaller pieces * present strategies for grouping information that shares a common purpose so that it is easier to understand ## Learning Outcomes for Module @@ -32,10 +32,10 @@ Courses based on this module should: Students should be able to: * describe approaches to break down different types of content into smaller and more manageable pieces, including: - * the use of headings, pages, and chapter marks to divide longer passages of text into smaller pieces - * the use of lists, simpler tables, and plain text to convey information presented in complex tables - * the use of groups of form controls that share a common purpose - * the use of filters to display smaller data subsets from a given large data set + * headings, pages, and chapter marks + * lists, simpler tables, and plain text to convey information presented in complex tables + * groups of form controls that share a common purpose + * filters to display smaller data subsets from a given large data set * describe the use of labels and instructions to make information in forms more understandable * identify related requirements for developers to programmatically associate headings, table header cells and data cells, as well as form labels and instructions to their corresponding control @@ -52,8 +52,12 @@ Skills required for this module: {% include excol.html type="middle" %} * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) -* [Module 2: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design/) +* [Module 2: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design/) * [Module 3: Navigation](/curricula/designer-modules/navigation/) +* Basic knowledge of: + * Visual Design + * Responsive Design + * Information Architecture {% include excol.html type="end" %} @@ -64,10 +68,12 @@ Skills required for this module: {% include excol.html type="middle" %} * Applied expertise in teaching: - * @@@ * [WCAG Success Criterion 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) - * [WCAG Success Criterion 1.3.5 Identify Input Purpose](https://www.w3.org/WAI/WCAG21/quickref/#identify-input-purpose) * [WCAG Success Criterion 2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/quickref/#keyboard) + * [WCAG Success Criterion 3.1.1 Unusual Words](https://www.w3.org/WAI/WCAG21/quickref/#unusual-words) + * [WCAG Success Criterion 3.1.4 Abbreviations](https://www.w3.org/WAI/WCAG21/quickref/#abbreviations) + * [WCAG Success Criterion 3.2.1 On Focus](https://www.w3.org/WAI/WCAG21/quickref/#on-focus) + * [WCAG Success Criterion 3.2.2 ON Input](https://www.w3.org/WAI/WCAG21/quickref/#on-input) * [WCAG Success Criterion 3.3.2 Labels or Instructions](https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions) * In-depth knowledge of: * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) @@ -87,7 +93,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Refer back to [Module 3: Navigation](/curricula/designer-modules/navigation/). Discuss ways to split large amounts of text into smaller pieces. For example, using headings and their corresponding rank levels, and pages to split the contents into logical units, and chapter markers to indicate chapters in digital publications. +Refer back to [Module 3: Navigation](/curricula/designer-modules/navigation/). Discuss ways to split large amounts of text into smaller pieces. For example, using headings and their corresponding rank levels, as well as pages to split the contents into logical units, and chapter markers to indicate chapters in digital publications. Discuss the use of icons and other visual cues to help people understand the contents presented in text. @@ -96,11 +102,11 @@ Discuss the use of icons and other visual cues to help people understand the con Students should be able to: * design user interfaces that support splitting large amounts of text into several smaller and more manageable pieces by using: - * headings and their corresponding rank levels + * headings (with their corresponding rank levels) * sidebars and other page regions - * pages, - * chapter markers -* design user interfaces with icons and other visual cues to help users understand information presented in text + * pages + * chapter markers (in digital publications) +* design user interfaces with icons and other visual cues to help users understand information presented in text, for example diagrams of a process to complement the textual information * design user interfaces with mechanisms to identify specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon * design user interfaces with mechanisms to identify the expanded form or meaning of acronyms and abbreviations * identify related requirements for developers to make language programmatically determined @@ -110,16 +116,17 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of large amounts of text for example an ebook. Discuss several ways to divide the text both visually and programmatically so that it is easier to understand and to navigate. For example by using headings and their corresponding rank levels together with pages and chapter markers to indicate the different chapters, sections, and subsections of content. -* Show examples of how icons and other symbols can complement information presented in text. Explain that they help users with reading disabilities understand difficult pieces of text. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). +* Show examples of large amounts of text, for example in an eBook. Discuss several ways to divide the text both visually and programmatically so that it is easier to understand and to navigate. For example, by using headings and their corresponding rank levels together with pages and chapter markers to indicate the different chapters, sections, and subsections of content. +* Show examples of diagrams and illustrations that can complement the information presented in text. For example, visual instructions that supplement the textual information of a user manual. Explain that they help users with reading disabilities understand difficult pieces of text. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). * Show examples of words that may be difficult to understand or that are used in a restricted way. Explain that users with cognitive disabilities or those not familiar with such words need definitions to understand the meaning of such words. Explain that defining the mechanisms to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. -* Show examples of abbreviations, such as short forms of words and acronyms. Explain that users with cognitive disabilities and those not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the mechanisms to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. abbreviation](https://www.w3.org/WAI/WCAG21/Techniques/general/G102). +* Show examples of abbreviations, such as short forms of words and acronyms. Explain that users with cognitive disabilities and those not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the mechanisms to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. #### Ideas to Assess Knowledge for Topic -Optional ideas to support assessment: +Optional ideas to assess knowledge: -* Practical — Present students with an ebook and ask them to define how it should be split into smaller and more manageable pieces so that it can be easier to navigate and understand. Assess how students use headings and rank levels, pages, and chapter markers to split large amounts of text into smaller and more manageable pieces. +* Practical — Present students with an eBook and ask them to define how it should be split into smaller and more manageable pieces so that it can be easier to navigate and understand. Assess how students use headings and rank levels, pages, and chapter markers to split large amounts of text into smaller and more manageable pieces. +* Practical — Give students a complex piece of text and ask them to complement it with diagrams and illustrations. Assess how students provide mechanisms to complement information presented in text. * Practical — Present students with unusual words and abbreviations and ask them to define a mechanism to provide the explanation of such words or the expansion of the abbreviations. Assess how students define a mechanism to provide explanations of unusual words and expansions of abbreviations. {% include excol.html type="end" %} @@ -130,7 +137,7 @@ Optional ideas to support assessment: {% include excol.html type="middle" %} -Explain different ways in which people with disabilities access tabular information. For example, splitting a complex table into several simpler tables, and splitting the information in the table into individual lists. +Build on [Foundation Module 6: Understanding and Involving Users](/curricula/foundation-modules/understanding-and-involving-users/). Research strategies that people with disabilities use to interact with information presented in tables. For example, through textual descriptions, through graphical representation of the table's contents, by splitting a complex table into several simpler tables, and by splitting the information in the table into individual lists. #### Learning Outcomes for Topic @@ -139,7 +146,8 @@ Students should be able to: * identify uses of tables to present data that share a logical relationship * design user interfaces that support multiple ways of presenting tabular information, such as using several lists, or splitting a complex table into several simpler ones * define table header cells and data cells, and provide clear and distinguishable styles for each -* identify related requirements for content authors to write table descriptions that provide information about what the table is about +* provide graphical representations of complex tables that help users more easily understand its purpose and meaning +* identify related requirements for content authors to provide table descriptions where appropriate * identify related requirements for developers to programmatically associate table descriptions, data cells, and header cells with their corresponding table #### Teaching Ideas for Topic @@ -147,12 +155,12 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of different types of information presented in tables. Explain that tables are used when there is a logical relationship between the information presented, for example when displaying a list of events with their date and venue. -* Refer back to Module 2: Flexible Layout and Design [Topic: Flexible Design](/curricula/designer-modules/flexible-layout-and-design/#topic-flexible-design) and explain that some users may require different ways of presenting tabular information. Explain that these include splitting complex tables into simpler ones and using lists to group the logically related information. -* Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells needs to be perceived both visually and programmatically for users to understand their relations, and that clear styles should be provided. Explain that providing the styles is a designer's responsibility, whereas establishing the programmatic relationship is a responsibility shared with the developers. +* Refer back to Module 2: Flexible Layout and Design [Topic: Flexible Design](/curricula/designer-modules/flexible-layout-and-design/#topic-flexible-design) and explain that some users may require different ways of presenting tabular information. Explain that these include providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. +* Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells needs to be perceived both visually and programmatically. Explain that providing the styles is a designer's responsibility, whereas establishing the programmatic relationship is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic -Optional ideas to support assessment: +Optional ideas to assess knowledge: * Practical — Give students a set of tables and ask them to define their header cells and data cells. Assess how students understand the difference between header cells and data cells. * Practical — Present students with a set of tables and ask them to provide clear styles to distinguish data cells from header cells. Assess how students provide clear and distinguishable styles for header cells and data cells. @@ -165,7 +173,7 @@ Optional ideas to support assessment: {% include excol.html type="middle" %} -Show examples of how different groups of people interact with large amounts of selectable data, such as a list of countries. Explain that some prefer filtering out data into smaller pieces to better handle them, some other prefer to type the first letters of their desire option to select it more efficiently. +Show examples of how different groups of people interact with large amounts of selectable data, such as a list of countries. Explain that some people prefer filtering out data into smaller pieces to better handle data, some others prefer to type the first letters of their desire option to select data more efficiently. #### Learning Outcomes for Topic @@ -173,21 +181,19 @@ Students should be able to: * design user interfaces that support grouping of related form controls, such as those collecting personal information, payment methods, and consent to legal conditions * design user interfaces that support filtering data from data lists and grids, for example using search boxes or splitting the data set into smaller subsets of data -* design user interfaces that support keyboard navigation to specific list items of data lists and grids, for example using first letter navigation * design user interfaces that support customizing the results that are shown at a given time #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to interact and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and programmatically, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look like is a designers' responsibility, whereas coding those relations is a developers' responsibility. -* Show examples of long lists of data, such as lists of countries or cities on a travel application. Explain that these lists are difficult to navigate with the keyboard, as it takes a long time to go through the different options one by one by pressing the arrow keys. Discuss several ways to make these interactions more efficient, such as providing ways for the user to type the first letters of their desired option, which reduces the amount of shown results, and providing ways for people to filter the data they want revealed by the use of pseudo-search boxes. +* Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to understand and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and programmatically, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look like is a designers' responsibility, whereas coding those relations is a developers' responsibility. #### Ideas to Assess Knowledge for Topic -Optional ideas to support assessment: +Optional ideas to assess knowledge: -* Practical — Students group related information in a form that asks for information to open a bank account. Asses how students build groups of related information, such as those collecting personal information, payment methods, and consent to legal conditions, and how students provide ways for users to identify each of the groups. +* Practical — Students group related information in a form that asks for information to open a bank account. Assess how students build groups of related information, such as those collecting personal information, payment methods, and consent to legal conditions, and how students provide ways for users to identify each of the groups. {% include excol.html type="end" %} @@ -195,15 +201,14 @@ Optional ideas to support assessment: ## Ideas to Assess Knowledge for Module -Optional ideas to support assessment: +Optional ideas to assess knowledge: -* Portfolio — Students include different pieces of information on a website, for example text, forms, and images. Assess how students provide mechanisms for people to identify different pieces of information, how students split large amounts of information into smaller and more manageable pieces, and how they group related information together. +* Portfolio — Students oragnize different pieces of information on a website, including text, forms, and images. Assess how students provide mechanisms for people to identify different pieces of information, how students split large amounts of information into smaller and more manageable pieces, and how they group related information together. ## Teaching Resources Suggested resources to support your teaching: -* @@@ * [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. * [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index f4b152f14..fdfc599d0 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -24,22 +24,22 @@ navigation: Courses based on this module should: -* explain strategies that people with disabilities use to operate interactive user interface components -* describe some accessibility requirements related to keyboard interactions, input gestures, labels, instructions, notifications, and feedback +* explain strategies that people with disabilities use to interact with actionable user interface components, such as form controls, buttons, links, and widgets +* describe accessibility requirements related to keyboard interactions, input gestures, labels, instructions, notifications, and feedback ## Learning Outcomes for Module Students should be able to: -* explain strategies that people with disabilities use to operate interactive user interface components +* explain strategies that people with disabilities use to interact with actionable user interface components * design user interfaces that support different input mechanisms, including mouse, touch, and keyboard -* provide clear and distinguishable ways to identify interactive user interface components, including through naming and placement +* define keyboard interactions and meaningful sequences inside complex widgets, including buttons, carousels, sliders, tabs, and treeviews +* define mechanisms to obtain information about custom keyboard shortcuts for complex widgets and applications +* provide clear and distinguishable ways to identify actionable user interface components, including through naming and placement * provide methods to help understand the context, information, and functionality of user interface components, including through textual instructions, color, and other visual cues -* provide meaningful and descriptive notifications about imminent time limits, steps, status changes, and feedback from user input, including errors, suggestions for correction, and success messages -* define custom interaction patterns, such as where to place focus when a dialog is open and closed, and what the focus order should be within those dialogs -* define mechanisms to obtain information about custom interaction patterns, such as custom keyboard shortcuts for applications and custom widgets -* identify related requirements for developers to programmatically associate properties of interactive user interface components, such as names, states, and instructions, to their corresponding component -* identify related requirements for developers to write code for custom keyboard interactions that interactive components may require +* provide meaningful and descriptive notifications about imminent time limits, steps, errors, suggestions for correction, success messages, status changes, and feedback from user input +* identify related requirements for developers to programmatically associate properties of actionable user interface components, such as names, states, and instructions, to their corresponding component +* identify related requirements for developers to write code for custom keyboard interactions that actionable components may require {% include excol.html type="all" %} @@ -70,12 +70,34 @@ Skills required for this module: {% include excol.html type="middle" %} * Applied expertise in teaching: - * @@@ + * [WCAG Success Criterion 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) + * [WCAG Success Criterion 1.3.2 Meaningful Sequence](https://www.w3.org/WAI/WCAG21/quickref/#meaningful-sequence) + * [WCAG Success Criterion 1.3.3 Sensory Characteristics](https://www.w3.org/WAI/WCAG21/quickref/#sensory-characteristics) + * [WCAG Success Criterion 1.3.4 Orientation](https://www.w3.org/WAI/WCAG21/quickref/#orientation) + * [WCAG Success Criterion 1.4.1 Use of Color](https://www.w3.org/WAI/WCAG21/quickref/#use-of-color) + * [WCAG Success Criterion 1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum) + * [WCAG Success Criterion 1.4.4 Resize Text](https://www.w3.org/WAI/WCAG21/quickref/#resize-text) + * [WCAG Success Criterion 1.4.6 Contrast (Enhanced)](https://www.w3.org/WAI/WCAG21/quickref/#contrast-enhanced) + * [WCAG Success Criterion 1.4.8 Visual Presentation](https://www.w3.org/WAI/WCAG21/quickref/#visual-presentation) + * [WCAG Success Criterion 1.4.10 Reflow](https://www.w3.org/WAI/WCAG21/quickref/#reflow) + * [WCAG Success Criterion 1.4.11 Non-Text Contrast](https://www.w3.org/WAI/WCAG21/quickref/#non-text-contrast) + * [WCAG Success Criterion 1.4.12 Text Spacing](https://www.w3.org/WAI/WCAG21/quickref/#text-spacing) + * [WCAG Success Criterion 2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/quickref/#keyboard) + * [WCAG Success Criterion 2.1.2 No Keyboard Trap](https://www.w3.org/WAI/WCAG21/quickref/#no-keyboard-trap) + * [WCAG Success Criterion 2.2.1 Timing Adjustable](https://www.w3.org/WAI/WCAG21/quickref/#timing-adjustable) + * [WCAG Success Criterion 2.2.5 Re-Authenticating](https://www.w3.org/WAI/WCAG21/quickref/#re-authenticating) + * [WCAG Success Criterion 2.2.6 Timeouts(https://www.w3.org/WAI/WCAG21/quickref/#timeouts) + * [WCAG Success Criterion 2.4.3 Focus Order](https://www.w3.org/WAI/WCAG21/quickref/#focus-order) + * [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) + * [WCAG Success Criterion 2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG21/quickref/#focus-visible) + * [WCAG Success Criterion 3.3.1 Error Identification](https://www.w3.org/WAI/WCAG21/quickref/#error-identification) + * [WCAG Success Criterion 3.3.3 Error Suggestion](https://www.w3.org/WAI/WCAG21/quickref/#error-suggestion) + * [WCAG Success Criterion 3.3.4 Error Prevention](https://www.w3.org/WAI/WCAG21/quickref/#error-prevention-legal-financial-data) * In-depth knowledge of: * [Prerequisites for students](/curricula/designer-modules/#prerequisites-for-students) * Visual Design * Responsive Design - * Information Architecture + * Information Design * Interaction Design {% include excol.html type="end" %} @@ -90,24 +112,30 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Discuss standard keyboard interactions, such as the use of the tab, enter, escape, and arrow keys. Explain that providing custom keyboard interactions can favor efficiency, but can also disrupt the users expectations, thus these interactions need to be well documented and be consistent throughout the interface. +Discuss standard keyboard interactions, such as the use of the tab, enter, escape, and arrow keys. Explain that providing custom keyboard interactions can favor efficiency, but can also disrupt the users' expectations, thus these interactions need to be well documented and be consistent throughout the interface. Emphasize that defining the keyboard interactions is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. #### Learning Outcomes for Topic Students should be able to: -* design custom user interfaces that support operation with the keyboard +* design user interfaces that support keyboard navigation through and inside custom components, for example: + * using the tab key to move through different components + * using the Enter key to enter a specific component and to select a specific item on a component + * using the arrow keys to move through list items and grid cells + * using the escape key to exit components + * specific keyboard shortcuts to support efficiency * identify situations when it is necessary to provide additional keyboard shortcuts, for example when designing a custom functionality that is not keyboard supported by default -* design user interfaces that avoid keyboard shortcut conflicts with the operating system, browser, and assistive technologies when possible -* define mechanisms to obtain information about custom keyboard shortcuts, for example those used to support efficiency or those used in complex application -* describe related requirements for developers to implement keyboard support for interactive user interface components +* define keyboard shortcuts that avoid conflicts with the operating system, browser, and assistive technologies when possible, and collaborate with developers to provide mechanisms to remap or disable conflicting shortcuts +* define mechanisms to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications +* provide focus indicators for complex widgets that are visible and have appropriate contrast ratios +* describe related requirements for developers to implement keyboard support for actionable user interface components #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Invite students to try standard keyboard conventions. For example, use of the tab to move through interactive controls, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that these interactions need to be preserved as much as possible when designing custom widgets. Custom keyboard interactions should be defined when these standard conventions are not enough to achieve the goals of the user interface. Explain that defining keyboard interactions is a designers' responsibility, whereas implementing such interaction is a responsibility shared with the developer. +* Invite students to try standard keyboard conventions. For example, use of the tab to move through actionable controls, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that these interactions need to be preserved as much as possible when designing custom widgets. Custom keyboard interactions should be defined when standard keyboard interactions do not provide the necessary keyboard support. Explain that defining keyboard interactions is a designers' responsibility, whereas implementing such interaction is a responsibility shared with the developer. * Present some examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. * Show examples of help functionality to explain custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using such shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these mechanisms is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. @@ -125,13 +153,13 @@ Optional ideas to support assessment: {% include excol.html type="middle" %} -Show examples of labels and instructions for interactive user interface components. Explain that they are essential for people relying on assistive technologies and for people with cognitive disabilities to understand the purpose and intent of these components. +Show examples of labels and instructions for actionable user interface components. Explain that they are essential for people relying on assistive technologies and for people with cognitive disabilities to understand the purpose and intent of these components. #### Learning outcomes for Topic Students should be able to: -* provide clear and consistent names to help users understand the purpose and intent of interactive user interface components +* provide clear and consistent names to help users understand the purpose of actionable user interface components * design user interfaces that allow to position labels where users expect them * provide instructions about which input fields are required by: * including information about each of the required form fields before the form control @@ -145,7 +173,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different interactive components (such as buttons, links, lists, and grids) across rich applications or complex widgets and emphasize that each should have a clear name that allows to identify its purpose. For reference on how to provide names for different user interface components, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). +* Show examples of different actionable components (such as buttons, links, lists, and grids) across rich applications or complex widgets. Emphasize that each should have a clear name that allows to identify its purpose. For reference on how to provide names for different user interface components, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). * Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. * Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several mechanisms, including textual and visual cues. * Present examples of time limits, such as those warning about session expirations. Explain that instructions need to be provided so that users are aware of the time limits, and mechanisms need to be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designers' responsibility, whereas implementing mechanisms to stop, extend, or adjust time limits is a responsibility shared with the developer. @@ -212,9 +240,11 @@ Explain that notifications may have different levels of priority when in the con Students should be able to: * design user interfaces with notifications that are easy to understand and that can be distinguished from any other user interface component -* provide meaningful and descriptive messages about errors, suggestions for corrections, and successes +* provide error messages in the page title or before the form control that identify the fields in error and that describe the cause of the error +* provide meaningful suggestions for correction when such suggestions do not compromise the security or purpose of the content +* provide meaningful messages when a task has been completed successfully, for example when a form has been submitted ow when a document has been saved * design user interfaces that support notification storage to allow notifications checking at the users' pace -* design user interfaces that support mechanisms to queue and prioritize application notifications coming from different interactive user interface components +* design user interfaces that support mechanisms to queue and prioritize application notifications coming from different actionable user interface components * describe related requirements for developers to code notification messages appropriately #### Teaching Ideas for Topic diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 927e9ece0..be3c9083a 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -25,20 +25,20 @@ navigation: Courses based on this module should: * explain strategies that people with disabilities use to access multimedia contents, such as audio and video -* explain accessibility requirements for multimedia content, such as transcripts for audio, sign language, and audio descriptions +* explain accessibility requirements for multimedia content, such as transcripts for audio and visual information, captions (also known as subtitles), audio descriptions, and sign language ## Learning Outcomes for Module Students should be able to: -* identify accessibility requirements for different types of audio or video content +* identify accessibility requirements for different types of audio and video content * design user interfaces that consider placement and spacing for alternatives to multimedia content, such as transcripts, audio descriptions, captions, and sign language -* design user interfaces that support enabling transcripts, audio descriptions, captions, and sign language +* design user interfaces that support enabling and disabling transcripts, audio descriptions, captions, and sign language * design user interfaces with multimedia player controls that have clear and descriptive names, that are easy to find, and that do not disappear when the media starts to play * design user interfaces with mechanisms to pause, stop, and hide any moving, blinking, and auto-updating content, including animations and carousels * design user interfaces with mechanisms to stop or control the volume of auto-playing audio * identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding media content and to include accessibility support for multimedia players -* identify related requirements for content authors to provide appropriate text alternatives and audio descriptions for different types of media content, including video and audio +* identify related requirements for content authors to provide appropriate text transcripts, captions, audio descriptions, and sign language {% include excol.html type="all" %} @@ -71,6 +71,7 @@ Skills required for this module: * [WCAG Success Criterion 1.2.3 Audio Description or Media Alternative (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#audio-description-or-media-alternative-prerecorded) * [WCAG Success Criterion 1.2.4 Captions (Live)](https://www.w3.org/WAI/WCAG21/quickref/#captions-live) * [WCAG Success Criterion 1.2.5 Audio Descriptions (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#audio-description-prerecorded) + * [WCAG Success Criteria 1.4.2 Audio Control](https://www.w3.org/WAI/WCAG21/quickref/#audio-control) * [WCAG Success Criterion 1.4.6 Sign Language (prerecorded](https://www.w3.org/WAI/WCAG21/quickref/#sign-language-prerecorded) * [WCAG Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide) * [WCAG Success Criterion 2.3.1 Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG21/quickref/#three-flashes-or-below-threshold) @@ -94,30 +95,37 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Audio descriptions are essential for people who cannot see the visuals. Captions are essential for people who cannot hear the audio. Text transcripts are useful to provide an alternative to visual and audio information. Discuss the need for mechanisms to enable or disable alternatives to multimedia content depending on user needs. Explain that these mechanisms need to be always reachable for users, that they need to have clear names, and that they should not disappear when the media starts playing. +Text transcripts provide an alternative to visual and audio information. Audio descriptions are essential for people who cannot see the visuals. Captions are essential for people who cannot hear the audio. Discuss the need for mechanisms to enable or disable alternatives to multimedia content depending on user needs. Explain that these mechanisms need to be always reachable for users, that they need to have clear names, and that they should not disappear when the media starts playing. Explain that defining such mechanisms is a designer's responsibility, whereas providing the alternatives is a responsibility shared with the content author. #### Learning Outcomes for Topic Students should be able to -* identify accessibility requirements for the different types of multimedia content, such as text transcripts, audio descriptions for visual information, and captions and sign language for audio information -* design user interfaces that consider availability, placement, and spacing for text alternatives for speech and non-speech audio information +* identify accessibility requirements for the different types of multimedia content, such as text transcripts for audio and visual information, audio descriptions, captions, and sign language * design user interfaces with mechanisms to enable audio descriptions, captions, and sign language -* design user interfaces with buttons that have descriptive names and that are easy to find +* design user interfaces with player controls that: + * have descriptive names + * can be operable by keyboard + * are easy to find + * re always reachable + * do not disappear when the media starts playing * design user interfaces with player controls that are always reachable and that do not disappear when the multimedia content starts to play #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of captions. Explain that these are needed for people who cannot hear the audio, and that they are useful in other situations. Explain that identifying the situations where captions are needed is a designer's responsibility, whereas providing such captions is a responsibility shared with the content author. For reference on how to provide captions, see @@@ -* Show examples of audio described content. Explain that it is needed for people who cannot see the video. Explain that identifying the situations where audio described content is needed is a designer's responsibility, whereas providing the audio description is a responsibility shared with the content author. For references on how to provide audio descriptions, see @@@ +* Show examples of text transcripts. Explain that they provide alternative for people who cannot hear the audio information and for people who cannot see the visual information. Explain that allocating the necessary space for the transcripts is a designer's responsibility, whereas providing such transcripts is a responsibility shared with the content author. +* Show examples of captions. Explain that these are needed for people who cannot hear the audio, and that they are useful in other situations. Explain that identifying the situations where captions are needed is a designer's responsibility, whereas providing such captions is a responsibility shared with the content author. +* Show examples of audio described content. Explain that audio descriptions are needed for people who cannot see the video. Explain that defining the mechanisms to enable and disable audio described content is a designer's responsibility, whereas providing the audio description is a responsibility shared with the content author. +* Show examples of sign language. Explain that people who are deaf and who do not understand written language well. Explain that defining the mechanisms to enable and disable sign language is a designer's responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. +* Show examples of accessible media players. Explain how the controls have appropriate contrast ratios, are operable by keyboard, and are easy to find. Emphasize that the controls need to remain available even when the media is playing. #### Ideas to Assess Knowledge for Topic -Optional ideas to support assessment: +Optional ideas to assess knowledge: -* Short Answer Questions — Give students some pieces of multimedia content and ask them whether or not they should contain captions and audio descriptions. Assess students' understanding of the requirements for alternatives to multimedia content. +* Short Answer Questions — Give students pieces of multimedia content and ask them where they would place their corresponding alternatives. Assess students' understanding of the requirements for alternatives to multimedia content. {% include excol.html type="end" %} @@ -133,7 +141,7 @@ Show examples of different types of animations. Explain that animations can caus Students should be able to: -* design user interfaces that support pausing, stopping, or hiding any content that blinks, moves, or auto-updates +* design user interfaces that support pausing, stopping, or hiding any content that blinks, moves, or auto-updates, for example animations, carousels, and decorative gimmicks * design user interfaces that support flashing below the general flash and red flash thresholds or with content that does not flash more than three times in any one second * design user interfaces that support disabling motion animation triggered by interaction, such as additional animations when scrolling * design user interfaces that support stopping or controlling the volume of any audio that plays automatically for more than 3 seconds @@ -157,7 +165,7 @@ Optional ideas to teach the learning outcomes: #### Ideas to Assess Knowledge for Topic -Optional ideas to support assessment: +Optional ideas to assess knowledge: * Practical — Present students with instances of flashing content and ask them to determine if they are below the general flash and red flash thresholds. Assess how students understand accessibility requirements for flashing content. * Practical — Present students with a user interface containing animations and ask them to make them accessible. Assess how students define mechanisms to reduce or disable the animations. @@ -170,7 +178,7 @@ Optional ideas to support assessment: ## Ideas to Assess Knowledge for Module -Optional ideas to support assessment: +Optional ideas to assess knowledge: * Research — Students research an accessible media player and explain how different groups of people with disabilities use the player. Assess how students understand how people with disabilities interact with multimedia content and players. * Portfolio — Students include accessible video and audio contents on a website. Assess how students understand the accessibility requirements of video and audio content, including transcripts for audio, audio descriptions, and sign language. diff --git a/content/designer/navigation.md b/content/designer/navigation.md index cc300390b..c30c58721 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -32,9 +32,9 @@ Courses based on this module should: Students should be able to: * explain strategies that people with disabilities use to navigate multipage websites and applications -* design user interfaces that support different types of navigations, including menus, tables of contents, and site maps -* define keyboard, mouse, and touch interactions for menus and other navigations -* provide clear and consistent visual cues for menus, menu item states, and other navigations +* design user interfaces that support different types of navigation mechanisms, including menus, tables of contents, and site maps +* define keyboard, mouse, and touch interactions for menus and other navigation mechanisms +* provide clear and consistent visual cues for menus, menu item states, and other navigation mechanisms * define blocks of repeated content and collaborate with developers to implement mechanisms that bypass such blocks * provide mechanisms for users to locate a specific web page within a set of web pages, such as breadcrumb trails and page titles * identify related requirements for developers to: @@ -54,7 +54,7 @@ Skills required for this module: {% include excol.html type="middle" %} * [Prerequisites for Students](/curricula/designer-modules/#prerequisites-for-students) -* [Module 2: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design/) from [Designer Modules](/curricula/designer-modules/) +* [Module 2: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design/) from [Designer Modules](/curricula/designer-modules/) {% include excol.html type="end" %} @@ -66,6 +66,8 @@ Skills required for this module: * Applied expertise in teaching: * [WCAG Success Criterion 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) + * [WCAG Success Criterion 2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/quickref/#keyboard) + * [WCAG Success Criterion 2.1.2 No Keyboard Trap](https://www.w3.org/WAI/WCAG21/quickref/#no-keyboard-trap) * [WCAG 2 Success Criterion 2.4.1 Bypass Blocks](https://www.w3.org/WAI/WCAG21/quickref/#bypass-blocks) * [WCAG Success Criterion 2.4.2 Page Titled](https://www.w3.org/WAI/WCAG21/quickref/#page-titled) * [WCAG 2 Success Criterion 2.4.5 Multiple Ways](https://www.w3.org/WAI/WCAG21/quickref/#multiple-ways) @@ -90,9 +92,9 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Show examples of different types of menus, such as navigational, fly-out, and application menus. Explain the different scenarios where each of them can be used. For references on the different types of menus and their uses, see the WAI website tutorials [Menus](https://www.w3.org/WAI/tutorials/menus/). +Show examples of different types of menus, such as navigational, fly-out, and application menus. Explain the different scenarios where each of them can be used. For references on the different types of menus and their uses, see the WAI tutorials on [Menus](https://www.w3.org/WAI/tutorials/menus/). -Explain styling conventions for menus, such as location, appropriate size, and ability for menus and menu items to resize depending on different user configurations. For references on how to apply accessible menu styles, see the WAI website tutorial, [Menu Styling](https://www.w3.org/WAI/tutorials/menus/styling/). +Explain styling conventions for menus, such as location, appropriate size, and ability for menus and menu items to resize depending on different user configurations. For references on how to apply accessible menu styles, see the WAI tutorial on [Menu Styling](https://www.w3.org/WAI/tutorials/menus/styling/). #### Learning Outcomes for Topic @@ -111,12 +113,12 @@ Optional ideas to teach the learning outcomes: * Explain conventions for accessible menus, such as clear and consistent styling to convey menu behaviors and states. Introduce patterns for mouse, keyboard, and touch interaction with menus. * Demonstrate menu interaction using different input devices, such as keyboard, mouse, and touch. For example, activating a menu option by tapping, pressing the Enter key, and mouse clicking. Explain that defining the interactions is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. -* Show examples of menu and menu items that contain large texts. Explain that, when used in smaller viewports and with different screen configurations, these texts may need to wrap so that they are perceived in their entirety. +* Show examples of menu and menu items that contain large texts. Explain that, when used in smaller viewports and with different screen configurations, these texts may need to wrap so that they are perceived in their entirety. Explain that different languages may have different word sizes, so designers need to consider provisions for different word lengths. * Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Emphasize that the states of these menu items need to be communicated using visual cues as well as semantics. Explain that providing the visual cues is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. #### Ideas to Assess Knowledge for Topic -Optional ideas to support assessment. +Optional ideas to assess knowledge: * Practical — Students define mouse, keyboard, and touch interactions for menus. for example, how to open, navigate, activate, and close such menus using the mouse, keyboard, and touch. Assess how students understand the need for different interaction patterns based on the input method in use. * Practical — Present students with different menu states, such as hover, focus, current, active, and visited, and ask them to provide visual cues to distinguish them from one another. Assess how students communicate visually the state of menus and menu items. @@ -149,7 +151,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of mechanisms to bypass blocks of repeated content, such as a link at the top of the page and the use of expandable and collapsible components. Explain that navigating through sets of repeated blocks of content using the tab key only is time consuming. For examples on how to provide a mechanism to bypass blocks of repeated content, see techniques [G1: Adding a link at the top of each page that goes directly to the main content area](https://www.w3.org/WAI/WCAG21/Techniques/general/G1.html), [G123: Adding a link at the beginning of a block of repeated content to go to the end of the block](https://www.w3.org/WAI/WCAG21/Techniques/general/G123.html), and [G124: Adding links at the top of the page to each area of the content](https://www.w3.org/WAI/WCAG21/Techniques/general/G124.html). +* Show examples of mechanisms to bypass blocks of repeated content, such as a link at the top of the page and the use of expandable and collapsible components. Explain that navigating through sets of repeated blocks of content using only the tab key is time consuming. For examples on how to provide a mechanism to bypass blocks of repeated content, see techniques [G1: Adding a link at the top of each page that goes directly to the main content area](https://www.w3.org/WAI/WCAG21/Techniques/general/G1.html), [G123: Adding a link at the beginning of a block of repeated content to go to the end of the block](https://www.w3.org/WAI/WCAG21/Techniques/general/G123.html), and [G124: Adding links at the top of the page to each area of the content](https://www.w3.org/WAI/WCAG21/Techniques/general/G124.html). * Show examples of search functionalities. Explain that they help users find content by supporting navigation to different parts of the site. Emphasize that some users prefer this way of navigating, especially when they are already familiar with the site and know what they are looking for. For references on how to provide a search functionality, see technique [G161: Providing a search function to help users find content](https://www.w3.org/WAI/WCAG21/Techniques/general/G161). ](https://www.w3.org/WAI/WCAG21/Techniques/general/G65). * Show examples of site maps and explain that they serve the purpose of providing an overview of the whole site. Explain that some users rely on them to better understand the structure of the site and to find its way more easily through it. For references on how to provide a site map, see [G63: Providing a site map](https://www.w3.org/WAI/WCAG21/Techniques/general/G63.html). @@ -157,7 +159,7 @@ Optional ideas to teach the learning outcomes: #### Ideas to Assess Knowledge for Topic -Optional ideas to support assessment: +Optional ideas to assess knowledge: * Practical — Students define the blocks of repeated content within a website and collaborate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they provide a mechanism to bypass them. * Practical — Present students with an interface and ask them to provide multiple ways to navigate across the website. Assess how students provide multiple navigation mechanisms where appropriate, such as search functionalities, breadcrumb trails, site maps, and tables of contents. @@ -176,10 +178,11 @@ Build on foundation [Module 6: Understanding and Involving Users](/curricula/fou Students should be able to: -* provide ways for users to locate a specific web page within a set of web pages, for example: +* design user interfaces with mechanisms for users to locate a specific web page within a set of web pages, for example: * descriptive page titles * breadcrumb trails * visual cues to indicate the current page within a set of web pages + * design mechanisms to make location information visually distinct * identify related requirements for developers to programmatically indicate the current page ### Teaching Ideas @@ -191,17 +194,18 @@ Optional ideas to teach the learning outcomes: #### Ideas to Assess Knowledge -Optional ideas to support assessment: +Optional ideas to assess knowledge: -* Practical — Present students with a web page that is deep in the hierarchy of a website and ask them to provide a breadcrumb trail for users to understand where a page is located with respect to the whole website. Assess how students communicate the hierarchical structure of a web page within a set of web pages. +* Practical — Present students with a specific web page inside a website and ask them to provide a breadcrumb trail for users to understand where a page is located with respect to the whole website. Assess how students communicate the hierarchical structure of a web page within a set of web pages. * Practical — Present students with a set of web pages and ask them to provide descriptive titles that identify each of the pages and describe what they are about. Assess how students provide clear and descriptive page titles. + {% include excol.html type="end" %} {% include excol.html type="all" %} ## Ideas to Assess Knowledge for Module -Optional ideas to support assessment: +Optional ideas to assess knowledge: * Portfolio — Students design the navigation menu and other navigational mechanisms for a set of web pages. Assess how students understand accessibility features of navigation across multipage websites and applications . @@ -209,7 +213,6 @@ Optional ideas to support assessment: Suggested resources to support your teaching: -* @@@ * [Menus (WAI Web Accessibility Tutorials)](https://www.w3.org/WAI/tutorials/menus/) — Shows how to design navigational mechanisms that are accessible to people with disabilities. * [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. * [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. From 70ad1479443372b199702ca019a9ab2739de131a Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 21 Jun 2021 17:49:51 +0200 Subject: [PATCH 155/416] Updating modules --- content/designer/interaction-and-feedback.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index fdfc599d0..ea452a142 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -124,6 +124,7 @@ Students should be able to: * using the Enter key to enter a specific component and to select a specific item on a component * using the arrow keys to move through list items and grid cells * using the escape key to exit components + * first letter navigation to jump to specific pieces of data in lists and grids * specific keyboard shortcuts to support efficiency * identify situations when it is necessary to provide additional keyboard shortcuts, for example when designing a custom functionality that is not keyboard supported by default * define keyboard shortcuts that avoid conflicts with the operating system, browser, and assistive technologies when possible, and collaborate with developers to provide mechanisms to remap or disable conflicting shortcuts @@ -135,13 +136,14 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Invite students to try standard keyboard conventions. For example, use of the tab to move through actionable controls, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that these interactions need to be preserved as much as possible when designing custom widgets. Custom keyboard interactions should be defined when standard keyboard interactions do not provide the necessary keyboard support. Explain that defining keyboard interactions is a designers' responsibility, whereas implementing such interaction is a responsibility shared with the developer. +* Invite students to try standard keyboard conventions. For example, use of the tab to move through actionable controls, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that these interactions need to be preserved as much as possible when designing custom widgets, as these are mostly expected by users. +* Reflect with students about keystrokes that are not part of standard keyboard navigation. For example, letter keys together with modifier keys to perform specific actions. Explain that promoting team-side strategies to decide which custom keyboard patters get implemented in a user interface is a designers' responsibility, whereas implementing such keystrokes is a responsibility shared with the developer. * Present some examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. * Show examples of help functionality to explain custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using such shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these mechanisms is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic -Optional ideas to support assessment: +Optional ideas to assess knowledge: * Practical — Present students with a user interface that can be interacted only with the mouse and ask them to define keyboard interaction patterns. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. @@ -181,7 +183,7 @@ Optional ideas to teach the learning outcomes: #### Ideas to Assess Knowledge for Topic -Optional ideas to support assessment: +Optional ideas to assess knowledge: * Practical — Present students with a form and ask them to define labels for each of the fields. Assess how students provide clear and descriptive names for each of the form fields. * Practical — Give students an application and ask them to provide names for each of the application subsections. Assess how students identify application subsections and provide clear and understandable names for each. @@ -218,7 +220,7 @@ Optional ideas to teach the learning outcomes: #### Ideas to Assess Knowledge for Topic -Optional ideas to support assessment: +Optional ideas to assess knowledge: * Practical — Give students an interface that uses a motion-based gesture to perform an action and ask them to provide alternatives to that gesture. Assess how students provide alternatives to motion-based gestures. * Practical — Give students an interface that uses a multi path-based gesture to perform an action and ask them to provide alternatives to that gesture. Assess how students provide alternatives to multi-pointer and path-based gestures. @@ -257,7 +259,7 @@ Optional ideas to teach the learning outcomes: #### Ideas to Assess Knowledge for Topic -Optional ideas to support assessment: +Optional ideas to assess knowledge: * Practical — Present students with a form field submission containing errors and ask them to provide notifications about each form field that contains errors, together with suggestions for corrections when possible. Assess how students provide adequate error messages for each of the wrong fields and how they provide suggestions for corrections when possible. @@ -267,7 +269,7 @@ Optional ideas to support assessment: ## Ideas to Assess Knowledge for Module -Optional ideas to support assessment: +Optional ideas to assess knowledge: [To be developed.] From c1e76f584b8b45d05c554caa0a18ba297c253512 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 22 Jun 2021 07:47:58 +0200 Subject: [PATCH 156/416] -within in some instances --- content/designer/navigation.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/designer/navigation.md b/content/designer/navigation.md index c30c58721..40001fff5 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -102,7 +102,7 @@ Students should be able to: * identify and describe uses of different types of menus, for example to navigate across web pages, to select categories from a crowded web page, and to navigate across applications * provide visual cues to distinguish menus from other components, and provide consistent styling for menu identification across a set of web pages -* define mouse, keyboard, and touch interactions within menus +* define mouse, keyboard, and touch interactions inside menus * design user interfaces that support appropriate sizing of menus and menu items to fit all text in different viewports and screen configurations * design user interfaces that communicate the state of menu items using distinguishable and consistent styles * identify related requirements for developers to implement semantics for different menu states and properties, such as hover, focus, current, active, and visited @@ -161,7 +161,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Students define the blocks of repeated content within a website and collaborate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they provide a mechanism to bypass them. +* Practical — Students define the blocks of repeated content in a website and collaborate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they provide a mechanism to bypass them. * Practical — Present students with an interface and ask them to provide multiple ways to navigate across the website. Assess how students provide multiple navigation mechanisms where appropriate, such as search functionalities, breadcrumb trails, site maps, and tables of contents. {% include excol.html type="end" %} @@ -181,7 +181,7 @@ Students should be able to: * design user interfaces with mechanisms for users to locate a specific web page within a set of web pages, for example: * descriptive page titles * breadcrumb trails - * visual cues to indicate the current page within a set of web pages + * visual cues to indicate the current page * design mechanisms to make location information visually distinct * identify related requirements for developers to programmatically indicate the current page @@ -189,7 +189,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of breadcrumb trails. Explain that they provide information about the user's location within the context of a set of websites. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail +* Show examples of breadcrumb trails. Explain that they provide information about the user's location in the context of a set of websites. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail * Invite students to give examples of page titles they are familiar with and reflect with them on how well the titles describe the page contents. Explain that page titles are useful to locate a specific web page within a set of web pages. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page, as some mobile browsers and assistive technologies do not show the information on the title. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). #### Ideas to Assess Knowledge From 3c97e85a4a65c8a1d4d35bfd73e2ae45b877a39c Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 22 Jun 2021 08:05:23 +0200 Subject: [PATCH 157/416] Update scope --- content/designer/designer-modules.md | 1 - 1 file changed, 1 deletion(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index b7c326ea2..34be6f169 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -28,7 +28,6 @@ navigation: The designer modules guide the creation of courses that: * introduce key accessibility terms for designers and relate some design terms to accessibility -* present strategies to understand and involve people with disabilities in user research activities * demonstrate and explain how accessible design enables people with disabilities to use websites and applications * teach accessible design techniques for: * visual design From 9cf1f1c015bd760b7c866525b851f894ed6a77d4 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 22 Jun 2021 08:31:00 +0200 Subject: [PATCH 158/416] Updates to module 1 --- content/designer/flexible-layout-and-design.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/content/designer/flexible-layout-and-design.md b/content/designer/flexible-layout-and-design.md index 2c27355ec..434911a18 100644 --- a/content/designer/flexible-layout-and-design.md +++ b/content/designer/flexible-layout-and-design.md @@ -118,7 +118,7 @@ Optional ideas to teach the learning outcomes: * Demonstrate the use of styles to distinguish user interface components from one another, such as links, buttons, form elements, and texts. Explain how people rely on font sizes, spacing, and typography to distinguish components from one another. * Demonstrate the use of different font sizes and explain how they affect readability of the content. -* Show examples of different page layouts with and without adequate spacing. Explain how spacing allows to distinguish different user interface components and pieces of content from one another. Emphasize that spacing also allows for better readability of contents and for better identifications of the different parts of the user interface. +* Show examples of different page layouts with and without adequate spacing. Explain how spacing allows to distinguish different user interface components and pieces of content from one another. Emphasize that spacing also allows for better readability of contents and for better identification of the different parts of the user interface. #### Ideas to Assess Knowledge for Topic @@ -134,13 +134,13 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Discuss strategies to provide mechanisms for users to perceive different web page regions. Present different strategies to complement different content types, such as visual and textual, through the use of visual and text cues. +Discuss strategies to provide mechanisms for users to perceive different web page regions. Present different strategies to complement various content types through the use of visual and textual cues. #### Learning Outcomes for Topic Students should be able to: -* define page regions by using appropriate visual and programmatical landmarks +* define page regions by using appropriate visual and programmatic landmarks * design user interfaces with text cues to convey information provided through vision only, for example to convey required form fields * design user interfaces with focus indicators that allow people to tell where they are as they move through the web page and applications using the keyboard @@ -150,7 +150,7 @@ Optional ideas to teach the learning outcomes: * Show examples of different regions of web pages. Explain that the use of landmarks is needed for people to perceive such regions. Explain that defining landmarks is a designers' responsibility, whereas implementing such landmarks is a responsibility shared with the developer. * Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a form field is required. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). -* Invite students to navigate a web page with appropriate focus indicators first, and then invite them to navigate a web page without focus indicators. Explain how focus indicators allow people using the keyboard only to determine where they are as they move through web pages and applications using the keyboard only. For reference on how to provide appropriate focus indicators, see technique [G149: Using user interface components that are highlighted by the user agent when they receive focus](https://www.w3.org/WAI/WCAG21/Techniques/general/G149.html). +* Invite students to navigate a web page with appropriate focus indicators first, and then invite them to navigate a web page without focus indicators. Explain how focus indicators allow people using the keyboard only to determine where they are as they move through web pages and applications using the keyboard only. For reference on how to provide appropriate focus indicators, see techniques [G149: Using user interface components that are highlighted by the user agent when they receive focus](https://www.w3.org/WAI/WCAG21/Techniques/general/G149.html) and [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). #### Ideas to Assess Knowledge for Topic @@ -167,7 +167,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Describe how some people use color to understand and distinguish contents. Explain different ways to convey information that is conveyed using color alone, such as shapes or icons. Explain how contrast ratios are essential for people with low vision to perceive, distinguish, and understand contents. +Describe how some people use color to understand and distinguish contents. Explain different ways to convey information that is presented using color alone, such as shapes or icons. Explain how contrast ratios are essential for people with low vision to perceive, distinguish, and understand contents. #### Learning Outcomes for Topic @@ -185,14 +185,14 @@ Optional ideas to teach the learning outcomes: * Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so alternative methods to convey that information are required. For references on how to convey information without using color alone, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). * Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios for text (including images of text) need to be at least 4.5:1 with respect to their background. For references on how to apply contrast ratios to text (including images of text), see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). -* Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. For techniques on how to add contrast ratios for graphics and interface components, see technique [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). +* Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: * Short Answer Questions — Give students a set of user interface components and ask them what the contrast ratio should be. Assess how students understand and distinguish contrast ratios for different user interface components. -* Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing. +* Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components, and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing. {% include excol.html type="end" %} @@ -219,7 +219,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Discuss with students the differences between web sites and applications that preserve content and functionality when resized up to 200% and those which do not. Explain that people with low vision often need to resize text to be able to read it properly. For references on how to ensure text resizes up to 200%, see technique [G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width](https://www.w3.org/WAI/WCAG21/Techniques/general/G179). +* Discuss with students the differences between web sites and applications that preserve content and functionality when resized up to 200% and those which do not. Explain that people with low vision often need to resize text to read it properly. For references on how to ensure text resizes up to 200%, see technique [G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width](https://www.w3.org/WAI/WCAG21/Techniques/general/G179). * Discuss the use of multiple breakpoints by people with low vision. Explain that these breakpoints often go beyond the traditional mobile, tablet, and desktop breakpoints. * Show examples of user interfaces showing up in both portrait and landscape modes. Explain that the ability to show an interface both in portrait and landscape is crucial for people who cannot change their device orientation due to mobility impairments. * Show examples of different tap targets and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that tap targets need to be large enough to accommodate different people's needs. From 107ed96a64054a5a3632eed35bc2244d4cea2597 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 24 Jun 2021 12:06:00 +0200 Subject: [PATCH 159/416] Fixing typo --- content/designer/interaction-and-feedback.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index ea452a142..4bf31da3c 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -108,7 +108,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="start" %} -### Topic: Keyboard Interaction +### Topic: Keyboard Interactions {% include excol.html type="middle" %} @@ -137,7 +137,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Invite students to try standard keyboard conventions. For example, use of the tab to move through actionable controls, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that these interactions need to be preserved as much as possible when designing custom widgets, as these are mostly expected by users. -* Reflect with students about keystrokes that are not part of standard keyboard navigation. For example, letter keys together with modifier keys to perform specific actions. Explain that promoting team-side strategies to decide which custom keyboard patters get implemented in a user interface is a designers' responsibility, whereas implementing such keystrokes is a responsibility shared with the developer. +* Reflect with students about keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that promoting team-side strategies to decide which custom keyboard patterns get implemented in a user interface is a designers' responsibility, whereas implementing such keystrokes is a responsibility shared with the developer. * Present some examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. * Show examples of help functionality to explain custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using such shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these mechanisms is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. From df81864a6ef1a9006509862d9dd688af399acc98 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 24 Jun 2021 12:12:25 +0200 Subject: [PATCH 160/416] Clarifying teaching idea --- content/designer/interaction-and-feedback.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 4bf31da3c..0c1280235 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -137,7 +137,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Invite students to try standard keyboard conventions. For example, use of the tab to move through actionable controls, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that these interactions need to be preserved as much as possible when designing custom widgets, as these are mostly expected by users. -* Reflect with students about keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that promoting team-side strategies to decide which custom keyboard patterns get implemented in a user interface is a designers' responsibility, whereas implementing such keystrokes is a responsibility shared with the developer. +* Reflect with students about keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain strategies that designers can define depending on the different team roles and responsibilities. This includes researching commonly used keystrokes for complex interaction patterns, definioing the keystrokes in the design phase, and working with developers to implement such keystrokes. * Present some examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. * Show examples of help functionality to explain custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using such shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these mechanisms is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. From afc977a67108a75c1d273e786e7747ed60dd2454 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 24 Jun 2021 12:16:26 +0200 Subject: [PATCH 161/416] Updating module --- content/designer/interaction-and-feedback.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 0c1280235..3f5f291df 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -137,7 +137,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Invite students to try standard keyboard conventions. For example, use of the tab to move through actionable controls, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that these interactions need to be preserved as much as possible when designing custom widgets, as these are mostly expected by users. -* Reflect with students about keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain strategies that designers can define depending on the different team roles and responsibilities. This includes researching commonly used keystrokes for complex interaction patterns, definioing the keystrokes in the design phase, and working with developers to implement such keystrokes. +* Reflect with students about keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain strategies that designers can define depending on the different team roles and responsibilities. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and working with developers to implement such keystrokes. * Present some examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. * Show examples of help functionality to explain custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using such shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these mechanisms is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. From c4298e9938564c1e9c7f099e9fafa703e9bc6687 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 28 Jun 2021 15:52:10 +0200 Subject: [PATCH 162/416] Updates to modules --- .../designer/flexible-layout-and-design.md | 26 ++++---- content/designer/images-and-graphics.md | 62 ++++++++++--------- content/designer/information-design.md | 16 ++--- content/designer/interaction-and-feedback.md | 2 +- content/designer/multimedia-and-animations.md | 6 +- content/designer/navigation.md | 31 +++++----- 6 files changed, 75 insertions(+), 68 deletions(-) diff --git a/content/designer/flexible-layout-and-design.md b/content/designer/flexible-layout-and-design.md index 434911a18..367e5ae3c 100644 --- a/content/designer/flexible-layout-and-design.md +++ b/content/designer/flexible-layout-and-design.md @@ -30,13 +30,13 @@ navigation: Courses based on this module should: * explain how people with disabilities use different screen sizes, screen configurations, breakpoints, and style sheets to identify, distinguish, and process contents -* explain accessibility requirements for user interface components that relate to color, layout, spacing, and position +* explain accessibility requirements for user interface components that relate to color, layout, spacing, position, and flexibility ## Learning Outcomes for Module Students should be able to: -* explain how people with disabilities identify and distinguish user interface components based on different features, such as color, layout, spacing, and position +* explain how people with disabilities identify and distinguish user interface components based on different features, such as color, layout, spacing, position, and flexibility * design user interfaces with headings, landmarks, text cues, patterns, and icons to supplement information conveyed through color alone * design user interfaces with adjustable font sizes and adequate spacing to support readability * design user interfaces with appropriate contrast ratios for text, images of text, and controls @@ -124,7 +124,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Students design a paper prototype with distinguishable styles that help perceive different contents. Assess how students use different style properties to make content perceivable and to distinguish components from one another. +ew* Practical — Students design a paper prototype with distinguishable styles that help perceive different contents. Assess how students use different style properties such as font sizes and spacing to make content perceivable and to distinguish components from one another. {% include excol.html type="end" %} @@ -134,7 +134,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Discuss strategies to provide mechanisms for users to perceive different web page regions. Present different strategies to complement various content types through the use of visual and textual cues. +Discuss strategies to provide mechanisms for users to perceive different web page regions. Present different strategies to supplement various content types through the use of visual and textual cues. #### Learning Outcomes for Topic @@ -142,13 +142,13 @@ Students should be able to: * define page regions by using appropriate visual and programmatic landmarks * design user interfaces with text cues to convey information provided through vision only, for example to convey required form fields -* design user interfaces with focus indicators that allow people to tell where they are as they move through the web page and applications using the keyboard +* design user interfaces with focus indicators that enable people to tell where they are as they move through the web page and applications using the keyboard #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of different regions of web pages. Explain that the use of landmarks is needed for people to perceive such regions. Explain that defining landmarks is a designers' responsibility, whereas implementing such landmarks is a responsibility shared with the developer. +* Show examples of different regions of web pages, such as header, navigation, main, and footer. Explain that the use of landmarks is needed for people to perceive such regions. Explain that defining landmarks is a designers' responsibility, whereas implementing such landmarks is a responsibility shared with the developer. * Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a form field is required. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). * Invite students to navigate a web page with appropriate focus indicators first, and then invite them to navigate a web page without focus indicators. Explain how focus indicators allow people using the keyboard only to determine where they are as they move through web pages and applications using the keyboard only. For reference on how to provide appropriate focus indicators, see techniques [G149: Using user interface components that are highlighted by the user agent when they receive focus](https://www.w3.org/WAI/WCAG21/Techniques/general/G149.html) and [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). @@ -156,8 +156,8 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Give students a web page and ask them to identify its regions and to define the appropriate landmarks for users to perceive such regions. Assess how students identify page regions and provide mechanisms for people to perceive such regions. -* Practical &mdash: Give students examples required form fields and ask them to provide text information and visual cues to indicate that they are required. Assess how students provide the necessary textual information and visual cues to supplement information. +* Practical — Give students a web page and ask them to define the appropriate landmarks for users to perceive such regions. Assess how students provide mechanisms to perceive such regions. +* Practical &mdash: Give students examples of required form fields and ask them to provide text information and visual cues to indicate that they are required. Assess how students provide the necessary textual information and visual cues to supplement information. {% include excol.html type="end" %} @@ -167,7 +167,8 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Describe how some people use color to understand and distinguish contents. Explain different ways to convey information that is presented using color alone, such as shapes or icons. Explain how contrast ratios are essential for people with low vision to perceive, distinguish, and understand contents. +Describe how some people use color to understand and distinguish contents. Explain different ways to convey information that is presented using color alone, such as shapes and icons. +Explain how contrast ratios are essential for people with low vision to perceive, distinguish, and understand contents. #### Learning Outcomes for Topic @@ -193,6 +194,7 @@ Optional ideas to assess knowledge: * Short Answer Questions — Give students a set of user interface components and ask them what the contrast ratio should be. Assess how students understand and distinguish contrast ratios for different user interface components. * Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components, and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing. +* Practical — Give students information presented using color alone and ask them to design mechanisms to convey such information. Assess how students use different shapes and icons to make information presented using color alone distinguishable. {% include excol.html type="end" %} @@ -221,13 +223,13 @@ Optional ideas to teach the learning outcomes: * Discuss with students the differences between web sites and applications that preserve content and functionality when resized up to 200% and those which do not. Explain that people with low vision often need to resize text to read it properly. For references on how to ensure text resizes up to 200%, see technique [G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width](https://www.w3.org/WAI/WCAG21/Techniques/general/G179). * Discuss the use of multiple breakpoints by people with low vision. Explain that these breakpoints often go beyond the traditional mobile, tablet, and desktop breakpoints. -* Show examples of user interfaces showing up in both portrait and landscape modes. Explain that the ability to show an interface both in portrait and landscape is crucial for people who cannot change their device orientation due to mobility impairments. -* Show examples of different tap targets and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that tap targets need to be large enough to accommodate different people's needs. +* Show examples of user interfaces showing up in both portrait and landscape modes. Explain that the ability to show an interface both in portrait and landscape is important for people who cannot change their device orientation due to mobility impairments. +* Show examples of different tap targets and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that tap targets need to be large enough to accommodate different people's needs. * Show examples of different user interfaces that support customizing line height as well as spacing between paragraphs, words, and letters to support readability. #### Ideas to Assess Knowledge for Topic -assess knowledge: +Optional ideas to assess knowledge: * Practical — Students design different paper prototypes with different interface layouts considering text resizing, line height, spacing between paragraphs, words, and letters. Assess how students consider text resizing, line height, and spacing between paragraphs, words, and letters. diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 6c210f067..c50899c15 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -25,17 +25,18 @@ navigation: Courses based on this module should: * explain strategies that people with disabilities use to access information contained in images -* explain accessibility requirements related to images and graphics, such as text alternatives, text descriptions, and contrast ratios +* explain accessibility requirements related to images and graphics, such as text alternatives and contrast ratios ## Learning Outcomes for Module Students should be able to: -* explain how images affect processing of information, content identification, and understanding of functionality by people with disabilities +* explain how images help people with disabilities to process information, identify content, and understand functionality +* explain how text alternatives are essential for people with disabilities to understand the information conveyed in images * provide meaningful and consistent text alternatives for functional images included in the design phase, such as those included in buttons, links, icons, and logos * design user interfaces with consistent iconography to help users recognize the purpose of icons, thumbnails, and other graphical components -* design user interfaces that present information as text when the desired visual presentation can be achieved by the technology in use, instead of using images of text -* collaborate with developers and content authors to provide the appropriate alternative for images and graphics included in the design phase based on the image purpose +* design user interfaces that avoid images of text when the desired visual presentation can be achieved by the technology in use +* cooperate with developers and content authors to provide the appropriate alternative for images and graphics included in the design phase based on the image purpose * identify related requirements for developers to code images and text alternatives appropriately * identify related requirements for content authors to provide appropriate descriptions for images included in the authoring phase, such as charts, diagrams, and other complex graphics @@ -52,9 +53,9 @@ Skills required for this module: {% include excol.html type="middle" %} * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) -* [Module 2: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design/) -* [Module 3: Navigation](/curricula/designer-modules/navigation/) -* [Module 4: Information Design](/curricula/designer-modules/information-design/) +* [Module 1: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design/) +* [Module 2: Navigation](/curricula/designer-modules/navigation/) +* [Module 3: Information Design](/curricula/designer-modules/information-design/) {% include excol.html type="end" %} @@ -97,7 +98,7 @@ Students should be able to: * combining the text alternative of the image with the adjacent text inside the component * providing adjacent text inside the component to understand its function * create designs with consistent naming and iconography for user interface components that have the same functionality across web pages -* decide if the alternative text should be visible to screen readers only or to all users, to allow for better recognition of the conveyed functionality +* explain the benefits of making the text alternative visible to all users instead of making it available for screen readers only, for example better recognition of the conveyed functionality * apply appropriate contrast ratios for functional images belonging to components that accept user input #### Teaching Ideas for Topic @@ -110,7 +111,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Give students a set of images conveying function, such as a printer for a "print" button and a magnifying glass for a "search" button. Ask students to provide an appropriate text alternative. Assess how students identify images that convey function and provide text alternatives that describe the functionality of the component the image is attached to. +* Practical — Give students a set of images conveying function, such as a printer for a "print" button and a magnifying glass for a "search" button. Ask students to provide an appropriate text alternative. Assess how students identify images that convey function and how they provide text alternatives that describe the functionality of the component the image is attached to. * Practical — Ask students to design a series of graphical buttons and links in a way that they are perceivable and distinguishable by all users. Assess how students apply accessibility requirements, such as contrast ratios, to graphical buttons and links. {% include excol.html type="end" %} @@ -122,6 +123,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} Informative images convey information that is necessary to understand the content. Show examples of thumbnails and other icons that convey information. Discuss with students how they would describe them. + Explain that providing text alternatives for informative images is a responsibility shared with the content author. #### Learning Outcomes for Topic @@ -129,10 +131,12 @@ Explain that providing text alternatives for informative images is a responsibil Students should be able to: * provide text alternatives that present equivalent information as that contained in informative images, by using one of the following: - * including a boilerplate description that would then be completed in the authoring phase with real descriptions + * including a boilerplate description that would then be completed and maintained through the development and authoring phases * complementing thumbnails and icons with adjacent textual information, for example in a news headline * providing a text alternative that describes the information conveyed by the image * apply the appropriate contrast ratio to images that are necessary to understand the contents +* design user interfaces that support use of styled text instead of images of text when the technology in use can provide the desired visual presentation +* design user interfaces with alternatives to visual CAPTCHA, for example auditory CAPTCHA, logical CAPTCHA, and biometrics * identify related requirements for developers to code alternative texts for informative images ### Teaching Ideas for Topic @@ -140,12 +144,15 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of different images that convey information, such as images to provide instructions, and to identify people and objects. Explain that such information needs to be provided using text alternatives, so that the purpose of the image can be understood without having to look at the image. Emphasize that these alternatives may require coordination among designers, developers, and content authors. For references on how to provide text alternatives for images, see [G82: Providing a text alternative that identifies the purpose of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G82.html). +* Explain that images of text present information intended to be read as text. Emphasize that sometimes it is difficult to tell visually if text has been coded as a text or as an image, so coordination among designers, developers, and content authors is needed to determine if the technologies in use can achieve the desired visual presentation. Emphasize that, if an image of text is still required, there needs to be a text alternative that conveys the same information as the image of text. Explain that coding an image of text appropriately is a responsibility of the developer, whereas providing descriptions for images of text is a responsibility shared with the content author. +* Show examples of different verification systems, such as CAPTCHA, to identify human beings trying to access a service or system. Explain that these mechanisms need to support several modalities, such as visual, auditory, or cognitive. For references on how to provide accessible CAPTCHA, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). #### Ideas to Assess Knowledge for Topic -Optional ideas to support assesment. +Optional ideas to support assessment. -[To be developed]. +* Practical — Present students with an image of text and ask them to cooperate with other team roles such as developers and content authors to ensure the image has an equivalent alternative text. Assess how students identify the need for alternative text for images of text. +* Short Answer Questions — Present students with a situation where a human verification system needs to be used and ask them to provide authentication alternatives for other sensory characteristics apart from vision. Assess how students understand the need for providing human verification systems that rely on different sensory characteristics in addition to vision. {% include excol.html type="end" %} @@ -155,21 +162,23 @@ Optional ideas to support assesment. {% include excol.html type="middle" %} -Decorative images are used for ornamental purposes and convey no information or function. Explain that these images do not require text alternatives, as these would add clutter to the information that assistive technologies provide. Explain that deciding if an image is decorative is a responsibility shared with the content author. +Decorative images are used for ornamental purposes and convey no information or function. Build on [Module 1: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design/) to explain that decorative images also need to adhere to accessibility requirements such as use of color, ability to resize, and flexibility. Decorative images do not require text alternatives, as these would add clutter to the information that assistive technologies provide. Explain that determining if an image is decorative is a responsibility shared with the content author. #### Learning Outcomes for Topic Students should be able to: -* design user interfaces with decorative images that do not overlap with user interface components and contents when viewed using different screen sizes, configurations, and setups -* indicate to developers which of the images provided in the design phase are decorative, so that they can code them appropriately +* describe the differences between decorative and non-decorative images depending on the type of information conveyed by the image and the presence of similar information in the adjacent contents +* describe different ways to present information contained in an image so that it can be considered decorative +* describe the relation of decorative images with respect to other adjacent images and to the overall web page where it is included +* design user interfaces that do not overload users with too many ornamental imagery * identify related requirements for developers to code decorative images so that they are skipped by assistive technologies #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of images and graphics that do not convey function or information, such as ornamental icons. Explain that they serve ornamental purposes as long as people can understand and interact with the user interface with or without such icons. Explain that deciding what is the images' role is a designers' responsibility, whereas coding the images so that they rendered with the appropriate role is a developers' responsibility. +* Show examples of images and graphics that do not convey function or information, such as ornamental icons. Explain that they serve ornamental purposes as long as people can understand and interact with the user interface with or without such icons. Explain that deciding what is the images role is a designers' responsibility, whereas coding the images so that they render with the appropriate role is a developers' responsibility. #### Ideas to Assess Knowledge for Topic @@ -181,39 +190,35 @@ Optional ideas to assess knowledge: {% include excol.html type="start" %} -### Topic: Complex and Textual Images +### Topic: Complex Images {% include excol.html type="middle" %} -Show examples of complex images and images of text. Images of text are those which are intended to be read as text but are coded as an image. Complex images are those whose description requires more than a short phrase or sentence. Explain accessibility requirements that these images have, such as appropriate contrast ratios and appropriate text descriptions. +Complex images are those whose description requires more than a short phrase or sentence. Show examples of complex images and explain accessibility requirements that these images have, such as appropriate contrast ratios and appropriate text descriptions. -Explain that coordination among different team members is required to establish the relations between parts of complex images and their adjacent components (for example text and other images) so that the relations are perceived and understood visually and through the provided descriptions. +Explain that coordination among different team members is required to establish the relations between parts of complex images and their adjacent components (for example text and other images) so that the relations are perceived and understood visually and through the provided descriptions. #### Learning Outcomes for Topic Students should be able to: * design user interfaces that support appropriate contrast ratios for complex images when these images are required to understand the contents -* design user interfaces that support use of text instead of images of text when the technology in use can provide the desired visual presentation -* design user interfaces with alternatives to visual CAPTCHA, for example auditory CAPTCHA, logical CAPTCHA, and biometrics -* identify related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, such as diagrams or charts +* identify related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, such as diagrams, charts, maps and infographics * determine if and how complex images are operated using the mouse, keyboard, and other input devices #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Provide examples of complex images and graphics, such as charts and diagrams. Explain that they need to have a contrast ratio of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). -* Explain that images of text present information intended to be read as text. Emphasize that sometimes it is difficult to tell visually if text has been coded as a text or as an image, so coordination among designers, developers, and content authors is needed to determine if the technologies in use can achieve the desired visual presentation. Emphasize that, if an image of text is still required, there needs to be a text alternative that conveys the same information as the image of text. Explain that coding an image of text appropriately is a responsibility of the developer, whereas providing descriptions for images of text is a responsibility shared with the content author. -* Show examples of complex images and graphics, such as maps, diagrams, and charts. Explain that they need to have text descriptions that allow people to understand and interpret such images without having to look at them. Explain that providing these text alternatives is a designers' responsibility, whereas providing the text descriptions is a responsibility shared with the content author. -* Show examples of different verification systems, such as CAPTCHA, to identify human beings trying to access a service or system. Explain that these mechanisms need to support several sensory characteristics, such as visual, auditory, or cognitive. For references on how to provide accessible CAPTCHA, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). +* Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Explain that they need to have a contrast ratio of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). +* Explain that complex images also need to have text descriptions that allow people to understand and interact with such images without having to look at them. Explain that providing these text alternatives is a designers' responsibility, whereas providing the text descriptions is a responsibility shared with the content author. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: * Practical — Students add complex images to a website, such as charts or diagrams, and ensure they have the required contrast ratio. Assess how students understand the contrast requirements for complex images. -* Short Answer Questions — Present students with a situation where a human verification system needs to be used and ask them to provide authentication alternatives for other sensory characteristics apart from vision. Assess how students understand the need for providing human verification systems that rely on different sensory characteristics in addition to vision. +* Practical — Students cooperate with developers and content authors to implement a map in a way that everybody can understand its meaning and interact with it. Assess how students identify the need for text alternatives for complex images and cooperate with other team members to ensure such alternatives exist. {% include excol.html type="end" %} @@ -229,8 +234,7 @@ Optional ideas to assess knowledge: Suggested resources to support your teaching: -* @@@ * [Images (WAI Web Accessibility Tutorials)](https://www.w3.org/WAI/tutorials/images/) — Shows how to provide alternatives to images that are accessible to people with disabilities. -* [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. +* [[How People with Disabilities Use the Web]](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. * [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 7d35944c9..1dd4fd1c3 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -25,14 +25,14 @@ navigation: Courses based on this module should: * present strategies for splitting large blocks of information into smaller pieces -* present strategies for grouping information that shares a common purpose so that it is easier to understand +* present strategies for grouping information that shares a common purpose to make such information easier to understand ## Learning Outcomes for Module Students should be able to: * describe approaches to break down different types of content into smaller and more manageable pieces, including: - * headings, pages, and chapter marks + * headings, pages, and chapter markers * lists, simpler tables, and plain text to convey information presented in complex tables * groups of form controls that share a common purpose * filters to display smaller data subsets from a given large data set @@ -52,8 +52,8 @@ Skills required for this module: {% include excol.html type="middle" %} * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) -* [Module 2: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design/) -* [Module 3: Navigation](/curricula/designer-modules/navigation/) +* [Module 1: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design/) +* [Module 2: Navigation](/curricula/designer-modules/navigation/) * Basic knowledge of: * Visual Design * Responsive Design @@ -137,7 +137,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Build on [Foundation Module 6: Understanding and Involving Users](/curricula/foundation-modules/understanding-and-involving-users/). Research strategies that people with disabilities use to interact with information presented in tables. For example, through textual descriptions, through graphical representation of the table's contents, by splitting a complex table into several simpler tables, and by splitting the information in the table into individual lists. +Build on [Foundation Module 6: Understanding and Involving Users](/curricula/foundation-modules/understanding-and-involving-users/). Research strategies that people with disabilities use to interact with information presented in tables. For example, through textual descriptions, through graphical representation of the table contents, by splitting a complex table into several simpler tables, and by splitting the information in the table into individual lists. #### Learning Outcomes for Topic @@ -156,7 +156,7 @@ Optional ideas to teach the learning outcomes: * Show examples of different types of information presented in tables. Explain that tables are used when there is a logical relationship between the information presented, for example when displaying a list of events with their date and venue. * Refer back to Module 2: Flexible Layout and Design [Topic: Flexible Design](/curricula/designer-modules/flexible-layout-and-design/#topic-flexible-design) and explain that some users may require different ways of presenting tabular information. Explain that these include providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. -* Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells needs to be perceived both visually and programmatically. Explain that providing the styles is a designer's responsibility, whereas establishing the programmatic relationship is a responsibility shared with the developer. +* Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells needs to be perceived both visually and programmatically. Explain that providing the styles is a designers' responsibility, whereas establishing the programmatic relationship is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic @@ -203,12 +203,12 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Portfolio — Students oragnize different pieces of information on a website, including text, forms, and images. Assess how students provide mechanisms for people to identify different pieces of information, how students split large amounts of information into smaller and more manageable pieces, and how they group related information together. +* Portfolio — Students organize different pieces of information on a website, including text, forms, and images. Assess how students provide mechanisms for people to identify different pieces of information, how students split large amounts of information into smaller and more manageable pieces, and how they group related information together. ## Teaching Resources Suggested resources to support your teaching: -* [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. +* [[How People with Disabilities Use the Web]](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. * [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 3f5f291df..bccce267f 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -127,7 +127,7 @@ Students should be able to: * first letter navigation to jump to specific pieces of data in lists and grids * specific keyboard shortcuts to support efficiency * identify situations when it is necessary to provide additional keyboard shortcuts, for example when designing a custom functionality that is not keyboard supported by default -* define keyboard shortcuts that avoid conflicts with the operating system, browser, and assistive technologies when possible, and collaborate with developers to provide mechanisms to remap or disable conflicting shortcuts +* determine keyboard shortcuts that avoid conflicts with the operating system, browser, and assistive technologies when possible, and cooperate with developers to provide mechanisms to remap or disable conflicting shortcuts * define mechanisms to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications * provide focus indicators for complex widgets that are visible and have appropriate contrast ratios * describe related requirements for developers to implement keyboard support for actionable user interface components diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index be3c9083a..86367d475 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -53,9 +53,9 @@ Skills required for this module: {% include excol.html type="middle" %} * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) -* [Module 2: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design/) -* [Module 3: Navigation](/curricula/designer-modules/navigation/) -* [Module 4: Information Design](/curricula/designer-modules/information-design/) +* [Module 1: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design/) +* [Module 2: Navigation](/curricula/designer-modules/navigation/) +* [Module 3: Information Design](/curricula/designer-modules/information-design/) {% include excol.html type="end" %} diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 40001fff5..eb6a9457f 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -13,7 +13,7 @@ changelog: /curricula/changelog/ footer: >

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

-

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: previous: /curricula/designer-modules/flexible-layout-and-design/ next: /curricula/designer-modules/information-design/ @@ -25,7 +25,7 @@ navigation: Courses based on this module should: * explain strategies that people with disabilities use to navigate multi page websites and applications -* present behaviors, visual affordances, and interaction patterns of menus that relate to accessible design +* describe behaviors, visual affordances, and interaction patterns of menus that relate to accessible design ## Learning Outcomes for Module @@ -35,7 +35,7 @@ Students should be able to: * design user interfaces that support different types of navigation mechanisms, including menus, tables of contents, and site maps * define keyboard, mouse, and touch interactions for menus and other navigation mechanisms * provide clear and consistent visual cues for menus, menu item states, and other navigation mechanisms -* define blocks of repeated content and collaborate with developers to implement mechanisms that bypass such blocks +* identify blocks of repeated content and cooperate with developers to implement mechanisms that bypass such blocks * provide mechanisms for users to locate a specific web page within a set of web pages, such as breadcrumb trails and page titles * identify related requirements for developers to: * implement keyboard, mouse, and touch interactions for navigation mechanisms @@ -54,7 +54,7 @@ Skills required for this module: {% include excol.html type="middle" %} * [Prerequisites for Students](/curricula/designer-modules/#prerequisites-for-students) -* [Module 2: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design/) from [Designer Modules](/curricula/designer-modules/) +* [Module 1: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design/) from [Designer Modules](/curricula/designer-modules/) {% include excol.html type="end" %} @@ -100,21 +100,21 @@ Explain styling conventions for menus, such as location, appropriate size, and a Students should be able to: -* identify and describe uses of different types of menus, for example to navigate across web pages, to select categories from a crowded web page, and to navigate across applications +* identify and describe uses of different types of menus, such as navigation, fly-out, application menus, and dialogs * provide visual cues to distinguish menus from other components, and provide consistent styling for menu identification across a set of web pages * define mouse, keyboard, and touch interactions inside menus -* design user interfaces that support appropriate sizing of menus and menu items to fit all text in different viewports and screen configurations -* design user interfaces that communicate the state of menu items using distinguishable and consistent styles +* design user interfaces that support appropriate resizing of menus and menu items to fit all text in different viewports and screen configurations +* design user interfaces that communicate the state of menus and menu items, for example in fly-out menus, using distinguishable and consistent styles * identify related requirements for developers to implement semantics for different menu states and properties, such as hover, focus, current, active, and visited #### Teaching Ideas Optional ideas to teach the learning outcomes: -* Explain conventions for accessible menus, such as clear and consistent styling to convey menu behaviors and states. Introduce patterns for mouse, keyboard, and touch interaction with menus. -* Demonstrate menu interaction using different input devices, such as keyboard, mouse, and touch. For example, activating a menu option by tapping, pressing the Enter key, and mouse clicking. Explain that defining the interactions is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. -* Show examples of menu and menu items that contain large texts. Explain that, when used in smaller viewports and with different screen configurations, these texts may need to wrap so that they are perceived in their entirety. Explain that different languages may have different word sizes, so designers need to consider provisions for different word lengths. -* Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Emphasize that the states of these menu items need to be communicated using visual cues as well as semantics. Explain that providing the visual cues is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. +* Present different types of menus, such as navigation, fly-out, application menus, and dioalogs. Explain conventions for accessible menus, such as clear and consistent styling to convey menu behaviors and states. Introduce patterns for mouse, keyboard, and touch interaction with menus. +* Demonstrate menu interaction using different input devices, such as keyboard, mouse, and touch. For example, activating a menu option by tapping, pressing the Enter key, and mouse clicking. Explain that defining the interactions is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. +* Show examples of navigation, fly-out, and application menu together with their menu items containing contain large texts. Explain that, when used in smaller viewports and with different screen configurations, these texts need to wrap so that they are perceived in their entirety. Explain that different languages may have different word sizes, so designers need to consider provisions for different word lengths. +* Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Emphasize that the states of these menu items need to be communicated using visual cues as well as semantics. Explain that providing the visual cues is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. #### Ideas to Assess Knowledge for Topic @@ -122,6 +122,7 @@ Optional ideas to assess knowledge: * Practical — Students define mouse, keyboard, and touch interactions for menus. for example, how to open, navigate, activate, and close such menus using the mouse, keyboard, and touch. Assess how students understand the need for different interaction patterns based on the input method in use. * Practical — Present students with different menu states, such as hover, focus, current, active, and visited, and ask them to provide visual cues to distinguish them from one another. Assess how students communicate visually the state of menus and menu items. +* Practical — Present students with menus containing long strings of text and ask them to ensure the text is shown irrespective of the viewport and screen configuration used. Assess how students understand the diversity among different viewports and screen configurations that people with disabilities use. {% include excol.html type="end" %} @@ -161,7 +162,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Students define the blocks of repeated content in a website and collaborate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they provide a mechanism to bypass them. +* Practical — Students define the blocks of repeated content in a website and cooperate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they provide a mechanism to bypass them. * Practical — Present students with an interface and ask them to provide multiple ways to navigate across the website. Assess how students provide multiple navigation mechanisms where appropriate, such as search functionalities, breadcrumb trails, site maps, and tables of contents. {% include excol.html type="end" %} @@ -183,13 +184,13 @@ Students should be able to: * breadcrumb trails * visual cues to indicate the current page * design mechanisms to make location information visually distinct -* identify related requirements for developers to programmatically indicate the current page +* identify related requirements for developers to code location mechanisms ### Teaching Ideas Optional ideas to teach the learning outcomes: -* Show examples of breadcrumb trails. Explain that they provide information about the user's location in the context of a set of websites. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail +* Show examples of breadcrumb trails. Explain that they provide information about the users location in the context of a set of websites. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail * Invite students to give examples of page titles they are familiar with and reflect with them on how well the titles describe the page contents. Explain that page titles are useful to locate a specific web page within a set of web pages. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page, as some mobile browsers and assistive technologies do not show the information on the title. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). #### Ideas to Assess Knowledge @@ -214,6 +215,6 @@ Optional ideas to assess knowledge: Suggested resources to support your teaching: * [Menus (WAI Web Accessibility Tutorials)](https://www.w3.org/WAI/tutorials/menus/) — Shows how to design navigational mechanisms that are accessible to people with disabilities. -* [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. +* [[How People with Disabilities Use the Web]](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. * [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. From 05d61f5ba6c9b8b2c8f59d61f26cf528cbaaf15a Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 28 Jun 2021 16:01:55 +0200 Subject: [PATCH 163/416] Fixing markup --- content/designer/interaction-and-feedback.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index bccce267f..ae39909cb 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -86,7 +86,7 @@ Skills required for this module: * [WCAG Success Criterion 2.1.2 No Keyboard Trap](https://www.w3.org/WAI/WCAG21/quickref/#no-keyboard-trap) * [WCAG Success Criterion 2.2.1 Timing Adjustable](https://www.w3.org/WAI/WCAG21/quickref/#timing-adjustable) * [WCAG Success Criterion 2.2.5 Re-Authenticating](https://www.w3.org/WAI/WCAG21/quickref/#re-authenticating) - * [WCAG Success Criterion 2.2.6 Timeouts(https://www.w3.org/WAI/WCAG21/quickref/#timeouts) + * [WCAG Success Criterion 2.2.6 Timeouts](https://www.w3.org/WAI/WCAG21/quickref/#timeouts) * [WCAG Success Criterion 2.4.3 Focus Order](https://www.w3.org/WAI/WCAG21/quickref/#focus-order) * [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) * [WCAG Success Criterion 2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG21/quickref/#focus-visible) From 6d6f98adb83c46d448af85d6b18e6420b730ac85 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 28 Jun 2021 16:04:10 +0200 Subject: [PATCH 164/416] Adding 'status messages' --- content/designer/interaction-and-feedback.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index ae39909cb..53e911398 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -93,6 +93,7 @@ Skills required for this module: * [WCAG Success Criterion 3.3.1 Error Identification](https://www.w3.org/WAI/WCAG21/quickref/#error-identification) * [WCAG Success Criterion 3.3.3 Error Suggestion](https://www.w3.org/WAI/WCAG21/quickref/#error-suggestion) * [WCAG Success Criterion 3.3.4 Error Prevention](https://www.w3.org/WAI/WCAG21/quickref/#error-prevention-legal-financial-data) + * [WCAG Success Criterion 4.1.3 Status MEssages](https://www.w3.org/WAI/WCAG21/quickref/#status-messages) * In-depth knowledge of: * [Prerequisites for students](/curricula/designer-modules/#prerequisites-for-students) * Visual Design From 0ac3339e203edc79b3f696f15a2b832bd19b1575 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 28 Jun 2021 16:07:32 +0200 Subject: [PATCH 165/416] Fix typo --- content/designer/interaction-and-feedback.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 53e911398..69bf264a0 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -93,7 +93,7 @@ Skills required for this module: * [WCAG Success Criterion 3.3.1 Error Identification](https://www.w3.org/WAI/WCAG21/quickref/#error-identification) * [WCAG Success Criterion 3.3.3 Error Suggestion](https://www.w3.org/WAI/WCAG21/quickref/#error-suggestion) * [WCAG Success Criterion 3.3.4 Error Prevention](https://www.w3.org/WAI/WCAG21/quickref/#error-prevention-legal-financial-data) - * [WCAG Success Criterion 4.1.3 Status MEssages](https://www.w3.org/WAI/WCAG21/quickref/#status-messages) + * [WCAG Success Criterion 4.1.3 Status Messages](https://www.w3.org/WAI/WCAG21/quickref/#status-messages) * In-depth knowledge of: * [Prerequisites for students](/curricula/designer-modules/#prerequisites-for-students) * Visual Design From 9c47f596bd283074ca315377f27faae461a5f32d Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 28 Jun 2021 16:09:36 +0200 Subject: [PATCH 166/416] Changing topic name --- content/designer/interaction-and-feedback.md | 70 ++++++++++---------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 69bf264a0..277533dea 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -152,85 +152,85 @@ Optional ideas to assess knowledge: {% include excol.html type="start" %} -### Topic: Labels and Instructions +### Topic: Gestures and Motion {% include excol.html type="middle" %} -Show examples of labels and instructions for actionable user interface components. Explain that they are essential for people relying on assistive technologies and for people with cognitive disabilities to understand the purpose and intent of these components. +Show examples of user interfaces that react to motion, such as shaking the device to perform a specific action. Explain that some people may perform these motion-based gestures inadvertently, some others may not be able to perform them at all. Discuss some alternatives to motion-based gestures. -#### Learning outcomes for Topic +Discuss some gestures that require dragging and drawing specific paths on a touch screen. Explain that these are difficult (and sometimes impossible) to perform for some people with mobility impairments. + +#### Learning Outcomes for Topic Students should be able to: -* provide clear and consistent names to help users understand the purpose of actionable user interface components -* design user interfaces that allow to position labels where users expect them -* provide instructions about which input fields are required by: - * including information about each of the required form fields before the form control - * including textual and visual cues in the label of each of the required form fields that indicate that they are required -* provide clear instructions about changes in context before the control that originates such changes -* provide overall instructions about existing time limits in a form and about how they can be adjusted, extended, and turned off -* provide clear instructions about the current step and about the total number of steps involved in a multi-step form -* identify related requirements for developers to code labels and instructions appropriately +* design user interfaces that support alternatives to device or user motion such as shaking by using user interface components that do not require motion +* design user interfaces that support disabling response to motion to prevent accidental actuation, such as undoing an action by shaking a device +* design user interfaces that support alternatives to multi-pointer gestures (such as swipe or pinch) using single pointer activation +* design user interfaces that support undoing or aborting an action carried out with path-based operations #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of different actionable components (such as buttons, links, lists, and grids) across rich applications or complex widgets. Emphasize that each should have a clear name that allows to identify its purpose. For reference on how to provide names for different user interface components, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). -* Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. -* Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several mechanisms, including textual and visual cues. -* Present examples of time limits, such as those warning about session expirations. Explain that instructions need to be provided so that users are aware of the time limits, and mechanisms need to be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designers' responsibility, whereas implementing mechanisms to stop, extend, or adjust time limits is a responsibility shared with the developer. -* Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. For reference on how to provide instructions for multi-step forms, see @@@ +* Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments cannot perform such gestures, so user interfaces need to have alternatives that do not require motion for these gestures. +* Show examples of gestures such as swipe or ping. Explain that users with mobility impairments cannot perform such gestures, so user interfaces need to have alternatives that do not require swiping or pinching to perform an action. +* Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events, so user interfaces need to support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Present students with a form and ask them to define labels for each of the fields. Assess how students provide clear and descriptive names for each of the form fields. -* Practical — Give students an application and ask them to provide names for each of the application subsections. Assess how students identify application subsections and provide clear and understandable names for each. -* Practical — Give students a form and ask them to provide the necessary instructions for users to understand each of the fields and fill in the form. Assess how students provide clear and concise instructions. +* Practical — Give students an interface that uses a motion-based gesture to perform an action and ask them to provide alternatives to that gesture. Assess how students provide alternatives to motion-based gestures. +* Practical — Give students an interface that uses a multi path-based gesture to perform an action and ask them to provide alternatives to that gesture. Assess how students provide alternatives to multi-pointer and path-based gestures. {% include excol.html type="end" %} {% include excol.html type="start" %} -### Topic: Gestures and Motion +### Topic: Labels and Instructions {% include excol.html type="middle" %} -Show examples of user interfaces that react to motion, such as shaking the device to perform a specific action. Explain that some people may perform these motion-based gestures inadvertently, some others may not be able to perform them at all. Discuss some alternatives to motion-based gestures. - -Discuss some gestures that require dragging and drawing specific paths on a touch screen. Explain that these are difficult (and sometimes impossible) to perform for some people with mobility impairments. +Show examples of labels and instructions for actionable user interface components. Explain that they are essential for people relying on assistive technologies and for people with cognitive disabilities to understand the purpose and intent of these components. -#### Learning Outcomes for Topic +#### Learning outcomes for Topic Students should be able to: -* design user interfaces that support alternatives to device or user motion such as shaking by using user interface components that do not require motion -* design user interfaces that support disabling response to motion to prevent accidental actuation, such as undoing an action by shaking a device -* design user interfaces that support alternatives to multi-pointer gestures (such as swipe or pinch) using single pointer activation -* design user interfaces that support undoing or aborting an action carried out with path-based operations +* provide clear and consistent names to help users understand the purpose of actionable user interface components +* design user interfaces that allow to position labels where users expect them +* provide instructions about which input fields are required by: + * including information about each of the required form fields before the form control + * including textual and visual cues in the label of each of the required form fields that indicate that they are required +* provide clear instructions about changes in context before the control that originates such changes +* provide overall instructions about existing time limits in a form and about how they can be adjusted, extended, and turned off +* provide clear instructions about the current step and about the total number of steps involved in a multi-step form +* identify related requirements for developers to code labels and instructions appropriately #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments cannot perform such gestures, so user interfaces need to have alternatives that do not require motion for these gestures. -* Show examples of gestures such as swipe or ping. Explain that users with mobility impairments cannot perform such gestures, so user interfaces need to have alternatives that do not require swiping or pinching to perform an action. -* Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events, so user interfaces need to support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. +* Show examples of different actionable components (such as buttons, links, lists, and grids) across rich applications or complex widgets. Emphasize that each should have a clear name that allows to identify its purpose. For reference on how to provide names for different user interface components, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). +* Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. +* Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several mechanisms, including textual and visual cues. +* Present examples of time limits, such as those warning about session expirations. Explain that instructions need to be provided so that users are aware of the time limits, and mechanisms need to be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designers' responsibility, whereas implementing mechanisms to stop, extend, or adjust time limits is a responsibility shared with the developer. +* Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. For reference on how to provide instructions for multi-step forms, see @@@ #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Give students an interface that uses a motion-based gesture to perform an action and ask them to provide alternatives to that gesture. Assess how students provide alternatives to motion-based gestures. -* Practical — Give students an interface that uses a multi path-based gesture to perform an action and ask them to provide alternatives to that gesture. Assess how students provide alternatives to multi-pointer and path-based gestures. +* Practical — Present students with a form and ask them to define labels for each of the fields. Assess how students provide clear and descriptive names for each of the form fields. +* Practical — Give students an application and ask them to provide names for each of the application subsections. Assess how students identify application subsections and provide clear and understandable names for each. +* Practical — Give students a form and ask them to provide the necessary instructions for users to understand each of the fields and fill in the form. Assess how students provide clear and concise instructions. {% include excol.html type="end" %} {% include excol.html type="start" %} -### Topic: Notifications and Feedback +### Topic: Errors and Notifications {% include excol.html type="middle" %} From 941df2cf13c2484a7a3b00711743f4589403f979 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 28 Jun 2021 17:13:30 +0200 Subject: [PATCH 167/416] updates to modules --- content/designer/interaction-and-feedback.md | 10 ++-- content/designer/multimedia-and-animations.md | 46 +++++++++---------- 2 files changed, 27 insertions(+), 29 deletions(-) diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 277533dea..0e8805042 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -113,7 +113,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Discuss standard keyboard interactions, such as the use of the tab, enter, escape, and arrow keys. Explain that providing custom keyboard interactions can favor efficiency, but can also disrupt the users' expectations, thus these interactions need to be well documented and be consistent throughout the interface. +Discuss standard keyboard interactions, such as the use of the tab, enter, escape, and arrow keys. Explain that providing custom keyboard interactions can favor efficiency, but can also disrupt the users' expectations, thus designers need to document these interactions and make them consistent throughout the interface. Emphasize that defining the keyboard interactions is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. #### Learning Outcomes for Topic @@ -122,15 +122,15 @@ Students should be able to: * design user interfaces that support keyboard navigation through and inside custom components, for example: * using the tab key to move through different components - * using the Enter key to enter a specific component and to select a specific item on a component + * using the enter key to enter a specific component and to select a specific item on a component * using the arrow keys to move through list items and grid cells * using the escape key to exit components - * first letter navigation to jump to specific pieces of data in lists and grids + * using first letter navigation to jump to specific pieces of data in lists and grids * specific keyboard shortcuts to support efficiency * identify situations when it is necessary to provide additional keyboard shortcuts, for example when designing a custom functionality that is not keyboard supported by default -* determine keyboard shortcuts that avoid conflicts with the operating system, browser, and assistive technologies when possible, and cooperate with developers to provide mechanisms to remap or disable conflicting shortcuts +* apply keyboard shortcuts that avoid conflicts with the operating system, browser, and assistive technologies when possible, and cooperate with developers to provide mechanisms to remap or disable conflicting shortcuts * define mechanisms to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications -* provide focus indicators for complex widgets that are visible and have appropriate contrast ratios +* provide focus indicators for complex widgets that are visible and that have appropriate contrast ratios * describe related requirements for developers to implement keyboard support for actionable user interface components #### Teaching Ideas for Topic diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 86367d475..18a73c644 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -34,7 +34,7 @@ Students should be able to: * identify accessibility requirements for different types of audio and video content * design user interfaces that consider placement and spacing for alternatives to multimedia content, such as transcripts, audio descriptions, captions, and sign language * design user interfaces that support enabling and disabling transcripts, audio descriptions, captions, and sign language -* design user interfaces with multimedia player controls that have clear and descriptive names, that are easy to find, and that do not disappear when the media starts to play +* design user interfaces with multimedia player controls that have clear and descriptive names, that are easy to find, and that do not disappear when the media starts playing * design user interfaces with mechanisms to pause, stop, and hide any moving, blinking, and auto-updating content, including animations and carousels * design user interfaces with mechanisms to stop or control the volume of auto-playing audio * identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding media content and to include accessibility support for multimedia players @@ -95,7 +95,9 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Text transcripts provide an alternative to visual and audio information. Audio descriptions are essential for people who cannot see the visuals. Captions are essential for people who cannot hear the audio. Discuss the need for mechanisms to enable or disable alternatives to multimedia content depending on user needs. Explain that these mechanisms need to be always reachable for users, that they need to have clear names, and that they should not disappear when the media starts playing. Explain that defining such mechanisms is a designer's responsibility, whereas providing the alternatives is a responsibility shared with the content author. +Text transcripts provide an alternative to visual and audio information. Audio descriptions are essential for people who cannot see the visuals. Captions are essential for people who cannot hear the audio. + +Discuss the need for mechanisms to enable or disable alternatives to multimedia content depending on user needs. Explain that these mechanisms need to be always reachable for users, that they need to have clear names, and that they should not disappear when the media starts playing. Explain that defining such mechanisms is a designer's responsibility, whereas providing the alternatives is a responsibility shared with the content author. #### Learning Outcomes for Topic @@ -107,19 +109,18 @@ Students should be able to * have descriptive names * can be operable by keyboard * are easy to find - * re always reachable + * are always reachable * do not disappear when the media starts playing -* design user interfaces with player controls that are always reachable and that do not disappear when the multimedia content starts to play #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of text transcripts. Explain that they provide alternative for people who cannot hear the audio information and for people who cannot see the visual information. Explain that allocating the necessary space for the transcripts is a designer's responsibility, whereas providing such transcripts is a responsibility shared with the content author. -* Show examples of captions. Explain that these are needed for people who cannot hear the audio, and that they are useful in other situations. Explain that identifying the situations where captions are needed is a designer's responsibility, whereas providing such captions is a responsibility shared with the content author. -* Show examples of audio described content. Explain that audio descriptions are needed for people who cannot see the video. Explain that defining the mechanisms to enable and disable audio described content is a designer's responsibility, whereas providing the audio description is a responsibility shared with the content author. -* Show examples of sign language. Explain that people who are deaf and who do not understand written language well. Explain that defining the mechanisms to enable and disable sign language is a designer's responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. -* Show examples of accessible media players. Explain how the controls have appropriate contrast ratios, are operable by keyboard, and are easy to find. Emphasize that the controls need to remain available even when the media is playing. +* Show examples of text transcripts. Explain that they provide alternative for people who cannot hear the audio information and for people who cannot see the visual information. Explain that allocating the necessary space for the transcripts is a designers' responsibility, whereas providing such transcripts is a responsibility shared with the content author. +* Show examples of captions. Explain that these are needed for people who cannot hear the audio, and that they are useful in other situations. Explain that identifying the situations where captions are needed is a designers' responsibility, whereas providing such captions is a responsibility shared with the content author. +* Show examples of audio described content. Explain that audio descriptions are needed for people who cannot see the video. Explain that defining the mechanisms to enable and disable audio described content is a designers' responsibility, whereas providing the audio description is a responsibility shared with the content author. +* Show examples of sign language. Explain that sign language is essential for people who are deaf and who do not understand written language well. Explain that defining the mechanisms to enable and disable sign language is a designers' responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. +* Show examples of accessible media players. Emphasize how the controls have appropriate contrast ratios, are operable by keyboard, and are easy to find. Emphasize that the controls need to remain available even when the media is playing. #### Ideas to Assess Knowledge for Topic @@ -135,7 +136,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Show examples of different types of animations. Explain that animations can cause seizures or physical reactions for some people, so additional requirements when designing animations should be considered. +Show examples of different types of animations. Explain that animations can cause seizures and physical reactions for some people, so designers need to consider additional requirements when designing animations. #### Learning Outcomes for Topic @@ -151,16 +152,16 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of contents that move or blink, such as animations and carousels. Explain that these can cause problems for some users that cannot keep up with the pace of the auto-updating content. Emphasize that, in addition, these animations can cause seizures and physical reactions. For references on how to design user interfaces that allow to pause, stop, and hide moving, blinking, or auto-updating content, see the following techniques: - * [G4: Allowing the content to be paused and restarted from where it was paused](https://www.w3.org/WAI/WCAG21/Techniques/general/G4) - * [G11: Creating content that blinks for less than 5 seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G11) - * [G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)](https://www.w3.org/WAI/WCAG21/Techniques/general/G152) - * [G186: Using a control in the Web page that stops moving, blinking, or auto-updating content](https://www.w3.org/WAI/WCAG21/Techniques/general/G186) - * [G187: Using a technology to include blinking content that can be turned off via the user agent](https://www.w3.org/WAI/WCAG21/Techniques/general/G187) -* Show examples of flashing content and explain that they can cause seizures or physical reactions for some people. Emphasize that all components of the content need to be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole web page or application. For references on how to design interfaces that support flashing below the general flash and red flash thresholds or that support flashing below 3 seconds, see techniques [G19: Ensuring that no component of the content flashes more than three times in any 1-second period](https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html) and [G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold](https://www.w3.org/WAI/WCAG21/Techniques/general/G15.html). -* Show examples of interactions triggered by animations, such as additional movements when scrolling. Explain that these animations can cause distraction and vestibular disorders (such as dizziness, nausea, and headaches) for some people. Discuss the use of preference and technology specific properties to reduce or disable such animations. -* Demonstrate the use of a screen reader to navigate an application that plays audio automatically for more than 3 seconds, such as a video player with audio that is longer than 3 seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a mechanism to pause or control the volume of that audio. Explain that the operating system often provides such mechanism. For references on how to design interfaces that support mechanisms to pause or control the volume of any audio that plays automatically, see the following techniques: - * [G60: Playing a sound that turns off automatically within three seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G60.html) - * [G170: Providing a control near the beginning of the Web page that turns off sounds that play automatically](https://www.w3.org/WAI/WCAG21/Techniques/general/G170.html) + * [G4: Allowing the content to be paused and restarted from where it was paused](https://www.w3.org/WAI/WCAG21/Techniques/general/G4), + * [G11: Creating content that blinks for less than 5 seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G11), + * [G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)](https://www.w3.org/WAI/WCAG21/Techniques/general/G152), + * [G186: Using a control in the Web page that stops moving, blinking, or auto-updating content](https://www.w3.org/WAI/WCAG21/Techniques/general/G186), and + * [G187: Using a technology to include blinking content that can be turned off via the user agent](https://www.w3.org/WAI/WCAG21/Techniques/general/G187). +* Show examples of flashing content and explain that they can cause seizures and physical reactions for some people. Emphasize that all components of the content need to be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole web page or application. For references on how to design interfaces that support flashing below the general flash and red flash thresholds or that support flashing below 3 seconds, see techniques [G19: Ensuring that no component of the content flashes more than three times in any 1-second period](https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html) and [G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold](https://www.w3.org/WAI/WCAG21/Techniques/general/G15.html). +* Show examples of interactions triggered by animations, such as additional movements when scrolling. Explain that these animations can cause distraction and vestibular disorders (such as dizziness, nausea, and headaches) for some people. Discuss the use of preferences as well as technology specific properties to reduce or disable such animations. +* Demonstrate the use of a screen reader to navigate an application that plays audio automatically for more than 3 seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a mechanism to pause or control the volume of that audio. Explain that the operating system often provides such mechanism. For references on how to design interfaces that support mechanisms to pause or control the volume of any audio that plays automatically, see the following techniques: + * [G60: Playing a sound that turns off automatically within three seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G60.html), + * [G170: Providing a control near the beginning of the Web page that turns off sounds that play automatically](https://www.w3.org/WAI/WCAG21/Techniques/general/G170.html), and * [G171: Playing sounds only on user request](https://www.w3.org/WAI/WCAG21/Techniques/general/G171.html). #### Ideas to Assess Knowledge for Topic @@ -168,9 +169,6 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Present students with instances of flashing content and ask them to determine if they are below the general flash and red flash thresholds. Assess how students understand accessibility requirements for flashing content. -* Practical — Present students with a user interface containing animations and ask them to make them accessible. Assess how students define mechanisms to reduce or disable the animations. - -[To be developed]. {% include excol.html type="end" %} @@ -180,8 +178,8 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Research — Students research an accessible media player and explain how different groups of people with disabilities use the player. Assess how students understand how people with disabilities interact with multimedia content and players. * Portfolio — Students include accessible video and audio contents on a website. Assess how students understand the accessibility requirements of video and audio content, including transcripts for audio, audio descriptions, and sign language. +* Practical — Present students with a user interface containing animations and ask them to make them accessible. Assess how students define mechanisms to reduce or disable the animations. ## Teaching Resources From 2a18ecc10d8056713aed2fea921e2ce002f92eaf Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 29 Jun 2021 08:08:50 +0200 Subject: [PATCH 168/416] Updating module 1 --- content/designer/flexible-layout-and-design.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/designer/flexible-layout-and-design.md b/content/designer/flexible-layout-and-design.md index 367e5ae3c..0c0c64a95 100644 --- a/content/designer/flexible-layout-and-design.md +++ b/content/designer/flexible-layout-and-design.md @@ -30,13 +30,13 @@ navigation: Courses based on this module should: * explain how people with disabilities use different screen sizes, screen configurations, breakpoints, and style sheets to identify, distinguish, and process contents -* explain accessibility requirements for user interface components that relate to color, layout, spacing, position, and flexibility +* explain accessibility requirements for user interface components that relate to color, layout, spacing, and position ## Learning Outcomes for Module Students should be able to: -* explain how people with disabilities identify and distinguish user interface components based on different features, such as color, layout, spacing, position, and flexibility +* explain how people with disabilities identify and distinguish user interface components based on different features, such as color, layout, spacing, and position * design user interfaces with headings, landmarks, text cues, patterns, and icons to supplement information conveyed through color alone * design user interfaces with adjustable font sizes and adequate spacing to support readability * design user interfaces with appropriate contrast ratios for text, images of text, and controls @@ -124,7 +124,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -ew* Practical — Students design a paper prototype with distinguishable styles that help perceive different contents. Assess how students use different style properties such as font sizes and spacing to make content perceivable and to distinguish components from one another. +* Practical — Students design a prototype with distinguishable styles that help perceive different contents. Assess how students use different style properties such as font sizes and spacing to make content perceivable and to distinguish components from one another. {% include excol.html type="end" %} @@ -134,7 +134,7 @@ ew* Practical — Students design a paper prototype with distinguishable sty {% include excol.html type="middle" %} -Discuss strategies to provide mechanisms for users to perceive different web page regions. Present different strategies to supplement various content types through the use of visual and textual cues. +Discuss strategies to provide mechanisms for users to perceive different web page regions. Present different strategies to supplement various content types using visual and textual cues. #### Learning Outcomes for Topic @@ -142,7 +142,7 @@ Students should be able to: * define page regions by using appropriate visual and programmatic landmarks * design user interfaces with text cues to convey information provided through vision only, for example to convey required form fields -* design user interfaces with focus indicators that enable people to tell where they are as they move through the web page and applications using the keyboard +* design user interfaces with focus indicators that enable people to tell where they are as they move through web pages and applications using the keyboard #### Teaching Ideas for Topic @@ -194,7 +194,7 @@ Optional ideas to assess knowledge: * Short Answer Questions — Give students a set of user interface components and ask them what the contrast ratio should be. Assess how students understand and distinguish contrast ratios for different user interface components. * Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components, and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing. -* Practical — Give students information presented using color alone and ask them to design mechanisms to convey such information. Assess how students use different shapes and icons to make information presented using color alone distinguishable. +* Practical — Give students information presented using color alone and ask them to provide alternatives to convey such information. Assess how students use shapes and icons to make information presented using color alone distinguishable. {% include excol.html type="end" %} @@ -241,7 +241,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Portfolio — Students design a prototype of a web page. Assess how students use color, layout, spacing, and position to support content perception and identification. +* Portfolio — Students design a web page. Assess how students use color, layout, spacing, and position to support content perception and identification. ## Teaching Resources From f522dd7e6525ff6f0b2ec2fd6333a604ac048d0e Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 29 Jun 2021 16:56:48 +0200 Subject: [PATCH 169/416] Fixing typo --- content/designer/interaction-and-feedback.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 0e8805042..5eb486beb 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -39,7 +39,7 @@ Students should be able to: * provide methods to help understand the context, information, and functionality of user interface components, including through textual instructions, color, and other visual cues * provide meaningful and descriptive notifications about imminent time limits, steps, errors, suggestions for correction, success messages, status changes, and feedback from user input * identify related requirements for developers to programmatically associate properties of actionable user interface components, such as names, states, and instructions, to their corresponding component -* identify related requirements for developers to write code for custom keyboard interactions that actionable components may require +* identify related requirements for developers to write code for custom keyboard interactions that actionable user interface components may require {% include excol.html type="all" %} @@ -245,7 +245,7 @@ Students should be able to: * design user interfaces with notifications that are easy to understand and that can be distinguished from any other user interface component * provide error messages in the page title or before the form control that identify the fields in error and that describe the cause of the error * provide meaningful suggestions for correction when such suggestions do not compromise the security or purpose of the content -* provide meaningful messages when a task has been completed successfully, for example when a form has been submitted ow when a document has been saved +* provide meaningful messages when a task has been completed successfully, for example when a form has been submitted or when a document has been saved * design user interfaces that support notification storage to allow notifications checking at the users' pace * design user interfaces that support mechanisms to queue and prioritize application notifications coming from different actionable user interface components * describe related requirements for developers to code notification messages appropriately From dad12ffa3e09962f1ef6ce50fbc07a1c1a05edf0 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 30 Jun 2021 11:31:02 +0200 Subject: [PATCH 170/416] Clarifying scope for navigation menus --- content/designer/navigation.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/designer/navigation.md b/content/designer/navigation.md index eb6a9457f..d3b33b4cd 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -24,8 +24,8 @@ navigation: Courses based on this module should: -* explain strategies that people with disabilities use to navigate multi page websites and applications -* describe behaviors, visual affordances, and interaction patterns of menus that relate to accessible design +* explain strategies that people with disabilities use to navigate multi multipage websites and applications +* describe behaviors, visual affordances, and interaction patterns of navigation menus, including static navigation menus, fly-out menus, and mega menus, that relate to accessible design ## Learning Outcomes for Module @@ -92,7 +92,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Show examples of different types of menus, such as navigational, fly-out, and application menus. Explain the different scenarios where each of them can be used. For references on the different types of menus and their uses, see the WAI tutorials on [Menus](https://www.w3.org/WAI/tutorials/menus/). +Show examples of different types of navigation menus, such as static, fly-out, and mega menus. Explain the different scenarios where each of them can be used. For references on the different types of menus and their uses, see the WAI tutorials on [Menus](https://www.w3.org/WAI/tutorials/menus/). Explain styling conventions for menus, such as location, appropriate size, and ability for menus and menu items to resize depending on different user configurations. For references on how to apply accessible menu styles, see the WAI tutorial on [Menu Styling](https://www.w3.org/WAI/tutorials/menus/styling/). @@ -100,7 +100,7 @@ Explain styling conventions for menus, such as location, appropriate size, and a Students should be able to: -* identify and describe uses of different types of menus, such as navigation, fly-out, application menus, and dialogs +* identify and describe uses of different types of navigation menus, such as static, fly-out, and mega menus * provide visual cues to distinguish menus from other components, and provide consistent styling for menu identification across a set of web pages * define mouse, keyboard, and touch interactions inside menus * design user interfaces that support appropriate resizing of menus and menu items to fit all text in different viewports and screen configurations From de9321bd8458d84fa5ae4c9410b5693f5f586449 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 30 Jun 2021 11:54:34 +0200 Subject: [PATCH 171/416] Updates to modulebased on TF discussion --- content/designer/interaction-and-feedback.md | 27 ++++++++++---------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 5eb486beb..62c700e83 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -24,22 +24,22 @@ navigation: Courses based on this module should: -* explain strategies that people with disabilities use to interact with actionable user interface components, such as form controls, buttons, links, and widgets +* explain strategies that people with disabilities use to interact with components that accept user input, such as form controls, buttons, links, and widgets * describe accessibility requirements related to keyboard interactions, input gestures, labels, instructions, notifications, and feedback ## Learning Outcomes for Module Students should be able to: -* explain strategies that people with disabilities use to interact with actionable user interface components +* explain strategies that people with disabilities use to interact with components that accept user input * design user interfaces that support different input mechanisms, including mouse, touch, and keyboard * define keyboard interactions and meaningful sequences inside complex widgets, including buttons, carousels, sliders, tabs, and treeviews * define mechanisms to obtain information about custom keyboard shortcuts for complex widgets and applications -* provide clear and distinguishable ways to identify actionable user interface components, including through naming and placement +* provide clear and distinguishable ways to identify components that accept user input, including through naming and placement * provide methods to help understand the context, information, and functionality of user interface components, including through textual instructions, color, and other visual cues * provide meaningful and descriptive notifications about imminent time limits, steps, errors, suggestions for correction, success messages, status changes, and feedback from user input -* identify related requirements for developers to programmatically associate properties of actionable user interface components, such as names, states, and instructions, to their corresponding component -* identify related requirements for developers to write code for custom keyboard interactions that actionable user interface components may require +* identify related requirements for developers to programmatically associate properties of components that accept user input, such as names, states, and instructions, to their corresponding component +* identify related requirements for developers to write code for custom keyboard interactions for components that accept user input {% include excol.html type="all" %} @@ -131,14 +131,14 @@ Students should be able to: * apply keyboard shortcuts that avoid conflicts with the operating system, browser, and assistive technologies when possible, and cooperate with developers to provide mechanisms to remap or disable conflicting shortcuts * define mechanisms to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications * provide focus indicators for complex widgets that are visible and that have appropriate contrast ratios -* describe related requirements for developers to implement keyboard support for actionable user interface components +* describe related requirements for developers to implement keyboard support for components that accept user input #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Invite students to try standard keyboard conventions. For example, use of the tab to move through actionable controls, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that these interactions need to be preserved as much as possible when designing custom widgets, as these are mostly expected by users. -* Reflect with students about keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain strategies that designers can define depending on the different team roles and responsibilities. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and working with developers to implement such keystrokes. +* Invite students to try standard keyboard conventions. For example, use of the tab to move through user interface components, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that these interactions need to be preserved as much as possible when designing custom widgets, as these are mostly expected by users. +* Reflect with students about keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers need to work closely with other team members, such as developers and user researchers, to define custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and working with developers to implement such keystrokes. * Present some examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. * Show examples of help functionality to explain custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using such shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these mechanisms is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. @@ -192,13 +192,13 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Show examples of labels and instructions for actionable user interface components. Explain that they are essential for people relying on assistive technologies and for people with cognitive disabilities to understand the purpose and intent of these components. +Show examples of labels and instructions for components that accept user input. Explain that they are essential for people relying on assistive technologies and for people with cognitive disabilities to understand the purpose and intent of these components. #### Learning outcomes for Topic Students should be able to: -* provide clear and consistent names to help users understand the purpose of actionable user interface components +* provide clear and consistent names to help users understand the purpose of components that accept user input * design user interfaces that allow to position labels where users expect them * provide instructions about which input fields are required by: * including information about each of the required form fields before the form control @@ -212,7 +212,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different actionable components (such as buttons, links, lists, and grids) across rich applications or complex widgets. Emphasize that each should have a clear name that allows to identify its purpose. For reference on how to provide names for different user interface components, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). +* Show examples of different components that accept user input (such as buttons, links, lists, and grids) across rich applications or complex widgets. Emphasize that each should have a clear name that allows to identify its purpose. For reference on how to provide names for different user interface components, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). * Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. * Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several mechanisms, including textual and visual cues. * Present examples of time limits, such as those warning about session expirations. Explain that instructions need to be provided so that users are aware of the time limits, and mechanisms need to be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designers' responsibility, whereas implementing mechanisms to stop, extend, or adjust time limits is a responsibility shared with the developer. @@ -246,8 +246,9 @@ Students should be able to: * provide error messages in the page title or before the form control that identify the fields in error and that describe the cause of the error * provide meaningful suggestions for correction when such suggestions do not compromise the security or purpose of the content * provide meaningful messages when a task has been completed successfully, for example when a form has been submitted or when a document has been saved -* design user interfaces that support notification storage to allow notifications checking at the users' pace -* design user interfaces that support mechanisms to queue and prioritize application notifications coming from different actionable user interface components +* provide meaningful and descriptive notification messages, for example validation messages as the user types +* design user interfaces that support storing notification messages that disappear after a period of time to allow notifications checking at the users' pace +* design user interfaces that support mechanisms to queue and prioritize application notifications coming from different components * describe related requirements for developers to code notification messages appropriately #### Teaching Ideas for Topic From 91c1be8664e336bacc680905544c5ab1a1a3752b Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 30 Jun 2021 12:34:40 +0200 Subject: [PATCH 172/416] Updating competencies --- content/designer/flexible-layout-and-design.md | 2 ++ content/designer/images-and-graphics.md | 8 +++++++- content/designer/information-design.md | 2 ++ content/designer/interaction-and-feedback.md | 3 +++ content/designer/multimedia-and-animations.md | 6 ++++++ content/designer/navigation.md | 7 +++++++ 6 files changed, 27 insertions(+), 1 deletion(-) diff --git a/content/designer/flexible-layout-and-design.md b/content/designer/flexible-layout-and-design.md index 0c0c64a95..cf63a9e2f 100644 --- a/content/designer/flexible-layout-and-design.md +++ b/content/designer/flexible-layout-and-design.md @@ -59,6 +59,7 @@ Skills required for this module: * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Basic knowledge of: * Visual Design + * Prototype Design * Responsive Design {% include excol.html type="end" %} @@ -88,6 +89,7 @@ Skills required for this module: * In-depth knowledge of: * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Visual Design + * Prototype Design * Responsive Design {% include excol.html type="end" %} diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index c50899c15..4cc9593f3 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -56,6 +56,11 @@ Skills required for this module: * [Module 1: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design/) * [Module 2: Navigation](/curricula/designer-modules/navigation/) * [Module 3: Information Design](/curricula/designer-modules/information-design/) +* Basic knowledge of: + * Visual Design + * Prototype Design + * Responsive Design + * Information Architecture {% include excol.html type="end" %} @@ -71,7 +76,8 @@ Skills required for this module: * [WCAG Success Criterion 1.4.9 Images of Text (No Exception)](https://www.w3.org/WAI/WCAG21/quickref/#images-of-text-no-exception) * In-depth knowledge of: * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) - * Visual Design + * Visual Design + * Prototype Design * Responsive Design * Information Architecture diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 1dd4fd1c3..2641aab1b 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -56,6 +56,7 @@ Skills required for this module: * [Module 2: Navigation](/curricula/designer-modules/navigation/) * Basic knowledge of: * Visual Design + * Prototype Design * Responsive Design * Information Architecture @@ -78,6 +79,7 @@ Skills required for this module: * In-depth knowledge of: * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Visual Design + * Prototype Design * Responsive Design * Information Architecture diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 62c700e83..9c570f1ec 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -57,6 +57,7 @@ Skills required for this module: * Prior [Designer Modules](/curricula/designer-modules/) * Knowledge of: * Visual Design + * Prototype Design * Responsive Design * Information Design * Interaction Design @@ -97,9 +98,11 @@ Skills required for this module: * In-depth knowledge of: * [Prerequisites for students](/curricula/designer-modules/#prerequisites-for-students) * Visual Design + * Prototype Design * Responsive Design * Information Design * Interaction Design +* Basic knowledge of coding techniques {% include excol.html type="end" %} diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 18a73c644..d326d191f 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -56,6 +56,11 @@ Skills required for this module: * [Module 1: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design/) * [Module 2: Navigation](/curricula/designer-modules/navigation/) * [Module 3: Information Design](/curricula/designer-modules/information-design/) +* Basic knowledge of: + * Visual Design + * Prototype Design + * Responsive Design + * Information Architecture {% include excol.html type="end" %} @@ -80,6 +85,7 @@ Skills required for this module: * In-depth knowledge of: * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Visual Design + * Prototype Design * Responsive Design * Information Architecture diff --git a/content/designer/navigation.md b/content/designer/navigation.md index d3b33b4cd..06d75dd62 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -55,6 +55,12 @@ Skills required for this module: * [Prerequisites for Students](/curricula/designer-modules/#prerequisites-for-students) * [Module 1: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design/) from [Designer Modules](/curricula/designer-modules/) +* Basic knowledge of: + * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) + * Visual Design + * Prototype Design + * Responsive Design + * Information Architecture {% include excol.html type="end" %} @@ -77,6 +83,7 @@ Skills required for this module: * In-depth knowledge of: * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Visual Design + * Prototype Design * Responsive Design * Information Architecture From b4569a53b2f263114f930dda77c223c96f169a37 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 30 Jun 2021 13:01:57 +0200 Subject: [PATCH 173/416] Updates to interaction and feedback --- content/designer/interaction-and-feedback.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 9c570f1ec..e2cdb9eb2 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -25,20 +25,20 @@ navigation: Courses based on this module should: * explain strategies that people with disabilities use to interact with components that accept user input, such as form controls, buttons, links, and widgets -* describe accessibility requirements related to keyboard interactions, input gestures, labels, instructions, notifications, and feedback +* describe accessibility requirements related to interactions, instructions, semantics, styling and other visual cues, notifications, and feedback ## Learning Outcomes for Module Students should be able to: * explain strategies that people with disabilities use to interact with components that accept user input -* design user interfaces that support different input mechanisms, including mouse, touch, and keyboard +* design user interfaces that support different input mechanisms, including mouse, touch, keyboard, and speech * define keyboard interactions and meaningful sequences inside complex widgets, including buttons, carousels, sliders, tabs, and treeviews * define mechanisms to obtain information about custom keyboard shortcuts for complex widgets and applications * provide clear and distinguishable ways to identify components that accept user input, including through naming and placement -* provide methods to help understand the context, information, and functionality of user interface components, including through textual instructions, color, and other visual cues +* provide mechanisms to help understand the context, information, and functionality of user interface components, including through textual instructions, color, and other visual cues * provide meaningful and descriptive notifications about imminent time limits, steps, errors, suggestions for correction, success messages, status changes, and feedback from user input -* identify related requirements for developers to programmatically associate properties of components that accept user input, such as names, states, and instructions, to their corresponding component +* identify related requirements for developers to provide the necessary semantics for components that accept user input, error messages, and notifications * identify related requirements for developers to write code for custom keyboard interactions for components that accept user input {% include excol.html type="all" %} @@ -123,15 +123,15 @@ Emphasize that defining the keyboard interactions is a designers' responsibility Students should be able to: -* design user interfaces that support keyboard navigation through and inside custom components, for example: +* create designs that support keyboard navigation through and inside custom components, for example: * using the tab key to move through different components * using the enter key to enter a specific component and to select a specific item on a component - * using the arrow keys to move through list items and grid cells + * using the arrow keys to move through elements inside components, such as application menus, dialogs, list items and grid cells * using the escape key to exit components * using first letter navigation to jump to specific pieces of data in lists and grids * specific keyboard shortcuts to support efficiency * identify situations when it is necessary to provide additional keyboard shortcuts, for example when designing a custom functionality that is not keyboard supported by default -* apply keyboard shortcuts that avoid conflicts with the operating system, browser, and assistive technologies when possible, and cooperate with developers to provide mechanisms to remap or disable conflicting shortcuts +* create designs that avoid keyboard shortcut conflicts with the operating system, browser, and assistive technologies when possible, and cooperate with developers to provide mechanisms to remap or disable conflicting shortcuts * define mechanisms to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications * provide focus indicators for complex widgets that are visible and that have appropriate contrast ratios * describe related requirements for developers to implement keyboard support for components that accept user input From 72f2e9bda4a97620b52f84250abc0941ed1a7f33 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 30 Jun 2021 16:50:22 +0200 Subject: [PATCH 174/416] Adding assessment ideas --- content/designer/interaction-and-feedback.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index e2cdb9eb2..96280ee6a 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -149,7 +149,9 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: +* Short Answer Questions — Students research about commonly used modifier keys of operating systems and assistive technologies. Assess how students understand the use of modifier keys in operating systems and assistive technologies. * Practical — Present students with a user interface that can be interacted only with the mouse and ask them to define keyboard interaction patterns. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. +* Practical — Students work with developers to avoid custom keyboard shortcut conflicts with existing operating system and assistive technology keystrokes. Assess how students develop strategies to work with other team members to avoid custom keyboard shortcut conflicts. {% include excol.html type="end" %} From 7246e3acf18e0a70168dd6ab5c5b1b2ed0090d29 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 1 Jul 2021 09:00:23 +0200 Subject: [PATCH 175/416] Updates to modules --- content/designer/information-design.md | 4 ++-- content/designer/interaction-and-feedback.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 2641aab1b..4b11b0acc 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -120,8 +120,8 @@ Optional ideas to teach the learning outcomes: * Show examples of large amounts of text, for example in an eBook. Discuss several ways to divide the text both visually and programmatically so that it is easier to understand and to navigate. For example, by using headings and their corresponding rank levels together with pages and chapter markers to indicate the different chapters, sections, and subsections of content. * Show examples of diagrams and illustrations that can complement the information presented in text. For example, visual instructions that supplement the textual information of a user manual. Explain that they help users with reading disabilities understand difficult pieces of text. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). -* Show examples of words that may be difficult to understand or that are used in a restricted way. Explain that users with cognitive disabilities or those not familiar with such words need definitions to understand the meaning of such words. Explain that defining the mechanisms to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. -* Show examples of abbreviations, such as short forms of words and acronyms. Explain that users with cognitive disabilities and those not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the mechanisms to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. +* Show examples of words that may be difficult to understand or that are used in a restricted way. Explain that people who is not familiar with such words need definitions to understand their meaning. Explain that defining the mechanisms to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. +* Show examples of abbreviations, such as short forms of words and acronyms. Explain that people who is not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the mechanisms to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 96280ee6a..998b653c3 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -197,7 +197,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Show examples of labels and instructions for components that accept user input. Explain that they are essential for people relying on assistive technologies and for people with cognitive disabilities to understand the purpose and intent of these components. +Show examples of labels and instructions for components that accept user input. Explain that they are essential for several groups of people with disabilities to understand the purpose and intent of these components. #### Learning outcomes for Topic From d768da1a71ffb02f834c9e62e76bf659171541bb Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 1 Jul 2021 13:13:52 +0200 Subject: [PATCH 176/416] Updates to modules --- .../designer/flexible-layout-and-design.md | 20 +++++------ content/designer/images-and-graphics.md | 2 +- content/designer/information-design.md | 21 ++++++----- content/designer/interaction-and-feedback.md | 24 ++++++------- content/designer/multimedia-and-animations.md | 14 ++++---- content/designer/navigation.md | 36 ++++++++++--------- 6 files changed, 61 insertions(+), 56 deletions(-) diff --git a/content/designer/flexible-layout-and-design.md b/content/designer/flexible-layout-and-design.md index cf63a9e2f..c310a0f1b 100644 --- a/content/designer/flexible-layout-and-design.md +++ b/content/designer/flexible-layout-and-design.md @@ -111,7 +111,7 @@ Explain how people with disabilities rely on different style properties, such as Students should be able to: * design user interfaces with clear and distinguishable styles for different components, such as links, buttons, form elements, or texts -* design user interfaces with font sizes that enhance content readability +* design user interfaces with font sizes to support content readability * design user interfaces with adequate spacing to support readability and to help distinguish components from one another #### Teaching Ideas for Topic @@ -119,7 +119,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Demonstrate the use of styles to distinguish user interface components from one another, such as links, buttons, form elements, and texts. Explain how people rely on font sizes, spacing, and typography to distinguish components from one another. -* Demonstrate the use of different font sizes and explain how they affect readability of the content. +* Show examples of big enough font sizes and explain how they support readability. Contrast previous examples with smaller fonts that are not as easy to read. Emphasize that several user groups rely on fonts to be big enough to be able to read and understand contents properly. * Show examples of different page layouts with and without adequate spacing. Explain how spacing allows to distinguish different user interface components and pieces of content from one another. Emphasize that spacing also allows for better readability of contents and for better identification of the different parts of the user interface. #### Ideas to Assess Knowledge for Topic @@ -136,36 +136,36 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Discuss strategies to provide mechanisms for users to perceive different web page regions. Present different strategies to supplement various content types using visual and textual cues. +Explain how people with disabilities perceive different web page regions and contents through text and visual landmarks and cues. Present different strategies to include such cues early in the design phase. #### Learning Outcomes for Topic Students should be able to: * define page regions by using appropriate visual and programmatic landmarks -* design user interfaces with text cues to convey information provided through vision only, for example to convey required form fields +* design user interfaces with text cues to convey information provided through vision only, for example to convey required form fields and available dates in a calendar * design user interfaces with focus indicators that enable people to tell where they are as they move through web pages and applications using the keyboard #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of different regions of web pages, such as header, navigation, main, and footer. Explain that the use of landmarks is needed for people to perceive such regions. Explain that defining landmarks is a designers' responsibility, whereas implementing such landmarks is a responsibility shared with the developer. -* Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a form field is required. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). +* Show examples of different regions of web pages, such as header, navigation, main, and footer. Explain that several groups of people with disabilities rely on visual and programatic landmarks to perceive such regions. Explain that defining landmarks and their styling is a designers' responsibility, whereas implementing such landmarks and their semantics is a developers' responsibility. +* Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a form field is required and those with colors to convey available dates in a calendar. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). * Invite students to navigate a web page with appropriate focus indicators first, and then invite them to navigate a web page without focus indicators. Explain how focus indicators allow people using the keyboard only to determine where they are as they move through web pages and applications using the keyboard only. For reference on how to provide appropriate focus indicators, see techniques [G149: Using user interface components that are highlighted by the user agent when they receive focus](https://www.w3.org/WAI/WCAG21/Techniques/general/G149.html) and [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Give students a web page and ask them to define the appropriate landmarks for users to perceive such regions. Assess how students provide mechanisms to perceive such regions. -* Practical &mdash: Give students examples of required form fields and ask them to provide text information and visual cues to indicate that they are required. Assess how students provide the necessary textual information and visual cues to supplement information. +* Practical — Give students a web page and ask them to define the appropriate landmarks and their styling for users to perceive such regions. Assess how students provide mechanisms to perceive such regions. +* Practical &mdash: Give students examples of information conveyed visually and ask them to provide text information to help understand the information. Assess how students provide the necessary textual information and visual cues to supplement information. {% include excol.html type="end" %} {% include excol.html type="start" %} -### Topic: Color +### Topic: Use of Color {% include excol.html type="middle" %} @@ -196,7 +196,7 @@ Optional ideas to assess knowledge: * Short Answer Questions — Give students a set of user interface components and ask them what the contrast ratio should be. Assess how students understand and distinguish contrast ratios for different user interface components. * Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components, and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing. -* Practical — Give students information presented using color alone and ask them to provide alternatives to convey such information. Assess how students use shapes and icons to make information presented using color alone distinguishable. +* Practical — Give students information presented using color alone and ask them to provide other visual cues to convey such information. Assess how students use shapes and icons to make information presented using color alone distinguishable. {% include excol.html type="end" %} diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 4cc9593f3..1ec76e40f 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -151,7 +151,7 @@ Optional ideas to teach the learning outcomes: * Show examples of different images that convey information, such as images to provide instructions, and to identify people and objects. Explain that such information needs to be provided using text alternatives, so that the purpose of the image can be understood without having to look at the image. Emphasize that these alternatives may require coordination among designers, developers, and content authors. For references on how to provide text alternatives for images, see [G82: Providing a text alternative that identifies the purpose of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G82.html). * Explain that images of text present information intended to be read as text. Emphasize that sometimes it is difficult to tell visually if text has been coded as a text or as an image, so coordination among designers, developers, and content authors is needed to determine if the technologies in use can achieve the desired visual presentation. Emphasize that, if an image of text is still required, there needs to be a text alternative that conveys the same information as the image of text. Explain that coding an image of text appropriately is a responsibility of the developer, whereas providing descriptions for images of text is a responsibility shared with the content author. -* Show examples of different verification systems, such as CAPTCHA, to identify human beings trying to access a service or system. Explain that these mechanisms need to support several modalities, such as visual, auditory, or cognitive. For references on how to provide accessible CAPTCHA, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). +* Show examples of different verification systems, such as CAPTCHA, to identify human beings trying to access a service or system. Explain that these mechanisms need to support several modalities, such as visual, auditory, and cognitive. For references on how to provide accessible CAPTCHA, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 4b11b0acc..dbe1b5185 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -24,14 +24,14 @@ navigation: Courses based on this module should: -* present strategies for splitting large blocks of information into smaller pieces +* present strategies for splitting large blocks of information into smaller pieces that are easier to consume and understand * present strategies for grouping information that shares a common purpose to make such information easier to understand ## Learning Outcomes for Module Students should be able to: -* describe approaches to break down different types of content into smaller and more manageable pieces, including: +* describe approaches to break down different types of content into smaller and more manageable pieces, including using: * headings, pages, and chapter markers * lists, simpler tables, and plain text to convey information presented in complex tables * groups of form controls that share a common purpose @@ -95,9 +95,9 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Refer back to [Module 3: Navigation](/curricula/designer-modules/navigation/). Discuss ways to split large amounts of text into smaller pieces. For example, using headings and their corresponding rank levels, as well as pages to split the contents into logical units, and chapter markers to indicate chapters in digital publications. +Refer back to [Module 3: Navigation](/curricula/designer-modules/navigation/). Discuss ways to split large amounts of text into smaller pieces. For example, using headings and their corresponding rank levels, pages to split the contents into logical units, and chapter markers to indicate chapters in digital publications. -Discuss the use of icons and other visual cues to help people understand the contents presented in text. +Discuss the use of icons and other visual cues to help people understand processess and instructions presented in text. #### Learning Outcomes for Topic @@ -128,7 +128,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Present students with an eBook and ask them to define how it should be split into smaller and more manageable pieces so that it can be easier to navigate and understand. Assess how students use headings and rank levels, pages, and chapter markers to split large amounts of text into smaller and more manageable pieces. -* Practical — Give students a complex piece of text and ask them to complement it with diagrams and illustrations. Assess how students provide mechanisms to complement information presented in text. +* Practical — Give students a complex piece of text and ask them to complement it with diagrams and illustrations. Assess how students provide mechanisms to complement processess and instructions presented in text. * Practical — Present students with unusual words and abbreviations and ask them to define a mechanism to provide the explanation of such words or the expansion of the abbreviations. Assess how students define a mechanism to provide explanations of unusual words and expansions of abbreviations. {% include excol.html type="end" %} @@ -148,15 +148,15 @@ Students should be able to: * identify uses of tables to present data that share a logical relationship * design user interfaces that support multiple ways of presenting tabular information, such as using several lists, or splitting a complex table into several simpler ones * define table header cells and data cells, and provide clear and distinguishable styles for each -* provide graphical representations of complex tables that help users more easily understand its purpose and meaning -* identify related requirements for content authors to provide table descriptions where appropriate +* create designs with graphical representations of complex tables that help users more easily understand its purpose and meaning * identify related requirements for developers to programmatically associate table descriptions, data cells, and header cells with their corresponding table +* identify related requirements for content authors to provide table descriptions where appropriate #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of different types of information presented in tables. Explain that tables are used when there is a logical relationship between the information presented, for example when displaying a list of events with their date and venue. +* Show examples of different types of information presented in tables. Explain that tables are used when there is a logical, tabular relationship between the information presented, for example when displaying a list of events with their date and venue. * Refer back to Module 2: Flexible Layout and Design [Topic: Flexible Design](/curricula/designer-modules/flexible-layout-and-design/#topic-flexible-design) and explain that some users may require different ways of presenting tabular information. Explain that these include providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. * Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells needs to be perceived both visually and programmatically. Explain that providing the styles is a designers' responsibility, whereas establishing the programmatic relationship is a responsibility shared with the developer. @@ -166,6 +166,7 @@ Optional ideas to assess knowledge: * Practical — Give students a set of tables and ask them to define their header cells and data cells. Assess how students understand the difference between header cells and data cells. * Practical — Present students with a set of tables and ask them to provide clear styles to distinguish data cells from header cells. Assess how students provide clear and distinguishable styles for header cells and data cells. +* Practical — Present students with a complex table and ask them to split the information using simpler tables, lists, and graphical representations where appropriate. Assess how students provide alternative ways to present tabular information. {% include excol.html type="end" %} @@ -182,7 +183,7 @@ Show examples of how different groups of people interact with large amounts of s Students should be able to: * design user interfaces that support grouping of related form controls, such as those collecting personal information, payment methods, and consent to legal conditions -* design user interfaces that support filtering data from data lists and grids, for example using search boxes or splitting the data set into smaller subsets of data +* design user interfaces that support filtering data from long data lists and grids, for example using search boxes or splitting the data set into smaller subsets of data * design user interfaces that support customizing the results that are shown at a given time #### Teaching Ideas for Topic @@ -190,12 +191,14 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to understand and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and programmatically, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look like is a designers' responsibility, whereas coding those relations is a developers' responsibility. +* Show examples of long data lists and grids, such as to select a country. Explain that it takes a lot of time for keyboard users to go one by one using the arrow keys to select their desired option. Present mechanisms to filter information so that it appears in smaller pieces, such as pseudo-search functionality that allows users to type the first letters of their desired choice. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: * Practical — Students group related information in a form that asks for information to open a bank account. Assess how students build groups of related information, such as those collecting personal information, payment methods, and consent to legal conditions, and how students provide ways for users to identify each of the groups. +* Practical — Present students with a long list of items and ask them to define ways to split the list into smaller subsets. Assess how students use different strategies to group long sets of data into smaller subsets. {% include excol.html type="end" %} diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 998b653c3..8f690d756 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -34,12 +34,12 @@ Students should be able to: * explain strategies that people with disabilities use to interact with components that accept user input * design user interfaces that support different input mechanisms, including mouse, touch, keyboard, and speech * define keyboard interactions and meaningful sequences inside complex widgets, including buttons, carousels, sliders, tabs, and treeviews -* define mechanisms to obtain information about custom keyboard shortcuts for complex widgets and applications +* create designs with information about custom keyboard shortcuts for complex widgets and applications * provide clear and distinguishable ways to identify components that accept user input, including through naming and placement * provide mechanisms to help understand the context, information, and functionality of user interface components, including through textual instructions, color, and other visual cues * provide meaningful and descriptive notifications about imminent time limits, steps, errors, suggestions for correction, success messages, status changes, and feedback from user input -* identify related requirements for developers to provide the necessary semantics for components that accept user input, error messages, and notifications -* identify related requirements for developers to write code for custom keyboard interactions for components that accept user input +* identify related requirements for developers to provide the necessary semantics for components that accept user input, error messages, notifications, and other feedback +* identify related requirements for developers to code custom keyboard interactions for components that accept user input {% include excol.html type="all" %} @@ -141,9 +141,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Invite students to try standard keyboard conventions. For example, use of the tab to move through user interface components, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that these interactions need to be preserved as much as possible when designing custom widgets, as these are mostly expected by users. -* Reflect with students about keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers need to work closely with other team members, such as developers and user researchers, to define custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and working with developers to implement such keystrokes. -* Present some examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. -* Show examples of help functionality to explain custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using such shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these mechanisms is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. +* Reflect with students about keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers need to work closely with other team members, including developers and user researchers, on strategies to define custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and working with developers to implement such keystrokes. +* Present examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. +* Show examples of help functionality for custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using such shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these help mechanisms is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic @@ -151,7 +151,7 @@ Optional ideas to assess knowledge: * Short Answer Questions — Students research about commonly used modifier keys of operating systems and assistive technologies. Assess how students understand the use of modifier keys in operating systems and assistive technologies. * Practical — Present students with a user interface that can be interacted only with the mouse and ask them to define keyboard interaction patterns. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. -* Practical — Students work with developers to avoid custom keyboard shortcut conflicts with existing operating system and assistive technology keystrokes. Assess how students develop strategies to work with other team members to avoid custom keyboard shortcut conflicts. +* Practical — Students work with developers to avoid custom keyboard shortcut conflicts with existing operating system and assistive technology keystrokes. Assess how students work with other team members to develop strategies that avoid custom keyboard shortcut conflicts. {% include excol.html type="end" %} @@ -221,7 +221,7 @@ Optional ideas to teach the learning outcomes: * Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. * Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several mechanisms, including textual and visual cues. * Present examples of time limits, such as those warning about session expirations. Explain that instructions need to be provided so that users are aware of the time limits, and mechanisms need to be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designers' responsibility, whereas implementing mechanisms to stop, extend, or adjust time limits is a responsibility shared with the developer. -* Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. For reference on how to provide instructions for multi-step forms, see @@@ +* Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. #### Ideas to Assess Knowledge for Topic @@ -260,14 +260,15 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different mechanisms to communicate notifications, such as through text messages, haptic and audio feedback, and popup windows. -* Demonstrate different types of error messages and explain why it is necessary to communicate the specific field where the error has occurred and, if possible, provide suggestions for users to correct the error. -* Show examples of overlapping notifications in the context of complex applications. Explain that some users may find it daunting to process several notifications at the same time, so a mechanism needs to be defined that allows to prioritize notifications based on their relevance. +* Show examples of different mechanisms to communicate notifications, such as through text messages, semantic relations, haptic and audio feedback, and popup windows. +* Demonstrate different types of error messages, including overall information about errors, specific information about each of the fields in error, and suggestions for correcting such errors when possible. Show examples of user interfaces with and without such error messages and explain that these enable several groups of people with disabilities to better interact and understand the contents. +* Show examples of overlapping notifications in the context of complex applications. Explain that some users may find it daunting to process several notifications at the same time, so a mechanism needs to be defined that allows to prioritize notifications based on their relevance. Explain that defining mechanisms to prioritize notifications based on their relevance is a designers' responsibility, whereas implementing the mechanisms is a developers' responsibility. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: +* Practical — Present students with a user interface containing errors and ask them to provide an overall descriptive message informing that there are submission errors. Assess how students provide overall informative messages when there are submission errors * Practical — Present students with a form field submission containing errors and ask them to provide notifications about each form field that contains errors, together with suggestions for corrections when possible. Assess how students provide adequate error messages for each of the wrong fields and how they provide suggestions for corrections when possible. {% include excol.html type="end" %} @@ -284,7 +285,6 @@ Optional ideas to assess knowledge: Suggested resources to support your teaching: -* @@@ * [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. * [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [Notifications and Feedback (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/notifications/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index d326d191f..698e17e93 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -122,11 +122,11 @@ Students should be able to Optional ideas to teach the learning outcomes: -* Show examples of text transcripts. Explain that they provide alternative for people who cannot hear the audio information and for people who cannot see the visual information. Explain that allocating the necessary space for the transcripts is a designers' responsibility, whereas providing such transcripts is a responsibility shared with the content author. -* Show examples of captions. Explain that these are needed for people who cannot hear the audio, and that they are useful in other situations. Explain that identifying the situations where captions are needed is a designers' responsibility, whereas providing such captions is a responsibility shared with the content author. -* Show examples of audio described content. Explain that audio descriptions are needed for people who cannot see the video. Explain that defining the mechanisms to enable and disable audio described content is a designers' responsibility, whereas providing the audio description is a responsibility shared with the content author. +* Show examples of text transcripts. Explain that transcripts are alternatives for people who cannot hear the audio information and for people who cannot see the visual information. Explain that allocating the necessary space for the transcripts is a designers' responsibility, whereas providing such transcripts is a responsibility shared with the content author. +* Show examples of captions. Explain that captions are alternatives for people who cannot hear the audio, and that they are useful in other situations. Explain that determining where to place captions is a designers' responsibility, whereas providing such captions is a responsibility shared with the content author. +* Show examples of audio described content. Explain that audio descriptions are alternatives for people who cannot see the video. Explain that defining the mechanisms to enable and disable audio described content is a designers' responsibility, whereas providing the audio description is a responsibility shared with the content author. * Show examples of sign language. Explain that sign language is essential for people who are deaf and who do not understand written language well. Explain that defining the mechanisms to enable and disable sign language is a designers' responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. -* Show examples of accessible media players. Emphasize how the controls have appropriate contrast ratios, are operable by keyboard, and are easy to find. Emphasize that the controls need to remain available even when the media is playing. +* Show examples of accessible and inaccessible media players. Explain how accessible media player controls have appropriate contrast ratios, are operable by keyboard, and are easy to find. Emphasize that the controls need to remain available even when the media is playing. #### Ideas to Assess Knowledge for Topic @@ -142,7 +142,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Show examples of different types of animations. Explain that animations can cause seizures and physical reactions for some people, so designers need to consider additional requirements when designing animations. +Show examples of different types of animations. Explain that animations can cause seizures and physical reactions for some people, so designers need to carefully consider the below when designing animations. #### Learning Outcomes for Topic @@ -164,7 +164,7 @@ Optional ideas to teach the learning outcomes: * [G186: Using a control in the Web page that stops moving, blinking, or auto-updating content](https://www.w3.org/WAI/WCAG21/Techniques/general/G186), and * [G187: Using a technology to include blinking content that can be turned off via the user agent](https://www.w3.org/WAI/WCAG21/Techniques/general/G187). * Show examples of flashing content and explain that they can cause seizures and physical reactions for some people. Emphasize that all components of the content need to be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole web page or application. For references on how to design interfaces that support flashing below the general flash and red flash thresholds or that support flashing below 3 seconds, see techniques [G19: Ensuring that no component of the content flashes more than three times in any 1-second period](https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html) and [G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold](https://www.w3.org/WAI/WCAG21/Techniques/general/G15.html). -* Show examples of interactions triggered by animations, such as additional movements when scrolling. Explain that these animations can cause distraction and vestibular disorders (such as dizziness, nausea, and headaches) for some people. Discuss the use of preferences as well as technology specific properties to reduce or disable such animations. +* Show examples of interactions triggered by animations, such as additional movements when scrolling and decorative gimmics. Explain that these animations can cause distraction and vestibular disorders (such as dizziness, nausea, and headaches) for some people. Discuss the use of preferences as well as technology specific properties to reduce or disable such animations. * Demonstrate the use of a screen reader to navigate an application that plays audio automatically for more than 3 seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a mechanism to pause or control the volume of that audio. Explain that the operating system often provides such mechanism. For references on how to design interfaces that support mechanisms to pause or control the volume of any audio that plays automatically, see the following techniques: * [G60: Playing a sound that turns off automatically within three seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G60.html), * [G170: Providing a control near the beginning of the Web page that turns off sounds that play automatically](https://www.w3.org/WAI/WCAG21/Techniques/general/G170.html), and @@ -175,6 +175,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Present students with instances of flashing content and ask them to determine if they are below the general flash and red flash thresholds. Assess how students understand accessibility requirements for flashing content. +* Practical — Present students with a user interface containing animations and ask them to make them accessible. Assess how students define mechanisms to reduce or disable the animations. {% include excol.html type="end" %} @@ -185,7 +186,6 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: * Portfolio — Students include accessible video and audio contents on a website. Assess how students understand the accessibility requirements of video and audio content, including transcripts for audio, audio descriptions, and sign language. -* Practical — Present students with a user interface containing animations and ask them to make them accessible. Assess how students define mechanisms to reduce or disable the animations. ## Teaching Resources diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 06d75dd62..00798d970 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -24,8 +24,8 @@ navigation: Courses based on this module should: -* explain strategies that people with disabilities use to navigate multi multipage websites and applications -* describe behaviors, visual affordances, and interaction patterns of navigation menus, including static navigation menus, fly-out menus, and mega menus, that relate to accessible design +* explain strategies that people with disabilities use to navigate multi page websites and applications +* describe accessible behaviors, visual affordances, and interaction patterns of navigation menus, including static navigation menus, fly-out menus, and mega menus ## Learning Outcomes for Module @@ -109,8 +109,8 @@ Students should be able to: * identify and describe uses of different types of navigation menus, such as static, fly-out, and mega menus * provide visual cues to distinguish menus from other components, and provide consistent styling for menu identification across a set of web pages -* define mouse, keyboard, and touch interactions inside menus -* design user interfaces that support appropriate resizing of menus and menu items to fit all text in different viewports and screen configurations +* define mouse, keyboard, and touch interactions inside navigation menus +* design user interfaces that support appropriate resizing of navigation menus and menu items to fit all text in different viewports and screen configurations * design user interfaces that communicate the state of menus and menu items, for example in fly-out menus, using distinguishable and consistent styles * identify related requirements for developers to implement semantics for different menu states and properties, such as hover, focus, current, active, and visited @@ -118,18 +118,18 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Present different types of menus, such as navigation, fly-out, application menus, and dioalogs. Explain conventions for accessible menus, such as clear and consistent styling to convey menu behaviors and states. Introduce patterns for mouse, keyboard, and touch interaction with menus. -* Demonstrate menu interaction using different input devices, such as keyboard, mouse, and touch. For example, activating a menu option by tapping, pressing the Enter key, and mouse clicking. Explain that defining the interactions is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. -* Show examples of navigation, fly-out, and application menu together with their menu items containing contain large texts. Explain that, when used in smaller viewports and with different screen configurations, these texts need to wrap so that they are perceived in their entirety. Explain that different languages may have different word sizes, so designers need to consider provisions for different word lengths. +* Present different types of navigation menus, such as static, fly-out, and mega menus. Explain conventions for accessible navigation menus, such as clear and consistent styling to convey menu behaviors and states. Introduce patterns for mouse, keyboard, and touch interaction with navigation menus. +* Demonstrate navigation menu interaction using different input devices, such as keyboard, mouse, and touch. For example, activating a menu option by tapping, pressing the Enter key, and mouse clicking. Explain that defining the interactions is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. +* Show examples of navigation menus and menu items large texts. Explain that, when used in smaller viewports and with different screen configurations, these texts need to wrap so that they are perceived in their entirety. Explain that different languages may have different word sizes, so designers need to consider provisions for different word lengths. * Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Emphasize that the states of these menu items need to be communicated using visual cues as well as semantics. Explain that providing the visual cues is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Students define mouse, keyboard, and touch interactions for menus. for example, how to open, navigate, activate, and close such menus using the mouse, keyboard, and touch. Assess how students understand the need for different interaction patterns based on the input method in use. -* Practical — Present students with different menu states, such as hover, focus, current, active, and visited, and ask them to provide visual cues to distinguish them from one another. Assess how students communicate visually the state of menus and menu items. -* Practical — Present students with menus containing long strings of text and ask them to ensure the text is shown irrespective of the viewport and screen configuration used. Assess how students understand the diversity among different viewports and screen configurations that people with disabilities use. +* Practical — Students define mouse, keyboard, and touch interactions for navigation menus. for example, how to open, navigate, activate, and close such menus using the mouse, keyboard, and touch. Assess how students understand the need for different interaction patterns based on the input method in use. +* Practical — Present students with different navigation menu states, such as hover, focus, current, active, and visited, and ask them to provide visual cues to distinguish them from one another. Assess how students communicate visually the state of navigation menus and menu items. +* Practical — Present students with navigation menus containing long strings of text and ask them to ensure the text is shown irrespective of the viewport and screen configuration used. Assess how students understand the diversity among different languages, viewports, and screen configurations. {% include excol.html type="end" %} @@ -139,7 +139,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Introduce other navigation mechanisms that may be used depending on the characteristics of the website or application. Emphasize that there should be multiple ways to reach a specific web page or application view, but that it is not required to use every single navigation mechanism described. +Introduce other navigation mechanisms that may be used depending on the characteristics of the website or application. Emphasize that WCAG requires that there be multiple ways to reach a specific web page or application view, but that it is not required to use every single navigation mechanism described below. #### Learning Outcomes for Topic @@ -159,9 +159,11 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of mechanisms to bypass blocks of repeated content, such as a link at the top of the page and the use of expandable and collapsible components. Explain that navigating through sets of repeated blocks of content using only the tab key is time consuming. For examples on how to provide a mechanism to bypass blocks of repeated content, see techniques [G1: Adding a link at the top of each page that goes directly to the main content area](https://www.w3.org/WAI/WCAG21/Techniques/general/G1.html), [G123: Adding a link at the beginning of a block of repeated content to go to the end of the block](https://www.w3.org/WAI/WCAG21/Techniques/general/G123.html), and [G124: Adding links at the top of the page to each area of the content](https://www.w3.org/WAI/WCAG21/Techniques/general/G124.html). +* Show examples of mechanisms to bypass blocks of repeated content, such as a link at the top of the page and the use of expandable and collapsible components. Explain that navigating through sets of repeated blocks of content using only the tab key is time consuming. For examples on how to provide a mechanism to bypass blocks of repeated content, see the following techniques: + * [G1: Adding a link at the top of each page that goes directly to the main content area](https://www.w3.org/WAI/WCAG21/Techniques/general/G1.html), + * [G123: Adding a link at the beginning of a block of repeated content to go to the end of the block](https://www.w3.org/WAI/WCAG21/Techniques/general/G123.html), and + * [G124: Adding links at the top of the page to each area of the content](https://www.w3.org/WAI/WCAG21/Techniques/general/G124.html). * Show examples of search functionalities. Explain that they help users find content by supporting navigation to different parts of the site. Emphasize that some users prefer this way of navigating, especially when they are already familiar with the site and know what they are looking for. For references on how to provide a search functionality, see technique [G161: Providing a search function to help users find content](https://www.w3.org/WAI/WCAG21/Techniques/general/G161). -](https://www.w3.org/WAI/WCAG21/Techniques/general/G65). * Show examples of site maps and explain that they serve the purpose of providing an overview of the whole site. Explain that some users rely on them to better understand the structure of the site and to find its way more easily through it. For references on how to provide a site map, see [G63: Providing a site map](https://www.w3.org/WAI/WCAG21/Techniques/general/G63.html). * Show examples of tables of contents, for example in an electronic book or document. Explain that they provide an overview of the whole document and allow navigation to specific parts of the content. For references on how to provide a table of contents, see technique [G64: Providing a Table of Contents](https://www.w3.org/WAI/WCAG21/Techniques/general/G64.html). @@ -169,7 +171,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Students define the blocks of repeated content in a website and cooperate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they provide a mechanism to bypass them. +* Practical — Students define the blocks of repeated content in a website and cooperate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they work with developers to provide a mechanism to bypass such blocks. * Practical — Present students with an interface and ask them to provide multiple ways to navigate across the website. Assess how students provide multiple navigation mechanisms where appropriate, such as search functionalities, breadcrumb trails, site maps, and tables of contents. {% include excol.html type="end" %} @@ -197,8 +199,8 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of breadcrumb trails. Explain that they provide information about the users location in the context of a set of websites. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail -* Invite students to give examples of page titles they are familiar with and reflect with them on how well the titles describe the page contents. Explain that page titles are useful to locate a specific web page within a set of web pages. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page, as some mobile browsers and assistive technologies do not show the information on the title. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). +* Show examples of breadcrumb trails. Explain that they provide information about the users location in the context of a set of websites. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail](https://www.w3.org/WAI/WCAG21/Techniques/general/G65). +* Invite students to give examples of page titles they are familiar with and reflect with them on how well the titles describe the page contents. Explain that page titles are useful to identify the purpose of a specific web page within a set of web pages. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page, as some mobile browsers and assistive technologies do not show the information on the title. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). #### Ideas to Assess Knowledge @@ -215,7 +217,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Portfolio — Students design the navigation menu and other navigational mechanisms for a set of web pages. Assess how students understand accessibility features of navigation across multipage websites and applications . +* Portfolio — Students design the navigation menu and other navigational mechanisms for a set of web pages. Assess how students understand accessibility features of navigation across multipage websites and applications. ## Teaching Resources From 38cf19be43d9f173e444aee95f2b99f09ee27ab4 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 2 Jul 2021 13:11:07 +0200 Subject: [PATCH 177/416] Adding current modules and topics to overview page --- content/designer/designer-modules.md | 29 ++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 34be6f169..89862087f 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -59,3 +59,32 @@ The designer modules are designed for students who have achieved the learning ou * [Module 5: Getting Started with Accessibility](/curricula/foundation-modules/getting-started-with-accessibility/) * Topic: Roles and Responsibilities + +## Modules + +- [Module 1: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design) + - [Topic: Text Styling](/curricula/designer-modules/flexible-layout-and-design/#topic-text-styling) + - [Topic: Landmarks and Cues](/curricula/designer-modules/flexible-layout-and-design/#topic-landmarks-and-cues) + - [Topic: Use of Color](/curricula/designer-modules/flexible-layout-and-design/#topic-use-of-color) + - [Topic: Flexible Design](/curricula/designer-modules/flexible-layout-and-design/#topic-flexible-design) +- [Module 2: Navigation](/curricula/designer-modules/navigation/) + - [Topic: Menu Behaviors and Patterns](/curricula/designer-modules/navigation/#topic-menu-behaviors-and-patterns) + - [Topic: Other Navigation Mechanisms](/curricula/designer-modules/navigation/#topic-other-navigation-mechanisms) + - [Topic: Location](/curricula/designer-modules/navigation/#topic-location) +- [Module 3: InformationDesign](/curricula/designer-modules/information-design/) + - [Topic: Textual Information](/curricula/designer-modules/information-design/#topic-textual-information) + - [Topic: Tabular Information](/curricula/designer-modules/information-design/#topic-tabular-information) + - [Topic: Forms and Controls](/curricula/designer-modules/information-design/#topic-forms-and-controls) +- [Module 4: Images and Graphics](/curricula-designer-modules/images-and-graphics/#topic-functional-images) + - [Topic: Functional Images](/curricula-designer-modules/images-and-graphics/)) + - [Topic: Informative Images](/curricula-designer-modules/images-and-graphics/)#topic-informative-images) + - [Topic: Decorative Images](/curricula-designer-modules/images-and-graphics/)#topic-decorative-images) + - [Topic: Complex Images](/curricula-designer-modules/images-and-graphics/)#topic-complex-images) +- [Module 5: Multimeedia and Animations](/curricula/designer-modules/multimedia-and-animations/) + - [Topic: Alternatives to Multimedia Content](/curricula/designer-modules/multimedia-and-animations/#topic-alternatives-to-multimedia-content) + - [Topic: Movement and Animations](/curricula/designer-modules/multimedia-and-animations/)#topic-movement-and-animations) +- [Module 6: Interaction and Feedback](/curricula/designer-modules/interaction-and-feedback/) + - [Topic: Keyboard Interactions](/curricula/designer-modules/interaction-and-feedback/#topic-keyboard-interactions) + - [Topic: Gestures and Motion](/curricula/designer-modules/interaction-and-feedback/)#topic-gestures-and-motion + - [Topic: Labels and Instructions](/curricula/designer-modules/interaction-and-feedback/)#topic-labels-and-instructions) + - [Topic: Errors and Notifications](/curricula/designer-modules/interaction-and-feedback/)#topic-errors-and-notifications) \ No newline at end of file From 6222da1eeef9512f2245939d5d6ee37ad20b61e3 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 2 Jul 2021 13:16:19 +0200 Subject: [PATCH 178/416] Fixing typo --- content/designer/designer-modules.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 89862087f..adc09b309 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -75,11 +75,11 @@ The designer modules are designed for students who have achieved the learning ou - [Topic: Textual Information](/curricula/designer-modules/information-design/#topic-textual-information) - [Topic: Tabular Information](/curricula/designer-modules/information-design/#topic-tabular-information) - [Topic: Forms and Controls](/curricula/designer-modules/information-design/#topic-forms-and-controls) -- [Module 4: Images and Graphics](/curricula-designer-modules/images-and-graphics/#topic-functional-images) - - [Topic: Functional Images](/curricula-designer-modules/images-and-graphics/)) - - [Topic: Informative Images](/curricula-designer-modules/images-and-graphics/)#topic-informative-images) - - [Topic: Decorative Images](/curricula-designer-modules/images-and-graphics/)#topic-decorative-images) - - [Topic: Complex Images](/curricula-designer-modules/images-and-graphics/)#topic-complex-images) +- [Module 4: Images and Graphics](/curricula/designer-modules/images-and-graphics/#topic-functional-images) + - [Topic: Functional Images](/curricula/designer-modules/images-and-graphics/)) + - [Topic: Informative Images](/curricula/designer-modules/images-and-graphics/)#topic-informative-images) + - [Topic: Decorative Images](/curricula/designer-modules/images-and-graphics/)#topic-decorative-images) + - [Topic: Complex Images](/curricula/designer-modules/images-and-graphics/)#topic-complex-images) - [Module 5: Multimeedia and Animations](/curricula/designer-modules/multimedia-and-animations/) - [Topic: Alternatives to Multimedia Content](/curricula/designer-modules/multimedia-and-animations/#topic-alternatives-to-multimedia-content) - [Topic: Movement and Animations](/curricula/designer-modules/multimedia-and-animations/)#topic-movement-and-animations) From 6319d5b924427346246ad7ca20141cde735cbd77 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 2 Jul 2021 13:22:57 +0200 Subject: [PATCH 179/416] Fixing markdown --- content/designer/designer-modules.md | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index adc09b309..e6680e5bd 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -76,15 +76,16 @@ The designer modules are designed for students who have achieved the learning ou - [Topic: Tabular Information](/curricula/designer-modules/information-design/#topic-tabular-information) - [Topic: Forms and Controls](/curricula/designer-modules/information-design/#topic-forms-and-controls) - [Module 4: Images and Graphics](/curricula/designer-modules/images-and-graphics/#topic-functional-images) - - [Topic: Functional Images](/curricula/designer-modules/images-and-graphics/)) - - [Topic: Informative Images](/curricula/designer-modules/images-and-graphics/)#topic-informative-images) - - [Topic: Decorative Images](/curricula/designer-modules/images-and-graphics/)#topic-decorative-images) - - [Topic: Complex Images](/curricula/designer-modules/images-and-graphics/)#topic-complex-images) + - [Topic: Functional Images](/curricula/designer-modules/images-and-graphics/#topic-functional-images) + - [Topic: Informative Images](/curricula/designer-modules/images-and-graphics/#topic-informative-images) + - [Topic: Decorative Images](/curricula/designer-modules/images-and-graphics/#topic-decorative-images) + - [Topic: Complex Images](/curricula/designer-modules/images-and-graphics/#topic-complex-images) - [Module 5: Multimeedia and Animations](/curricula/designer-modules/multimedia-and-animations/) - [Topic: Alternatives to Multimedia Content](/curricula/designer-modules/multimedia-and-animations/#topic-alternatives-to-multimedia-content) - - [Topic: Movement and Animations](/curricula/designer-modules/multimedia-and-animations/)#topic-movement-and-animations) + - [Topic: Movement and Animations](/curricula/designer-modules/multimedia-and-animations/)topic-movement-and-animations) - [Module 6: Interaction and Feedback](/curricula/designer-modules/interaction-and-feedback/) - [Topic: Keyboard Interactions](/curricula/designer-modules/interaction-and-feedback/#topic-keyboard-interactions) - - [Topic: Gestures and Motion](/curricula/designer-modules/interaction-and-feedback/)#topic-gestures-and-motion - - [Topic: Labels and Instructions](/curricula/designer-modules/interaction-and-feedback/)#topic-labels-and-instructions) - - [Topic: Errors and Notifications](/curricula/designer-modules/interaction-and-feedback/)#topic-errors-and-notifications) \ No newline at end of file + - [Topic: Gestures and Motion](/curricula/designer-modules/interaction-and-feedback/#topic-gestures-and-motion) + - [Topic: Labels and Instructions](/curricula/designer-modules/interaction-and-feedback/#topic-labels-and-instructions) + - [Topic: Errors and Notifications](/curricula/designer-modules/interaction-and-feedback/#topic-errors-and-notifications) + \ No newline at end of file From c1f4513ca9eab7b7f06b6e8d0992621c483b1d98 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 2 Jul 2021 13:43:25 +0200 Subject: [PATCH 180/416] Fixing markdown --- content/designer/designer-modules.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index e6680e5bd..8df7714aa 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -82,7 +82,7 @@ The designer modules are designed for students who have achieved the learning ou - [Topic: Complex Images](/curricula/designer-modules/images-and-graphics/#topic-complex-images) - [Module 5: Multimeedia and Animations](/curricula/designer-modules/multimedia-and-animations/) - [Topic: Alternatives to Multimedia Content](/curricula/designer-modules/multimedia-and-animations/#topic-alternatives-to-multimedia-content) - - [Topic: Movement and Animations](/curricula/designer-modules/multimedia-and-animations/)topic-movement-and-animations) + - [Topic: Movement and Animations](/curricula/designer-modules/multimedia-and-animations/#topic-movement-and-animations) - [Module 6: Interaction and Feedback](/curricula/designer-modules/interaction-and-feedback/) - [Topic: Keyboard Interactions](/curricula/designer-modules/interaction-and-feedback/#topic-keyboard-interactions) - [Topic: Gestures and Motion](/curricula/designer-modules/interaction-and-feedback/#topic-gestures-and-motion) From ca606d1d899bc8390044c968f300704deeeb6592 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 6 Jul 2021 16:00:19 +0200 Subject: [PATCH 181/416] Adding translation instructions --- _external/data | 2 +- content/developer/custom-widgets.md | 15 ++++++++++----- content/developer/developer-modules.md | 15 ++++++++++----- content/developer/forms.md | 15 ++++++++++----- content/developer/images.md | 15 ++++++++++----- content/developer/menus.md | 15 ++++++++++----- content/developer/page-structure.md | 15 ++++++++++----- content/developer/rich-applications.md | 15 ++++++++++----- content/developer/tables.md | 15 ++++++++++----- content/foundation/business-case-and-benefits.md | 15 ++++++++++----- content/foundation/foundation-modules.md | 14 +++++++++----- .../getting-started-with-accessibility.md | 15 ++++++++++----- .../foundation/people-and-digital-technology.md | 15 ++++++++++----- .../foundation/principles-standards-and-checks.md | 15 ++++++++++----- content/foundation/what-is-web-accessibility.md | 15 ++++++++++----- content/index.md | 15 ++++++++++----- 16 files changed, 150 insertions(+), 76 deletions(-) diff --git a/_external/data b/_external/data index 28cc8c37c..16c14b3b0 160000 --- a/_external/data +++ b/_external/data @@ -1 +1 @@ -Subproject commit 28cc8c37c0f708049ef486877f62513882aa4565 +Subproject commit 16c14b3b0dc9d9db6b3a4e45753ed81d451dc24f diff --git a/content/developer/custom-widgets.md b/content/developer/custom-widgets.md index 69833546c..de6320e21 100644 --- a/content/developer/custom-widgets.md +++ b/content/developer/custom-widgets.md @@ -1,16 +1,21 @@ --- title: "Module 6: Custom Widgets" nav_title: "Custom Widgets" -permalink: /curricula/developer-modules/custom-widgets/ -ref: /curricula/developer-modules/custom-widgets/ -lang: en + +lang: en # change "en" to lang code, here and 2 @@s below +last_updated: 2021-03-04 # Change to date of translation YYYY-MM-DD (month in middle) +# translator: "..." +# contributors: "..." + +permalink: /curricula/developer-modules/custom-widgets/ # Add lang to end /link/to/page/@@ +ref: /curricula/developer-modules/custom-widgets/ # Do not change github: repository: w3c/wai-curricula - path: content/developer/custom-widgets.md + path: content/developer/custom-widgets.md # Add lang to the middle of the filename, e.g., index.@@.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ -footer: > +footer: > # Translate words below, including "Date:" and "Editor:". (Do not update the date.)

Date: Updated 4 March 2021. First published December 2019.

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

diff --git a/content/developer/developer-modules.md b/content/developer/developer-modules.md index a0a427c15..d8f3e01b3 100644 --- a/content/developer/developer-modules.md +++ b/content/developer/developer-modules.md @@ -1,16 +1,21 @@ --- title: "Developer Modules" nav_title: "Developer Modules" -permalink: /curricula/developer-modules/ -ref: /curricula/developer-modules/ -lang: en + +lang: en # change "en" to lang code, here and 2 @@s below +last_updated: 2021-03-04 # Change to date of translation YYYY-MM-DD (month in middle) +# translator: "..." +# contributors: "..." + +permalink: /curricula/developer-modules/ # Add lang to end /link/to/page/@@ +ref: /curricula/developer-modules/ # Do not change github: repository: w3c/wai-curricula - path: content/developer/developer-modules.md + path: content/developer/developer-modules.md # Add lang to the middle of the filename, e.g., index.@@.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ -footer: > +footer: > # Translate words below, including "Date:" and "Editor:". (Do not update the date.)

Date: Updated 4 March 2021. First published December 2019.

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

diff --git a/content/developer/forms.md b/content/developer/forms.md index 7084fff79..8874fca26 100644 --- a/content/developer/forms.md +++ b/content/developer/forms.md @@ -1,16 +1,21 @@ --- title: "Module 5: Forms" nav_title: "Forms" -permalink: /curricula/developer-modules/forms/ -ref: /curricula/developer-modules/forms/ -lang: en + +lang: en # change "en" to lang code, here and 2 @@s below +last_updated: 2021-03-04 # Change to date of translation YYYY-MM-DD (month in middle) +# translator: "..." +# contributors: "..." + +permalink: /curricula/developer-modules/forms/ # Add lang to end /link/to/page/@@ +ref: /curricula/developer-modules/forms/ # Do not change github: repository: w3c/wai-curricula - path: content/developer/forms.md + path: content/developer/forms.md # Add lang to the middle of the filename, e.g., index.@@.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ -footer: > +footer: > # Translate words below, including "Date:" and "Editor:". (Do not update the date.)

Date: Updated 4 March 2021. First published December 2019.

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

diff --git a/content/developer/images.md b/content/developer/images.md index e09ccba75..a54c30e55 100644 --- a/content/developer/images.md +++ b/content/developer/images.md @@ -1,16 +1,21 @@ --- title: "Module 3: Images" nav_title: "Images" -permalink: /curricula/developer-modules/images/ -ref: /curricula/developer-modules/images/ -lang: en + +lang: en # change "en" to lang code, here and 2 @@s below +last_updated: 2021-03-04 # Change to date of translation YYYY-MM-DD (month in middle) +# translator: "..." +# contributors: "..." + +permalink: /curricula/developer-modules/images/ # Add lang to end /link/to/page/@@ +ref: /curricula/developer-modules/images/ # Do not change github: repository: w3c/wai-curricula - path: content/developer/images.md + path: content/developer/images.md # Add lang to the middle of the filename, e.g., index.@@.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ -footer: > +footer: > # Translate words below, including "Date:" and "Editor:". (Do not update the date.)

Date: Updated 4 March 2021. First published December 2019.

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

diff --git a/content/developer/menus.md b/content/developer/menus.md index 604bea075..1d8846fb0 100644 --- a/content/developer/menus.md +++ b/content/developer/menus.md @@ -1,16 +1,21 @@ --- title: "Module 2: Menus" nav_title: "Menus" -permalink: /curricula/developer-modules/menus/ -ref: /curricula/developer-modules/menus/ -lang: en + +lang: en # change "en" to lang code, here and 2 @@s below +last_updated: 2021-03-04 # Change to date of translation YYYY-MM-DD (month in middle) +# translator: "..." +# contributors: "..." + +permalink: /curricula/developer-modules/menus/ # Add lang to end /link/to/page/@@ +ref: /curricula/developer-modules/menus/ # Do not change github: repository: w3c/wai-curricula - path: content/developer/menus.md + path: content/developer/menus.md # Add lang to the middle of the filename, e.g., index.@@.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ -footer: > +footer: > # Translate words below, including "Date:" and "Editor:". (Do not update the date.)

Date: Updated 4 March 2021. First published December 2019.

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

diff --git a/content/developer/page-structure.md b/content/developer/page-structure.md index 2e671bc0b..3a0c8493c 100644 --- a/content/developer/page-structure.md +++ b/content/developer/page-structure.md @@ -1,16 +1,21 @@ --- title: "Module 1: Page Structure" nav_title: "page Structure" -permalink: /curricula/developer-modules/page-structure/ -ref: /curricula/developer-modules/page-structure/ -lang: en + +lang: en # change "en" to lang code, here and 2 @@s below +last_updated: 2021-01-11 # Change to date of translation YYYY-MM-DD (month in middle) +# translator: "..." +# contributors: "..." + +permalink: /curricula/developer-modules/page-structure/ # Add lang to end /link/to/page/@@ +ref: /curricula/developer-modules/page-structure/ # Do not change github: repository: w3c/wai-curricula - path: content/developer/page-structure.md + path: content/developer/page-structure.md # Add lang to the middle of the filename, e.g., index.@@.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ -footer: > +footer: > # Translate words below, including "Date:" and "Editor:". (Do not update the date.)

Date: Updated 4 March 2021. First published December 2019.

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

diff --git a/content/developer/rich-applications.md b/content/developer/rich-applications.md index 9fe36ecac..2eb2d5951 100644 --- a/content/developer/rich-applications.md +++ b/content/developer/rich-applications.md @@ -1,16 +1,21 @@ --- title: "Module 7: Rich Applications" -nav_title: "Rich Applications" + +lang: en # change "en" to lang code, here and 2 @@s below +last_updated: 2021-03-04 # Change to date of translation YYYY-MM-DD (month in middle) +# translator: "..." +# contributors: "..." + +nav_title: "Rich Applications" # Add lang to end /link/to/page/@@ permalink: /curricula/developer-modules/rich-applications/ -ref: /curricula/developer-modules/rich-applications/ -lang: en +ref: /curricula/developer-modules/rich-applications/ # Do not change github: repository: w3c/wai-curricula - path: content/developer/rich-applications.md + path: content/developer/rich-applications.md # Add lang to the middle of the filename, e.g., index.@@.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ -footer: > +footer: > # Translate words below, including "Date:" and "Editor:". (Do not update the date.)

Date: Updated 4 March 2021. First published December 2019.

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

diff --git a/content/developer/tables.md b/content/developer/tables.md index 7b66e257d..c2585564d 100644 --- a/content/developer/tables.md +++ b/content/developer/tables.md @@ -1,16 +1,21 @@ --- title: "Module 4: Tables" nav_title: "Tables" -permalink: /curricula/developer-modules/tables/ -ref: /curricula/developer-modules/tables/ -lang: en + +lang: en # change "en" to lang code, here and 2 @@s below +last_updated: 2021-03-04 # Change to date of translation YYYY-MM-DD (month in middle) +# translator: "..." +# contributors: "..." + +permalink: /curricula/developer-modules/tables/ # Add lang to end /link/to/page/@@ +ref: /curricula/developer-modules/tables/ # Do not change github: repository: w3c/wai-curricula - path: content/developer/tables.md + path: content/developer/tables.md # Add lang to the middle of the filename, e.g., index.@@.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ -footer: > +footer: > # Translate words below, including "Date:" and "Editor:". (Do not update the date.)

Date: Updated 04 March 2021. First published December 2019.

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

diff --git a/content/foundation/business-case-and-benefits.md b/content/foundation/business-case-and-benefits.md index 9e24c2f5c..d254b3e52 100644 --- a/content/foundation/business-case-and-benefits.md +++ b/content/foundation/business-case-and-benefits.md @@ -1,16 +1,21 @@ --- title: "Module 3: Business Case and Benefits" nav_title: "Business Case and Benefits" -permalink: /curricula/foundation-modules/business-case-and-benefits/ -ref: /curricula/foundation-modules/business-case-and-benefits/ -lang: en + +lang: en # change "en" to lang code, here and 2 @@s below +last_updated: 2021-03-04 # Change to date of translation YYYY-MM-DD (month in middle) +# translator: "..." +# contributors: "..." + +permalink: /curricula/foundation-modules/business-case-and-benefits/ # Add lang to end /link/to/page/@@ +ref: /curricula/foundation-modules/business-case-and-benefits/ # Do not change github: repository: w3c/wai-curricula - path: content/foundation/business-case-and-benefits.md + path: content/foundation/business-case-and-benefits.md # Add lang to the middle of the filename, e.g., index.@@.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ -footer: > +footer: > # Translate words below, including "Date:" and "Editor:". (Do not update the date.)

Date: Updated 4 March 2021. First published December 2019. CHANGELOG

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

diff --git a/content/foundation/foundation-modules.md b/content/foundation/foundation-modules.md index 967e56da8..a39e4f5f2 100644 --- a/content/foundation/foundation-modules.md +++ b/content/foundation/foundation-modules.md @@ -1,16 +1,20 @@ --- title: "Foundation Modules" nav_title: "Foundation Modules" -permalink: /curricula/foundation-modules/ -ref: /curricula/foundation-modules/ -lang: en +lang: en # change "en" to lang code, here and 2 @@s below +last_updated: 2021-03-04 # Change to date of translation YYYY-MM-DD (month in middle) +# translator: "..." +# contributors: "..." + +permalink: /curricula/foundation-modules/ # Add lang to end /link/to/page/@@ +ref: /curricula/foundation-modules/ # Do not change github: repository: w3c/wai-curricula - path: content/foundation/foundation-modules.md + path: content/foundation/foundation-modules.md # Add lang to the middle of the filename, e.g., index.@@.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ -footer: > +footer: > # Translate words below, including "Date:" and "Editor:". (Do not update the date.)

Date: Updated 4 March 2021. First published December 2019. CHANGELOG

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

diff --git a/content/foundation/getting-started-with-accessibility.md b/content/foundation/getting-started-with-accessibility.md index b19e38bb9..e74a8c21c 100644 --- a/content/foundation/getting-started-with-accessibility.md +++ b/content/foundation/getting-started-with-accessibility.md @@ -1,16 +1,21 @@ --- title: "Module 5: Getting Started with Accessibility" nav_title: "Getting Started with Accessibility" -permalink: /curricula/foundation-modules/getting-started-with-accessibility/ -ref: /curricula/foundation-modules/getting-started-with-accessibility/ -lang: en + +lang: en # change "en" to lang code, here and 2 @@s below +last_updated: 2021-03-04 # Change to date of translation YYYY-MM-DD (month in middle) +# translator: "..." +# contributors: "..." + +permalink: /curricula/foundation-modules/getting-started-with-accessibility/ # Add lang to end /link/to/page/@@ +ref: /curricula/foundation-modules/getting-started-with-accessibility/ # Do not change github: repository: w3c/wai-curricula - path: content/foundation/getting-started-with-accessibility.md + path: content/foundation/getting-started-with-accessibility.md # Add lang to the middle of the filename, e.g., index.@@.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ -footer: > +footer: > # Translate words below, including "Date:" and "Editor:". (Do not update the date.)

Date: Updated 4 March 2021. First published December 2019. CHANGELOG

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

diff --git a/content/foundation/people-and-digital-technology.md b/content/foundation/people-and-digital-technology.md index 9f44dfc12..2545e4598 100644 --- a/content/foundation/people-and-digital-technology.md +++ b/content/foundation/people-and-digital-technology.md @@ -1,16 +1,21 @@ --- title: "Module 2: People and Digital Technology" nav_title: "People and Digital Technology" -permalink: /curricula/foundation-modules/people-and-digital-technology/ -ref: /curricula/foundation-modules/people-and-digital-technology/ -lang: en + +lang: en # change "en" to lang code, here and 2 @@s below +last_updated: 2021-03-04 # Change to date of translation YYYY-MM-DD (month in middle) +# translator: "..." +# contributors: "..." + +permalink: /curricula/foundation-modules/people-and-digital-technology/ # Add lang to end /link/to/page/@@ +ref: /curricula/foundation-modules/people-and-digital-technology/ # Do not change github: repository: w3c/wai-curricula - path: content/foundation/people-and-digital-technology.md + path: content/foundation/people-and-digital-technology.md # Add lang to the middle of the filename, e.g., index.@@.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ -footer: > +footer: > # Translate words below, including "Date:" and "Editor:". (Do not update the date.)

Date: Updated 4 March 2021. First published December 2019. CHANGELOG

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

diff --git a/content/foundation/principles-standards-and-checks.md b/content/foundation/principles-standards-and-checks.md index aef160d3f..e18c968d6 100644 --- a/content/foundation/principles-standards-and-checks.md +++ b/content/foundation/principles-standards-and-checks.md @@ -1,16 +1,21 @@ --- title: "Module 4: Principles, Standards, and Checks" nav_title: "Principles, Standards, and Checks" -permalink: /curricula/foundation-modules/principles-standards-and-checks/ -ref: /curricula/foundation-modules/principles-standards-and-checks/ -lang: en + +lang: en # change "en" to lang code, here and 2 @@s below +last_updated: 2021-03-04 # Change to date of translation YYYY-MM-DD (month in middle) +# translator: "..." +# contributors: "..." + +permalink: /curricula/foundation-modules/principles-standards-and-checks/ # Add lang to end /link/to/page/@@ +ref: /curricula/foundation-modules/principles-standards-and-checks/ # Do not change github: repository: w3c/wai-curricula - path: content/foundation/principles-standards-and-checks.md + path: content/foundation/principles-standards-and-checks.md # Add lang to the middle of the filename, e.g., index.@@.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ -footer: > +footer: > # Translate words below, including "Date:" and "Editor:". (Do not update the date.)

Date: Updated 4 March 2021. First published December 2019. CHANGELOG

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

diff --git a/content/foundation/what-is-web-accessibility.md b/content/foundation/what-is-web-accessibility.md index d5cb9185e..013e591f5 100644 --- a/content/foundation/what-is-web-accessibility.md +++ b/content/foundation/what-is-web-accessibility.md @@ -1,16 +1,21 @@ --- title: "Module 1: What is Web Accessibility" nav_title: "What is Web Accessibility" -permalink: /curricula/foundation-modules/what-is-web-accessibility/ -ref: /curricula/foundation-modules/what-is-web-accessibility/ -lang: en + +lang: en # change "en" to lang code, here and 2 @@s below +last_updated: 2021-03-04 # Change to date of translation YYYY-MM-DD (month in middle) +# translator: "..." +# contributors: "..." + +permalink: /curricula/foundation-modules/what-is-web-accessibility/ # Add lang to end /link/to/page/@@ +ref: /curricula/foundation-modules/what-is-web-accessibility/ # Do not change github: repository: w3c/wai-curricula - path: content/foundation/what-is-web-accessibility.md + path: content/foundation/what-is-web-accessibility.md # Add lang to the middle of the filename, e.g., index.@@.md # Add lang to the middle of the filename, e.g., index.@@.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ -footer: > +footer: > # Translate words below, including "Date:" and "Editor:". (Do not update the date.)

Date: Updated 4 March 2021. First published December 2019. CHANGELOG

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

diff --git a/content/index.md b/content/index.md index d160a4262..30319e003 100755 --- a/content/index.md +++ b/content/index.md @@ -2,16 +2,21 @@ title: "Curricula on Web Accessibility: A Framework to Build Your Own Courses" title_html: "Curricula on Web Accessibility:
A Framework to Build Your Own Courses" nav_title: "Curricula on Web Accessibility" -permalink: /curricula/ -ref: /curricula/ -lang: en + +lang: en # change "en" to lang code, here and 2 @@s below +last_updated: 2021-03-04 # Change to date of translation YYYY-MM-DD (month in middle) +# translator: "..." +# contributors: "..." + +permalink: /curricula/ # Add lang to end /link/to/page/@@ +ref: /curricula/ # Do not change github: repository: w3c/wai-curricula - path: content/index.md + path: content/index.md # Add lang to the middle of the filename, e.g., index.@@.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ -footer: > +footer: > # Translate words below, including "Date:" and "Editor:". (Do not update the date.)

Date: Updated 4 March 2021. First published December 2019.

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

From 649a399e0f6de12872896b6efdb1f0280267334a Mon Sep 17 00:00:00 2001 From: steve lee Date: Thu, 8 Jul 2021 11:22:38 +0100 Subject: [PATCH 182/416] Use shared navigation.yml --- _data/navigation.yml | 423 +------------------------------------------ 1 file changed, 1 insertion(+), 422 deletions(-) mode change 100644 => 120000 _data/navigation.yml diff --git a/_data/navigation.yml b/_data/navigation.yml deleted file mode 100644 index 1794f0a7d..000000000 --- a/_data/navigation.yml +++ /dev/null @@ -1,422 +0,0 @@ -- name: - en: 'Accessibility Fundamentals' - # de: 'Grundlagen der Barrierefreiheit' - # fr: 'Principes fondamentaux de l’accessibilité' - # es: 'Fundamentos de accesibilidad' - # it: 'Fondamenti di accessibilità' - # nl: 'Toegankelijkheid-Fundamentals' - # pl: 'Podstawy ułatwień dostępu' - # ar: 'أساسيات التشغيل' - # ja: 'アクセシビリティの基礎' - # ko: '내게 필요한 옵션 기본' - # ru: 'Доступность основы' - # zh-hans: '辅助功能基础知识' - pages: - - name: Introduction to Accessibility - url: "/fundamentals/accessibility-intro/" - pages: - - name: - en: 'Video Introduction' - de: 'Video-Einführung' - fr: 'Vidéo : introduction' - es: 'Vídeo de Introducción' - nl: 'Video-introductie' - url: /videos/standards-and-benefits/ - pages: - - name: - en: Changelog - de: 'Änderungsprotokoll' - nl: 'Changelog.' - el: 'Change log' - zh-hans: '修改日志' - fr: 'Changements' - es: 'Registro de cambios' - url: /videos/standards-and-benefits/changelog/ - hide: true - - name: Components of Web Accessibility - url: "/fundamentals/components/" - - name: Accessibility Principles - url: "/fundamentals/accessibility-principles/" - - name: Perspectives Videos - url: "/perspective-videos/" - pages: - - name: Keyboard Compatibility - url: "/perspective-videos/keyboard/" - - name: Colors with Good Contrast - url: "/perspective-videos/contrast/" - - name: Clear Layout and Design - url: "/perspective-videos/layout/" - - name: Text to Speech - url: "/perspective-videos/speech/" - - name: Large Links, Buttons, and Controls - url: "/perspective-videos/controls/" - - name: Video Captions - url: "/perspective-videos/captions/" - - name: Customizable Text - url: "/perspective-videos/customizable/" - - name: Voice Recognition - url: "/perspective-videos/voice/" - - name: Understandable Content - url: "/perspective-videos/understandable/" - - name: Notifications and Feedback - url: "/perspective-videos/notifications/" - - name: - en: How People with Disabilities Use the Web - fr: "Comment utilise-t-on le Web avec un handicap ?" - url: "/people-use-web/" - pages: - - name: - en: Stories of Web Users - fr: Quelques utilisateurs du Web - url: "/people-use-web/user-stories/" - - name: - en: Diverse Abilities and Barriers - fr: Des capacités et des points bloquants variés - url: "/people-use-web/abilities-barriers/" - - name: - en: Tools and Techniques - fr: Outils et techniques - url: "/people-use-web/tools-techniques/" - - name: Older Users and Accessibility - url: "/older-users/" - pages: - - name: How WCAG 2 Applies - url: "/older-users/developing/" - - name: Literature Review - url: "/older-users/literature/" - - name: Accessibility, Usability, Inclusion - url: "/fundamentals/accessibility-usability-inclusion/" -- name: - en: 'Planning & Policies' - # de: 'Planung & Richtlinien' - # fr: 'Planification & Politiques' - # es: 'Planificación y Políticas' - # it: 'Pianificazione & Politiche' - # nl: 'Planning & Beleid' - # pl: 'Planowanie & Zasady działalności' - # ar: 'تخطيط آند السياسات' - # ja: '計画・政策' - # ko: '계획 및 정책' - # ru: 'Планирование & политики' - # zh-hans: '规划和政策' - pages: - - name: Overview - url: "/planning/" - - name: Approaches for Interim Repairs - url: "/planning/interim-repairs/" - - name: Planning and Managing Accessibility - url: "/planning-and-managing/" - pages: - - name: Initiate - url: "/planning-and-managing/initiate/" - - name: Plan - url: "/planning-and-managing/plan/" - - name: Implement - url: "/planning-and-managing/implement/" - - name: Sustain - url: "/planning-and-managing/sustain/" - - name: Developing an Organizational Policy - url: "/planning/org-policies/" - - name: Involving Users for Better Accessibility - url: "/planning/involving-users/" - - name: International Laws & Policies - url: "/policies/" -- name: - en: 'Design & Develop' - # de: 'Designen & Entwickeln' - # fr: 'Concevoir & Développer' - # es: 'Diseñar y Desarrollar' - # it: 'Progettare e Sviluppare' - # nl: 'Ontwerp & Ontwikkelen' - # pl: 'Projektowanie & Rozwijać' - # ar: 'تصميم & تطوير' - # ja: '設計・開発' - # ko: '디자인 및 개발' - # ru: 'Дизайн & Pазвивать' - # zh-hans: '设计与开发' - pages: - - name: Overview - url: "/design-develop/" - - name: Tips for Writing - url: "/tips/writing/" - - name: Tips for Designing - url: "/tips/designing/" - - name: Tips for Developing - url: "/tips/developing/" - - name: Tutorials - url: "https://www.w3.org/WAI/tutorials/" - different: true - pages: - - name: Page Structure - url: "https://www.w3.org/WAI/tutorials/page-structure/" - different: true - - name: Menus - url: "https://www.w3.org/WAI/tutorials/menus/" - different: true - - name: Images - url: "https://www.w3.org/WAI/tutorials/images/" - different: true - - name: Tables - url: "https://www.w3.org/WAI/tutorials/tables/" - different: true - - name: Forms - url: "https://www.w3.org/WAI/tutorials/forms/" - different: true - - name: Carousels - url: "https://www.w3.org/WAI/tutorials/carousels/" - different: true - -- name: - en: 'Test & Evaluate' - # de: 'Testen & Bewerten' - # fr: 'Test & Évaluer' - # es: 'Probar y Evaluar' - # it: 'Prova & Valutare' - # nl: 'Test & Evalueren' - # pl: 'Przetestować & Oceny' - # ar: 'اختبار & تقييم' - # ja: 'テスト ・評価' - # ko: '테스트 및 평가' - # ru: 'Протестировать & оценить' - # zh-hans: '测试和评估' - pages: - - name: Evaluation Overview - url: "/test-evaluate/" - - name: Easy Checks – A First Review - url: "/test-evaluate/preliminary/" - - name: Evaluation Tools - url: "/test-evaluate/tools/" - pages: - - name: Selecting Evaluation Tools - url: "/test-evaluate/tools/selecting/" - - name: List of Evaluation Tools - url: "https://www.w3.org/WAI/ER/tools/" - different: true - - name: Conformance Evaluation - url: "/test-evaluate/conformance/" - pages: - - name: WCAG-EM Conformance Methodology - url: "/test-evaluate/conformance/wcag-em/" - - name: WCAG-EM Report Tool - url: "https://www.w3.org/WAI/eval/report-tool/#/" - different: true - - name: Report Template - url: "/test-evaluate/report-template/" - - name: Using Combined Expertise - url: "/test-evaluate/combined-expertise/" - - name: Involving Users - url: "/test-evaluate/involving-users/" - -- name: - en: 'Teach & Advocate' - # de: 'Lehren & Befürworten' - # fr: 'Enseigner & Promouvoir' - # es: 'Enseñar y Promover' - # it: 'Insegnare & Avvocato' - # nl: 'Leren & Advocaat' - # pl: 'Uczyć & Rzecznika' - # ar: 'تعليم & الدعوة' - # ja: '教える・提唱' - # ko: '가르치는 & 옹호' - # ru: 'Научить & адвокат' - # zh-hans: '教学和倡导' - pages: - - name: Overview - url: "/teach-advocate/" - - name: Curricula on Web Accessibility - url: "/curricula/" - pages: - - name: Foundation Modules - url: "/curricula/foundation-modules/" - pages: - - name: What is Web Accessibility - url: "/curricula/foundation-modules/what-is-web-accessibility/" - - name: People and Digital Technology - url: "/curricula/foundation-modules/people-and-digital-technology/" - - name: Business Case and Benefits - url: "/curricula/foundation-modules/business-case-and-benefits/" - - name: Principles, Standards, and Checks - url: "/curricula/foundation-modules/principles-standards-and-checks/" - - name: Getting Started with Accessibility - url: "/curricula/foundation-modules/getting-started-with-accessibility/" - - name: Understanding and Involving Users - url: "/curricula/foundation-modules/understanding-and-involving-users/" - - name: Developer Modules - url: "/curricula/developer-modules/" - pages: - - name: Page Structure - url: "/curricula/developer-modules/page-structure/" - - name: Menus - url: "/curricula/developer-modules/menus/" - - name: Images - url: "/curricula/developer-modules/images/" - - name: Tables - url: "/curricula/developer-modules/tables/" - - name: Forms - url: "/curricula/developer-modules/forms/" - - name: Custom Widgets - url: "/curricula/developer-modules/custom-widgets/" - - name: Rich Applications - url: "/curricula/developer-modules/rich-applications/" - - name: Designer Modules - url: "/curricula/designer-modules/" - pages: - - name: Flexible Layout and Design - url: "/curricula/designer-modules/flexible-layout-and-design/" - - name: Navigation - url: "/curricula/designer-modules/navigation/" - - name: Information Design - url: "/curricula/designer-modules/information-design/" - - name: Images and Graphics - url: "/curricula/designer-modules/images-and-graphics/" - - name: Multimedia and Animations - url: "/curricula/designer-modules/multimedia-and-animations/" - - name: Interaction and Feedback - url: "/curricula/designer-modules/interaction-and-feedback/" - - name: Changelog - url: "/curricula/changelog/" - hide: true - - name: Make Presentations Accessible - url: "/teach-advocate/accessible-presentations/" - - name: Develop Accessibility Training - url: "/teach-advocate/accessibility-training/" - pages: - - name: Topics - url: "/teach-advocate/accessibility-training/topics/" - - name: Presentation Outlines - url: "/teach-advocate/accessibility-training/presentation-outlines/" - - name: Workshop Outline - url: "/teach-advocate/accessibility-training/workshop-outline/" -# - name: Presentations You Can Use -# url: "/teach-advocate/presentations-to-use/" - - name: Before and After Demo (BAD) - url: "https://www.w3.org/WAI/demos/bad/" - different: true - - name: Contacting Inaccessible Websites - url: "/teach-advocate/contact-inaccessible-websites/" - - name: Business Case - url: "/teach-advocate/business-case/" - pages: - - name: Bibliography - url: "/teach-advocate/business-case/bibliography/" - # pages: - # - name: Social Factors - # url: "/business-case/social-factors/" - # - name: Technical Factors - # url: "/business-case/technical-factors/" - # - name: Financial Factors - # url: "/business-case/financial-factors/" - # - name: Legal & Policy Factors - # url: "/business-case/legal-policy-factors/" - # - name: Resources - # url: "/business-case/resources/" - -- name: - en: 'Standards/Guidelines' - # de: 'Normen/Richtlinien' - # fr: 'Normes/lignes directrices' - # es: 'Normas/directrices' - # it: 'Norme/linee guida' - # nl: 'Normen/Guidelines/nl' - # pl: 'Standardy/wytyczne' - # ar: 'المعايير/المبادئ التوجيهية' - # ja: '規格/ガイドライン' - # ko: '표준/지침' - # ru: 'Стандарты и руководящие принципы' - # zh-hans: '标准/准则' - pages: - - name: Standards Overview - url: "/standards-guidelines/" - - name: Web Content – WCAG - url: "/standards-guidelines/wcag/" - pages: - - name: "How to Meet WCAG 2 (Quick Reference)" - url: "https://www.w3.org/WAI/WCAG21/quickref/" - different: true - - name: "At a Glance" - url: "/standards-guidelines/wcag/glance/" - - name: The Documents - url: "/standards-guidelines/wcag/docs/" - - name: New in 2.1 - url: "/standards-guidelines/wcag/new-in-21/" - - name: Translations - url: "/standards-guidelines/wcag/translations/" - - name: "Applying to Non-Web ICT" - url: "/standards-guidelines/wcag/non-web-ict/" - - name: "Commenting" - url: "/standards-guidelines/wcag/commenting/" - - name: "Conformance Logos" - url: "/standards-guidelines/wcag/conformance-logos/" - - name: FAQ - url: "/standards-guidelines/wcag/faq/" - - name: Authoring Tools – ATAG - url: "/standards-guidelines/atag/" - - name: User Agents – UAAG - url: "/standards-guidelines/uaag/" - - name: WAI-ARIA - url: "/standards-guidelines/aria/" - - name: Evaluation – ACT & EARL - url: "/standards-guidelines/evaluation/" - pages: - - name: Accessibility Conformance Testing – ACT - url: "/standards-guidelines/act/" - - name: Evaluation and Report Language – EARL - url: "/standards-guidelines/earl/" - - name: Standards Harmonization is Essential - url: "/standards-guidelines/harmonization/" - - name: W3C Process for Developing Standards - url: "/standards-guidelines/w3c-process/" - - name: Referencing and Linking to Standards - url: "/standards-guidelines/linking/" - - name: Mobile Accessibility at W3C - url: "/standards-guidelines/mobile/" - -- name: "About W3C WAI" - mainnav: false - pages: - - name: About WAI - url: "/about/" - - name: Participating - url: "/about/participating/" - - name: Translating - url: "/about/translating/" - - name: Contacting - url: "/about/contacting/" - - name: Sponsoring - url: "/about/sponsoring/" - - name: Projects - url: "/about/projects/" - pages: - - name: WAI-Guide - url: "/about/projects/wai-guide/" - - name: WAI-Tools - url: "/about/projects/wai-tools/" - pages: - - name: Online Symposium - url: "/about/projects/wai-tools/symposium/" - pages: - - name: Record - url: "/about/projects/wai-tools/symposium/record/" - - name: First Open Meeting - url: "/about/projects/wai-tools/first-open-meeting/" - - name: WAI-Core 2015 - url: "https://www.w3.org/WAI/CORE2015/" - different: true - - name: WAI-ACT - url: "https://www.w3.org/WAI/ACT/" - different: true - - name: Groups - url: "/about/groups/" - pages: - - name: 'AGWG: Accessibility Guidelines WG' - url: "https://www.w3.org/WAI/GL/" - - name: 'APA: Accessible Platform WG' - url: "https://www.w3.org/WAI/APA/" - - name: 'ARIA: Accessible Rich Internet Applications WG' - url: "https://www.w3.org/WAI/ARIA/" - - name: 'EOWG: Education and Outreach WG' - url: "/about/groups/eowg/" - - name: 'WAI IG: WAI Interest Group' - url: "/about/groups/waiig/" - - name: 'Group Task Forces' - url: "/about/groups/taskforces/" diff --git a/_data/navigation.yml b/_data/navigation.yml new file mode 120000 index 000000000..0daff3b2b --- /dev/null +++ b/_data/navigation.yml @@ -0,0 +1 @@ +../_external/data/navigation.yml \ No newline at end of file From 975842e5ac6805a78ca08dba96594c4eb9415838 Mon Sep 17 00:00:00 2001 From: steve lee Date: Thu, 8 Jul 2021 13:44:01 +0100 Subject: [PATCH 183/416] Update dets due to dependabot warning --- Gemfile.lock | 36 ++++++++++++++++++++++++------------ _external/data | 2 +- 2 files changed, 25 insertions(+), 13 deletions(-) diff --git a/Gemfile.lock b/Gemfile.lock index 89fc0bb6b..4f7a6778f 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -15,25 +15,37 @@ PATH GEM remote: https://rubygems.org/ specs: - addressable (2.7.0) + addressable (2.8.0) public_suffix (>= 2.0.2, < 5.0) colorator (1.1.0) - concurrent-ruby (1.1.8) + concurrent-ruby (1.1.9) em-websocket (0.5.2) eventmachine (>= 0.12.9) http_parser.rb (~> 0.6.0) eventmachine (1.2.7) eventmachine (1.2.7-x64-mingw32) - faraday (1.3.0) + faraday (1.5.0) + faraday-em_http (~> 1.0) + faraday-em_synchrony (~> 1.0) + faraday-excon (~> 1.1) + faraday-httpclient (~> 1.0.1) faraday-net_http (~> 1.0) + faraday-net_http_persistent (~> 1.1) + faraday-patron (~> 1.0) multipart-post (>= 1.2, < 3) - ruby2_keywords + ruby2_keywords (>= 0.0.4) + faraday-em_http (1.0.0) + faraday-em_synchrony (1.0.0) + faraday-excon (1.1.0) + faraday-httpclient (1.0.1) faraday-net_http (1.0.1) - ffi (1.15.0) - ffi (1.15.0-x64-mingw32) + faraday-net_http_persistent (1.1.0) + faraday-patron (1.0.0) + ffi (1.15.3) + ffi (1.15.3-x64-mingw32) forwardable-extended (2.6.0) http_parser.rb (0.6.0) - i18n (1.8.9) + i18n (1.8.10) concurrent-ruby (~> 1.0) jekyll (4.2.0) addressable (~> 2.4) @@ -78,24 +90,24 @@ GEM kramdown-parser-gfm (1.1.0) kramdown (~> 2.0) liquid (4.0.3) - listen (3.5.0) + listen (3.5.1) rb-fsevent (~> 0.10, >= 0.10.3) rb-inotify (~> 0.9, >= 0.9.10) mercenary (0.4.0) multipart-post (2.1.1) - octokit (4.20.0) + octokit (4.21.0) faraday (>= 0.9) sawyer (~> 0.8.0, >= 0.5.3) pathutil (0.16.2) forwardable-extended (~> 2.6) public_suffix (4.0.6) - rb-fsevent (0.10.4) + rb-fsevent (0.11.0) rb-inotify (0.10.1) ffi (~> 1.0) - rexml (3.2.4) + rexml (3.2.5) rouge (3.26.0) ruby2_keywords (0.0.4) - rubyzip (2.3.0) + rubyzip (2.3.2) safe_yaml (1.0.5) sassc (2.4.0) ffi (~> 1.9) diff --git a/_external/data b/_external/data index 05a623b06..2597342bd 160000 --- a/_external/data +++ b/_external/data @@ -1 +1 @@ -Subproject commit 05a623b0649cb13b2fd9d184e334bf0c6de08f52 +Subproject commit 2597342bd8b9736e67ef5086c0a9970bf10021ef From 6c2b4a22ac806cdd12da58a28d4379556223d1b5 Mon Sep 17 00:00:00 2001 From: "Shawn Lawton Henry (fka slhenry)" Date: Mon, 26 Jul 2021 16:27:44 -0500 Subject: [PATCH 184/416] minor typo fix --- content/designer/designer-modules.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 8df7714aa..c12ebc7ea 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -71,7 +71,7 @@ The designer modules are designed for students who have achieved the learning ou - [Topic: Menu Behaviors and Patterns](/curricula/designer-modules/navigation/#topic-menu-behaviors-and-patterns) - [Topic: Other Navigation Mechanisms](/curricula/designer-modules/navigation/#topic-other-navigation-mechanisms) - [Topic: Location](/curricula/designer-modules/navigation/#topic-location) -- [Module 3: InformationDesign](/curricula/designer-modules/information-design/) +- [Module 3: Information Design](/curricula/designer-modules/information-design/) - [Topic: Textual Information](/curricula/designer-modules/information-design/#topic-textual-information) - [Topic: Tabular Information](/curricula/designer-modules/information-design/#topic-tabular-information) - [Topic: Forms and Controls](/curricula/designer-modules/information-design/#topic-forms-and-controls) @@ -88,4 +88,4 @@ The designer modules are designed for students who have achieved the learning ou - [Topic: Gestures and Motion](/curricula/designer-modules/interaction-and-feedback/#topic-gestures-and-motion) - [Topic: Labels and Instructions](/curricula/designer-modules/interaction-and-feedback/#topic-labels-and-instructions) - [Topic: Errors and Notifications](/curricula/designer-modules/interaction-and-feedback/#topic-errors-and-notifications) - \ No newline at end of file + From 1911688483b7af777e37550c22b281a8f0a9ab53 Mon Sep 17 00:00:00 2001 From: "Shawn Lawton Henry (fka slhenry)" Date: Mon, 26 Jul 2021 16:36:12 -0500 Subject: [PATCH 185/416] add primary WAI resource --- content/designer/multimedia-and-animations.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 698e17e93..088550a85 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -191,6 +191,7 @@ Optional ideas to assess knowledge: Suggested resources to support your teaching: +* [Making Audio and Video Media Accessible](https://www.w3.org/WAI/media/av/) — Covers captions/subtitles, audio description of visual information, descriptive transcripts, and sign language. Includes guidance for creating new videos, and on media player accessibility. Introduces user experiences and benefits to organizations. * [Video Captions (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/captions/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. * [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. From 8bfae6ab4310002c03c7ebe0cfe931848174e4c6 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 27 Jul 2021 11:59:26 +0200 Subject: [PATCH 186/416] Prototype Design -> Prototyping --- content/designer/flexible-layout-and-design.md | 4 ++-- content/designer/images-and-graphics.md | 4 ++-- content/designer/information-design.md | 4 ++-- content/designer/interaction-and-feedback.md | 4 ++-- content/designer/multimedia-and-animations.md | 4 ++-- content/designer/navigation.md | 4 ++-- 6 files changed, 12 insertions(+), 12 deletions(-) diff --git a/content/designer/flexible-layout-and-design.md b/content/designer/flexible-layout-and-design.md index c310a0f1b..67c9b5c27 100644 --- a/content/designer/flexible-layout-and-design.md +++ b/content/designer/flexible-layout-and-design.md @@ -59,7 +59,7 @@ Skills required for this module: * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Basic knowledge of: * Visual Design - * Prototype Design + * Prototyping * Responsive Design {% include excol.html type="end" %} @@ -89,7 +89,7 @@ Skills required for this module: * In-depth knowledge of: * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Visual Design - * Prototype Design + * Prototyping * Responsive Design {% include excol.html type="end" %} diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 1ec76e40f..6997a6e30 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -58,7 +58,7 @@ Skills required for this module: * [Module 3: Information Design](/curricula/designer-modules/information-design/) * Basic knowledge of: * Visual Design - * Prototype Design + * Prototyping * Responsive Design * Information Architecture @@ -77,7 +77,7 @@ Skills required for this module: * In-depth knowledge of: * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Visual Design - * Prototype Design + * Prototyping * Responsive Design * Information Architecture diff --git a/content/designer/information-design.md b/content/designer/information-design.md index dbe1b5185..0bafd9532 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -56,7 +56,7 @@ Skills required for this module: * [Module 2: Navigation](/curricula/designer-modules/navigation/) * Basic knowledge of: * Visual Design - * Prototype Design + * Prototyping * Responsive Design * Information Architecture @@ -79,7 +79,7 @@ Skills required for this module: * In-depth knowledge of: * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Visual Design - * Prototype Design + * Prototyping * Responsive Design * Information Architecture diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 8f690d756..adee6f38c 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -57,7 +57,7 @@ Skills required for this module: * Prior [Designer Modules](/curricula/designer-modules/) * Knowledge of: * Visual Design - * Prototype Design + * Prototyping * Responsive Design * Information Design * Interaction Design @@ -98,7 +98,7 @@ Skills required for this module: * In-depth knowledge of: * [Prerequisites for students](/curricula/designer-modules/#prerequisites-for-students) * Visual Design - * Prototype Design + * Prototyping * Responsive Design * Information Design * Interaction Design diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 698e17e93..b852de36a 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -58,7 +58,7 @@ Skills required for this module: * [Module 3: Information Design](/curricula/designer-modules/information-design/) * Basic knowledge of: * Visual Design - * Prototype Design + * Prototyping * Responsive Design * Information Architecture @@ -85,7 +85,7 @@ Skills required for this module: * In-depth knowledge of: * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Visual Design - * Prototype Design + * Prototyping * Responsive Design * Information Architecture diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 00798d970..13ead72ab 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -58,7 +58,7 @@ Skills required for this module: * Basic knowledge of: * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Visual Design - * Prototype Design + * Prototyping * Responsive Design * Information Architecture @@ -83,7 +83,7 @@ Skills required for this module: * In-depth knowledge of: * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Visual Design - * Prototype Design + * Prototyping * Responsive Design * Information Architecture From a632ca3132a7a92c2005b2aaa54c06e32c565589 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 27 Jul 2021 12:00:35 +0200 Subject: [PATCH 187/416] Updating submodule --- _external/data | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_external/data b/_external/data index 05a623b06..2597342bd 160000 --- a/_external/data +++ b/_external/data @@ -1 +1 @@ -Subproject commit 05a623b0649cb13b2fd9d184e334bf0c6de08f52 +Subproject commit 2597342bd8b9736e67ef5086c0a9970bf10021ef From 7f18b9858c6d5d1485c41253d7f9fac8e63a809c Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 27 Jul 2021 12:13:29 +0200 Subject: [PATCH 188/416] set of websites -> set of web pages --- content/designer/navigation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 13ead72ab..da826e206 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -199,7 +199,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of breadcrumb trails. Explain that they provide information about the users location in the context of a set of websites. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail](https://www.w3.org/WAI/WCAG21/Techniques/general/G65). +* Show examples of breadcrumb trails. Explain that they provide information about the users location in the context of a set of web pages. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail](https://www.w3.org/WAI/WCAG21/Techniques/general/G65). * Invite students to give examples of page titles they are familiar with and reflect with them on how well the titles describe the page contents. Explain that page titles are useful to identify the purpose of a specific web page within a set of web pages. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page, as some mobile browsers and assistive technologies do not show the information on the title. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). #### Ideas to Assess Knowledge From 189410ede2c8faf4276426ae030896a898c347eb Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 27 Jul 2021 13:37:48 +0200 Subject: [PATCH 189/416] Correcting wrong module number --- content/designer/information-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 0bafd9532..e843da7e1 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -95,7 +95,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Refer back to [Module 3: Navigation](/curricula/designer-modules/navigation/). Discuss ways to split large amounts of text into smaller pieces. For example, using headings and their corresponding rank levels, pages to split the contents into logical units, and chapter markers to indicate chapters in digital publications. +Refer back to [Module 2: Navigation](/curricula/designer-modules/navigation/). Discuss ways to split large amounts of text into smaller pieces. For example, using headings and their corresponding rank levels, pages to split the contents into logical units, and chapter markers to indicate chapters in digital publications. Discuss the use of icons and other visual cues to help people understand processess and instructions presented in text. From 3dee74b59972ace4b3fd26950035eba5f17bd2f7 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 27 Jul 2021 13:39:25 +0200 Subject: [PATCH 190/416] Adding Module 4 Images and Graphics to prerequisites --- content/designer/multimedia-and-animations.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index b852de36a..d56eaa255 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -56,6 +56,7 @@ Skills required for this module: * [Module 1: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design/) * [Module 2: Navigation](/curricula/designer-modules/navigation/) * [Module 3: Information Design](/curricula/designer-modules/information-design/) +* [Module 4: Images and Graphics](/curricula/designer-modules/images-and-graphics) * Basic knowledge of: * Visual Design * Prototyping From 8056a42209058479dbe6611ffb269e085dd2cb0d Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 27 Jul 2021 13:47:39 +0200 Subject: [PATCH 191/416] Remove duplicate link with prerequisites for students --- content/designer/navigation.md | 1 - 1 file changed, 1 deletion(-) diff --git a/content/designer/navigation.md b/content/designer/navigation.md index da826e206..a8ca24840 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -56,7 +56,6 @@ Skills required for this module: * [Prerequisites for Students](/curricula/designer-modules/#prerequisites-for-students) * [Module 1: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design/) from [Designer Modules](/curricula/designer-modules/) * Basic knowledge of: - * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) * Visual Design * Prototyping * Responsive Design From 4e99ab8425cc7c6dd48d9adeaba1aa3dfca907f9 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 28 Jul 2021 10:16:29 +0200 Subject: [PATCH 192/416] Fixed typo --- content/designer/flexible-layout-and-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/flexible-layout-and-design.md b/content/designer/flexible-layout-and-design.md index 67c9b5c27..df44dea62 100644 --- a/content/designer/flexible-layout-and-design.md +++ b/content/designer/flexible-layout-and-design.md @@ -150,7 +150,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different regions of web pages, such as header, navigation, main, and footer. Explain that several groups of people with disabilities rely on visual and programatic landmarks to perceive such regions. Explain that defining landmarks and their styling is a designers' responsibility, whereas implementing such landmarks and their semantics is a developers' responsibility. +* Show examples of different regions of web pages, such as header, navigation, main, and footer. Explain that several groups of people with disabilities rely on visual and programmatic landmarks to perceive such regions. Explain that defining landmarks and their styling is a designers' responsibility, whereas implementing such landmarks and their semantics is a developers' responsibility. * Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a form field is required and those with colors to convey available dates in a calendar. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). * Invite students to navigate a web page with appropriate focus indicators first, and then invite them to navigate a web page without focus indicators. Explain how focus indicators allow people using the keyboard only to determine where they are as they move through web pages and applications using the keyboard only. For reference on how to provide appropriate focus indicators, see techniques [G149: Using user interface components that are highlighted by the user agent when they receive focus](https://www.w3.org/WAI/WCAG21/Techniques/general/G149.html) and [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). From 44df5a802c0777b17340fba0be34ebc9ed923540 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 29 Jul 2021 12:39:07 +0200 Subject: [PATCH 193/416] Rolling back to previous navigation --- _data/navigation.yml | 423 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 422 insertions(+), 1 deletion(-) mode change 120000 => 100644 _data/navigation.yml diff --git a/_data/navigation.yml b/_data/navigation.yml deleted file mode 120000 index 0daff3b2b..000000000 --- a/_data/navigation.yml +++ /dev/null @@ -1 +0,0 @@ -../_external/data/navigation.yml \ No newline at end of file diff --git a/_data/navigation.yml b/_data/navigation.yml new file mode 100644 index 000000000..1794f0a7d --- /dev/null +++ b/_data/navigation.yml @@ -0,0 +1,422 @@ +- name: + en: 'Accessibility Fundamentals' + # de: 'Grundlagen der Barrierefreiheit' + # fr: 'Principes fondamentaux de l’accessibilité' + # es: 'Fundamentos de accesibilidad' + # it: 'Fondamenti di accessibilità' + # nl: 'Toegankelijkheid-Fundamentals' + # pl: 'Podstawy ułatwień dostępu' + # ar: 'أساسيات التشغيل' + # ja: 'アクセシビリティの基礎' + # ko: '내게 필요한 옵션 기본' + # ru: 'Доступность основы' + # zh-hans: '辅助功能基础知识' + pages: + - name: Introduction to Accessibility + url: "/fundamentals/accessibility-intro/" + pages: + - name: + en: 'Video Introduction' + de: 'Video-Einführung' + fr: 'Vidéo : introduction' + es: 'Vídeo de Introducción' + nl: 'Video-introductie' + url: /videos/standards-and-benefits/ + pages: + - name: + en: Changelog + de: 'Änderungsprotokoll' + nl: 'Changelog.' + el: 'Change log' + zh-hans: '修改日志' + fr: 'Changements' + es: 'Registro de cambios' + url: /videos/standards-and-benefits/changelog/ + hide: true + - name: Components of Web Accessibility + url: "/fundamentals/components/" + - name: Accessibility Principles + url: "/fundamentals/accessibility-principles/" + - name: Perspectives Videos + url: "/perspective-videos/" + pages: + - name: Keyboard Compatibility + url: "/perspective-videos/keyboard/" + - name: Colors with Good Contrast + url: "/perspective-videos/contrast/" + - name: Clear Layout and Design + url: "/perspective-videos/layout/" + - name: Text to Speech + url: "/perspective-videos/speech/" + - name: Large Links, Buttons, and Controls + url: "/perspective-videos/controls/" + - name: Video Captions + url: "/perspective-videos/captions/" + - name: Customizable Text + url: "/perspective-videos/customizable/" + - name: Voice Recognition + url: "/perspective-videos/voice/" + - name: Understandable Content + url: "/perspective-videos/understandable/" + - name: Notifications and Feedback + url: "/perspective-videos/notifications/" + - name: + en: How People with Disabilities Use the Web + fr: "Comment utilise-t-on le Web avec un handicap ?" + url: "/people-use-web/" + pages: + - name: + en: Stories of Web Users + fr: Quelques utilisateurs du Web + url: "/people-use-web/user-stories/" + - name: + en: Diverse Abilities and Barriers + fr: Des capacités et des points bloquants variés + url: "/people-use-web/abilities-barriers/" + - name: + en: Tools and Techniques + fr: Outils et techniques + url: "/people-use-web/tools-techniques/" + - name: Older Users and Accessibility + url: "/older-users/" + pages: + - name: How WCAG 2 Applies + url: "/older-users/developing/" + - name: Literature Review + url: "/older-users/literature/" + - name: Accessibility, Usability, Inclusion + url: "/fundamentals/accessibility-usability-inclusion/" +- name: + en: 'Planning & Policies' + # de: 'Planung & Richtlinien' + # fr: 'Planification & Politiques' + # es: 'Planificación y Políticas' + # it: 'Pianificazione & Politiche' + # nl: 'Planning & Beleid' + # pl: 'Planowanie & Zasady działalności' + # ar: 'تخطيط آند السياسات' + # ja: '計画・政策' + # ko: '계획 및 정책' + # ru: 'Планирование & политики' + # zh-hans: '规划和政策' + pages: + - name: Overview + url: "/planning/" + - name: Approaches for Interim Repairs + url: "/planning/interim-repairs/" + - name: Planning and Managing Accessibility + url: "/planning-and-managing/" + pages: + - name: Initiate + url: "/planning-and-managing/initiate/" + - name: Plan + url: "/planning-and-managing/plan/" + - name: Implement + url: "/planning-and-managing/implement/" + - name: Sustain + url: "/planning-and-managing/sustain/" + - name: Developing an Organizational Policy + url: "/planning/org-policies/" + - name: Involving Users for Better Accessibility + url: "/planning/involving-users/" + - name: International Laws & Policies + url: "/policies/" +- name: + en: 'Design & Develop' + # de: 'Designen & Entwickeln' + # fr: 'Concevoir & Développer' + # es: 'Diseñar y Desarrollar' + # it: 'Progettare e Sviluppare' + # nl: 'Ontwerp & Ontwikkelen' + # pl: 'Projektowanie & Rozwijać' + # ar: 'تصميم & تطوير' + # ja: '設計・開発' + # ko: '디자인 및 개발' + # ru: 'Дизайн & Pазвивать' + # zh-hans: '设计与开发' + pages: + - name: Overview + url: "/design-develop/" + - name: Tips for Writing + url: "/tips/writing/" + - name: Tips for Designing + url: "/tips/designing/" + - name: Tips for Developing + url: "/tips/developing/" + - name: Tutorials + url: "https://www.w3.org/WAI/tutorials/" + different: true + pages: + - name: Page Structure + url: "https://www.w3.org/WAI/tutorials/page-structure/" + different: true + - name: Menus + url: "https://www.w3.org/WAI/tutorials/menus/" + different: true + - name: Images + url: "https://www.w3.org/WAI/tutorials/images/" + different: true + - name: Tables + url: "https://www.w3.org/WAI/tutorials/tables/" + different: true + - name: Forms + url: "https://www.w3.org/WAI/tutorials/forms/" + different: true + - name: Carousels + url: "https://www.w3.org/WAI/tutorials/carousels/" + different: true + +- name: + en: 'Test & Evaluate' + # de: 'Testen & Bewerten' + # fr: 'Test & Évaluer' + # es: 'Probar y Evaluar' + # it: 'Prova & Valutare' + # nl: 'Test & Evalueren' + # pl: 'Przetestować & Oceny' + # ar: 'اختبار & تقييم' + # ja: 'テスト ・評価' + # ko: '테스트 및 평가' + # ru: 'Протестировать & оценить' + # zh-hans: '测试和评估' + pages: + - name: Evaluation Overview + url: "/test-evaluate/" + - name: Easy Checks – A First Review + url: "/test-evaluate/preliminary/" + - name: Evaluation Tools + url: "/test-evaluate/tools/" + pages: + - name: Selecting Evaluation Tools + url: "/test-evaluate/tools/selecting/" + - name: List of Evaluation Tools + url: "https://www.w3.org/WAI/ER/tools/" + different: true + - name: Conformance Evaluation + url: "/test-evaluate/conformance/" + pages: + - name: WCAG-EM Conformance Methodology + url: "/test-evaluate/conformance/wcag-em/" + - name: WCAG-EM Report Tool + url: "https://www.w3.org/WAI/eval/report-tool/#/" + different: true + - name: Report Template + url: "/test-evaluate/report-template/" + - name: Using Combined Expertise + url: "/test-evaluate/combined-expertise/" + - name: Involving Users + url: "/test-evaluate/involving-users/" + +- name: + en: 'Teach & Advocate' + # de: 'Lehren & Befürworten' + # fr: 'Enseigner & Promouvoir' + # es: 'Enseñar y Promover' + # it: 'Insegnare & Avvocato' + # nl: 'Leren & Advocaat' + # pl: 'Uczyć & Rzecznika' + # ar: 'تعليم & الدعوة' + # ja: '教える・提唱' + # ko: '가르치는 & 옹호' + # ru: 'Научить & адвокат' + # zh-hans: '教学和倡导' + pages: + - name: Overview + url: "/teach-advocate/" + - name: Curricula on Web Accessibility + url: "/curricula/" + pages: + - name: Foundation Modules + url: "/curricula/foundation-modules/" + pages: + - name: What is Web Accessibility + url: "/curricula/foundation-modules/what-is-web-accessibility/" + - name: People and Digital Technology + url: "/curricula/foundation-modules/people-and-digital-technology/" + - name: Business Case and Benefits + url: "/curricula/foundation-modules/business-case-and-benefits/" + - name: Principles, Standards, and Checks + url: "/curricula/foundation-modules/principles-standards-and-checks/" + - name: Getting Started with Accessibility + url: "/curricula/foundation-modules/getting-started-with-accessibility/" + - name: Understanding and Involving Users + url: "/curricula/foundation-modules/understanding-and-involving-users/" + - name: Developer Modules + url: "/curricula/developer-modules/" + pages: + - name: Page Structure + url: "/curricula/developer-modules/page-structure/" + - name: Menus + url: "/curricula/developer-modules/menus/" + - name: Images + url: "/curricula/developer-modules/images/" + - name: Tables + url: "/curricula/developer-modules/tables/" + - name: Forms + url: "/curricula/developer-modules/forms/" + - name: Custom Widgets + url: "/curricula/developer-modules/custom-widgets/" + - name: Rich Applications + url: "/curricula/developer-modules/rich-applications/" + - name: Designer Modules + url: "/curricula/designer-modules/" + pages: + - name: Flexible Layout and Design + url: "/curricula/designer-modules/flexible-layout-and-design/" + - name: Navigation + url: "/curricula/designer-modules/navigation/" + - name: Information Design + url: "/curricula/designer-modules/information-design/" + - name: Images and Graphics + url: "/curricula/designer-modules/images-and-graphics/" + - name: Multimedia and Animations + url: "/curricula/designer-modules/multimedia-and-animations/" + - name: Interaction and Feedback + url: "/curricula/designer-modules/interaction-and-feedback/" + - name: Changelog + url: "/curricula/changelog/" + hide: true + - name: Make Presentations Accessible + url: "/teach-advocate/accessible-presentations/" + - name: Develop Accessibility Training + url: "/teach-advocate/accessibility-training/" + pages: + - name: Topics + url: "/teach-advocate/accessibility-training/topics/" + - name: Presentation Outlines + url: "/teach-advocate/accessibility-training/presentation-outlines/" + - name: Workshop Outline + url: "/teach-advocate/accessibility-training/workshop-outline/" +# - name: Presentations You Can Use +# url: "/teach-advocate/presentations-to-use/" + - name: Before and After Demo (BAD) + url: "https://www.w3.org/WAI/demos/bad/" + different: true + - name: Contacting Inaccessible Websites + url: "/teach-advocate/contact-inaccessible-websites/" + - name: Business Case + url: "/teach-advocate/business-case/" + pages: + - name: Bibliography + url: "/teach-advocate/business-case/bibliography/" + # pages: + # - name: Social Factors + # url: "/business-case/social-factors/" + # - name: Technical Factors + # url: "/business-case/technical-factors/" + # - name: Financial Factors + # url: "/business-case/financial-factors/" + # - name: Legal & Policy Factors + # url: "/business-case/legal-policy-factors/" + # - name: Resources + # url: "/business-case/resources/" + +- name: + en: 'Standards/Guidelines' + # de: 'Normen/Richtlinien' + # fr: 'Normes/lignes directrices' + # es: 'Normas/directrices' + # it: 'Norme/linee guida' + # nl: 'Normen/Guidelines/nl' + # pl: 'Standardy/wytyczne' + # ar: 'المعايير/المبادئ التوجيهية' + # ja: '規格/ガイドライン' + # ko: '표준/지침' + # ru: 'Стандарты и руководящие принципы' + # zh-hans: '标准/准则' + pages: + - name: Standards Overview + url: "/standards-guidelines/" + - name: Web Content – WCAG + url: "/standards-guidelines/wcag/" + pages: + - name: "How to Meet WCAG 2 (Quick Reference)" + url: "https://www.w3.org/WAI/WCAG21/quickref/" + different: true + - name: "At a Glance" + url: "/standards-guidelines/wcag/glance/" + - name: The Documents + url: "/standards-guidelines/wcag/docs/" + - name: New in 2.1 + url: "/standards-guidelines/wcag/new-in-21/" + - name: Translations + url: "/standards-guidelines/wcag/translations/" + - name: "Applying to Non-Web ICT" + url: "/standards-guidelines/wcag/non-web-ict/" + - name: "Commenting" + url: "/standards-guidelines/wcag/commenting/" + - name: "Conformance Logos" + url: "/standards-guidelines/wcag/conformance-logos/" + - name: FAQ + url: "/standards-guidelines/wcag/faq/" + - name: Authoring Tools – ATAG + url: "/standards-guidelines/atag/" + - name: User Agents – UAAG + url: "/standards-guidelines/uaag/" + - name: WAI-ARIA + url: "/standards-guidelines/aria/" + - name: Evaluation – ACT & EARL + url: "/standards-guidelines/evaluation/" + pages: + - name: Accessibility Conformance Testing – ACT + url: "/standards-guidelines/act/" + - name: Evaluation and Report Language – EARL + url: "/standards-guidelines/earl/" + - name: Standards Harmonization is Essential + url: "/standards-guidelines/harmonization/" + - name: W3C Process for Developing Standards + url: "/standards-guidelines/w3c-process/" + - name: Referencing and Linking to Standards + url: "/standards-guidelines/linking/" + - name: Mobile Accessibility at W3C + url: "/standards-guidelines/mobile/" + +- name: "About W3C WAI" + mainnav: false + pages: + - name: About WAI + url: "/about/" + - name: Participating + url: "/about/participating/" + - name: Translating + url: "/about/translating/" + - name: Contacting + url: "/about/contacting/" + - name: Sponsoring + url: "/about/sponsoring/" + - name: Projects + url: "/about/projects/" + pages: + - name: WAI-Guide + url: "/about/projects/wai-guide/" + - name: WAI-Tools + url: "/about/projects/wai-tools/" + pages: + - name: Online Symposium + url: "/about/projects/wai-tools/symposium/" + pages: + - name: Record + url: "/about/projects/wai-tools/symposium/record/" + - name: First Open Meeting + url: "/about/projects/wai-tools/first-open-meeting/" + - name: WAI-Core 2015 + url: "https://www.w3.org/WAI/CORE2015/" + different: true + - name: WAI-ACT + url: "https://www.w3.org/WAI/ACT/" + different: true + - name: Groups + url: "/about/groups/" + pages: + - name: 'AGWG: Accessibility Guidelines WG' + url: "https://www.w3.org/WAI/GL/" + - name: 'APA: Accessible Platform WG' + url: "https://www.w3.org/WAI/APA/" + - name: 'ARIA: Accessible Rich Internet Applications WG' + url: "https://www.w3.org/WAI/ARIA/" + - name: 'EOWG: Education and Outreach WG' + url: "/about/groups/eowg/" + - name: 'WAI IG: WAI Interest Group' + url: "/about/groups/waiig/" + - name: 'Group Task Forces' + url: "/about/groups/taskforces/" From 2b3f7457c3478294ad6a71df508e3abddb2735bb Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 29 Jul 2021 15:51:05 +0200 Subject: [PATCH 194/416] Removing "Color alone" and emphasizing supplemental cues --- content/designer/flexible-layout-and-design.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/designer/flexible-layout-and-design.md b/content/designer/flexible-layout-and-design.md index df44dea62..49541089c 100644 --- a/content/designer/flexible-layout-and-design.md +++ b/content/designer/flexible-layout-and-design.md @@ -37,7 +37,7 @@ Courses based on this module should: Students should be able to: * explain how people with disabilities identify and distinguish user interface components based on different features, such as color, layout, spacing, and position -* design user interfaces with headings, landmarks, text cues, patterns, and icons to supplement information conveyed through color alone +* design user interfaces with headings, landmarks, text cues, patterns, and icons to supplement information conveyed through color * design user interfaces with adjustable font sizes and adequate spacing to support readability * design user interfaces with appropriate contrast ratios for text, images of text, and controls * design user interfaces with clear and distinguishable focus indicators, for example using borders, background color, and highlighting @@ -169,7 +169,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Describe how some people use color to understand and distinguish contents. Explain different ways to convey information that is presented using color alone, such as shapes and icons. +Describe how some people use color to understand and distinguish contents. Explain different ways to supplement information that is presented using color, such as using shapes and icons. Explain how contrast ratios are essential for people with low vision to perceive, distinguish, and understand contents. #### Learning Outcomes for Topic @@ -186,7 +186,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so alternative methods to convey that information are required. For references on how to convey information without using color alone, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). +* Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so supplemental methods to convey that information are required. For references on how to supplement information conveyed through color, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). * Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios for text (including images of text) need to be at least 4.5:1 with respect to their background. For references on how to apply contrast ratios to text (including images of text), see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). * Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. @@ -196,7 +196,7 @@ Optional ideas to assess knowledge: * Short Answer Questions — Give students a set of user interface components and ask them what the contrast ratio should be. Assess how students understand and distinguish contrast ratios for different user interface components. * Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components, and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing. -* Practical — Give students information presented using color alone and ask them to provide other visual cues to convey such information. Assess how students use shapes and icons to make information presented using color alone distinguishable. +* Practical — Give students information presented using color and ask them to supplement that information using other visual cues. Assess how students use shapes and icons to supplement information presented using color distinguishable. {% include excol.html type="end" %} From cc75816ddeeab4135297bab4317a3206064860f6 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 30 Jul 2021 10:11:43 +0200 Subject: [PATCH 195/416] Making intro self-contained --- content/designer/multimedia-and-animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 70d252266..96383c3c4 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -143,7 +143,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Show examples of different types of animations. Explain that animations can cause seizures and physical reactions for some people, so designers need to carefully consider the below when designing animations. +Show examples of moving content, such as animations. Explain that moving content can cause seizures and physical reactions to some people. Designers need to support pausing, stopping, or hiding any moving content, as well as to use flashing that is below the general flash and red flash ratios where possible. #### Learning Outcomes for Topic From 4542db634f91f5b5b6c1728c57358298aa8c6e9b Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 30 Jul 2021 10:52:38 +0200 Subject: [PATCH 196/416] Clarifying responsibilities --- content/designer/information-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index e843da7e1..6949d8fa2 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -97,7 +97,7 @@ Topics to achieve the learning outcomes: Refer back to [Module 2: Navigation](/curricula/designer-modules/navigation/). Discuss ways to split large amounts of text into smaller pieces. For example, using headings and their corresponding rank levels, pages to split the contents into logical units, and chapter markers to indicate chapters in digital publications. -Discuss the use of icons and other visual cues to help people understand processess and instructions presented in text. +Discuss the use of icons and other visual cues to help people understand processess and instructions presented in text. Explain that defining how to present these visual cues is a responsibility of the designer, whereas providing such cues is a responsibility shared with the content author. #### Learning Outcomes for Topic From 4c8052492362bc35e897a4db03420f22979ea75e Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 2 Aug 2021 09:25:06 +0200 Subject: [PATCH 197/416] People who is -> people who are --- content/designer/information-design.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 6949d8fa2..ba98258a8 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -120,8 +120,8 @@ Optional ideas to teach the learning outcomes: * Show examples of large amounts of text, for example in an eBook. Discuss several ways to divide the text both visually and programmatically so that it is easier to understand and to navigate. For example, by using headings and their corresponding rank levels together with pages and chapter markers to indicate the different chapters, sections, and subsections of content. * Show examples of diagrams and illustrations that can complement the information presented in text. For example, visual instructions that supplement the textual information of a user manual. Explain that they help users with reading disabilities understand difficult pieces of text. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). -* Show examples of words that may be difficult to understand or that are used in a restricted way. Explain that people who is not familiar with such words need definitions to understand their meaning. Explain that defining the mechanisms to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. -* Show examples of abbreviations, such as short forms of words and acronyms. Explain that people who is not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the mechanisms to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. +* Show examples of words that may be difficult to understand or that are used in a restricted way. Explain that people who are not familiar with such words need definitions to understand their meaning. Explain that defining the mechanisms to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. +* Show examples of abbreviations, such as short forms of words and acronyms. Explain that people who are not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the mechanisms to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. #### Ideas to Assess Knowledge for Topic From 365008d94b5d25c325cbf6a0f00601b9c3d778ab Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 2 Aug 2021 09:28:30 +0200 Subject: [PATCH 198/416] Ping -> pinch --- content/designer/interaction-and-feedback.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index adee6f38c..00272c7e3 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -179,7 +179,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments cannot perform such gestures, so user interfaces need to have alternatives that do not require motion for these gestures. -* Show examples of gestures such as swipe or ping. Explain that users with mobility impairments cannot perform such gestures, so user interfaces need to have alternatives that do not require swiping or pinching to perform an action. +* Show examples of gestures such as swipe or pinch. Explain that users with mobility impairments cannot perform such gestures, so user interfaces need to have alternatives that do not require swiping or pinching to perform an action. * Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events, so user interfaces need to support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. #### Ideas to Assess Knowledge for Topic From f75d4de1dceb25a977df83bf11085fd766790c86 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 2 Aug 2021 09:34:11 +0200 Subject: [PATCH 199/416] consume -> read --- content/designer/information-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index ba98258a8..50fad9eee 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -24,7 +24,7 @@ navigation: Courses based on this module should: -* present strategies for splitting large blocks of information into smaller pieces that are easier to consume and understand +* present strategies for splitting large blocks of information into smaller pieces that are easier to read and understand * present strategies for grouping information that shares a common purpose to make such information easier to understand ## Learning Outcomes for Module From c3e487c6afdcbc1ec506549b18da64d29e6f4e7e Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 2 Aug 2021 10:41:52 +0200 Subject: [PATCH 200/416] Introducing "Sufficient color contrast" --- content/designer/flexible-layout-and-design.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/flexible-layout-and-design.md b/content/designer/flexible-layout-and-design.md index 49541089c..0896972b7 100644 --- a/content/designer/flexible-layout-and-design.md +++ b/content/designer/flexible-layout-and-design.md @@ -39,7 +39,7 @@ Students should be able to: * explain how people with disabilities identify and distinguish user interface components based on different features, such as color, layout, spacing, and position * design user interfaces with headings, landmarks, text cues, patterns, and icons to supplement information conveyed through color * design user interfaces with adjustable font sizes and adequate spacing to support readability -* design user interfaces with appropriate contrast ratios for text, images of text, and controls +* design user interfaces with sufficient color contrast for text, images of text, and controls * design user interfaces with clear and distinguishable focus indicators, for example using borders, background color, and highlighting * design user interfaces that support positioning different regions and user interface components where users expect them * identify related requirements for developers to apply the necessary semantics to user interface components @@ -170,7 +170,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} Describe how some people use color to understand and distinguish contents. Explain different ways to supplement information that is presented using color, such as using shapes and icons. -Explain how contrast ratios are essential for people with low vision to perceive, distinguish, and understand contents. +Explain how sufficient color contrast (contrast ratios in WCAG) are essential for people with low vision to perceive, distinguish, and understand contents. #### Learning Outcomes for Topic From e04b0e2d64ebd95df350a097f328dd2d73770d77 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 2 Aug 2021 11:02:51 +0200 Subject: [PATCH 201/416] Texts/contents -> text/content --- .../designer/flexible-layout-and-design.md | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/content/designer/flexible-layout-and-design.md b/content/designer/flexible-layout-and-design.md index 0896972b7..3f73b2e0e 100644 --- a/content/designer/flexible-layout-and-design.md +++ b/content/designer/flexible-layout-and-design.md @@ -29,7 +29,7 @@ navigation: Courses based on this module should: -* explain how people with disabilities use different screen sizes, screen configurations, breakpoints, and style sheets to identify, distinguish, and process contents +* explain how people with disabilities use different screen sizes, screen configurations, breakpoints, and style sheets to identify, distinguish, and process content * explain accessibility requirements for user interface components that relate to color, layout, spacing, and position ## Learning Outcomes for Module @@ -104,13 +104,13 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Explain how people with disabilities rely on different style properties, such as font sizes and spacing, to perceive contents. +Explain how people with disabilities rely on different style properties, such as font sizes and spacing, to perceive content. #### Learning Outcomes for Topic Students should be able to: -* design user interfaces with clear and distinguishable styles for different components, such as links, buttons, form elements, or texts +* design user interfaces with clear and distinguishable styles for different components, such as links, buttons, form elements, or text * design user interfaces with font sizes to support content readability * design user interfaces with adequate spacing to support readability and to help distinguish components from one another @@ -118,15 +118,15 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Demonstrate the use of styles to distinguish user interface components from one another, such as links, buttons, form elements, and texts. Explain how people rely on font sizes, spacing, and typography to distinguish components from one another. -* Show examples of big enough font sizes and explain how they support readability. Contrast previous examples with smaller fonts that are not as easy to read. Emphasize that several user groups rely on fonts to be big enough to be able to read and understand contents properly. -* Show examples of different page layouts with and without adequate spacing. Explain how spacing allows to distinguish different user interface components and pieces of content from one another. Emphasize that spacing also allows for better readability of contents and for better identification of the different parts of the user interface. +* Demonstrate the use of styles to distinguish user interface components from one another, such as links, buttons, form elements, and text. Explain how people rely on font sizes, spacing, and typography to distinguish components from one another. +* Show examples of big enough font sizes and explain how they support readability. Contrast previous examples with smaller fonts that are not as easy to read. Emphasize that several user groups rely on fonts to be big enough to be able to read and understand content properly. +* Show examples of different page layouts with and without adequate spacing. Explain how spacing allows to distinguish different user interface components and pieces of content from one another. Emphasize that spacing also allows for better readability of content and for better identification of the different parts of the user interface. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Students design a prototype with distinguishable styles that help perceive different contents. Assess how students use different style properties such as font sizes and spacing to make content perceivable and to distinguish components from one another. +* Practical — Students design a prototype with distinguishable styles that help users perceive different content. Assess how students use different style properties such as font sizes and spacing to make content perceivable and to distinguish components from one another. {% include excol.html type="end" %} @@ -136,7 +136,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Explain how people with disabilities perceive different web page regions and contents through text and visual landmarks and cues. Present different strategies to include such cues early in the design phase. +Explain how people with disabilities perceive different web page regions and content through text and visual landmarks and cues. Present different strategies to include such cues early in the design phase. #### Learning Outcomes for Topic @@ -169,8 +169,8 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Describe how some people use color to understand and distinguish contents. Explain different ways to supplement information that is presented using color, such as using shapes and icons. -Explain how sufficient color contrast (contrast ratios in WCAG) are essential for people with low vision to perceive, distinguish, and understand contents. +Describe how some people use color to understand and distinguish content. Explain different ways to supplement information that is presented using color, such as using shapes and icons. +Explain how sufficient color contrast (contrast ratios in WCAG) are essential for people with low vision to perceive, distinguish, and understand content. #### Learning Outcomes for Topic @@ -178,7 +178,7 @@ Students should be able to: * explain how appropriate use of color enables people with disabilities to read, understand, and distinguish user interface components * design user interfaces with other visual cues in addition to color, for example using different patterns, shapes, and icons -* design user interfaces with texts and images of text that have a contrast ratio of at least 4.5:1 with respect to their background +* design user interfaces with text and images of text that have a contrast ratio of at least 4.5:1 with respect to their background * design user interfaces with large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background * design user interfaces with components and graphics that have a contrast ratio of at least 3:1 with respect to their background @@ -206,7 +206,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Explain how people with disabilities use different screen sizes, screen configurations, breakpoints, and style sheets to identify, distinguish, and process contents. +Explain how people with disabilities use different screen sizes, screen configurations, breakpoints, and style sheets to identify, distinguish, and process content. #### Learning Outcomes for Topic From cc37e113b700dbffa3c28b6ba1edbfe935aa8b27 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 2 Aug 2021 13:04:32 +0200 Subject: [PATCH 202/416] Adding content design and technical writing to prerequisites --- content/designer/images-and-graphics.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 6997a6e30..93ddb3df0 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -80,6 +80,8 @@ Skills required for this module: * Prototyping * Responsive Design * Information Architecture + * Content Design + * Technical Writing {% include excol.html type="end" %} From ac185381495d0157d8106252cb40d746f31847ac Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 2 Aug 2021 14:18:30 +0200 Subject: [PATCH 203/416] Correcting unnecessary plural --- content/designer/navigation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/navigation.md b/content/designer/navigation.md index a8ca24840..567753736 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -119,7 +119,7 @@ Optional ideas to teach the learning outcomes: * Present different types of navigation menus, such as static, fly-out, and mega menus. Explain conventions for accessible navigation menus, such as clear and consistent styling to convey menu behaviors and states. Introduce patterns for mouse, keyboard, and touch interaction with navigation menus. * Demonstrate navigation menu interaction using different input devices, such as keyboard, mouse, and touch. For example, activating a menu option by tapping, pressing the Enter key, and mouse clicking. Explain that defining the interactions is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. -* Show examples of navigation menus and menu items large texts. Explain that, when used in smaller viewports and with different screen configurations, these texts need to wrap so that they are perceived in their entirety. Explain that different languages may have different word sizes, so designers need to consider provisions for different word lengths. +* Show examples of navigation menus and menu items large text. Explain that, when used in smaller viewports and with different screen configurations, these text needs to wrap so that it is perceived in its entirety. Explain that different languages may have different word sizes, so designers need to consider provisions for different word lengths. * Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Emphasize that the states of these menu items need to be communicated using visual cues as well as semantics. Explain that providing the visual cues is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. #### Ideas to Assess Knowledge for Topic From 42b06b2e35803963ede9eb97bdd3bc68dd71a98d Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 2 Aug 2021 14:22:17 +0200 Subject: [PATCH 204/416] Amending wrong module numbering --- content/designer/information-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 50fad9eee..73d630139 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -157,7 +157,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of different types of information presented in tables. Explain that tables are used when there is a logical, tabular relationship between the information presented, for example when displaying a list of events with their date and venue. -* Refer back to Module 2: Flexible Layout and Design [Topic: Flexible Design](/curricula/designer-modules/flexible-layout-and-design/#topic-flexible-design) and explain that some users may require different ways of presenting tabular information. Explain that these include providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. +* Refer back to Module 1: Flexible Layout and Design [Topic: Flexible Design](/curricula/designer-modules/flexible-layout-and-design/#topic-flexible-design) and explain that some users may require different ways of presenting tabular information. Explain that these include providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. * Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells needs to be perceived both visually and programmatically. Explain that providing the styles is a designers' responsibility, whereas establishing the programmatic relationship is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic From 971b2c37af7fa4aacb5e2fbbee4544a4f3d03cbd Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 2 Aug 2021 14:27:27 +0200 Subject: [PATCH 205/416] Qualifying "design strategies" --- content/designer/information-design.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 73d630139..e457874fe 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -24,8 +24,8 @@ navigation: Courses based on this module should: -* present strategies for splitting large blocks of information into smaller pieces that are easier to read and understand -* present strategies for grouping information that shares a common purpose to make such information easier to understand +* present design strategies for splitting large blocks of information into smaller pieces that are easier to read and understand +* present design strategies for grouping information that shares a common purpose to make such information easier to understand ## Learning Outcomes for Module From ae77efa85cc34b9a646b1811a76ed2ed77298b8c Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 2 Aug 2021 14:51:02 +0200 Subject: [PATCH 206/416] Removing "multipage" Websites are per definition multipage --- content/designer/information-design.md | 2 +- content/designer/navigation.md | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index e457874fe..834a33505 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -31,7 +31,7 @@ Courses based on this module should: Students should be able to: -* describe approaches to break down different types of content into smaller and more manageable pieces, including using: +* describe approaches to break down different types of content into smaller and more manageable pieces, including identifying: * headings, pages, and chapter markers * lists, simpler tables, and plain text to convey information presented in complex tables * groups of form controls that share a common purpose diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 567753736..74faaffc5 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -24,14 +24,14 @@ navigation: Courses based on this module should: -* explain strategies that people with disabilities use to navigate multi page websites and applications +* explain strategies that people with disabilities use to navigate websites and applications * describe accessible behaviors, visual affordances, and interaction patterns of navigation menus, including static navigation menus, fly-out menus, and mega menus ## Learning Outcomes for Module Students should be able to: -* explain strategies that people with disabilities use to navigate multipage websites and applications +* explain strategies that people with disabilities use to navigate websites and applications * design user interfaces that support different types of navigation mechanisms, including menus, tables of contents, and site maps * define keyboard, mouse, and touch interactions for menus and other navigation mechanisms * provide clear and consistent visual cues for menus, menu item states, and other navigation mechanisms @@ -216,7 +216,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Portfolio — Students design the navigation menu and other navigational mechanisms for a set of web pages. Assess how students understand accessibility features of navigation across multipage websites and applications. +* Portfolio — Students design the navigation menu and other navigational mechanisms for a set of web pages. Assess how students understand accessibility features of navigation across websites and applications. ## Teaching Resources From d1fcd49a5068950b95657d3418ddf3792edd244e Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 3 Aug 2021 10:20:05 +0200 Subject: [PATCH 207/416] Clarifying module headings in overview pages and mocking up alternatives for module listing --- content/designer/designer-modules.md | 4 ++-- content/designer/flexible-layout-and-design.md | 4 ++-- content/designer/images-and-graphics.md | 4 ++-- content/designer/information-design.md | 4 ++-- content/designer/interaction-and-feedback.md | 4 ++-- content/designer/multimedia-and-animations.md | 4 ++-- content/designer/navigation.md | 10 +++++----- content/developer/custom-widgets.md | 4 ++-- content/developer/developer-modules.md | 18 +++++++++--------- content/developer/forms.md | 4 ++-- content/developer/images.md | 4 ++-- content/developer/menus.md | 4 ++-- content/developer/page-structure.md | 4 ++-- content/developer/rich-applications.md | 4 ++-- content/developer/tables.md | 4 ++-- 15 files changed, 40 insertions(+), 40 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index c12ebc7ea..42030839f 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -42,7 +42,7 @@ These modules focus on visual, information, user experience, and interaction asp * User Experience (UX) Designer * Interaction Designer -### Prerequisites for Students +### Foundation Prerequisites The designer modules are designed for students who have achieved the learning outcomes from the following subset of [Foundation modules](/curricula/foundation-modules/): @@ -60,7 +60,7 @@ The designer modules are designed for students who have achieved the learning ou * Topic: Roles and Responsibilities -## Modules +## Designer Modules - [Module 1: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design) - [Topic: Text Styling](/curricula/designer-modules/flexible-layout-and-design/#topic-text-styling) diff --git a/content/designer/flexible-layout-and-design.md b/content/designer/flexible-layout-and-design.md index 3f73b2e0e..890c6700c 100644 --- a/content/designer/flexible-layout-and-design.md +++ b/content/designer/flexible-layout-and-design.md @@ -56,7 +56,7 @@ Skills required for this module: {% include excol.html type="middle" %} -* [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) +* [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) * Basic knowledge of: * Visual Design * Prototyping @@ -87,7 +87,7 @@ Skills required for this module: * [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) * [WCAG Success Criterion 2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG21/quickref/#focus-visible) * In-depth knowledge of: - * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) + * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) * Visual Design * Prototyping * Responsive Design diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 93ddb3df0..bde69e769 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -52,7 +52,7 @@ Skills required for this module: {% include excol.html type="middle" %} -* [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) +* [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) * [Module 1: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design/) * [Module 2: Navigation](/curricula/designer-modules/navigation/) * [Module 3: Information Design](/curricula/designer-modules/information-design/) @@ -75,7 +75,7 @@ Skills required for this module: * [WCAG Success Criterion 1.4.5 Images of Text](https://www.w3.org/WAI/WCAG21/quickref/#images-of-text) * [WCAG Success Criterion 1.4.9 Images of Text (No Exception)](https://www.w3.org/WAI/WCAG21/quickref/#images-of-text-no-exception) * In-depth knowledge of: - * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) + * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) * Visual Design * Prototyping * Responsive Design diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 834a33505..0e55a69d8 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -51,7 +51,7 @@ Skills required for this module: {% include excol.html type="middle" %} -* [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) +* [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) * [Module 1: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design/) * [Module 2: Navigation](/curricula/designer-modules/navigation/) * Basic knowledge of: @@ -77,7 +77,7 @@ Skills required for this module: * [WCAG Success Criterion 3.2.2 ON Input](https://www.w3.org/WAI/WCAG21/quickref/#on-input) * [WCAG Success Criterion 3.3.2 Labels or Instructions](https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions) * In-depth knowledge of: - * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) + * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) * Visual Design * Prototyping * Responsive Design diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 00272c7e3..1ed13c797 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -53,7 +53,7 @@ Skills required for this module: {% include excol.html type="middle" %} -* [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) +* [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) * Prior [Designer Modules](/curricula/designer-modules/) * Knowledge of: * Visual Design @@ -96,7 +96,7 @@ Skills required for this module: * [WCAG Success Criterion 3.3.4 Error Prevention](https://www.w3.org/WAI/WCAG21/quickref/#error-prevention-legal-financial-data) * [WCAG Success Criterion 4.1.3 Status Messages](https://www.w3.org/WAI/WCAG21/quickref/#status-messages) * In-depth knowledge of: - * [Prerequisites for students](/curricula/designer-modules/#prerequisites-for-students) + * [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) * Visual Design * Prototyping * Responsive Design diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 96383c3c4..b01674b56 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -52,7 +52,7 @@ Skills required for this module: {% include excol.html type="middle" %} -* [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) +* [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) * [Module 1: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design/) * [Module 2: Navigation](/curricula/designer-modules/navigation/) * [Module 3: Information Design](/curricula/designer-modules/information-design/) @@ -84,7 +84,7 @@ Skills required for this module: * [WCAG Success Criterion 3.2.1 On Focus](https://www.w3.org/WAI/WCAG21/quickref/#on-focus) * [WCAG Success Criterion 3.2.5 Change on Request](https://www.w3.org/WAI/WCAG21/quickref/#change-on-request) * In-depth knowledge of: - * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) + * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) * Visual Design * Prototyping * Responsive Design diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 74faaffc5..096674d1f 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -53,8 +53,8 @@ Skills required for this module: {% include excol.html type="middle" %} -* [Prerequisites for Students](/curricula/designer-modules/#prerequisites-for-students) -* [Module 1: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design/) from [Designer Modules](/curricula/designer-modules/) +* [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) +* [Designer Module 1: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design/) * Basic knowledge of: * Visual Design * Prototyping @@ -80,7 +80,7 @@ Skills required for this module: * [WCAG 2 Success Criterion 2.4.8 Location](https://www.w3.org/WAI/WCAG21/quickref/#location) * [WCAG 2 Success Criterion 3.2.3 Consistent Navigation](https://www.w3.org/WAI/WCAG21/quickref/#consistent-navigation) * In-depth knowledge of: - * [Prerequisites for students](/curricula/designer-modules#prerequisites-for-students) + * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) * Visual Design * Prototyping * Responsive Design @@ -149,7 +149,7 @@ Students should be able to: * a link at the beginning of a block of repeated content to go to the end of the block * links at the top of the page that go to each area of the content * an expandable and collapsible menu to make it easier for users to skip the menu -* provide other navigation mechanisms to ensure web pages or application views can be reached using several of the following methods: +* provide other navigation mechanisms to ensure web pages and application views can be reached using several of the following methods: * search functionalities that support navigating to specific parts of the site * site maps to provide an overview of the entire website * tables of contents to give an overview of the whole website or document and to allow users to go to specific parts of the content @@ -181,7 +181,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Build on foundation [Module 6: Understanding and Involving Users](/curricula/foundation-modules/understanding-and-involving-users/) to research strategies that people with disabilities use to locate a specific web page in a set of web pages. Discuss examples like breadcrumb trails, page titles, and visual cues to indicate the current page. +Build on [Foundation Module 6: Understanding and Involving Users](/curricula/foundation-modules/understanding-and-involving-users/) to research strategies that people with disabilities use to locate a specific web page in a set of web pages. Discuss examples like breadcrumb trails, page titles, and visual cues to indicate the current page. #### Learning Outcomes for Topic diff --git a/content/developer/custom-widgets.md b/content/developer/custom-widgets.md index 69833546c..99c4ed3e3 100644 --- a/content/developer/custom-widgets.md +++ b/content/developer/custom-widgets.md @@ -55,7 +55,7 @@ Skills required for this module: {% include excol.html type="middle" %} -* [Prerequisites for Students](/curricula/developer-modules/#prerequisites-for-students) +* [Foundation Prerequisites](/curricula/developer-modules/#foundation-prerequisites) * Prior [Developer Modules](/curricula/developer-modules/) * Knowledge of [HTML5 living standard {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/) @@ -78,7 +78,7 @@ Skills required for this module: * [WAI-ARIA specification](https://www.w3.org/TR/wai-aria/) * [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/) * In-depth knowledge of: - * [Prerequisites for Students](/curricula/developer-modules/#prerequisites-for-students) + * [Foundation Prerequisites](/curricula/developer-modules/#foundation-prerequisites) * Prior [Developer Modules](/curricula/developer-modules/) {% include excol.html type="end" %} diff --git a/content/developer/developer-modules.md b/content/developer/developer-modules.md index a0a427c15..e2848faff 100644 --- a/content/developer/developer-modules.md +++ b/content/developer/developer-modules.md @@ -40,7 +40,7 @@ The developer modules guide the creation of courses that: These modules focus on accessible markup and coding techniques. They are primarily designed for teaching front-end developers. -## Prerequisites for Students +## Foundation Prerequisites The developer modules are designed for students who have achieved the learning outcomes from the following subset of [Foundation modules](https://www.w3.org/WAI/curricula/foundation-modules/): @@ -59,36 +59,36 @@ The developer modules are designed for students who have achieved the learning o In addition, students should have knowledge of HTML and CSS. -## Modules +## Developer Modules -- [Module 1: Page Structure](/curricula/developer-modules/page-structure/) -- Explains coding techniques to convey the structure and semantics in accessible content and relates those techniques to how people with disabilities use the Web +- [Page Structure](/curricula/developer-modules/page-structure/) -- Explains coding techniques to convey the structure and semantics in accessible content and relates those techniques to how people with disabilities use the Web - [Topic: Section Headings](/curricula/developer-modules/page-structure/#topic-section-headings) - [Topic: Sections of Content](/curricula/developer-modules/page-structure/#topic-sections-of-content) - [Topic: Page Regions](/curricula/developer-modules/page-structure/#topic-page-regions) - [Topic: Page Composition](/curricula/developer-modules/page-structure/#topic-page-composition) -- [Module 2: Menus](/curricula/developer-modules/menus/) -- Explains coding techniques to create accessible menus and relates them to how people with disabilities use the Web +- [Menus](/curricula/developer-modules/menus/) -- Explains coding techniques to create accessible menus and relates them to how people with disabilities use the Web - [Topic: Menu Structure](/curricula/developer-modules/menus/#topic-menu-structure) - [Topic: Menu Styling](/curricula/developer-modules/menus/#topic-menu-styling) - [Topic: Fly-out Menus](/curricula/developer-modules/menus/#topic-fly-out-menus) - [Topic: Application Menus](/curricula/developer-modules/menus/#topic-application-menus) -- [Module 3: Images](/curricula/developer-modules/images/) -- Explains coding techniques to provide text alternatives for images and relates them to how people with disabilities use the Web +- [Images](/curricula/developer-modules/images/) -- Explains coding techniques to provide text alternatives for images and relates them to how people with disabilities use the Web - [Topic: Text Alternatives](/curricula/developer-modules/images/#topic-text-alternatives) - [Topic: Functional Images](/curricula/developer-modules/images/#topic-functional-images) - [Topic: Complex Images](/curricula/developer-modules/images/#topic-complex-images) -- [Module 4: Tables](/curricula/developer-modules/tables/) -- Explains coding techniques to create accessible tables and relates them to how people with disabilities use the Web +- [Tables](/curricula/developer-modules/tables/) -- Explains coding techniques to create accessible tables and relates them to how people with disabilities use the Web - [Topic: Simple Tables](/curricula/developer-modules/tables/#topic-simple-tables) - [Topic: Complex Tables](/curricula/developer-modules/tables/#topic-complex-tables) - [Topic: Table Descriptions](/curricula/developer-modules/tables/#topic-table-descriptions) -- [Module 5: Forms](/curricula/developer-modules/forms/) -- Explains coding techniques to create accessible forms and relates them to how people with disabilities use the Web +- [Forms](/curricula/developer-modules/forms/) -- Explains coding techniques to create accessible forms and relates them to how people with disabilities use the Web - [Topic: Controls and Labels](/curricula/developer-modules/forms/#topic-controls-and-labels) - [Topic: Instructions](/curricula/developer-modules/forms/#topic-instructions) - [Topic: Notifications](/curricula/developer-modules/forms/#topic-notifications) -- [Module 6: Custom Widgets](/curricula/developer-modules/custom-widgets/) -- Explains coding techniques to create accessible custom widgets and relates them to how people with disabilities use the Web +- [Custom Widgets](/curricula/developer-modules/custom-widgets/) -- Explains coding techniques to create accessible custom widgets and relates them to how people with disabilities use the Web - [Topic: Role Definitions](/curricula/developer-modules/custom-widgets/#topic-role-definitions) - [Topic: Accessible Names and Descriptions](/curricula/developer-modules/custom-widgets/#topic-accessible-names-and-descriptions) - [Topic: States and Properties](/curricula/developer-modules/custom-widgets/#topic-states-and-properties) - [Topic: Keyboard and Focus Management](/curricula/developer-modules/custom-widgets/#topic-keyboard-and-focus-management) -- [Module 7: Rich Applications](/curricula/developer-modules/rich-applications/) -- Explains coding techniques to create accessible rich applications and relates them to how people with disabilities use the Web +- [Rich Applications](/curricula/developer-modules/rich-applications/) -- Explains coding techniques to create accessible rich applications and relates them to how people with disabilities use the Web - [Topic: Structure and Relationships](/curricula/developer-modules/rich-applications#topic-structure-and-relationships) - [Topic: Keyboard and Focus Interactions](/curricula/developer-modules/rich-applications#topic-keyboard-and-focus-interactions) - [Topic: Concurrent Notifications](/curricula/developer-modules/rich-applications#topic-concurrent-notifications) diff --git a/content/developer/forms.md b/content/developer/forms.md index 7084fff79..7dbdac194 100644 --- a/content/developer/forms.md +++ b/content/developer/forms.md @@ -54,7 +54,7 @@ Skills required for this module: {% include excol.html type="middle" %} -* [Prerequisites for Students](/curricula/developer-modules/#prerequisites-for-students) +* [Foundation Prerequisites](/curricula/developer-modules/#foundation-prerequisites) * [Developer Modules](/curricula/curriculum-for-developers) * [Module 1: Page Structure](/curricula/developer-modules/page-structure/) * Basic knowledge of [HTML forms {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/forms.html#forms) @@ -90,7 +90,7 @@ Skills required for this module: * [HTML common input element attributes {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/input.html#common-input-element-attributes) * [HTML date, time, and input formats {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/forms.html#input-author-notes) * In-depth knowledge of: - * [Prerequisites for Students](/curricula/developer-modules/#prerequisites-for-students) + * [Foundation Prerequisites](/curricula/developer-modules/#foundation-prerequisites) * [Page Structure](/curricula/developer-modules/page-structure/) {% include excol.html type="end" %} diff --git a/content/developer/images.md b/content/developer/images.md index e09ccba75..48bd8dae2 100644 --- a/content/developer/images.md +++ b/content/developer/images.md @@ -57,7 +57,7 @@ Skills required for this module: {% include excol.html type="middle" %} -* [Prerequisites for Students](/curricula/developer-modules/#prerequisites-for-students) +* [Foundation Prerequisites](/curricula/developer-modules/#foundation-prerequisites) * Basic knowledge of: * [HTML `img` element {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element) * [HTML `picture` element {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element) @@ -89,7 +89,7 @@ Skills required for this module: * [WAI-ARIA `aria-label` attribute](https://www.w3.org/TR/wai-aria-1.1/#aria-label) * [WAI-ARIA `aria-labelledby` attribute](https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby), * [WAI-ARIA `aria-describedby` attribute](https://www.w3.org/TR/wai-aria-1.1/#aria-describedby) -* In-depth knowledge of [Prerequisites for Students](/curricula/developer-modules/#prerequisites-for-students) +* In-depth knowledge of [Foundation Prerequisites](/curricula/developer-modules/#foundation-prerequisites) {% include excol.html type="end" %} diff --git a/content/developer/menus.md b/content/developer/menus.md index 604bea075..3531ad8c1 100644 --- a/content/developer/menus.md +++ b/content/developer/menus.md @@ -58,7 +58,7 @@ Skills required for this module: {% include excol.html type="middle" %} -* [Prerequisites for Students](/curricula/developer-modules/#prerequisites-for-students) +* [Foundation Prerequisites](/curricula/developer-modules/#foundation-prerequisites) * [Module 1: Page Structure](/curricula/developer-modules/page-structure/) from [Developer Modules](/curricula/developer-modules/) {% include excol.html type="end" %} @@ -81,7 +81,7 @@ Skills required for this module: * [HTML5 grouping content {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/grouping-content.html#grouping-content) * [WAI-ARIA landmark roles](https://www.w3.org/TR/wai-aria/#landmark_roles) * In-depth knowledge of: - * [Prerequisites for Students](/curricula/developer-modules/#prerequisites-for-students) + * [Foundation Prerequisites](/curricula/developer-modules/#foundation-prerequisites) * [Module 1: Page Structure](/curricula/developer-modules/page-structure/) from [Developer Modules](/curricula/developer-modules/) {% include excol.html type="end" %} diff --git a/content/developer/page-structure.md b/content/developer/page-structure.md index 2e671bc0b..cb571966d 100644 --- a/content/developer/page-structure.md +++ b/content/developer/page-structure.md @@ -59,7 +59,7 @@ Skills required for this module: {% include excol.html type="middle" %} -* [Prerequisites for Students](/curricula/developer-modules/#prerequisites-for-students) +* [Foundation Prerequisites](/curricula/developer-modules/#foundation-prerequisites) * Basic knowledge of: * [HTML5 sections {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/sections.html#sections) * [HTML5 grouping content {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/grouping-content.html#grouping-content) @@ -91,7 +91,7 @@ Skills required for this module: * [HTML5 sections {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/sections.html#sections) * [HTML5 grouping content {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/grouping-content.html#grouping-content) * [WAI-ARIA landmark roles](https://www.w3.org/TR/wai-aria/#landmark_roles) -* In-depth knowledge of [Prerequisites for Students](/curricula/developer-modules/#prerequisites-for-students) +* In-depth knowledge of [Foundation Prerequisites](/curricula/developer-modules/#foundation-prerequisites) {% include excol.html type="end" %} diff --git a/content/developer/rich-applications.md b/content/developer/rich-applications.md index 9fe36ecac..70c7b1c7f 100644 --- a/content/developer/rich-applications.md +++ b/content/developer/rich-applications.md @@ -54,7 +54,7 @@ Skills required for this module: {% include excol.html type="middle" %} -* [Prerequisites for Students](/curricula/developer-modules/#prerequisites-for-students) +* [Foundation Prerequisites](/curricula/developer-modules/#foundation-prerequisites) * Prior [Developer Modules](/curricula/developer-modules/) * Knowledge of [HTML5 living standard](https://html.spec.whatwg.org/multipage/) @@ -85,7 +85,7 @@ Skills required for this module: * [WAI-ARIA specification](https://www.w3.org/TR/wai-aria/) * [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/) * In-depth knowledge of: - * [Prerequisites for Students](/curricula/developer-modules/#prerequisites-for-students) + * [Foundation Prerequisites](/curricula/developer-modules/#foundation-prerequisites) * Prior [Developer Modules](/curricula/developer-modules/) {% include excol.html type="end" %} diff --git a/content/developer/tables.md b/content/developer/tables.md index 7b66e257d..1edd3ff1a 100644 --- a/content/developer/tables.md +++ b/content/developer/tables.md @@ -54,7 +54,7 @@ Skills required for this module: {% include excol.html type="middle" %} -* [Prerequisites for Students](/curricula/developer-modules/#prerequisites-for-students) +* [Foundation Prerequisites](/curricula/developer-modules/#foundation-prerequisites) * Basic knowledge of the [HTML `table` element {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/tables.html#the-table-element) {% include excol.html type="end" %} @@ -79,7 +79,7 @@ Skills required for this module: * [HTML `headers` attribute {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/tables.html#attr-tdth-headers) * [HTML `Caption` element {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/tables.html#the-caption-element) * [HTML `Summary` attribute {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/obsolete.html#attr-table-summary) -* In-depth knowledge of [Prerequisites for Students](/curricula/developer-modules/#prerequisites-for-students) +* In-depth knowledge of [Foundation Prerequisites](/curricula/developer-modules/#foundation-prerequisites) {% include excol.html type="end" %} From 1727deb112d91100f7638e8aa3e50e3400f74f81 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 4 Aug 2021 17:07:08 +0200 Subject: [PATCH 208/416] Implementing suggestions and taking a pass to simplify language --- content/designer/designer-modules.md | 2 +- .../designer/flexible-layout-and-design.md | 64 ++++++++++--------- content/designer/information-design.md | 56 ++++++++-------- content/designer/navigation.md | 60 +++++++++-------- 4 files changed, 97 insertions(+), 85 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 42030839f..194f75d1a 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -27,7 +27,7 @@ navigation: The designer modules guide the creation of courses that: -* introduce key accessibility terms for designers and relate some design terms to accessibility +* explain how design principles and practices relate to accessibility * demonstrate and explain how accessible design enables people with disabilities to use websites and applications * teach accessible design techniques for: * visual design diff --git a/content/designer/flexible-layout-and-design.md b/content/designer/flexible-layout-and-design.md index 890c6700c..95f6cb96f 100644 --- a/content/designer/flexible-layout-and-design.md +++ b/content/designer/flexible-layout-and-design.md @@ -29,19 +29,19 @@ navigation: Courses based on this module should: -* explain how people with disabilities use different screen sizes, screen configurations, breakpoints, and style sheets to identify, distinguish, and process content -* explain accessibility requirements for user interface components that relate to color, layout, spacing, and position - +* explain how people with disabilities rely on designs that adapt to different screen sizes, configurations, and style sheets +* explain accessibility requirements for user interfaces that can have customized colors, size, and spacing between components + ## Learning Outcomes for Module Students should be able to: -* explain how people with disabilities identify and distinguish user interface components based on different features, such as color, layout, spacing, and position -* design user interfaces with headings, landmarks, text cues, patterns, and icons to supplement information conveyed through color -* design user interfaces with adjustable font sizes and adequate spacing to support readability -* design user interfaces with sufficient color contrast for text, images of text, and controls -* design user interfaces with clear and distinguishable focus indicators, for example using borders, background color, and highlighting -* design user interfaces that support positioning different regions and user interface components where users expect them +* explain how people with disabilities rely on designs that adapt to different colors, layouts, spacing, and positions +* use headings, landmarks, text cues, patterns, and icons to supplement information conveyed through color +* design layouts that adapt to different font sizes and spacing set by the user in browser and operating system settings +* design layouts with sufficient color contrast for text, images of text, and controls +* design clear and distinguishable focus indicators, for example using borders, color, and highlighting +* position components where users expect them * identify related requirements for developers to apply the necessary semantics to user interface components {% include excol.html type="all" %} @@ -104,29 +104,30 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Explain how people with disabilities rely on different style properties, such as font sizes and spacing, to perceive content. +Explain how people with disabilities rely on different style properties, such as font sizes and spacing, to support readability. #### Learning Outcomes for Topic Students should be able to: -* design user interfaces with clear and distinguishable styles for different components, such as links, buttons, form elements, or text -* design user interfaces with font sizes to support content readability -* design user interfaces with adequate spacing to support readability and to help distinguish components from one another +* use clear and distinguishable styles for links, buttons, form elements, and text +* define customizable font sizes and font types to support content readability +* define adequate spacing to support readability +* define customizable colors to support readability #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Demonstrate the use of styles to distinguish user interface components from one another, such as links, buttons, form elements, and text. Explain how people rely on font sizes, spacing, and typography to distinguish components from one another. -* Show examples of big enough font sizes and explain how they support readability. Contrast previous examples with smaller fonts that are not as easy to read. Emphasize that several user groups rely on fonts to be big enough to be able to read and understand content properly. -* Show examples of different page layouts with and without adequate spacing. Explain how spacing allows to distinguish different user interface components and pieces of content from one another. Emphasize that spacing also allows for better readability of content and for better identification of the different parts of the user interface. +* Demonstrate the use of styles to distinguish user interface components, such as links, buttons, form labels and instructions, and text. Explain how people rely on font sizes, font types, spacing, and color to distinguish components. +* Show examples of usable font sizes and explain how they support readability. Contrast previous examples with fonts that are not as easy to read. Emphasize that several user groups rely on customizable fonts to be able to read and understand content properly. +* Show examples of different page layouts with and without adequate spacing. Explain how spacing allows for better readability of content and for better identification of the different parts of the user interface. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Students design a prototype with distinguishable styles that help users perceive different content. Assess how students use different style properties such as font sizes and spacing to make content perceivable and to distinguish components from one another. +* Practical — Students design a prototype with adaptable and distinguishable styles that help users perceive different content. Assess how students use different style properties such as font sizes and spacing to make content perceivable and to distinguish components from one another. {% include excol.html type="end" %} @@ -142,9 +143,9 @@ Explain how people with disabilities perceive different web page regions and con Students should be able to: -* define page regions by using appropriate visual and programmatic landmarks -* design user interfaces with text cues to convey information provided through vision only, for example to convey required form fields and available dates in a calendar -* design user interfaces with focus indicators that enable people to tell where they are as they move through web pages and applications using the keyboard +* define page regions by using appropriate visual and programmatic landmarks, such as headings +* use text cues to supplement information provided through vision only, for example to convey required form fields represented with an icon and available dates in a calendar represented with a different background color +* design focus indicators that enable people to tell where they are as they move through web pages and applications using the keyboard #### Teaching Ideas for Topic @@ -152,7 +153,7 @@ Optional ideas to teach the learning outcomes: * Show examples of different regions of web pages, such as header, navigation, main, and footer. Explain that several groups of people with disabilities rely on visual and programmatic landmarks to perceive such regions. Explain that defining landmarks and their styling is a designers' responsibility, whereas implementing such landmarks and their semantics is a developers' responsibility. * Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a form field is required and those with colors to convey available dates in a calendar. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). -* Invite students to navigate a web page with appropriate focus indicators first, and then invite them to navigate a web page without focus indicators. Explain how focus indicators allow people using the keyboard only to determine where they are as they move through web pages and applications using the keyboard only. For reference on how to provide appropriate focus indicators, see techniques [G149: Using user interface components that are highlighted by the user agent when they receive focus](https://www.w3.org/WAI/WCAG21/Techniques/general/G149.html) and [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). +* Invite students to use a web page that has appropriate focus indicators first, and then invite them to use a web page without focus indicators. Explain how focus indicators allow people using the keyboard only to determine where they are as they move through web pages and applications using the keyboard only. For reference on how to provide appropriate focus indicators, see techniques [G149: Using user interface components that are highlighted by the user agent when they receive focus](https://www.w3.org/WAI/WCAG21/Techniques/general/G149.html) and [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). #### Ideas to Assess Knowledge for Topic @@ -177,10 +178,11 @@ Explain how sufficient color contrast (contrast ratios in WCAG) are essential fo Students should be able to: * explain how appropriate use of color enables people with disabilities to read, understand, and distinguish user interface components -* design user interfaces with other visual cues in addition to color, for example using different patterns, shapes, and icons -* design user interfaces with text and images of text that have a contrast ratio of at least 4.5:1 with respect to their background -* design user interfaces with large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background -* design user interfaces with components and graphics that have a contrast ratio of at least 3:1 with respect to their background +* use visual cues in addition to color, for example using different patterns, shapes, and icons +* use non-visual cues for people who do not perceive color, for example using text to complement information provided visually +* design text and images of text that have a contrast ratio of at least 4.5:1 with respect to their background +* design large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background +* design components and graphics that have a contrast ratio of at least 3:1 with respect to their background #### Teaching Ideas for Topic @@ -206,17 +208,17 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Explain how people with disabilities use different screen sizes, screen configurations, breakpoints, and style sheets to identify, distinguish, and process content. +Explain how people with disabilities use different screen sizes, screen configurations, and style sheets to identify, distinguish, and process content. #### Learning Outcomes for Topic Students should be able to: -* design user interfaces that support text resizing without loss of content and functionality -* design user interfaces that support zooming and enlarging text in different viewport sizes and through multiple breakpoints -* design user interfaces that support content view and operation in both portrait and landscape orientations -* design user interfaces with target sizes and spaces to support tapping by people with mobility impairments and people using different input methods -* design user interfaces that support customizing line height, as well as spacing between paragraphs, words, and letters +* design layouts that support text resizing without loss of content and functionality +* design layouts that support zooming and enlarging text in different viewport sizes and through multiple breakpoints +* design layouts that support content view and operation in both portrait and landscape orientations +* design layouts with target sizes and spaces to support tapping by people with mobility impairments and people using different input methods +* design layouts that support customizing line height, as well as spacing between paragraphs, words, and letters * design user interfaces that preserve focus order when accessed using different viewport, screen sizes, and breakpoints #### Teaching Ideas for Topic diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 0e55a69d8..b1674d265 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -103,14 +103,14 @@ Discuss the use of icons and other visual cues to help people understand process Students should be able to: -* design user interfaces that support splitting large amounts of text into several smaller and more manageable pieces by using: +* design textual content that can be split into smaller and more manageable pieces by using: * headings (with their corresponding rank levels) * sidebars and other page regions * pages * chapter markers (in digital publications) -* design user interfaces with icons and other visual cues to help users understand information presented in text, for example diagrams of a process to complement the textual information -* design user interfaces with mechanisms to identify specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon -* design user interfaces with mechanisms to identify the expanded form or meaning of acronyms and abbreviations +* design user interfaces with visual representation that accompanies the text, to make the information easier to understand; for example a diagram representation of the process described in the text” +* define mechanisms to provide specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon +* define mechanisms to provide the expanded form or meaning of acronyms and abbreviations * identify related requirements for developers to make language programmatically determined * identify related requirements for content authors to provide clear language and easy-to-read texts whenever possible @@ -118,7 +118,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of large amounts of text, for example in an eBook. Discuss several ways to divide the text both visually and programmatically so that it is easier to understand and to navigate. For example, by using headings and their corresponding rank levels together with pages and chapter markers to indicate the different chapters, sections, and subsections of content. +* Show examples of online articles and forms. Discuss how these are divided into manageable pieces so that they are easier to understand and to navigate. For example, by using headings and their corresponding rank levels together with pages and chapter markers to indicate the different chapters, sections, and subsections of content. * Show examples of diagrams and illustrations that can complement the information presented in text. For example, visual instructions that supplement the textual information of a user manual. Explain that they help users with reading disabilities understand difficult pieces of text. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). * Show examples of words that may be difficult to understand or that are used in a restricted way. Explain that people who are not familiar with such words need definitions to understand their meaning. Explain that defining the mechanisms to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. * Show examples of abbreviations, such as short forms of words and acronyms. Explain that people who are not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the mechanisms to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. @@ -135,70 +135,70 @@ Optional ideas to assess knowledge: {% include excol.html type="start" %} -### Topic: Tabular Information +### Topic: Forms and Controls {% include excol.html type="middle" %} -Build on [Foundation Module 6: Understanding and Involving Users](/curricula/foundation-modules/understanding-and-involving-users/). Research strategies that people with disabilities use to interact with information presented in tables. For example, through textual descriptions, through graphical representation of the table contents, by splitting a complex table into several simpler tables, and by splitting the information in the table into individual lists. +Show examples of how different groups of people interact with large amounts of selectable data, such as a list of countries. Explain that some people prefer filtering out data into smaller pieces to better handle data, some others prefer to type the first letters of their desire option to select data more efficiently. #### Learning Outcomes for Topic Students should be able to: -* identify uses of tables to present data that share a logical relationship -* design user interfaces that support multiple ways of presenting tabular information, such as using several lists, or splitting a complex table into several simpler ones -* define table header cells and data cells, and provide clear and distinguishable styles for each -* create designs with graphical representations of complex tables that help users more easily understand its purpose and meaning -* identify related requirements for developers to programmatically associate table descriptions, data cells, and header cells with their corresponding table -* identify related requirements for content authors to provide table descriptions where appropriate +* define related form controls, such as those collecting personal information, payment methods, and consent to legal conditions +* describe the poor user experience inherent to long data lists and grids and identify different approaches to address this, for example by providing search boxes and mechanisms to filter data, or by splitting larger data sets into smaller ones +* define mechanisms to customize shown results after a search query, for example the number of products per page #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of different types of information presented in tables. Explain that tables are used when there is a logical, tabular relationship between the information presented, for example when displaying a list of events with their date and venue. -* Refer back to Module 1: Flexible Layout and Design [Topic: Flexible Design](/curricula/designer-modules/flexible-layout-and-design/#topic-flexible-design) and explain that some users may require different ways of presenting tabular information. Explain that these include providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. -* Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells needs to be perceived both visually and programmatically. Explain that providing the styles is a designers' responsibility, whereas establishing the programmatic relationship is a responsibility shared with the developer. +* Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to understand and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and programmatically, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look like is a designers' responsibility, whereas coding those relations is a developers' responsibility. +* Show examples of long data lists and grids, such as to select a country. Explain that it takes a lot of time for keyboard users to go one by one using the arrow keys to select their desired option. Present mechanisms to filter information so that it appears in smaller pieces, such as pseudo-search functionality that allows users to type the first letters of their desired choice. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Give students a set of tables and ask them to define their header cells and data cells. Assess how students understand the difference between header cells and data cells. -* Practical — Present students with a set of tables and ask them to provide clear styles to distinguish data cells from header cells. Assess how students provide clear and distinguishable styles for header cells and data cells. -* Practical — Present students with a complex table and ask them to split the information using simpler tables, lists, and graphical representations where appropriate. Assess how students provide alternative ways to present tabular information. +* Practical — Students group related information in a form that asks for information to open a bank account. Assess how students build groups of related information, such as those collecting personal information, payment methods, and consent to legal conditions, and how students provide ways for users to identify each of the groups. +* Practical — Present students with a long list of items and ask them to define ways to split the list into smaller subsets. Assess how students use different strategies to group long sets of data into smaller subsets. {% include excol.html type="end" %} {% include excol.html type="start" %} -### Topic: Forms and Controls +### Topic: Tabular Information {% include excol.html type="middle" %} -Show examples of how different groups of people interact with large amounts of selectable data, such as a list of countries. Explain that some people prefer filtering out data into smaller pieces to better handle data, some others prefer to type the first letters of their desire option to select data more efficiently. +Build on [Foundation Module 6: Understanding and Involving Users](/curricula/foundation-modules/understanding-and-involving-users/). Research strategies that people with disabilities use to interact with information presented in tables. For example, through textual descriptions, through graphical representation of the table contents, by splitting a complex table into several simpler tables, and by splitting the information in the table into individual lists. #### Learning Outcomes for Topic Students should be able to: -* design user interfaces that support grouping of related form controls, such as those collecting personal information, payment methods, and consent to legal conditions -* design user interfaces that support filtering data from long data lists and grids, for example using search boxes or splitting the data set into smaller subsets of data -* design user interfaces that support customizing the results that are shown at a given time +* identify uses of tables to present data that share a logical relationship +* identify different ways of presenting tabular information, such as using several lists, or splitting a complex table into several simpler ones +* define table header cells and data cells, and provide clear and distinguishable styles for each +* create designs with graphical representations of complex tables that help users more easily understand its purpose and meaning +* identify related requirements for developers to programmatically associate table descriptions, data cells, and header cells with their corresponding table +* identify related requirements for content authors to provide table descriptions where appropriate #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to understand and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and programmatically, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look like is a designers' responsibility, whereas coding those relations is a developers' responsibility. -* Show examples of long data lists and grids, such as to select a country. Explain that it takes a lot of time for keyboard users to go one by one using the arrow keys to select their desired option. Present mechanisms to filter information so that it appears in smaller pieces, such as pseudo-search functionality that allows users to type the first letters of their desired choice. +* Show examples of different types of information presented in tables. Explain that tables are used when there is a logical, tabular relationship between the information presented, for example when displaying a list of events with their date and venue. +* Refer back to Module 1: Flexible Layout and Design [Topic: Flexible Design](/curricula/designer-modules/flexible-layout-and-design/#topic-flexible-design) and explain that some users may require different ways of presenting tabular information. Explain that these include providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. +* Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells needs to be perceived both visually and programmatically. Explain that providing the styles is a designers' responsibility, whereas establishing the programmatic relationship is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Students group related information in a form that asks for information to open a bank account. Assess how students build groups of related information, such as those collecting personal information, payment methods, and consent to legal conditions, and how students provide ways for users to identify each of the groups. -* Practical — Present students with a long list of items and ask them to define ways to split the list into smaller subsets. Assess how students use different strategies to group long sets of data into smaller subsets. +* Practical — Give students a set of tables and ask them to define their header cells and data cells. Assess how students understand the difference between header cells and data cells. +* Practical — Present students with a set of tables and ask them to provide clear styles to distinguish data cells from header cells. Assess how students provide clear and distinguishable styles for header cells and data cells. +* Practical — Present students with a complex table and ask them to split the information using simpler tables, lists, and graphical representations where appropriate. Assess how students provide alternative ways to present tabular information. {% include excol.html type="end" %} diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 096674d1f..bfebdb396 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -32,14 +32,17 @@ Courses based on this module should: Students should be able to: * explain strategies that people with disabilities use to navigate websites and applications -* design user interfaces that support different types of navigation mechanisms, including menus, tables of contents, and site maps -* define keyboard, mouse, and touch interactions for menus and other navigation mechanisms -* provide clear and consistent visual cues for menus, menu item states, and other navigation mechanisms -* identify blocks of repeated content and cooperate with developers to implement mechanisms that bypass such blocks -* provide mechanisms for users to locate a specific web page within a set of web pages, such as breadcrumb trails and page titles -* identify related requirements for developers to: - * implement keyboard, mouse, and touch interactions for navigation mechanisms - * implement clear and descriptive names for navigation mechanisms +* design different types of navigation mechanisms, including menus, tables of contents, and site maps +* define different interactions for menus and other navigation mechanisms, including keyboard, mouse, and touch +* provide clear and consistent visual presentation of menus and menu items +* provide clear and consistent visual indication of state changes for menu items +* provide mechanisms for developers to identify blocks of repeated content +* cooperate with developers to implement mechanisms that bypass blocks of repeated content +* provide mechanisms to help users to locate specific web pages within sets of web pages, for example by providing breadcrumb trails, site maps, and descriptive page titles +* identify related requirements for developers to implement: + * interactions for navigation mechanisms, including keyboard, mouse, and touch + * clear and descriptive names for navigation mechanisms + * necessary semantics for menus, menu items, and menu item states {% include excol.html type="all" %} @@ -107,12 +110,17 @@ Explain styling conventions for menus, such as location, appropriate size, and a Students should be able to: * identify and describe uses of different types of navigation menus, such as static, fly-out, and mega menus -* provide visual cues to distinguish menus from other components, and provide consistent styling for menu identification across a set of web pages -* define mouse, keyboard, and touch interactions inside navigation menus -* design user interfaces that support appropriate resizing of navigation menus and menu items to fit all text in different viewports and screen configurations -* design user interfaces that communicate the state of menus and menu items, for example in fly-out menus, using distinguishable and consistent styles -* identify related requirements for developers to implement semantics for different menu states and properties, such as hover, focus, current, active, and visited - +* provide visual cues to distinguish menus from other components, +* provide consistent styling for menu identification across a set of web pages +* define interactions inside navigation menus, including mouse, keyboard, and touch +* design navigation menus that adapt to the different text sizes, screen magnifications, and screen sizes and resolutions +* design distinguishable and consistent styles for menu items in their different states, for example in fly-out menus +* identify related requirements for developers to implement: + * non-visual identification (and naming)of menus, + * semantics for different menu states and properties, such as hover, focus, current, active, and visited + * support for different interaction methods, including keyboard, mouse, and touch + * support for different text and screen sizes + #### Teaching Ideas Optional ideas to teach the learning outcomes: @@ -138,21 +146,21 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Introduce other navigation mechanisms that may be used depending on the characteristics of the website or application. Emphasize that WCAG requires that there be multiple ways to reach a specific web page or application view, but that it is not required to use every single navigation mechanism described below. +Introduce other navigation mechanisms that may be used depending on the characteristics of the website or application. Emphasize that different groups of users rely on different navigation mechanisms, so designers need to assess which ones to use to favor user various experiences. #### Learning Outcomes for Topic Students should be able to: -* define blocks of repeated content, such as navigation bars and header contents, and define mechanisms to skip such blocks using at least one of the following: +* define blocks of repeated content, such as navigation bars and header contents, and define mechanisms to skip such blocks using the following approaches: * a link at the top of each page that goes directly to the main content area * a link at the beginning of a block of repeated content to go to the end of the block - * links at the top of the page that go to each area of the content - * an expandable and collapsible menu to make it easier for users to skip the menu -* provide other navigation mechanisms to ensure web pages and application views can be reached using several of the following methods: + * tables of contents at the top of the page that go to each area of the content + * expandable and collapsible contents to make it easier for users to skip over them +* provide other navigation mechanisms to ensure web pages and application views can be reached using the following methods: * search functionalities that support navigating to specific parts of the site * site maps to provide an overview of the entire website - * tables of contents to give an overview of the whole website or document and to allow users to go to specific parts of the content +* balance the use of navigation mechanisms to avoid distractions and unnecessary noise #### Teaching Ideas for Topic @@ -172,6 +180,7 @@ Optional ideas to assess knowledge: * Practical — Students define the blocks of repeated content in a website and cooperate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they work with developers to provide a mechanism to bypass such blocks. * Practical — Present students with an interface and ask them to provide multiple ways to navigate across the website. Assess how students provide multiple navigation mechanisms where appropriate, such as search functionalities, breadcrumb trails, site maps, and tables of contents. +* Practical — Give students an interface with excessive use of navigation mechanisms and ask them to determine which of these navigation mechanisms should stay and which should be removed. Assess how students balance the use of navigation mechanisms to avoid distraction and unnecessary noise. {% include excol.html type="end" %} @@ -187,25 +196,26 @@ Build on [Foundation Module 6: Understanding and Involving Users](/curricula/fou Students should be able to: -* design user interfaces with mechanisms for users to locate a specific web page within a set of web pages, for example: +* design mechanisms for users to locate specific web pages within sets of web pages, for example: * descriptive page titles * breadcrumb trails - * visual cues to indicate the current page - * design mechanisms to make location information visually distinct + * textual and visual cues in the navigation menu to indicate the current page + * descriptive page headings * identify related requirements for developers to code location mechanisms +* balance the use of location mechanisms to avoid distractions and unnecessary noise ### Teaching Ideas Optional ideas to teach the learning outcomes: * Show examples of breadcrumb trails. Explain that they provide information about the users location in the context of a set of web pages. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail](https://www.w3.org/WAI/WCAG21/Techniques/general/G65). -* Invite students to give examples of page titles they are familiar with and reflect with them on how well the titles describe the page contents. Explain that page titles are useful to identify the purpose of a specific web page within a set of web pages. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page, as some mobile browsers and assistive technologies do not show the information on the title. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). +* Invite students to give examples of page titles they are familiar with and reflect with them on how well the titles describe the page contents. Explain that page titles are useful to identify the purpose of a specific web page within a set of web pages. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page, as some browsers and assistive technologies do not show the information on the title. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). #### Ideas to Assess Knowledge Optional ideas to assess knowledge: -* Practical — Present students with a specific web page inside a website and ask them to provide a breadcrumb trail for users to understand where a page is located with respect to the whole website. Assess how students communicate the hierarchical structure of a web page within a set of web pages. +* Practical — Present students with a specific web page inside a website and ask them to provide appropriate indications about the page location with respect to the entire website. Assess how students balance the use of appropriate indications to communicate the location of a web page within a set of web pages. * Practical — Present students with a set of web pages and ask them to provide descriptive titles that identify each of the pages and describe what they are about. Assess how students provide clear and descriptive page titles. {% include excol.html type="end" %} From e3020785a5be31c567997f3fcaf17a1290934e2d Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 6 Aug 2021 11:35:54 +0200 Subject: [PATCH 209/416] Applying feedback --- content/designer/images-and-graphics.md | 81 ++++++++++--------- content/designer/interaction-and-feedback.md | 27 ++++--- content/designer/multimedia-and-animations.md | 35 ++++---- 3 files changed, 76 insertions(+), 67 deletions(-) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index bde69e769..84a8ebc19 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -24,18 +24,18 @@ navigation: Courses based on this module should: -* explain strategies that people with disabilities use to access information contained in images +* explain strategies that people with disabilities use to access information contained in images and graphics * explain accessibility requirements related to images and graphics, such as text alternatives and contrast ratios ## Learning Outcomes for Module Students should be able to: -* explain how images help people with disabilities to process information, identify content, and understand functionality -* explain how text alternatives are essential for people with disabilities to understand the information conveyed in images -* provide meaningful and consistent text alternatives for functional images included in the design phase, such as those included in buttons, links, icons, and logos -* design user interfaces with consistent iconography to help users recognize the purpose of icons, thumbnails, and other graphical components -* design user interfaces that avoid images of text when the desired visual presentation can be achieved by the technology in use +* explain how images and graphics help people with disabilities to process information, identify content, and understand functionality +* explain how text alternatives are essential for people with disabilities to understand the information contained in images +* provide meaningful and consistent text alternatives for functional images, such as those included in buttons, links, icons, and logos +* design consistent imagery to help users recognize the purpose of icons, thumbnails, and other graphical components +* explain the issues associated with images of text, and explain how to avoid these when the desired visual presentation can be achieved by the technology in use * cooperate with developers and content authors to provide the appropriate alternative for images and graphics included in the design phase based on the image purpose * identify related requirements for developers to code images and text alternatives appropriately * identify related requirements for content authors to provide appropriate descriptions for images included in the authoring phase, such as charts, diagrams, and other complex graphics @@ -101,13 +101,13 @@ Functional images convey functionality of a user interface component. For exampl Students should be able to: -* design user interfaces with text alternatives for functional images by using one of the following: - * providing a text alternative for the image - * combining the text alternative of the image with the adjacent text inside the component - * providing adjacent text inside the component to understand its function -* create designs with consistent naming and iconography for user interface components that have the same functionality across web pages -* explain the benefits of making the text alternative visible to all users instead of making it available for screen readers only, for example better recognition of the conveyed functionality -* apply appropriate contrast ratios for functional images belonging to components that accept user input +* provide text alternatives for functional images by using the following mechanisms: + * text alternatives for images + * combinations of text alternatives of images and adjacent text inside components + * adjacent text inside components to understand its function +* use consistent naming and imagery for components that have the same functionality across web pages +* explain the benefits of conveying functionality using text labels and decorative images, instead of using images with text alternatives that are only available to some users, such as screen reader users +* apply appropriate contrast ratios for functional images #### Teaching Ideas for Topic @@ -130,7 +130,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Informative images convey information that is necessary to understand the content. Show examples of thumbnails and other icons that convey information. Discuss with students how they would describe them. +Informative images convey information that is necessary to understand the content. Their description requires generally a short phrase or sentence. Show examples of images that convey information, such as pictures in a piece of news. Discuss with students how they would describe them. Explain that providing text alternatives for informative images is a responsibility shared with the content author. @@ -138,13 +138,14 @@ Explain that providing text alternatives for informative images is a responsibil Students should be able to: -* provide text alternatives that present equivalent information as that contained in informative images, by using one of the following: - * including a boilerplate description that would then be completed and maintained through the development and authoring phases - * complementing thumbnails and icons with adjacent textual information, for example in a news headline - * providing a text alternative that describes the information conveyed by the image +* provide text alternatives that present equivalent information as that contained in informative images, by using the following mechanisms: + * boilerplate descriptions that would then be completed and maintained through the development and authoring phases + * adjacent textual information to complement images and icons, for example in a news headline + * text alternatives that describe the information conveyed by images * apply the appropriate contrast ratio to images that are necessary to understand the contents -* design user interfaces that support use of styled text instead of images of text when the technology in use can provide the desired visual presentation -* design user interfaces with alternatives to visual CAPTCHA, for example auditory CAPTCHA, logical CAPTCHA, and biometrics +* use styled text instead of images of text when the technology in use can provide the desired visual presentation +* provide alternatives to CAPTCHA and biometrics, for example by providing visual, auditory, and logical CAPTCHA +* explain the issues associated with relying only on one form of biometrics and CAPTCHA, and describe alternative approaches for authentication * identify related requirements for developers to code alternative texts for informative images ### Teaching Ideas for Topic @@ -166,67 +167,67 @@ Optional ideas to support assessment. {% include excol.html type="start" %} -### Topic: Decorative Images +### Topic: Complex Images {% include excol.html type="middle" %} -Decorative images are used for ornamental purposes and convey no information or function. Build on [Module 1: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design/) to explain that decorative images also need to adhere to accessibility requirements such as use of color, ability to resize, and flexibility. Decorative images do not require text alternatives, as these would add clutter to the information that assistive technologies provide. Explain that determining if an image is decorative is a responsibility shared with the content author. +Complex images are those whose description requires more than a short phrase or sentence. Show examples of complex images, including diagrams and charts, and explain accessibility requirements that these images have, such as appropriate contrast ratios and appropriate text descriptions. + +Explain that coordination among different team members is required to assess the use of complex images based on their adjacent components (for example text and other images) and on the overall context, so that the relations are perceived and understood visually and through the provided descriptions. #### Learning Outcomes for Topic Students should be able to: -* describe the differences between decorative and non-decorative images depending on the type of information conveyed by the image and the presence of similar information in the adjacent contents -* describe different ways to present information contained in an image so that it can be considered decorative -* describe the relation of decorative images with respect to other adjacent images and to the overall web page where it is included -* design user interfaces that do not overload users with too many ornamental imagery -* identify related requirements for developers to code decorative images so that they are skipped by assistive technologies +* use appropriate contrast ratios for complex images when these images are required to understand the contents +* identify related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, such as diagrams, charts, maps and infographics +* determine if and how complex images are operated using the mouse, keyboard, and other input devices #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of images and graphics that do not convey function or information, such as ornamental icons. Explain that they serve ornamental purposes as long as people can understand and interact with the user interface with or without such icons. Explain that deciding what is the images role is a designers' responsibility, whereas coding the images so that they render with the appropriate role is a developers' responsibility. +* Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Explain that they need to have a contrast ratio of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). +* Explain that complex images also need to have text descriptions that allow people to understand and interact with such images without having to look at them. Explain that providing these text alternatives is a designers' responsibility, whereas providing the text descriptions is a responsibility shared with the content author. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Ask students to provide decorative images to illustrate a text article and ask them to ensure these icons are visible in different screen sizes and devices. Assess how students understand the need for decorative images to adapt to the different user needs and preferences. +* Practical — Students add complex images to a website, such as charts or diagrams, and ensure they have the required contrast ratio. Assess how students understand the contrast requirements for complex images. +* Practical — Students cooperate with developers and content authors to implement a map in a way that everybody can understand its meaning and interact with it. Assess how students identify the need for text alternatives for complex images and cooperate with other team members to ensure such alternatives exist. {% include excol.html type="end" %} {% include excol.html type="start" %} -### Topic: Complex Images +### Topic: Decorative Images {% include excol.html type="middle" %} -Complex images are those whose description requires more than a short phrase or sentence. Show examples of complex images and explain accessibility requirements that these images have, such as appropriate contrast ratios and appropriate text descriptions. - -Explain that coordination among different team members is required to establish the relations between parts of complex images and their adjacent components (for example text and other images) so that the relations are perceived and understood visually and through the provided descriptions. +Decorative images are used for ornamental purposes and convey no information or function. Build on [Module 1: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design/) to explain that decorative images also need to adhere to accessibility requirements such as use of color, ability to resize, and flexibility. Decorative images require empty text alternatives, so that they can be ignored by assistive technologies, and reduce noise. Explain that determining if an image is decorative is a responsibility shared with the content author. #### Learning Outcomes for Topic Students should be able to: -* design user interfaces that support appropriate contrast ratios for complex images when these images are required to understand the contents -* identify related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, such as diagrams, charts, maps and infographics -* determine if and how complex images are operated using the mouse, keyboard, and other input devices +* describe the differences between decorative and non-decorative images depending on the type of information conveyed by the image, the presence of similar information in the adjacent content, and the overall context +* describe different ways to present information contained in an image in the surrounding content so that the image can be considered decorative +* assess the use of decorative images based on other images in the content and on the overall context where it is included +* explain how the overuse of decorative images could become distracting for some users and slow down loading times and interaction for other users +* identify related requirements for developers to code decorative images so that they are skipped by assistive technologies #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Explain that they need to have a contrast ratio of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). -* Explain that complex images also need to have text descriptions that allow people to understand and interact with such images without having to look at them. Explain that providing these text alternatives is a designers' responsibility, whereas providing the text descriptions is a responsibility shared with the content author. +* Show examples of images and graphics that do not convey function or information, such as ornamental icons. Explain that they serve ornamental purposes as long as people can understand and interact with the user interface with or without such icons. Explain that deciding what is the images role is a designers' responsibility, whereas coding the images so that they render with the appropriate role is a developers' responsibility. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Students add complex images to a website, such as charts or diagrams, and ensure they have the required contrast ratio. Assess how students understand the contrast requirements for complex images. -* Practical — Students cooperate with developers and content authors to implement a map in a way that everybody can understand its meaning and interact with it. Assess how students identify the need for text alternatives for complex images and cooperate with other team members to ensure such alternatives exist. +* Practical — Ask students to provide decorative images to illustrate a text article and ask them to ensure these icons are visible in different screen sizes and devices. Assess how students understand the need for decorative images to adapt to the different user needs and preferences. {% include excol.html type="end" %} diff --git a/content/designer/interaction-and-feedback.md b/content/designer/interaction-and-feedback.md index 1ed13c797..c03727f43 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/interaction-and-feedback.md @@ -32,7 +32,7 @@ Courses based on this module should: Students should be able to: * explain strategies that people with disabilities use to interact with components that accept user input -* design user interfaces that support different input mechanisms, including mouse, touch, keyboard, and speech +* design the user experiences for different input mechanisms, including mouse, touch, keyboard, and speech * define keyboard interactions and meaningful sequences inside complex widgets, including buttons, carousels, sliders, tabs, and treeviews * create designs with information about custom keyboard shortcuts for complex widgets and applications * provide clear and distinguishable ways to identify components that accept user input, including through naming and placement @@ -123,7 +123,7 @@ Emphasize that defining the keyboard interactions is a designers' responsibility Students should be able to: -* create designs that support keyboard navigation through and inside custom components, for example: +* design the user experiences for keyboard navigation through and inside custom components, for example: * using the tab key to move through different components * using the enter key to enter a specific component and to select a specific item on a component * using the arrow keys to move through elements inside components, such as application menus, dialogs, list items and grid cells @@ -131,9 +131,10 @@ Students should be able to: * using first letter navigation to jump to specific pieces of data in lists and grids * specific keyboard shortcuts to support efficiency * identify situations when it is necessary to provide additional keyboard shortcuts, for example when designing a custom functionality that is not keyboard supported by default -* create designs that avoid keyboard shortcut conflicts with the operating system, browser, and assistive technologies when possible, and cooperate with developers to provide mechanisms to remap or disable conflicting shortcuts +* design user experiences that avoid keyboard shortcut conflicts with the operating system, browser, and assistive technologies when possible +* cooperate with developers to provide mechanisms to remap or disable conflicting shortcuts * define mechanisms to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications -* provide focus indicators for complex widgets that are visible and that have appropriate contrast ratios +* provide focus indicators that are visible and that have appropriate contrast ratios for complex widgets * describe related requirements for developers to implement keyboard support for components that accept user input #### Teaching Ideas for Topic @@ -169,10 +170,10 @@ Discuss some gestures that require dragging and drawing specific paths on a touc Students should be able to: -* design user interfaces that support alternatives to device or user motion such as shaking by using user interface components that do not require motion -* design user interfaces that support disabling response to motion to prevent accidental actuation, such as undoing an action by shaking a device -* design user interfaces that support alternatives to multi-pointer gestures (such as swipe or pinch) using single pointer activation -* design user interfaces that support undoing or aborting an action carried out with path-based operations +* use components that do not require motion as an alternative for device or user motion such as shaking +* design mechanisms to disable response to motion to prevent accidental actuation, such as undoing an action by shaking a device +* design alternatives to multi-pointer gestures (such as swipe or pinch) using single pointer activation +* design mechanisms to undoing or aborting an action carried out with path-based operations #### Teaching Ideas for Topic @@ -204,7 +205,7 @@ Show examples of labels and instructions for components that accept user input. Students should be able to: * provide clear and consistent names to help users understand the purpose of components that accept user input -* design user interfaces that allow to position labels where users expect them +* design user experiences that consider position, appearance, and naming of labels * provide instructions about which input fields are required by: * including information about each of the required form fields before the form control * including textual and visual cues in the label of each of the required form fields that indicate that they are required @@ -247,13 +248,13 @@ Explain that notifications may have different levels of priority when in the con Students should be able to: -* design user interfaces with notifications that are easy to understand and that can be distinguished from any other user interface component +* design notifications that are easy to understand and that can be distinguished from any other user interface component * provide error messages in the page title or before the form control that identify the fields in error and that describe the cause of the error * provide meaningful suggestions for correction when such suggestions do not compromise the security or purpose of the content -* provide meaningful messages when a task has been completed successfully, for example when a form has been submitted or when a document has been saved +* provide meaningful messages when successfully completing a task, for example when submitting forms and when saving documents * provide meaningful and descriptive notification messages, for example validation messages as the user types -* design user interfaces that support storing notification messages that disappear after a period of time to allow notifications checking at the users' pace -* design user interfaces that support mechanisms to queue and prioritize application notifications coming from different components +* design user experiences to store and check notification messages at the users' pace, for example those that messages that disappear after a period of time +* design user experiences to queue and prioritize application notifications coming from different components * describe related requirements for developers to code notification messages appropriately #### Teaching Ideas for Topic diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index b01674b56..8ab8c27ce 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -32,12 +32,14 @@ Courses based on this module should: Students should be able to: * identify accessibility requirements for different types of audio and video content -* design user interfaces that consider placement and spacing for alternatives to multimedia content, such as transcripts, audio descriptions, captions, and sign language -* design user interfaces that support enabling and disabling transcripts, audio descriptions, captions, and sign language -* design user interfaces with multimedia player controls that have clear and descriptive names, that are easy to find, and that do not disappear when the media starts playing -* design user interfaces with mechanisms to pause, stop, and hide any moving, blinking, and auto-updating content, including animations and carousels -* design user interfaces with mechanisms to stop or control the volume of auto-playing audio -* identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding media content and to include accessibility support for multimedia players +* design the placement and spacing for alternatives to multimedia content, such as transcripts, audio descriptions, captions, and sign language +* design the user experiences for transcripts, audio descriptions, captions, and sign language, including mechanisms for turning on and off such alternatives and ways for users to interact with the alternatives +* design multimedia player controls that have clear and descriptive names, that are easy to find, and that are always reachable to users +* design multimedia players that support different methods of interaction, including mouse, keyboard, touch, and voice +* design mechanisms to pause, stop, and hide moving, blinking, and auto-updating content, including animations and carousels +* design mechanisms to mute or control the volume of auto-playing audio +* identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding media content +* identify related requirements for developers to include accessibility support for multimedia players * identify related requirements for content authors to provide appropriate text transcripts, captions, audio descriptions, and sign language {% include excol.html type="all" %} @@ -104,15 +106,20 @@ Topics to achieve the learning outcomes: Text transcripts provide an alternative to visual and audio information. Audio descriptions are essential for people who cannot see the visuals. Captions are essential for people who cannot hear the audio. -Discuss the need for mechanisms to enable or disable alternatives to multimedia content depending on user needs. Explain that these mechanisms need to be always reachable for users, that they need to have clear names, and that they should not disappear when the media starts playing. Explain that defining such mechanisms is a designer's responsibility, whereas providing the alternatives is a responsibility shared with the content author. +Discuss the need for planning in the design phase to accommodate media alternatives such as text transcripts, audio descriptions, captions, and sign language. Present mechanisms to turn on and off alternatives to multimedia content depending on user needs. Explain that these mechanisms need to have clear name and need to be always reachable for users. Explain that defining such mechanisms is a designer's responsibility, whereas providing the alternatives is a responsibility shared with the content author. #### Learning Outcomes for Topic Students should be able to * identify accessibility requirements for the different types of multimedia content, such as text transcripts for audio and visual information, audio descriptions, captions, and sign language -* design user interfaces with mechanisms to enable audio descriptions, captions, and sign language -* design user interfaces with player controls that: +* define text transcripts as text that provides an alternative to visual and audio information +* define audio descriptions as descriptions to adequately get the visual information needed to understand the content +* define captions as text versions of the speech and non-speech audio information needed to understand the content +* define sign language as the native language of some deaf people +* design mechanisms for pausing, stopping, or hiding that plays automatically for more than 3 seconds +* design mechanisms to turn on and off audio descriptions, captions, and sign language +* design player controls that: * have descriptive names * can be operable by keyboard * are easy to find @@ -143,16 +150,16 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Show examples of moving content, such as animations. Explain that moving content can cause seizures and physical reactions to some people. Designers need to support pausing, stopping, or hiding any moving content, as well as to use flashing that is below the general flash and red flash ratios where possible. +Show moving content, such as carousels and animations. Present mechanisms to avoid distractions, seizures and physical reactions, and unpredictable keyboard focus management caused by moving content. For example, support for pausing, stopping, or hiding moving content, as well as using flashing that is below the general flash and red flash ratios where possible. #### Learning Outcomes for Topic Students should be able to: -* design user interfaces that support pausing, stopping, or hiding any content that blinks, moves, or auto-updates, for example animations, carousels, and decorative gimmicks -* design user interfaces that support flashing below the general flash and red flash thresholds or with content that does not flash more than three times in any one second -* design user interfaces that support disabling motion animation triggered by interaction, such as additional animations when scrolling -* design user interfaces that support stopping or controlling the volume of any audio that plays automatically for more than 3 seconds +* design mechanisms for pausing, stopping, or hiding any content that blinks, moves, or auto-updates, for example animations, carousels, and decorative gimmicks +* create designs that avoid flashing entirely or only flash below the acceptable thresholds +* design mechanisms that support disabling motion animation triggered by interaction, such as additional animations when scrolling +* design mechanisms for stopping or controlling the volume of any audio that plays automatically for more than 3 seconds #### Teaching Ideas for Topic From f1d4c983c2b6f75d1bea2ac7faaa79919ce0fd13 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 6 Aug 2021 12:49:08 +0200 Subject: [PATCH 210/416] Trying changes to structure --- content/designer/designer-modules.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 194f75d1a..774d55468 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -62,30 +62,30 @@ The designer modules are designed for students who have achieved the learning ou ## Designer Modules -- [Module 1: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design) +- [Module 1: Flexible Color, Layout, and Design (TBD)](/curricula/designer-modules/flexible-layout-and-design) + - [Topic: Color (TBD)](/curricula/designer-modules/flexible-layout-and-design/#topic-use-of-color) - [Topic: Text Styling](/curricula/designer-modules/flexible-layout-and-design/#topic-text-styling) - - [Topic: Landmarks and Cues](/curricula/designer-modules/flexible-layout-and-design/#topic-landmarks-and-cues) - - [Topic: Use of Color](/curricula/designer-modules/flexible-layout-and-design/#topic-use-of-color) + - [Topic: Landmarks]() - [Topic: Flexible Design](/curricula/designer-modules/flexible-layout-and-design/#topic-flexible-design) - [Module 2: Navigation](/curricula/designer-modules/navigation/) - [Topic: Menu Behaviors and Patterns](/curricula/designer-modules/navigation/#topic-menu-behaviors-and-patterns) - [Topic: Other Navigation Mechanisms](/curricula/designer-modules/navigation/#topic-other-navigation-mechanisms) - [Topic: Location](/curricula/designer-modules/navigation/#topic-location) - [Module 3: Information Design](/curricula/designer-modules/information-design/) - - [Topic: Textual Information](/curricula/designer-modules/information-design/#topic-textual-information) - - [Topic: Tabular Information](/curricula/designer-modules/information-design/#topic-tabular-information) + - [Topic: Text](/curricula/designer-modules/information-design/#topic-textual-information) + - [Topic: Tables](/curricula/designer-modules/information-design/#topic-tabular-information) - [Topic: Forms and Controls](/curricula/designer-modules/information-design/#topic-forms-and-controls) - [Module 4: Images and Graphics](/curricula/designer-modules/images-and-graphics/#topic-functional-images) - [Topic: Functional Images](/curricula/designer-modules/images-and-graphics/#topic-functional-images) - [Topic: Informative Images](/curricula/designer-modules/images-and-graphics/#topic-informative-images) - - [Topic: Decorative Images](/curricula/designer-modules/images-and-graphics/#topic-decorative-images) - [Topic: Complex Images](/curricula/designer-modules/images-and-graphics/#topic-complex-images) + - [Topic: Decorative Images](/curricula/designer-modules/images-and-graphics/#topic-decorative-images) - [Module 5: Multimeedia and Animations](/curricula/designer-modules/multimedia-and-animations/) - [Topic: Alternatives to Multimedia Content](/curricula/designer-modules/multimedia-and-animations/#topic-alternatives-to-multimedia-content) + - [Media Players [TBD]]() - [Topic: Movement and Animations](/curricula/designer-modules/multimedia-and-animations/#topic-movement-and-animations) -- [Module 6: Interaction and Feedback](/curricula/designer-modules/interaction-and-feedback/) +- [Module 6: Forms, Interaction, and Feedback](/curricula/designer-modules/interaction-and-feedback/) + - [Topic: Forms Design (labels, instructions, errors, and notifications) [TBD]]() - [Topic: Keyboard Interactions](/curricula/designer-modules/interaction-and-feedback/#topic-keyboard-interactions) - [Topic: Gestures and Motion](/curricula/designer-modules/interaction-and-feedback/#topic-gestures-and-motion) - - [Topic: Labels and Instructions](/curricula/designer-modules/interaction-and-feedback/#topic-labels-and-instructions) - - [Topic: Errors and Notifications](/curricula/designer-modules/interaction-and-feedback/#topic-errors-and-notifications) From a6d0cd9d843264ff09d6ac1ebd821035cd9bba2d Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 9 Aug 2021 09:37:30 +0200 Subject: [PATCH 211/416] Proposed changes in structure --- content/designer/designer-modules.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 774d55468..4f72bf5d2 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -65,16 +65,16 @@ The designer modules are designed for students who have achieved the learning ou - [Module 1: Flexible Color, Layout, and Design (TBD)](/curricula/designer-modules/flexible-layout-and-design) - [Topic: Color (TBD)](/curricula/designer-modules/flexible-layout-and-design/#topic-use-of-color) - [Topic: Text Styling](/curricula/designer-modules/flexible-layout-and-design/#topic-text-styling) - - [Topic: Landmarks]() - [Topic: Flexible Design](/curricula/designer-modules/flexible-layout-and-design/#topic-flexible-design) -- [Module 2: Navigation](/curricula/designer-modules/navigation/) - - [Topic: Menu Behaviors and Patterns](/curricula/designer-modules/navigation/#topic-menu-behaviors-and-patterns) - - [Topic: Other Navigation Mechanisms](/curricula/designer-modules/navigation/#topic-other-navigation-mechanisms) - - [Topic: Location](/curricula/designer-modules/navigation/#topic-location) -- [Module 3: Information Design](/curricula/designer-modules/information-design/) +- [Module 2: Information Design](/curricula/designer-modules/information-design/) - [Topic: Text](/curricula/designer-modules/information-design/#topic-textual-information) + - [Topic: Landmarks [TBD]]() - [Topic: Tables](/curricula/designer-modules/information-design/#topic-tabular-information) - [Topic: Forms and Controls](/curricula/designer-modules/information-design/#topic-forms-and-controls) +- [Module 3: Navigation](/curricula/designer-modules/navigation/) + - [Topic: Menu Behaviors and Patterns](/curricula/designer-modules/navigation/#topic-menu-behaviors-and-patterns) + - [Topic: Other Navigation Mechanisms](/curricula/designer-modules/navigation/#topic-other-navigation-mechanisms) + - [Topic: Location](/curricula/designer-modules/navigation/#topic-location) - [Module 4: Images and Graphics](/curricula/designer-modules/images-and-graphics/#topic-functional-images) - [Topic: Functional Images](/curricula/designer-modules/images-and-graphics/#topic-functional-images) - [Topic: Informative Images](/curricula/designer-modules/images-and-graphics/#topic-informative-images) From 25ce03502f4a4456e949c4c04bfeb9a4842a3a20 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 10 Aug 2021 10:23:13 +0200 Subject: [PATCH 212/416] Flexible color, layout, and design --- _data/navigation.yml | 4 +- content/designer/designer-modules.md | 8 +- ...md => flexible-color-layout-and-design.md} | 82 +++++++++---------- content/designer/images-and-graphics.md | 4 +- content/designer/information-design.md | 4 +- content/designer/navigation.md | 4 +- 6 files changed, 53 insertions(+), 53 deletions(-) rename content/designer/{flexible-layout-and-design.md => flexible-color-layout-and-design.md} (97%) diff --git a/_data/navigation.yml b/_data/navigation.yml index 1794f0a7d..2835cf09a 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -261,8 +261,8 @@ - name: Designer Modules url: "/curricula/designer-modules/" pages: - - name: Flexible Layout and Design - url: "/curricula/designer-modules/flexible-layout-and-design/" + - name: Flexible Color, Layout, and Design + url: "/curricula/designer-modules/flexible-color-layout-and-design/" - name: Navigation url: "/curricula/designer-modules/navigation/" - name: Information Design diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 4f72bf5d2..2cf2cecd1 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -19,7 +19,7 @@ parent_in_h1: name: title navigation: previous: /curricula/developer-modules/rich-applications/ - next: /curricula/designer-modules/flexible-layout-and-design/ + next: /curricula/designer-modules/flexible-color-layout-and-design/ --- ## Introduction @@ -63,9 +63,9 @@ The designer modules are designed for students who have achieved the learning ou ## Designer Modules - [Module 1: Flexible Color, Layout, and Design (TBD)](/curricula/designer-modules/flexible-layout-and-design) - - [Topic: Color (TBD)](/curricula/designer-modules/flexible-layout-and-design/#topic-use-of-color) - - [Topic: Text Styling](/curricula/designer-modules/flexible-layout-and-design/#topic-text-styling) - - [Topic: Flexible Design](/curricula/designer-modules/flexible-layout-and-design/#topic-flexible-design) + - [Topic: Color (TBD)](/curricula/designer-modules/flexible-color-layout-and-design/#topic-use-of-color) + - [Topic: Text Styling](/curricula/designer-modules/flexible-color-layout-and-design/#topic-text-styling) + - [Topic: Flexible Design](/curricula/designer-modules/flexible-color-layout-and-design/#topic-flexible-design) - [Module 2: Information Design](/curricula/designer-modules/information-design/) - [Topic: Text](/curricula/designer-modules/information-design/#topic-textual-information) - [Topic: Landmarks [TBD]]() diff --git a/content/designer/flexible-layout-and-design.md b/content/designer/flexible-color-layout-and-design.md similarity index 97% rename from content/designer/flexible-layout-and-design.md rename to content/designer/flexible-color-layout-and-design.md index 95f6cb96f..dadfdeec1 100644 --- a/content/designer/flexible-layout-and-design.md +++ b/content/designer/flexible-color-layout-and-design.md @@ -1,12 +1,12 @@ --- -title: "[Draft] Module 1: Flexible Layout and Design" -nav_title: "Flexible Layout and Design" -permalink: /curricula/designer-modules/flexible-layout-and-design/ -ref: /curricula/designer-modules/flexible-layout-and-design/ +title: "[Draft] Module 1: Flexible Color, Layout, and Design" +nav_title: "Flexible Color, Layout, and Design" +permalink: /curricula/designer-modules/flexible-color-layout-and-design/ +ref: /curricula/designer-modules/flexible-color-layout-and-design/ lang: en github: repository: w3c/wai-curricula - path: content/designer/flexible-layout-and-design.md + path: content/designer/flexible-colorlayout-and-design.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ @@ -100,105 +100,105 @@ Topics to achieve the learning outcomes: {% include excol.html type="start" %} -### Topic: Text Styling +### Topic: Use of Color {% include excol.html type="middle" %} -Explain how people with disabilities rely on different style properties, such as font sizes and spacing, to support readability. +Describe how some people use color to understand and distinguish content. Explain different ways to supplement information that is presented using color, such as using shapes and icons. +Explain how sufficient color contrast (contrast ratios in WCAG) are essential for people with low vision to perceive, distinguish, and understand content. #### Learning Outcomes for Topic Students should be able to: -* use clear and distinguishable styles for links, buttons, form elements, and text -* define customizable font sizes and font types to support content readability -* define adequate spacing to support readability -* define customizable colors to support readability +* explain how appropriate use of color enables people with disabilities to read, understand, and distinguish user interface components +* use visual cues in addition to color, for example using different patterns, shapes, and icons +* use non-visual cues for people who do not perceive color, for example using text to complement information provided visually +* design text and images of text that have a contrast ratio of at least 4.5:1 with respect to their background +* design large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background +* design components and graphics that have a contrast ratio of at least 3:1 with respect to their background #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Demonstrate the use of styles to distinguish user interface components, such as links, buttons, form labels and instructions, and text. Explain how people rely on font sizes, font types, spacing, and color to distinguish components. -* Show examples of usable font sizes and explain how they support readability. Contrast previous examples with fonts that are not as easy to read. Emphasize that several user groups rely on customizable fonts to be able to read and understand content properly. -* Show examples of different page layouts with and without adequate spacing. Explain how spacing allows for better readability of content and for better identification of the different parts of the user interface. +* Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so supplemental methods to convey that information are required. For references on how to supplement information conveyed through color, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). +* Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios for text (including images of text) need to be at least 4.5:1 with respect to their background. For references on how to apply contrast ratios to text (including images of text), see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). +* Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Students design a prototype with adaptable and distinguishable styles that help users perceive different content. Assess how students use different style properties such as font sizes and spacing to make content perceivable and to distinguish components from one another. +* Short Answer Questions — Give students a set of user interface components and ask them what the contrast ratio should be. Assess how students understand and distinguish contrast ratios for different user interface components. +* Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components, and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing. +* Practical — Give students information presented using color and ask them to supplement that information using other visual cues. Assess how students use shapes and icons to supplement information presented using color distinguishable. {% include excol.html type="end" %} {% include excol.html type="start" %} -### Topic: Landmarks and Cues +### Topic: Text Styling {% include excol.html type="middle" %} -Explain how people with disabilities perceive different web page regions and content through text and visual landmarks and cues. Present different strategies to include such cues early in the design phase. +Explain how people with disabilities rely on different style properties, such as font sizes and spacing, to support readability. #### Learning Outcomes for Topic Students should be able to: -* define page regions by using appropriate visual and programmatic landmarks, such as headings -* use text cues to supplement information provided through vision only, for example to convey required form fields represented with an icon and available dates in a calendar represented with a different background color -* design focus indicators that enable people to tell where they are as they move through web pages and applications using the keyboard +* use clear and distinguishable styles for links, buttons, form elements, and text +* define customizable font sizes and font types to support content readability +* define adequate spacing to support readability +* define customizable colors to support readability #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of different regions of web pages, such as header, navigation, main, and footer. Explain that several groups of people with disabilities rely on visual and programmatic landmarks to perceive such regions. Explain that defining landmarks and their styling is a designers' responsibility, whereas implementing such landmarks and their semantics is a developers' responsibility. -* Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a form field is required and those with colors to convey available dates in a calendar. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). -* Invite students to use a web page that has appropriate focus indicators first, and then invite them to use a web page without focus indicators. Explain how focus indicators allow people using the keyboard only to determine where they are as they move through web pages and applications using the keyboard only. For reference on how to provide appropriate focus indicators, see techniques [G149: Using user interface components that are highlighted by the user agent when they receive focus](https://www.w3.org/WAI/WCAG21/Techniques/general/G149.html) and [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). +* Demonstrate the use of styles to distinguish user interface components, such as links, buttons, form labels and instructions, and text. Explain how people rely on font sizes, font types, spacing, and color to distinguish components. +* Show examples of usable font sizes and explain how they support readability. Contrast previous examples with fonts that are not as easy to read. Emphasize that several user groups rely on customizable fonts to be able to read and understand content properly. +* Show examples of different page layouts with and without adequate spacing. Explain how spacing allows for better readability of content and for better identification of the different parts of the user interface. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Give students a web page and ask them to define the appropriate landmarks and their styling for users to perceive such regions. Assess how students provide mechanisms to perceive such regions. -* Practical &mdash: Give students examples of information conveyed visually and ask them to provide text information to help understand the information. Assess how students provide the necessary textual information and visual cues to supplement information. +* Practical — Students design a prototype with adaptable and distinguishable styles that help users perceive different content. Assess how students use different style properties such as font sizes and spacing to make content perceivable and to distinguish components from one another. {% include excol.html type="end" %} {% include excol.html type="start" %} -### Topic: Use of Color +### Topic: Landmarks and Cues {% include excol.html type="middle" %} -Describe how some people use color to understand and distinguish content. Explain different ways to supplement information that is presented using color, such as using shapes and icons. -Explain how sufficient color contrast (contrast ratios in WCAG) are essential for people with low vision to perceive, distinguish, and understand content. +Explain how people with disabilities perceive different web page regions and content through text and visual landmarks and cues. Present different strategies to include such cues early in the design phase. #### Learning Outcomes for Topic Students should be able to: -* explain how appropriate use of color enables people with disabilities to read, understand, and distinguish user interface components -* use visual cues in addition to color, for example using different patterns, shapes, and icons -* use non-visual cues for people who do not perceive color, for example using text to complement information provided visually -* design text and images of text that have a contrast ratio of at least 4.5:1 with respect to their background -* design large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background -* design components and graphics that have a contrast ratio of at least 3:1 with respect to their background +* define page regions by using appropriate visual and programmatic landmarks, such as headings +* use text cues to supplement information provided through vision only, for example to convey required form fields represented with an icon and available dates in a calendar represented with a different background color +* design focus indicators that enable people to tell where they are as they move through web pages and applications using the keyboard #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so supplemental methods to convey that information are required. For references on how to supplement information conveyed through color, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). -* Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios for text (including images of text) need to be at least 4.5:1 with respect to their background. For references on how to apply contrast ratios to text (including images of text), see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). -* Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. +* Show examples of different regions of web pages, such as header, navigation, main, and footer. Explain that several groups of people with disabilities rely on visual and programmatic landmarks to perceive such regions. Explain that defining landmarks and their styling is a designers' responsibility, whereas implementing such landmarks and their semantics is a developers' responsibility. +* Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a form field is required and those with colors to convey available dates in a calendar. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). +* Invite students to use a web page that has appropriate focus indicators first, and then invite them to use a web page without focus indicators. Explain how focus indicators allow people using the keyboard only to determine where they are as they move through web pages and applications using the keyboard only. For reference on how to provide appropriate focus indicators, see techniques [G149: Using user interface components that are highlighted by the user agent when they receive focus](https://www.w3.org/WAI/WCAG21/Techniques/general/G149.html) and [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Short Answer Questions — Give students a set of user interface components and ask them what the contrast ratio should be. Assess how students understand and distinguish contrast ratios for different user interface components. -* Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components, and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing. -* Practical — Give students information presented using color and ask them to supplement that information using other visual cues. Assess how students use shapes and icons to supplement information presented using color distinguishable. +* Practical — Give students a web page and ask them to define the appropriate landmarks and their styling for users to perceive such regions. Assess how students provide mechanisms to perceive such regions. +* Practical &mdash: Give students examples of information conveyed visually and ask them to provide text information to help understand the information. Assess how students provide the necessary textual information and visual cues to supplement information. {% include excol.html type="end" %} @@ -245,7 +245,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Portfolio — Students design a web page. Assess how students use color, layout, spacing, and position to support content perception and identification. +* Portfolio — Students design a web page. Assess how students use customizable color, layout, spacing, and position to support content perception, identification, and readability. ## Teaching Resources diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 84a8ebc19..9b945ce35 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -53,7 +53,7 @@ Skills required for this module: {% include excol.html type="middle" %} * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) -* [Module 1: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design/) +* [Module 1: #foundation-prerequisitesFlexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) * [Module 2: Navigation](/curricula/designer-modules/navigation/) * [Module 3: Information Design](/curricula/designer-modules/information-design/) * Basic knowledge of: @@ -205,7 +205,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Decorative images are used for ornamental purposes and convey no information or function. Build on [Module 1: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design/) to explain that decorative images also need to adhere to accessibility requirements such as use of color, ability to resize, and flexibility. Decorative images require empty text alternatives, so that they can be ignored by assistive technologies, and reduce noise. Explain that determining if an image is decorative is a responsibility shared with the content author. +Decorative images are used for ornamental purposes and convey no information or function. Build on [Module 1: Flexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) to explain that decorative images also need to adhere to accessibility requirements such as use of color, ability to resize, and flexibility. Decorative images require empty text alternatives, so that they can be ignored by assistive technologies, and reduce noise. Explain that determining if an image is decorative is a responsibility shared with the content author. #### Learning Outcomes for Topic diff --git a/content/designer/information-design.md b/content/designer/information-design.md index b1674d265..fe8aa9169 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -52,7 +52,7 @@ Skills required for this module: {% include excol.html type="middle" %} * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) -* [Module 1: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design/) +* [Module 1: Flexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) * [Module 2: Navigation](/curricula/designer-modules/navigation/) * Basic knowledge of: * Visual Design @@ -189,7 +189,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of different types of information presented in tables. Explain that tables are used when there is a logical, tabular relationship between the information presented, for example when displaying a list of events with their date and venue. -* Refer back to Module 1: Flexible Layout and Design [Topic: Flexible Design](/curricula/designer-modules/flexible-layout-and-design/#topic-flexible-design) and explain that some users may require different ways of presenting tabular information. Explain that these include providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. +* Refer back to Module 1: Flexible Color, Layout, and Design [Topic: Flexible Design](/curricula/designer-modules/flexible-Color-layout-and-design/#topic-flexible-design) and explain that some users may require different ways of presenting tabular information. Explain that these include providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. * Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells needs to be perceived both visually and programmatically. Explain that providing the styles is a designers' responsibility, whereas establishing the programmatic relationship is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/navigation.md b/content/designer/navigation.md index bfebdb396..469e980a8 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -15,7 +15,7 @@ footer: >

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: - previous: /curricula/designer-modules/flexible-layout-and-design/ + previous: /curricula/designer-modules/flexible-color-layout-and-design/ next: /curricula/designer-modules/information-design/ --- @@ -57,7 +57,7 @@ Skills required for this module: {% include excol.html type="middle" %} * [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) -* [Designer Module 1: Flexible Layout and Design](/curricula/designer-modules/flexible-layout-and-design/) +* [Designer Module 1: #foundation-prerequisitesFlexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) * Basic knowledge of: * Visual Design * Prototyping From 0dacdac5aa0955f727a22a11a4093c0ce536c682 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 10 Aug 2021 12:03:32 +0200 Subject: [PATCH 213/416] More structure changes --- _data/navigation.yml | 8 ++++---- content/designer/designer-modules.md | 6 +++--- ...-feedback.md => forms-interactions-and-feedback.md} | 10 +++++----- content/designer/images-and-graphics.md | 4 ++-- content/designer/information-design.md | 6 +++--- content/designer/multimedia-and-animations.md | 6 +++--- content/designer/navigation.md | 2 +- 7 files changed, 21 insertions(+), 21 deletions(-) rename content/designer/{interaction-and-feedback.md => forms-interactions-and-feedback.md} (98%) diff --git a/_data/navigation.yml b/_data/navigation.yml index 2835cf09a..51f9815b3 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -263,16 +263,16 @@ pages: - name: Flexible Color, Layout, and Design url: "/curricula/designer-modules/flexible-color-layout-and-design/" - - name: Navigation - url: "/curricula/designer-modules/navigation/" - name: Information Design url: "/curricula/designer-modules/information-design/" + - name: Navigation + url: "/curricula/designer-modules/navigation/" - name: Images and Graphics url: "/curricula/designer-modules/images-and-graphics/" - name: Multimedia and Animations url: "/curricula/designer-modules/multimedia-and-animations/" - - name: Interaction and Feedback - url: "/curricula/designer-modules/interaction-and-feedback/" + - name: Forms, Interactions, and Feedback + url: "/curricula/designer-modules/forms-interactions-and-feedback/" - name: Changelog url: "/curricula/changelog/" hide: true diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 2cf2cecd1..c6ffada43 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -84,8 +84,8 @@ The designer modules are designed for students who have achieved the learning ou - [Topic: Alternatives to Multimedia Content](/curricula/designer-modules/multimedia-and-animations/#topic-alternatives-to-multimedia-content) - [Media Players [TBD]]() - [Topic: Movement and Animations](/curricula/designer-modules/multimedia-and-animations/#topic-movement-and-animations) -- [Module 6: Forms, Interaction, and Feedback](/curricula/designer-modules/interaction-and-feedback/) +- [Module 6: Forms, Interaction, and Feedback](/curricula/designer-modules/forms-interactions-and-feedback/) - [Topic: Forms Design (labels, instructions, errors, and notifications) [TBD]]() - - [Topic: Keyboard Interactions](/curricula/designer-modules/interaction-and-feedback/#topic-keyboard-interactions) - - [Topic: Gestures and Motion](/curricula/designer-modules/interaction-and-feedback/#topic-gestures-and-motion) + - [Topic: Keyboard Interactions](/curricula/designer-modules/forms-interactions-and-feedback/#topic-keyboard-interactions) + - [Topic: Gestures and Motion](/curricula/designer-modules/forms-interactions-and-feedback/#topic-gestures-and-motion) diff --git a/content/designer/interaction-and-feedback.md b/content/designer/forms-interactions-and-feedback.md similarity index 98% rename from content/designer/interaction-and-feedback.md rename to content/designer/forms-interactions-and-feedback.md index c03727f43..7d6beadcd 100644 --- a/content/designer/interaction-and-feedback.md +++ b/content/designer/forms-interactions-and-feedback.md @@ -1,12 +1,12 @@ --- -title: "[Draft] Module 6: Interaction and Feedback" -nav_title: "Interaction and Feedback" -permalink: /curricula/designer-modules/interaction-and-feedback/ -ref: /curricula/designer-modules/interaction-and-feedback/ +title: "[Draft] Module 6: Forms, Interactions, and Feedback" +nav_title: "Forms, Interactions, and Feedback" +permalink: /curricula/designer-modules/forms-interactions-and-feedback/ +ref: /curricula/designer-modules/forms-interactions-and-feedback/ lang: en github: repository: w3c/wai-curricula - path: content/designer/interaction-and-feedback.md + path: content/designer/forms-interactions-and-feedback.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 9b945ce35..8f06d4fc9 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -54,8 +54,8 @@ Skills required for this module: * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) * [Module 1: #foundation-prerequisitesFlexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) -* [Module 2: Navigation](/curricula/designer-modules/navigation/) -* [Module 3: Information Design](/curricula/designer-modules/information-design/) +* [Module 3: Navigation](/curricula/designer-modules/navigation/) +* [Module 2: Information Design](/curricula/designer-modules/information-design/) * Basic knowledge of: * Visual Design * Prototyping diff --git a/content/designer/information-design.md b/content/designer/information-design.md index fe8aa9169..48919ba83 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 3: Information Design" +title: "[Draft] Module 2: Information Design" nav_title: "Information Design" permalink: /curricula/designer-modules/information-design/ ref: /curricula/designer-modules/information-design/ @@ -53,7 +53,7 @@ Skills required for this module: * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) * [Module 1: Flexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) -* [Module 2: Navigation](/curricula/designer-modules/navigation/) +* [Module 3: Navigation](/curricula/designer-modules/navigation/) * Basic knowledge of: * Visual Design * Prototyping @@ -95,7 +95,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Refer back to [Module 2: Navigation](/curricula/designer-modules/navigation/). Discuss ways to split large amounts of text into smaller pieces. For example, using headings and their corresponding rank levels, pages to split the contents into logical units, and chapter markers to indicate chapters in digital publications. +Refer back to [Module 3: Navigation](/curricula/designer-modules/navigation/). Discuss ways to split large amounts of text into smaller pieces. For example, using headings and their corresponding rank levels, pages to split the contents into logical units, and chapter markers to indicate chapters in digital publications. Discuss the use of icons and other visual cues to help people understand processess and instructions presented in text. Explain that defining how to present these visual cues is a responsibility of the designer, whereas providing such cues is a responsibility shared with the content author. diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 8ab8c27ce..d8307a0ab 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -16,7 +16,7 @@ footer: >

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

navigation: previous: /curricula/designer-modules/images-and-graphics/ - next: /curricula/designer-modules/interaction-and-feedback/ + next: /curricula/designer-modules/forms-interactions-and-feedback/ --- ## Introduction @@ -56,8 +56,8 @@ Skills required for this module: * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) * [Module 1: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design/) -* [Module 2: Navigation](/curricula/designer-modules/navigation/) -* [Module 3: Information Design](/curricula/designer-modules/information-design/) +* [Module 3: Navigation](/curricula/designer-modules/navigation/) +* [Module 2: Information Design](/curricula/designer-modules/information-design/) * [Module 4: Images and Graphics](/curricula/designer-modules/images-and-graphics) * Basic knowledge of: * Visual Design diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 469e980a8..8e5277d05 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 2: Navigation" +title: "[Draft] Module 3: Navigation" nav_title: "Navigation" permalink: /curricula/designer-modules/navigation/ ref: /curricula/designer-modules/navigation/ From 422af817467f7cf151b63eda07b2ccc728c3ef16 Mon Sep 17 00:00:00 2001 From: Daniel-Montalvo Date: Wed, 11 Aug 2021 11:59:12 +0200 Subject: [PATCH 214/416] More structure changes --- content/designer/designer-modules.md | 2 +- .../flexible-color-layout-and-design.md | 33 +++++++++++-------- .../forms-interactions-and-feedback.md | 3 ++ content/designer/images-and-graphics.md | 3 ++ content/designer/information-design.md | 6 ++-- content/designer/multimedia-and-animations.md | 6 +++- content/designer/navigation.md | 3 ++ 7 files changed, 38 insertions(+), 18 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index c6ffada43..43cbedcb3 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -64,7 +64,7 @@ The designer modules are designed for students who have achieved the learning ou - [Module 1: Flexible Color, Layout, and Design (TBD)](/curricula/designer-modules/flexible-layout-and-design) - [Topic: Color (TBD)](/curricula/designer-modules/flexible-color-layout-and-design/#topic-use-of-color) - - [Topic: Text Styling](/curricula/designer-modules/flexible-color-layout-and-design/#topic-text-styling) + - [Topic: Styles](/curricula/designer-modules/flexible-color-layout-and-design/#topic-styles) - [Topic: Flexible Design](/curricula/designer-modules/flexible-color-layout-and-design/#topic-flexible-design) - [Module 2: Information Design](/curricula/designer-modules/information-design/) - [Topic: Text](/curricula/designer-modules/information-design/#topic-textual-information) diff --git a/content/designer/flexible-color-layout-and-design.md b/content/designer/flexible-color-layout-and-design.md index dadfdeec1..bed2fb4dc 100644 --- a/content/designer/flexible-color-layout-and-design.md +++ b/content/designer/flexible-color-layout-and-design.md @@ -29,18 +29,18 @@ navigation: Courses based on this module should: +* explain accessibility requirements for user that can have customized colors, size, and spacing between components * explain how people with disabilities rely on designs that adapt to different screen sizes, configurations, and style sheets -* explain accessibility requirements for user interfaces that can have customized colors, size, and spacing between components ## Learning Outcomes for Module Students should be able to: * explain how people with disabilities rely on designs that adapt to different colors, layouts, spacing, and positions -* use headings, landmarks, text cues, patterns, and icons to supplement information conveyed through color -* design layouts that adapt to different font sizes and spacing set by the user in browser and operating system settings * design layouts with sufficient color contrast for text, images of text, and controls +* use headings, landmarks, text cues, patterns, and icons to supplement information conveyed through color * design clear and distinguishable focus indicators, for example using borders, color, and highlighting +* design layouts that adapt to different font sizes and spacing set by the user in browser and operating system settings * position components where users expect them * identify related requirements for developers to apply the necessary semantics to user interface components @@ -100,7 +100,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="start" %} -### Topic: Use of Color +### Topic: Color {% include excol.html type="middle" %} @@ -112,19 +112,19 @@ Explain how sufficient color contrast (contrast ratios in WCAG) are essential fo Students should be able to: * explain how appropriate use of color enables people with disabilities to read, understand, and distinguish user interface components -* use visual cues in addition to color, for example using different patterns, shapes, and icons -* use non-visual cues for people who do not perceive color, for example using text to complement information provided visually * design text and images of text that have a contrast ratio of at least 4.5:1 with respect to their background * design large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background * design components and graphics that have a contrast ratio of at least 3:1 with respect to their background +* use visual cues in addition to color, for example using different patterns, shapes, and icons +* use non-visual cues for people who do not perceive color, for example using text to complement information provided visually #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so supplemental methods to convey that information are required. For references on how to supplement information conveyed through color, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). * Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios for text (including images of text) need to be at least 4.5:1 with respect to their background. For references on how to apply contrast ratios to text (including images of text), see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). * Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. +* Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so supplemental methods to convey that information are required. For references on how to supplement information conveyed through color, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). #### Ideas to Assess Knowledge for Topic @@ -138,18 +138,19 @@ Optional ideas to assess knowledge: {% include excol.html type="start" %} -### Topic: Text Styling +### Topic: Styles {% include excol.html type="middle" %} -Explain how people with disabilities rely on different style properties, such as font sizes and spacing, to support readability. +Explain how people with disabilities rely on different style properties, such as font types, sizes, and spacing, to support readability. #### Learning Outcomes for Topic Students should be able to: * use clear and distinguishable styles for links, buttons, form elements, and text -* define customizable font sizes and font types to support content readability +* define customizable font types to support content readability +* define customizable font sizes to support readability * define adequate spacing to support readability * define customizable colors to support readability @@ -157,7 +158,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Demonstrate the use of styles to distinguish user interface components, such as links, buttons, form labels and instructions, and text. Explain how people rely on font sizes, font types, spacing, and color to distinguish components. +* Demonstrate the use of styles to distinguish user interface components, such as links, buttons, form labels and instructions, and text. Explain how people rely on font types, font sizes, spacing, and color to distinguish components. * Show examples of usable font sizes and explain how they support readability. Contrast previous examples with fonts that are not as easy to read. Emphasize that several user groups rely on customizable fonts to be able to read and understand content properly. * Show examples of different page layouts with and without adequate spacing. Explain how spacing allows for better readability of content and for better identification of the different parts of the user interface. @@ -189,7 +190,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different regions of web pages, such as header, navigation, main, and footer. Explain that several groups of people with disabilities rely on visual and programmatic landmarks to perceive such regions. Explain that defining landmarks and their styling is a designers' responsibility, whereas implementing such landmarks and their semantics is a developers' responsibility. +* Show examples of different regions of web pages, such as header, navigation, main, and footer. Explain that several groups of people with disabilities rely on visual and programmatic landmarks to perceive such regions. Explain that defining landmarks and their styles is a designers' responsibility, whereas implementing such landmarks and their semantics is a developers' responsibility. * Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a form field is required and those with colors to convey available dates in a calendar. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). * Invite students to use a web page that has appropriate focus indicators first, and then invite them to use a web page without focus indicators. Explain how focus indicators allow people using the keyboard only to determine where they are as they move through web pages and applications using the keyboard only. For reference on how to provide appropriate focus indicators, see techniques [G149: Using user interface components that are highlighted by the user agent when they receive focus](https://www.w3.org/WAI/WCAG21/Techniques/general/G149.html) and [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). @@ -225,8 +226,8 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Discuss with students the differences between web sites and applications that preserve content and functionality when resized up to 200% and those which do not. Explain that people with low vision often need to resize text to read it properly. For references on how to ensure text resizes up to 200%, see technique [G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width](https://www.w3.org/WAI/WCAG21/Techniques/general/G179). -* Discuss the use of multiple breakpoints by people with low vision. Explain that these breakpoints often go beyond the traditional mobile, tablet, and desktop breakpoints. +* Explain that people with low vision often need to resize text to read it properly. Discuss with students the differences between web sites and applications that preserve content and functionality when resized up to 200% and those which do not. For references on how to ensure text resizes up to 200%, see technique [G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width](https://www.w3.org/WAI/WCAG21/Techniques/general/G179). +* Discuss the use of multiple screen sizes, screen configurations, and style sheets by people with low vision. Explain that these configurations often go beyond the traditional mobile, tablet, and desktop breakpoints. * Show examples of user interfaces showing up in both portrait and landscape modes. Explain that the ability to show an interface both in portrait and landscape is important for people who cannot change their device orientation due to mobility impairments. * Show examples of different tap targets and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that tap targets need to be large enough to accommodate different people's needs. * Show examples of different user interfaces that support customizing line height as well as spacing between paragraphs, words, and letters to support readability. @@ -252,4 +253,8 @@ Optional ideas to assess knowledge: Suggested resources to support your teaching: * [[How People with Disabilities Use the Web]](/people-use-web/) — Describes some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. +* [Keyboard Compatibility (Web Accessibility Perspective)](/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Colors with Good Contrast (Web Accessibility Perspective)](/perspective-videos/contrast/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Clear Layout and Design (Web Accessibility Perspective)](/perspective-videos/layout/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Customizable Text (Web Accessibility Perspective)](/perspective-videos/customizable/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. diff --git a/content/designer/forms-interactions-and-feedback.md b/content/designer/forms-interactions-and-feedback.md index 7d6beadcd..66675eb91 100644 --- a/content/designer/forms-interactions-and-feedback.md +++ b/content/designer/forms-interactions-and-feedback.md @@ -288,5 +288,8 @@ Suggested resources to support your teaching: * [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. * [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Colors with Good Contrast (Web Accessibility Perspective)](/perspective-videos/contrast/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Clear Layout and Design (Web Accessibility Perspective)](/perspective-videos/layout/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Large Links, Buttons, and Controls (Web Accessibility Perspectives)](/perspective-videos/controls/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [Notifications and Feedback (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/notifications/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 8f06d4fc9..93bf546f0 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -245,5 +245,8 @@ Suggested resources to support your teaching: * [Images (WAI Web Accessibility Tutorials)](https://www.w3.org/WAI/tutorials/images/) — Shows how to provide alternatives to images that are accessible to people with disabilities. * [[How People with Disabilities Use the Web]](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. +* [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Colors with Good Contrast (Web Accessibility Perspective)](/perspective-videos/contrast/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Clear Layout and Design (Web Accessibility Perspective)](/perspective-videos/layout/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 48919ba83..bc328c5f4 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -97,7 +97,8 @@ Topics to achieve the learning outcomes: Refer back to [Module 3: Navigation](/curricula/designer-modules/navigation/). Discuss ways to split large amounts of text into smaller pieces. For example, using headings and their corresponding rank levels, pages to split the contents into logical units, and chapter markers to indicate chapters in digital publications. -Discuss the use of icons and other visual cues to help people understand processess and instructions presented in text. Explain that defining how to present these visual cues is a responsibility of the designer, whereas providing such cues is a responsibility shared with the content author. +Discuss the use of icons and other visual cues to help people understand + and instructions presented in text. Explain that defining how to present these visual cues is a responsibility of the designer, whereas providing such cues is a responsibility shared with the content author. #### Learning Outcomes for Topic @@ -128,7 +129,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Present students with an eBook and ask them to define how it should be split into smaller and more manageable pieces so that it can be easier to navigate and understand. Assess how students use headings and rank levels, pages, and chapter markers to split large amounts of text into smaller and more manageable pieces. -* Practical — Give students a complex piece of text and ask them to complement it with diagrams and illustrations. Assess how students provide mechanisms to complement processess and instructions presented in text. +* Practical — Give students a complex piece of text and ask them to complement it with diagrams and illustrations. Assess how students provide mechanisms to complement processes and instructions presented in text. * Practical — Present students with unusual words and abbreviations and ask them to define a mechanism to provide the explanation of such words or the expansion of the abbreviations. Assess how students define a mechanism to provide explanations of unusual words and expansions of abbreviations. {% include excol.html type="end" %} @@ -216,4 +217,5 @@ Suggested resources to support your teaching: * [[How People with Disabilities Use the Web]](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. * [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Understandable Content (Web Accessibility Perspective)](/perspective-videos/understandable/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index d8307a0ab..fbbb004cd 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -200,6 +200,10 @@ Optional ideas to assess knowledge: Suggested resources to support your teaching: * [Making Audio and Video Media Accessible](https://www.w3.org/WAI/media/av/) — Covers captions/subtitles, audio description of visual information, descriptive transcripts, and sign language. Includes guidance for creating new videos, and on media player accessibility. Introduces user experiences and benefits to organizations. -* [Video Captions (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/captions/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. +* [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Colors with Good Contrast (Web Accessibility Perspective)](/perspective-videos/contrast/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Clear Layout and Design (Web Accessibility Perspective)](/perspective-videos/layout/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Large Links, Buttons, and Controls (Web Accessibility Perspectives)](/perspective-videos/controls/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Video Captions (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/captions/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 8e5277d05..f1d00e9dc 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -235,4 +235,7 @@ Suggested resources to support your teaching: * [Menus (WAI Web Accessibility Tutorials)](https://www.w3.org/WAI/tutorials/menus/) — Shows how to design navigational mechanisms that are accessible to people with disabilities. * [[How People with Disabilities Use the Web]](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. * [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Colors with Good Contrast (Web Accessibility Perspective)](/perspective-videos/contrast/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Text to Speech (Web Accessibility Perspectives)](/perspective-videos/speech/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Large Links, Buttons, and Controls (Web Accessibility Perspectives)](/perspective-videos/controls/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. From 72d3d359aee4df4a5206041eae02a82bde3fcd5e Mon Sep 17 00:00:00 2001 From: Daniel-Montalvo Date: Wed, 11 Aug 2021 12:08:41 +0200 Subject: [PATCH 215/416] Fix typo --- content/designer/designer-modules.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 43cbedcb3..4b57b1073 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -80,7 +80,7 @@ The designer modules are designed for students who have achieved the learning ou - [Topic: Informative Images](/curricula/designer-modules/images-and-graphics/#topic-informative-images) - [Topic: Complex Images](/curricula/designer-modules/images-and-graphics/#topic-complex-images) - [Topic: Decorative Images](/curricula/designer-modules/images-and-graphics/#topic-decorative-images) -- [Module 5: Multimeedia and Animations](/curricula/designer-modules/multimedia-and-animations/) +- [Module 5: Multimedia and Animations](/curricula/designer-modules/multimedia-and-animations/) - [Topic: Alternatives to Multimedia Content](/curricula/designer-modules/multimedia-and-animations/#topic-alternatives-to-multimedia-content) - [Media Players [TBD]]() - [Topic: Movement and Animations](/curricula/designer-modules/multimedia-and-animations/#topic-movement-and-animations) From 37e301ca600eac75b1c6b8ca63a3588ce9de3aeb Mon Sep 17 00:00:00 2001 From: Daniel-Montalvo Date: Wed, 11 Aug 2021 12:24:37 +0200 Subject: [PATCH 216/416] Trying relative URIs --- _external/data | 2 +- content/acknowledgements.md | 2 +- content/developer/custom-widgets.md | 24 +++--- content/developer/developer-modules.md | 2 +- content/developer/forms.md | 54 ++++++------- content/developer/images.md | 32 ++++---- content/developer/menus.md | 46 +++++------ content/developer/page-structure.md | 80 +++++++++---------- content/developer/rich-applications.md | 38 ++++----- content/developer/tables.md | 32 ++++---- .../getting-started-with-accessibility.md | 2 +- .../principles-standards-and-checks.md | 2 +- 12 files changed, 158 insertions(+), 158 deletions(-) diff --git a/_external/data b/_external/data index 16c14b3b0..2597342bd 160000 --- a/_external/data +++ b/_external/data @@ -1 +1 @@ -Subproject commit 16c14b3b0dc9d9db6b3a4e45753ed81d451dc24f +Subproject commit 2597342bd8b9736e67ef5086c0a9970bf10021ef diff --git a/content/acknowledgements.md b/content/acknowledgements.md index 69b8720eb..a16f0219b 100644 --- a/content/acknowledgements.md +++ b/content/acknowledgements.md @@ -14,7 +14,7 @@ footer: >

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

--- -The [WAI Curricula](/curricula/) was developed by the W3C Accessibility Education and Outreach Working Group ([EOWG](https://www.w3.org/WAI/EO/)) and the [WAI Curricula Task Force](https://www.w3.org/WAI/EO/wiki/WAI_Curricula/WAI_Curricula_TF), with support from the [WAI-Guide Project](https://www.w3.org/WAI/about/projects/wai-guide/) funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245). +The [WAI Curricula](/curricula/) was developed by the W3C Accessibility Education and Outreach Working Group ([EOWG](/EO/)) and the [WAI Curricula Task Force](/EO/wiki/WAI_Curricula/WAI_Curricula_TF), with support from the [WAI-Guide Project](/about/projects/wai-guide/) funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245). Project Leadership ------------------ diff --git a/content/developer/custom-widgets.md b/content/developer/custom-widgets.md index de6320e21..da3592af5 100644 --- a/content/developer/custom-widgets.md +++ b/content/developer/custom-widgets.md @@ -73,12 +73,12 @@ Skills required for this module: {% include excol.html type="middle" %} * Applied expertise in teaching: - * [WCAG 2 Success Criterion 1.4.13 Content on Hover or Focus](https://www.w3.org/WAI/WCAG21/quickref/#content-on-hover-or-focus) - * [WCAG 2 Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/WAI/WCAG21/quickref/#pause-stop-hide) - * [WCAG 2 Success Criterion 2.5.1 Pointer Gestures](https://www.w3.org/WAI/WCAG21/quickref/#pointer-gestures) - * [WCAG 2 Success Criterion 3.2.1 On Focus](https://www.w3.org/WAI/WCAG21/quickref/#on-focus) - * [WCAG 2 Success Criterion 4.1.1 Parsing](https://www.w3.org/WAI/WCAG21/quickref/#parsing) - * [WCAG 2 Success Criterion 4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/quickref/#name-role-value) + * [WCAG 2 Success Criterion 1.4.13 Content on Hover or Focus](/WCAG21/quickref/#content-on-hover-or-focus) + * [WCAG 2 Success Criterion 2.2.2 Pause, Stop, Hide](/WCAG21/quickref/#pause-stop-hide) + * [WCAG 2 Success Criterion 2.5.1 Pointer Gestures](/WCAG21/quickref/#pointer-gestures) + * [WCAG 2 Success Criterion 3.2.1 On Focus](/WCAG21/quickref/#on-focus) + * [WCAG 2 Success Criterion 4.1.1 Parsing](/WCAG21/quickref/#parsing) + * [WCAG 2 Success Criterion 4.1.2 Name, Role, Value](/WCAG21/quickref/#name-role-value) * [HTML5 Living Standard {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/) * [WAI-ARIA specification](https://www.w3.org/TR/wai-aria/) * [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/) @@ -274,10 +274,10 @@ Suggested resources to support your teaching: * [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/) — Provides readers with an understanding of how to use WAI-ARIA 1.1 to create accessible rich internet applications. * [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. -* [Notifications and Feedback (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/notifications/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. -* [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. -* [Text to Speech (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/speech/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. -* [Clear Layout and Design (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/layout/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. -* [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. -* [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) — Describes the roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications. +* [Notifications and Feedback (Web Accessibility Perspectives)](/perspective-videos/notifications/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Keyboard Compatibility (Web Accessibility Perspectives)](/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Text to Speech (Web Accessibility Perspectives)](/perspective-videos/speech/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Clear Layout and Design (Web Accessibility Perspectives)](/perspective-videos/layout/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [WCAG](/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. +* [WAI-ARIA](/standards-guidelines/aria/) — Describes the roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications. * [HTML5 living standard {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/) — The core markup language for the web. diff --git a/content/developer/developer-modules.md b/content/developer/developer-modules.md index d8f3e01b3..1c9aa0f7f 100644 --- a/content/developer/developer-modules.md +++ b/content/developer/developer-modules.md @@ -47,7 +47,7 @@ These modules focus on accessible markup and coding techniques. They are primari ## Prerequisites for Students -The developer modules are designed for students who have achieved the learning outcomes from the following subset of [Foundation modules](https://www.w3.org/WAI/curricula/foundation-modules/): +The developer modules are designed for students who have achieved the learning outcomes from the following subset of [Foundation modules](/curricula/foundation-modules/): * [Module 1: What is Web accessibility](/curricula/foundation-modules/what-is-web-accessibility/) * Topic: Stories of People with Disabilities diff --git a/content/developer/forms.md b/content/developer/forms.md index 8874fca26..c068df8a2 100644 --- a/content/developer/forms.md +++ b/content/developer/forms.md @@ -73,18 +73,18 @@ Skills required for this module: {% include excol.html type="middle" %} * Applied expertise in teaching: - * [WCAG 2 Success Criterion 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) - * [WCAG 2 Success Criterion 1.3.5 Identify Input Purpose](https://www.w3.org/WAI/WCAG21/quickref/#identify-input-purpose) - * [WCAG 2 Success Criterion 2.2.1 Timing Adjustable](https://www.w3.org/WAI/WCAG21/quickref/#timing-adjustable) - * [WCAG 2 Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) - * [WCAG 2 Success Criterion 2.5.3 Label in Name](https://www.w3.org/WAI/WCAG21/quickref/#label-in-name) - * [WCAG 2 Success Criterion 3.2.2 On Input](https://www.w3.org/WAI/WCAG21/quickref/#on-input) - * [WCAG 2 Success Criterion 3.3.1 Error Identification](https://www.w3.org/WAI/WCAG21/quickref/#error-identification) - * [WCAG 2 Success Criterion 3.3.2 Labels or Instructions](https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions) - * [WCAG 2 Success Criterion 3.3.3 Error Suggestion](https://www.w3.org/WAI/WCAG21/quickref/#error-suggestion) - * [WCAG 2 Success Criterion 3.3.4 Error Prevention](https://www.w3.org/WAI/WCAG21/quickref/#error-prevention-legal-financial-data) - * [WCAG 2 Success Criterion 4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/quickref/#name-role-value) - * [WCAG 2 Success Criterion 4.1.3 Status Messages](https://www.w3.org/WAI/WCAG21/quickref/#status-messages) + * [WCAG 2 Success Criterion 1.3.1 Info and Relationships](/WCAG21/quickref/#info-and-relationships) + * [WCAG 2 Success Criterion 1.3.5 Identify Input Purpose](/WCAG21/quickref/#identify-input-purpose) + * [WCAG 2 Success Criterion 2.2.1 Timing Adjustable](/WCAG21/quickref/#timing-adjustable) + * [WCAG 2 Success Criterion 2.4.6 Headings and Labels](/WCAG21/quickref/#headings-and-labels) + * [WCAG 2 Success Criterion 2.5.3 Label in Name](/WCAG21/quickref/#label-in-name) + * [WCAG 2 Success Criterion 3.2.2 On Input](/WCAG21/quickref/#on-input) + * [WCAG 2 Success Criterion 3.3.1 Error Identification](/WCAG21/quickref/#error-identification) + * [WCAG 2 Success Criterion 3.3.2 Labels or Instructions](/WCAG21/quickref/#labels-or-instructions) + * [WCAG 2 Success Criterion 3.3.3 Error Suggestion](/WCAG21/quickref/#error-suggestion) + * [WCAG 2 Success Criterion 3.3.4 Error Prevention](/WCAG21/quickref/#error-prevention-legal-financial-data) + * [WCAG 2 Success Criterion 4.1.2 Name, Role, Value](/WCAG21/quickref/#name-role-value) + * [WCAG 2 Success Criterion 4.1.3 Status Messages](/WCAG21/quickref/#status-messages) * [HTML forms {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/forms.html#forms) * [HTML `form` element {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/forms.html#the-form-element) * [HTML `label` element {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/forms.html#the-label-element), @@ -130,10 +130,10 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Provide examples of explicit and implicit associations using the `label` element. Explain that an implicit association can be achieved by wrapping the `label` element and its content around the form control. Explain explicit associations by means of the `for` attribute and indicate that its value must be a unique identifier of the form control that the label refers to. Explain the use of other explicit associations using the HTML attribute `title`, the WAI-ARIA attributes `aria-label` and `aria-labelledby`. Explain that use of `placeholder` for labels should be avoided as its value disappears once the user has entered a value. Examples of how to label form controls are provided in the WAI tutorials on [Labeling controls](https://www.w3.org/WAI/tutorials/forms/labels/). -* Show examples of form controls that are related to each other, such as check boxes and radio buttons to select possible answers for a given question. Mention that the `fieldset` element is used to group them all, and that the `legend` element provides the label they share. Examples of how to group form controls are provided in the WAI tutorials on [Grouping controls](https://www.w3.org/WAI/tutorials/forms/grouping/). +* Provide examples of explicit and implicit associations using the `label` element. Explain that an implicit association can be achieved by wrapping the `label` element and its content around the form control. Explain explicit associations by means of the `for` attribute and indicate that its value must be a unique identifier of the form control that the label refers to. Explain the use of other explicit associations using the HTML attribute `title`, the WAI-ARIA attributes `aria-label` and `aria-labelledby`. Explain that use of `placeholder` for labels should be avoided as its value disappears once the user has entered a value. Examples of how to label form controls are provided in the WAI tutorials on [Labeling controls](/tutorials/forms/labels/). +* Show examples of form controls that are related to each other, such as check boxes and radio buttons to select possible answers for a given question. Mention that the `fieldset` element is used to group them all, and that the `legend` element provides the label they share. Examples of how to group form controls are provided in the WAI tutorials on [Grouping controls](/tutorials/forms/grouping/). * Invite students to navigate form controls using the keyboard only. Demonstrate the use of the tab key to move through different form controls. Demonstrate the use of the arrow keys to select options from combo boxes and lists. -* Demonstrate the use of voice commands, keystrokes, and gestures provided by assistive technologies and adaptive strategies to navigate through form controls. Explore advanced functionality that some tools provide, such as presenting all form controls in a list where users can select the form control they are interested in. Examples of how people with disabilities interact with the Web are provided in [How People with Disabilities Use the Web](https://www.w3.org/WAI/people-use-web/). +* Demonstrate the use of voice commands, keystrokes, and gestures provided by assistive technologies and adaptive strategies to navigate through form controls. Explore advanced functionality that some tools provide, such as presenting all form controls in a list where users can select the form control they are interested in. Examples of how people with disabilities interact with the Web are provided in [How People with Disabilities Use the Web](/people-use-web/). * Demonstrate how people with mobility impairments or with low vision can click the label element to activate a specific form control if both are associated with each other. #### Ideas to Assess Knowledge for Topic @@ -173,8 +173,8 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of common instructions for form controls such as those related to allowed data formats, and general timing instructions. Explain that these instructions need to be provided before the form controls appear, so that they are clearly perceivable before initiating form completion. Examples of how to code general instructions for form controls are provided in the WAI tutorials, [Overall instructions](https://www.w3.org/WAI/tutorials/forms/instructions/#overall-instructions). -* Show examples of additional instructions for form controls provided using the HTML attribute `title` or `placeholder`, or the WAI-ARIA attributes `aria-label`, or `aria-labelledby`. Mention that `title` and `placeholder` may not be well supported by some assistive technologies. Explain that the value of the `placeholder` disappears when the user enters a value, so essential instructions need to be provided using the other described methods. Emphasize that contents provided using WAI-ARIA are available for assistive technologies only and are not visible on screen. For examples of additional methods to provide labels for form controls, see technique [H65: Using the title attribute to identify form controls when the label  element cannot be used](https://www.w3.org/WAI/WCAG21/Techniques/html/H65). Examples of how to provide in-line instructions for form controls are provided in the WAI tutorials, [In-line instructions](https://www.w3.org/WAI/tutorials/forms/instructions/#in-line-instructions). +* Show examples of common instructions for form controls such as those related to allowed data formats, and general timing instructions. Explain that these instructions need to be provided before the form controls appear, so that they are clearly perceivable before initiating form completion. Examples of how to code general instructions for form controls are provided in the WAI tutorials, [Overall instructions](/tutorials/forms/instructions/#overall-instructions). +* Show examples of additional instructions for form controls provided using the HTML attribute `title` or `placeholder`, or the WAI-ARIA attributes `aria-label`, or `aria-labelledby`. Mention that `title` and `placeholder` may not be well supported by some assistive technologies. Explain that the value of the `placeholder` disappears when the user enters a value, so essential instructions need to be provided using the other described methods. Emphasize that contents provided using WAI-ARIA are available for assistive technologies only and are not visible on screen. For examples of additional methods to provide labels for form controls, see technique [H65: Using the title attribute to identify form controls when the label  element cannot be used](/WCAG21/Techniques/html/H65). Examples of how to provide in-line instructions for form controls are provided in the WAI tutorials, [In-line instructions](/tutorials/forms/instructions/#in-line-instructions). * Show examples of required form controls using the HTML attribute `required` and corresponding text added in the label. Explain why it is necessary to provide this information in multiple ways so that it is available to all users, rather than to rely on color alone or on the HTML semantics alone. #### Ideas to Assess Knowledge for Topic @@ -215,15 +215,15 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Introduce the different ways in which errors can be announced after form submission. Explain how warning messages can be included in the title of pages and their main headings, so that users are aware of the errors. Examples of how to communicate error messages are provided in the WAI tutorials on [Overall feedback](https://www.w3.org/WAI/tutorials/forms/notifications/#overall-feedback). -* Demonstrate the use of mechanisms to provide in-line error messages for form controls, such as using the HTML element `label` or the WAI-ARIA attribute `aria-describedby`. Explain that programmatic associations help assistive technologies and adaptive strategies relate error messages to their specific field as users move around. Explain that WAI-ARIA live regions can be used to provide instant feedback as users are typing in a form control or as validation outputs appear so that people using screen readers can understand the information provided. Examples of how to code in-line error messages are provided in the WAI tutorials on [In-line feedback](https://www.w3.org/WAI/tutorials/forms/notifications/#inline). -* Demonstrate the use of some common HTML5 elements, such as `date`, `time`, `url`, `email`, and `pattern`. Explain that they allow users to enter data more reliably and help validation. Examples of how to validate common input are provided in the WAI tutorials on [Validating common input](https://www.w3.org/WAI/tutorials/forms/validation/#validating-common-input). +* Introduce the different ways in which errors can be announced after form submission. Explain how warning messages can be included in the title of pages and their main headings, so that users are aware of the errors. Examples of how to communicate error messages are provided in the WAI tutorials on [Overall feedback](/tutorials/forms/notifications/#overall-feedback). +* Demonstrate the use of mechanisms to provide in-line error messages for form controls, such as using the HTML element `label` or the WAI-ARIA attribute `aria-describedby`. Explain that programmatic associations help assistive technologies and adaptive strategies relate error messages to their specific field as users move around. Explain that WAI-ARIA live regions can be used to provide instant feedback as users are typing in a form control or as validation outputs appear so that people using screen readers can understand the information provided. Examples of how to code in-line error messages are provided in the WAI tutorials on [In-line feedback](/tutorials/forms/notifications/#inline). +* Demonstrate the use of some common HTML5 elements, such as `date`, `time`, `url`, `email`, and `pattern`. Explain that they allow users to enter data more reliably and help validation. Examples of how to validate common input are provided in the WAI tutorials on [Validating common input](/tutorials/forms/validation/#validating-common-input). * Demonstrate the use of the WAI-ARIA attribute `aria-live` together with its values to indicate the priority with which updates are announced. For reference on the meaning of the different values of the WAI-ARIA attribute `aria-live`, see the WAI-ARIA specification, [`aria-live`](https://www.w3.org/TR/wai-aria/#aria-live). * Explain the use of the WAI-ARIA attribute `aria-relevant` to communicate which changes of the region should be announced: additions, removals, or all. For reference on how to use `aria-relevant`, see the WAI-ARIA specification, [`aria-relevant`](https://www.w3.org/TR/wai-aria/#aria-relevant). * Demonstrate the use of alert widgets such as a time warning and an error. Explain that these alerts may not be noticed while using assistive technologies, so additional markup is required. Examples of how to code these alerts are provided in the WAI-ARIA Authoring Practices [Alert](https://www.w3.org/TR/wai-aria-practices/examples/alert/alert.html). -* Show examples of mechanisms that allow to stop the time limit, such as a check box at the beginning of the form. For an example of how to provide these mechanisms, see techniques [G198: Providing a way for the user to turn the time limit off](https://www.w3.org/WAI/WCAG21/Techniques/general/G198.html) and [G133: Providing a checkbox on the first page of a multipart form that allows users to ask for longer session time limit or no session time limit](https://www.w3.org/WAI/WCAG21/Techniques/general/G133). -* Show examples of mechanisms that allow to adjust time limits when they are about to expire. For examples of how to write code to adjust time limits, see technique [SCR16: Providing a script that warns the user a time limit is about to expire](https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR16.html). -* Show examples of mechanisms that allow to extend time limits. Explain that they need to allow for extensions of up to 10 times the original time limit. For an example of a mechanism that allows to extend time limits, see technique [SCR1: Allowing the user to extend the default time limit](https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR1.html). +* Show examples of mechanisms that allow to stop the time limit, such as a check box at the beginning of the form. For an example of how to provide these mechanisms, see techniques [G198: Providing a way for the user to turn the time limit off](/WCAG21/Techniques/general/G198.html) and [G133: Providing a checkbox on the first page of a multipart form that allows users to ask for longer session time limit or no session time limit](/WCAG21/Techniques/general/G133). +* Show examples of mechanisms that allow to adjust time limits when they are about to expire. For examples of how to write code to adjust time limits, see technique [SCR16: Providing a script that warns the user a time limit is about to expire](/WCAG21/Techniques/client-side-script/SCR16.html). +* Show examples of mechanisms that allow to extend time limits. Explain that they need to allow for extensions of up to 10 times the original time limit. For an example of a mechanism that allows to extend time limits, see technique [SCR1: Allowing the user to extend the default time limit](/WCAG21/Techniques/client-side-script/SCR1.html). #### Ideas to Assess Knowledge for Topic @@ -252,9 +252,9 @@ Optional ideas to support assessment: Suggested resources to support your teaching: -* [Forms (WAI Web Accessibility Tutorials)](https://www.w3.org/WAI/tutorials/forms) — Shows how to develop forms that are accessible to people with disabilities. +* [Forms (WAI Web Accessibility Tutorials)](/tutorials/forms) — Shows how to develop forms that are accessible to people with disabilities. * [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. -* [Notifications and Feedback (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/notifications/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. -* [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, form controls, and mobile devices. -* [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) — Describes the roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications. +* [Notifications and Feedback (Web Accessibility Perspectives)](/perspective-videos/notifications/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [WCAG](/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, form controls, and mobile devices. +* [WAI-ARIA](/standards-guidelines/aria/) — Describes the roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications. * [HTML5 living standard {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/) — The core markup language for the web. diff --git a/content/developer/images.md b/content/developer/images.md index a54c30e55..d6a1f89c2 100644 --- a/content/developer/images.md +++ b/content/developer/images.md @@ -78,10 +78,10 @@ Skills required for this module: {% include excol.html type="middle" %} * Applied expertise in teaching: - * [WCAG 2 Success Criterion 1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG21/quickref/#non-text-content) - * [WCAG 2 Success Criterion 1.4.5 Images of Text](https://www.w3.org/WAI/WCAG21/quickref/#images-of-text) - * [WCAG 2 Success Criterion 1.4.9 Images of Text (No Exception)](https://www.w3.org/WAI/WCAG21/quickref/#images-of-text-no-exception) - * [WCAG 2 Success Criterion 4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/quickref/#name-role-value) + * [WCAG 2 Success Criterion 1.1.1 Non-text Content](/WCAG21/quickref/#non-text-content) + * [WCAG 2 Success Criterion 1.4.5 Images of Text](/WCAG21/quickref/#images-of-text) + * [WCAG 2 Success Criterion 1.4.9 Images of Text (No Exception)](/WCAG21/quickref/#images-of-text-no-exception) + * [WCAG 2 Success Criterion 4.1.2 Name, Role, Value](/WCAG21/quickref/#name-role-value) * [HTML `img` element {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element) * [HTML `alt` attribute {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-alt) * [HTML `longdesc` attribute {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/obsolete.html#dom-frame-longdesc) @@ -124,9 +124,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Explain that the HTML attribute `alt` should contain concise and clear information about the image. State why it is not necessary to include the word "image" in the text alternative because the HTML element `img` is already announced by assistive technologies. Mention that decorative images should have empty ("") values in the `alt` attributes, or that they should be included in the web page using CSS instead, so that they are ignored by assistive technologies. Examples of how to use `alt` to code text alternatives are provided in techniques [H2: Combining adjacent image and text links for the same resource](https://www.w3.org/WAI/WCAG21/Techniques/html/H2) and [H37: Using alt attributes on `img` elements](https://www.w3.org/WAI/WCAG21/Techniques/html/H37). -* Demonstrate other ways to provide text alternatives, such as the HTML attribute `title` and WAI-ARIA attributes `aria-label` and `aria-labelledby`. Explain that these may not be well supported by older browsers and assistive technologies. Examples of how to use `aria-label` and `aria-labelledby` to provide descriptions for images are provided in techniques [ARIA6: Using aria-label to provide labels for objects](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA6.html) and [ARIA10: Using aria-labelledby to provide a text alternative for non-text content](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA10.html). -* Show different examples of informative images (including images of text) and contrast them with decorative images. Explain how context can affect the meaning of the same image. Emphasize how each context may require a different text alternative, including an empty text alternative when the image is decorative. Descriptions of informative and decorative images are provided in the WAI tutorials on [Decorative Images](https://www.w3.org/WAI/tutorials/images/decorative/) and [Informative Images](https://www.w3.org/WAI/tutorials/images/informative/). +* Explain that the HTML attribute `alt` should contain concise and clear information about the image. State why it is not necessary to include the word "image" in the text alternative because the HTML element `img` is already announced by assistive technologies. Mention that decorative images should have empty ("") values in the `alt` attributes, or that they should be included in the web page using CSS instead, so that they are ignored by assistive technologies. Examples of how to use `alt` to code text alternatives are provided in techniques [H2: Combining adjacent image and text links for the same resource](/WCAG21/Techniques/html/H2) and [H37: Using alt attributes on `img` elements](/WCAG21/Techniques/html/H37). +* Demonstrate other ways to provide text alternatives, such as the HTML attribute `title` and WAI-ARIA attributes `aria-label` and `aria-labelledby`. Explain that these may not be well supported by older browsers and assistive technologies. Examples of how to use `aria-label` and `aria-labelledby` to provide descriptions for images are provided in techniques [ARIA6: Using aria-label to provide labels for objects](/WCAG21/Techniques/aria/ARIA6.html) and [ARIA10: Using aria-labelledby to provide a text alternative for non-text content](/WCAG21/Techniques/aria/ARIA10.html). +* Show different examples of informative images (including images of text) and contrast them with decorative images. Explain how context can affect the meaning of the same image. Emphasize how each context may require a different text alternative, including an empty text alternative when the image is decorative. Descriptions of informative and decorative images are provided in the WAI tutorials on [Decorative Images](/tutorials/images/decorative/) and [Informative Images](/tutorials/images/informative/). #### Ideas to Assess Knowledge for Topic @@ -159,8 +159,8 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Explain that functional images serve to initiate an action, rather than to convey information. An explanation of functional images is provided in the WAI tutorials on [Images Concepts](https://www.w3.org/WAI/tutorials/images/). -* Show examples of button and image input types, such as those for printing and saving a document. Explain that their text alternatives need to refer to the action that the image conveys. Examples of several text alternatives for functional images are provided in the WAI tutorials on [Functional Images](https://www.w3.org/WAI/tutorials/images/functional/). +* Explain that functional images serve to initiate an action, rather than to convey information. An explanation of functional images is provided in the WAI tutorials on [Images Concepts](/tutorials/images/). +* Show examples of button and image input types, such as those for printing and saving a document. Explain that their text alternatives need to refer to the action that the image conveys. Examples of several text alternatives for functional images are provided in the WAI tutorials on [Functional Images](/tutorials/images/functional/). * Show examples of adjacent link and button texts that may influence the text alternative for a functional image. Explain that when the adjacent text conveys the action performed by the image, a null text alternative should be provided. #### Ideas to Assess Knowledge for Topic @@ -199,11 +199,11 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Explain ways to provide additional descriptions for complex images and groups of images such as charts, diagrams, and screen shots of materials that are intended to be read as text. For example, the HTML elements `figure` and `figcaption`, the WAI-ARIA attribute `aria-describedby` and the HTML attribute `longdesc`. Explain that the `alt` attribute may be also advised if there are individual images within those groups of images that require specific descriptions. Mention that `longdesc` may not be well supported by some browsers and assistive technologies. Examples of how to describe complex images are provided in the WAI tutorials on [Complex images](https://www.w3.org/WAI/tutorials/images/complex/) and [images of Text](https://www.w3.org/WAI/tutorials/images/textual/). +* Explain ways to provide additional descriptions for complex images and groups of images such as charts, diagrams, and screen shots of materials that are intended to be read as text. For example, the HTML elements `figure` and `figcaption`, the WAI-ARIA attribute `aria-describedby` and the HTML attribute `longdesc`. Explain that the `alt` attribute may be also advised if there are individual images within those groups of images that require specific descriptions. Mention that `longdesc` may not be well supported by some browsers and assistive technologies. Examples of how to describe complex images are provided in the WAI tutorials on [Complex images](/tutorials/images/complex/) and [images of Text](/tutorials/images/textual/). * Discuss how working with the content authors and designers can often lead to simpler ways of communicating the information for everyone. Also discuss how descriptions for complex images benefit many people, so that providing these descriptions directly in the content is often more beneficial than providing these as text alternatives for users of assistive technologies only. * Demonstrate how SVG can be used to provide graphics, including animations. Discuss the support for SVG in browsers and assistive technologies, as well as authoring tools to create such graphics. Explain the benefits of graphics provided as SVG, which allows them to be resized without pixelating, allows text and objects within the image to be accessed by assistive technologies, and allows the presentation to be customized. -* Demonstrate how MathML can be used to code mathematical expressions. Emphasize that screen reader support for MathML is growing, but others may need additional browser extensions to access contents in MathML. Examples of how to use the MathML language to code mathematical expressions are provided in the WAI tutorials on [mathematical expressions](https://www.w3.org/WAI/tutorials/images/textual/#mathematical-expressions). -* Demonstrate that many visual effects can now be achieved by using CSS Transforms and CSS Fonts, instead of using images of text. Explain the benefits of using real text, which can be resized and adapted, as opposed to images that do not support such uses. Examples of how to use CSS3 properties to style text decorations are provided in the WAI tutorials on [Using CSS](https://www.w3.org/WAI/tutorials/images/textual/#using-css3). +* Demonstrate how MathML can be used to code mathematical expressions. Emphasize that screen reader support for MathML is growing, but others may need additional browser extensions to access contents in MathML. Examples of how to use the MathML language to code mathematical expressions are provided in the WAI tutorials on [mathematical expressions](/tutorials/images/textual/#mathematical-expressions). +* Demonstrate that many visual effects can now be achieved by using CSS Transforms and CSS Fonts, instead of using images of text. Explain the benefits of using real text, which can be resized and adapted, as opposed to images that do not support such uses. Examples of how to use CSS3 properties to style text decorations are provided in the WAI tutorials on [Using CSS](/tutorials/images/textual/#using-css3). #### Ideas to Assess Knowledge for Topic @@ -229,11 +229,11 @@ Optional ideas to support assessment: Suggested resources to support your teaching: -* [Images (WAI Web Accessibility Tutorials)](https://www.w3.org/WAI/tutorials/images/) — Shows how to provide alternatives to images that are accessible to people with disabilities. +* [Images (WAI Web Accessibility Tutorials)](/tutorials/images/) — Shows how to provide alternatives to images that are accessible to people with disabilities. * [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. -* [Video Captions (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/captions/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. -* [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. -* [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) — Describes the roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications. +* [Video Captions (Web Accessibility Perspectives)](/perspective-videos/captions/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [WCAG](/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. +* [WAI-ARIA](/standards-guidelines/aria/) — Describes the roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications. * [HTML5 living standard {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/) — The core markup language for the web. * [CSS Specifications](https://www.w3.org/TR/CSS). * [SVG](https://www.w3.org/TR/SVG2/) diff --git a/content/developer/menus.md b/content/developer/menus.md index 1d8846fb0..1ace8f31f 100644 --- a/content/developer/menus.md +++ b/content/developer/menus.md @@ -75,13 +75,13 @@ Skills required for this module: {% include excol.html type="middle" %} * Applied expertise in teaching: - * [WCAG 2 Success Criterion 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) - * [WCAG 2 Success Criterion 2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/quickref/#keyboard) - * [WCAG 2 Success Criterion 2.1.2 No Keyboard Trap](https://www.w3.org/WAI/WCAG21/quickref/#no-keyboard-trap) - * [WCAG 2 Success Criterion 2.4.1 Bypass Blocks](https://www.w3.org/WAI/WCAG21/quickref/#bypass-blocks) - * [WCAG 2 Success Criterion 2.4.4 Link purpose (In Context)](https://www.w3.org/WAI/WCAG21/quickref/#link-purpose-in-context) - * [WCAG 2 Success Criterion 2.4.8 Location](https://www.w3.org/WAI/WCAG21/quickref/#location) - * [WCAG 2 Success Criterion 3.2.3 Consistent Navigation](https://www.w3.org/WAI/WCAG21/quickref/#consistent-navigation) + * [WCAG 2 Success Criterion 1.3.1 Info and Relationships](/WCAG21/quickref/#info-and-relationships) + * [WCAG 2 Success Criterion 2.1.1 Keyboard](/WCAG21/quickref/#keyboard) + * [WCAG 2 Success Criterion 2.1.2 No Keyboard Trap](/WCAG21/quickref/#no-keyboard-trap) + * [WCAG 2 Success Criterion 2.4.1 Bypass Blocks](/WCAG21/quickref/#bypass-blocks) + * [WCAG 2 Success Criterion 2.4.4 Link purpose (In Context)](/WCAG21/quickref/#link-purpose-in-context) + * [WCAG 2 Success Criterion 2.4.8 Location](/WCAG21/quickref/#location) + * [WCAG 2 Success Criterion 3.2.3 Consistent Navigation](/WCAG21/quickref/#consistent-navigation) * [HTML5 sections {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/sections.html#sections) * [HTML5 grouping content {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/grouping-content.html#grouping-content) * [WAI-ARIA landmark roles](https://www.w3.org/TR/wai-aria/#landmark_roles) @@ -118,9 +118,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of the HTML5 element `nav` to mark up a region as navigational. An example of how to use this element is provided in the WAI tutorials on [Identify menus](https://www.w3.org/WAI/tutorials/menus/structure/#identify-menus). -* Refer back to the HTML elements `ul`, `ol`, and `li` taught in the previous module. Explain that they serve to structure and organize lists and list items. Examples of how to use these elements within a menu structure are provided in the WAI tutorials on [Menu representation](https://www.w3.org/WAI/tutorials/menus/structure/#menu-representation). -* Provide examples of labels for menu items. Mention that these labels can be either text or graphics with their corresponding alternative texts within the HTML element `a`. Emphasize that people with cognitive disabilities and people using screen readers rely on labels to identify the purpose of each of the menu items. For examples of how to provide descriptive link texts, see technique [G91: Providing link text that describes the purpose of a link](https://www.w3.org/WAI/WCAG21/Techniques/general/G91.html). +* Show examples of the HTML5 element `nav` to mark up a region as navigational. An example of how to use this element is provided in the WAI tutorials on [Identify menus](/tutorials/menus/structure/#identify-menus). +* Refer back to the HTML elements `ul`, `ol`, and `li` taught in the previous module. Explain that they serve to structure and organize lists and list items. Examples of how to use these elements within a menu structure are provided in the WAI tutorials on [Menu representation](/tutorials/menus/structure/#menu-representation). +* Provide examples of labels for menu items. Mention that these labels can be either text or graphics with their corresponding alternative texts within the HTML element `a`. Emphasize that people with cognitive disabilities and people using screen readers rely on labels to identify the purpose of each of the menu items. For examples of how to provide descriptive link texts, see technique [G91: Providing link text that describes the purpose of a link](/WCAG21/Techniques/general/G91.html). #### Ideas to Assess Knowledge for Topic @@ -154,9 +154,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different types of menus, such as navigational, application, and breadcrumb trails. Explain that they need to be marked up and styled so that they are placed in the expected position within the page. Mention that menu location is a shared responsibility among different team members: content authors, designers, and developers. Examples of the expected positions of menus within the page are provided in the WAI tutorials on [Location](https://www.w3.org/WAI/tutorials/menus/styling/#location). -* Introduce the different states that a menu item can have, such as hover, focus, current, active, and visited. Explain how to code these states so that they are perceived by all users. Examples of how to code these states are provided in the WAI tutorials, [Menu Items](https://www.w3.org/WAI/tutorials/menus/styling/#menu-items). -* Show examples of different layouts for menus. Explain that menus should adapt to different text sizes users may choose. Mention that menus should have enough space so that they can be operated by all users. Considerations about readability and size of menu items are provided in the WAI tutorials, [General considerations](https://www.w3.org/WAI/tutorials/menus/styling/#general-considerations). +* Show examples of different types of menus, such as navigational, application, and breadcrumb trails. Explain that they need to be marked up and styled so that they are placed in the expected position within the page. Mention that menu location is a shared responsibility among different team members: content authors, designers, and developers. Examples of the expected positions of menus within the page are provided in the WAI tutorials on [Location](/tutorials/menus/styling/#location). +* Introduce the different states that a menu item can have, such as hover, focus, current, active, and visited. Explain how to code these states so that they are perceived by all users. Examples of how to code these states are provided in the WAI tutorials, [Menu Items](/tutorials/menus/styling/#menu-items). +* Show examples of different layouts for menus. Explain that menus should adapt to different text sizes users may choose. Mention that menus should have enough space so that they can be operated by all users. Considerations about readability and size of menu items are provided in the WAI tutorials, [General considerations](/tutorials/menus/styling/#general-considerations). #### Ideas to Assess Knowledge for Topic @@ -189,10 +189,10 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of menus that contain submenu items. Explain that the layer with the submenu items needs to be marked up as a nested list, and that each of the submenu items needs to be marked up as a list item. An example of the structure of menu and submenu items is provided in the WAI tutorials on [Indicate submenus](https://www.w3.org/WAI/tutorials/menus/flyout/#indicate-submenus). -* Explain the use of the WAI-ARIA attribute `aria-haspopup` to mark up the presence of submenu items. Indicate that this attribute should be present in the original HTML markup. An example of how to use the WAI-ARIA attribute `aria-haspopup` is provided in the WAI tutorials on [Indicate submenus](https://www.w3.org/WAI/tutorials/menus/flyout/#indicate-submenus). -* Show examples of different ways to interact with fly-out menus, such as using the mouse, keyboard, and voice interaction. Examples of how to make functionality of fly-out menus available to all users are provided in the WAI tutorials on [Fly-Out functionality](https://www.w3.org/WAI/tutorials/menus/flyout/#fly-out-functionality). -* Explain what the WAI-ARIA attribute `aria-expanded` conveys: if the submenu items are visible or hidden. Explain that the attribute needs to be present in the original HTML markup. Examples of how to use the `aria-expanded` attribute are provided in the WAI tutorials on [Indicate submenus](https://www.w3.org/WAI/tutorials/menus/flyout/#indicate-submenus). +* Show examples of menus that contain submenu items. Explain that the layer with the submenu items needs to be marked up as a nested list, and that each of the submenu items needs to be marked up as a list item. An example of the structure of menu and submenu items is provided in the WAI tutorials on [Indicate submenus](/tutorials/menus/flyout/#indicate-submenus). +* Explain the use of the WAI-ARIA attribute `aria-haspopup` to mark up the presence of submenu items. Indicate that this attribute should be present in the original HTML markup. An example of how to use the WAI-ARIA attribute `aria-haspopup` is provided in the WAI tutorials on [Indicate submenus](/tutorials/menus/flyout/#indicate-submenus). +* Show examples of different ways to interact with fly-out menus, such as using the mouse, keyboard, and voice interaction. Examples of how to make functionality of fly-out menus available to all users are provided in the WAI tutorials on [Fly-Out functionality](/tutorials/menus/flyout/#fly-out-functionality). +* Explain what the WAI-ARIA attribute `aria-expanded` conveys: if the submenu items are visible or hidden. Explain that the attribute needs to be present in the original HTML markup. Examples of how to use the `aria-expanded` attribute are provided in the WAI tutorials on [Indicate submenus](/tutorials/menus/flyout/#indicate-submenus). #### Ideas to Assess Knowledge for Topic @@ -228,8 +228,8 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different types of menus in web applications. Emphasize that navigational menus require specific (desktop-like) keyboard interactions that are different from the tab key used in websites. Explain that additional markup is necessary for assistive technologies to render these menus adequately. Examples of how to code application menus are provided in the WAI tutorials on [Additional markup](https://www.w3.org/WAI/tutorials/menus/application-menus/#additional-markup). -* Show examples of how an application menu is operated using the keyboard. Explain that additional functionality needs to be added via scripts so that keyboard patterns resemble those of a desktop menu. Examples of how to code application menus so that they can be operable by keyboard are provided in the WAI tutorials on [Functionality](https://www.w3.org/WAI/tutorials/menus/application-menus/#functionality) and [Keyboard behavior](https://www.w3.org/WAI/tutorials/menus/application-menus/#keyboard-behavior). +* Show examples of different types of menus in web applications. Emphasize that navigational menus require specific (desktop-like) keyboard interactions that are different from the tab key used in websites. Explain that additional markup is necessary for assistive technologies to render these menus adequately. Examples of how to code application menus are provided in the WAI tutorials on [Additional markup](/tutorials/menus/application-menus/#additional-markup). +* Show examples of how an application menu is operated using the keyboard. Explain that additional functionality needs to be added via scripts so that keyboard patterns resemble those of a desktop menu. Examples of how to code application menus so that they can be operable by keyboard are provided in the WAI tutorials on [Functionality](/tutorials/menus/application-menus/#functionality) and [Keyboard behavior](/tutorials/menus/application-menus/#keyboard-behavior). #### Ideas to Assess Knowledge for Topic @@ -252,9 +252,9 @@ Optional ideas to support assessment: Suggested resources to support your teaching: -* [Menus (WAI Web Accessibility Tutorials)](https://www.w3.org/WAI/tutorials/menus/) — Shows how to develop navigational mechanisms that are accessible to people with disabilities. +* [Menus (WAI Web Accessibility Tutorials)](/tutorials/menus/) — Shows how to develop navigational mechanisms that are accessible to people with disabilities. * [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. -* [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. -* [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. -* [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) — Describes the roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications. +* [Keyboard Compatibility (Web Accessibility Perspectives)](/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [WCAG](/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. +* [WAI-ARIA](/standards-guidelines/aria/) — Describes the roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications. * [HTML living standard {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/) — The core markup language for the web. diff --git a/content/developer/page-structure.md b/content/developer/page-structure.md index 3a0c8493c..c925010aa 100644 --- a/content/developer/page-structure.md +++ b/content/developer/page-structure.md @@ -78,21 +78,21 @@ Skills required for this module: {% include excol.html type="middle" %} * Applied expertise in teaching: - * [WCAG 2 Success Criterion 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) - * [WCAG 2 Success Criterion 1.3.2 Meaningful Sequence](https://www.w3.org/WAI/WCAG21/quickref/#meaningful-sequence) - * [WCAG 2 Success Criterion 2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/quickref/#keyboard) - * [WCAG 2 Success Criterion 2.4.1 Bypass Blocks](https://www.w3.org/WAI/WCAG21/quickref/#bypass-blocks) - * [WCAG 2 Success Criterion 2.4.2 Page Titled](https://www.w3.org/WAI/WCAG21/quickref/#page-titled) - * [WCAG 2 Success Criterion 2.4.3 Focus Order](https://www.w3.org/WAI/WCAG21/quickref/#focus-order) - * [WCAG 2 Success Criterion 2.4.4 Link Purpose (In Context)](https://www.w3.org/WAI/WCAG21/quickref/#link-purpose-in-context) - * [WCAG 2 Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) - * [WCAG 2 Success Criterion 2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG21/quickref/#focus-visible) - * [WCAG 2 Success Criterion 2.4.10 Section Headings](https://www.w3.org/WAI/WCAG21/quickref/#section-headings) - * [WCAG 2 Success Criterion 3.1.1 Language of Page](https://www.w3.org/WAI/WCAG21/quickref/#language-of-page) - * [WCAG 2 Success Criterion 3.1.2 Language of Parts](https://www.w3.org/WAI/WCAG21/quickref/#language-of-parts) - * [WCAG 2 Success Criterion 3.2.4 Consistent Identification](https://www.w3.org/WAI/WCAG21/quickref/#consistent-identification) - * [WCAG 2 Success Criterion 4.1.1 Parsing](https://www.w3.org/WAI/WCAG21/quickref/#parsing) - * [WCAG 2 Success Criterion 4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/quickref/#name-role-value) + * [WCAG 2 Success Criterion 1.3.1 Info and Relationships](/WCAG21/quickref/#info-and-relationships) + * [WCAG 2 Success Criterion 1.3.2 Meaningful Sequence](/WCAG21/quickref/#meaningful-sequence) + * [WCAG 2 Success Criterion 2.1.1 Keyboard](/WCAG21/quickref/#keyboard) + * [WCAG 2 Success Criterion 2.4.1 Bypass Blocks](/WCAG21/quickref/#bypass-blocks) + * [WCAG 2 Success Criterion 2.4.2 Page Titled](/WCAG21/quickref/#page-titled) + * [WCAG 2 Success Criterion 2.4.3 Focus Order](/WCAG21/quickref/#focus-order) + * [WCAG 2 Success Criterion 2.4.4 Link Purpose (In Context)](/WCAG21/quickref/#link-purpose-in-context) + * [WCAG 2 Success Criterion 2.4.6 Headings and Labels](/WCAG21/quickref/#headings-and-labels) + * [WCAG 2 Success Criterion 2.4.7 Focus Visible](/WCAG21/quickref/#focus-visible) + * [WCAG 2 Success Criterion 2.4.10 Section Headings](/WCAG21/quickref/#section-headings) + * [WCAG 2 Success Criterion 3.1.1 Language of Page](/WCAG21/quickref/#language-of-page) + * [WCAG 2 Success Criterion 3.1.2 Language of Parts](/WCAG21/quickref/#language-of-parts) + * [WCAG 2 Success Criterion 3.2.4 Consistent Identification](/WCAG21/quickref/#consistent-identification) + * [WCAG 2 Success Criterion 4.1.1 Parsing](/WCAG21/quickref/#parsing) + * [WCAG 2 Success Criterion 4.1.2 Name, Role, Value](/WCAG21/quickref/#name-role-value) * [HTML5 sections {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/sections.html#sections) * [HTML5 grouping content {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/grouping-content.html#grouping-content) * [WAI-ARIA landmark roles](https://www.w3.org/TR/wai-aria/#landmark_roles) @@ -125,9 +125,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Explain that headings are organized in a hierarchical structure, i.e., h1 being the first rank and h6 being the last one. Emphasize that native HTML elements are more likely to be supported by browsers and assistive technologies. Show examples of how headings can be nested to distinguish and label different sections and subsections of content. Examples of how to structure pages using headings are provided in the WAI Tutorials on [Headings that Reflect the Page Organization](https://www.w3.org/WAI/tutorials/page-structure/headings/#headings-that-reflect-the-page-organization). -* Present examples of headings and reflect with students if they are descriptive of the sections they entitle. Mention that providing descriptive headings is a shared responsibility among different team members: content authors, designers, and developers. Descriptions of how to mark up headings to organize passages of text are provided in the WAI Tutorials on [Organize Passages of Text](https://www.w3.org/WAI/tutorials/page-structure/headings/#organize-passages-of-text). -* Demonstrate the use of voice commands, keystrokes, and gestures provided by assistive technologies and adaptive strategies to navigate web pages through headings. Explore advanced functionality that some tools provide, such as presenting all headings in a list where users can select the heading they are interested in. Examples of how people with disabilities interact with the Web are provided in [How People with Disabilities Use the Web](https://www.w3.org/WAI/people-use-web/). +* Explain that headings are organized in a hierarchical structure, i.e., h1 being the first rank and h6 being the last one. Emphasize that native HTML elements are more likely to be supported by browsers and assistive technologies. Show examples of how headings can be nested to distinguish and label different sections and subsections of content. Examples of how to structure pages using headings are provided in the WAI Tutorials on [Headings that Reflect the Page Organization](/tutorials/page-structure/headings/#headings-that-reflect-the-page-organization). +* Present examples of headings and reflect with students if they are descriptive of the sections they entitle. Mention that providing descriptive headings is a shared responsibility among different team members: content authors, designers, and developers. Descriptions of how to mark up headings to organize passages of text are provided in the WAI Tutorials on [Organize Passages of Text](/tutorials/page-structure/headings/#organize-passages-of-text). +* Demonstrate the use of voice commands, keystrokes, and gestures provided by assistive technologies and adaptive strategies to navigate web pages through headings. Explore advanced functionality that some tools provide, such as presenting all headings in a list where users can select the heading they are interested in. Examples of how people with disabilities interact with the Web are provided in [How People with Disabilities Use the Web](/people-use-web/). #### Ideas to Assess Knowledge for Topic @@ -165,12 +165,12 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Define the `section` element as a thematic grouping of content. An example of how to mark up the `section` element is provided in the WAI Tutorials on [Sections](https://www.w3.org/WAI/tutorials/page-structure/content/#sections). -* Define the `article` element as a self-containing unit within the web page. An example of how to mark up the `article` element is provided in the WAI Tutorials on [Articles](https://www.w3.org/WAI/tutorials/page-structure/content/#articles). -* Explain that the `p` element is used to mark up paragraphs of text. An example of how to mark up the `paragraph` element is provided in the WAI Tutorials on [Paragraphs](https://www.w3.org/WAI/tutorials/page-structure/content/#paragraphs). -* Explain that unordered lists are used to group items where the numbering is not relevant, and ordered lists are used when numbering of items matters. Explain that these lists are marked up with the `ul` or `ol` element, and each of the items is coded with the `li` element. Emphasize that each of the list items can contain headings, paragraphs, and other lists. An example of how to mark up unordered lists is provided in the WAI Tutorials on [Lists](https://www.w3.org/WAI/tutorials/page-structure/content/#lists). -* Define description lists as a grouping of several terms and descriptions. Description lists are marked up with the `dl` element, terms are marked up with the `dt` element, and descriptions are marked up with the `dd` element. Examples of how to mark up description lists are provided in the WAI Tutorials on [Description Lists](https://www.w3.org/WAI/tutorials/page-structure/content/#description-lists). -* Define quotes as text attributed to another author. Explain that there can be inline or block quotes, and that they are marked up using the HTML elements `q` and `blockquote` respectively. Examples of how to mark up quotes are provided in the WAI tutorials on [Quotes](https://www.w3.org/WAI/tutorials/page-structure/content/#quotes). +* Define the `section` element as a thematic grouping of content. An example of how to mark up the `section` element is provided in the WAI Tutorials on [Sections](/tutorials/page-structure/content/#sections). +* Define the `article` element as a self-containing unit within the web page. An example of how to mark up the `article` element is provided in the WAI Tutorials on [Articles](/tutorials/page-structure/content/#articles). +* Explain that the `p` element is used to mark up paragraphs of text. An example of how to mark up the `paragraph` element is provided in the WAI Tutorials on [Paragraphs](/tutorials/page-structure/content/#paragraphs). +* Explain that unordered lists are used to group items where the numbering is not relevant, and ordered lists are used when numbering of items matters. Explain that these lists are marked up with the `ul` or `ol` element, and each of the items is coded with the `li` element. Emphasize that each of the list items can contain headings, paragraphs, and other lists. An example of how to mark up unordered lists is provided in the WAI Tutorials on [Lists](/tutorials/page-structure/content/#lists). +* Define description lists as a grouping of several terms and descriptions. Description lists are marked up with the `dl` element, terms are marked up with the `dt` element, and descriptions are marked up with the `dd` element. Examples of how to mark up description lists are provided in the WAI Tutorials on [Description Lists](/tutorials/page-structure/content/#description-lists). +* Define quotes as text attributed to another author. Explain that there can be inline or block quotes, and that they are marked up using the HTML elements `q` and `blockquote` respectively. Examples of how to mark up quotes are provided in the WAI tutorials on [Quotes](/tutorials/page-structure/content/#quotes). #### Ideas to Assess Knowledge for Topic @@ -203,10 +203,10 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different page layouts, and their markup of the header, navigation, main content, section, article, complementary, and footer regions. Emphasize that native HTML elements are more likely to be supported by newer browsers and assistive technologies. Examples of using HTML elements to code page regions are provided in the WAI Tutorials on [Regions](https://www.w3.org/WAI/tutorials/page-structure/regions/). -* Explain that WAI-ARIA landmarks provide broader support for old assistive technologies and browsers. Emphasize that they can also enhance HTML 4 semantics if applied to an ordinary `div` element. Examples of using WAI-ARIA landmarks to code page regions are provided in the WAI Tutorials on [Page Regions in HTML5 Using WAI-ARIA](https://www.w3.org/WAI/tutorials/page-structure/regions/#accessupport). -* Show examples of providing labels for page regions, included by using HTML headings, `aria-label`, and `aria-labelledby`. Explain that page regions need to be labeled to distinguish them from one another, for example when two regions of the same type are used in a web page. Descriptions of how to label page regions are provided in the WAI Tutorials on [Labeling regions](https://www.w3.org/WAI/tutorials/page-structure/labels/). -* Demonstrate the use of voice commands, keystrokes, and gestures provided by assistive technologies and adaptive strategies to navigate page regions. Explore advanced functionality that some tools provide, such as presenting all page regions in a list or tree where users can select the region they are interested in. Examples of how people with disabilities interact with the Web are provided in [Stories of Web Users](https://www.w3.org/WAI/people-use-web/user-stories/). +* Show examples of different page layouts, and their markup of the header, navigation, main content, section, article, complementary, and footer regions. Emphasize that native HTML elements are more likely to be supported by newer browsers and assistive technologies. Examples of using HTML elements to code page regions are provided in the WAI Tutorials on [Regions](/tutorials/page-structure/regions/). +* Explain that WAI-ARIA landmarks provide broader support for old assistive technologies and browsers. Emphasize that they can also enhance HTML 4 semantics if applied to an ordinary `div` element. Examples of using WAI-ARIA landmarks to code page regions are provided in the WAI Tutorials on [Page Regions in HTML5 Using WAI-ARIA](/tutorials/page-structure/regions/#accessupport). +* Show examples of providing labels for page regions, included by using HTML headings, `aria-label`, and `aria-labelledby`. Explain that page regions need to be labeled to distinguish them from one another, for example when two regions of the same type are used in a web page. Descriptions of how to label page regions are provided in the WAI Tutorials on [Labeling regions](/tutorials/page-structure/labels/). +* Demonstrate the use of voice commands, keystrokes, and gestures provided by assistive technologies and adaptive strategies to navigate page regions. Explore advanced functionality that some tools provide, such as presenting all page regions in a list or tree where users can select the region they are interested in. Examples of how people with disabilities interact with the Web are provided in [Stories of Web Users](/people-use-web/user-stories/). * Invite students to try out functionality built-in to some browsers to facilitate reading. Explain that it changes the layout of the page, showing the main content of a web page when it is marked up appropriately. Discuss with students how this can improve readability for all users. Refer to the support pages of browsers for more information on the particular reading modes they provide. #### Ideas to Assess Knowledge for Topic @@ -244,13 +244,13 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Demonstrate the use of the HTML element `title` within the `head` element to convey the topic or purpose of the page. Show examples of where and how browsers and assistive technologies show the contents of the `title` element: screen reader keystrokes, browser tabs, browser window titles, and search results. Relate this requirement to WCAG success criterion [2.4.2 Page Titled](https://www.w3.org/WAI/WCAG21/quickref/#page-titled). Examples of how to provide descriptive titles are provided in techniques [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html) and [H25: Providing a title using the title element](https://www.w3.org/WAI/WCAG21/Techniques/html/H25). Examples of how to write page titles are provided in the Easy Checks resource, section [Page title](https://www.w3.org/WAI/test-evaluate/preliminary/#title). -* Demonstrate the use of the `lang` attribute, together with a valid language tag, to convey the main language of a web page. Explain that it is placed within the `html` tag. Examples of how to convey the main language of a web page are provided in technique [H57: Using the language attribute on the HTML element](https://www.w3.org/WAI/WCAG21/Techniques/html/H57.html). -* Emphasize that, when there is a passage of text in a different language than the default, the `lang` attribute needs to be used with a valid language tag that corresponds to the language of that passage. For an explanation of how to code the `lang` attribute to convey changes in language, see [H58: Using language attributes to identify changes in the human language](https://www.w3.org/WAI/WCAG21/Techniques/html/H58.html). -* Demonstrate the use of HTML links and other navigational elements, such as those that allow to bypass blocks of content that repeats on multiple pages. Mention that these links need to have the HTML attribute `href`, together with a value containing their destination in the form of a uniform resource identifier (URI). Explain that people using only the keyboard rely on bypass blocks mechanisms to skip large blocks of repetitive content, such as headers and navigation bars. Examples of how to code such links are provided in technique [G1: Adding a link at the top of each page that goes directly to the main content area](https://www.w3.org/WAI/WCAG21/Techniques/general/G1.html). -* Show content in different layouts, for example, with different style sheets applied. Emphasize that content always needs to follow a meaningful sequence that allows to adapt the content to different ways of presentation. For information on how to ensure a meaningful sequence, see technique [G57: Ordering the content in a meaningful sequence](https://www.w3.org/WAI/WCAG21/Techniques/general/G57). -* Emphasize that keeping focus order is needed for consistency between the visual and programmatic order of items. Show examples of web pages where source order matches visual presentation and compare them with pages where it does not. Link this requirement to WCAG success criterion [2.4.3 Focus Order](https://www.w3.org/WAI/WCAG21/quickref/#focus-order). -* Show examples of default and custom visual focus indicators. Explain that these indicators can help people know where they are as they browse the web page. Mention that it is sometimes best practice to provide custom indicators for better visibility and contrast ratios. Link this requirement to WCAG success criterion [2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG21/quickref/#focus-visible). +* Demonstrate the use of the HTML element `title` within the `head` element to convey the topic or purpose of the page. Show examples of where and how browsers and assistive technologies show the contents of the `title` element: screen reader keystrokes, browser tabs, browser window titles, and search results. Relate this requirement to WCAG success criterion [2.4.2 Page Titled](/WCAG21/quickref/#page-titled). Examples of how to provide descriptive titles are provided in techniques [G88: Providing descriptive titles for Web pages](/WCAG21/Techniques/general/G88.html) and [H25: Providing a title using the title element](/WCAG21/Techniques/html/H25). Examples of how to write page titles are provided in the Easy Checks resource, section [Page title](/test-evaluate/preliminary/#title). +* Demonstrate the use of the `lang` attribute, together with a valid language tag, to convey the main language of a web page. Explain that it is placed within the `html` tag. Examples of how to convey the main language of a web page are provided in technique [H57: Using the language attribute on the HTML element](/WCAG21/Techniques/html/H57.html). +* Emphasize that, when there is a passage of text in a different language than the default, the `lang` attribute needs to be used with a valid language tag that corresponds to the language of that passage. For an explanation of how to code the `lang` attribute to convey changes in language, see [H58: Using language attributes to identify changes in the human language](/WCAG21/Techniques/html/H58.html). +* Demonstrate the use of HTML links and other navigational elements, such as those that allow to bypass blocks of content that repeats on multiple pages. Mention that these links need to have the HTML attribute `href`, together with a value containing their destination in the form of a uniform resource identifier (URI). Explain that people using only the keyboard rely on bypass blocks mechanisms to skip large blocks of repetitive content, such as headers and navigation bars. Examples of how to code such links are provided in technique [G1: Adding a link at the top of each page that goes directly to the main content area](/WCAG21/Techniques/general/G1.html). +* Show content in different layouts, for example, with different style sheets applied. Emphasize that content always needs to follow a meaningful sequence that allows to adapt the content to different ways of presentation. For information on how to ensure a meaningful sequence, see technique [G57: Ordering the content in a meaningful sequence](/WCAG21/Techniques/general/G57). +* Emphasize that keeping focus order is needed for consistency between the visual and programmatic order of items. Show examples of web pages where source order matches visual presentation and compare them with pages where it does not. Link this requirement to WCAG success criterion [2.4.3 Focus Order](/WCAG21/quickref/#focus-order). +* Show examples of default and custom visual focus indicators. Explain that these indicators can help people know where they are as they browse the web page. Mention that it is sometimes best practice to provide custom indicators for better visibility and contrast ratios. Link this requirement to WCAG success criterion [2.4.7 Focus Visible](/WCAG21/quickref/#focus-visible). #### Ideas to Assess Knowledge for Topic @@ -278,10 +278,10 @@ Optional ideas to support assessment: Suggested resources to support your teaching: -* [Page Structure (WAI Web Accessibility Tutorials)](https://www.w3.org/WAI/tutorials/page-structure) — Shows how to provide page structures that are accessible to people with disabilities. +* [Page Structure (WAI Web Accessibility Tutorials)](/tutorials/page-structure) — Shows how to provide page structures that are accessible to people with disabilities. * [How People with Disabilities Use the Web](/people-use-web/) — Describes some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. -* [Text to Speech (Web Accessibility Perspective)](https://www.w3.org/WAI/perspective-videos/speech/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. -* [Clear Layout and Design (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/layout/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. -* [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. -* [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) — Describes the roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications. +* [Text to Speech (Web Accessibility Perspective)](/perspective-videos/speech/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Clear Layout and Design (Web Accessibility Perspectives)](/perspective-videos/layout/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [WCAG](/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. +* [WAI-ARIA](/standards-guidelines/aria/) — Describes the roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications. * [HTML5 living standard {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/) — The core markup language for the web. diff --git a/content/developer/rich-applications.md b/content/developer/rich-applications.md index 2eb2d5951..0c0da19e8 100644 --- a/content/developer/rich-applications.md +++ b/content/developer/rich-applications.md @@ -72,19 +72,19 @@ Skills required for this module: {% include excol.html type="middle" %} * Applied expertise in teaching: - * [WCAG 2 Success Criterion 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) - * [WCAG 2 Success Criterion 1.3.2 Meaningful Sequence](https://www.w3.org/WAI/WCAG21/quickref/#meaningful-sequence) - * [WCAG 2 Success Criterion 2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/quickref/#keyboard) - * [WCAG 2 Success Criterion 1.4.13 Content on Hover or Focus](https://www.w3.org/WAI/WCAG21/quickref/#content-on-hover-or-focus) - * [WCAG 2 Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/WAI/WCAG21/quickref/#pause-stop-hide) - * [WCAG 2 Success Criterion 2.4.2 Page Titled](https://www.w3.org/WAI/WCAG21/quickref/#page-titled) - * [WCAG 2 Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) - * [WCAG 2 Success Criterion 2.4.10 Section Headings](https://www.w3.org/WAI/WCAG21/quickref/#section-headings) - * [WCAG 2 Success Criterion 2.5.1 Pointer Gestures](https://www.w3.org/WAI/WCAG21/quickref/#pointer-gestures) - * [WCAG 2 Success Criterion 3.2.1 On Focus](https://www.w3.org/WAI/WCAG21/quickref/#on-focus) - * [WCAG 2 Success Criterion 4.1.1 Parsing](https://www.w3.org/WAI/WCAG21/quickref/#parsing) - * [WCAG 2 Success Criterion 4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/quickref/#name-role-value) - * [WCAG 2 Success Criterion 4.1.3 Status Messages](https://www.w3.org/WAI/WCAG21/quickref/#status-messages) + * [WCAG 2 Success Criterion 1.3.1 Info and Relationships](/WCAG21/quickref/#info-and-relationships) + * [WCAG 2 Success Criterion 1.3.2 Meaningful Sequence](/WCAG21/quickref/#meaningful-sequence) + * [WCAG 2 Success Criterion 2.1.1 Keyboard](/WCAG21/quickref/#keyboard) + * [WCAG 2 Success Criterion 1.4.13 Content on Hover or Focus](/WCAG21/quickref/#content-on-hover-or-focus) + * [WCAG 2 Success Criterion 2.2.2 Pause, Stop, Hide](/WCAG21/quickref/#pause-stop-hide) + * [WCAG 2 Success Criterion 2.4.2 Page Titled](/WCAG21/quickref/#page-titled) + * [WCAG 2 Success Criterion 2.4.6 Headings and Labels](/WCAG21/quickref/#headings-and-labels) + * [WCAG 2 Success Criterion 2.4.10 Section Headings](/WCAG21/quickref/#section-headings) + * [WCAG 2 Success Criterion 2.5.1 Pointer Gestures](/WCAG21/quickref/#pointer-gestures) + * [WCAG 2 Success Criterion 3.2.1 On Focus](/WCAG21/quickref/#on-focus) + * [WCAG 2 Success Criterion 4.1.1 Parsing](/WCAG21/quickref/#parsing) + * [WCAG 2 Success Criterion 4.1.2 Name, Role, Value](/WCAG21/quickref/#name-role-value) + * [WCAG 2 Success Criterion 4.1.3 Status Messages](/WCAG21/quickref/#status-messages) * [HTML5 Living Standard {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/) * [DOM Living Standard {% include_cached icon.html name="external-link" %}](https://dom.spec.whatwg.org/) * [WAI-ARIA specification](https://www.w3.org/TR/wai-aria/) @@ -236,11 +236,11 @@ Suggested resources to support your teaching: * [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/) — Provides readers with an understanding of how to use WAI-ARIA 1.1 to create accessible rich internet applications. * [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. -* [Notifications and Feedback (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/notifications/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. -* [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. -* [Text to Speech (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/speech/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. -* [Clear Layout and Design (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/layout/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. -* [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. -* [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) — Describes the roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications. +* [Notifications and Feedback (Web Accessibility Perspectives)](/perspective-videos/notifications/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Keyboard Compatibility (Web Accessibility Perspectives)](/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Text to Speech (Web Accessibility Perspectives)](/perspective-videos/speech/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Clear Layout and Design (Web Accessibility Perspectives)](/perspective-videos/layout/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [WCAG](/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. +* [WAI-ARIA](/standards-guidelines/aria/) — Describes the roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications. * [HTML5 living standard {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/) — The core markup language for the web. * [DOM Living Standard {% include_cached icon.html name="external-link" %}](https://dom.spec.whatwg.org/) diff --git a/content/developer/tables.md b/content/developer/tables.md index c2585564d..b97b884c1 100644 --- a/content/developer/tables.md +++ b/content/developer/tables.md @@ -71,8 +71,8 @@ Skills required for this module: {% include excol.html type="middle" %} * Applied expertise in teaching: - * [WCAG 2 Success Criterion 1.3.1. Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) - * [WCAG 2 Success Criterion 4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/quickref/#name-role-value) + * [WCAG 2 Success Criterion 1.3.1. Info and Relationships](/WCAG21/quickref/#info-and-relationships) + * [WCAG 2 Success Criterion 4.1.2 Name, Role, Value](/WCAG21/quickref/#name-role-value) * [HTML `table` element {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/tables.html#the-table-element) * [HTML `tr` element {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/tables.html#the-tr-element) * [HTML `th` element {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/tables.html#the-th-element) @@ -114,9 +114,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Define simple tables as those that contain one row or column header. Explain that speech technologies can associate information in the header and data cells if they are marked up appropriately. Examples of simple tables are provided in the WAI tutorials on [Tables with one header](https://www.w3.org/WAI/tutorials/tables/one-header/). -* Show examples of use of the HTML elements `table`, `th`, and `td`. Explain that `table` is used to mark up the table layer, `th` is used to code header cells, and `td` is used to code data cells. For examples of how to mark up a simple table, refer to technique [H51: Using table markup to present tabular data](https://www.w3.org/WAI/WCAG21/Techniques/html/H51). -* Demonstrate the use of voice commands, keystrokes, and gestures provided by assistive technologies and adaptive strategies to navigate tables, including moving between header and data cells. Explore advanced functionality that some tools provide, such as presenting tables as linear information. Examples of how people with disabilities interact with the web are provided in [How People with Disabilities Use the Web](https://www.w3.org/WAI/people-use-web/). +* Define simple tables as those that contain one row or column header. Explain that speech technologies can associate information in the header and data cells if they are marked up appropriately. Examples of simple tables are provided in the WAI tutorials on [Tables with one header](/tutorials/tables/one-header/). +* Show examples of use of the HTML elements `table`, `th`, and `td`. Explain that `table` is used to mark up the table layer, `th` is used to code header cells, and `td` is used to code data cells. For examples of how to mark up a simple table, refer to technique [H51: Using table markup to present tabular data](/WCAG21/Techniques/html/H51). +* Demonstrate the use of voice commands, keystrokes, and gestures provided by assistive technologies and adaptive strategies to navigate tables, including moving between header and data cells. Explore advanced functionality that some tools provide, such as presenting tables as linear information. Examples of how people with disabilities interact with the web are provided in [How People with Disabilities Use the Web](/people-use-web/). * Provide examples of alternative renderings for tables, such as splitting the table into several lists, or showing only parts of the table in a mobile viewport. * Explain why layout tables should be avoided, and CSS techniques for visual design should be used instead. Mention that, if a layout table still needs to be used, marking up the table element using `role="presentation"` will help assistive technologies present the information contained in the layout table without the table semantics. @@ -155,9 +155,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Explain that complex tables have multiple or irregular column or row headers. Indicate that assistive technologies may not interpret the direction and scope of such headers, so that it is necessary to provide additional markup to explicitly associate header and data cells. -* Demonstrate the use of the HTML attribute `scope` and its values `row`, `col`, `rowgroup`, and `colgroup`, to code the direction of the headers. Explain that these values indicate headers for row, column, group of rows, and group of columns respectively. Examples of how to use the HTML attribute `scope` are provided in the WAI tutorials on [Tables with two headers](https://www.w3.org/WAI/tutorials/tables/two-headers/). -* Show examples of headers that span multiple rows or columns. Explain how to code them using the HTML elements `col`, `colgroup`, `thead` and `tbody`, as well as the attributes `colspan`, `rowspan`, and `rowgroup`. Examples of how to code headers that span several rows or columns are provided in the WAI tutorials on [Tables with irregular headers](https://www.w3.org/WAI/tutorials/tables/irregular/). -* Show examples of uses of the `headers` attribute together with unique identifiers to associate more than two headers that relate to the same data cell. Explain that the identifiers of the corresponding header cells need to be separated by spaces in the value of the attribute `headers`. Examples of how to use the `headers` attribute are provided in the WAI tutorials on [Tables with multi-level headers](https://www.w3.org/WAI/tutorials/tables/multi-level/). +* Demonstrate the use of the HTML attribute `scope` and its values `row`, `col`, `rowgroup`, and `colgroup`, to code the direction of the headers. Explain that these values indicate headers for row, column, group of rows, and group of columns respectively. Examples of how to use the HTML attribute `scope` are provided in the WAI tutorials on [Tables with two headers](/tutorials/tables/two-headers/). +* Show examples of headers that span multiple rows or columns. Explain how to code them using the HTML elements `col`, `colgroup`, `thead` and `tbody`, as well as the attributes `colspan`, `rowspan`, and `rowgroup`. Examples of how to code headers that span several rows or columns are provided in the WAI tutorials on [Tables with irregular headers](/tutorials/tables/irregular/). +* Show examples of uses of the `headers` attribute together with unique identifiers to associate more than two headers that relate to the same data cell. Explain that the identifiers of the corresponding header cells need to be separated by spaces in the value of the attribute `headers`. Examples of how to use the `headers` attribute are provided in the WAI tutorials on [Tables with multi-level headers](/tutorials/tables/multi-level/). * Show examples of sortable tables. Explain that the component that allows to sort the data is usually coded as a button so that it can be used with different input methods. Emphasize that additional feedback may need to be provided based on the support for the WAI-ARIA attribute `aria-sort`, so that users are aware of how data is currently sorted. Examples of how to provide sortable tables are provided in the WAI-ARIA Authoring Practices [Data grid example 2](https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html). #### Ideas to Assess Knowledge for Topic @@ -194,9 +194,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of use of the HTML element `caption` to provide descriptions for the purpose of a table. Mention that it needs to be the first child of the element `table` and that its contents are visible for all users by default. Examples of how to use the element `caption` are provided in technique [H39: Using caption elements to associate data table captions with data tables](https://www.w3.org/WAI/WCAG21/Techniques/html/H39). -* Explain the use of methods to provide further details about the structure and contents of a table. For example, the HTML elements `figure` and `figcaption`, and the WAI-ARIA attributes `aria-labelledby` and `aria-describedby`. Explain that the element `table` needs to be wrapped by the element `figure`, and that the element `figcaption` containing the text needs to be the first child of the element `figure`. Examples of how to code a table summary are provided in the WAI tutorials on [Caption and summary](https://www.w3.org/WAI/tutorials/tables/caption-summary/). -* Explain the use of the attribute `summary` to provide people using a screen reader with detailed information about the structure of complex tables. Emphasize that it is obsolete according to the HTML5 specification. Its usage is only advisable for fallback purposes. Newer techniques (discussed above on this topic) are recommended. Examples of how to use the attribute `summary` are provided in technique [H73: Using the summary attribute of the table element](https://www.w3.org/WAI/WCAG21/Techniques/html/H73). +* Show examples of use of the HTML element `caption` to provide descriptions for the purpose of a table. Mention that it needs to be the first child of the element `table` and that its contents are visible for all users by default. Examples of how to use the element `caption` are provided in technique [H39: Using caption elements to associate data table captions with data tables](/WCAG21/Techniques/html/H39). +* Explain the use of methods to provide further details about the structure and contents of a table. For example, the HTML elements `figure` and `figcaption`, and the WAI-ARIA attributes `aria-labelledby` and `aria-describedby`. Explain that the element `table` needs to be wrapped by the element `figure`, and that the element `figcaption` containing the text needs to be the first child of the element `figure`. Examples of how to code a table summary are provided in the WAI tutorials on [Caption and summary](/tutorials/tables/caption-summary/). +* Explain the use of the attribute `summary` to provide people using a screen reader with detailed information about the structure of complex tables. Emphasize that it is obsolete according to the HTML5 specification. Its usage is only advisable for fallback purposes. Newer techniques (discussed above on this topic) are recommended. Examples of how to use the attribute `summary` are provided in technique [H73: Using the summary attribute of the table element](/WCAG21/Techniques/html/H73). #### Ideas to Assess Knowledge for Topic @@ -222,10 +222,10 @@ Optional ideas to support assessment: Suggested resources to support your teaching: -* [Tables (WAI Web Accessibility Tutorials)](https://www.w3.org/WAI/tutorials/tables/) — Shows how to develop tables that are accessible to people with disabilities. +* [Tables (WAI Web Accessibility Tutorials)](/tutorials/tables/) — Shows how to develop tables that are accessible to people with disabilities. * [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. -* [Text to Speech (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/speech/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. -* [Clear Layout and Design (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/layout/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. -* [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. -* [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) — Describes the roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications. +* [Text to Speech (Web Accessibility Perspectives)](/perspective-videos/speech/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Clear Layout and Design (Web Accessibility Perspectives)](/perspective-videos/layout/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [WCAG](/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. +* [WAI-ARIA](/standards-guidelines/aria/) — Describes the roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications. * [HTML5 living standard {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/) — The core markup language for the web. diff --git a/content/foundation/getting-started-with-accessibility.md b/content/foundation/getting-started-with-accessibility.md index e74a8c21c..d40264abc 100644 --- a/content/foundation/getting-started-with-accessibility.md +++ b/content/foundation/getting-started-with-accessibility.md @@ -147,7 +147,7 @@ Optional ideas to support assessment: {% include excol.html type="middle" %} -Introduce roles and responsibilities for accessibility. See [Accessibility Roles and Responsibilities](https://www.w3.org/WAI/EO/wiki/Role_definition_document). +Introduce roles and responsibilities for accessibility. See [Accessibility Roles and Responsibilities](/EO/wiki/Role_definition_document). #### Learning Outcomes for Topic diff --git a/content/foundation/principles-standards-and-checks.md b/content/foundation/principles-standards-and-checks.md index e18c968d6..5f3f27c93 100644 --- a/content/foundation/principles-standards-and-checks.md +++ b/content/foundation/principles-standards-and-checks.md @@ -84,7 +84,7 @@ Optional topics to achieve the learning outcomes. {% include excol.html type="middle" %} -Introduce the web accessibility concepts Perceivable, Operable, Understandable, and Robust (POUR). For an explanation of these concepts, see [Understanding the Four Principles of Accessibility](https://www.w3.org/WAI/WCAG21/Understanding/intro#understanding-the-four-principles-of-accessibility). For an introduction to some web accessibility requirements belonging to each principle, refer to [Accessibility Principles](/fundamentals/accessibility-principles/). +Introduce the web accessibility concepts Perceivable, Operable, Understandable, and Robust (POUR). For an explanation of these concepts, see [Understanding the Four Principles of Accessibility](/WCAG21/Understanding/intro#understanding-the-four-principles-of-accessibility). For an introduction to some web accessibility requirements belonging to each principle, refer to [Accessibility Principles](/fundamentals/accessibility-principles/). Introduce the web accessibility concepts Perceivable, Operable, Understandable, and Robust (POUR). Refer to [Accessibility Principles](/fundamentals/accessibility-principles/). From 54a621734ec219f4517275f5fba807921aeb5393 Mon Sep 17 00:00:00 2001 From: Daniel-Montalvo Date: Wed, 11 Aug 2021 13:34:32 +0200 Subject: [PATCH 217/416] Adding Designer tips --- content/designer/flexible-color-layout-and-design.md | 1 + content/designer/images-and-graphics.md | 1 + content/designer/information-design.md | 1 + content/designer/multimedia-and-animations.md | 1 + content/designer/navigation.md | 1 + content/developer/forms.md | 1 + 6 files changed, 6 insertions(+) diff --git a/content/designer/flexible-color-layout-and-design.md b/content/designer/flexible-color-layout-and-design.md index bed2fb4dc..d82dd67eb 100644 --- a/content/designer/flexible-color-layout-and-design.md +++ b/content/designer/flexible-color-layout-and-design.md @@ -252,6 +252,7 @@ Optional ideas to assess knowledge: Suggested resources to support your teaching: +* [Designing for Web Accessibility](/tips/designing/) — Tips for user interface and visual design. * [[How People with Disabilities Use the Web]](/people-use-web/) — Describes some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. * [Keyboard Compatibility (Web Accessibility Perspective)](/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [Colors with Good Contrast (Web Accessibility Perspective)](/perspective-videos/contrast/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 93bf546f0..95c5e2db1 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -243,6 +243,7 @@ Optional ideas to assess knowledge: Suggested resources to support your teaching: +* [Designing for Web Accessibility](/tips/designing/) — Tips for user interface and visual design. * [Images (WAI Web Accessibility Tutorials)](https://www.w3.org/WAI/tutorials/images/) — Shows how to provide alternatives to images that are accessible to people with disabilities. * [[How People with Disabilities Use the Web]](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. * [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. diff --git a/content/designer/information-design.md b/content/designer/information-design.md index bc328c5f4..515769a10 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -215,6 +215,7 @@ Optional ideas to assess knowledge: Suggested resources to support your teaching: +* [Designing for Web Accessibility](/tips/designing/) — Tips for user interface and visual design. * [[How People with Disabilities Use the Web]](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. * [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [Understandable Content (Web Accessibility Perspective)](/perspective-videos/understandable/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index fbbb004cd..000098820 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -200,6 +200,7 @@ Optional ideas to assess knowledge: Suggested resources to support your teaching: * [Making Audio and Video Media Accessible](https://www.w3.org/WAI/media/av/) — Covers captions/subtitles, audio description of visual information, descriptive transcripts, and sign language. Includes guidance for creating new videos, and on media player accessibility. Introduces user experiences and benefits to organizations. +* [Designing for Web Accessibility](/tips/designing/) — Tips for user interface and visual design. * [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. * [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [Colors with Good Contrast (Web Accessibility Perspective)](/perspective-videos/contrast/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. diff --git a/content/designer/navigation.md b/content/designer/navigation.md index f1d00e9dc..94c6ac3c3 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -232,6 +232,7 @@ Optional ideas to assess knowledge: Suggested resources to support your teaching: +* [Designing for Web Accessibility](/tips/designing/) — Tips for user interface and visual design. * [Menus (WAI Web Accessibility Tutorials)](https://www.w3.org/WAI/tutorials/menus/) — Shows how to design navigational mechanisms that are accessible to people with disabilities. * [[How People with Disabilities Use the Web]](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. * [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. diff --git a/content/developer/forms.md b/content/developer/forms.md index 7dbdac194..0d614bbfc 100644 --- a/content/developer/forms.md +++ b/content/developer/forms.md @@ -247,6 +247,7 @@ Optional ideas to support assessment: Suggested resources to support your teaching: +* [Designing for Web Accessibility](/tips/designing/) — Tips for user interface and visual design. * [Forms (WAI Web Accessibility Tutorials)](https://www.w3.org/WAI/tutorials/forms) — Shows how to develop forms that are accessible to people with disabilities. * [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. * [Notifications and Feedback (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/notifications/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. From 820e4c0d9fac97acfc34f9ab5adcf6e232b9b068 Mon Sep 17 00:00:00 2001 From: Daniel-Montalvo Date: Fri, 13 Aug 2021 11:02:08 +0200 Subject: [PATCH 218/416] Overall polishing --- .../flexible-color-layout-and-design.md | 35 ++++++++------- content/designer/images-and-graphics.md | 2 +- content/designer/information-design.md | 9 ++-- content/designer/navigation.md | 43 ++++++++++--------- 4 files changed, 47 insertions(+), 42 deletions(-) diff --git a/content/designer/flexible-color-layout-and-design.md b/content/designer/flexible-color-layout-and-design.md index d82dd67eb..6d865617c 100644 --- a/content/designer/flexible-color-layout-and-design.md +++ b/content/designer/flexible-color-layout-and-design.md @@ -6,7 +6,7 @@ ref: /curricula/designer-modules/flexible-color-layout-and-design/ lang: en github: repository: w3c/wai-curricula - path: content/designer/flexible-colorlayout-and-design.md + path: content/designer/flexible-color-layout-and-design.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ @@ -29,8 +29,8 @@ navigation: Courses based on this module should: -* explain accessibility requirements for user that can have customized colors, size, and spacing between components * explain how people with disabilities rely on designs that adapt to different screen sizes, configurations, and style sheets +* explain accessibility requirements for interfaces that can have customized colors, font size, font type, and spacing between components ## Learning Outcomes for Module @@ -38,11 +38,12 @@ Students should be able to: * explain how people with disabilities rely on designs that adapt to different colors, layouts, spacing, and positions * design layouts with sufficient color contrast for text, images of text, and controls -* use headings, landmarks, text cues, patterns, and icons to supplement information conveyed through color * design clear and distinguishable focus indicators, for example using borders, color, and highlighting * design layouts that adapt to different font sizes and spacing set by the user in browser and operating system settings -* position components where users expect them -* identify related requirements for developers to apply the necessary semantics to user interface components +* design layouts that adapt to different screen sizes, configurations, and user style sheets +* use headings, landmarks, and spacing to group related content +* design layouts using a combination of text cues, patterns, and icons to convey information +* identify related requirements for developers to apply the necessary semantics to interface components {% include excol.html type="all" %} @@ -104,9 +105,10 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Describe how some people use color to understand and distinguish content. Explain different ways to supplement information that is presented using color, such as using shapes and icons. Explain how sufficient color contrast (contrast ratios in WCAG) are essential for people with low vision to perceive, distinguish, and understand content. +Describe how some people use color to understand and distinguish content. Explain different ways to supplement information that is presented using color, such as using shapes and icons. + #### Learning Outcomes for Topic Students should be able to: @@ -115,8 +117,9 @@ Students should be able to: * design text and images of text that have a contrast ratio of at least 4.5:1 with respect to their background * design large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background * design components and graphics that have a contrast ratio of at least 3:1 with respect to their background +* define layouts that enable users to change colors based on their customized style sheets * use visual cues in addition to color, for example using different patterns, shapes, and icons -* use non-visual cues for people who do not perceive color, for example using text to complement information provided visually +* use non-visual cues for people who cannot perceive color, for example using text to complement information provided visually #### Teaching Ideas for Topic @@ -132,7 +135,7 @@ Optional ideas to assess knowledge: * Short Answer Questions — Give students a set of user interface components and ask them what the contrast ratio should be. Assess how students understand and distinguish contrast ratios for different user interface components. * Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components, and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing. -* Practical — Give students information presented using color and ask them to supplement that information using other visual cues. Assess how students use shapes and icons to supplement information presented using color distinguishable. +* Practical — Give students examples of information presented using color and ask them to supplement that information using other visual cues. Assess how students use shapes and icons to supplement information presented using color distinguishable. {% include excol.html type="end" %} @@ -142,23 +145,24 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Explain how people with disabilities rely on different style properties, such as font types, sizes, and spacing, to support readability. +Explain how people with disabilities rely on distinguishable and customizable style properties, such as font types, sizes, and spacing, to support readability. #### Learning Outcomes for Topic Students should be able to: * use clear and distinguishable styles for links, buttons, form elements, and text -* define customizable font types to support content readability -* define customizable font sizes to support readability -* define adequate spacing to support readability -* define customizable colors to support readability +* define customizable style properties to support content readability, including: + * font types + * font sizes + * spacing + * colors #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Demonstrate the use of styles to distinguish user interface components, such as links, buttons, form labels and instructions, and text. Explain how people rely on font types, font sizes, spacing, and color to distinguish components. +* Demonstrate the use of styles to distinguish links, buttons, form labels and instructions, from regular text. Explain how people rely on font types, font sizes, spacing, and color to distinguish components. * Show examples of usable font sizes and explain how they support readability. Contrast previous examples with fonts that are not as easy to read. Emphasize that several user groups rely on customizable fonts to be able to read and understand content properly. * Show examples of different page layouts with and without adequate spacing. Explain how spacing allows for better readability of content and for better identification of the different parts of the user interface. @@ -182,9 +186,10 @@ Explain how people with disabilities perceive different web page regions and con Students should be able to: +* design focus indicators that enable people to tell where they are as they move through web pages and applications using the keyboard * define page regions by using appropriate visual and programmatic landmarks, such as headings +* design layouts that enable to present landmarks and cues in different screen sizes, screen confgurations, and style sheets * use text cues to supplement information provided through vision only, for example to convey required form fields represented with an icon and available dates in a calendar represented with a different background color -* design focus indicators that enable people to tell where they are as they move through web pages and applications using the keyboard #### Teaching Ideas for Topic diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 95c5e2db1..73edb1cc2 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -106,7 +106,7 @@ Students should be able to: * combinations of text alternatives of images and adjacent text inside components * adjacent text inside components to understand its function * use consistent naming and imagery for components that have the same functionality across web pages -* explain the benefits of conveying functionality using text labels and decorative images, instead of using images with text alternatives that are only available to some users, such as screen reader users +* explain the benefits of using text labels and decorative images for functionality, instead of using images with text alternatives that are only available to some users, such as screen reader users * apply appropriate contrast ratios for functional images #### Teaching Ideas for Topic diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 515769a10..12226b198 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -97,21 +97,20 @@ Topics to achieve the learning outcomes: Refer back to [Module 3: Navigation](/curricula/designer-modules/navigation/). Discuss ways to split large amounts of text into smaller pieces. For example, using headings and their corresponding rank levels, pages to split the contents into logical units, and chapter markers to indicate chapters in digital publications. -Discuss the use of icons and other visual cues to help people understand - and instructions presented in text. Explain that defining how to present these visual cues is a responsibility of the designer, whereas providing such cues is a responsibility shared with the content author. +Discuss the use of icons and other visual cues to help people understand information presented in text. Explain that defining how to present these visual cues is a responsibility of the designer, whereas providing such cues is a responsibility shared with the content author. #### Learning Outcomes for Topic Students should be able to: -* design textual content that can be split into smaller and more manageable pieces by using: +* design textual content as manageable passages of text, for example by splitting larger blocks of text into smaller and more manageable pieces using: * headings (with their corresponding rank levels) * sidebars and other page regions * pages * chapter markers (in digital publications) * design user interfaces with visual representation that accompanies the text, to make the information easier to understand; for example a diagram representation of the process described in the text” -* define mechanisms to provide specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon -* define mechanisms to provide the expanded form or meaning of acronyms and abbreviations +* reduce the use of professional terms, idioms, and jargon where possible, and provide definitions for such phrases and words where appropriate +* supplement acronyms and abbreviations by providing their expanded form or meaning * identify related requirements for developers to make language programmatically determined * identify related requirements for content authors to provide clear language and easy-to-read texts whenever possible diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 94c6ac3c3..7a4e1efe1 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -25,24 +25,24 @@ navigation: Courses based on this module should: * explain strategies that people with disabilities use to navigate websites and applications -* describe accessible behaviors, visual affordances, and interaction patterns of navigation menus, including static navigation menus, fly-out menus, and mega menus +* describe accessible behaviors, visual affordances, and interaction patterns of navigation menus and other navigational mechanisms ## Learning Outcomes for Module Students should be able to: * explain strategies that people with disabilities use to navigate websites and applications -* design different types of navigation mechanisms, including menus, tables of contents, and site maps -* define different interactions for menus and other navigation mechanisms, including keyboard, mouse, and touch -* provide clear and consistent visual presentation of menus and menu items -* provide clear and consistent visual indication of state changes for menu items -* provide mechanisms for developers to identify blocks of repeated content +* design different types of navigational mechanisms, including menus, tables of contents, and site maps +* define different interactions for menus and other navigational mechanisms, including keyboard, mouse, and touch +* define clear and consistent visual and non-visual presentation of menus and menu items +* define clear and consistent visual and non-visual indication of state changes for menu items +* define mechanisms to identify blocks of repeated content * cooperate with developers to implement mechanisms that bypass blocks of repeated content -* provide mechanisms to help users to locate specific web pages within sets of web pages, for example by providing breadcrumb trails, site maps, and descriptive page titles +* define mechanisms to help users to locate specific web pages within sets of web pages, for example by providing breadcrumb trails, site maps, and descriptive page titles * identify related requirements for developers to implement: - * interactions for navigation mechanisms, including keyboard, mouse, and touch - * clear and descriptive names for navigation mechanisms - * necessary semantics for menus, menu items, and menu item states + * interactions for navigational mechanisms, including keyboard, mouse, and touch + * clear and descriptive names for navigational mechanisms + * semantics for menus, menu items, and menu item states {% include excol.html type="all" %} @@ -110,8 +110,8 @@ Explain styling conventions for menus, such as location, appropriate size, and a Students should be able to: * identify and describe uses of different types of navigation menus, such as static, fly-out, and mega menus -* provide visual cues to distinguish menus from other components, -* provide consistent styling for menu identification across a set of web pages +* define visual and text cues to distinguish menus from other components, +* define consistent styling for menu identification across a set of web pages * define interactions inside navigation menus, including mouse, keyboard, and touch * design navigation menus that adapt to the different text sizes, screen magnifications, and screen sizes and resolutions * design distinguishable and consistent styles for menu items in their different states, for example in fly-out menus @@ -142,25 +142,26 @@ Optional ideas to assess knowledge: {% include excol.html type="start" %} -### Topic: Other Navigation Mechanisms +### Topic: Other navigational mechanisms {% include excol.html type="middle" %} -Introduce other navigation mechanisms that may be used depending on the characteristics of the website or application. Emphasize that different groups of users rely on different navigation mechanisms, so designers need to assess which ones to use to favor user various experiences. +Introduce other navigational mechanisms that may be used depending on the characteristics of the website or application. Emphasize that different groups of users rely on different navigational mechanisms, so designers need to assess which ones to use to favor various user experiences. #### Learning Outcomes for Topic Students should be able to: -* define blocks of repeated content, such as navigation bars and header contents, and define mechanisms to skip such blocks using the following approaches: +* define mechanisms to identify blocks of repeated content, such as navigation bars and header contents +* define mechanisms to skip blocks of repeated content using the following approaches: * a link at the top of each page that goes directly to the main content area * a link at the beginning of a block of repeated content to go to the end of the block * tables of contents at the top of the page that go to each area of the content * expandable and collapsible contents to make it easier for users to skip over them -* provide other navigation mechanisms to ensure web pages and application views can be reached using the following methods: +* define other navigational mechanisms to ensure web pages and application views can be reached using the following methods: * search functionalities that support navigating to specific parts of the site * site maps to provide an overview of the entire website -* balance the use of navigation mechanisms to avoid distractions and unnecessary noise +* balance the use of navigational mechanisms to avoid distractions and unnecessary noise #### Teaching Ideas for Topic @@ -179,8 +180,8 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Students define the blocks of repeated content in a website and cooperate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they work with developers to provide a mechanism to bypass such blocks. -* Practical — Present students with an interface and ask them to provide multiple ways to navigate across the website. Assess how students provide multiple navigation mechanisms where appropriate, such as search functionalities, breadcrumb trails, site maps, and tables of contents. -* Practical — Give students an interface with excessive use of navigation mechanisms and ask them to determine which of these navigation mechanisms should stay and which should be removed. Assess how students balance the use of navigation mechanisms to avoid distraction and unnecessary noise. +* Practical — Present students with an interface and ask them to provide multiple ways to navigate across the website. Assess how students provide multiple navigational mechanisms where appropriate, such as search functionalities, breadcrumb trails, site maps, and tables of contents. +* Practical — Give students an interface with excessive use of navigational mechanisms and ask them to determine which of these navigational mechanisms should stay and which should be removed. Assess how students balance the use of navigational mechanisms to avoid distraction and unnecessary noise. {% include excol.html type="end" %} @@ -209,13 +210,13 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of breadcrumb trails. Explain that they provide information about the users location in the context of a set of web pages. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail](https://www.w3.org/WAI/WCAG21/Techniques/general/G65). -* Invite students to give examples of page titles they are familiar with and reflect with them on how well the titles describe the page contents. Explain that page titles are useful to identify the purpose of a specific web page within a set of web pages. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page, as some browsers and assistive technologies do not show the information on the title. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). +* Invite students to give examples of page titles they are familiar with and reflect with them on how well the titles describe the page contents. Explain that page titles are useful to identify the purpose of a specific web page within a set of web pages. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page, as some browsers and assistive technologies may truncate the titles or not show the at all. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). #### Ideas to Assess Knowledge Optional ideas to assess knowledge: -* Practical — Present students with a specific web page inside a website and ask them to provide appropriate indications about the page location with respect to the entire website. Assess how students balance the use of appropriate indications to communicate the location of a web page within a set of web pages. +* Practical — Present students with a specific web page inside a website and ask them to provide appropriate indications about the page location with respect to the entire website. Assess how students balance the use of appropriate indications to communicate the location of a web page within a set of web pages, including using text and visual cues, breadcrumb trails, and descriptive titles and headings. * Practical — Present students with a set of web pages and ask them to provide descriptive titles that identify each of the pages and describe what they are about. Assess how students provide clear and descriptive page titles. {% include excol.html type="end" %} From b84f73a5adbd359a03117e3f9ed5d1871dc45a2a Mon Sep 17 00:00:00 2001 From: Daniel-Montalvo Date: Fri, 13 Aug 2021 13:11:14 +0200 Subject: [PATCH 219/416] Overall polishing --- .../flexible-color-layout-and-design.md | 6 +++--- .../forms-interactions-and-feedback.md | 4 ++-- content/designer/images-and-graphics.md | 8 ++++---- content/designer/information-design.md | 2 +- content/designer/multimedia-and-animations.md | 12 ++++++----- content/designer/navigation.md | 20 +++++++++---------- 6 files changed, 27 insertions(+), 25 deletions(-) diff --git a/content/designer/flexible-color-layout-and-design.md b/content/designer/flexible-color-layout-and-design.md index 6d865617c..7109b41b1 100644 --- a/content/designer/flexible-color-layout-and-design.md +++ b/content/designer/flexible-color-layout-and-design.md @@ -117,7 +117,7 @@ Students should be able to: * design text and images of text that have a contrast ratio of at least 4.5:1 with respect to their background * design large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background * design components and graphics that have a contrast ratio of at least 3:1 with respect to their background -* define layouts that enable users to change colors based on their customized style sheets +* define layouts that enable users to change colors based on customized screen sizes, screen configurations, and style sheets * use visual cues in addition to color, for example using different patterns, shapes, and icons * use non-visual cues for people who cannot perceive color, for example using text to complement information provided visually @@ -151,7 +151,7 @@ Explain how people with disabilities rely on distinguishable and customizable st Students should be able to: -* use clear and distinguishable styles for links, buttons, form elements, and text +* use clear and distinguishable styles for links, buttons, form labels and instructions, and text * define customizable style properties to support content readability, including: * font types * font sizes @@ -188,7 +188,7 @@ Students should be able to: * design focus indicators that enable people to tell where they are as they move through web pages and applications using the keyboard * define page regions by using appropriate visual and programmatic landmarks, such as headings -* design layouts that enable to present landmarks and cues in different screen sizes, screen confgurations, and style sheets +* design layouts that enable to present landmarks and cues in different screen sizes, screen configurations, and style sheets * use text cues to supplement information provided through vision only, for example to convey required form fields represented with an icon and available dates in a calendar represented with a different background color #### Teaching Ideas for Topic diff --git a/content/designer/forms-interactions-and-feedback.md b/content/designer/forms-interactions-and-feedback.md index 66675eb91..63fdc962a 100644 --- a/content/designer/forms-interactions-and-feedback.md +++ b/content/designer/forms-interactions-and-feedback.md @@ -32,7 +32,7 @@ Courses based on this module should: Students should be able to: * explain strategies that people with disabilities use to interact with components that accept user input -* design the user experiences for different input mechanisms, including mouse, touch, keyboard, and speech +* design user experiences for different input mechanisms, including mouse, touch, keyboard, and speech * define keyboard interactions and meaningful sequences inside complex widgets, including buttons, carousels, sliders, tabs, and treeviews * create designs with information about custom keyboard shortcuts for complex widgets and applications * provide clear and distinguishable ways to identify components that accept user input, including through naming and placement @@ -123,7 +123,7 @@ Emphasize that defining the keyboard interactions is a designers' responsibility Students should be able to: -* design the user experiences for keyboard navigation through and inside custom components, for example: +* design user experiences for keyboard navigation through and inside custom components, for example: * using the tab key to move through different components * using the enter key to enter a specific component and to select a specific item on a component * using the arrow keys to move through elements inside components, such as application menus, dialogs, list items and grid cells diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 73edb1cc2..5d9d671da 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -173,13 +173,13 @@ Optional ideas to support assessment. Complex images are those whose description requires more than a short phrase or sentence. Show examples of complex images, including diagrams and charts, and explain accessibility requirements that these images have, such as appropriate contrast ratios and appropriate text descriptions. -Explain that coordination among different team members is required to assess the use of complex images based on their adjacent components (for example text and other images) and on the overall context, so that the relations are perceived and understood visually and through the provided descriptions. +Explain that coordination among different team members is required to assess the use of complex images based on the overall context, so that the information of such images is perceived and understood visually and through the provided descriptions. #### Learning Outcomes for Topic Students should be able to: -* use appropriate contrast ratios for complex images when these images are required to understand the contents +* use appropriate contrast ratios for complex images * identify related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, such as diagrams, charts, maps and infographics * determine if and how complex images are operated using the mouse, keyboard, and other input devices @@ -205,13 +205,13 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Decorative images are used for ornamental purposes and convey no information or function. Build on [Module 1: Flexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) to explain that decorative images also need to adhere to accessibility requirements such as use of color, ability to resize, and flexibility. Decorative images require empty text alternatives, so that they can be ignored by assistive technologies, and reduce noise. Explain that determining if an image is decorative is a responsibility shared with the content author. +Decorative images are used for ornamental purposes and convey no information or function. Build on [Module 1: Flexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) to explain accessibility requirements such as use of color, ability to resize, and flexibility in the context of decorative images. Decorative images require empty text alternatives, so that they can be ignored by assistive technologies, and reduce noise. Explain that determining if an image is decorative is a responsibility shared with the content author. #### Learning Outcomes for Topic Students should be able to: -* describe the differences between decorative and non-decorative images depending on the type of information conveyed by the image, the presence of similar information in the adjacent content, and the overall context +* describe the differences between decorative and non-decorative images depending on the type of information conveyed by the image and the overall context * describe different ways to present information contained in an image in the surrounding content so that the image can be considered decorative * assess the use of decorative images based on other images in the content and on the overall context where it is included * explain how the overuse of decorative images could become distracting for some users and slow down loading times and interaction for other users diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 12226b198..3e023fe07 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -147,7 +147,7 @@ Students should be able to: * define related form controls, such as those collecting personal information, payment methods, and consent to legal conditions * describe the poor user experience inherent to long data lists and grids and identify different approaches to address this, for example by providing search boxes and mechanisms to filter data, or by splitting larger data sets into smaller ones -* define mechanisms to customize shown results after a search query, for example the number of products per page +* define mechanisms to customize number of shown results after a search query, for example the number of products per page #### Teaching Ideas for Topic diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 000098820..57834c462 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -33,8 +33,10 @@ Students should be able to: * identify accessibility requirements for different types of audio and video content * design the placement and spacing for alternatives to multimedia content, such as transcripts, audio descriptions, captions, and sign language -* design the user experiences for transcripts, audio descriptions, captions, and sign language, including mechanisms for turning on and off such alternatives and ways for users to interact with the alternatives -* design multimedia player controls that have clear and descriptive names, that are easy to find, and that are always reachable to users +* design user experiences that consider transcripts, audio descriptions, captions, and sign language, including + * mechanisms for turning on and off such alternatives + * ways for users to interact with the alternatives +* design multimedia player controls that have clear and descriptive names, that are easy to find, and that are always reachable for users * design multimedia players that support different methods of interaction, including mouse, keyboard, touch, and voice * design mechanisms to pause, stop, and hide moving, blinking, and auto-updating content, including animations and carousels * design mechanisms to mute or control the volume of auto-playing audio @@ -117,14 +119,14 @@ Students should be able to * define audio descriptions as descriptions to adequately get the visual information needed to understand the content * define captions as text versions of the speech and non-speech audio information needed to understand the content * define sign language as the native language of some deaf people -* design mechanisms for pausing, stopping, or hiding that plays automatically for more than 3 seconds +* design mechanisms for pausing, stopping, or hiding audio that plays automatically for more than 3 seconds +* design mechanisms to provide alternatives for multimedia content, including text transcripts for audio and visual information, audio descriptions, captions, and sign language * design mechanisms to turn on and off audio descriptions, captions, and sign language * design player controls that: * have descriptive names * can be operable by keyboard * are easy to find - * are always reachable - * do not disappear when the media starts playing + * are always reachable for users #### Teaching Ideas for Topic diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 7a4e1efe1..f7ac9798c 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -33,14 +33,14 @@ Students should be able to: * explain strategies that people with disabilities use to navigate websites and applications * design different types of navigational mechanisms, including menus, tables of contents, and site maps -* define different interactions for menus and other navigational mechanisms, including keyboard, mouse, and touch +* define different interactions for menus and other navigational mechanisms, including keyboard, mouse, touch, and voice * define clear and consistent visual and non-visual presentation of menus and menu items * define clear and consistent visual and non-visual indication of state changes for menu items * define mechanisms to identify blocks of repeated content * cooperate with developers to implement mechanisms that bypass blocks of repeated content * define mechanisms to help users to locate specific web pages within sets of web pages, for example by providing breadcrumb trails, site maps, and descriptive page titles * identify related requirements for developers to implement: - * interactions for navigational mechanisms, including keyboard, mouse, and touch + * interactions for navigational mechanisms, including keyboard, mouse, touch, and voice * clear and descriptive names for navigational mechanisms * semantics for menus, menu items, and menu item states @@ -118,7 +118,7 @@ Students should be able to: * identify related requirements for developers to implement: * non-visual identification (and naming)of menus, * semantics for different menu states and properties, such as hover, focus, current, active, and visited - * support for different interaction methods, including keyboard, mouse, and touch + * support for different interaction methods, including keyboard, mouse, touch, and voice * support for different text and screen sizes #### Teaching Ideas @@ -126,7 +126,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Present different types of navigation menus, such as static, fly-out, and mega menus. Explain conventions for accessible navigation menus, such as clear and consistent styling to convey menu behaviors and states. Introduce patterns for mouse, keyboard, and touch interaction with navigation menus. -* Demonstrate navigation menu interaction using different input devices, such as keyboard, mouse, and touch. For example, activating a menu option by tapping, pressing the Enter key, and mouse clicking. Explain that defining the interactions is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. +* Demonstrate navigation menu interaction using different input devices, such as keyboard, mouse, touch, and voice. For example, activating a menu option by tapping, pressing the Enter key, and mouse clicking. Explain that defining the interactions is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. * Show examples of navigation menus and menu items large text. Explain that, when used in smaller viewports and with different screen configurations, these text needs to wrap so that it is perceived in its entirety. Explain that different languages may have different word sizes, so designers need to consider provisions for different word lengths. * Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Emphasize that the states of these menu items need to be communicated using visual cues as well as semantics. Explain that providing the visual cues is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. @@ -180,7 +180,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Students define the blocks of repeated content in a website and cooperate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they work with developers to provide a mechanism to bypass such blocks. -* Practical — Present students with an interface and ask them to provide multiple ways to navigate across the website. Assess how students provide multiple navigational mechanisms where appropriate, such as search functionalities, breadcrumb trails, site maps, and tables of contents. +* Practical — Present students with an interface and ask them to provide multiple ways to navigate across the website. Assess how students identify the different user experiences for navigation, including search functionalities, breadcrumb trails, site maps, and tables of contents. * Practical — Give students an interface with excessive use of navigational mechanisms and ask them to determine which of these navigational mechanisms should stay and which should be removed. Assess how students balance the use of navigational mechanisms to avoid distraction and unnecessary noise. {% include excol.html type="end" %} @@ -191,7 +191,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Build on [Foundation Module 6: Understanding and Involving Users](/curricula/foundation-modules/understanding-and-involving-users/) to research strategies that people with disabilities use to locate a specific web page in a set of web pages. Discuss examples like breadcrumb trails, page titles, and visual cues to indicate the current page. +Build on [Foundation Module 6: Understanding and Involving Users](/curricula/foundation-modules/understanding-and-involving-users/) to research strategies that people with disabilities use to locate a specific web page in a set of web pages. Discuss examples like breadcrumb trails, page titles, and text and visual cues to indicate the current page. #### Learning Outcomes for Topic @@ -199,11 +199,11 @@ Students should be able to: * design mechanisms for users to locate specific web pages within sets of web pages, for example: * descriptive page titles - * breadcrumb trails - * textual and visual cues in the navigation menu to indicate the current page + * text and visual cues in the navigation menu to indicate the current page * descriptive page headings -* identify related requirements for developers to code location mechanisms + * breadcrumb trails * balance the use of location mechanisms to avoid distractions and unnecessary noise +* identify related requirements for developers to apply semantics to page titles, headings, non-visual cues, and breadcrumb trails ### Teaching Ideas @@ -216,7 +216,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Present students with a specific web page inside a website and ask them to provide appropriate indications about the page location with respect to the entire website. Assess how students balance the use of appropriate indications to communicate the location of a web page within a set of web pages, including using text and visual cues, breadcrumb trails, and descriptive titles and headings. +* Practical — Give students a specific web page inside a website and ask them to provide appropriate indications about the page location with respect to the entire website. Assess how students balance the use of text and visual cues, breadcrumb trails, and descriptive titles and headings. * Practical — Present students with a set of web pages and ask them to provide descriptive titles that identify each of the pages and describe what they are about. Assess how students provide clear and descriptive page titles. {% include excol.html type="end" %} From cbbba45153b962484f1a8acc8a50ba073245f81b Mon Sep 17 00:00:00 2001 From: Daniel-Montalvo Date: Tue, 17 Aug 2021 15:07:06 +0200 Subject: [PATCH 220/416] Updates to front-matter --- content/designer/multimedia-and-animations.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 57834c462..304985647 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -14,6 +14,11 @@ footer: >

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+parent_in_h1: + - ref: /curricula/designer-modules/ + name: nav_title + - ref: /curricula/ + name: "Curricula on Web Accessibility" navigation: previous: /curricula/designer-modules/images-and-graphics/ next: /curricula/designer-modules/forms-interactions-and-feedback/ From bfc0cfc455005c36a81b68d98a4b9a66f361226c Mon Sep 17 00:00:00 2001 From: Daniel-Montalvo Date: Tue, 17 Aug 2021 17:34:05 +0200 Subject: [PATCH 221/416] Updating moduels and topics --- .../flexible-color-layout-and-design.md | 10 ++++--- .../forms-interactions-and-feedback.md | 26 ++++++++-------- content/designer/images-and-graphics.md | 30 +++++++++++-------- content/designer/information-design.md | 16 +++++----- content/designer/multimedia-and-animations.md | 24 ++++++++------- content/designer/navigation.md | 15 +++++----- 6 files changed, 66 insertions(+), 55 deletions(-) diff --git a/content/designer/flexible-color-layout-and-design.md b/content/designer/flexible-color-layout-and-design.md index 7109b41b1..d23fda7b0 100644 --- a/content/designer/flexible-color-layout-and-design.md +++ b/content/designer/flexible-color-layout-and-design.md @@ -37,6 +37,7 @@ Courses based on this module should: Students should be able to: * explain how people with disabilities rely on designs that adapt to different colors, layouts, spacing, and positions +* determine if text, images of text, and controls have sufficient color contrast * design layouts with sufficient color contrast for text, images of text, and controls * design clear and distinguishable focus indicators, for example using borders, color, and highlighting * design layouts that adapt to different font sizes and spacing set by the user in browser and operating system settings @@ -107,13 +108,14 @@ Topics to achieve the learning outcomes: Explain how sufficient color contrast (contrast ratios in WCAG) are essential for people with low vision to perceive, distinguish, and understand content. -Describe how some people use color to understand and distinguish content. Explain different ways to supplement information that is presented using color, such as using shapes and icons. +Describe how some people rely on color to understand and distinguish content. Explain that some people cannot perceive color well or at all. Discuss different ways to supplement information that is presented using color, such as using shapes and icons. #### Learning Outcomes for Topic Students should be able to: * explain how appropriate use of color enables people with disabilities to read, understand, and distinguish user interface components +* determine if text, images of text, and controls have sufficient color contrast based on the contrast ratios * design text and images of text that have a contrast ratio of at least 4.5:1 with respect to their background * design large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background * design components and graphics that have a contrast ratio of at least 3:1 with respect to their background @@ -135,7 +137,7 @@ Optional ideas to assess knowledge: * Short Answer Questions — Give students a set of user interface components and ask them what the contrast ratio should be. Assess how students understand and distinguish contrast ratios for different user interface components. * Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components, and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing. -* Practical — Give students examples of information presented using color and ask them to supplement that information using other visual cues. Assess how students use shapes and icons to supplement information presented using color distinguishable. +* Practical — Discuss with students examples of information presented using color and ask them to supplement that information using other visual cues. Assess how students use shapes and icons to supplement information presented using color distinguishable. {% include excol.html type="end" %} @@ -195,7 +197,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different regions of web pages, such as header, navigation, main, and footer. Explain that several groups of people with disabilities rely on visual and programmatic landmarks to perceive such regions. Explain that defining landmarks and their styles is a designers' responsibility, whereas implementing such landmarks and their semantics is a developers' responsibility. +* Show examples of different web page regions, such as header, navigation, main, and footer. Explain that several groups of people with disabilities rely on visual and programmatic landmarks to perceive such regions. Explain that defining landmarks and their styles is a designers' responsibility, whereas implementing such landmarks and their semantics is a developers' responsibility. * Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a form field is required and those with colors to convey available dates in a calendar. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). * Invite students to use a web page that has appropriate focus indicators first, and then invite them to use a web page without focus indicators. Explain how focus indicators allow people using the keyboard only to determine where they are as they move through web pages and applications using the keyboard only. For reference on how to provide appropriate focus indicators, see techniques [G149: Using user interface components that are highlighted by the user agent when they receive focus](https://www.w3.org/WAI/WCAG21/Techniques/general/G149.html) and [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). @@ -225,7 +227,7 @@ Students should be able to: * design layouts that support content view and operation in both portrait and landscape orientations * design layouts with target sizes and spaces to support tapping by people with mobility impairments and people using different input methods * design layouts that support customizing line height, as well as spacing between paragraphs, words, and letters -* design user interfaces that preserve focus order when accessed using different viewport, screen sizes, and breakpoints +* design appropriate focus order based on different viewports, screen sizes, and breakpoints #### Teaching Ideas for Topic diff --git a/content/designer/forms-interactions-and-feedback.md b/content/designer/forms-interactions-and-feedback.md index 63fdc962a..00516e151 100644 --- a/content/designer/forms-interactions-and-feedback.md +++ b/content/designer/forms-interactions-and-feedback.md @@ -35,9 +35,9 @@ Students should be able to: * design user experiences for different input mechanisms, including mouse, touch, keyboard, and speech * define keyboard interactions and meaningful sequences inside complex widgets, including buttons, carousels, sliders, tabs, and treeviews * create designs with information about custom keyboard shortcuts for complex widgets and applications -* provide clear and distinguishable ways to identify components that accept user input, including through naming and placement -* provide mechanisms to help understand the context, information, and functionality of user interface components, including through textual instructions, color, and other visual cues -* provide meaningful and descriptive notifications about imminent time limits, steps, errors, suggestions for correction, success messages, status changes, and feedback from user input +* define clear and distinguishable ways to identify components that accept user input, including through naming and placement +* define mechanisms to help understand the context, information, and functionality of user interface components, including through textual instructions, color, and other visual cues +* define meaningful and descriptive notifications about imminent time limits, steps, errors, suggestions for correction, success messages, status changes, and feedback from user input * identify related requirements for developers to provide the necessary semantics for components that accept user input, error messages, notifications, and other feedback * identify related requirements for developers to code custom keyboard interactions for components that accept user input @@ -134,7 +134,7 @@ Students should be able to: * design user experiences that avoid keyboard shortcut conflicts with the operating system, browser, and assistive technologies when possible * cooperate with developers to provide mechanisms to remap or disable conflicting shortcuts * define mechanisms to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications -* provide focus indicators that are visible and that have appropriate contrast ratios for complex widgets +* define focus indicators that are visible and that have appropriate contrast ratios for complex widgets * describe related requirements for developers to implement keyboard support for components that accept user input #### Teaching Ideas for Topic @@ -204,14 +204,14 @@ Show examples of labels and instructions for components that accept user input. Students should be able to: -* provide clear and consistent names to help users understand the purpose of components that accept user input +* define clear and consistent names to help users understand the purpose of components that accept user input * design user experiences that consider position, appearance, and naming of labels -* provide instructions about which input fields are required by: +* define instructions about which input fields are required by: * including information about each of the required form fields before the form control * including textual and visual cues in the label of each of the required form fields that indicate that they are required -* provide clear instructions about changes in context before the control that originates such changes -* provide overall instructions about existing time limits in a form and about how they can be adjusted, extended, and turned off -* provide clear instructions about the current step and about the total number of steps involved in a multi-step form +* define clear instructions about changes in context before the control that originates such changes +* define overall instructions about existing time limits in a form and about how they can be adjusted, extended, and turned off +* define clear instructions about the current step and about the total number of steps involved in a multi-step form * identify related requirements for developers to code labels and instructions appropriately #### Teaching Ideas for Topic @@ -249,10 +249,10 @@ Explain that notifications may have different levels of priority when in the con Students should be able to: * design notifications that are easy to understand and that can be distinguished from any other user interface component -* provide error messages in the page title or before the form control that identify the fields in error and that describe the cause of the error -* provide meaningful suggestions for correction when such suggestions do not compromise the security or purpose of the content -* provide meaningful messages when successfully completing a task, for example when submitting forms and when saving documents -* provide meaningful and descriptive notification messages, for example validation messages as the user types +* define error messages in the page title or before the form control that identify the fields in error and that describe the cause of the error +* define meaningful suggestions for correction when such suggestions do not compromise the security or purpose of the content +* define meaningful messages when successfully completing a task, for example when submitting forms and when saving documents +* define meaningful and descriptive notification messages, for example validation messages as the user types * design user experiences to store and check notification messages at the users' pace, for example those that messages that disappear after a period of time * design user experiences to queue and prioritize application notifications coming from different components * describe related requirements for developers to code notification messages appropriately diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 5d9d671da..eecb39dab 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -33,12 +33,13 @@ Students should be able to: * explain how images and graphics help people with disabilities to process information, identify content, and understand functionality * explain how text alternatives are essential for people with disabilities to understand the information contained in images -* provide meaningful and consistent text alternatives for functional images, such as those included in buttons, links, icons, and logos +* define meaningful and consistent text alternatives for functional images, such as those included in buttons, links, icons, and logos * design consistent imagery to help users recognize the purpose of icons, thumbnails, and other graphical components -* explain the issues associated with images of text, and explain how to avoid these when the desired visual presentation can be achieved by the technology in use -* cooperate with developers and content authors to provide the appropriate alternative for images and graphics included in the design phase based on the image purpose +* explain the issues associated with perception, interpretation, and rendering of images of text +* explain how to avoid images of text by using technologies that achieve the desired visual presentation wherever possible +* cooperate with developers and content authors to provide the appropriate alternative for images and graphics based on the image purpose * identify related requirements for developers to code images and text alternatives appropriately -* identify related requirements for content authors to provide appropriate descriptions for images included in the authoring phase, such as charts, diagrams, and other complex graphics +* identify related requirements for content authors to provide appropriate descriptions for images, such as charts, diagrams, and other complex graphics {% include excol.html type="all" %} @@ -101,7 +102,7 @@ Functional images convey functionality of a user interface component. For exampl Students should be able to: -* provide text alternatives for functional images by using the following mechanisms: +* define text alternatives for functional images by using the following mechanisms: * text alternatives for images * combinations of text alternatives of images and adjacent text inside components * adjacent text inside components to understand its function @@ -113,13 +114,13 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different images used to convey functionality, such as for printing, searching, or saving a document. Explain that it is necessary to provide and equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). +* Show examples of different images used to convey functionality, such as for printing, searching, or saving a document. Explain that it is necessary to provide an equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Give students a set of images conveying function, such as a printer for a "print" button and a magnifying glass for a "search" button. Ask students to provide an appropriate text alternative. Assess how students identify images that convey function and how they provide text alternatives that describe the functionality of the component the image is attached to. +* Practical — Discuss with students different examples of images conveying function, such as a printer for a "print" button and a magnifying glass for a "search" button. Ask students to provide an appropriate text alternative. Assess how students identify images that convey function and how they provide text alternatives that describe the functionality of the component the image is attached to. * Practical — Ask students to design a series of graphical buttons and links in a way that they are perceivable and distinguishable by all users. Assess how students apply accessibility requirements, such as contrast ratios, to graphical buttons and links. {% include excol.html type="end" %} @@ -130,7 +131,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Informative images convey information that is necessary to understand the content. Their description requires generally a short phrase or sentence. Show examples of images that convey information, such as pictures in a piece of news. Discuss with students how they would describe them. +Informative images convey information that is necessary to understand the content. Their description generally requires a short phrase or sentence. Show examples of images that convey information, such as pictures in a piece of news. Discuss with students how they would describe them. Explain that providing text alternatives for informative images is a responsibility shared with the content author. @@ -138,13 +139,13 @@ Explain that providing text alternatives for informative images is a responsibil Students should be able to: -* provide text alternatives that present equivalent information as that contained in informative images, by using the following mechanisms: +* define text alternatives that present equivalent information as that contained in informative images, by using the following mechanisms: * boilerplate descriptions that would then be completed and maintained through the development and authoring phases * adjacent textual information to complement images and icons, for example in a news headline * text alternatives that describe the information conveyed by images * apply the appropriate contrast ratio to images that are necessary to understand the contents * use styled text instead of images of text when the technology in use can provide the desired visual presentation -* provide alternatives to CAPTCHA and biometrics, for example by providing visual, auditory, and logical CAPTCHA +* define alternatives to CAPTCHA and biometrics, for example by providing visual, auditory, and logical CAPTCHA * explain the issues associated with relying only on one form of biometrics and CAPTCHA, and describe alternative approaches for authentication * identify related requirements for developers to code alternative texts for informative images @@ -180,8 +181,13 @@ Explain that coordination among different team members is required to assess the Students should be able to: * use appropriate contrast ratios for complex images +* assess the use of complex images versus other ways to present the same information, such as tables, simpler images, and regular text +* determine if and how complex images are operated using input devices, including mouse, keyboard, voice, and touch +* consider placement and spacing for alternatives to complex images +* design clear and consistent identification mechanisms for complex image descriptions, including appropriate headings and expandable and collapsible components +* design user experiences for complex images, including how to get to the image descriptions, what the content of the description should look like, and if the descriptions could ultimately replace the image itself * identify related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, such as diagrams, charts, maps and infographics -* determine if and how complex images are operated using the mouse, keyboard, and other input devices +* identify related requirements for content authors to break down complex images into smaller and more manageable pieces, for example simpler images, tables, and regular text #### Teaching Ideas for Topic @@ -213,7 +219,7 @@ Students should be able to: * describe the differences between decorative and non-decorative images depending on the type of information conveyed by the image and the overall context * describe different ways to present information contained in an image in the surrounding content so that the image can be considered decorative -* assess the use of decorative images based on other images in the content and on the overall context where it is included +* assess the amount of decorative images in use based on other images in the content and on the overall context * explain how the overuse of decorative images could become distracting for some users and slow down loading times and interaction for other users * identify related requirements for developers to code decorative images so that they are skipped by assistive technologies diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 3e023fe07..68a0eb819 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -95,9 +95,9 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Refer back to [Module 3: Navigation](/curricula/designer-modules/navigation/). Discuss ways to split large amounts of text into smaller pieces. For example, using headings and their corresponding rank levels, pages to split the contents into logical units, and chapter markers to indicate chapters in digital publications. +Discuss ways to split large amounts of text into smaller pieces. For example, using headings and their corresponding rank levels, pages to split the contents into logical units, and chapter markers to indicate chapters in digital publications. -Discuss the use of icons and other visual cues to help people understand information presented in text. Explain that defining how to present these visual cues is a responsibility of the designer, whereas providing such cues is a responsibility shared with the content author. +Discuss the use of visual and non-visual cues (including labels, instructions, and graphical representations) to help people understand information presented in text. Explain that defining how to present these visual cues is a responsibility of the designer, whereas providing such cues is a responsibility shared with the content author. #### Learning Outcomes for Topic @@ -108,9 +108,9 @@ Students should be able to: * sidebars and other page regions * pages * chapter markers (in digital publications) -* design user interfaces with visual representation that accompanies the text, to make the information easier to understand; for example a diagram representation of the process described in the text” -* reduce the use of professional terms, idioms, and jargon where possible, and provide definitions for such phrases and words where appropriate -* supplement acronyms and abbreviations by providing their expanded form or meaning +* create visual representations that accompany the text, to make the information easier to understand; for example a diagram representation of the process described in the text” +* assess the use of professional terms, idioms, and jargon, and provide definitions for such phrases and words where appropriate +* assess the use of acronyms and abbreviations and provide their expanded form or meaning * identify related requirements for developers to make language programmatically determined * identify related requirements for content authors to provide clear language and easy-to-read texts whenever possible @@ -118,7 +118,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of online articles and forms. Discuss how these are divided into manageable pieces so that they are easier to understand and to navigate. For example, by using headings and their corresponding rank levels together with pages and chapter markers to indicate the different chapters, sections, and subsections of content. +* Show examples of online articles and forms. Discuss how these are divided into manageable pieces so that they are easier to understand and to navigate. For example, by using headings and their corresponding rank levels to indicate the different chapters, sections, and subsections of content. * Show examples of diagrams and illustrations that can complement the information presented in text. For example, visual instructions that supplement the textual information of a user manual. Explain that they help users with reading disabilities understand difficult pieces of text. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). * Show examples of words that may be difficult to understand or that are used in a restricted way. Explain that people who are not familiar with such words need definitions to understand their meaning. Explain that defining the mechanisms to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. * Show examples of abbreviations, such as short forms of words and acronyms. Explain that people who are not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the mechanisms to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. @@ -147,7 +147,7 @@ Students should be able to: * define related form controls, such as those collecting personal information, payment methods, and consent to legal conditions * describe the poor user experience inherent to long data lists and grids and identify different approaches to address this, for example by providing search boxes and mechanisms to filter data, or by splitting larger data sets into smaller ones -* define mechanisms to customize number of shown results after a search query, for example the number of products per page +* define mechanisms to customize the number of shown results after a search query, for example the number of products per page #### Teaching Ideas for Topic @@ -189,7 +189,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of different types of information presented in tables. Explain that tables are used when there is a logical, tabular relationship between the information presented, for example when displaying a list of events with their date and venue. -* Refer back to Module 1: Flexible Color, Layout, and Design [Topic: Flexible Design](/curricula/designer-modules/flexible-Color-layout-and-design/#topic-flexible-design) and explain that some users may require different ways of presenting tabular information. Explain that these include providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. +* Refer back to [Designer Module 1: Topic Flexible Design](/curricula/designer-modules/flexible-Color-layout-and-design/#topic-flexible-design) and explain that some users may require different ways of presenting tabular information. For example, providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. * Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells needs to be perceived both visually and programmatically. Explain that providing the styles is a designers' responsibility, whereas establishing the programmatic relationship is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 304985647..6c91756cb 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -30,7 +30,7 @@ navigation: Courses based on this module should: * explain strategies that people with disabilities use to access multimedia contents, such as audio and video -* explain accessibility requirements for multimedia content, such as transcripts for audio and visual information, captions (also known as subtitles), audio descriptions, and sign language +* explain accessibility requirements for multimedia content, such as audio descriptions of visual information, captions (also known as subtitles), transcripts, and sign languages ## Learning Outcomes for Module @@ -38,13 +38,14 @@ Students should be able to: * identify accessibility requirements for different types of audio and video content * design the placement and spacing for alternatives to multimedia content, such as transcripts, audio descriptions, captions, and sign language -* design user experiences that consider transcripts, audio descriptions, captions, and sign language, including +* design user experiences that consider audio descriptions of visual information, captions, transcripts, and sign language, including * mechanisms for turning on and off such alternatives * ways for users to interact with the alternatives +* assess the need for designing a custom media player based on the project requirements and on existing media players supporting accessibility * design multimedia player controls that have clear and descriptive names, that are easy to find, and that are always reachable for users * design multimedia players that support different methods of interaction, including mouse, keyboard, touch, and voice +* design mechanisms to mute and control the volume of auto-playing audio * design mechanisms to pause, stop, and hide moving, blinking, and auto-updating content, including animations and carousels -* design mechanisms to mute or control the volume of auto-playing audio * identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding media content * identify related requirements for developers to include accessibility support for multimedia players * identify related requirements for content authors to provide appropriate text transcripts, captions, audio descriptions, and sign language @@ -111,25 +112,26 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Text transcripts provide an alternative to visual and audio information. Audio descriptions are essential for people who cannot see the visuals. Captions are essential for people who cannot hear the audio. +Audio descriptions are essential for people who cannot see the visuals. Captions are essential for people who cannot hear the audio. Text transcripts provide an alternative to visual and audio information. -Discuss the need for planning in the design phase to accommodate media alternatives such as text transcripts, audio descriptions, captions, and sign language. Present mechanisms to turn on and off alternatives to multimedia content depending on user needs. Explain that these mechanisms need to have clear name and need to be always reachable for users. Explain that defining such mechanisms is a designer's responsibility, whereas providing the alternatives is a responsibility shared with the content author. +Discuss the need for planning in the design phase to accommodate media alternatives such as audio description of visual information, captions, text transcripts, and sign language. Present mechanisms to turn on and off alternatives to multimedia content depending on user needs. Explain that these mechanisms need to have clear name and need to be always reachable for users. Explain that defining such mechanisms is a designer's responsibility, whereas providing the alternatives is a responsibility shared with the content author. #### Learning Outcomes for Topic Students should be able to -* identify accessibility requirements for the different types of multimedia content, such as text transcripts for audio and visual information, audio descriptions, captions, and sign language -* define text transcripts as text that provides an alternative to visual and audio information +* identify accessibility requirements for the different types of multimedia content, such as auio descriptions for visual information, captions, transcripts, and sign languages * define audio descriptions as descriptions to adequately get the visual information needed to understand the content * define captions as text versions of the speech and non-speech audio information needed to understand the content +* define text transcripts as text that provides an alternative to visual and audio information * define sign language as the native language of some deaf people -* design mechanisms for pausing, stopping, or hiding audio that plays automatically for more than 3 seconds -* design mechanisms to provide alternatives for multimedia content, including text transcripts for audio and visual information, audio descriptions, captions, and sign language +* design mechanisms for controling the volume ofaudio that plays automatically for more than 3 seconds +* design mechanisms for pausing, stopping, or hiding any content that blinks, moves, or auto-updates, for example audio descriptions, captions, transcripts, sign language +* design mechanisms to provide alternatives for multimedia content, including audio descriptions, captions, transcripts, and sign language * design mechanisms to turn on and off audio descriptions, captions, and sign language * design player controls that: * have descriptive names - * can be operable by keyboard + * are operable by keyboard * are easy to find * are always reachable for users @@ -209,9 +211,9 @@ Suggested resources to support your teaching: * [Making Audio and Video Media Accessible](https://www.w3.org/WAI/media/av/) — Covers captions/subtitles, audio description of visual information, descriptive transcripts, and sign language. Includes guidance for creating new videos, and on media player accessibility. Introduces user experiences and benefits to organizations. * [Designing for Web Accessibility](/tips/designing/) — Tips for user interface and visual design. * [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. +* [Video Captions (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/captions/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [Colors with Good Contrast (Web Accessibility Perspective)](/perspective-videos/contrast/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [Clear Layout and Design (Web Accessibility Perspective)](/perspective-videos/layout/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [Large Links, Buttons, and Controls (Web Accessibility Perspectives)](/perspective-videos/controls/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. -* [Video Captions (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/captions/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. diff --git a/content/designer/navigation.md b/content/designer/navigation.md index f7ac9798c..1fb1c29cf 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -37,7 +37,7 @@ Students should be able to: * define clear and consistent visual and non-visual presentation of menus and menu items * define clear and consistent visual and non-visual indication of state changes for menu items * define mechanisms to identify blocks of repeated content -* cooperate with developers to implement mechanisms that bypass blocks of repeated content +* cooperate with developers to define and implement mechanisms that bypass blocks of repeated content * define mechanisms to help users to locate specific web pages within sets of web pages, for example by providing breadcrumb trails, site maps, and descriptive page titles * identify related requirements for developers to implement: * interactions for navigational mechanisms, including keyboard, mouse, touch, and voice @@ -113,10 +113,10 @@ Students should be able to: * define visual and text cues to distinguish menus from other components, * define consistent styling for menu identification across a set of web pages * define interactions inside navigation menus, including mouse, keyboard, and touch -* design navigation menus that adapt to the different text sizes, screen magnifications, and screen sizes and resolutions +* design navigation menus that adapt to different text sizes, screen magnifications, and screen sizes and resolutions * design distinguishable and consistent styles for menu items in their different states, for example in fly-out menus * identify related requirements for developers to implement: - * non-visual identification (and naming)of menus, + * non-visual identification and naming of menus * semantics for different menu states and properties, such as hover, focus, current, active, and visited * support for different interaction methods, including keyboard, mouse, touch, and voice * support for different text and screen sizes @@ -127,7 +127,7 @@ Optional ideas to teach the learning outcomes: * Present different types of navigation menus, such as static, fly-out, and mega menus. Explain conventions for accessible navigation menus, such as clear and consistent styling to convey menu behaviors and states. Introduce patterns for mouse, keyboard, and touch interaction with navigation menus. * Demonstrate navigation menu interaction using different input devices, such as keyboard, mouse, touch, and voice. For example, activating a menu option by tapping, pressing the Enter key, and mouse clicking. Explain that defining the interactions is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. -* Show examples of navigation menus and menu items large text. Explain that, when used in smaller viewports and with different screen configurations, these text needs to wrap so that it is perceived in its entirety. Explain that different languages may have different word sizes, so designers need to consider provisions for different word lengths. +* Show examples of navigation menus and menu items large text. Explain that this text needs to adapt to different viewports and screen configurations, for example wrap so that it is perceived in its entirety. Explain that different languages may have different word sizes, so designers need to consider provisions for different word lengths. * Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Emphasize that the states of these menu items need to be communicated using visual cues as well as semantics. Explain that providing the visual cues is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. #### Ideas to Assess Knowledge for Topic @@ -146,7 +146,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Introduce other navigational mechanisms that may be used depending on the characteristics of the website or application. Emphasize that different groups of users rely on different navigational mechanisms, so designers need to assess which ones to use to favor various user experiences. +Introduce other navigational mechanisms that may be used depending on the characteristics of the website or application. Explain that different groups of users rely on different navigational mechanisms. Discuss how to assess and balance which ones to use to favor various user experiences while avoiding distractions and unnecessary noise. #### Learning Outcomes for Topic @@ -158,10 +158,11 @@ Students should be able to: * a link at the beginning of a block of repeated content to go to the end of the block * tables of contents at the top of the page that go to each area of the content * expandable and collapsible contents to make it easier for users to skip over them +* assess the amount of mechanisms to skip blocks of repeated content in use, to avoid distractions and unnecessary noise * define other navigational mechanisms to ensure web pages and application views can be reached using the following methods: * search functionalities that support navigating to specific parts of the site * site maps to provide an overview of the entire website -* balance the use of navigational mechanisms to avoid distractions and unnecessary noise +* assess the amount of navigational mechanisms in use, to avoid distractions and unnecessary noise #### Teaching Ideas for Topic @@ -202,7 +203,7 @@ Students should be able to: * text and visual cues in the navigation menu to indicate the current page * descriptive page headings * breadcrumb trails -* balance the use of location mechanisms to avoid distractions and unnecessary noise +* assess the amount of location mechanisms in use, to avoid distractions and unnecessary noise * identify related requirements for developers to apply semantics to page titles, headings, non-visual cues, and breadcrumb trails ### Teaching Ideas From 5efa71cb23444f7e6bdcc8da4af8c82b57d7fa3c Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 18 Aug 2021 12:06:18 +0200 Subject: [PATCH 222/416] Updating modules and topics --- .../flexible-color-layout-and-design.md | 6 ++--- content/designer/images-and-graphics.md | 4 ++-- content/designer/information-design.md | 22 ++++++++++++------- content/designer/multimedia-and-animations.md | 3 +++ 4 files changed, 22 insertions(+), 13 deletions(-) diff --git a/content/designer/flexible-color-layout-and-design.md b/content/designer/flexible-color-layout-and-design.md index d23fda7b0..31b0b8917 100644 --- a/content/designer/flexible-color-layout-and-design.md +++ b/content/designer/flexible-color-layout-and-design.md @@ -115,7 +115,7 @@ Describe how some people rely on color to understand and distinguish content. Ex Students should be able to: * explain how appropriate use of color enables people with disabilities to read, understand, and distinguish user interface components -* determine if text, images of text, and controls have sufficient color contrast based on the contrast ratios +* determine if text, images of text, and controls have sufficient color contrast based on the accepted contrast ratios * design text and images of text that have a contrast ratio of at least 4.5:1 with respect to their background * design large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background * design components and graphics that have a contrast ratio of at least 3:1 with respect to their background @@ -164,9 +164,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Demonstrate the use of styles to distinguish links, buttons, form labels and instructions, from regular text. Explain how people rely on font types, font sizes, spacing, and color to distinguish components. +* Demonstrate the use of styles to distinguish links, buttons, form labels and instructions, from plain text. Explain how people rely on font types, font sizes, spacing, and color to distinguish components. * Show examples of usable font sizes and explain how they support readability. Contrast previous examples with fonts that are not as easy to read. Emphasize that several user groups rely on customizable fonts to be able to read and understand content properly. -* Show examples of different page layouts with and without adequate spacing. Explain how spacing allows for better readability of content and for better identification of the different parts of the user interface. +* Show examples of different page layouts with and without appropriate spacing. Explain how spacing allows for better readability of content and for better identification of the different parts of the user interface. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index eecb39dab..1d1167944 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -181,13 +181,13 @@ Explain that coordination among different team members is required to assess the Students should be able to: * use appropriate contrast ratios for complex images -* assess the use of complex images versus other ways to present the same information, such as tables, simpler images, and regular text +* assess the use of complex images versus other ways to present the same information, such as tables, simpler images, and plain text * determine if and how complex images are operated using input devices, including mouse, keyboard, voice, and touch * consider placement and spacing for alternatives to complex images * design clear and consistent identification mechanisms for complex image descriptions, including appropriate headings and expandable and collapsible components * design user experiences for complex images, including how to get to the image descriptions, what the content of the description should look like, and if the descriptions could ultimately replace the image itself * identify related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, such as diagrams, charts, maps and infographics -* identify related requirements for content authors to break down complex images into smaller and more manageable pieces, for example simpler images, tables, and regular text +* identify related requirements for content authors to break down complex images into smaller and more manageable pieces, for example simpler images, tables, and plain text #### Teaching Ideas for Topic diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 68a0eb819..0072abe15 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -31,12 +31,14 @@ Courses based on this module should: Students should be able to: -* describe approaches to break down different types of content into smaller and more manageable pieces, including identifying: +* describe approaches to break down different types of content into smaller and more manageable pieces by using: * headings, pages, and chapter markers * lists, simpler tables, and plain text to convey information presented in complex tables * groups of form controls that share a common purpose * filters to display smaller data subsets from a given large data set -* describe the use of labels and instructions to make information in forms more understandable +* describe the use of visual and non-visual cues to make information in multi-step processes more understandable +* describe how to communicate the structure of multi-page articles or processes visually and non-visually +* describe how to provide information about the total number of items and about the current item in a multi-step form or process visually and non-visually * identify related requirements for developers to programmatically associate headings, table header cells and data cells, as well as form labels and instructions to their corresponding control {% include excol.html type="all" %} @@ -97,8 +99,6 @@ Topics to achieve the learning outcomes: Discuss ways to split large amounts of text into smaller pieces. For example, using headings and their corresponding rank levels, pages to split the contents into logical units, and chapter markers to indicate chapters in digital publications. -Discuss the use of visual and non-visual cues (including labels, instructions, and graphical representations) to help people understand information presented in text. Explain that defining how to present these visual cues is a responsibility of the designer, whereas providing such cues is a responsibility shared with the content author. - #### Learning Outcomes for Topic Students should be able to: @@ -108,14 +108,14 @@ Students should be able to: * sidebars and other page regions * pages * chapter markers (in digital publications) -* create visual representations that accompany the text, to make the information easier to understand; for example a diagram representation of the process described in the text” -* assess the use of professional terms, idioms, and jargon, and provide definitions for such phrases and words where appropriate -* assess the use of acronyms and abbreviations and provide their expanded form or meaning +* create graphical representations that accompany the text, to make the information easier to understand; for example a diagram representation of the process described in the text” +* consider the provision of definitions for professional terms, idioms, and jargon +* consider the provision of expanded form or meaning of acronyms and abbreviations * identify related requirements for developers to make language programmatically determined * identify related requirements for content authors to provide clear language and easy-to-read texts whenever possible #### Teaching Ideas for Topic - + Optional ideas to teach the learning outcomes: * Show examples of online articles and forms. Discuss how these are divided into manageable pieces so that they are easier to understand and to navigate. For example, by using headings and their corresponding rank levels to indicate the different chapters, sections, and subsections of content. @@ -139,6 +139,8 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} +Discuss the use of visual and non-visual cues (including labels, instructions, and graphical representations) to help people understand information presented in multi-step forms and processes. Explain that defining how to present these visual cues is a responsibility of the designer, whereas providing such cues is a responsibility shared with the content author. + Show examples of how different groups of people interact with large amounts of selectable data, such as a list of countries. Explain that some people prefer filtering out data into smaller pieces to better handle data, some others prefer to type the first letters of their desire option to select data more efficiently. #### Learning Outcomes for Topic @@ -146,6 +148,9 @@ Show examples of how different groups of people interact with large amounts of s Students should be able to: * define related form controls, such as those collecting personal information, payment methods, and consent to legal conditions +* describe the use of visual and non-visual cues, including labels, instructions, and graphical representations to make information in multi-step processes more understandable +* describe how to communicate the structure of multi-page articles or processes visually and non-visually +* describe how to provide information about the total number of items and about the current item in a multi-step form or process visually and non-visually * describe the poor user experience inherent to long data lists and grids and identify different approaches to address this, for example by providing search boxes and mechanisms to filter data, or by splitting larger data sets into smaller ones * define mechanisms to customize the number of shown results after a search query, for example the number of products per page @@ -181,6 +186,7 @@ Students should be able to: * identify different ways of presenting tabular information, such as using several lists, or splitting a complex table into several simpler ones * define table header cells and data cells, and provide clear and distinguishable styles for each * create designs with graphical representations of complex tables that help users more easily understand its purpose and meaning +* assess the use of complex tables based on the type of information provided and on other simpler ways to provide such information, including simpler tables, graphical representations, and plain text * identify related requirements for developers to programmatically associate table descriptions, data cells, and header cells with their corresponding table * identify related requirements for content authors to provide table descriptions where appropriate diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 6c91756cb..71c04ebbd 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -167,6 +167,9 @@ Students should be able to: * design mechanisms for pausing, stopping, or hiding any content that blinks, moves, or auto-updates, for example animations, carousels, and decorative gimmicks * create designs that avoid flashing entirely or only flash below the acceptable thresholds +* create designs with enough time for users to read parts of moving content, for example different slides in a carousel +* define visual and non-visual identification of animated content and its different parts, for example identifying a carousel region and its different slides +* define focus order within animated contents, including how to move to different parts of the carousel and how to get to the carousel controls * design mechanisms that support disabling motion animation triggered by interaction, such as additional animations when scrolling * design mechanisms for stopping or controlling the volume of any audio that plays automatically for more than 3 seconds From e92fd1942ba701fd04a3bc68cb2526193faa01d9 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 18 Aug 2021 16:55:32 +0200 Subject: [PATCH 223/416] Qualifying information in LOs related to labels and instructions --- content/designer/information-design.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 0072abe15..a9d7d6a0f 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -148,9 +148,10 @@ Show examples of how different groups of people interact with large amounts of s Students should be able to: * define related form controls, such as those collecting personal information, payment methods, and consent to legal conditions -* describe the use of visual and non-visual cues, including labels, instructions, and graphical representations to make information in multi-step processes more understandable -* describe how to communicate the structure of multi-page articles or processes visually and non-visually -* describe how to provide information about the total number of items and about the current item in a multi-step form or process visually and non-visually +* define clear and distinguishable names for forms and form controls, including visual and programmatic labels +* describe the use of visual and non-visual cues, including labels, instructions, and graphical representations to make information in multi-step processes more understandable +* describe how to communicate the structure of multi-step forms and processes visually and non-visually +* describe how to provide information about the total number of items and about the current item in multi-step forms and processes visually and non-visually * describe the poor user experience inherent to long data lists and grids and identify different approaches to address this, for example by providing search boxes and mechanisms to filter data, or by splitting larger data sets into smaller ones * define mechanisms to customize the number of shown results after a search query, for example the number of products per page From f6b9a82b3ce54cdb11999260d1d235dec154be99 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 19 Aug 2021 16:56:18 +0200 Subject: [PATCH 224/416] Fixing typo --- content/designer/images-and-graphics.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 1d1167944..d70ade957 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -185,7 +185,7 @@ Students should be able to: * determine if and how complex images are operated using input devices, including mouse, keyboard, voice, and touch * consider placement and spacing for alternatives to complex images * design clear and consistent identification mechanisms for complex image descriptions, including appropriate headings and expandable and collapsible components -* design user experiences for complex images, including how to get to the image descriptions, what the content of the description should look like, and if the descriptions could ultimately replace the image itself +* design user experiences for complex images, including how to get to the image descriptions, how the content of the description should look like, and if the descriptions could ultimately replace the image itself * identify related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, such as diagrams, charts, maps and infographics * identify related requirements for content authors to break down complex images into smaller and more manageable pieces, for example simpler images, tables, and plain text From c51584f45cea1faba49df51a671b8f64614ab403 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 20 Aug 2021 10:11:24 +0200 Subject: [PATCH 225/416] Wording suggestions --- content/designer/flexible-color-layout-and-design.md | 2 +- content/designer/images-and-graphics.md | 4 ++-- content/designer/information-design.md | 5 ++++- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/content/designer/flexible-color-layout-and-design.md b/content/designer/flexible-color-layout-and-design.md index 31b0b8917..973839fcb 100644 --- a/content/designer/flexible-color-layout-and-design.md +++ b/content/designer/flexible-color-layout-and-design.md @@ -115,7 +115,7 @@ Describe how some people rely on color to understand and distinguish content. Ex Students should be able to: * explain how appropriate use of color enables people with disabilities to read, understand, and distinguish user interface components -* determine if text, images of text, and controls have sufficient color contrast based on the accepted contrast ratios +* determine if text, images of text, and controls have sufficient color contrast * design text and images of text that have a contrast ratio of at least 4.5:1 with respect to their background * design large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background * design components and graphics that have a contrast ratio of at least 3:1 with respect to their background diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index d70ade957..a68fdfeef 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -181,7 +181,7 @@ Explain that coordination among different team members is required to assess the Students should be able to: * use appropriate contrast ratios for complex images -* assess the use of complex images versus other ways to present the same information, such as tables, simpler images, and plain text +* assess the use of complex images versus other ways to present the information; for example using tables, simpler images, and plain text * determine if and how complex images are operated using input devices, including mouse, keyboard, voice, and touch * consider placement and spacing for alternatives to complex images * design clear and consistent identification mechanisms for complex image descriptions, including appropriate headings and expandable and collapsible components @@ -219,7 +219,7 @@ Students should be able to: * describe the differences between decorative and non-decorative images depending on the type of information conveyed by the image and the overall context * describe different ways to present information contained in an image in the surrounding content so that the image can be considered decorative -* assess the amount of decorative images in use based on other images in the content and on the overall context +* assess the potential distraction and cognitive overload from using too many decorative images * explain how the overuse of decorative images could become distracting for some users and slow down loading times and interaction for other users * identify related requirements for developers to code decorative images so that they are skipped by assistive technologies diff --git a/content/designer/information-design.md b/content/designer/information-design.md index a9d7d6a0f..ffc85e89e 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -187,7 +187,10 @@ Students should be able to: * identify different ways of presenting tabular information, such as using several lists, or splitting a complex table into several simpler ones * define table header cells and data cells, and provide clear and distinguishable styles for each * create designs with graphical representations of complex tables that help users more easily understand its purpose and meaning -* assess the use of complex tables based on the type of information provided and on other simpler ways to provide such information, including simpler tables, graphical representations, and plain text +* assess the use of complex tables versus simpler ways to provide the information, for example using: + * simpler tables + * charts, diagrams, and other graphical representations + * plain text * identify related requirements for developers to programmatically associate table descriptions, data cells, and header cells with their corresponding table * identify related requirements for content authors to provide table descriptions where appropriate From 752ee3fe103714314e15aa0597e54c797f0476b2 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 20 Aug 2021 16:42:49 +0200 Subject: [PATCH 226/416] Updates to modules and topics --- .../flexible-color-layout-and-design.md | 2 +- .../forms-interactions-and-feedback.md | 8 ++++---- content/designer/images-and-graphics.md | 4 ++-- content/designer/information-design.md | 19 ++++++++++--------- 4 files changed, 17 insertions(+), 16 deletions(-) diff --git a/content/designer/flexible-color-layout-and-design.md b/content/designer/flexible-color-layout-and-design.md index 973839fcb..cc08b1acb 100644 --- a/content/designer/flexible-color-layout-and-design.md +++ b/content/designer/flexible-color-layout-and-design.md @@ -37,7 +37,7 @@ Courses based on this module should: Students should be able to: * explain how people with disabilities rely on designs that adapt to different colors, layouts, spacing, and positions -* determine if text, images of text, and controls have sufficient color contrast +* determine sufficient color contrast for text, images of text, and controls * design layouts with sufficient color contrast for text, images of text, and controls * design clear and distinguishable focus indicators, for example using borders, color, and highlighting * design layouts that adapt to different font sizes and spacing set by the user in browser and operating system settings diff --git a/content/designer/forms-interactions-and-feedback.md b/content/designer/forms-interactions-and-feedback.md index 00516e151..2c69f0766 100644 --- a/content/designer/forms-interactions-and-feedback.md +++ b/content/designer/forms-interactions-and-feedback.md @@ -24,8 +24,8 @@ navigation: Courses based on this module should: -* explain strategies that people with disabilities use to interact with components that accept user input, such as form controls, buttons, links, and widgets -* describe accessibility requirements related to interactions, instructions, semantics, styling and other visual cues, notifications, and feedback +* explain strategies that people with disabilities use to interact with components that accept user input, such as forms, buttons, links, and widgets +* describe accessibility requirements related to interactions, instructions, semantics, cues, notifications, and feedback ## Learning Outcomes for Module @@ -34,8 +34,8 @@ Students should be able to: * explain strategies that people with disabilities use to interact with components that accept user input * design user experiences for different input mechanisms, including mouse, touch, keyboard, and speech * define keyboard interactions and meaningful sequences inside complex widgets, including buttons, carousels, sliders, tabs, and treeviews -* create designs with information about custom keyboard shortcuts for complex widgets and applications -* define clear and distinguishable ways to identify components that accept user input, including through naming and placement +* assess the use of custom keyboard shortcuts for complex widgets and applications and provide information about their purpose and scope +* define clear and distinguishable ways to identify form fields and other components that accept user input, including through naming and placement * define mechanisms to help understand the context, information, and functionality of user interface components, including through textual instructions, color, and other visual cues * define meaningful and descriptive notifications about imminent time limits, steps, errors, suggestions for correction, success messages, status changes, and feedback from user input * identify related requirements for developers to provide the necessary semantics for components that accept user input, error messages, notifications, and other feedback diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index a68fdfeef..a459ffd26 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -102,7 +102,7 @@ Functional images convey functionality of a user interface component. For exampl Students should be able to: -* define text alternatives for functional images by using the following mechanisms: +* define text alternatives for functional images using the following mechanisms: * text alternatives for images * combinations of text alternatives of images and adjacent text inside components * adjacent text inside components to understand its function @@ -139,7 +139,7 @@ Explain that providing text alternatives for informative images is a responsibil Students should be able to: -* define text alternatives that present equivalent information as that contained in informative images, by using the following mechanisms: +* define text alternatives that present equivalent information as that contained in informative images using the following mechanisms: * boilerplate descriptions that would then be completed and maintained through the development and authoring phases * adjacent textual information to complement images and icons, for example in a news headline * text alternatives that describe the information conveyed by images diff --git a/content/designer/information-design.md b/content/designer/information-design.md index ffc85e89e..e04464c94 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -31,14 +31,15 @@ Courses based on this module should: Students should be able to: -* describe approaches to break down different types of content into smaller and more manageable pieces by using: +* describe approaches to break down different types of content into smaller and more manageable pieces for example using: * headings, pages, and chapter markers * lists, simpler tables, and plain text to convey information presented in complex tables * groups of form controls that share a common purpose * filters to display smaller data subsets from a given large data set -* describe the use of visual and non-visual cues to make information in multi-step processes more understandable +* describe the use of visual and non-visual cues to make information in multi-step processes more understandable * describe how to communicate the structure of multi-page articles or processes visually and non-visually * describe how to provide information about the total number of items and about the current item in a multi-step form or process visually and non-visually +* assess the use of tables versus other ways to provide the information * identify related requirements for developers to programmatically associate headings, table header cells and data cells, as well as form labels and instructions to their corresponding control {% include excol.html type="all" %} @@ -109,8 +110,8 @@ Students should be able to: * pages * chapter markers (in digital publications) * create graphical representations that accompany the text, to make the information easier to understand; for example a diagram representation of the process described in the text” -* consider the provision of definitions for professional terms, idioms, and jargon -* consider the provision of expanded form or meaning of acronyms and abbreviations +* assess the use of definitions for professional terms, idioms, and jargon versus the use of such terms alone +* assess the use of expanded forms or meaning for acronyms and abbreviations versus using such acronyms and abbreviations alone * identify related requirements for developers to make language programmatically determined * identify related requirements for content authors to provide clear language and easy-to-read texts whenever possible @@ -139,7 +140,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Discuss the use of visual and non-visual cues (including labels, instructions, and graphical representations) to help people understand information presented in multi-step forms and processes. Explain that defining how to present these visual cues is a responsibility of the designer, whereas providing such cues is a responsibility shared with the content author. +Discuss the use of visual and non-visual cues (including labels, instructions, and graphical representations) to help people understand information presented in multi-step forms and processes. Explain that defining how to present these cues is a responsibility of the designer, whereas providing such cues is a responsibility shared with the content author. Show examples of how different groups of people interact with large amounts of selectable data, such as a list of countries. Explain that some people prefer filtering out data into smaller pieces to better handle data, some others prefer to type the first letters of their desire option to select data more efficiently. @@ -147,12 +148,12 @@ Show examples of how different groups of people interact with large amounts of s Students should be able to: -* define related form controls, such as those collecting personal information, payment methods, and consent to legal conditions * define clear and distinguishable names for forms and form controls, including visual and programmatic labels -* describe the use of visual and non-visual cues, including labels, instructions, and graphical representations to make information in multi-step processes more understandable -* describe how to communicate the structure of multi-step forms and processes visually and non-visually -* describe how to provide information about the total number of items and about the current item in multi-step forms and processes visually and non-visually +* define visual and non-visual cues, including labels, instructions, and graphical representations to make information in multi-step processes more understandable +* define related form controls, such as those collecting personal information, payment methods, and consent to legal conditions and communicate such relationships visually and non-visually +* define visual and non-visual mechanisms to communicate the total number of steps and the current step in multi-step forms and processes * describe the poor user experience inherent to long data lists and grids and identify different approaches to address this, for example by providing search boxes and mechanisms to filter data, or by splitting larger data sets into smaller ones + * define mechanisms to customize the number of shown results after a search query, for example the number of products per page #### Teaching Ideas for Topic From 238f27742072696d5b5429375485c123524391f5 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 20 Aug 2021 18:05:30 +0200 Subject: [PATCH 227/416] Fixes [overall] module numbering #385 --- .../designer/forms-interactions-and-feedback.md | 8 +++++++- content/designer/images-and-graphics.md | 16 ++++++++++++---- content/designer/information-design.md | 9 +++++++-- content/designer/multimedia-and-animations.md | 13 +++++++++---- content/designer/navigation.md | 10 +++++++++- 5 files changed, 44 insertions(+), 12 deletions(-) diff --git a/content/designer/forms-interactions-and-feedback.md b/content/designer/forms-interactions-and-feedback.md index 2c69f0766..26a3f5e75 100644 --- a/content/designer/forms-interactions-and-feedback.md +++ b/content/designer/forms-interactions-and-feedback.md @@ -13,7 +13,12 @@ changelog: /curricula/changelog/ footer: >

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

-

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

parent_in_h1: + - ref: /curricula/designer-modules/ + name: nav_title + - ref: /curricula/ + name: "Curricula on Web Accessibility" + navigation: previous: /curricula/designer-modules/multimedia-and-animations/ next: @@ -97,6 +102,7 @@ Skills required for this module: * [WCAG Success Criterion 4.1.3 Status Messages](https://www.w3.org/WAI/WCAG21/quickref/#status-messages) * In-depth knowledge of: * [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) + * Prior [Designer Modules](/curricula/designer-modules/) * Visual Design * Prototyping * Responsive Design diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index a459ffd26..049ef2474 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -14,6 +14,11 @@ footer: >

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+parent_in_h1: + - ref: /curricula/designer-modules/ + name: nav_title + - ref: /curricula/ + name: "Curricula on Web Accessibility" navigation: previous: /curricula/designer-modules/information-design/ next: /curricula/designer-modules/multimedia-and-animations/ @@ -54,9 +59,9 @@ Skills required for this module: {% include excol.html type="middle" %} * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) -* [Module 1: #foundation-prerequisitesFlexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) -* [Module 3: Navigation](/curricula/designer-modules/navigation/) -* [Module 2: Information Design](/curricula/designer-modules/information-design/) +* [Designer Module 1: Flexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) +* [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) +* [Designer Module 3: Navigation](/curricula/designer-modules/navigation/) * Basic knowledge of: * Visual Design * Prototyping @@ -77,6 +82,9 @@ Skills required for this module: * [WCAG Success Criterion 1.4.9 Images of Text (No Exception)](https://www.w3.org/WAI/WCAG21/quickref/#images-of-text-no-exception) * In-depth knowledge of: * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) + * [Designer Module 1: Flexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) + * [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) + * [Designer Module 3: Navigation](/curricula/designer-modules/navigation/) * Visual Design * Prototyping * Responsive Design @@ -211,7 +219,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Decorative images are used for ornamental purposes and convey no information or function. Build on [Module 1: Flexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) to explain accessibility requirements such as use of color, ability to resize, and flexibility in the context of decorative images. Decorative images require empty text alternatives, so that they can be ignored by assistive technologies, and reduce noise. Explain that determining if an image is decorative is a responsibility shared with the content author. +Decorative images are used for ornamental purposes and convey no information or function. Build on [Designer Module 1: Flexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) to explain accessibility requirements such as use of color, ability to resize, and flexibility in the context of decorative images. Decorative images require empty text alternatives, so that they can be ignored by assistive technologies, and reduce noise. Explain that determining if an image is decorative is a responsibility shared with the content author. #### Learning Outcomes for Topic diff --git a/content/designer/information-design.md b/content/designer/information-design.md index e04464c94..79bf6cbf5 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -14,6 +14,11 @@ footer: >

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+parent_in_h1: + - ref: /curricula/designer-modules/ + name: nav_title + - ref: /curricula/ + name: "Curricula on Web Accessibility" navigation: previous: /curricula/designer-modules/navigation/ next: /curricula/designer-modules/images-and-graphics/ @@ -55,8 +60,7 @@ Skills required for this module: {% include excol.html type="middle" %} * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) -* [Module 1: Flexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) -* [Module 3: Navigation](/curricula/designer-modules/navigation/) +* [Designer Module 1: Flexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) * Basic knowledge of: * Visual Design * Prototyping @@ -81,6 +85,7 @@ Skills required for this module: * [WCAG Success Criterion 3.3.2 Labels or Instructions](https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions) * In-depth knowledge of: * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) + * [Designer Module 1: Flexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) * Visual Design * Prototyping * Responsive Design diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 71c04ebbd..66d187336 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -63,10 +63,10 @@ Skills required for this module: {% include excol.html type="middle" %} * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) -* [Module 1: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design/) -* [Module 3: Navigation](/curricula/designer-modules/navigation/) -* [Module 2: Information Design](/curricula/designer-modules/information-design/) -* [Module 4: Images and Graphics](/curricula/designer-modules/images-and-graphics) +* [Designer Module 1: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design/) +* [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) +* [Designer Module 3: Navigation](/curricula/designer-modules/navigation/) +* [Designer Module 4: Images and Graphics](/curricula/designer-modules/images-and-graphics) * Basic knowledge of: * Visual Design * Prototyping @@ -95,6 +95,10 @@ Skills required for this module: * [WCAG Success Criterion 3.2.5 Change on Request](https://www.w3.org/WAI/WCAG21/quickref/#change-on-request) * In-depth knowledge of: * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) + * [Designer Module 1: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design/) + * [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) + * [Designer Module 3: Navigation](/curricula/designer-modules/navigation/) + * [Designer Module 4: Images and Graphics](/curricula/designer-modules/images-and-graphics) * Visual Design * Prototyping * Responsive Design @@ -170,6 +174,7 @@ Students should be able to: * create designs with enough time for users to read parts of moving content, for example different slides in a carousel * define visual and non-visual identification of animated content and its different parts, for example identifying a carousel region and its different slides * define focus order within animated contents, including how to move to different parts of the carousel and how to get to the carousel controls + * design mechanisms that support disabling motion animation triggered by interaction, such as additional animations when scrolling * design mechanisms for stopping or controlling the volume of any audio that plays automatically for more than 3 seconds diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 1fb1c29cf..e043112b3 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -14,6 +14,11 @@ footer: >

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+parent_in_h1: + - ref: /curricula/designer-modules/ + name: nav_title + - ref: /curricula/ + name: "Curricula on Web Accessibility" navigation: previous: /curricula/designer-modules/flexible-color-layout-and-design/ next: /curricula/designer-modules/information-design/ @@ -57,7 +62,8 @@ Skills required for this module: {% include excol.html type="middle" %} * [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) -* [Designer Module 1: #foundation-prerequisitesFlexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) +* [Designer Module 1: Flexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) +* [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) * Basic knowledge of: * Visual Design * Prototyping @@ -84,6 +90,8 @@ Skills required for this module: * [WCAG 2 Success Criterion 3.2.3 Consistent Navigation](https://www.w3.org/WAI/WCAG21/quickref/#consistent-navigation) * In-depth knowledge of: * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) + * [Designer Module 1: Flexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) + * [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) * Visual Design * Prototyping * Responsive Design From 286700c4ad6c2e76b420bfe25ab9b1ec1d5ccead Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 23 Aug 2021 14:10:38 +0200 Subject: [PATCH 228/416] Updates to modules and topics --- content/designer/designer-modules.md | 2 +- .../flexible-color-layout-and-design.md | 29 ++++++++++--------- content/designer/images-and-graphics.md | 6 ++-- content/designer/information-design.md | 4 +-- content/designer/navigation.md | 1 + 5 files changed, 22 insertions(+), 20 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 4b57b1073..123b1bd9e 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -65,7 +65,7 @@ The designer modules are designed for students who have achieved the learning ou - [Module 1: Flexible Color, Layout, and Design (TBD)](/curricula/designer-modules/flexible-layout-and-design) - [Topic: Color (TBD)](/curricula/designer-modules/flexible-color-layout-and-design/#topic-use-of-color) - [Topic: Styles](/curricula/designer-modules/flexible-color-layout-and-design/#topic-styles) - - [Topic: Flexible Design](/curricula/designer-modules/flexible-color-layout-and-design/#topic-flexible-design) + - [Topic: Adaptability](/curricula/designer-modules/flexible-color-layout-and-design/#topic-adaptability) - [Module 2: Information Design](/curricula/designer-modules/information-design/) - [Topic: Text](/curricula/designer-modules/information-design/#topic-textual-information) - [Topic: Landmarks [TBD]]() diff --git a/content/designer/flexible-color-layout-and-design.md b/content/designer/flexible-color-layout-and-design.md index cc08b1acb..5dd3eac6a 100644 --- a/content/designer/flexible-color-layout-and-design.md +++ b/content/designer/flexible-color-layout-and-design.md @@ -30,7 +30,7 @@ navigation: Courses based on this module should: * explain how people with disabilities rely on designs that adapt to different screen sizes, configurations, and style sheets -* explain accessibility requirements for interfaces that can have customized colors, font size, font type, and spacing between components +* explain accessibility requirements that relate to use of color, as well as to adaptable font sizes, font types, and spacing ## Learning Outcomes for Module @@ -43,7 +43,8 @@ Students should be able to: * design layouts that adapt to different font sizes and spacing set by the user in browser and operating system settings * design layouts that adapt to different screen sizes, configurations, and user style sheets * use headings, landmarks, and spacing to group related content -* design layouts using a combination of text cues, patterns, and icons to convey information +* use a combination of text cues, patterns, and icons to convey information +* assess the potential distraction and cognitive overload from using too many design elements on a single page, in particular interactive widgets, images, and moving content" * identify related requirements for developers to apply the necessary semantics to interface components {% include excol.html type="all" %} @@ -106,7 +107,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Explain how sufficient color contrast (contrast ratios in WCAG) are essential for people with low vision to perceive, distinguish, and understand content. +Explain how sufficient color contrast (contrast ratios in WCAG) are essential for people with disabilities to perceive, distinguish, and understand content. Describe how some people rely on color to understand and distinguish content. Explain that some people cannot perceive color well or at all. Discuss different ways to supplement information that is presented using color, such as using shapes and icons. @@ -114,7 +115,7 @@ Describe how some people rely on color to understand and distinguish content. Ex Students should be able to: -* explain how appropriate use of color enables people with disabilities to read, understand, and distinguish user interface components +* explain how appropriate use of color enables people with disabilities to read, understand, and distinguish components * determine if text, images of text, and controls have sufficient color contrast * design text and images of text that have a contrast ratio of at least 4.5:1 with respect to their background * design large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background @@ -135,8 +136,8 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Short Answer Questions — Give students a set of user interface components and ask them what the contrast ratio should be. Assess how students understand and distinguish contrast ratios for different user interface components. -* Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, user interface components, and graphics. Assess how students understand and apply contrast ratios based on the different user interface components that they are designing. +* Short Answer Questions — Give students a set of components and ask them what the contrast ratio should be. Assess how students understand and distinguish contrast ratios for different components. +* Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, components, and graphics. Assess how students understand and apply contrast ratios based on the different components that they are designing. * Practical — Discuss with students examples of information presented using color and ask them to supplement that information using other visual cues. Assess how students use shapes and icons to supplement information presented using color distinguishable. {% include excol.html type="end" %} @@ -212,22 +213,22 @@ Optional ideas to assess knowledge: {% include excol.html type="start" %} -### Topic: Flexible Design +### Topic: Adaptability {% include excol.html type="middle" %} -Explain how people with disabilities use different screen sizes, screen configurations, and style sheets to identify, distinguish, and process content. +Explain how people with disabilities rely on designs that adapt to different screen sizes, screen configurations, and style sheets to identify, distinguish, and process content. #### Learning Outcomes for Topic Students should be able to: -* design layouts that support text resizing without loss of content and functionality -* design layouts that support zooming and enlarging text in different viewport sizes and through multiple breakpoints -* design layouts that support content view and operation in both portrait and landscape orientations -* design layouts with target sizes and spaces to support tapping by people with mobility impairments and people using different input methods -* design layouts that support customizing line height, as well as spacing between paragraphs, words, and letters -* design appropriate focus order based on different viewports, screen sizes, and breakpoints +* design layouts that can have their text resized without loss of content and functionality +* design layouts that can have their text zoomed and enlarged using different viewport sizes and through multiple breakpoints +* design layouts that adapt their content view and operation to portrait and landscape orientations +* design layouts that can have their target sizess customized for different input methods, sizes, and spacing +* design layouts that can have line height, as well as spacing between paragraphs, words, and letters customized by users +* design meaningful focus orders that adapt to different viewports, screen sizes, and breakpoints #### Teaching Ideas for Topic diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 049ef2474..f5132f829 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -42,7 +42,7 @@ Students should be able to: * design consistent imagery to help users recognize the purpose of icons, thumbnails, and other graphical components * explain the issues associated with perception, interpretation, and rendering of images of text * explain how to avoid images of text by using technologies that achieve the desired visual presentation wherever possible -* cooperate with developers and content authors to provide the appropriate alternative for images and graphics based on the image purpose +* assess the use of images versus other ways to provide the information, including tables and plain text * identify related requirements for developers to code images and text alternatives appropriately * identify related requirements for content authors to provide appropriate descriptions for images, such as charts, diagrams, and other complex graphics @@ -104,7 +104,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Functional images convey functionality of a user interface component. For example search, print, and save functionality. Explain requirements related to color and contrast to help users distinguish these images from other components. Show examples of graphical links and buttons as well as logos. Discuss with students how they would describe each of those examples. +Functional images convey functionality of a component. For example search, print, and save functionality. Explain requirements related to color and contrast to help users distinguish these images from other components. Show examples of graphical links and buttons as well as logos. Discuss with students how they would describe each of those examples. #### Learning Outcomes for Topic @@ -151,7 +151,7 @@ Students should be able to: * boilerplate descriptions that would then be completed and maintained through the development and authoring phases * adjacent textual information to complement images and icons, for example in a news headline * text alternatives that describe the information conveyed by images -* apply the appropriate contrast ratio to images that are necessary to understand the contents +* apply the appropriate contrast ratio to images that are necessary to understand the content * use styled text instead of images of text when the technology in use can provide the desired visual presentation * define alternatives to CAPTCHA and biometrics, for example by providing visual, auditory, and logical CAPTCHA * explain the issues associated with relying only on one form of biometrics and CAPTCHA, and describe alternative approaches for authentication diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 79bf6cbf5..22c625821 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -43,8 +43,8 @@ Students should be able to: * filters to display smaller data subsets from a given large data set * describe the use of visual and non-visual cues to make information in multi-step processes more understandable * describe how to communicate the structure of multi-page articles or processes visually and non-visually -* describe how to provide information about the total number of items and about the current item in a multi-step form or process visually and non-visually -* assess the use of tables versus other ways to provide the information +* describe how to provide information about the total number of items and about the current item in a multi-step process visually and non-visually +* assess the use of different mechanisms to convey the information, including text, tables, grouping, and graphical representation depending on user needs * identify related requirements for developers to programmatically associate headings, table header cells and data cells, as well as form labels and instructions to their corresponding control {% include excol.html type="all" %} diff --git a/content/designer/navigation.md b/content/designer/navigation.md index e043112b3..7e209a121 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -44,6 +44,7 @@ Students should be able to: * define mechanisms to identify blocks of repeated content * cooperate with developers to define and implement mechanisms that bypass blocks of repeated content * define mechanisms to help users to locate specific web pages within sets of web pages, for example by providing breadcrumb trails, site maps, and descriptive page titles +* assess the use of navigation mechanisms depending on user needs * identify related requirements for developers to implement: * interactions for navigational mechanisms, including keyboard, mouse, touch, and voice * clear and descriptive names for navigational mechanisms From 2982aa50e98b26495acd5119b642f987fd94338b Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 24 Aug 2021 09:36:54 +0200 Subject: [PATCH 229/416] Module 1 name change --- _data/navigation.yml | 4 ++-- content/designer/designer-modules.md | 11 ++++++----- content/designer/flexible-color-layout-and-design.md | 10 +++++----- content/designer/images-and-graphics.md | 6 +++--- content/designer/information-design.md | 6 +++--- content/designer/navigation.md | 6 +++--- 6 files changed, 22 insertions(+), 21 deletions(-) diff --git a/_data/navigation.yml b/_data/navigation.yml index 51f9815b3..180d9e34a 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -261,8 +261,8 @@ - name: Designer Modules url: "/curricula/designer-modules/" pages: - - name: Flexible Color, Layout, and Design - url: "/curricula/designer-modules/flexible-color-layout-and-design/" + - name: Color and Layout + url: "/curricula/designer-modules/color-and-layout/" - name: Information Design url: "/curricula/designer-modules/information-design/" - name: Navigation diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 123b1bd9e..467f915b5 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -19,7 +19,7 @@ parent_in_h1: name: title navigation: previous: /curricula/developer-modules/rich-applications/ - next: /curricula/designer-modules/flexible-color-layout-and-design/ + next: /curricula/designer-modules/color-and-layout/ --- ## Introduction @@ -62,10 +62,11 @@ The designer modules are designed for students who have achieved the learning ou ## Designer Modules -- [Module 1: Flexible Color, Layout, and Design (TBD)](/curricula/designer-modules/flexible-layout-and-design) - - [Topic: Color (TBD)](/curricula/designer-modules/flexible-color-layout-and-design/#topic-use-of-color) - - [Topic: Styles](/curricula/designer-modules/flexible-color-layout-and-design/#topic-styles) - - [Topic: Adaptability](/curricula/designer-modules/flexible-color-layout-and-design/#topic-adaptability) +- [Module 1: Color and Layout (TBD)](/curricula/designer-modules/flexible-layout-and-design) + - [Topic: Color (TBD)](/curricula/designer-modules/color-and-layout/#topic-use-of-color) + - [Topic: Landmarks and Cues](/curricula/designer-modules/#topic-landmarks-and-cues) + - [Topic: Styles](/curricula/designer-modules/color-and-layout/#topic-styles) + - [Topic: Adaptability](/curricula/designer-modules/color-and-layout/#topic-adaptability) - [Module 2: Information Design](/curricula/designer-modules/information-design/) - [Topic: Text](/curricula/designer-modules/information-design/#topic-textual-information) - [Topic: Landmarks [TBD]]() diff --git a/content/designer/flexible-color-layout-and-design.md b/content/designer/flexible-color-layout-and-design.md index 5dd3eac6a..04a9821f7 100644 --- a/content/designer/flexible-color-layout-and-design.md +++ b/content/designer/flexible-color-layout-and-design.md @@ -1,12 +1,12 @@ --- -title: "[Draft] Module 1: Flexible Color, Layout, and Design" -nav_title: "Flexible Color, Layout, and Design" -permalink: /curricula/designer-modules/flexible-color-layout-and-design/ -ref: /curricula/designer-modules/flexible-color-layout-and-design/ +title: "[Draft] Module 1: Color and Layout" +nav_title: "Color and Layout" +permalink: /curricula/designer-modules/color-and-layout/ +ref: /curricula/designer-modules/color-and-layout/ lang: en github: repository: w3c/wai-curricula - path: content/designer/flexible-color-layout-and-design.md + path: content/designer/color-and-layout.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index f5132f829..c05bd4c84 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -59,7 +59,7 @@ Skills required for this module: {% include excol.html type="middle" %} * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) -* [Designer Module 1: Flexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) +* [Designer Module 1: Color and Layout](/curricula/designer-modules/color-and-layout/) * [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) * [Designer Module 3: Navigation](/curricula/designer-modules/navigation/) * Basic knowledge of: @@ -82,7 +82,7 @@ Skills required for this module: * [WCAG Success Criterion 1.4.9 Images of Text (No Exception)](https://www.w3.org/WAI/WCAG21/quickref/#images-of-text-no-exception) * In-depth knowledge of: * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) - * [Designer Module 1: Flexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) + * [Designer Module 1: Color and Layout](/curricula/designer-modules/color-and-layout/) * [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) * [Designer Module 3: Navigation](/curricula/designer-modules/navigation/) * Visual Design @@ -219,7 +219,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Decorative images are used for ornamental purposes and convey no information or function. Build on [Designer Module 1: Flexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) to explain accessibility requirements such as use of color, ability to resize, and flexibility in the context of decorative images. Decorative images require empty text alternatives, so that they can be ignored by assistive technologies, and reduce noise. Explain that determining if an image is decorative is a responsibility shared with the content author. +Decorative images are used for ornamental purposes and convey no information or function. Build on [Designer Module 1: Color and Layout](/curricula/designer-modules/color-and-layout/) to explain accessibility requirements such as use of color, ability to resize, and flexibility in the context of decorative images. Decorative images require empty text alternatives, so that they can be ignored by assistive technologies, and reduce noise. Explain that determining if an image is decorative is a responsibility shared with the content author. #### Learning Outcomes for Topic diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 22c625821..4b3a92bdf 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -60,7 +60,7 @@ Skills required for this module: {% include excol.html type="middle" %} * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) -* [Designer Module 1: Flexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) +* [Designer Module 1: Color and Layout](/curricula/designer-modules/color-and-layout/) * Basic knowledge of: * Visual Design * Prototyping @@ -85,7 +85,7 @@ Skills required for this module: * [WCAG Success Criterion 3.3.2 Labels or Instructions](https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions) * In-depth knowledge of: * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) - * [Designer Module 1: Flexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) + * [Designer Module 1: Color and Layout](/curricula/designer-modules/color-and-layout/) * Visual Design * Prototyping * Responsive Design @@ -205,7 +205,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of different types of information presented in tables. Explain that tables are used when there is a logical, tabular relationship between the information presented, for example when displaying a list of events with their date and venue. -* Refer back to [Designer Module 1: Topic Flexible Design](/curricula/designer-modules/flexible-Color-layout-and-design/#topic-flexible-design) and explain that some users may require different ways of presenting tabular information. For example, providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. +* Refer back to [Designer Module 1: Topic Flexible Design](/curricula/designer-modules/color-and-layout/#topic-flexible-design) and explain that some users may require different ways of presenting tabular information. For example, providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. * Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells needs to be perceived both visually and programmatically. Explain that providing the styles is a designers' responsibility, whereas establishing the programmatic relationship is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 7e209a121..55f81800f 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -20,7 +20,7 @@ parent_in_h1: - ref: /curricula/ name: "Curricula on Web Accessibility" navigation: - previous: /curricula/designer-modules/flexible-color-layout-and-design/ + previous: /curricula/designer-modules/color-and-layout/ next: /curricula/designer-modules/information-design/ --- @@ -63,7 +63,7 @@ Skills required for this module: {% include excol.html type="middle" %} * [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) -* [Designer Module 1: Flexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) +* [Designer Module 1: Color and Layout](/curricula/designer-modules/color-and-layout/) * [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) * Basic knowledge of: * Visual Design @@ -91,7 +91,7 @@ Skills required for this module: * [WCAG 2 Success Criterion 3.2.3 Consistent Navigation](https://www.w3.org/WAI/WCAG21/quickref/#consistent-navigation) * In-depth knowledge of: * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) - * [Designer Module 1: Flexible Color, Layout, and Design](/curricula/designer-modules/flexible-color-layout-and-design/) + * [Designer Module 1: Color and Layout](/curricula/designer-modules/color-and-layout/) * [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) * Visual Design * Prototyping From b553a3f86afc389c20edf40133456bd7620eb0ff Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 24 Aug 2021 18:06:25 +0200 Subject: [PATCH 230/416] Updates to designer overview page --- content/designer/designer-modules.md | 2 +- content/designer/multimedia-and-animations.md | 33 ++++++++++--------- 2 files changed, 18 insertions(+), 17 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 467f915b5..ef9e72294 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -84,7 +84,7 @@ The designer modules are designed for students who have achieved the learning ou - [Module 5: Multimedia and Animations](/curricula/designer-modules/multimedia-and-animations/) - [Topic: Alternatives to Multimedia Content](/curricula/designer-modules/multimedia-and-animations/#topic-alternatives-to-multimedia-content) - [Media Players [TBD]]() - - [Topic: Movement and Animations](/curricula/designer-modules/multimedia-and-animations/#topic-movement-and-animations) + - [Topic: Carousels, Movement and Animations](/curricula/designer-modules/multimedia-and-animations/#topic-carousels-movement-and-animations) - [Module 6: Forms, Interaction, and Feedback](/curricula/designer-modules/forms-interactions-and-feedback/) - [Topic: Forms Design (labels, instructions, errors, and notifications) [TBD]]() - [Topic: Keyboard Interactions](/curricula/designer-modules/forms-interactions-and-feedback/#topic-keyboard-interactions) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 66d187336..481fd492c 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -38,7 +38,7 @@ Students should be able to: * identify accessibility requirements for different types of audio and video content * design the placement and spacing for alternatives to multimedia content, such as transcripts, audio descriptions, captions, and sign language -* design user experiences that consider audio descriptions of visual information, captions, transcripts, and sign language, including +* design user experiences for audio descriptions of visual information, captions, transcripts, and sign language, including * mechanisms for turning on and off such alternatives * ways for users to interact with the alternatives * assess the need for designing a custom media player based on the project requirements and on existing media players supporting accessibility @@ -116,23 +116,24 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Audio descriptions are essential for people who cannot see the visuals. Captions are essential for people who cannot hear the audio. Text transcripts provide an alternative to visual and audio information. +Audio description of visual information is essential for people who cannot see the visuals. Captions are essential for people who cannot hear the audio. Text transcripts provide an alternative to visual and audio information. -Discuss the need for planning in the design phase to accommodate media alternatives such as audio description of visual information, captions, text transcripts, and sign language. Present mechanisms to turn on and off alternatives to multimedia content depending on user needs. Explain that these mechanisms need to have clear name and need to be always reachable for users. Explain that defining such mechanisms is a designer's responsibility, whereas providing the alternatives is a responsibility shared with the content author. +Discuss the need for planning in the design phase to accommodate media alternatives such as audio description of visual information, captions, text transcripts, and sign language. Present mechanisms to turn on and off alternatives to multimedia content depending on user needs. Explain that these mechanisms need to have clear names and need to be always reachable for users. Explain that defining such mechanisms is a designer's responsibility, whereas providing the alternatives is a responsibility shared with the content author. #### Learning Outcomes for Topic Students should be able to -* identify accessibility requirements for the different types of multimedia content, such as auio descriptions for visual information, captions, transcripts, and sign languages -* define audio descriptions as descriptions to adequately get the visual information needed to understand the content -* define captions as text versions of the speech and non-speech audio information needed to understand the content -* define text transcripts as text that provides an alternative to visual and audio information -* define sign language as the native language of some deaf people -* design mechanisms for controling the volume ofaudio that plays automatically for more than 3 seconds -* design mechanisms for pausing, stopping, or hiding any content that blinks, moves, or auto-updates, for example audio descriptions, captions, transcripts, sign language +* identify accessibility requirements for the different types of multimedia content, such as audio descriptions for visual information, captions, transcripts, and sign languages +* define the following alternatives to multimedia content: + * audio descriptions; descriptions to adequately get the visual information needed to understand the content + * captions; text versions of the speech and non-speech audio information needed to understand the content + * text transcripts; text that provides an alternative to visual and audio information + * sign language; the native language of some deaf people +* design mechanisms for controlling the volume of audio that plays automatically for more than 3 seconds +* design mechanisms for pausing, stopping, or hiding any content that blinks, moves, or auto-updates, for example audio descriptions, captions, transcripts, and sign language * design mechanisms to provide alternatives for multimedia content, including audio descriptions, captions, transcripts, and sign language -* design mechanisms to turn on and off audio descriptions, captions, and sign language +* design mechanisms to turn on and off audio descriptions, captions, transcripts, and sign language * design player controls that: * have descriptive names * are operable by keyboard @@ -143,11 +144,11 @@ Students should be able to Optional ideas to teach the learning outcomes: -* Show examples of text transcripts. Explain that transcripts are alternatives for people who cannot hear the audio information and for people who cannot see the visual information. Explain that allocating the necessary space for the transcripts is a designers' responsibility, whereas providing such transcripts is a responsibility shared with the content author. +* Show examples of audio descriptions of visual information. Explain that audio descriptions are alternatives for people who cannot see the video. Explain that defining the mechanisms to enable and disable audio description of visual information is a designers' responsibility, whereas providing the audio description is a responsibility shared with the content author. * Show examples of captions. Explain that captions are alternatives for people who cannot hear the audio, and that they are useful in other situations. Explain that determining where to place captions is a designers' responsibility, whereas providing such captions is a responsibility shared with the content author. -* Show examples of audio described content. Explain that audio descriptions are alternatives for people who cannot see the video. Explain that defining the mechanisms to enable and disable audio described content is a designers' responsibility, whereas providing the audio description is a responsibility shared with the content author. +* Show examples of text transcripts. Explain that transcripts are alternatives for people who cannot hear the audio information and for people who cannot see the visual information. Explain that allocating the necessary space for the transcripts is a designers' responsibility, whereas providing such transcripts is a responsibility shared with the content author. * Show examples of sign language. Explain that sign language is essential for people who are deaf and who do not understand written language well. Explain that defining the mechanisms to enable and disable sign language is a designers' responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. -* Show examples of accessible and inaccessible media players. Explain how accessible media player controls have appropriate contrast ratios, are operable by keyboard, and are easy to find. Emphasize that the controls need to remain available even when the media is playing. +* Show examples of accessible and inaccessible media players. Emphasize that it is generally more reliable to use an existing media player with support for accessibility than to designing one from scratch. Explain how accessible media player controls have appropriate contrast ratios, are operable by keyboard, and are easy to find. Emphasize that users need to be able to reach the controls even when the media is playing. #### Ideas to Assess Knowledge for Topic @@ -159,7 +160,7 @@ Optional ideas to assess knowledge: {% include excol.html type="start" %} -### Topic: Movement and Animations +### Topic: Carousels, Movement, and Animations {% include excol.html type="middle" %} @@ -189,7 +190,7 @@ Optional ideas to teach the learning outcomes: * [G186: Using a control in the Web page that stops moving, blinking, or auto-updating content](https://www.w3.org/WAI/WCAG21/Techniques/general/G186), and * [G187: Using a technology to include blinking content that can be turned off via the user agent](https://www.w3.org/WAI/WCAG21/Techniques/general/G187). * Show examples of flashing content and explain that they can cause seizures and physical reactions for some people. Emphasize that all components of the content need to be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole web page or application. For references on how to design interfaces that support flashing below the general flash and red flash thresholds or that support flashing below 3 seconds, see techniques [G19: Ensuring that no component of the content flashes more than three times in any 1-second period](https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html) and [G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold](https://www.w3.org/WAI/WCAG21/Techniques/general/G15.html). -* Show examples of interactions triggered by animations, such as additional movements when scrolling and decorative gimmics. Explain that these animations can cause distraction and vestibular disorders (such as dizziness, nausea, and headaches) for some people. Discuss the use of preferences as well as technology specific properties to reduce or disable such animations. +* Show examples of interactions triggered by animations, such as additional movements when scrolling and decorative gimmicks. Explain that these animations can cause distraction and vestibular disorders (such as dizziness, nausea, and headaches) for some people. Discuss the use of preferences as well as technology specific properties to reduce or disable such animations. * Demonstrate the use of a screen reader to navigate an application that plays audio automatically for more than 3 seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a mechanism to pause or control the volume of that audio. Explain that the operating system often provides such mechanism. For references on how to design interfaces that support mechanisms to pause or control the volume of any audio that plays automatically, see the following techniques: * [G60: Playing a sound that turns off automatically within three seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G60.html), * [G170: Providing a control near the beginning of the Web page that turns off sounds that play automatically](https://www.w3.org/WAI/WCAG21/Techniques/general/G170.html), and From 31bb832946cf742f16af9b4ae720650a445d5913 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 24 Aug 2021 19:05:11 +0200 Subject: [PATCH 231/416] Restructuring forms coverage --- .../forms-interactions-and-feedback.md | 136 +++++++----------- content/designer/information-design.md | 17 +-- 2 files changed, 59 insertions(+), 94 deletions(-) diff --git a/content/designer/forms-interactions-and-feedback.md b/content/designer/forms-interactions-and-feedback.md index 26a3f5e75..241b90c85 100644 --- a/content/designer/forms-interactions-and-feedback.md +++ b/content/designer/forms-interactions-and-feedback.md @@ -36,7 +36,7 @@ Courses based on this module should: Students should be able to: -* explain strategies that people with disabilities use to interact with components that accept user input +* explain strategies that people with disabilities use to interact with forms and other components that accept user input * design user experiences for different input mechanisms, including mouse, touch, keyboard, and speech * define keyboard interactions and meaningful sequences inside complex widgets, including buttons, carousels, sliders, tabs, and treeviews * assess the use of custom keyboard shortcuts for complex widgets and applications and provide information about their purpose and scope @@ -118,6 +118,58 @@ Topics to achieve the learning outcomes: {% include excol.html type="start" %} +### Topic: Form Design + +{% include excol.html type="middle" %} + +Refer back to [Designer Module 2: Information Design, Topic Labels and Instructions](/curricula/designer-modules/information-design/#topic-labels-and-instructions). Show examples of labels and instructions in the context of forms and other complex widgets. + +Show examples of text and visual notifications for error messages and other types of feedback for forms and other custom widgets. Explain that notifications may have different levels of priority when in the context of a complex application. Defining such levels of priority and which types of notifications each of them should contain is a designers' responsibility. + +Show examples of different ways to group large amounts of selectable data. For example, filtering out data into smaller pieces to better handle data, and enable mechanisms to type the first letters of their desire option to select data more efficiently. + +#### Learning outcomes for Topic + +Students should be able to: + +* design user experiences that consider position, appearance, and naming for labels, instructions, and notifications +* define visual and non-visual instructions about which input fields are required by: +* define clear instructions about changes in context before the control that originates such changes +* define overall instructions about existing time limits in a form and about how they can be adjusted, extended, and turned off +* define clear instructions about the current step and about the total number of steps involved in a multi-step form +* define error messages in the page title or before the form control that + * identify the fields in error + * describe the cause of the error + * provide suggestions to correct the error +* define meaningful and descriptive notification messages, for example: + * on input (to communicate if the provided input is valid or invalid + * on task completion (to communicate success or failure of a specific task) +* design user experiences to queue and prioritize application notifications coming from different components +* design user experiences to store and check notifications that disappear after a period of time at the users' pace +* identify related requirements for developers to code labels, instructions, and notifications appropriately + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +* Show examples of different components that accept user input (such as buttons, links, lists, and grids) across rich applications or complex widgets. Emphasize that each should have a clear name that allows to identify its purpose. For reference on how to provide names for different user interface components, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). +* Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. +* Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several mechanisms, including textual and visual cues. +* Present examples of time limits, such as those warning about session expirations. Explain that instructions need to be provided so that users are aware of the time limits, and mechanisms need to be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designers' responsibility, whereas implementing mechanisms to stop, extend, or adjust time limits is a responsibility shared with the developer. +* Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to assess knowledge: + +* Practical — Present students with a form and ask them to define labels for each of the fields. Assess how students provide clear and descriptive names for each of the form fields. +* Practical — Give students an application and ask them to provide names for each of the application subsections. Assess how students identify application subsections and provide clear and understandable names for each. +* Practical — Give students a form and ask them to provide the necessary instructions for users to understand each of the fields and fill in the form. Assess how students provide clear and concise instructions. + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + ### Topic: Keyboard Interactions {% include excol.html type="middle" %} @@ -198,88 +250,6 @@ Optional ideas to assess knowledge: {% include excol.html type="end" %} -{% include excol.html type="start" %} - -### Topic: Labels and Instructions - -{% include excol.html type="middle" %} - -Show examples of labels and instructions for components that accept user input. Explain that they are essential for several groups of people with disabilities to understand the purpose and intent of these components. - -#### Learning outcomes for Topic - -Students should be able to: - -* define clear and consistent names to help users understand the purpose of components that accept user input -* design user experiences that consider position, appearance, and naming of labels -* define instructions about which input fields are required by: - * including information about each of the required form fields before the form control - * including textual and visual cues in the label of each of the required form fields that indicate that they are required -* define clear instructions about changes in context before the control that originates such changes -* define overall instructions about existing time limits in a form and about how they can be adjusted, extended, and turned off -* define clear instructions about the current step and about the total number of steps involved in a multi-step form -* identify related requirements for developers to code labels and instructions appropriately - -#### Teaching Ideas for Topic - -Optional ideas to teach the learning outcomes: - -* Show examples of different components that accept user input (such as buttons, links, lists, and grids) across rich applications or complex widgets. Emphasize that each should have a clear name that allows to identify its purpose. For reference on how to provide names for different user interface components, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). -* Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. -* Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several mechanisms, including textual and visual cues. -* Present examples of time limits, such as those warning about session expirations. Explain that instructions need to be provided so that users are aware of the time limits, and mechanisms need to be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designers' responsibility, whereas implementing mechanisms to stop, extend, or adjust time limits is a responsibility shared with the developer. -* Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. - -#### Ideas to Assess Knowledge for Topic - -Optional ideas to assess knowledge: - -* Practical — Present students with a form and ask them to define labels for each of the fields. Assess how students provide clear and descriptive names for each of the form fields. -* Practical — Give students an application and ask them to provide names for each of the application subsections. Assess how students identify application subsections and provide clear and understandable names for each. -* Practical — Give students a form and ask them to provide the necessary instructions for users to understand each of the fields and fill in the form. Assess how students provide clear and concise instructions. - -{% include excol.html type="end" %} - -{% include excol.html type="start" %} - -### Topic: Errors and Notifications - -{% include excol.html type="middle" %} - -Show examples of notification messages. Explain that they need to be distinguishable by all users, including through visual cues and programmatically. - -Explain that notifications may have different levels of priority when in the context of a complex application. Defining such levels of priority and which types of notifications each of them should contain is a designers' responsibility. - -#### Learning Outcomes for Topic - -Students should be able to: - -* design notifications that are easy to understand and that can be distinguished from any other user interface component -* define error messages in the page title or before the form control that identify the fields in error and that describe the cause of the error -* define meaningful suggestions for correction when such suggestions do not compromise the security or purpose of the content -* define meaningful messages when successfully completing a task, for example when submitting forms and when saving documents -* define meaningful and descriptive notification messages, for example validation messages as the user types -* design user experiences to store and check notification messages at the users' pace, for example those that messages that disappear after a period of time -* design user experiences to queue and prioritize application notifications coming from different components -* describe related requirements for developers to code notification messages appropriately - -#### Teaching Ideas for Topic - -Optional ideas to teach the learning outcomes: - -* Show examples of different mechanisms to communicate notifications, such as through text messages, semantic relations, haptic and audio feedback, and popup windows. -* Demonstrate different types of error messages, including overall information about errors, specific information about each of the fields in error, and suggestions for correcting such errors when possible. Show examples of user interfaces with and without such error messages and explain that these enable several groups of people with disabilities to better interact and understand the contents. -* Show examples of overlapping notifications in the context of complex applications. Explain that some users may find it daunting to process several notifications at the same time, so a mechanism needs to be defined that allows to prioritize notifications based on their relevance. Explain that defining mechanisms to prioritize notifications based on their relevance is a designers' responsibility, whereas implementing the mechanisms is a developers' responsibility. - -#### Ideas to Assess Knowledge for Topic - -Optional ideas to assess knowledge: - -* Practical — Present students with a user interface containing errors and ask them to provide an overall descriptive message informing that there are submission errors. Assess how students provide overall informative messages when there are submission errors -* Practical — Present students with a form field submission containing errors and ask them to provide notifications about each form field that contains errors, together with suggestions for corrections when possible. Assess how students provide adequate error messages for each of the wrong fields and how they provide suggestions for corrections when possible. - -{% include excol.html type="end" %} - {% include excol.html type="all" %} ## Ideas to Assess Knowledge for Module diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 4b3a92bdf..beb96a56a 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -141,25 +141,20 @@ Optional ideas to assess knowledge: {% include excol.html type="start" %} -### Topic: Forms and Controls +### Topic: Labels and Instructions {% include excol.html type="middle" %} -Discuss the use of visual and non-visual cues (including labels, instructions, and graphical representations) to help people understand information presented in multi-step forms and processes. Explain that defining how to present these cues is a responsibility of the designer, whereas providing such cues is a responsibility shared with the content author. - -Show examples of how different groups of people interact with large amounts of selectable data, such as a list of countries. Explain that some people prefer filtering out data into smaller pieces to better handle data, some others prefer to type the first letters of their desire option to select data more efficiently. +Discuss the use of visual and non-visual cues (including labels, instructions, and graphical representations) to help people understand components. Explain that defining how to present these cues is a responsibility of the designer, whereas providing such cues is a responsibility shared with the content author. #### Learning Outcomes for Topic Students should be able to: -* define clear and distinguishable names for forms and form controls, including visual and programmatic labels -* define visual and non-visual cues, including labels, instructions, and graphical representations to make information in multi-step processes more understandable -* define related form controls, such as those collecting personal information, payment methods, and consent to legal conditions and communicate such relationships visually and non-visually -* define visual and non-visual mechanisms to communicate the total number of steps and the current step in multi-step forms and processes -* describe the poor user experience inherent to long data lists and grids and identify different approaches to address this, for example by providing search boxes and mechanisms to filter data, or by splitting larger data sets into smaller ones - -* define mechanisms to customize the number of shown results after a search query, for example the number of products per page +* define clear and distinguishable names for components, including visual and programmatic labels +* define overall instructions to make information in multi-step processes more understandable, for example visual and non-visual cues, and graphical representations +* define visual and non-visual instructions to communicate the total number of steps and the current step in multi-step forms and processes +* define related controls, such as those collecting personal information, payment methods, and consent to legal conditions, and communicate such relationships visually and non-visually #### Teaching Ideas for Topic From 6bc4f1eb9153dcdffb65ee009fa642e4f52568d4 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 24 Aug 2021 19:14:58 +0200 Subject: [PATCH 232/416] Updating overall outline --- content/designer/designer-modules.md | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index ef9e72294..04aa4ae7b 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -63,15 +63,14 @@ The designer modules are designed for students who have achieved the learning ou ## Designer Modules - [Module 1: Color and Layout (TBD)](/curricula/designer-modules/flexible-layout-and-design) - - [Topic: Color (TBD)](/curricula/designer-modules/color-and-layout/#topic-use-of-color) + - [Topic: Color (WIP)](/curricula/designer-modules/color-and-layout/#topic-use-of-color) - [Topic: Landmarks and Cues](/curricula/designer-modules/#topic-landmarks-and-cues) - [Topic: Styles](/curricula/designer-modules/color-and-layout/#topic-styles) - - [Topic: Adaptability](/curricula/designer-modules/color-and-layout/#topic-adaptability) + - [Topic: Adaptability (WIP)](/curricula/designer-modules/color-and-layout/#topic-adaptability) - [Module 2: Information Design](/curricula/designer-modules/information-design/) - [Topic: Text](/curricula/designer-modules/information-design/#topic-textual-information) - - [Topic: Landmarks [TBD]]() + - [Topic: Labels and Instructions (WIP)](/curricula/designer-modules/information-design/#topic-labels-and-instructions) - [Topic: Tables](/curricula/designer-modules/information-design/#topic-tabular-information) - - [Topic: Forms and Controls](/curricula/designer-modules/information-design/#topic-forms-and-controls) - [Module 3: Navigation](/curricula/designer-modules/navigation/) - [Topic: Menu Behaviors and Patterns](/curricula/designer-modules/navigation/#topic-menu-behaviors-and-patterns) - [Topic: Other Navigation Mechanisms](/curricula/designer-modules/navigation/#topic-other-navigation-mechanisms) @@ -83,10 +82,10 @@ The designer modules are designed for students who have achieved the learning ou - [Topic: Decorative Images](/curricula/designer-modules/images-and-graphics/#topic-decorative-images) - [Module 5: Multimedia and Animations](/curricula/designer-modules/multimedia-and-animations/) - [Topic: Alternatives to Multimedia Content](/curricula/designer-modules/multimedia-and-animations/#topic-alternatives-to-multimedia-content) - - [Media Players [TBD]]() + - Topic: Media Players [TBD] ??? - [Topic: Carousels, Movement and Animations](/curricula/designer-modules/multimedia-and-animations/#topic-carousels-movement-and-animations) -- [Module 6: Forms, Interaction, and Feedback](/curricula/designer-modules/forms-interactions-and-feedback/) - - [Topic: Forms Design (labels, instructions, errors, and notifications) [TBD]]() +- [Module 6: Forms, Interactions, and Feedback](/curricula/designer-modules/forms-interactions-and-feedback/) + - [Topic: Forms Design (WIP)](/curricula/designer-modules/forms-interaction-and-feedback/#topic-forms-design) - [Topic: Keyboard Interactions](/curricula/designer-modules/forms-interactions-and-feedback/#topic-keyboard-interactions) - [Topic: Gestures and Motion](/curricula/designer-modules/forms-interactions-and-feedback/#topic-gestures-and-motion) From c439c037f2eea52b2ac218b3b735e04538f513ec Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 24 Aug 2021 19:22:37 +0200 Subject: [PATCH 233/416] ix links and names --- ...xible-color-layout-and-design.md => color-and-layout.md} | 0 content/designer/designer-modules.md | 6 +++--- 2 files changed, 3 insertions(+), 3 deletions(-) rename content/designer/{flexible-color-layout-and-design.md => color-and-layout.md} (100%) diff --git a/content/designer/flexible-color-layout-and-design.md b/content/designer/color-and-layout.md similarity index 100% rename from content/designer/flexible-color-layout-and-design.md rename to content/designer/color-and-layout.md diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 04aa4ae7b..030f33f19 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -62,8 +62,8 @@ The designer modules are designed for students who have achieved the learning ou ## Designer Modules -- [Module 1: Color and Layout (TBD)](/curricula/designer-modules/flexible-layout-and-design) - - [Topic: Color (WIP)](/curricula/designer-modules/color-and-layout/#topic-use-of-color) +- [Module 1: Color and Layout (WIP)](/curricula/designer-modules/color-and-layout) + - [Topic: Color (WIP)](/curricula/designer-modules/color-and-layout/#topic-color) - [Topic: Landmarks and Cues](/curricula/designer-modules/#topic-landmarks-and-cues) - [Topic: Styles](/curricula/designer-modules/color-and-layout/#topic-styles) - [Topic: Adaptability (WIP)](/curricula/designer-modules/color-and-layout/#topic-adaptability) @@ -85,7 +85,7 @@ The designer modules are designed for students who have achieved the learning ou - Topic: Media Players [TBD] ??? - [Topic: Carousels, Movement and Animations](/curricula/designer-modules/multimedia-and-animations/#topic-carousels-movement-and-animations) - [Module 6: Forms, Interactions, and Feedback](/curricula/designer-modules/forms-interactions-and-feedback/) - - [Topic: Forms Design (WIP)](/curricula/designer-modules/forms-interaction-and-feedback/#topic-forms-design) + - [Topic: Forms Design (WIP)](/curricula/designer-modules/forms-interactions-and-feedback/#topic-forms-design) - [Topic: Keyboard Interactions](/curricula/designer-modules/forms-interactions-and-feedback/#topic-keyboard-interactions) - [Topic: Gestures and Motion](/curricula/designer-modules/forms-interactions-and-feedback/#topic-gestures-and-motion) From 10f4b783660cefe336a360e3caee2fbc5239219d Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 24 Aug 2021 19:27:44 +0200 Subject: [PATCH 234/416] Fixing in-line references --- content/designer/information-design.md | 2 +- content/designer/multimedia-and-animations.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index beb96a56a..01f44ba2a 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -200,7 +200,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of different types of information presented in tables. Explain that tables are used when there is a logical, tabular relationship between the information presented, for example when displaying a list of events with their date and venue. -* Refer back to [Designer Module 1: Topic Flexible Design](/curricula/designer-modules/color-and-layout/#topic-flexible-design) and explain that some users may require different ways of presenting tabular information. For example, providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. +* Refer back to [Designer Module 1: Topic Adaptability](/curricula/designer-modules/color-and-layout/#topic-adaptability) and explain that some users may require different ways of presenting tabular information. For example, providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. * Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells needs to be perceived both visually and programmatically. Explain that providing the styles is a designers' responsibility, whereas establishing the programmatic relationship is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 481fd492c..e730156a8 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -63,7 +63,7 @@ Skills required for this module: {% include excol.html type="middle" %} * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) -* [Designer Module 1: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design/) +* [Designer Module 1: Color and Layout](/curricula/designer-modules/color-and-layout/) * [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) * [Designer Module 3: Navigation](/curricula/designer-modules/navigation/) * [Designer Module 4: Images and Graphics](/curricula/designer-modules/images-and-graphics) @@ -95,7 +95,7 @@ Skills required for this module: * [WCAG Success Criterion 3.2.5 Change on Request](https://www.w3.org/WAI/WCAG21/quickref/#change-on-request) * In-depth knowledge of: * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) - * [Designer Module 1: Flexible and Responsive Design](/curricula/designer-modules/flexible-and-responsive-design/) + * [Designer Module 1: Color and Layout](/curricula/designer-modules/color-and-layout/) * [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) * [Designer Module 3: Navigation](/curricula/designer-modules/navigation/) * [Designer Module 4: Images and Graphics](/curricula/designer-modules/images-and-graphics) From 9de36b4737d6823197b58c54d6066a3687a21255 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 25 Aug 2021 09:45:27 +0200 Subject: [PATCH 235/416] Updates to page titles --- content/designer/color-and-layout.md | 2 +- content/designer/forms-interactions-and-feedback.md | 5 ++++- content/designer/information-design.md | 2 +- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/content/designer/color-and-layout.md b/content/designer/color-and-layout.md index 04a9821f7..fd699af85 100644 --- a/content/designer/color-and-layout.md +++ b/content/designer/color-and-layout.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 1: Color and Layout" +title: "[Draft] Module 1: Color and Layout (WIP)" nav_title: "Color and Layout" permalink: /curricula/designer-modules/color-and-layout/ ref: /curricula/designer-modules/color-and-layout/ diff --git a/content/designer/forms-interactions-and-feedback.md b/content/designer/forms-interactions-and-feedback.md index 241b90c85..697153321 100644 --- a/content/designer/forms-interactions-and-feedback.md +++ b/content/designer/forms-interactions-and-feedback.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 6: Forms, Interactions, and Feedback" +title: "[Draft] Module 6: Forms, Interactions, and Feedback (WIP)" nav_title: "Forms, Interactions, and Feedback" permalink: /curricula/designer-modules/forms-interactions-and-feedback/ ref: /curricula/designer-modules/forms-interactions-and-feedback/ @@ -157,6 +157,9 @@ Optional ideas to teach the learning outcomes: * Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several mechanisms, including textual and visual cues. * Present examples of time limits, such as those warning about session expirations. Explain that instructions need to be provided so that users are aware of the time limits, and mechanisms need to be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designers' responsibility, whereas implementing mechanisms to stop, extend, or adjust time limits is a responsibility shared with the developer. * Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. +* Show examples of different types of error messages, including overall information about errors, specific information about each of the fields in error, and suggestions for correcting such errors when possible. Show examples of user interfaces with and without such error messages and explain that these enable several groups of people with disabilities to better interact and understand the contents. +* Show examples of different mechanisms to communicate notifications, such as through text messages, semantic relations, haptic and audio feedback, and popup windows. +* Show examples of overlapping notifications in the context of complex applications. Explain that some users may find it daunting to process several notifications at the same time, so a mechanism needs to be defined that allows to prioritize notifications based on their relevance. Explain that defining mechanisms to prioritize notifications based on their relevance is a designers' responsibility, whereas implementing the mechanisms is a developers' responsibility. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 01f44ba2a..55df8d5c3 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 2: Information Design" +title: "[Draft] Module 2: Information Design (WIP)" nav_title: "Information Design" permalink: /curricula/designer-modules/information-design/ ref: /curricula/designer-modules/information-design/ From a69ad316e43cf6c9b87ea1fcda5daf066045ee1d Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 25 Aug 2021 09:56:59 +0200 Subject: [PATCH 236/416] Updates to topic links --- content/designer/designer-modules.md | 5 ++--- content/designer/forms-interactions-and-feedback.md | 2 +- content/designer/information-design.md | 4 ++-- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 030f33f19..2c0a89a05 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -68,9 +68,9 @@ The designer modules are designed for students who have achieved the learning ou - [Topic: Styles](/curricula/designer-modules/color-and-layout/#topic-styles) - [Topic: Adaptability (WIP)](/curricula/designer-modules/color-and-layout/#topic-adaptability) - [Module 2: Information Design](/curricula/designer-modules/information-design/) - - [Topic: Text](/curricula/designer-modules/information-design/#topic-textual-information) + - [Topic: Text](/curricula/designer-modules/information-design/#topic-text) - [Topic: Labels and Instructions (WIP)](/curricula/designer-modules/information-design/#topic-labels-and-instructions) - - [Topic: Tables](/curricula/designer-modules/information-design/#topic-tabular-information) + - [Topic: Tables](/curricula/designer-modules/information-design/#topic-tables) - [Module 3: Navigation](/curricula/designer-modules/navigation/) - [Topic: Menu Behaviors and Patterns](/curricula/designer-modules/navigation/#topic-menu-behaviors-and-patterns) - [Topic: Other Navigation Mechanisms](/curricula/designer-modules/navigation/#topic-other-navigation-mechanisms) @@ -88,4 +88,3 @@ The designer modules are designed for students who have achieved the learning ou - [Topic: Forms Design (WIP)](/curricula/designer-modules/forms-interactions-and-feedback/#topic-forms-design) - [Topic: Keyboard Interactions](/curricula/designer-modules/forms-interactions-and-feedback/#topic-keyboard-interactions) - [Topic: Gestures and Motion](/curricula/designer-modules/forms-interactions-and-feedback/#topic-gestures-and-motion) - diff --git a/content/designer/forms-interactions-and-feedback.md b/content/designer/forms-interactions-and-feedback.md index 697153321..a4177d208 100644 --- a/content/designer/forms-interactions-and-feedback.md +++ b/content/designer/forms-interactions-and-feedback.md @@ -118,7 +118,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="start" %} -### Topic: Form Design +### Topic: Forms Design {% include excol.html type="middle" %} diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 55df8d5c3..da9698acf 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -99,7 +99,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="start" %} -### Topic: Textual Information +### Topic: Text {% include excol.html type="middle" %} @@ -174,7 +174,7 @@ Optional ideas to assess knowledge: {% include excol.html type="start" %} -### Topic: Tabular Information +### Topic: Tables {% include excol.html type="middle" %} From c246b3fdff5861a7442833214dbedd077154150c Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 25 Aug 2021 10:13:09 +0200 Subject: [PATCH 237/416] Updates to multimedia --- content/designer/multimedia-and-animations.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index e730156a8..e907d2de1 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 5: Multimedia and Animations" +title: "[Draft] Module 5: Multimedia and Animations (WIP)" nav_title: "Multimedia and Animations" permalink: /curricula/designer-modules/multimedia-and-animations/ ref: /curricula/designer-modules/multimedia-and-animations/ @@ -37,8 +37,8 @@ Courses based on this module should: Students should be able to: * identify accessibility requirements for different types of audio and video content -* design the placement and spacing for alternatives to multimedia content, such as transcripts, audio descriptions, captions, and sign language -* design user experiences for audio descriptions of visual information, captions, transcripts, and sign language, including +* design the placement and spacing for alternatives to multimedia content, such as audio descriptions, captions, transcripts, and sign language +* design user experiences for audio descriptions, captions, transcripts, and sign language, including * mechanisms for turning on and off such alternatives * ways for users to interact with the alternatives * assess the need for designing a custom media player based on the project requirements and on existing media players supporting accessibility @@ -124,15 +124,15 @@ Discuss the need for planning in the design phase to accommodate media alternati Students should be able to -* identify accessibility requirements for the different types of multimedia content, such as audio descriptions for visual information, captions, transcripts, and sign languages +* identify accessibility requirements for the different types of multimedia content, such as audio descriptions of visual information, captions, transcripts, and sign languages * define the following alternatives to multimedia content: * audio descriptions; descriptions to adequately get the visual information needed to understand the content * captions; text versions of the speech and non-speech audio information needed to understand the content * text transcripts; text that provides an alternative to visual and audio information * sign language; the native language of some deaf people * design mechanisms for controlling the volume of audio that plays automatically for more than 3 seconds -* design mechanisms for pausing, stopping, or hiding any content that blinks, moves, or auto-updates, for example audio descriptions, captions, transcripts, and sign language -* design mechanisms to provide alternatives for multimedia content, including audio descriptions, captions, transcripts, and sign language +* design mechanisms to pause, stop, or hide alternatives to multimedia content that blink, move, or auto-update +* design the placement and user experience of alternatives for multimedia content, including audio descriptions, captions, transcripts, and sign language * design mechanisms to turn on and off audio descriptions, captions, transcripts, and sign language * design player controls that: * have descriptive names From 668f40e992ee7357a98d8ccdea2ee8ff26e65bd2 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 25 Aug 2021 10:36:55 +0200 Subject: [PATCH 238/416] Word-smithing --- content/designer/multimedia-and-animations.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index e907d2de1..abe0a3060 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -41,13 +41,13 @@ Students should be able to: * design user experiences for audio descriptions, captions, transcripts, and sign language, including * mechanisms for turning on and off such alternatives * ways for users to interact with the alternatives -* assess the need for designing a custom media player based on the project requirements and on existing media players supporting accessibility -* design multimedia player controls that have clear and descriptive names, that are easy to find, and that are always reachable for users -* design multimedia players that support different methods of interaction, including mouse, keyboard, touch, and voice +* assess the need for designing custom media players versus using existing media players with support for accessibility +* design media player controls that have clear and descriptive names, that are easy to find, and that are always reachable for users +* design media players that support different methods of interaction, including mouse, keyboard, touch, and voice * design mechanisms to mute and control the volume of auto-playing audio * design mechanisms to pause, stop, and hide moving, blinking, and auto-updating content, including animations and carousels * identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding media content -* identify related requirements for developers to include accessibility support for multimedia players +* identify related requirements for developers to include accessibility support for media players * identify related requirements for content authors to provide appropriate text transcripts, captions, audio descriptions, and sign language {% include excol.html type="all" %} From 18ea45de934ac179529edaf3bcbbfc9fd08cfb5e Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 25 Aug 2021 12:07:40 +0200 Subject: [PATCH 239/416] set of pages -> websites --- content/designer/navigation.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 55f81800f..1e4e0ffdf 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -43,7 +43,7 @@ Students should be able to: * define clear and consistent visual and non-visual indication of state changes for menu items * define mechanisms to identify blocks of repeated content * cooperate with developers to define and implement mechanisms that bypass blocks of repeated content -* define mechanisms to help users to locate specific web pages within sets of web pages, for example by providing breadcrumb trails, site maps, and descriptive page titles +* define mechanisms to help users to locate specific web pages within websites, for example by providing breadcrumb trails, site maps, and descriptive page titles * assess the use of navigation mechanisms depending on user needs * identify related requirements for developers to implement: * interactions for navigational mechanisms, including keyboard, mouse, touch, and voice @@ -120,7 +120,7 @@ Students should be able to: * identify and describe uses of different types of navigation menus, such as static, fly-out, and mega menus * define visual and text cues to distinguish menus from other components, -* define consistent styling for menu identification across a set of web pages +* define consistent styling for menu identification across websites * define interactions inside navigation menus, including mouse, keyboard, and touch * design navigation menus that adapt to different text sizes, screen magnifications, and screen sizes and resolutions * design distinguishable and consistent styles for menu items in their different states, for example in fly-out menus @@ -201,13 +201,13 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Build on [Foundation Module 6: Understanding and Involving Users](/curricula/foundation-modules/understanding-and-involving-users/) to research strategies that people with disabilities use to locate a specific web page in a set of web pages. Discuss examples like breadcrumb trails, page titles, and text and visual cues to indicate the current page. +Build on [Foundation Module 6: Understanding and Involving Users](/curricula/foundation-modules/understanding-and-involving-users/) to research strategies that people with disabilities use to locate a specific web page in a website. Discuss examples like breadcrumb trails, page titles, and text and visual cues to indicate the current page. #### Learning Outcomes for Topic Students should be able to: -* design mechanisms for users to locate specific web pages within sets of web pages, for example: +* design mechanisms for users to locate specific web pages within websites, for example: * descriptive page titles * text and visual cues in the navigation menu to indicate the current page * descriptive page headings @@ -219,15 +219,15 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of breadcrumb trails. Explain that they provide information about the users location in the context of a set of web pages. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail](https://www.w3.org/WAI/WCAG21/Techniques/general/G65). -* Invite students to give examples of page titles they are familiar with and reflect with them on how well the titles describe the page contents. Explain that page titles are useful to identify the purpose of a specific web page within a set of web pages. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page, as some browsers and assistive technologies may truncate the titles or not show the at all. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). +* Show examples of breadcrumb trails. Explain that they provide information about the user's location in the context of a whole website. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail](https://www.w3.org/WAI/WCAG21/Techniques/general/G65). +* Invite students to give examples of page titles they are familiar with and reflect with them on how well the titles describe the page contents. Explain that page titles are useful to identify the purpose of a specific web page within a website. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page, as some browsers and assistive technologies may truncate the titles or not show the at all. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). #### Ideas to Assess Knowledge Optional ideas to assess knowledge: * Practical — Give students a specific web page inside a website and ask them to provide appropriate indications about the page location with respect to the entire website. Assess how students balance the use of text and visual cues, breadcrumb trails, and descriptive titles and headings. -* Practical — Present students with a set of web pages and ask them to provide descriptive titles that identify each of the pages and describe what they are about. Assess how students provide clear and descriptive page titles. +* Practical — Present students with a website and ask them to provide descriptive titles that identify each of the pages and describe what they are about. Assess how students provide clear and descriptive page titles. {% include excol.html type="end" %} @@ -237,7 +237,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Portfolio — Students design the navigation menu and other navigational mechanisms for a set of web pages. Assess how students understand accessibility features of navigation across websites and applications. +* Portfolio — Students design the navigation menu and other navigational mechanisms for a website. Assess how students understand accessibility features of navigation across websites and applications. ## Teaching Resources From 5b22f36b0a9460993ab421d8c2ecc314c330b329 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 25 Aug 2021 12:24:12 +0200 Subject: [PATCH 240/416] Contrast ratio -> color contrast --- content/designer/color-and-layout.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/designer/color-and-layout.md b/content/designer/color-and-layout.md index fd699af85..75713f7d2 100644 --- a/content/designer/color-and-layout.md +++ b/content/designer/color-and-layout.md @@ -117,9 +117,9 @@ Students should be able to: * explain how appropriate use of color enables people with disabilities to read, understand, and distinguish components * determine if text, images of text, and controls have sufficient color contrast -* design text and images of text that have a contrast ratio of at least 4.5:1 with respect to their background -* design large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background -* design components and graphics that have a contrast ratio of at least 3:1 with respect to their background +* design text and images of text that have a color contrast of at least 4.5:1 with respect to their background +* design large-scale text and images of text that have a color contrast of at least 3:1 with respect to their background +* design components and graphics that have a color contrast of at least 3:1 with respect to their background * define layouts that enable users to change colors based on customized screen sizes, screen configurations, and style sheets * use visual cues in addition to color, for example using different patterns, shapes, and icons * use non-visual cues for people who cannot perceive color, for example using text to complement information provided visually @@ -128,16 +128,16 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of how different pieces of text are perceived depending on their background color. Explain that contrast ratios for text (including images of text) need to be at least 4.5:1 with respect to their background. For references on how to apply contrast ratios to text (including images of text), see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). -* Show examples of different interactive components, such as buttons and links, and explain that they should have a contrast ratio of at least 3:1. +* Show examples of how different pieces of text are perceived depending on their background color. Explain that color contrast for text (including images of text) need to be at least 4.5:1 with respect to their background. For references on how to apply sufficient color contrast to text (including images of text), see technique [G18: Ensuring that a color contrast of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). +* Show examples of different interactive components, such as buttons and links, and explain that they should have a color contrast of at least 3:1. * Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so supplemental methods to convey that information are required. For references on how to supplement information conveyed through color, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Short Answer Questions — Give students a set of components and ask them what the contrast ratio should be. Assess how students understand and distinguish contrast ratios for different components. -* Practical — Students design a paper prototype and apply appropriate contrast ratios to text, images of text, components, and graphics. Assess how students understand and apply contrast ratios based on the different components that they are designing. +* Short Answer Questions — Give students several components and ask them what the color contrast should be. Assess how students understand and distinguish sufficient color contrast for different components. +* Practical — Students design a paper prototype and apply sufficient color contrast to text, images of text, components, and graphics. Assess how students understand and apply sufficient color contrast based on the different components that they are designing. * Practical — Discuss with students examples of information presented using color and ask them to supplement that information using other visual cues. Assess how students use shapes and icons to supplement information presented using color distinguishable. {% include excol.html type="end" %} From 7a4e552c24ba948145db89bc2aff180ac4b2be7d Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 25 Aug 2021 13:42:45 +0200 Subject: [PATCH 241/416] Tweaking first paragraph sentences --- content/designer/color-and-layout.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/color-and-layout.md b/content/designer/color-and-layout.md index 75713f7d2..9b5be4c84 100644 --- a/content/designer/color-and-layout.md +++ b/content/designer/color-and-layout.md @@ -29,8 +29,8 @@ navigation: Courses based on this module should: -* explain how people with disabilities rely on designs that adapt to different screen sizes, configurations, and style sheets -* explain accessibility requirements that relate to use of color, as well as to adaptable font sizes, font types, and spacing +* explain accessibility requirements for color contrast, styles, vissual and non visual cues, landmarks, and regions +* explain how people with disabilities rely on layouts that adapt to different screen sizes, configurations, and style sheets ## Learning Outcomes for Module From 6882c07b6882722457c3f2206b15d0491fa28263 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 25 Aug 2021 17:00:30 +0200 Subject: [PATCH 242/416] Removed "animations triggered by interaction" --- content/designer/multimedia-and-animations.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index abe0a3060..748055c9e 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -164,7 +164,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Show moving content, such as carousels and animations. Present mechanisms to avoid distractions, seizures and physical reactions, and unpredictable keyboard focus management caused by moving content. For example, support for pausing, stopping, or hiding moving content, as well as using flashing that is below the general flash and red flash ratios where possible. +Show moving content, such as carousels and animations. Present mechanisms to avoid distractions, seizures and physical reactions, and unpredictable keyboard focus management caused by moving content. For example, support for pausing, stopping, or hiding moving content, as well as using flashing that is below the accepted ratios where possible. #### Learning Outcomes for Topic @@ -175,8 +175,6 @@ Students should be able to: * create designs with enough time for users to read parts of moving content, for example different slides in a carousel * define visual and non-visual identification of animated content and its different parts, for example identifying a carousel region and its different slides * define focus order within animated contents, including how to move to different parts of the carousel and how to get to the carousel controls - -* design mechanisms that support disabling motion animation triggered by interaction, such as additional animations when scrolling * design mechanisms for stopping or controlling the volume of any audio that plays automatically for more than 3 seconds #### Teaching Ideas for Topic From 3db820188de2437000f1d463b416e783ddcda60b Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 25 Aug 2021 17:32:19 +0200 Subject: [PATCH 243/416] Tweaking designer modules overview page --- content/designer/designer-modules.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 2c0a89a05..6458cb286 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -35,7 +35,11 @@ The designer modules guide the creation of courses that: * user experience * interaction design -These modules focus on visual, information, user experience, and interaction aspects to design accessible web pages and applications. The modules primarily address the following roles: +These modules have been organized so that they can be easily taught together with the [developer modules](/curricula/developer-modules/). If you are teaching other type of designers, feel free to change the structure so that it fits your audience needs. + +These modules focus on visual, information, user experience, and interaction aspects to design accessible web pages and applications. + +The modules primarily address the following roles: * Visual Designer * Information Architect @@ -59,7 +63,6 @@ The designer modules are designed for students who have achieved the learning ou * [Module 5: Getting Started with Accessibility](/curricula/foundation-modules/getting-started-with-accessibility/) * Topic: Roles and Responsibilities - ## Designer Modules - [Module 1: Color and Layout (WIP)](/curricula/designer-modules/color-and-layout) From 0b14f83aedd770ebe2a752b7015eb429b877ca89 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 30 Aug 2021 11:50:15 +0200 Subject: [PATCH 244/416] assess -> evaluate --- content/designer/color-and-layout.md | 9 ++++----- content/designer/forms-interactions-and-feedback.md | 2 +- content/designer/images-and-graphics.md | 7 ++++--- content/designer/information-design.md | 8 ++++---- content/designer/multimedia-and-animations.md | 2 +- content/designer/navigation.md | 8 ++++---- 6 files changed, 18 insertions(+), 18 deletions(-) diff --git a/content/designer/color-and-layout.md b/content/designer/color-and-layout.md index 9b5be4c84..7727a5924 100644 --- a/content/designer/color-and-layout.md +++ b/content/designer/color-and-layout.md @@ -37,14 +37,13 @@ Courses based on this module should: Students should be able to: * explain how people with disabilities rely on designs that adapt to different colors, layouts, spacing, and positions -* determine sufficient color contrast for text, images of text, and controls * design layouts with sufficient color contrast for text, images of text, and controls * design clear and distinguishable focus indicators, for example using borders, color, and highlighting * design layouts that adapt to different font sizes and spacing set by the user in browser and operating system settings * design layouts that adapt to different screen sizes, configurations, and user style sheets * use headings, landmarks, and spacing to group related content * use a combination of text cues, patterns, and icons to convey information -* assess the potential distraction and cognitive overload from using too many design elements on a single page, in particular interactive widgets, images, and moving content" +* evaluate the use of too many design elements (in particular interactive widgets, images, and moving content) on a page, and justify the use of elements that avoid potential distraction and cognitive overload * identify related requirements for developers to apply the necessary semantics to interface components {% include excol.html type="all" %} @@ -116,7 +115,7 @@ Describe how some people rely on color to understand and distinguish content. Ex Students should be able to: * explain how appropriate use of color enables people with disabilities to read, understand, and distinguish components -* determine if text, images of text, and controls have sufficient color contrast +* determine sufficient color contrast for text, images of text, and controls * design text and images of text that have a color contrast of at least 4.5:1 with respect to their background * design large-scale text and images of text that have a color contrast of at least 3:1 with respect to their background * design components and graphics that have a color contrast of at least 3:1 with respect to their background @@ -226,8 +225,8 @@ Students should be able to: * design layouts that can have their text resized without loss of content and functionality * design layouts that can have their text zoomed and enlarged using different viewport sizes and through multiple breakpoints * design layouts that adapt their content view and operation to portrait and landscape orientations -* design layouts that can have their target sizess customized for different input methods, sizes, and spacing -* design layouts that can have line height, as well as spacing between paragraphs, words, and letters customized by users +* design layouts that support tapping by people with mobility impairments and by people using different input methods, sizes, and spacing +* design layouts that can have line height, as well as spacing between paragraphs, words, and letters, customized by users * design meaningful focus orders that adapt to different viewports, screen sizes, and breakpoints #### Teaching Ideas for Topic diff --git a/content/designer/forms-interactions-and-feedback.md b/content/designer/forms-interactions-and-feedback.md index a4177d208..cba1fa655 100644 --- a/content/designer/forms-interactions-and-feedback.md +++ b/content/designer/forms-interactions-and-feedback.md @@ -39,7 +39,7 @@ Students should be able to: * explain strategies that people with disabilities use to interact with forms and other components that accept user input * design user experiences for different input mechanisms, including mouse, touch, keyboard, and speech * define keyboard interactions and meaningful sequences inside complex widgets, including buttons, carousels, sliders, tabs, and treeviews -* assess the use of custom keyboard shortcuts for complex widgets and applications and provide information about their purpose and scope +* evaluate the use of custom keyboard shortcuts for complex widgets and applications and provide information about their purpose and scope * define clear and distinguishable ways to identify form fields and other components that accept user input, including through naming and placement * define mechanisms to help understand the context, information, and functionality of user interface components, including through textual instructions, color, and other visual cues * define meaningful and descriptive notifications about imminent time limits, steps, errors, suggestions for correction, success messages, status changes, and feedback from user input diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index c05bd4c84..1e82967c0 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -42,7 +42,7 @@ Students should be able to: * design consistent imagery to help users recognize the purpose of icons, thumbnails, and other graphical components * explain the issues associated with perception, interpretation, and rendering of images of text * explain how to avoid images of text by using technologies that achieve the desired visual presentation wherever possible -* assess the use of images versus other ways to provide the information, including tables and plain text +* evaluate the use of images and justify other ways to provide the information, including tables and plain text * identify related requirements for developers to code images and text alternatives appropriately * identify related requirements for content authors to provide appropriate descriptions for images, such as charts, diagrams, and other complex graphics @@ -155,6 +155,7 @@ Students should be able to: * use styled text instead of images of text when the technology in use can provide the desired visual presentation * define alternatives to CAPTCHA and biometrics, for example by providing visual, auditory, and logical CAPTCHA * explain the issues associated with relying only on one form of biometrics and CAPTCHA, and describe alternative approaches for authentication +* evaluate the use of too many informative images and justify the use of other ways to convey the information, including plain text * identify related requirements for developers to code alternative texts for informative images ### Teaching Ideas for Topic @@ -189,7 +190,7 @@ Explain that coordination among different team members is required to assess the Students should be able to: * use appropriate contrast ratios for complex images -* assess the use of complex images versus other ways to present the information; for example using tables, simpler images, and plain text +* evaluate the use of complex images and justify other ways to present the information; for example using tables, simpler images, and plain text * determine if and how complex images are operated using input devices, including mouse, keyboard, voice, and touch * consider placement and spacing for alternatives to complex images * design clear and consistent identification mechanisms for complex image descriptions, including appropriate headings and expandable and collapsible components @@ -227,7 +228,7 @@ Students should be able to: * describe the differences between decorative and non-decorative images depending on the type of information conveyed by the image and the overall context * describe different ways to present information contained in an image in the surrounding content so that the image can be considered decorative -* assess the potential distraction and cognitive overload from using too many decorative images +* evaluate the potential distraction and cognitive overload from using too many decorative images and justify the use of decoraative images that avoid distractions and cognitive overload * explain how the overuse of decorative images could become distracting for some users and slow down loading times and interaction for other users * identify related requirements for developers to code decorative images so that they are skipped by assistive technologies diff --git a/content/designer/information-design.md b/content/designer/information-design.md index da9698acf..f203b801e 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -44,7 +44,7 @@ Students should be able to: * describe the use of visual and non-visual cues to make information in multi-step processes more understandable * describe how to communicate the structure of multi-page articles or processes visually and non-visually * describe how to provide information about the total number of items and about the current item in a multi-step process visually and non-visually -* assess the use of different mechanisms to convey the information, including text, tables, grouping, and graphical representation depending on user needs +* evaluate the use of different mechanisms to convey the information, including text, tables, grouping, and graphical representations depending on user needs * identify related requirements for developers to programmatically associate headings, table header cells and data cells, as well as form labels and instructions to their corresponding control {% include excol.html type="all" %} @@ -115,8 +115,8 @@ Students should be able to: * pages * chapter markers (in digital publications) * create graphical representations that accompany the text, to make the information easier to understand; for example a diagram representation of the process described in the text” -* assess the use of definitions for professional terms, idioms, and jargon versus the use of such terms alone -* assess the use of expanded forms or meaning for acronyms and abbreviations versus using such acronyms and abbreviations alone +* evaluate the use of professional terms, idioms, and jargon, and justify the use of definitions for such terms to support readability +* evaluate the use of acronyms and abbreviations, and justify the use of expanded forms for such abbreviations and acronymms to support readability * identify related requirements for developers to make language programmatically determined * identify related requirements for content authors to provide clear language and easy-to-read texts whenever possible @@ -188,7 +188,7 @@ Students should be able to: * identify different ways of presenting tabular information, such as using several lists, or splitting a complex table into several simpler ones * define table header cells and data cells, and provide clear and distinguishable styles for each * create designs with graphical representations of complex tables that help users more easily understand its purpose and meaning -* assess the use of complex tables versus simpler ways to provide the information, for example using: +* evaluate the use of complex tables and justify the use of simpler ways to provide the information, for example: * simpler tables * charts, diagrams, and other graphical representations * plain text diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 748055c9e..dd95ad7b3 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -41,7 +41,7 @@ Students should be able to: * design user experiences for audio descriptions, captions, transcripts, and sign language, including * mechanisms for turning on and off such alternatives * ways for users to interact with the alternatives -* assess the need for designing custom media players versus using existing media players with support for accessibility +* evaluate the need for designing custom media players and justify the use of existing media players with support for accessibility * design media player controls that have clear and descriptive names, that are easy to find, and that are always reachable for users * design media players that support different methods of interaction, including mouse, keyboard, touch, and voice * design mechanisms to mute and control the volume of auto-playing audio diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 1e4e0ffdf..2e9e90a21 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -44,7 +44,7 @@ Students should be able to: * define mechanisms to identify blocks of repeated content * cooperate with developers to define and implement mechanisms that bypass blocks of repeated content * define mechanisms to help users to locate specific web pages within websites, for example by providing breadcrumb trails, site maps, and descriptive page titles -* assess the use of navigation mechanisms depending on user needs +* evaluate the use of navigation mechanisms, including menus, tables of content, and sitemaps, and justify the use of navigation mechanisms that avoid distraction and unnecessary noise * identify related requirements for developers to implement: * interactions for navigational mechanisms, including keyboard, mouse, touch, and voice * clear and descriptive names for navigational mechanisms @@ -167,11 +167,11 @@ Students should be able to: * a link at the beginning of a block of repeated content to go to the end of the block * tables of contents at the top of the page that go to each area of the content * expandable and collapsible contents to make it easier for users to skip over them -* assess the amount of mechanisms to skip blocks of repeated content in use, to avoid distractions and unnecessary noise +* evaluate the use of mechanisms to skip blocks of repeated content, and jjustify the use of mechanisms that avoid distractions and unnecessary noise * define other navigational mechanisms to ensure web pages and application views can be reached using the following methods: * search functionalities that support navigating to specific parts of the site * site maps to provide an overview of the entire website -* assess the amount of navigational mechanisms in use, to avoid distractions and unnecessary noise +* evaluate the amount of navigational mechanisms in use, and justify the use of mechanisms that help users navigate and orient #### Teaching Ideas for Topic @@ -212,7 +212,7 @@ Students should be able to: * text and visual cues in the navigation menu to indicate the current page * descriptive page headings * breadcrumb trails -* assess the amount of location mechanisms in use, to avoid distractions and unnecessary noise +* evaluate the use of location mechanisms in use, and justify the use of mechanisms that avoid distractions and unnecessary noise * identify related requirements for developers to apply semantics to page titles, headings, non-visual cues, and breadcrumb trails ### Teaching Ideas From 55469d45bbdef92a566e627d7c652e3be47c23d5 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 1 Sep 2021 11:56:02 +0200 Subject: [PATCH 245/416] Updates to modules and topics --- content/designer/color-and-layout.md | 8 ++++---- content/designer/images-and-graphics.md | 10 +++++----- content/designer/information-design.md | 11 +++++------ content/designer/multimedia-and-animations.md | 6 +++--- content/designer/navigation.md | 4 ++-- 5 files changed, 19 insertions(+), 20 deletions(-) diff --git a/content/designer/color-and-layout.md b/content/designer/color-and-layout.md index 7727a5924..cf1810301 100644 --- a/content/designer/color-and-layout.md +++ b/content/designer/color-and-layout.md @@ -222,11 +222,11 @@ Explain how people with disabilities rely on designs that adapt to different scr Students should be able to: -* design layouts that can have their text resized without loss of content and functionality -* design layouts that can have their text zoomed and enlarged using different viewport sizes and through multiple breakpoints +* design layouts to support text resizing without loss of content and functionality +* design layouts to support text zooming and enlarginf in different viewport sizes and through multiple breakpoints * design layouts that adapt their content view and operation to portrait and landscape orientations -* design layouts that support tapping by people with mobility impairments and by people using different input methods, sizes, and spacing -* design layouts that can have line height, as well as spacing between paragraphs, words, and letters, customized by users +* design layouts with sufficient target sizes to support tapping +* design layouts to support user customization line height, as well as spacing between paragraphs, words, and letters * design meaningful focus orders that adapt to different viewports, screen sizes, and breakpoints #### Teaching Ideas for Topic diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 1e82967c0..682c9632c 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -38,11 +38,11 @@ Students should be able to: * explain how images and graphics help people with disabilities to process information, identify content, and understand functionality * explain how text alternatives are essential for people with disabilities to understand the information contained in images -* define meaningful and consistent text alternatives for functional images, such as those included in buttons, links, icons, and logos +* define meaningful and consistent text alternatives for functional images, for example those included in buttons, links, icons, and logos * design consistent imagery to help users recognize the purpose of icons, thumbnails, and other graphical components * explain the issues associated with perception, interpretation, and rendering of images of text * explain how to avoid images of text by using technologies that achieve the desired visual presentation wherever possible -* evaluate the use of images and justify other ways to provide the information, including tables and plain text +* evaluate the use of images and justify alternative ways to provide the information, including tables and plain text * identify related requirements for developers to code images and text alternatives appropriately * identify related requirements for content authors to provide appropriate descriptions for images, such as charts, diagrams, and other complex graphics @@ -122,7 +122,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different images used to convey functionality, such as for printing, searching, or saving a document. Explain that it is necessary to provide an equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). +* Show examples of different images used to convey functionality, for example for printing, searching, or saving a document. Explain that it is necessary to provide an equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). #### Ideas to Assess Knowledge for Topic @@ -220,7 +220,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Decorative images are used for ornamental purposes and convey no information or function. Build on [Designer Module 1: Color and Layout](/curricula/designer-modules/color-and-layout/) to explain accessibility requirements such as use of color, ability to resize, and flexibility in the context of decorative images. Decorative images require empty text alternatives, so that they can be ignored by assistive technologies, and reduce noise. Explain that determining if an image is decorative is a responsibility shared with the content author. +Decorative images are used for ornamental purposes and convey no information or function. Build on [Designer Module 1: Color and Layout](/curricula/designer-modules/color-and-layout/) to explain accessibility requirements such as use of color, ability to resize, and adaptability in the context of decorative images. Decorative images require empty text alternatives, so that they can be ignored by assistive technologies, and reduce noise. Explain that determining if an image is decorative is a responsibility shared with the content author. #### Learning Outcomes for Topic @@ -228,7 +228,7 @@ Students should be able to: * describe the differences between decorative and non-decorative images depending on the type of information conveyed by the image and the overall context * describe different ways to present information contained in an image in the surrounding content so that the image can be considered decorative -* evaluate the potential distraction and cognitive overload from using too many decorative images and justify the use of decoraative images that avoid distractions and cognitive overload +* evaluate the potential distraction and cognitive overload from using too many decorative images and justify the use of decorative images that avoid distractions and cognitive overload * explain how the overuse of decorative images could become distracting for some users and slow down loading times and interaction for other users * identify related requirements for developers to code decorative images so that they are skipped by assistive technologies diff --git a/content/designer/information-design.md b/content/designer/information-design.md index f203b801e..d9b3ab112 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -29,23 +29,22 @@ navigation: Courses based on this module should: -* present design strategies for splitting large blocks of information into smaller pieces that are easier to read and understand -* present design strategies for grouping information that shares a common purpose to make such information easier to understand +* describe several approaches to make information understandable by all users +* describe several approaches to communicate the structure, relations, and purpose information ## Learning Outcomes for Module Students should be able to: -* describe approaches to break down different types of content into smaller and more manageable pieces for example using: +* describe approaches to break down different types of content into smaller and more manageable pieces, for example using: * headings, pages, and chapter markers * lists, simpler tables, and plain text to convey information presented in complex tables * groups of form controls that share a common purpose - * filters to display smaller data subsets from a given large data set * describe the use of visual and non-visual cues to make information in multi-step processes more understandable * describe how to communicate the structure of multi-page articles or processes visually and non-visually * describe how to provide information about the total number of items and about the current item in a multi-step process visually and non-visually * evaluate the use of different mechanisms to convey the information, including text, tables, grouping, and graphical representations depending on user needs -* identify related requirements for developers to programmatically associate headings, table header cells and data cells, as well as form labels and instructions to their corresponding control +* identify related requirements for developers to programmatically associate headings, table header cells and data cells, as well as form labels and instructions, to their corresponding control {% include excol.html type="all" %} @@ -116,7 +115,7 @@ Students should be able to: * chapter markers (in digital publications) * create graphical representations that accompany the text, to make the information easier to understand; for example a diagram representation of the process described in the text” * evaluate the use of professional terms, idioms, and jargon, and justify the use of definitions for such terms to support readability -* evaluate the use of acronyms and abbreviations, and justify the use of expanded forms for such abbreviations and acronymms to support readability +* evaluate the use of acronyms and abbreviations, and justify the use of expanded forms for such abbreviations and acronyms to support readability * identify related requirements for developers to make language programmatically determined * identify related requirements for content authors to provide clear language and easy-to-read texts whenever possible diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index dd95ad7b3..49aab0837 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -43,7 +43,7 @@ Students should be able to: * ways for users to interact with the alternatives * evaluate the need for designing custom media players and justify the use of existing media players with support for accessibility * design media player controls that have clear and descriptive names, that are easy to find, and that are always reachable for users -* design media players that support different methods of interaction, including mouse, keyboard, touch, and voice +* design media players with support for different methods of interaction, including mouse, keyboard, touch, and voice * design mechanisms to mute and control the volume of auto-playing audio * design mechanisms to pause, stop, and hide moving, blinking, and auto-updating content, including animations and carousels * identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding media content @@ -187,9 +187,9 @@ Optional ideas to teach the learning outcomes: * [G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)](https://www.w3.org/WAI/WCAG21/Techniques/general/G152), * [G186: Using a control in the Web page that stops moving, blinking, or auto-updating content](https://www.w3.org/WAI/WCAG21/Techniques/general/G186), and * [G187: Using a technology to include blinking content that can be turned off via the user agent](https://www.w3.org/WAI/WCAG21/Techniques/general/G187). -* Show examples of flashing content and explain that they can cause seizures and physical reactions for some people. Emphasize that all components of the content need to be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole web page or application. For references on how to design interfaces that support flashing below the general flash and red flash thresholds or that support flashing below 3 seconds, see techniques [G19: Ensuring that no component of the content flashes more than three times in any 1-second period](https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html) and [G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold](https://www.w3.org/WAI/WCAG21/Techniques/general/G15.html). +* Show examples of flashing content and explain that they can cause seizures and physical reactions for some people. Emphasize that all components of the content need to be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole web page or application. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash below 3 seconds, see techniques [G19: Ensuring that no component of the content flashes more than three times in any 1-second period](https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html) and [G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold](https://www.w3.org/WAI/WCAG21/Techniques/general/G15.html). * Show examples of interactions triggered by animations, such as additional movements when scrolling and decorative gimmicks. Explain that these animations can cause distraction and vestibular disorders (such as dizziness, nausea, and headaches) for some people. Discuss the use of preferences as well as technology specific properties to reduce or disable such animations. -* Demonstrate the use of a screen reader to navigate an application that plays audio automatically for more than 3 seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a mechanism to pause or control the volume of that audio. Explain that the operating system often provides such mechanism. For references on how to design interfaces that support mechanisms to pause or control the volume of any audio that plays automatically, see the following techniques: +* Demonstrate the use of a screen reader to navigate an application that plays audio automatically for more than 3 seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a mechanism to pause or control the volume of that audio. Explain that the operating system often provides such mechanism. For references on how to design interfaces with mechanisms to pause or control the volume of any audio that plays automatically, see the following techniques: * [G60: Playing a sound that turns off automatically within three seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G60.html), * [G170: Providing a control near the beginning of the Web page that turns off sounds that play automatically](https://www.w3.org/WAI/WCAG21/Techniques/general/G170.html), and * [G171: Playing sounds only on user request](https://www.w3.org/WAI/WCAG21/Techniques/general/G171.html). diff --git a/content/designer/navigation.md b/content/designer/navigation.md index 2e9e90a21..5c11fd006 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation.md @@ -44,7 +44,7 @@ Students should be able to: * define mechanisms to identify blocks of repeated content * cooperate with developers to define and implement mechanisms that bypass blocks of repeated content * define mechanisms to help users to locate specific web pages within websites, for example by providing breadcrumb trails, site maps, and descriptive page titles -* evaluate the use of navigation mechanisms, including menus, tables of content, and sitemaps, and justify the use of navigation mechanisms that avoid distraction and unnecessary noise +* evaluate the use of navigational mechanisms, including menus, tables of content, and sitemaps, and justify the use of navigational mechanisms that avoid distraction and unnecessary noise * identify related requirements for developers to implement: * interactions for navigational mechanisms, including keyboard, mouse, touch, and voice * clear and descriptive names for navigational mechanisms @@ -169,7 +169,7 @@ Students should be able to: * expandable and collapsible contents to make it easier for users to skip over them * evaluate the use of mechanisms to skip blocks of repeated content, and jjustify the use of mechanisms that avoid distractions and unnecessary noise * define other navigational mechanisms to ensure web pages and application views can be reached using the following methods: - * search functionalities that support navigating to specific parts of the site + * search functionalities to navigate to specific parts of the site * site maps to provide an overview of the entire website * evaluate the amount of navigational mechanisms in use, and justify the use of mechanisms that help users navigate and orient From 78b3911fb5bb564e3cf5cfda748fa1eb7391ddbf Mon Sep 17 00:00:00 2001 From: daniel-montalvo <49305434+daniel-montalvo@users.noreply.github.com> Date: Thu, 2 Sep 2021 14:19:59 +0200 Subject: [PATCH 246/416] Fix typo --- content/designer/color-and-layout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/color-and-layout.md b/content/designer/color-and-layout.md index 7727a5924..a6900e3cf 100644 --- a/content/designer/color-and-layout.md +++ b/content/designer/color-and-layout.md @@ -29,7 +29,7 @@ navigation: Courses based on this module should: -* explain accessibility requirements for color contrast, styles, vissual and non visual cues, landmarks, and regions +* explain accessibility requirements for color contrast, styles, visual and non visual cues, landmarks, and regions * explain how people with disabilities rely on layouts that adapt to different screen sizes, configurations, and style sheets ## Learning Outcomes for Module From 71c0118380db7115ca57726a373a3a9d4b6553f8 Mon Sep 17 00:00:00 2001 From: daniel-montalvo <49305434+daniel-montalvo@users.noreply.github.com> Date: Thu, 2 Sep 2021 14:21:09 +0200 Subject: [PATCH 247/416] Fix typo --- content/designer/forms-interactions-and-feedback.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/forms-interactions-and-feedback.md b/content/designer/forms-interactions-and-feedback.md index cba1fa655..eacbde5ed 100644 --- a/content/designer/forms-interactions-and-feedback.md +++ b/content/designer/forms-interactions-and-feedback.md @@ -133,7 +133,7 @@ Show examples of different ways to group large amounts of selectable data. For e Students should be able to: * design user experiences that consider position, appearance, and naming for labels, instructions, and notifications -* define visual and non-visual instructions about which input fields are required by: +* define visual and non-visual instructions about which input fields are required * define clear instructions about changes in context before the control that originates such changes * define overall instructions about existing time limits in a form and about how they can be adjusted, extended, and turned off * define clear instructions about the current step and about the total number of steps involved in a multi-step form From 6be5fcb7a742a21cbd44ce9ac19512aa4c36484b Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 7 Sep 2021 15:27:23 +0200 Subject: [PATCH 248/416] Updates to structure of modules and topics --- _data/navigation.yml | 18 +-- content/designer/designer-modules.md | 29 ++-- content/designer/forms-design.md | 126 ++++++++++++++++++ content/designer/images-and-graphics.md | 14 +- content/designer/information-design.md | 17 +-- ...-and-feedback.md => interaction-design.md} | 104 +++------------ content/designer/multimedia-and-animations.md | 12 +- .../{navigation.md => navigation-design.md} | 46 +++---- .../{color-and-layout.md => visual-design.md} | 64 ++++----- 9 files changed, 250 insertions(+), 180 deletions(-) create mode 100644 content/designer/forms-design.md rename content/designer/{forms-interactions-and-feedback.md => interaction-design.md} (59%) rename content/designer/{navigation.md => navigation-design.md} (89%) rename content/designer/{color-and-layout.md => visual-design.md} (75%) diff --git a/_data/navigation.yml b/_data/navigation.yml index 180d9e34a..a7ba71b35 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -261,18 +261,20 @@ - name: Designer Modules url: "/curricula/designer-modules/" pages: - - name: Color and Layout - url: "/curricula/designer-modules/color-and-layout/" + - name: Visual Design + url: "/curricula/designer-modules/visual-design/" - name: Information Design url: "/curricula/designer-modules/information-design/" - - name: Navigation - url: "/curricula/designer-modules/navigation/" - - name: Images and Graphics - url: "/curricula/designer-modules/images-and-graphics/" + - name: Navigation Design + url: "/curricula/designer-modules/navigation-design/" + - name: Interaction Design + url: "/curricula/designer-modules/interaction-design/" + - name: Images and Graphics Design + url: "/curricula/designer-modules/images-and-graphics-design/" - name: Multimedia and Animations url: "/curricula/designer-modules/multimedia-and-animations/" - - name: Forms, Interactions, and Feedback - url: "/curricula/designer-modules/forms-interactions-and-feedback/" + - name: Forms Design + url: "/curricula/designer-modules/forms-design" - name: Changelog url: "/curricula/changelog/" hide: true diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 6458cb286..14652eec0 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -19,7 +19,7 @@ parent_in_h1: name: title navigation: previous: /curricula/developer-modules/rich-applications/ - next: /curricula/designer-modules/color-and-layout/ + next: /curricula/designer-modules/visual-design/ --- ## Introduction @@ -65,29 +65,30 @@ The designer modules are designed for students who have achieved the learning ou ## Designer Modules -- [Module 1: Color and Layout (WIP)](/curricula/designer-modules/color-and-layout) - - [Topic: Color (WIP)](/curricula/designer-modules/color-and-layout/#topic-color) - - [Topic: Landmarks and Cues](/curricula/designer-modules/#topic-landmarks-and-cues) +- [Module 1: Visual Design [WIP]](/curricula/designer-modules/color-and-layout) + - [Topic: Color [WIP]](/curricula/designer-modules/color-and-layout/#topic-color) - [Topic: Styles](/curricula/designer-modules/color-and-layout/#topic-styles) - - [Topic: Adaptability (WIP)](/curricula/designer-modules/color-and-layout/#topic-adaptability) + - [Topic: Landmarks and Cues](/curricula/designer-modules/#topic-landmarks-and-cues) + - [Topic: Flexible Layouts [WIP]](/curricula/designer-modules/color-and-layout/#topic-adaptability) - [Module 2: Information Design](/curricula/designer-modules/information-design/) - [Topic: Text](/curricula/designer-modules/information-design/#topic-text) - - [Topic: Labels and Instructions (WIP)](/curricula/designer-modules/information-design/#topic-labels-and-instructions) + - [Topic: Labels and Instructions [WIP]](/curricula/designer-modules/information-design/#topic-labels-and-instructions) - [Topic: Tables](/curricula/designer-modules/information-design/#topic-tables) -- [Module 3: Navigation](/curricula/designer-modules/navigation/) - - [Topic: Menu Behaviors and Patterns](/curricula/designer-modules/navigation/#topic-menu-behaviors-and-patterns) - - [Topic: Other Navigation Mechanisms](/curricula/designer-modules/navigation/#topic-other-navigation-mechanisms) - - [Topic: Location](/curricula/designer-modules/navigation/#topic-location) -- [Module 4: Images and Graphics](/curricula/designer-modules/images-and-graphics/#topic-functional-images) +- [Module 3: Navigation Design](/curricula/designer-modules/navigation-design/) + - [Topic: Menu Behaviors and Patterns](/curricula/designer-modules/navigation-design/#topic-menu-behaviors-and-patterns) + - [Topic: Other Navigation Mechanisms](/curricula/designer-modules/navigation-design/#topic-other-navigation-mechanisms) + - [Topic: Location](/curricula/designer-modules/navigation-design/#topic-location) +- [Module 4: InteractionDesign](/curricula/designer-modules/interaction-design) +- [Module 5: Images and Graphics](/curricula/designer-modules/images-and-graphics/#topic-functional-images) - [Topic: Functional Images](/curricula/designer-modules/images-and-graphics/#topic-functional-images) - [Topic: Informative Images](/curricula/designer-modules/images-and-graphics/#topic-informative-images) - [Topic: Complex Images](/curricula/designer-modules/images-and-graphics/#topic-complex-images) - [Topic: Decorative Images](/curricula/designer-modules/images-and-graphics/#topic-decorative-images) -- [Module 5: Multimedia and Animations](/curricula/designer-modules/multimedia-and-animations/) +- [Module 6: Multimedia and Animations](/curricula/designer-modules/multimedia-and-animations/) - [Topic: Alternatives to Multimedia Content](/curricula/designer-modules/multimedia-and-animations/#topic-alternatives-to-multimedia-content) - Topic: Media Players [TBD] ??? - [Topic: Carousels, Movement and Animations](/curricula/designer-modules/multimedia-and-animations/#topic-carousels-movement-and-animations) -- [Module 6: Forms, Interactions, and Feedback](/curricula/designer-modules/forms-interactions-and-feedback/) - - [Topic: Forms Design (WIP)](/curricula/designer-modules/forms-interactions-and-feedback/#topic-forms-design) +- [Module 7: Forms Design](/curricula/designer-modules/forms-design/) + - [Topic: Forms Design [WIP]](/curricula/designer-modules/forms-interactions-and-feedback/#topic-forms-design) - [Topic: Keyboard Interactions](/curricula/designer-modules/forms-interactions-and-feedback/#topic-keyboard-interactions) - [Topic: Gestures and Motion](/curricula/designer-modules/forms-interactions-and-feedback/#topic-gestures-and-motion) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md new file mode 100644 index 000000000..a58c67172 --- /dev/null +++ b/content/designer/forms-design.md @@ -0,0 +1,126 @@ +--- +title: "[Draft] Module 7: Forms Design [WIP]" +nav_title: "Forms Design" +permalink: /curricula/designer-modules/forms-design/ +ref: /curricula/designer-modules/forms-design/ +lang: en +github: + repository: w3c/wai-curricula + path: content/designer/forms-design.md +license: creative-commons +acknowledgements: /curricula/acknowledgements/ +changelog: /curricula/changelog/ +footer: > +

Date: Updated @@ Month 2021. First published December 2019. CHANGELOG

+

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

+

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

parent_in_h1: + - ref: /curricula/designer-modules/ + name: nav_title + - ref: /curricula/ + name: "Curricula on Web Accessibility" +navigation: + previous: /curricula/designer-modules/multimedia-and-animations/ + next: +--- + +## Learning Outcomes for Module + +Students should be able to: + +* demonstrate how people with disabilities rely on form structures, labels, instructions, and notifications to understand and interact with forms +* define clear and distinguishable ways to identify form fields and other components that accept user input, including through naming and placement +* define textual instructions, color, and other visual cues to help understand the context, information, and functionality of user interface components +* define meaningful and descriptive notifications about imminent time limits, steps, errors, suggestions for correction, success messages, status changes, and feedback from user input + +{% include excol.html type="all" %} + +{% include excol.html type="start" %} + + +### Topic: Naming, Grouping, and Placement + +{% include excol.html type="middle" %} + +Refer back to [Designer Module 2: Information Design, Topic Labels and Instructions](/curricula/designer-modules/information-design/#topic-labels-and-instructions). Show examples of labels and instructions in the context of forms and other complex widgets. + +Show examples of different ways to group large amounts of selectable data. For example, filtering out data into smaller pieces to better handle data, and enable mechanisms to type the first letters of their desired option to select data more efficiently. + +#### Learning outcomes for Topic + +Students should be able to: + +* design user experiences that consider position, appearance, and naming for labels andinstructions +* define visual and non-visual instructions about which input fields are required +* define clear instructions about changes in context before the control that originates such changes +* define overall instructions about existing time limits in a form and about how to adjust them, extend them, and turn them off +* define clear instructions about the current step and about the total number of steps involved in a multi-step form +* define error messages in the page title or before the form control that: + * identify the fields in error + * describe the cause of the error + * provide suggestions to correct the error +* identify related requirements for developers to provide semantics for labels and instructions appropriately + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +* Show examples of different components that accept user input (such as buttons, links, lists, and grids) across rich applications or complex widgets. Emphasize that each should have a clear name that allows to identify its purpose. For reference on how to provide names for different user interface components, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). +* Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. +* Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several mechanisms, including textual and visual cues. +* Present examples of time limits, such as those warning about session expirations. Explain that instructions need to be provided so that users are aware of the time limits, and mechanisms need to be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designers' responsibility, whereas implementing mechanisms to stop, extend, or adjust time limits is a responsibility shared with the developer. +* Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. +* Show examples of different types of error messages, including overall information about errors, specific information about each of the fields in error, and suggestions for correcting such errors when possible. Show examples of user interfaces with and without such error messages and explain that these enable several groups of people with disabilities to better interact and understand the contents. +* Show examples of different mechanisms to communicate notifications, such as through text messages, semantic relations, haptic and audio feedback, and popup windows. +* Show examples of overlapping notifications in the context of complex applications. Explain that some users may find it daunting to process several notifications at the same time, so a mechanism needs to be defined that allows to prioritize notifications based on their relevance. Explain that defining mechanisms to prioritize notifications based on their relevance is a designers' responsibility, whereas implementing the mechanisms is a developers' responsibility. + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to assess knowledge: + +* Practical — Present students with a form and ask them to define labels for each of the fields. Assess how students provide clear and descriptive names for each of the form fields. +* Practical — Give students an application and ask them to provide names for each of the application subsections. Assess how students identify application subsections and provide clear and understandable names for each. +* Practical — Give students a form and ask them to provide the necessary instructions for users to understand each of the fields and fill in the form. Assess how students provide clear and concise instructions. + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + +### Topic: Errors and Notifications + +{% include excol.html type="middle" %} + +Show examples of notification messages. Explain that they need to be distinguishable by all users, including through visual cues and programmatically. + +Show examples of text and visual notifications for error messages and other types of feedback for forms and widgets. Explain that notifications may have different levels of priority when in the context of a complex application. Explain that defining such levels of priority and which types of notifications each of these levels should contain is a designers' responsibility whereas implementing these levels is a developers' responsibility. + +#### Learning Outcomes for Topic + +Students should be able to: + +* define meaningful and descriptive notification messages, for example: + * on input (to communicate if the provided input is valid or invalid + * on task completion (to communicate success or failure of a specific task) +* design user experiences to queue and prioritize application notifications coming from different components +* design user experiences to store and check notifications that disappear after a period of time at the users' pace +* identify related requirements for developers to implement notifications + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +* Demonstrate different types of error messages, including overall information about errors, specific information about each of the fields in error, and suggestions for correcting such errors when possible. Show examples of user interfaces with and without such error messages and explain that these enable several groups of people with disabilities to better interact and understand the contents. +* Show examples of different mechanisms to communicate notifications, such as through text messages, semantic relations, haptic and audio feedback, and popup windows. +* Show examples of overlapping notifications in the context of complex applications. Explain that some users may find it daunting to process several notifications at the same time, so a mechanism needs to be defined that allows to prioritize notifications based on their relevance. Explain that defining mechanisms to prioritize notifications based on their relevance is a designers' responsibility, whereas implementing the mechanisms is a developers' responsibility. + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to assess knowledge: + +* Practical — Give students an interface containing errors and ask them to provide an overall descriptive message informing that there are submission errors. Assess how students provide overall informative messages when there are submission errors +* Practical — Present students with a form field submission containing errors and ask them to provide notifications about each of the wrongly submitted field, together with suggestions for corrections when possible. Assess how students provide appropriate error messages for wrongly submitted fields and how they provide suggestions for corrections when possible. +* Practical — Give students a form field that validate on user input and ask them too provide descriptive validation messages. Assess how students provide clear validation messages for fields that validate on user input. +* Practical — + +{% include excol.html type="end" %} + +{% include excol.html type="all" %} \ No newline at end of file diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 682c9632c..51d89118f 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 4: Images and Graphics" +title: "[Draft] Module 5: Images and Graphics" nav_title: "Images and Graphics" permalink: /curricula/designer-modules/images-and-graphics/ ref: /curricula/designer-modules/images-and-graphics/ @@ -20,7 +20,7 @@ parent_in_h1: - ref: /curricula/ name: "Curricula on Web Accessibility" navigation: - previous: /curricula/designer-modules/information-design/ + previous: /curricula/designer-modules/interaction-design/ next: /curricula/designer-modules/multimedia-and-animations/ --- @@ -42,7 +42,7 @@ Students should be able to: * design consistent imagery to help users recognize the purpose of icons, thumbnails, and other graphical components * explain the issues associated with perception, interpretation, and rendering of images of text * explain how to avoid images of text by using technologies that achieve the desired visual presentation wherever possible -* evaluate the use of images and justify alternative ways to provide the information, including tables and plain text +* evaluate the use of images and select alternative ways to provide the information, including tables and plain text * identify related requirements for developers to code images and text alternatives appropriately * identify related requirements for content authors to provide appropriate descriptions for images, such as charts, diagrams, and other complex graphics @@ -61,7 +61,7 @@ Skills required for this module: * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) * [Designer Module 1: Color and Layout](/curricula/designer-modules/color-and-layout/) * [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) -* [Designer Module 3: Navigation](/curricula/designer-modules/navigation/) +* [Designer Module 3: Navigation Design](/curricula/designer-modules/navigation-design/) * Basic knowledge of: * Visual Design * Prototyping @@ -84,7 +84,7 @@ Skills required for this module: * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) * [Designer Module 1: Color and Layout](/curricula/designer-modules/color-and-layout/) * [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) - * [Designer Module 3: Navigation](/curricula/designer-modules/navigation/) + * [Designer Module 3: Navigation Design](/curricula/designer-modules/navigation-design/) * Visual Design * Prototyping * Responsive Design @@ -190,7 +190,7 @@ Explain that coordination among different team members is required to assess the Students should be able to: * use appropriate contrast ratios for complex images -* evaluate the use of complex images and justify other ways to present the information; for example using tables, simpler images, and plain text +* evaluate the use of complex images and select other ways to present the information; for example using tables, simpler images, and plain text * determine if and how complex images are operated using input devices, including mouse, keyboard, voice, and touch * consider placement and spacing for alternatives to complex images * design clear and consistent identification mechanisms for complex image descriptions, including appropriate headings and expandable and collapsible components @@ -228,7 +228,7 @@ Students should be able to: * describe the differences between decorative and non-decorative images depending on the type of information conveyed by the image and the overall context * describe different ways to present information contained in an image in the surrounding content so that the image can be considered decorative -* evaluate the potential distraction and cognitive overload from using too many decorative images and justify the use of decorative images that avoid distractions and cognitive overload +* evaluate the potential distraction and cognitive overload from using too many decorative images and select wwdecorative images that avoid distractions and cognitive overload * explain how the overuse of decorative images could become distracting for some users and slow down loading times and interaction for other users * identify related requirements for developers to code decorative images so that they are skipped by assistive technologies diff --git a/content/designer/information-design.md b/content/designer/information-design.md index d9b3ab112..0efe563c1 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 2: Information Design (WIP)" +title: "[Draft] Module 2: Information Design [WIP]" nav_title: "Information Design" permalink: /curricula/designer-modules/information-design/ ref: /curricula/designer-modules/information-design/ @@ -20,8 +20,8 @@ parent_in_h1: - ref: /curricula/ name: "Curricula on Web Accessibility" navigation: - previous: /curricula/designer-modules/navigation/ - next: /curricula/designer-modules/images-and-graphics/ + previous: /curricula/designer-modules/visual-design/ + next: /curricula/designer-modules/navigation-design/ --- ## Introduction @@ -29,13 +29,14 @@ navigation: Courses based on this module should: -* describe several approaches to make information understandable by all users +* demonstrate how people with disabilities use titles, headings, labels, instructions, imagery, and others to obtain and process information * describe several approaches to communicate the structure, relations, and purpose information ## Learning Outcomes for Module Students should be able to: +* explain how people with disabilities use titles, headings, labels, instructions, imagery, and others to obtain and process information * describe approaches to break down different types of content into smaller and more manageable pieces, for example using: * headings, pages, and chapter markers * lists, simpler tables, and plain text to convey information presented in complex tables @@ -114,8 +115,8 @@ Students should be able to: * pages * chapter markers (in digital publications) * create graphical representations that accompany the text, to make the information easier to understand; for example a diagram representation of the process described in the text” -* evaluate the use of professional terms, idioms, and jargon, and justify the use of definitions for such terms to support readability -* evaluate the use of acronyms and abbreviations, and justify the use of expanded forms for such abbreviations and acronyms to support readability +* evaluate the use of professional terms, idioms, and jargon, and select definitions for such terms to support readability +* evaluate the use of acronyms and abbreviations, and select expanded forms for such acronyms and abbreviations to support readability * identify related requirements for developers to make language programmatically determined * identify related requirements for content authors to provide clear language and easy-to-read texts whenever possible @@ -133,7 +134,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Present students with an eBook and ask them to define how it should be split into smaller and more manageable pieces so that it can be easier to navigate and understand. Assess how students use headings and rank levels, pages, and chapter markers to split large amounts of text into smaller and more manageable pieces. -* Practical — Give students a complex piece of text and ask them to complement it with diagrams and illustrations. Assess how students provide mechanisms to complement processes and instructions presented in text. +f* Practical — Give students a complex piece of text and ask them to complement it with diagrams and illustrations. Assess how students provide mechanisms to complement processes and instructions presented in text. * Practical — Present students with unusual words and abbreviations and ask them to define a mechanism to provide the explanation of such words or the expansion of the abbreviations. Assess how students define a mechanism to provide explanations of unusual words and expansions of abbreviations. {% include excol.html type="end" %} @@ -187,7 +188,7 @@ Students should be able to: * identify different ways of presenting tabular information, such as using several lists, or splitting a complex table into several simpler ones * define table header cells and data cells, and provide clear and distinguishable styles for each * create designs with graphical representations of complex tables that help users more easily understand its purpose and meaning -* evaluate the use of complex tables and justify the use of simpler ways to provide the information, for example: +* evaluate the use of complex tables and select simpler ways to provide the information, for example: * simpler tables * charts, diagrams, and other graphical representations * plain text diff --git a/content/designer/forms-interactions-and-feedback.md b/content/designer/interaction-design.md similarity index 59% rename from content/designer/forms-interactions-and-feedback.md rename to content/designer/interaction-design.md index eacbde5ed..fc99bcc77 100644 --- a/content/designer/forms-interactions-and-feedback.md +++ b/content/designer/interaction-design.md @@ -1,12 +1,12 @@ --- -title: "[Draft] Module 6: Forms, Interactions, and Feedback (WIP)" -nav_title: "Forms, Interactions, and Feedback" -permalink: /curricula/designer-modules/forms-interactions-and-feedback/ -ref: /curricula/designer-modules/forms-interactions-and-feedback/ +title: "[Draft] Module 4: Interaction Design [WIP]" +nav_title: "Interaction Design" +permalink: /curricula/designer-modules/interaction-design/ +ref: /curricula/designer-modules/interaction-design/ lang: en github: repository: w3c/wai-curricula - path: content/designer/forms-interactions-and-feedback.md + path: content/designer/interaction-design.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ @@ -18,10 +18,9 @@ footer: > name: nav_title - ref: /curricula/ name: "Curricula on Web Accessibility" - navigation: - previous: /curricula/designer-modules/multimedia-and-animations/ - next: + previous: /curricula/designer-modules/navigation-design/ + next: /curricula/designer-modules/images-and-graphics/ --- ## Introduction @@ -29,22 +28,18 @@ navigation: Courses based on this module should: -* explain strategies that people with disabilities use to interact with components that accept user input, such as forms, buttons, links, and widgets -* describe accessibility requirements related to interactions, instructions, semantics, cues, notifications, and feedback +* explain strategies that people with disabilities use to interact with components +* describe accessibility requirements related to input methods, including mouse, keyboard, touch, and voice ## Learning Outcomes for Module Students should be able to: -* explain strategies that people with disabilities use to interact with forms and other components that accept user input -* design user experiences for different input mechanisms, including mouse, touch, keyboard, and speech +* explain strategies that people with disabilities use to interact with components +* design user experiences for different input methods, including mouse, touch, keyboard, and speech * define keyboard interactions and meaningful sequences inside complex widgets, including buttons, carousels, sliders, tabs, and treeviews * evaluate the use of custom keyboard shortcuts for complex widgets and applications and provide information about their purpose and scope -* define clear and distinguishable ways to identify form fields and other components that accept user input, including through naming and placement -* define mechanisms to help understand the context, information, and functionality of user interface components, including through textual instructions, color, and other visual cues -* define meaningful and descriptive notifications about imminent time limits, steps, errors, suggestions for correction, success messages, status changes, and feedback from user input -* identify related requirements for developers to provide the necessary semantics for components that accept user input, error messages, notifications, and other feedback -* identify related requirements for developers to code custom keyboard interactions for components that accept user input +* identify related requirements for developers to code interactions for components, including through mouse, keyboard, touch, and voice {% include excol.html type="all" %} @@ -118,85 +113,30 @@ Topics to achieve the learning outcomes: {% include excol.html type="start" %} -### Topic: Forms Design - -{% include excol.html type="middle" %} - -Refer back to [Designer Module 2: Information Design, Topic Labels and Instructions](/curricula/designer-modules/information-design/#topic-labels-and-instructions). Show examples of labels and instructions in the context of forms and other complex widgets. - -Show examples of text and visual notifications for error messages and other types of feedback for forms and other custom widgets. Explain that notifications may have different levels of priority when in the context of a complex application. Defining such levels of priority and which types of notifications each of them should contain is a designers' responsibility. - -Show examples of different ways to group large amounts of selectable data. For example, filtering out data into smaller pieces to better handle data, and enable mechanisms to type the first letters of their desire option to select data more efficiently. - -#### Learning outcomes for Topic - -Students should be able to: - -* design user experiences that consider position, appearance, and naming for labels, instructions, and notifications -* define visual and non-visual instructions about which input fields are required -* define clear instructions about changes in context before the control that originates such changes -* define overall instructions about existing time limits in a form and about how they can be adjusted, extended, and turned off -* define clear instructions about the current step and about the total number of steps involved in a multi-step form -* define error messages in the page title or before the form control that - * identify the fields in error - * describe the cause of the error - * provide suggestions to correct the error -* define meaningful and descriptive notification messages, for example: - * on input (to communicate if the provided input is valid or invalid - * on task completion (to communicate success or failure of a specific task) -* design user experiences to queue and prioritize application notifications coming from different components -* design user experiences to store and check notifications that disappear after a period of time at the users' pace -* identify related requirements for developers to code labels, instructions, and notifications appropriately - -#### Teaching Ideas for Topic - -Optional ideas to teach the learning outcomes: - -* Show examples of different components that accept user input (such as buttons, links, lists, and grids) across rich applications or complex widgets. Emphasize that each should have a clear name that allows to identify its purpose. For reference on how to provide names for different user interface components, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). -* Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. -* Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several mechanisms, including textual and visual cues. -* Present examples of time limits, such as those warning about session expirations. Explain that instructions need to be provided so that users are aware of the time limits, and mechanisms need to be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designers' responsibility, whereas implementing mechanisms to stop, extend, or adjust time limits is a responsibility shared with the developer. -* Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. -* Show examples of different types of error messages, including overall information about errors, specific information about each of the fields in error, and suggestions for correcting such errors when possible. Show examples of user interfaces with and without such error messages and explain that these enable several groups of people with disabilities to better interact and understand the contents. -* Show examples of different mechanisms to communicate notifications, such as through text messages, semantic relations, haptic and audio feedback, and popup windows. -* Show examples of overlapping notifications in the context of complex applications. Explain that some users may find it daunting to process several notifications at the same time, so a mechanism needs to be defined that allows to prioritize notifications based on their relevance. Explain that defining mechanisms to prioritize notifications based on their relevance is a designers' responsibility, whereas implementing the mechanisms is a developers' responsibility. - -#### Ideas to Assess Knowledge for Topic - -Optional ideas to assess knowledge: - -* Practical — Present students with a form and ask them to define labels for each of the fields. Assess how students provide clear and descriptive names for each of the form fields. -* Practical — Give students an application and ask them to provide names for each of the application subsections. Assess how students identify application subsections and provide clear and understandable names for each. -* Practical — Give students a form and ask them to provide the necessary instructions for users to understand each of the fields and fill in the form. Assess how students provide clear and concise instructions. - -{% include excol.html type="end" %} - -{% include excol.html type="start" %} - ### Topic: Keyboard Interactions {% include excol.html type="middle" %} -Discuss standard keyboard interactions, such as the use of the tab, enter, escape, and arrow keys. Explain that providing custom keyboard interactions can favor efficiency, but can also disrupt the users' expectations, thus designers need to document these interactions and make them consistent throughout the interface. -Emphasize that defining the keyboard interactions is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. +Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain that providing custom keyboard interactions can favor efficiency, but can also disrupt the users' expectations. Thus designers need to document these interactions and make them consistent throughout the interface. +Emphasize that defining the keyboard interactions is a designers' responsibility, whereas implementing such interactions is a responsibility shared with the developer. #### Learning Outcomes for Topic Students should be able to: -* design user experiences for keyboard navigation through and inside custom components, for example: +* design user experiences for keyboard navigation through and inside components, for example: * using the tab key to move through different components * using the enter key to enter a specific component and to select a specific item on a component - * using the arrow keys to move through elements inside components, such as application menus, dialogs, list items and grid cells + * using the arrow keys to move through elements inside components, including application menus, dialogs, list items, and grid cells * using the escape key to exit components * using first letter navigation to jump to specific pieces of data in lists and grids * specific keyboard shortcuts to support efficiency * identify situations when it is necessary to provide additional keyboard shortcuts, for example when designing a custom functionality that is not keyboard supported by default -* design user experiences that avoid keyboard shortcut conflicts with the operating system, browser, and assistive technologies when possible +* evaluate the use of custom keyboard interactions and select keyboard interactions that avoid conflicts with the operating system, browser, and assistive technologies when possible * cooperate with developers to provide mechanisms to remap or disable conflicting shortcuts -* define mechanisms to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications +* define methods to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications * define focus indicators that are visible and that have appropriate contrast ratios for complex widgets -* describe related requirements for developers to implement keyboard support for components that accept user input +* identify related requirements for developers to implement keyboard support for components that have no keyboard support by default #### Teaching Ideas for Topic @@ -232,9 +172,9 @@ Discuss some gestures that require dragging and drawing specific paths on a touc Students should be able to: * use components that do not require motion as an alternative for device or user motion such as shaking -* design mechanisms to disable response to motion to prevent accidental actuation, such as undoing an action by shaking a device -* design alternatives to multi-pointer gestures (such as swipe or pinch) using single pointer activation -* design mechanisms to undoing or aborting an action carried out with path-based operations +* design methods to disable response to motion to prevent accidental actuation, for example undoing an action by shaking a device +* design alternatives to multi-pointer gestures (including swipe or pinch) using single pointer activation +* design methods to undo or abort an action carried out with path-based operations #### Teaching Ideas for Topic diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 49aab0837..89fca0241 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 5: Multimedia and Animations (WIP)" +title: "[Draft] Module 6: Multimedia and Animations [WIP]" nav_title: "Multimedia and Animations" permalink: /curricula/designer-modules/multimedia-and-animations/ ref: /curricula/designer-modules/multimedia-and-animations/ @@ -21,7 +21,7 @@ parent_in_h1: name: "Curricula on Web Accessibility" navigation: previous: /curricula/designer-modules/images-and-graphics/ - next: /curricula/designer-modules/forms-interactions-and-feedback/ + next: /curricula/designer-modules/forms-design/ --- ## Introduction @@ -41,7 +41,7 @@ Students should be able to: * design user experiences for audio descriptions, captions, transcripts, and sign language, including * mechanisms for turning on and off such alternatives * ways for users to interact with the alternatives -* evaluate the need for designing custom media players and justify the use of existing media players with support for accessibility +* evaluate the need for designing custom media players and select existing media players with support for accessibility where possible * design media player controls that have clear and descriptive names, that are easy to find, and that are always reachable for users * design media players with support for different methods of interaction, including mouse, keyboard, touch, and voice * design mechanisms to mute and control the volume of auto-playing audio @@ -65,7 +65,7 @@ Skills required for this module: * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) * [Designer Module 1: Color and Layout](/curricula/designer-modules/color-and-layout/) * [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) -* [Designer Module 3: Navigation](/curricula/designer-modules/navigation/) +* [Designer Module 3: Navigation Design](/curricula/designer-modules/navigation-design/) * [Designer Module 4: Images and Graphics](/curricula/designer-modules/images-and-graphics) * Basic knowledge of: * Visual Design @@ -97,7 +97,7 @@ Skills required for this module: * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) * [Designer Module 1: Color and Layout](/curricula/designer-modules/color-and-layout/) * [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) - * [Designer Module 3: Navigation](/curricula/designer-modules/navigation/) + * [Designer Module 3: Navigation Design](/curricula/designer-modules/navigation-design/) * [Designer Module 4: Images and Graphics](/curricula/designer-modules/images-and-graphics) * Visual Design * Prototyping @@ -160,7 +160,7 @@ Optional ideas to assess knowledge: {% include excol.html type="start" %} -### Topic: Carousels, Movement, and Animations +### Topic: Movement, and Animations {% include excol.html type="middle" %} diff --git a/content/designer/navigation.md b/content/designer/navigation-design.md similarity index 89% rename from content/designer/navigation.md rename to content/designer/navigation-design.md index 5c11fd006..8c100f8e1 100644 --- a/content/designer/navigation.md +++ b/content/designer/navigation-design.md @@ -1,12 +1,12 @@ --- -title: "[Draft] Module 3: Navigation" -nav_title: "Navigation" -permalink: /curricula/designer-modules/navigation/ -ref: /curricula/designer-modules/navigation/ +title: "[Draft] Module 3: Navigation Design" +nav_title: "Navigation Design" +permalink: /curricula/designer-modules/navigation-design/ +ref: /curricula/designer-modules/navigation-design/ lang: en github: repository: w3c/wai-curricula - path: content/designer/navigation.md + path: content/designer/navigation-design.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ @@ -20,8 +20,8 @@ parent_in_h1: - ref: /curricula/ name: "Curricula on Web Accessibility" navigation: - previous: /curricula/designer-modules/color-and-layout/ - next: /curricula/designer-modules/information-design/ + previous: /curricula/designer-modules/information-design/ + next: /curricula/designer-modules/interaction-design/ --- ## Introduction @@ -30,24 +30,24 @@ navigation: Courses based on this module should: * explain strategies that people with disabilities use to navigate websites and applications -* describe accessible behaviors, visual affordances, and interaction patterns of navigation menus and other navigational mechanisms +* describe accessible behaviors, visual affordances, and interaction patterns of navigation menus and other navigational components ## Learning Outcomes for Module Students should be able to: * explain strategies that people with disabilities use to navigate websites and applications -* design different types of navigational mechanisms, including menus, tables of contents, and site maps -* define different interactions for menus and other navigational mechanisms, including keyboard, mouse, touch, and voice +* design different types of navigational components, including menus, tables of contents, and site maps +* define different interactions for menus and other navigational components, including keyboard, mouse, touch, and voice * define clear and consistent visual and non-visual presentation of menus and menu items * define clear and consistent visual and non-visual indication of state changes for menu items -* define mechanisms to identify blocks of repeated content -* cooperate with developers to define and implement mechanisms that bypass blocks of repeated content -* define mechanisms to help users to locate specific web pages within websites, for example by providing breadcrumb trails, site maps, and descriptive page titles -* evaluate the use of navigational mechanisms, including menus, tables of content, and sitemaps, and justify the use of navigational mechanisms that avoid distraction and unnecessary noise +* identify blocks of repeated content +* cooperate with developers to define and implement methods to bypass blocks of repeated content +* define define breadcrumb trails, site maps, and descriptive page titles to help users locate specific web pages within websites +* evaluate the use of navigational components, including menus, tables of content, and sitemaps, and select navigational components that avoid distraction and unnecessary noise * identify related requirements for developers to implement: - * interactions for navigational mechanisms, including keyboard, mouse, touch, and voice - * clear and descriptive names for navigational mechanisms + * interactions for navigational components, including by keyboard, mouse, touch, and voice + * clear and descriptive names for navigational components * semantics for menus, menu items, and menu item states {% include excol.html type="all" %} @@ -151,11 +151,11 @@ Optional ideas to assess knowledge: {% include excol.html type="start" %} -### Topic: Other navigational mechanisms +### Topic: Other Navigational Components {% include excol.html type="middle" %} -Introduce other navigational mechanisms that may be used depending on the characteristics of the website or application. Explain that different groups of users rely on different navigational mechanisms. Discuss how to assess and balance which ones to use to favor various user experiences while avoiding distractions and unnecessary noise. +Introduce other navigational components that may be used depending on the characteristics of the website or application. Explain that different groups of users rely on different navigational components. Discuss how to assess and balance which ones to use to favor various user experiences while avoiding distractions and unnecessary noise. #### Learning Outcomes for Topic @@ -168,10 +168,10 @@ Students should be able to: * tables of contents at the top of the page that go to each area of the content * expandable and collapsible contents to make it easier for users to skip over them * evaluate the use of mechanisms to skip blocks of repeated content, and jjustify the use of mechanisms that avoid distractions and unnecessary noise -* define other navigational mechanisms to ensure web pages and application views can be reached using the following methods: +* define other navigational components to ensure web pages and application views can be reached using the following methods: * search functionalities to navigate to specific parts of the site * site maps to provide an overview of the entire website -* evaluate the amount of navigational mechanisms in use, and justify the use of mechanisms that help users navigate and orient +* evaluate the amount of navigational components in use, and select components that help users navigate and orient #### Teaching Ideas for Topic @@ -191,7 +191,7 @@ Optional ideas to assess knowledge: * Practical — Students define the blocks of repeated content in a website and cooperate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they work with developers to provide a mechanism to bypass such blocks. * Practical — Present students with an interface and ask them to provide multiple ways to navigate across the website. Assess how students identify the different user experiences for navigation, including search functionalities, breadcrumb trails, site maps, and tables of contents. -* Practical — Give students an interface with excessive use of navigational mechanisms and ask them to determine which of these navigational mechanisms should stay and which should be removed. Assess how students balance the use of navigational mechanisms to avoid distraction and unnecessary noise. +* Practical — Give students an interface with excessive use of navigational components and ask them to determine which of these navigational components should stay and which should be removed. Assess how students balance the use of navigational components to avoid distraction and unnecessary noise. {% include excol.html type="end" %} @@ -212,7 +212,7 @@ Students should be able to: * text and visual cues in the navigation menu to indicate the current page * descriptive page headings * breadcrumb trails -* evaluate the use of location mechanisms in use, and justify the use of mechanisms that avoid distractions and unnecessary noise +* evaluate the amount of location mechanisms in use, and select mechanisms that avoid distractions and unnecessary noise * identify related requirements for developers to apply semantics to page titles, headings, non-visual cues, and breadcrumb trails ### Teaching Ideas @@ -237,7 +237,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Portfolio — Students design the navigation menu and other navigational mechanisms for a website. Assess how students understand accessibility features of navigation across websites and applications. +* Portfolio — Students design the navigation menu and other navigational components for a website. Assess how students understand accessibility features of navigation across websites and applications. ## Teaching Resources diff --git a/content/designer/color-and-layout.md b/content/designer/visual-design.md similarity index 75% rename from content/designer/color-and-layout.md rename to content/designer/visual-design.md index ed15787dd..802481ce3 100644 --- a/content/designer/color-and-layout.md +++ b/content/designer/visual-design.md @@ -1,12 +1,12 @@ --- -title: "[Draft] Module 1: Color and Layout (WIP)" -nav_title: "Color and Layout" -permalink: /curricula/designer-modules/color-and-layout/ -ref: /curricula/designer-modules/color-and-layout/ +title: "[Draft] Module 1: Visual Design [WIP]" +nav_title: "Visual Design" +permalink: /curricula/designer-modules/visual-design/ +ref: /curricula/designer-modules/visual-design/ lang: en github: repository: w3c/wai-curricula - path: content/designer/color-and-layout.md + path: content/designer/visual-design.md license: creative-commons acknowledgements: /curricula/acknowledgements/ changelog: /curricula/changelog/ @@ -21,7 +21,7 @@ parent_in_h1: name: "Curricula on Web Accessibility" navigation: previous: /curricula/designer-modules/ - next: /curricula/designer-modules/navigation/ + next: /curricula/designer-modules/information-design/ --- ## Introduction @@ -29,8 +29,8 @@ navigation: Courses based on this module should: -* explain accessibility requirements for color contrast, styles, visual and non visual cues, landmarks, and regions -* explain how people with disabilities rely on layouts that adapt to different screen sizes, configurations, and style sheets +* demonstrate how people with disabilities rely on layouts that adapt to different screen sizes, configurations, and style sheets +* explain accessibility requirements for color, layout, spacing, and position ## Learning Outcomes for Module @@ -42,8 +42,8 @@ Students should be able to: * design layouts that adapt to different font sizes and spacing set by the user in browser and operating system settings * design layouts that adapt to different screen sizes, configurations, and user style sheets * use headings, landmarks, and spacing to group related content -* use a combination of text cues, patterns, and icons to convey information -* evaluate the use of too many design elements (in particular interactive widgets, images, and moving content) on a page, and justify the use of elements that avoid potential distraction and cognitive overload +* use visual and non-visual cues to convey information, including text, color, patterns, and icons +* evaluate the use of too many design elements, in particular interactive widgets, images, and moving content) on a page, and select elements that avoid potential distraction and cognitive overload * identify related requirements for developers to apply the necessary semantics to interface components {% include excol.html type="all" %} @@ -106,7 +106,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Explain how sufficient color contrast (contrast ratios in WCAG) are essential for people with disabilities to perceive, distinguish, and understand content. +Explain how sufficient color contrast (contrast ratio in WCAG) is essential for people with disabilities to perceive, distinguish, and understand content. Describe how some people rely on color to understand and distinguish content. Explain that some people cannot perceive color well or at all. Discuss different ways to supplement information that is presented using color, such as using shapes and icons. @@ -119,24 +119,24 @@ Students should be able to: * design text and images of text that have a color contrast of at least 4.5:1 with respect to their background * design large-scale text and images of text that have a color contrast of at least 3:1 with respect to their background * design components and graphics that have a color contrast of at least 3:1 with respect to their background -* define layouts that enable users to change colors based on customized screen sizes, screen configurations, and style sheets -* use visual cues in addition to color, for example using different patterns, shapes, and icons -* use non-visual cues for people who cannot perceive color, for example using text to complement information provided visually +* define layouts to enable users to change colors based on customized screen sizes, screen configurations, and style sheets +* use visual cues in addition to text color, for example using different patterns, shapes, and icons +* use text to complement information provided visually #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of how different pieces of text are perceived depending on their background color. Explain that color contrast for text (including images of text) need to be at least 4.5:1 with respect to their background. For references on how to apply sufficient color contrast to text (including images of text), see technique [G18: Ensuring that a color contrast of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). +* Show examples of sufficient and insufficient color contrast for text. Explain that color contrast for text (including images of text) need to be at least 4.5:1 with respect to their background. For references on how to apply sufficient color contrast to text (including images of text), see technique [G18: Ensuring that a color contrast of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). * Show examples of different interactive components, such as buttons and links, and explain that they should have a color contrast of at least 3:1. -* Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so supplemental methods to convey that information are required. For references on how to supplement information conveyed through color, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). +* Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so these users require additional methods to convey that information. For references on how to supplement information conveyed through color, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: * Short Answer Questions — Give students several components and ask them what the color contrast should be. Assess how students understand and distinguish sufficient color contrast for different components. -* Practical — Students design a paper prototype and apply sufficient color contrast to text, images of text, components, and graphics. Assess how students understand and apply sufficient color contrast based on the different components that they are designing. +* Practical — Students design a prototype and apply sufficient color contrast to text, images of text, components, and graphics. Assess how students understand and apply sufficient color contrast based on the different components that they are designing. * Practical — Discuss with students examples of information presented using color and ask them to supplement that information using other visual cues. Assess how students use shapes and icons to supplement information presented using color distinguishable. {% include excol.html type="end" %} @@ -164,9 +164,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Demonstrate the use of styles to distinguish links, buttons, form labels and instructions, from plain text. Explain how people rely on font types, font sizes, spacing, and color to distinguish components. +* Demonstrate the use of styles to distinguish links, buttons, and form labels and instructions, from plain text. Explain how people rely on font types, font sizes, spacing, and color to distinguish components. * Show examples of usable font sizes and explain how they support readability. Contrast previous examples with fonts that are not as easy to read. Emphasize that several user groups rely on customizable fonts to be able to read and understand content properly. -* Show examples of different page layouts with and without appropriate spacing. Explain how spacing allows for better readability of content and for better identification of the different parts of the user interface. +* Show examples of different page layouts with and without appropriate spacing. Explain how spacing allows for better readability of the content and for better identification of the different parts of the interface. #### Ideas to Assess Knowledge for Topic @@ -182,7 +182,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Explain how people with disabilities perceive different web page regions and content through text and visual landmarks and cues. Present different strategies to include such cues early in the design phase. +Explain how people with disabilities perceive different web page regions and content through text, landmarks, and cues. Present different strategies to include such text, landmarks, and cues early in the design phase. #### Learning Outcomes for Topic @@ -191,28 +191,28 @@ Students should be able to: * design focus indicators that enable people to tell where they are as they move through web pages and applications using the keyboard * define page regions by using appropriate visual and programmatic landmarks, such as headings * design layouts that enable to present landmarks and cues in different screen sizes, screen configurations, and style sheets -* use text cues to supplement information provided through vision only, for example to convey required form fields represented with an icon and available dates in a calendar represented with a different background color +* use text cues to supplement information provided through vision only, for example available dates in a calendar represented with a different background color #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: +* Invite students to use a web page that has appropriate focus indicators first, and then invite them to use a web page without focus indicators. Explain how focus indicators allow people using the keyboard only to determine where they are as they move through web pages and applications using the keyboard only. For reference on how to provide appropriate focus indicators, see techniques [G149: Using user interface components that are highlighted by the user agent when they receive focus](https://www.w3.org/WAI/WCAG21/Techniques/general/G149.html) and [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). * Show examples of different web page regions, such as header, navigation, main, and footer. Explain that several groups of people with disabilities rely on visual and programmatic landmarks to perceive such regions. Explain that defining landmarks and their styles is a designers' responsibility, whereas implementing such landmarks and their semantics is a developers' responsibility. * Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a form field is required and those with colors to convey available dates in a calendar. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). -* Invite students to use a web page that has appropriate focus indicators first, and then invite them to use a web page without focus indicators. Explain how focus indicators allow people using the keyboard only to determine where they are as they move through web pages and applications using the keyboard only. For reference on how to provide appropriate focus indicators, see techniques [G149: Using user interface components that are highlighted by the user agent when they receive focus](https://www.w3.org/WAI/WCAG21/Techniques/general/G149.html) and [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Give students a web page and ask them to define the appropriate landmarks and their styling for users to perceive such regions. Assess how students provide mechanisms to perceive such regions. -* Practical &mdash: Give students examples of information conveyed visually and ask them to provide text information to help understand the information. Assess how students provide the necessary textual information and visual cues to supplement information. +* Practical — Give students a web page and ask them to define the appropriate landmarks and their styling. Assess how students define landmarks and regions using a variety of methods, including semantics and styling. +* Practical &mdash: Give students examples of information conveyed visually and ask them to provide text to help understand the information. Assess how students provide the necessary textual information to supplement information conveyed visually. {% include excol.html type="end" %} {% include excol.html type="start" %} -### Topic: Adaptability +### Topic: Flexible Layouts {% include excol.html type="middle" %} @@ -223,27 +223,27 @@ Explain how people with disabilities rely on designs that adapt to different scr Students should be able to: * design layouts to support text resizing without loss of content and functionality -* design layouts to support text zooming and enlarginf in different viewport sizes and through multiple breakpoints +* design layouts to support text zooming and enlarging in different viewport sizes and through multiple breakpoints * design layouts that adapt their content view and operation to portrait and landscape orientations -* design layouts with sufficient target sizes to support tapping -* design layouts to support user customization line height, as well as spacing between paragraphs, words, and letters -* design meaningful focus orders that adapt to different viewports, screen sizes, and breakpoints +* design layouts with target sizes that adapt to different screen sizes and screen configurations +* design layouts to support user customization of line height, as well as spacing between paragraphs, words, and letters +* design meaningful focus orders that adapt to different viewports, screen sizes, and multiple breakpoints #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Explain that people with low vision often need to resize text to read it properly. Discuss with students the differences between web sites and applications that preserve content and functionality when resized up to 200% and those which do not. For references on how to ensure text resizes up to 200%, see technique [G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width](https://www.w3.org/WAI/WCAG21/Techniques/general/G179). +* Discuss with students the differences between web sites and applications that preserve content and functionality when resized up to 200% and those which do not. Explain that some people often need to resize text to read it properly. For references on how to ensure text resizes up to 200%, see technique [G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width](https://www.w3.org/WAI/WCAG21/Techniques/general/G179). * Discuss the use of multiple screen sizes, screen configurations, and style sheets by people with low vision. Explain that these configurations often go beyond the traditional mobile, tablet, and desktop breakpoints. * Show examples of user interfaces showing up in both portrait and landscape modes. Explain that the ability to show an interface both in portrait and landscape is important for people who cannot change their device orientation due to mobility impairments. -* Show examples of different tap targets and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that tap targets need to be large enough to accommodate different people's needs. * Show examples of different user interfaces that support customizing line height as well as spacing between paragraphs, words, and letters to support readability. +* Show examples of different tap targets and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that tap targets need to be large enough to accommodate different people's needs. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Students design different paper prototypes with different interface layouts considering text resizing, line height, spacing between paragraphs, words, and letters. Assess how students consider text resizing, line height, and spacing between paragraphs, words, and letters. +* Practical — Students design different prototypes with different interface layouts considering text resizing, line height, spacing between paragraphs, words, and letters. Assess how students consider text resizing, line height, and spacing between paragraphs, words, and letters. {% include excol.html type="end" %} From a1393bacb523dd71eb97d3bb7f3e98ea20aeae88 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 7 Sep 2021 15:39:16 +0200 Subject: [PATCH 249/416] Updating overall outline --- content/designer/designer-modules.md | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 14652eec0..a84b70bd9 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -68,27 +68,28 @@ The designer modules are designed for students who have achieved the learning ou - [Module 1: Visual Design [WIP]](/curricula/designer-modules/color-and-layout) - [Topic: Color [WIP]](/curricula/designer-modules/color-and-layout/#topic-color) - [Topic: Styles](/curricula/designer-modules/color-and-layout/#topic-styles) - - [Topic: Landmarks and Cues](/curricula/designer-modules/#topic-landmarks-and-cues) - - [Topic: Flexible Layouts [WIP]](/curricula/designer-modules/color-and-layout/#topic-adaptability) + - [Topic: Labels and Cues](/curricula/designer-modules/#topic-landmarks-and-cues) + - [Topic: Flexible Design [WIP]](/curricula/designer-modules/color-and-layout/#topic-adaptability) - [Module 2: Information Design](/curricula/designer-modules/information-design/) - [Topic: Text](/curricula/designer-modules/information-design/#topic-text) - [Topic: Labels and Instructions [WIP]](/curricula/designer-modules/information-design/#topic-labels-and-instructions) - [Topic: Tables](/curricula/designer-modules/information-design/#topic-tables) - [Module 3: Navigation Design](/curricula/designer-modules/navigation-design/) - [Topic: Menu Behaviors and Patterns](/curricula/designer-modules/navigation-design/#topic-menu-behaviors-and-patterns) - - [Topic: Other Navigation Mechanisms](/curricula/designer-modules/navigation-design/#topic-other-navigation-mechanisms) - - [Topic: Location](/curricula/designer-modules/navigation-design/#topic-location) + - [Topic: Site Navigation [TBD] + - [Topic: Page Navigation ([TBD]) - [Module 4: InteractionDesign](/curricula/designer-modules/interaction-design) -- [Module 5: Images and Graphics](/curricula/designer-modules/images-and-graphics/#topic-functional-images) + - [Topic: Keyboard Interaction](/curricula/designer-modules/interaction-design/#topic-keyboard-interaction) + - [Topic: Gestures and Motion](/curricula/designer-modules/interaction-design/#topic-gestures-and-motions) +- [Module 5: Images and Graphics](/curricula/designer-modules/images-and-graphics/) - [Topic: Functional Images](/curricula/designer-modules/images-and-graphics/#topic-functional-images) - [Topic: Informative Images](/curricula/designer-modules/images-and-graphics/#topic-informative-images) - [Topic: Complex Images](/curricula/designer-modules/images-and-graphics/#topic-complex-images) - [Topic: Decorative Images](/curricula/designer-modules/images-and-graphics/#topic-decorative-images) - [Module 6: Multimedia and Animations](/curricula/designer-modules/multimedia-and-animations/) - [Topic: Alternatives to Multimedia Content](/curricula/designer-modules/multimedia-and-animations/#topic-alternatives-to-multimedia-content) - - Topic: Media Players [TBD] ??? - - [Topic: Carousels, Movement and Animations](/curricula/designer-modules/multimedia-and-animations/#topic-carousels-movement-and-animations) + - [Topic: Movement and Animations](/curricula/designer-modules/multimedia-and-animations/#topic-carousels-movement-and-animations) - [Module 7: Forms Design](/curricula/designer-modules/forms-design/) - - [Topic: Forms Design [WIP]](/curricula/designer-modules/forms-interactions-and-feedback/#topic-forms-design) - - [Topic: Keyboard Interactions](/curricula/designer-modules/forms-interactions-and-feedback/#topic-keyboard-interactions) - - [Topic: Gestures and Motion](/curricula/designer-modules/forms-interactions-and-feedback/#topic-gestures-and-motion) + - Topic: Labels and Instructions [TBD] + - Topic: Error Prevention [TBD] + - Topic: Notifications [TBD] From 048f6ab5f5de3d9d328c76fd74eca3b956107d1e Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 7 Sep 2021 15:42:06 +0200 Subject: [PATCH 250/416] Fixing left nav --- _data/navigation.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_data/navigation.yml b/_data/navigation.yml index a7ba71b35..6fcc4001d 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -269,8 +269,8 @@ url: "/curricula/designer-modules/navigation-design/" - name: Interaction Design url: "/curricula/designer-modules/interaction-design/" - - name: Images and Graphics Design - url: "/curricula/designer-modules/images-and-graphics-design/" + - name: Images and Graphics + url: "/curricula/designer-modules/images-and-graphics/" - name: Multimedia and Animations url: "/curricula/designer-modules/multimedia-and-animations/" - name: Forms Design From b300a615e2e460d782a3bc170af00f18024a73a7 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 7 Sep 2021 16:47:30 +0200 Subject: [PATCH 251/416] Updating references --- content/designer/designer-modules.md | 8 ++++---- content/designer/images-and-graphics.md | 6 +++--- content/designer/information-design.md | 6 +++--- content/designer/multimedia-and-animations.md | 4 ++-- content/designer/navigation-design.md | 4 ++-- 5 files changed, 14 insertions(+), 14 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index a84b70bd9..6c9a00e9c 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -65,11 +65,11 @@ The designer modules are designed for students who have achieved the learning ou ## Designer Modules -- [Module 1: Visual Design [WIP]](/curricula/designer-modules/color-and-layout) - - [Topic: Color [WIP]](/curricula/designer-modules/color-and-layout/#topic-color) - - [Topic: Styles](/curricula/designer-modules/color-and-layout/#topic-styles) +- [Module 1: Visual Design [WIP]](/curricula/designer-modules/visual-design) + - [Topic: Color [WIP]](/curricula/designer-modules/visual-design/#topic-color) + - [Topic: Styles](/curricula/designer-modules/visual-design/#topic-styles) - [Topic: Labels and Cues](/curricula/designer-modules/#topic-landmarks-and-cues) - - [Topic: Flexible Design [WIP]](/curricula/designer-modules/color-and-layout/#topic-adaptability) + - [Topic: Flexible Design [WIP]](/curricula/designer-modules/visual-design/#topic-adaptability) - [Module 2: Information Design](/curricula/designer-modules/information-design/) - [Topic: Text](/curricula/designer-modules/information-design/#topic-text) - [Topic: Labels and Instructions [WIP]](/curricula/designer-modules/information-design/#topic-labels-and-instructions) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 51d89118f..5af7b822f 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -59,7 +59,7 @@ Skills required for this module: {% include excol.html type="middle" %} * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) -* [Designer Module 1: Color and Layout](/curricula/designer-modules/color-and-layout/) +* [Designer Module 1: Visual Design](/curricula/designer-modules/visual-design/) * [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) * [Designer Module 3: Navigation Design](/curricula/designer-modules/navigation-design/) * Basic knowledge of: @@ -82,7 +82,7 @@ Skills required for this module: * [WCAG Success Criterion 1.4.9 Images of Text (No Exception)](https://www.w3.org/WAI/WCAG21/quickref/#images-of-text-no-exception) * In-depth knowledge of: * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) - * [Designer Module 1: Color and Layout](/curricula/designer-modules/color-and-layout/) + * [Designer Module 1: Visual Design](/curricula/designer-modules/visual-design/) * [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) * [Designer Module 3: Navigation Design](/curricula/designer-modules/navigation-design/) * Visual Design @@ -220,7 +220,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Decorative images are used for ornamental purposes and convey no information or function. Build on [Designer Module 1: Color and Layout](/curricula/designer-modules/color-and-layout/) to explain accessibility requirements such as use of color, ability to resize, and adaptability in the context of decorative images. Decorative images require empty text alternatives, so that they can be ignored by assistive technologies, and reduce noise. Explain that determining if an image is decorative is a responsibility shared with the content author. +Decorative images are used for ornamental purposes and convey no information or function. Build on [Designer Module 1: Visual Design](/curricula/designer-modules/visual-design/) to explain accessibility requirements such as use of color, ability to resize, and adaptability in the context of decorative images. Decorative images require empty text alternatives, so that they can be ignored by assistive technologies, and reduce noise. Explain that determining if an image is decorative is a responsibility shared with the content author. #### Learning Outcomes for Topic diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 0efe563c1..e5a5ad870 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -60,7 +60,7 @@ Skills required for this module: {% include excol.html type="middle" %} * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) -* [Designer Module 1: Color and Layout](/curricula/designer-modules/color-and-layout/) +* [Designer Module 1: Visual Design](/curricula/designer-modules/visual-design/) * Basic knowledge of: * Visual Design * Prototyping @@ -85,7 +85,7 @@ Skills required for this module: * [WCAG Success Criterion 3.3.2 Labels or Instructions](https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions) * In-depth knowledge of: * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) - * [Designer Module 1: Color and Layout](/curricula/designer-modules/color-and-layout/) + * [Designer Module 1: Visual Design](/curricula/designer-modules/visual-design/) * Visual Design * Prototyping * Responsive Design @@ -200,7 +200,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of different types of information presented in tables. Explain that tables are used when there is a logical, tabular relationship between the information presented, for example when displaying a list of events with their date and venue. -* Refer back to [Designer Module 1: Topic Adaptability](/curricula/designer-modules/color-and-layout/#topic-adaptability) and explain that some users may require different ways of presenting tabular information. For example, providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. +* Refer back to [Designer Module 1: Topic Adaptability](/curricula/designer-modules/visual-design/#topic-adaptability) and explain that some users may require different ways of presenting tabular information. For example, providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. * Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells needs to be perceived both visually and programmatically. Explain that providing the styles is a designers' responsibility, whereas establishing the programmatic relationship is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 89fca0241..febac6e56 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -63,7 +63,7 @@ Skills required for this module: {% include excol.html type="middle" %} * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) -* [Designer Module 1: Color and Layout](/curricula/designer-modules/color-and-layout/) +* [Designer Module 1: Visual Design](/curricula/designer-modules/visual-design/) * [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) * [Designer Module 3: Navigation Design](/curricula/designer-modules/navigation-design/) * [Designer Module 4: Images and Graphics](/curricula/designer-modules/images-and-graphics) @@ -95,7 +95,7 @@ Skills required for this module: * [WCAG Success Criterion 3.2.5 Change on Request](https://www.w3.org/WAI/WCAG21/quickref/#change-on-request) * In-depth knowledge of: * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) - * [Designer Module 1: Color and Layout](/curricula/designer-modules/color-and-layout/) + * [Designer Module 1: Visual Design](/curricula/designer-modules/visual-design/) * [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) * [Designer Module 3: Navigation Design](/curricula/designer-modules/navigation-design/) * [Designer Module 4: Images and Graphics](/curricula/designer-modules/images-and-graphics) diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 8c100f8e1..7d4cbaf33 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -63,7 +63,7 @@ Skills required for this module: {% include excol.html type="middle" %} * [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) -* [Designer Module 1: Color and Layout](/curricula/designer-modules/color-and-layout/) +* [Designer Module 1: Visual Design](/curricula/designer-modules/visual-design/) * [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) * Basic knowledge of: * Visual Design @@ -91,7 +91,7 @@ Skills required for this module: * [WCAG 2 Success Criterion 3.2.3 Consistent Navigation](https://www.w3.org/WAI/WCAG21/quickref/#consistent-navigation) * In-depth knowledge of: * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) - * [Designer Module 1: Color and Layout](/curricula/designer-modules/color-and-layout/) + * [Designer Module 1: Visual Design](/curricula/designer-modules/visual-design/) * [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) * Visual Design * Prototyping From e9ba116bc0481f06eb4205ad787d847b880cb50b Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 10 Sep 2021 10:24:52 +0200 Subject: [PATCH 252/416] UPdates to navigation design --- content/designer/designer-modules.md | 11 ++-- content/designer/information-design.md | 14 +++-- content/designer/interaction-design.md | 2 +- content/designer/navigation-design.md | 81 +++++++++++++++++--------- content/designer/visual-design.md | 12 ++-- 5 files changed, 76 insertions(+), 44 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 6c9a00e9c..05412d751 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -68,16 +68,17 @@ The designer modules are designed for students who have achieved the learning ou - [Module 1: Visual Design [WIP]](/curricula/designer-modules/visual-design) - [Topic: Color [WIP]](/curricula/designer-modules/visual-design/#topic-color) - [Topic: Styles](/curricula/designer-modules/visual-design/#topic-styles) - - [Topic: Labels and Cues](/curricula/designer-modules/#topic-landmarks-and-cues) - - [Topic: Flexible Design [WIP]](/curricula/designer-modules/visual-design/#topic-adaptability) + - [Topic: Landmarks and Cues](/curricula/designer-modules/#topic-landmarks-and-cues) + - [Topic: Flexible Layouts [WIP]](/curricula/designer-modules/visual-design/#topic-flexible-layouts) - [Module 2: Information Design](/curricula/designer-modules/information-design/) - - [Topic: Text](/curricula/designer-modules/information-design/#topic-text) + - [Topic: Landmarks and Text](/curricula/designer-modules/information-design/#topic-landmarks-and-text) - [Topic: Labels and Instructions [WIP]](/curricula/designer-modules/information-design/#topic-labels-and-instructions) - [Topic: Tables](/curricula/designer-modules/information-design/#topic-tables) - [Module 3: Navigation Design](/curricula/designer-modules/navigation-design/) - [Topic: Menu Behaviors and Patterns](/curricula/designer-modules/navigation-design/#topic-menu-behaviors-and-patterns) - - [Topic: Site Navigation [TBD] - - [Topic: Page Navigation ([TBD]) + - [Topic: Site Navigation](/curricula/designer-modules/navigation-design/#topic-site-navigation) + - [Topic: Page Navigation](/curricula/designer-modules/navigation-design/#topic-page-navigation) + - [Topic: Page Identification](/curricula/designer-modules/navigation-design/#topic-page-identification) - [Module 4: InteractionDesign](/curricula/designer-modules/interaction-design) - [Topic: Keyboard Interaction](/curricula/designer-modules/interaction-design/#topic-keyboard-interaction) - [Topic: Gestures and Motion](/curricula/designer-modules/interaction-design/#topic-gestures-and-motions) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index e5a5ad870..c71c53ede 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -99,17 +99,18 @@ Topics to achieve the learning outcomes: {% include excol.html type="start" %} -### Topic: Text +### Topic: Landmarks and Text {% include excol.html type="middle" %} -Discuss ways to split large amounts of text into smaller pieces. For example, using headings and their corresponding rank levels, pages to split the contents into logical units, and chapter markers to indicate chapters in digital publications. +Discuss ways to split large amounts of text into smaller pieces. For example, using landmarks to define page regions, headings and their corresponding rank levels, pages to split the contents into logical units, and chapter markers to indicate chapters in digital publications. #### Learning Outcomes for Topic Students should be able to: * design textual content as manageable passages of text, for example by splitting larger blocks of text into smaller and more manageable pieces using: + * landmarks with their corresponding region type * headings (with their corresponding rank levels) * sidebars and other page regions * pages @@ -124,6 +125,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: +* Show examples of pages and explain how they are divided into several regions. Explain that, in addition to visually distinguishing these regions, semantics and text need to be added so that all users can understand the relationship between them. Explain that defining and planning the different regions is a designers' responsibility, whereas adding the semantics is a responsibility shared with the developer. * Show examples of online articles and forms. Discuss how these are divided into manageable pieces so that they are easier to understand and to navigate. For example, by using headings and their corresponding rank levels to indicate the different chapters, sections, and subsections of content. * Show examples of diagrams and illustrations that can complement the information presented in text. For example, visual instructions that supplement the textual information of a user manual. Explain that they help users with reading disabilities understand difficult pieces of text. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). * Show examples of words that may be difficult to understand or that are used in a restricted way. Explain that people who are not familiar with such words need definitions to understand their meaning. Explain that defining the mechanisms to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. @@ -145,14 +147,14 @@ f* Practical — Give students a complex piece of text and ask them to compl {% include excol.html type="middle" %} -Discuss the use of visual and non-visual cues (including labels, instructions, and graphical representations) to help people understand components. Explain that defining how to present these cues is a responsibility of the designer, whereas providing such cues is a responsibility shared with the content author. +Discuss the use of labels, instructions, and graphical representations to help people understand components. Explain that defining how to present labels, instructions, and graphical representations is a responsibility of the designer, whereas providing them is a responsibility shared with the content author. #### Learning Outcomes for Topic Students should be able to: * define clear and distinguishable names for components, including visual and programmatic labels -* define overall instructions to make information in multi-step processes more understandable, for example visual and non-visual cues, and graphical representations +* define overall instructions to make information in multi-step processes more understandable, for example text and graphical representations * define visual and non-visual instructions to communicate the total number of steps and the current step in multi-step forms and processes * define related controls, such as those collecting personal information, payment methods, and consent to legal conditions, and communicate such relationships visually and non-visually @@ -160,8 +162,10 @@ Students should be able to: Optional ideas to teach the learning outcomes: +* Show examples of names for components, including links, buttons, and form controls. Explain that these names help users identify these components. Explain that defining the presentation of these names is a designers' responsibility, implementing these names is a developers' responsibility, and defining these names is a responsibility shared with the content author. +* Show examples of overall instructions, for example indications of what will happen after pressing a button. Explain that these instructions help users better understand the purpose and functionality of components. Explain that defining the presentation of these instructions is a designer's responsibility, implementing these instructions is a developer's responsibility, and defining these instructions is a responsibility shared with the content author. +* Show examples of multi-step processes, such as a multi-step form, with and without instructions to indicate the current process and total number of steps. Explain that people rely on such instructions to get an understanding of where they are in the process adn how many step the process has. Explain that defining the presentation of such instructions is a designers' responsibility, implementing these instructions is a developers' responsibility, and providing these instructions is a responsibility shared with the content author. * Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to understand and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and programmatically, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look like is a designers' responsibility, whereas coding those relations is a developers' responsibility. -* Show examples of long data lists and grids, such as to select a country. Explain that it takes a lot of time for keyboard users to go one by one using the arrow keys to select their desired option. Present mechanisms to filter information so that it appears in smaller pieces, such as pseudo-search functionality that allows users to type the first letters of their desired choice. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index fc99bcc77..2041cc32e 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -151,7 +151,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Short Answer Questions — Students research about commonly used modifier keys of operating systems and assistive technologies. Assess how students understand the use of modifier keys in operating systems and assistive technologies. +* Short Answer Questions — Ask students about commonly used modifier keys of operating systems, browsers, and assistive technologies. Assess how students identify commonly used modifier keys in operating systems, browsers, and assistive technologies. * Practical — Present students with a user interface that can be interacted only with the mouse and ask them to define keyboard interaction patterns. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. * Practical — Students work with developers to avoid custom keyboard shortcut conflicts with existing operating system and assistive technology keystrokes. Assess how students work with other team members to develop strategies that avoid custom keyboard shortcut conflicts. diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 7d4cbaf33..29574da02 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -38,17 +38,16 @@ Students should be able to: * explain strategies that people with disabilities use to navigate websites and applications * design different types of navigational components, including menus, tables of contents, and site maps -* define different interactions for menus and other navigational components, including keyboard, mouse, touch, and voice +* define different interactions for navigational components, including keyboard, mouse, touch, and voice * define clear and consistent visual and non-visual presentation of menus and menu items * define clear and consistent visual and non-visual indication of state changes for menu items -* identify blocks of repeated content * cooperate with developers to define and implement methods to bypass blocks of repeated content -* define define breadcrumb trails, site maps, and descriptive page titles to help users locate specific web pages within websites -* evaluate the use of navigational components, including menus, tables of content, and sitemaps, and select navigational components that avoid distraction and unnecessary noise +* define site maps and descriptive page titles to help users locate specific web pages within websites +* evaluate the use of navigational components, including menus, tables of content, and site maps, and select navigational components that avoid distraction and unnecessary noise * identify related requirements for developers to implement: * interactions for navigational components, including by keyboard, mouse, touch, and voice * clear and descriptive names for navigational components - * semantics for menus, menu items, and menu item states + * additional semantics for navigational components, including menus, menu items, and menu item states {% include excol.html type="all" %} @@ -110,7 +109,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Show examples of different types of navigation menus, such as static, fly-out, and mega menus. Explain the different scenarios where each of them can be used. For references on the different types of menus and their uses, see the WAI tutorials on [Menus](https://www.w3.org/WAI/tutorials/menus/). +Show different types of navigation menus, for example static, fly-out, and mega menus. Explain the different scenarios where each of them can be used. For references on the different types of menus and their uses, see the WAI tutorials on [Menus](https://www.w3.org/WAI/tutorials/menus/). Explain styling conventions for menus, such as location, appropriate size, and ability for menus and menu items to resize depending on different user configurations. For references on how to apply accessible menu styles, see the WAI tutorial on [Menu Styling](https://www.w3.org/WAI/tutorials/menus/styling/). @@ -134,8 +133,8 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Present different types of navigation menus, such as static, fly-out, and mega menus. Explain conventions for accessible navigation menus, such as clear and consistent styling to convey menu behaviors and states. Introduce patterns for mouse, keyboard, and touch interaction with navigation menus. -* Demonstrate navigation menu interaction using different input devices, such as keyboard, mouse, touch, and voice. For example, activating a menu option by tapping, pressing the Enter key, and mouse clicking. Explain that defining the interactions is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. +* Present different types of navigation menus, such as static, fly-out, and mega menus. Explain conventions for accessible navigation menus, for example clear and consistent styling to convey menu behaviors and states. +* Demonstrate interactions with navigation menu using different input devices, including keyboard, mouse, touch, and voice. For example, activating a menu option by tapping, pressing the Enter and Space keys, and mouse clicking. Explain that defining the interactions is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. * Show examples of navigation menus and menu items large text. Explain that this text needs to adapt to different viewports and screen configurations, for example wrap so that it is perceived in its entirety. Explain that different languages may have different word sizes, so designers need to consider provisions for different word lengths. * Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Emphasize that the states of these menu items need to be communicated using visual cues as well as semantics. Explain that providing the visual cues is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. @@ -143,21 +142,56 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Students define mouse, keyboard, and touch interactions for navigation menus. for example, how to open, navigate, activate, and close such menus using the mouse, keyboard, and touch. Assess how students understand the need for different interaction patterns based on the input method in use. -* Practical — Present students with different navigation menu states, such as hover, focus, current, active, and visited, and ask them to provide visual cues to distinguish them from one another. Assess how students communicate visually the state of navigation menus and menu items. +* Practical — Students define mouse, keyboard, touch, and voice interactions for navigation menus. For example, how to open, navigate, activate, and close such menus using the mouse, keyboard, touch, and voice. Assess how students understand the need for different interaction patterns based on the input method in use. +* Practical — Present students with different navigation menu states, such as hover, focus, current, active, and visited, and ask them to provide visual and non-visual cues to distinguish them from one another. Assess how students communicate navigation menus and menu items states visually and non-visually. * Practical — Present students with navigation menus containing long strings of text and ask them to ensure the text is shown irrespective of the viewport and screen configuration used. Assess how students understand the diversity among different languages, viewports, and screen configurations. {% include excol.html type="end" %} {% include excol.html type="start" %} -### Topic: Other Navigational Components +### Topic: Site Navigation {% include excol.html type="middle" %} -Introduce other navigational components that may be used depending on the characteristics of the website or application. Explain that different groups of users rely on different navigational components. Discuss how to assess and balance which ones to use to favor various user experiences while avoiding distractions and unnecessary noise. +Build on [Foundation Module 6: Understanding and Involving Users](/curricula/foundation-modules/understanding-and-involving-users/). Discuss strategies that people use to navigate to different pages of the same site, including menus, breadcrumb trails, search functionalities, and site maps. Explain that different groups of users rely on different navigational components. Discuss how to assess and balance which ones to use to favor various user experiences while avoiding distractions and unnecessary noise. -#### Learning Outcomes for Topic +#### Learning Outcomes for Module + +Students should be able to: + +* define navigational components to help navigate to different pages of the same site, including: + * navigational menus to provide the overall site structure + * breadcrumb trails to communicate the current location within the site + * site maps to provide an overview of the entire website + * search functionalities to navigate to specific parts of the site + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +* Show examples of breadcrumb trails. Explain that they provide information about the user's location in the context of a whole website. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail](https://www.w3.org/WAI/WCAG21/Techniques/general/G65). +* Show examples of site maps and explain that they serve the purpose of providing an overview of the whole site. Explain that some users rely on them to better understand the structure of the site and to find its way more easily through it. For references on how to provide a site map, see [G63: Providing a site map](https://www.w3.org/WAI/WCAG21/Techniques/general/G63.html). +* Show examples of search functionalities. Explain that they help users find content by supporting navigation to different parts of the site. Emphasize that some users prefer this way of navigating, especially when they are already familiar with the site and know what they are looking for. For references on how to provide a search functionality, see technique [G161: Providing a search function to help users find content](https://www.w3.org/WAI/WCAG21/Techniques/general/G161). + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +* Practical — Present students with an interface and ask them to provide multiple ways to navigate across the website. Assess how students identify the different user experiences for navigation, including search functionalities, breadcrumb trails, site maps, and tables of contents. +* Practical — Give students an interface with excessive use of navigational components and ask them to determine which of these navigational components should stay and which should be removed. Assess how students balance the use of navigational components to avoid distraction and unnecessary noise. + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + +### Topic: Page Navigation + +{% include excol.html type="middle" %} + +Build on [Foundation Module 6: Understanding and Involving Users](/curricula/foundation-modules/understanding-and-involving-users/). Discuss strategies that people use to navigate to different parts of a web page, including tables of contents and methods to bypass blocks of repeated content. Explain that different groups of users rely on different navigational components. Discuss how to assess and balance which ones to use to favor various user experiences while avoiding distractions and unnecessary noise. + +### Learning Outcomes for Topic Students should be able to: @@ -167,11 +201,7 @@ Students should be able to: * a link at the beginning of a block of repeated content to go to the end of the block * tables of contents at the top of the page that go to each area of the content * expandable and collapsible contents to make it easier for users to skip over them -* evaluate the use of mechanisms to skip blocks of repeated content, and jjustify the use of mechanisms that avoid distractions and unnecessary noise -* define other navigational components to ensure web pages and application views can be reached using the following methods: - * search functionalities to navigate to specific parts of the site - * site maps to provide an overview of the entire website -* evaluate the amount of navigational components in use, and select components that help users navigate and orient +* evaluate the amount of page navigational components in use, and select components that help users navigate and orient #### Teaching Ideas for Topic @@ -181,8 +211,6 @@ Optional ideas to teach the learning outcomes: * [G1: Adding a link at the top of each page that goes directly to the main content area](https://www.w3.org/WAI/WCAG21/Techniques/general/G1.html), * [G123: Adding a link at the beginning of a block of repeated content to go to the end of the block](https://www.w3.org/WAI/WCAG21/Techniques/general/G123.html), and * [G124: Adding links at the top of the page to each area of the content](https://www.w3.org/WAI/WCAG21/Techniques/general/G124.html). -* Show examples of search functionalities. Explain that they help users find content by supporting navigation to different parts of the site. Emphasize that some users prefer this way of navigating, especially when they are already familiar with the site and know what they are looking for. For references on how to provide a search functionality, see technique [G161: Providing a search function to help users find content](https://www.w3.org/WAI/WCAG21/Techniques/general/G161). -* Show examples of site maps and explain that they serve the purpose of providing an overview of the whole site. Explain that some users rely on them to better understand the structure of the site and to find its way more easily through it. For references on how to provide a site map, see [G63: Providing a site map](https://www.w3.org/WAI/WCAG21/Techniques/general/G63.html). * Show examples of tables of contents, for example in an electronic book or document. Explain that they provide an overview of the whole document and allow navigation to specific parts of the content. For references on how to provide a table of contents, see technique [G64: Providing a Table of Contents](https://www.w3.org/WAI/WCAG21/Techniques/general/G64.html). #### Ideas to Assess Knowledge for Topic @@ -190,18 +218,16 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Students define the blocks of repeated content in a website and cooperate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they work with developers to provide a mechanism to bypass such blocks. -* Practical — Present students with an interface and ask them to provide multiple ways to navigate across the website. Assess how students identify the different user experiences for navigation, including search functionalities, breadcrumb trails, site maps, and tables of contents. -* Practical — Give students an interface with excessive use of navigational components and ask them to determine which of these navigational components should stay and which should be removed. Assess how students balance the use of navigational components to avoid distraction and unnecessary noise. {% include excol.html type="end" %} {% include excol.html type="start" %} -### Topic: Location +### Topic: Page Identification {% include excol.html type="middle" %} -Build on [Foundation Module 6: Understanding and Involving Users](/curricula/foundation-modules/understanding-and-involving-users/) to research strategies that people with disabilities use to locate a specific web page in a website. Discuss examples like breadcrumb trails, page titles, and text and visual cues to indicate the current page. +Explain strategies that people use to identify web pages, including page titles, as well as text and visual cues in the navigational menu to indicate the current page. #### Learning Outcomes for Topic @@ -211,16 +237,14 @@ Students should be able to: * descriptive page titles * text and visual cues in the navigation menu to indicate the current page * descriptive page headings - * breadcrumb trails * evaluate the amount of location mechanisms in use, and select mechanisms that avoid distractions and unnecessary noise -* identify related requirements for developers to apply semantics to page titles, headings, non-visual cues, and breadcrumb trails +* identify related requirements for developers to apply semantics to page titles, headings, and text cues ### Teaching Ideas Optional ideas to teach the learning outcomes: -* Show examples of breadcrumb trails. Explain that they provide information about the user's location in the context of a whole website. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail](https://www.w3.org/WAI/WCAG21/Techniques/general/G65). -* Invite students to give examples of page titles they are familiar with and reflect with them on how well the titles describe the page contents. Explain that page titles are useful to identify the purpose of a specific web page within a website. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page, as some browsers and assistive technologies may truncate the titles or not show the at all. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). +* Invite students to give examples of page titles they are familiar with and reflect with them on how well the titles describe the page contents. Explain that page titles are useful to identify the purpose of a specific web page within a website. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page. Some browsers and assistive technologies may truncate the titles or not show them at all. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). #### Ideas to Assess Knowledge @@ -237,6 +261,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: +* Short Answer Questions — Ask students about the different types of navigational methods. Assess how students recite the different types of navigational methods for websites, documents, and applications. * Portfolio — Students design the navigation menu and other navigational components for a website. Assess how students understand accessibility features of navigation across websites and applications. ## Teaching Resources diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 802481ce3..d4f011d9d 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -41,7 +41,7 @@ Students should be able to: * design clear and distinguishable focus indicators, for example using borders, color, and highlighting * design layouts that adapt to different font sizes and spacing set by the user in browser and operating system settings * design layouts that adapt to different screen sizes, configurations, and user style sheets -* use headings, landmarks, and spacing to group related content +* use landmarks to group related content, including headings, spacing, and styling * use visual and non-visual cues to convey information, including text, color, patterns, and icons * evaluate the use of too many design elements, in particular interactive widgets, images, and moving content) on a page, and select elements that avoid potential distraction and cognitive overload * identify related requirements for developers to apply the necessary semantics to interface components @@ -182,14 +182,14 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Explain how people with disabilities perceive different web page regions and content through text, landmarks, and cues. Present different strategies to include such text, landmarks, and cues early in the design phase. +Explain how people with disabilities perceive different web page regions and content through text, landmarks, and cues. Present strategies to plan for the inclusion of such text, landmarks, and cues early in the visual design phase. #### Learning Outcomes for Topic Students should be able to: * design focus indicators that enable people to tell where they are as they move through web pages and applications using the keyboard -* define page regions by using appropriate visual and programmatic landmarks, such as headings +* define page regions by using appropriate visual landmarks, such as headings * design layouts that enable to present landmarks and cues in different screen sizes, screen configurations, and style sheets * use text cues to supplement information provided through vision only, for example available dates in a calendar represented with a different background color @@ -216,7 +216,9 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Explain how people with disabilities rely on designs that adapt to different screen sizes, screen configurations, and style sheets to identify, distinguish, and process content. +Explain how people with disabilities rely on layouts that adapt to different screen sizes, screen configurations, and style sheets to identify, distinguish, and process content. + +Demonstrate how content sequence, focus indicators, and target sizes adapt to interactions when using different screen sizes and screen configurations. Emphasize that these behaviors need to be planned early on in the visual design phase. #### Learning Outcomes for Topic @@ -243,7 +245,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Students design different prototypes with different interface layouts considering text resizing, line height, spacing between paragraphs, words, and letters. Assess how students consider text resizing, line height, and spacing between paragraphs, words, and letters. +* Practical — Students design different layouts considering text resizing, line height, spacing between paragraphs, words, and letters. Assess how students consider text resizing, line height, and spacing between paragraphs, words, and letters. {% include excol.html type="end" %} From 512103434f3c9759a246b3c4fb202f3228962754 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 10 Sep 2021 11:59:07 +0200 Subject: [PATCH 253/416] Fixing links --- content/designer/designer-modules.md | 16 ++++++++-------- content/designer/interaction-design.md | 2 +- content/designer/multimedia-and-animations.md | 2 +- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 05412d751..a16bb5ec5 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -65,23 +65,23 @@ The designer modules are designed for students who have achieved the learning ou ## Designer Modules -- [Module 1: Visual Design [WIP]](/curricula/designer-modules/visual-design) - - [Topic: Color [WIP]](/curricula/designer-modules/visual-design/#topic-color) +- [Module 1: Visual Design](/curricula/designer-modules/visual-design) + - [Topic: Color](/curricula/designer-modules/visual-design/#topic-color) - [Topic: Styles](/curricula/designer-modules/visual-design/#topic-styles) - - [Topic: Landmarks and Cues](/curricula/designer-modules/#topic-landmarks-and-cues) - - [Topic: Flexible Layouts [WIP]](/curricula/designer-modules/visual-design/#topic-flexible-layouts) + - [Topic: Landmarks and Cues](/curricula/designer-modules/visual-design/#topic-landmarks-and-cues) + - [Topic: Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts) - [Module 2: Information Design](/curricula/designer-modules/information-design/) - [Topic: Landmarks and Text](/curricula/designer-modules/information-design/#topic-landmarks-and-text) - - [Topic: Labels and Instructions [WIP]](/curricula/designer-modules/information-design/#topic-labels-and-instructions) + - [Topic: Labels and Instructions](/curricula/designer-modules/information-design/#topic-labels-and-instructions) - [Topic: Tables](/curricula/designer-modules/information-design/#topic-tables) - [Module 3: Navigation Design](/curricula/designer-modules/navigation-design/) - [Topic: Menu Behaviors and Patterns](/curricula/designer-modules/navigation-design/#topic-menu-behaviors-and-patterns) - [Topic: Site Navigation](/curricula/designer-modules/navigation-design/#topic-site-navigation) - [Topic: Page Navigation](/curricula/designer-modules/navigation-design/#topic-page-navigation) - [Topic: Page Identification](/curricula/designer-modules/navigation-design/#topic-page-identification) -- [Module 4: InteractionDesign](/curricula/designer-modules/interaction-design) +- [Module 4: Interaction Design](/curricula/designer-modules/interaction-design/) - [Topic: Keyboard Interaction](/curricula/designer-modules/interaction-design/#topic-keyboard-interaction) - - [Topic: Gestures and Motion](/curricula/designer-modules/interaction-design/#topic-gestures-and-motions) + - [Topic: Gestures and Motion](/curricula/designer-modules/interaction-design/#topic-gestures-and-motion) - [Module 5: Images and Graphics](/curricula/designer-modules/images-and-graphics/) - [Topic: Functional Images](/curricula/designer-modules/images-and-graphics/#topic-functional-images) - [Topic: Informative Images](/curricula/designer-modules/images-and-graphics/#topic-informative-images) @@ -89,7 +89,7 @@ The designer modules are designed for students who have achieved the learning ou - [Topic: Decorative Images](/curricula/designer-modules/images-and-graphics/#topic-decorative-images) - [Module 6: Multimedia and Animations](/curricula/designer-modules/multimedia-and-animations/) - [Topic: Alternatives to Multimedia Content](/curricula/designer-modules/multimedia-and-animations/#topic-alternatives-to-multimedia-content) - - [Topic: Movement and Animations](/curricula/designer-modules/multimedia-and-animations/#topic-carousels-movement-and-animations) + - [Topic: Movement and Animations](/curricula/designer-modules/multimedia-and-animations/#topic-movement-and-animations) - [Module 7: Forms Design](/curricula/designer-modules/forms-design/) - Topic: Labels and Instructions [TBD] - Topic: Error Prevention [TBD] diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index 2041cc32e..f5df228d6 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -113,7 +113,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="start" %} -### Topic: Keyboard Interactions +### Topic: Keyboard Interaction {% include excol.html type="middle" %} diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index febac6e56..b261a4656 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -160,7 +160,7 @@ Optional ideas to assess knowledge: {% include excol.html type="start" %} -### Topic: Movement, and Animations +### Topic: Movement and Animations {% include excol.html type="middle" %} From 32cac1ffd3eda623e9bb25ffcd75ed8b9a47d2fb Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 13 Sep 2021 14:30:44 +0200 Subject: [PATCH 254/416] Updates to modules and topics --- content/designer/forms-design.md | 110 +++++++++++++++++++++++-- content/designer/information-design.md | 8 +- content/designer/navigation-design.md | 6 +- content/designer/visual-design.md | 10 +-- 4 files changed, 115 insertions(+), 19 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index a58c67172..097e4c092 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -23,19 +23,97 @@ navigation: next: --- +## Introduction +{:.no-display} + +Courses based on this module should: + +* demonstrate how people with disabilities interact with forms +* explain accessibility requirements related to forms, including placement, structure, labels, instructions, and notifications + ## Learning Outcomes for Module Students should be able to: -* demonstrate how people with disabilities rely on form structures, labels, instructions, and notifications to understand and interact with forms -* define clear and distinguishable ways to identify form fields and other components that accept user input, including through naming and placement -* define textual instructions, color, and other visual cues to help understand the context, information, and functionality of user interface components -* define meaningful and descriptive notifications about imminent time limits, steps, errors, suggestions for correction, success messages, status changes, and feedback from user input +* demonstrate how people with disabilities rely on placement, structure, labels, instructions, and notifications to understand and interact with forms +* define consistent placement and appearance of form fields and other components that accept user input +* define clear and distinguishable names for forms and other components that accept user input +* define textual instructions, color, and other visual cues to help understand the context, information, and functionality of components that accept user input +* define clear and descriptive visual and non-visual cues about the current step and about the total number of steps in a multi-step process, including multi-step forms +* define clear and descriptive error messages that identify the field in error and provide suggestions for corrections where possible +* define meaningful and descriptive notifications, including for imminent time limits, success messages, status changes, and feedback from user input {% include excol.html type="all" %} +## Competencies + +Skills required for this module: + {% include excol.html type="start" %} +### Students + +{% include excol.html type="middle" %} + +* [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) +* Prior [Designer Modules](/curricula/designer-modules/) +* Knowledge of: + * Visual Design + * Prototyping + * Responsive Design + * Information Design + * Interaction Design + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + +### Instructors + +{% include excol.html type="middle" %} + +* Applied expertise in teaching: + * [WCAG Success Criterion 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) + * [WCAG Success Criterion 1.3.2 Meaningful Sequence](https://www.w3.org/WAI/WCAG21/quickref/#meaningful-sequence) + * [WCAG Success Criterion 1.3.3 Sensory Characteristics](https://www.w3.org/WAI/WCAG21/quickref/#sensory-characteristics) + * [WCAG Success Criterion 1.3.4 Orientation](https://www.w3.org/WAI/WCAG21/quickref/#orientation) + * [WCAG Success Criterion 1.4.1 Use of Color](https://www.w3.org/WAI/WCAG21/quickref/#use-of-color) + * [WCAG Success Criterion 1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum) + * [WCAG Success Criterion 1.4.4 Resize Text](https://www.w3.org/WAI/WCAG21/quickref/#resize-text) + * [WCAG Success Criterion 1.4.6 Contrast (Enhanced)](https://www.w3.org/WAI/WCAG21/quickref/#contrast-enhanced) + * [WCAG Success Criterion 1.4.8 Visual Presentation](https://www.w3.org/WAI/WCAG21/quickref/#visual-presentation) + * [WCAG Success Criterion 1.4.10 Reflow](https://www.w3.org/WAI/WCAG21/quickref/#reflow) + * [WCAG Success Criterion 1.4.11 Non-Text Contrast](https://www.w3.org/WAI/WCAG21/quickref/#non-text-contrast) + * [WCAG Success Criterion 1.4.12 Text Spacing](https://www.w3.org/WAI/WCAG21/quickref/#text-spacing) + * [WCAG Success Criterion 2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/quickref/#keyboard) + * [WCAG Success Criterion 2.1.2 No Keyboard Trap](https://www.w3.org/WAI/WCAG21/quickref/#no-keyboard-trap) + * [WCAG Success Criterion 2.2.1 Timing Adjustable](https://www.w3.org/WAI/WCAG21/quickref/#timing-adjustable) + * [WCAG Success Criterion 2.2.5 Re-Authenticating](https://www.w3.org/WAI/WCAG21/quickref/#re-authenticating) + * [WCAG Success Criterion 2.2.6 Timeouts](https://www.w3.org/WAI/WCAG21/quickref/#timeouts) + * [WCAG Success Criterion 2.4.3 Focus Order](https://www.w3.org/WAI/WCAG21/quickref/#focus-order) + * [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) + * [WCAG Success Criterion 2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG21/quickref/#focus-visible) + * [WCAG Success Criterion 3.3.1 Error Identification](https://www.w3.org/WAI/WCAG21/quickref/#error-identification) + * [WCAG Success Criterion 3.3.3 Error Suggestion](https://www.w3.org/WAI/WCAG21/quickref/#error-suggestion) + * [WCAG Success Criterion 3.3.4 Error Prevention](https://www.w3.org/WAI/WCAG21/quickref/#error-prevention-legal-financial-data) + * [WCAG Success Criterion 4.1.3 Status Messages](https://www.w3.org/WAI/WCAG21/quickref/#status-messages) +* In-depth knowledge of: + * [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) + * Prior [Designer Modules](/curricula/designer-modules/) + * Visual Design + * Prototyping + * Responsive Design + * Information Design + * Interaction Design +* Basic knowledge of coding techniques + +{% include excol.html type="end" %} + +## Topics to Teach + +Topics to achieve the learning outcomes: + +{% include excol.html type="start" %} ### Topic: Naming, Grouping, and Placement @@ -49,7 +127,7 @@ Show examples of different ways to group large amounts of selectable data. For e Students should be able to: -* design user experiences that consider position, appearance, and naming for labels andinstructions +* design user experiences that consider position, appearance, and naming for labels and instructions * define visual and non-visual instructions about which input fields are required * define clear instructions about changes in context before the control that originates such changes * define overall instructions about existing time limits in a form and about how to adjust them, extend them, and turn them off @@ -57,7 +135,7 @@ Students should be able to: * define error messages in the page title or before the form control that: * identify the fields in error * describe the cause of the error - * provide suggestions to correct the error + * provide suggestions to correct the error where possible * identify related requirements for developers to provide semantics for labels and instructions appropriately #### Teaching Ideas for Topic @@ -123,4 +201,22 @@ Optional ideas to assess knowledge: {% include excol.html type="end" %} -{% include excol.html type="all" %} \ No newline at end of file +{% include excol.html type="all" %} + +## Ideas to Assess Knowledge for Module + +Optional ideas to assess knowledge: + +[To be developed.] + +## Teaching Resources + +Suggested resources to support your teaching: + +* [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. +* [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Colors with Good Contrast (Web Accessibility Perspective)](/perspective-videos/contrast/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Clear Layout and Design (Web Accessibility Perspective)](/perspective-videos/layout/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Large Links, Buttons, and Controls (Web Accessibility Perspectives)](/perspective-videos/controls/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [Notifications and Feedback (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/notifications/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. +* [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. diff --git a/content/designer/information-design.md b/content/designer/information-design.md index c71c53ede..6f771b329 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -29,14 +29,14 @@ navigation: Courses based on this module should: -* demonstrate how people with disabilities use titles, headings, labels, instructions, imagery, and others to obtain and process information -* describe several approaches to communicate the structure, relations, and purpose information +* demonstrate how people with disabilities obtain and process information +* describe several approaches to communicate the structure, relations, and purpose of information using a variety of methods, including text, labels, instructions, semantics, and imagery ## Learning Outcomes for Module Students should be able to: -* explain how people with disabilities use titles, headings, labels, instructions, imagery, and others to obtain and process information +* explain how people with disabilities use several methods to obtain and process information, including text, labels, instructions, semantics, and imagery * describe approaches to break down different types of content into smaller and more manageable pieces, for example using: * headings, pages, and chapter markers * lists, simpler tables, and plain text to convey information presented in complex tables @@ -44,7 +44,7 @@ Students should be able to: * describe the use of visual and non-visual cues to make information in multi-step processes more understandable * describe how to communicate the structure of multi-page articles or processes visually and non-visually * describe how to provide information about the total number of items and about the current item in a multi-step process visually and non-visually -* evaluate the use of different mechanisms to convey the information, including text, tables, grouping, and graphical representations depending on user needs +* evaluate the use of several methods to convey the information, including text, labels, instructions, semantics, and imagery depending on user needs * identify related requirements for developers to programmatically associate headings, table header cells and data cells, as well as form labels and instructions, to their corresponding control {% include excol.html type="all" %} diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 29574da02..c87028db6 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -37,7 +37,7 @@ Courses based on this module should: Students should be able to: * explain strategies that people with disabilities use to navigate websites and applications -* design different types of navigational components, including menus, tables of contents, and site maps +* design different navigational components, including menus, tables of contents, and search functionalities * define different interactions for navigational components, including keyboard, mouse, touch, and voice * define clear and consistent visual and non-visual presentation of menus and menu items * define clear and consistent visual and non-visual indication of state changes for menu items @@ -111,7 +111,7 @@ Topics to achieve the learning outcomes: Show different types of navigation menus, for example static, fly-out, and mega menus. Explain the different scenarios where each of them can be used. For references on the different types of menus and their uses, see the WAI tutorials on [Menus](https://www.w3.org/WAI/tutorials/menus/). -Explain styling conventions for menus, such as location, appropriate size, and ability for menus and menu items to resize depending on different user configurations. For references on how to apply accessible menu styles, see the WAI tutorial on [Menu Styling](https://www.w3.org/WAI/tutorials/menus/styling/). +Explain styling conventions for menus, such as expected location, appropriate size, and ability for menus and menu items to resize depending on different user configurations. For references on how to apply accessible menu styles, see the WAI tutorial on [Menu Styling](https://www.w3.org/WAI/tutorials/menus/styling/). #### Learning Outcomes for Topic @@ -135,7 +135,7 @@ Optional ideas to teach the learning outcomes: * Present different types of navigation menus, such as static, fly-out, and mega menus. Explain conventions for accessible navigation menus, for example clear and consistent styling to convey menu behaviors and states. * Demonstrate interactions with navigation menu using different input devices, including keyboard, mouse, touch, and voice. For example, activating a menu option by tapping, pressing the Enter and Space keys, and mouse clicking. Explain that defining the interactions is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. -* Show examples of navigation menus and menu items large text. Explain that this text needs to adapt to different viewports and screen configurations, for example wrap so that it is perceived in its entirety. Explain that different languages may have different word sizes, so designers need to consider provisions for different word lengths. +* Show examples of navigation menus and menu items large text. Explain that the text needs to adapt to different viewports and screen configurations, for example wrap so that it is perceived in its entirety. Explain that different languages may have different word sizes, so designers need to consider provisions for different word lengths. * Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Emphasize that the states of these menu items need to be communicated using visual cues as well as semantics. Explain that providing the visual cues is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index d4f011d9d..5447a4012 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -29,8 +29,8 @@ navigation: Courses based on this module should: -* demonstrate how people with disabilities rely on layouts that adapt to different screen sizes, configurations, and style sheets -* explain accessibility requirements for color, layout, spacing, and position +* demonstrate how people with disabilities rely on layouts that adapt to different screen sizes, screen configurations, and style sheets +* explain accessibility requirements for color, layout, spacing, and position of components ## Learning Outcomes for Module @@ -40,7 +40,7 @@ Students should be able to: * design layouts with sufficient color contrast for text, images of text, and controls * design clear and distinguishable focus indicators, for example using borders, color, and highlighting * design layouts that adapt to different font sizes and spacing set by the user in browser and operating system settings -* design layouts that adapt to different screen sizes, configurations, and user style sheets +* design layouts that adapt to different screen sizes, screen configurations, and user style sheets * use landmarks to group related content, including headings, spacing, and styling * use visual and non-visual cues to convey information, including text, color, patterns, and icons * evaluate the use of too many design elements, in particular interactive widgets, images, and moving content) on a page, and select elements that avoid potential distraction and cognitive overload @@ -218,7 +218,7 @@ Optional ideas to assess knowledge: Explain how people with disabilities rely on layouts that adapt to different screen sizes, screen configurations, and style sheets to identify, distinguish, and process content. -Demonstrate how content sequence, focus indicators, and target sizes adapt to interactions when using different screen sizes and screen configurations. Emphasize that these behaviors need to be planned early on in the visual design phase. +Demonstrate how content sequence, focus indicators, and target sizes adapt to interactions when using different screen sizes, screen configurations, and style sheets. Emphasize that these behaviors need to be planned early on in the visual design phase. #### Learning Outcomes for Topic @@ -227,7 +227,7 @@ Students should be able to: * design layouts to support text resizing without loss of content and functionality * design layouts to support text zooming and enlarging in different viewport sizes and through multiple breakpoints * design layouts that adapt their content view and operation to portrait and landscape orientations -* design layouts with target sizes that adapt to different screen sizes and screen configurations +* design layouts with target sizes that adapt to different screen sizes, screen configurations, and style sheets * design layouts to support user customization of line height, as well as spacing between paragraphs, words, and letters * design meaningful focus orders that adapt to different viewports, screen sizes, and multiple breakpoints From 2a905b2962ca6fc46066ed7fcb90b1370444c850 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 13 Sep 2021 15:55:36 +0200 Subject: [PATCH 255/416] UPdates to forms design --- content/designer/forms-design.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 097e4c092..819839e01 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -28,20 +28,21 @@ navigation: Courses based on this module should: -* demonstrate how people with disabilities interact with forms -* explain accessibility requirements related to forms, including placement, structure, labels, instructions, and notifications +* demonstrate how people with disabilities interact with forms and other components that accept user input +* explain accessibility requirements related to forms and other components that accept user input, including placement, structure, labels, instructions, and notifications ## Learning Outcomes for Module Students should be able to: -* demonstrate how people with disabilities rely on placement, structure, labels, instructions, and notifications to understand and interact with forms +* demonstrate how people with disabilities rely on placement, structure, labels, instructions, and notifications to understand, navigate, and interact with forms * define consistent placement and appearance of form fields and other components that accept user input +* define interactions with forms and controls that accept user input, including through mouse, keyboard,touch, and voice * define clear and distinguishable names for forms and other components that accept user input * define textual instructions, color, and other visual cues to help understand the context, information, and functionality of components that accept user input * define clear and descriptive visual and non-visual cues about the current step and about the total number of steps in a multi-step process, including multi-step forms * define clear and descriptive error messages that identify the field in error and provide suggestions for corrections where possible -* define meaningful and descriptive notifications, including for imminent time limits, success messages, status changes, and feedback from user input +* define meaningful and descriptive visual and non-visual notifications, including for imminent time limits, success messages, status changes, and feedback from user input {% include excol.html type="all" %} From 93c976990ff35493d935a73d6645e52ced7296a7 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 13 Sep 2021 15:57:27 +0200 Subject: [PATCH 256/416] Updates to forms design --- content/designer/forms-design.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 819839e01..b02377820 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -43,6 +43,7 @@ Students should be able to: * define clear and descriptive visual and non-visual cues about the current step and about the total number of steps in a multi-step process, including multi-step forms * define clear and descriptive error messages that identify the field in error and provide suggestions for corrections where possible * define meaningful and descriptive visual and non-visual notifications, including for imminent time limits, success messages, status changes, and feedback from user input +* describe related requirements for developers to implement semantics and programmatic relationships for forms and other components that accept user input {% include excol.html type="all" %} From 950f86c1b0d63634ca3fff73632fdeed79312c38 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 14 Sep 2021 15:23:16 +0200 Subject: [PATCH 257/416] Back to previous version --- content/designer/information-design.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 6f771b329..b84523bb0 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -116,8 +116,8 @@ Students should be able to: * pages * chapter markers (in digital publications) * create graphical representations that accompany the text, to make the information easier to understand; for example a diagram representation of the process described in the text” -* evaluate the use of professional terms, idioms, and jargon, and select definitions for such terms to support readability -* evaluate the use of acronyms and abbreviations, and select expanded forms for such acronyms and abbreviations to support readability +* design methods to identify specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon +* design user methods to identify the expanded form or meaning of acronyms and abbreviations * identify related requirements for developers to make language programmatically determined * identify related requirements for content authors to provide clear language and easy-to-read texts whenever possible From 159a8c8db8ce79c160dc545472cc3682814a3689 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 14 Sep 2021 16:16:23 +0200 Subject: [PATCH 258/416] Add balance and select Lo --- content/designer/navigation-design.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index c87028db6..fac3a163a 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -165,6 +165,7 @@ Students should be able to: * breadcrumb trails to communicate the current location within the site * site maps to provide an overview of the entire website * search functionalities to navigate to specific parts of the site +* evaluate the amount of site navigational components in use, and select components that help users navigate and orient #### Teaching Ideas for Topic From 3994d58b4a40a2a3414c2f5fe2a28d42bb07fdd0 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 24 Sep 2021 13:40:25 +0200 Subject: [PATCH 259/416] Updates to modules and topics --- content/designer/designer-modules.md | 2 +- .../{forms-design.md => forms-and-widgets.md} | 74 ++++++++++++------- content/designer/images-and-graphics.md | 14 ++-- content/designer/information-design.md | 2 +- content/designer/interaction-design.md | 5 +- content/designer/multimedia-and-animations.md | 27 ++++--- content/designer/visual-design.md | 2 +- 7 files changed, 75 insertions(+), 51 deletions(-) rename content/designer/{forms-design.md => forms-and-widgets.md} (84%) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index a16bb5ec5..eeff6be57 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -90,7 +90,7 @@ The designer modules are designed for students who have achieved the learning ou - [Module 6: Multimedia and Animations](/curricula/designer-modules/multimedia-and-animations/) - [Topic: Alternatives to Multimedia Content](/curricula/designer-modules/multimedia-and-animations/#topic-alternatives-to-multimedia-content) - [Topic: Movement and Animations](/curricula/designer-modules/multimedia-and-animations/#topic-movement-and-animations) -- [Module 7: Forms Design](/curricula/designer-modules/forms-design/) +- [Module 7: Forms Design](/curricula/designer-modules/forms-and-widgets/) - Topic: Labels and Instructions [TBD] - Topic: Error Prevention [TBD] - Topic: Notifications [TBD] diff --git a/content/designer/forms-design.md b/content/designer/forms-and-widgets.md similarity index 84% rename from content/designer/forms-design.md rename to content/designer/forms-and-widgets.md index b02377820..1aeaae8ca 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-and-widgets.md @@ -1,8 +1,8 @@ --- -title: "[Draft] Module 7: Forms Design [WIP]" -nav_title: "Forms Design" -permalink: /curricula/designer-modules/forms-design/ -ref: /curricula/designer-modules/forms-design/ +title: "[Draft] Module 7: Forms and Widgets [WIP]" +nav_title: "Forms and Widgets" +permalink: /curricula/designer-modules/forms-and-widgets/ +ref: /curricula/designer-modules/forms-and-widgets/ lang: en github: repository: w3c/wai-curricula @@ -28,22 +28,22 @@ navigation: Courses based on this module should: -* demonstrate how people with disabilities interact with forms and other components that accept user input -* explain accessibility requirements related to forms and other components that accept user input, including placement, structure, labels, instructions, and notifications +* demonstrate how people with disabilities interact with forms and widgets +* explain accessibility requirements related to forms and widgets, including placement, structure, labels, instructions, and notifications ## Learning Outcomes for Module Students should be able to: * demonstrate how people with disabilities rely on placement, structure, labels, instructions, and notifications to understand, navigate, and interact with forms -* define consistent placement and appearance of form fields and other components that accept user input -* define interactions with forms and controls that accept user input, including through mouse, keyboard,touch, and voice -* define clear and distinguishable names for forms and other components that accept user input +* define consistent placement and appearance of form fields and widgets +* define interactions with forms and controls that accept user input, including through mouse, keyboard, touch, and voice +* define clear and distinguishable names for forms and widgets * define textual instructions, color, and other visual cues to help understand the context, information, and functionality of components that accept user input * define clear and descriptive visual and non-visual cues about the current step and about the total number of steps in a multi-step process, including multi-step forms * define clear and descriptive error messages that identify the field in error and provide suggestions for corrections where possible * define meaningful and descriptive visual and non-visual notifications, including for imminent time limits, success messages, status changes, and feedback from user input -* describe related requirements for developers to implement semantics and programmatic relationships for forms and other components that accept user input +* describe related requirements for developers to implement semantics and programmatic relationships for forms and widgets {% include excol.html type="all" %} @@ -121,7 +121,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Refer back to [Designer Module 2: Information Design, Topic Labels and Instructions](/curricula/designer-modules/information-design/#topic-labels-and-instructions). Show examples of labels and instructions in the context of forms and other complex widgets. +Refer back to [Designer Module 2: Information Design: Labels and Instructions](/curricula/designer-modules/information-design/#topic-labels-and-instructions). Show examples of labels and instructions in the context of forms and other complex widgets. Show examples of different ways to group large amounts of selectable data. For example, filtering out data into smaller pieces to better handle data, and enable mechanisms to type the first letters of their desired option to select data more efficiently. @@ -131,27 +131,20 @@ Students should be able to: * design user experiences that consider position, appearance, and naming for labels and instructions * define visual and non-visual instructions about which input fields are required -* define clear instructions about changes in context before the control that originates such changes +* define clear instructions about changes in context before the component that originates such changes * define overall instructions about existing time limits in a form and about how to adjust them, extend them, and turn them off * define clear instructions about the current step and about the total number of steps involved in a multi-step form -* define error messages in the page title or before the form control that: - * identify the fields in error - * describe the cause of the error - * provide suggestions to correct the error where possible * identify related requirements for developers to provide semantics for labels and instructions appropriately #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of different components that accept user input (such as buttons, links, lists, and grids) across rich applications or complex widgets. Emphasize that each should have a clear name that allows to identify its purpose. For reference on how to provide names for different user interface components, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). * Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. +* Show examples of different form fields and widgets, for example buttons, links, lists, and grids, across web pages and rich applications. Emphasize that each should have a clear name that allows to identify its purpose. For reference on how to provide names for different form elements and custom widgets, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). * Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several mechanisms, including textual and visual cues. * Present examples of time limits, such as those warning about session expirations. Explain that instructions need to be provided so that users are aware of the time limits, and mechanisms need to be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designers' responsibility, whereas implementing mechanisms to stop, extend, or adjust time limits is a responsibility shared with the developer. * Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. -* Show examples of different types of error messages, including overall information about errors, specific information about each of the fields in error, and suggestions for correcting such errors when possible. Show examples of user interfaces with and without such error messages and explain that these enable several groups of people with disabilities to better interact and understand the contents. -* Show examples of different mechanisms to communicate notifications, such as through text messages, semantic relations, haptic and audio feedback, and popup windows. -* Show examples of overlapping notifications in the context of complex applications. Explain that some users may find it daunting to process several notifications at the same time, so a mechanism needs to be defined that allows to prioritize notifications based on their relevance. Explain that defining mechanisms to prioritize notifications based on their relevance is a designers' responsibility, whereas implementing the mechanisms is a developers' responsibility. #### Ideas to Assess Knowledge for Topic @@ -165,7 +158,37 @@ Optional ideas to assess knowledge: {% include excol.html type="start" %} -### Topic: Errors and Notifications +### Topic: Error Prevention + +{% include excol.html type="middle" %} + +#### Learning Outcomes for Topic + +Students should be able to: + +* define error messages in the page title or before the form control that: + * identify the fields in error + * describe the cause of the error + * provide suggestions to correct the error where possible + +#### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes: + +* Show examples of different types of error messages, including overall information about errors, specific information about each of the fields in error, and suggestions for correcting such errors when possible. Show examples of user interfaces with and without such error messages and explain that these enable several groups of people with disabilities to better interact and understand the contents. + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to assess knowledge: + +* Practical — Give students an interface containing errors and ask them to provide an overall descriptive message informing that there are submission errors. Assess how students provide overall informative messages when there are submission errors +* Practical — Present students with a form field submission containing errors and ask them to provide notifications about each of the wrongly submitted field, together with suggestions for corrections when possible. Assess how students provide appropriate error messages for wrongly submitted fields and how they provide suggestions for corrections when possible. + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + +### Topic: Notifications {% include excol.html type="middle" %} @@ -188,7 +211,6 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Demonstrate different types of error messages, including overall information about errors, specific information about each of the fields in error, and suggestions for correcting such errors when possible. Show examples of user interfaces with and without such error messages and explain that these enable several groups of people with disabilities to better interact and understand the contents. * Show examples of different mechanisms to communicate notifications, such as through text messages, semantic relations, haptic and audio feedback, and popup windows. * Show examples of overlapping notifications in the context of complex applications. Explain that some users may find it daunting to process several notifications at the same time, so a mechanism needs to be defined that allows to prioritize notifications based on their relevance. Explain that defining mechanisms to prioritize notifications based on their relevance is a designers' responsibility, whereas implementing the mechanisms is a developers' responsibility. @@ -196,10 +218,8 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Give students an interface containing errors and ask them to provide an overall descriptive message informing that there are submission errors. Assess how students provide overall informative messages when there are submission errors -* Practical — Present students with a form field submission containing errors and ask them to provide notifications about each of the wrongly submitted field, together with suggestions for corrections when possible. Assess how students provide appropriate error messages for wrongly submitted fields and how they provide suggestions for corrections when possible. -* Practical — Give students a form field that validate on user input and ask them too provide descriptive validation messages. Assess how students provide clear validation messages for fields that validate on user input. -* Practical — +* Practical — Give students a form field that validate on user input and ask them to provide descriptive validation messages. Assess how students provide clear validation messages for fields that validate on user input. +* Practical — Give students an application with notifications coming from different view and ask them to define mechanisms to queue and prioritize such notifications. Assess how students prioritize and organize notifications coming from different views. {% include excol.html type="end" %} @@ -209,7 +229,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -[To be developed.] +Portfolio — Students design a form. Assess how students consider placement, structure, labels, instructions, and notifications when designing accessible forms. ## Teaching Resources diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 5af7b822f..0054d7439 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -104,7 +104,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Functional images convey functionality of a component. For example search, print, and save functionality. Explain requirements related to color and contrast to help users distinguish these images from other components. Show examples of graphical links and buttons as well as logos. Discuss with students how they would describe each of those examples. +Functional images convey functionality of a component. For example, search, print, and save functionality. Explain requirements related to color and contrast to help users distinguish these images from other components. Show examples of graphical links and buttons as well as logos. Discuss how they would describe each of those examples. #### Learning Outcomes for Topic @@ -128,7 +128,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Discuss with students different examples of images conveying function, such as a printer for a "print" button and a magnifying glass for a "search" button. Ask students to provide an appropriate text alternative. Assess how students identify images that convey function and how they provide text alternatives that describe the functionality of the component the image is attached to. +* Practical — Give students different examples of images conveying function, such as a printer for a "print" button and a magnifying glass for a "search" button. Ask students to provide an appropriate text alternative. Assess how students identify images that convey function and how they provide text alternatives that describe the functionality of the component the image is attached to. * Practical — Ask students to design a series of graphical buttons and links in a way that they are perceivable and distinguishable by all users. Assess how students apply accessibility requirements, such as contrast ratios, to graphical buttons and links. {% include excol.html type="end" %} @@ -139,7 +139,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Informative images convey information that is necessary to understand the content. Their description generally requires a short phrase or sentence. Show examples of images that convey information, such as pictures in a piece of news. Discuss with students how they would describe them. +Informative images convey information that is necessary to understand the content. Their description generally requires a short phrase or sentence. Show examples of images that convey information, such as pictures in a piece of news. Discuss how to describe them. Explain that providing text alternatives for informative images is a responsibility shared with the content author. @@ -164,7 +164,7 @@ Optional ideas to teach the learning outcomes: * Show examples of different images that convey information, such as images to provide instructions, and to identify people and objects. Explain that such information needs to be provided using text alternatives, so that the purpose of the image can be understood without having to look at the image. Emphasize that these alternatives may require coordination among designers, developers, and content authors. For references on how to provide text alternatives for images, see [G82: Providing a text alternative that identifies the purpose of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G82.html). * Explain that images of text present information intended to be read as text. Emphasize that sometimes it is difficult to tell visually if text has been coded as a text or as an image, so coordination among designers, developers, and content authors is needed to determine if the technologies in use can achieve the desired visual presentation. Emphasize that, if an image of text is still required, there needs to be a text alternative that conveys the same information as the image of text. Explain that coding an image of text appropriately is a responsibility of the developer, whereas providing descriptions for images of text is a responsibility shared with the content author. -* Show examples of different verification systems, such as CAPTCHA, to identify human beings trying to access a service or system. Explain that these mechanisms need to support several modalities, such as visual, auditory, and cognitive. For references on how to provide accessible CAPTCHA, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). +* Show examples of different verification systems, such as CAPTCHA, to identify human beings trying to access a service or system. Explain that these mechanisms need to support several modalities, including visual, auditory, and cognitive. For references on how to provide accessible CAPTCHA, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). #### Ideas to Assess Knowledge for Topic @@ -190,12 +190,12 @@ Explain that coordination among different team members is required to assess the Students should be able to: * use appropriate contrast ratios for complex images -* evaluate the use of complex images and select other ways to present the information; for example using tables, simpler images, and plain text +* evaluate the use of complex images and select other ways to present the information; for example, using tables, simpler images, and plain text * determine if and how complex images are operated using input devices, including mouse, keyboard, voice, and touch * consider placement and spacing for alternatives to complex images * design clear and consistent identification mechanisms for complex image descriptions, including appropriate headings and expandable and collapsible components * design user experiences for complex images, including how to get to the image descriptions, how the content of the description should look like, and if the descriptions could ultimately replace the image itself -* identify related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, such as diagrams, charts, maps and infographics +* identify related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, including diagrams, charts, maps, and infographics * identify related requirements for content authors to break down complex images into smaller and more manageable pieces, for example simpler images, tables, and plain text #### Teaching Ideas for Topic @@ -236,7 +236,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of images and graphics that do not convey function or information, such as ornamental icons. Explain that they serve ornamental purposes as long as people can understand and interact with the user interface with or without such icons. Explain that deciding what is the images role is a designers' responsibility, whereas coding the images so that they render with the appropriate role is a developers' responsibility. +* Show examples of images and graphics that do not convey function or information, such as ornamental icons. Explain that they serve ornamental purposes as long as people can understand and interact with the user interface with or without such icons. Explain that deciding what is the images' role is a designers' responsibility, whereas coding the images so that they render with the appropriate role is a developers' responsibility. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/information-design.md b/content/designer/information-design.md index b84523bb0..c21aca6ed 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -115,7 +115,7 @@ Students should be able to: * sidebars and other page regions * pages * chapter markers (in digital publications) -* create graphical representations that accompany the text, to make the information easier to understand; for example a diagram representation of the process described in the text” +* create graphical representations that accompany the text, to make the information easier to understand; for example, a diagram representation of the process described in the text * design methods to identify specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon * design user methods to identify the expanded form or meaning of acronyms and abbreviations * identify related requirements for developers to make language programmatically determined diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index f5df228d6..ce27527bc 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -117,7 +117,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain that providing custom keyboard interactions can favor efficiency, but can also disrupt the users' expectations. Thus designers need to document these interactions and make them consistent throughout the interface. +Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain that providing custom keyboard interactions can favor efficiency but can also disrupt the users' expectations. Thus, designers need to document these interactions and make them consistent throughout the interface. Emphasize that defining the keyboard interactions is a designers' responsibility, whereas implementing such interactions is a responsibility shared with the developer. #### Learning Outcomes for Topic @@ -199,7 +199,8 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -[To be developed.] +* Practical &mdash: Give students a web email client and ask them to provide the necessary custom keyboard shortcuts. Assess how students balance the use of standard versus custom keyboard shortcuts. +* Portfolio — Students design the interactions for a given interface. Assess how students design user experiences for different input methods, including mouse, touch, keyboard, and speech. ## Teaching Resources diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index b261a4656..b9aa97599 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -21,7 +21,7 @@ parent_in_h1: name: "Curricula on Web Accessibility" navigation: previous: /curricula/designer-modules/images-and-graphics/ - next: /curricula/designer-modules/forms-design/ + next: /curricula/designer-modules/forms-and-widgets/ --- ## Introduction @@ -37,18 +37,21 @@ Courses based on this module should: Students should be able to: * identify accessibility requirements for different types of audio and video content -* design the placement and spacing for alternatives to multimedia content, such as audio descriptions, captions, transcripts, and sign language -* design user experiences for audio descriptions, captions, transcripts, and sign language, including - * mechanisms for turning on and off such alternatives +* design user experiences for description, captions, transcripts, and sign languages, including: + * placement and spacing for alternatives to multimedia content + * mechanisms for turning on and off alternatives * ways for users to interact with the alternatives -* evaluate the need for designing custom media players and select existing media players with support for accessibility where possible -* design media player controls that have clear and descriptive names, that are easy to find, and that are always reachable for users -* design media players with support for different methods of interaction, including mouse, keyboard, touch, and voice -* design mechanisms to mute and control the volume of auto-playing audio -* design mechanisms to pause, stop, and hide moving, blinking, and auto-updating content, including animations and carousels -* identify related requirements for developers to programmatically associate alternatives and descriptions to their corresponding media content -* identify related requirements for developers to include accessibility support for media players -* identify related requirements for content authors to provide appropriate text transcripts, captions, audio descriptions, and sign language +* identify accessibility issues of media player, including: + * evaluate the need for designing custom media players and select existing media players with support for accessibility where possible + * select media players with support for different methods of interaction, including mouse, keyboard, touch, and voice + * select media player controls that have clear and descriptive names, that are easy to find, and that are always reachable for users +* design mechanisms to control automatic audio or movement, including: + * mute and control the volume of auto-playing audio + * pause, stop, and hide moving, blinking, and auto-updating content, including animations and carousels +* identify related requirements for: + * developers to programmatically associate alternatives and descriptions to their corresponding media content + * developers to include accessibility support for media players + * content authors to provide appropriate text transcripts, captions, audio descriptions, and sign language {% include excol.html type="all" %} diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 5447a4012..e1307982a 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -137,7 +137,7 @@ Optional ideas to assess knowledge: * Short Answer Questions — Give students several components and ask them what the color contrast should be. Assess how students understand and distinguish sufficient color contrast for different components. * Practical — Students design a prototype and apply sufficient color contrast to text, images of text, components, and graphics. Assess how students understand and apply sufficient color contrast based on the different components that they are designing. -* Practical — Discuss with students examples of information presented using color and ask them to supplement that information using other visual cues. Assess how students use shapes and icons to supplement information presented using color distinguishable. +* Practical — Discuss examples of information presented using color with students and ask them to supplement that information using other visual cues. Assess how students use shapes and icons to supplement information presented using color distinguishable. {% include excol.html type="end" %} From 53b7e690083b677ffe2deb2b529c71898631bae1 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 24 Sep 2021 14:00:39 +0200 Subject: [PATCH 260/416] Fixing nav --- _data/navigation.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_data/navigation.yml b/_data/navigation.yml index 6fcc4001d..1350393cd 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -273,8 +273,8 @@ url: "/curricula/designer-modules/images-and-graphics/" - name: Multimedia and Animations url: "/curricula/designer-modules/multimedia-and-animations/" - - name: Forms Design - url: "/curricula/designer-modules/forms-design" + - name: Forms and Widgets + url: "/curricula/designer-modules/forms-and-widgets" - name: Changelog url: "/curricula/changelog/" hide: true From c35e1eedf81abd5e5fb4c1285cc19af5579a1457 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 27 Sep 2021 15:11:50 +0200 Subject: [PATCH 261/416] Updates to modules and topics --- content/designer/designer-modules.md | 11 +++++---- content/designer/forms-and-widgets.md | 4 ++-- content/designer/images-and-graphics.md | 10 +++----- content/designer/information-design.md | 24 +++++++++---------- content/designer/interaction-design.md | 2 +- content/designer/multimedia-and-animations.md | 14 ++++------- content/designer/navigation-design.md | 14 +++++------ content/designer/visual-design.md | 6 ++--- .../understanding-and-involving-users.md | 1 + 9 files changed, 38 insertions(+), 48 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index eeff6be57..b53e37f1c 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -32,10 +32,11 @@ The designer modules guide the creation of courses that: * teach accessible design techniques for: * visual design * information design - * user experience + * navigation design * interaction design + * user experience -These modules have been organized so that they can be easily taught together with the [developer modules](/curricula/developer-modules/). If you are teaching other type of designers, feel free to change the structure so that it fits your audience needs. +These modules have been organized for designers whose work is clsoely related to the knowledge discussed in the [developer modules](/curricula/developer-modules/). If you are teaching other type of designers, feel free to change the structure so that it fits your audience needs. These modules focus on visual, information, user experience, and interaction aspects to design accessible web pages and applications. @@ -91,6 +92,6 @@ The designer modules are designed for students who have achieved the learning ou - [Topic: Alternatives to Multimedia Content](/curricula/designer-modules/multimedia-and-animations/#topic-alternatives-to-multimedia-content) - [Topic: Movement and Animations](/curricula/designer-modules/multimedia-and-animations/#topic-movement-and-animations) - [Module 7: Forms Design](/curricula/designer-modules/forms-and-widgets/) - - Topic: Labels and Instructions [TBD] - - Topic: Error Prevention [TBD] - - Topic: Notifications [TBD] + - Topic: Labels and Instructions + - Topic: Error Prevention + - Topic: Notifications diff --git a/content/designer/forms-and-widgets.md b/content/designer/forms-and-widgets.md index 1aeaae8ca..bca8e7b48 100644 --- a/content/designer/forms-and-widgets.md +++ b/content/designer/forms-and-widgets.md @@ -150,7 +150,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Present students with a form and ask them to define labels for each of the fields. Assess how students provide clear and descriptive names for each of the form fields. +* Practical — Give students a form and ask them to define labels for each of the fields. Assess how students provide clear and descriptive names for each of the form fields. * Practical — Give students an application and ask them to provide names for each of the application subsections. Assess how students identify application subsections and provide clear and understandable names for each. * Practical — Give students a form and ask them to provide the necessary instructions for users to understand each of the fields and fill in the form. Assess how students provide clear and concise instructions. @@ -182,7 +182,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Give students an interface containing errors and ask them to provide an overall descriptive message informing that there are submission errors. Assess how students provide overall informative messages when there are submission errors -* Practical — Present students with a form field submission containing errors and ask them to provide notifications about each of the wrongly submitted field, together with suggestions for corrections when possible. Assess how students provide appropriate error messages for wrongly submitted fields and how they provide suggestions for corrections when possible. +* Practical — Give students a form field submission containing errors and ask them to provide notifications about each of the wrongly submitted field, together with suggestions for corrections when possible. Assess how students provide appropriate error messages for wrongly submitted fields and how they provide suggestions for corrections when possible. {% include excol.html type="end" %} diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 0054d7439..5ad1beec0 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -59,9 +59,7 @@ Skills required for this module: {% include excol.html type="middle" %} * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) -* [Designer Module 1: Visual Design](/curricula/designer-modules/visual-design/) -* [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) -* [Designer Module 3: Navigation Design](/curricula/designer-modules/navigation-design/) +* Prior [Designer Modules](/curricula/designer-modules/) * Basic knowledge of: * Visual Design * Prototyping @@ -82,9 +80,7 @@ Skills required for this module: * [WCAG Success Criterion 1.4.9 Images of Text (No Exception)](https://www.w3.org/WAI/WCAG21/quickref/#images-of-text-no-exception) * In-depth knowledge of: * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) - * [Designer Module 1: Visual Design](/curricula/designer-modules/visual-design/) - * [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) - * [Designer Module 3: Navigation Design](/curricula/designer-modules/navigation-design/) + * Prior [Designer Modules](/curricula/designer-modules/) * Visual Design * Prototyping * Responsive Design @@ -170,7 +166,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to support assessment. -* Practical — Present students with an image of text and ask them to cooperate with other team roles such as developers and content authors to ensure the image has an equivalent alternative text. Assess how students identify the need for alternative text for images of text. +* Practical — Give students an image of text and ask them to cooperate with other team roles such as developers and content authors to ensure the image has an equivalent alternative text. Assess how students identify the need for alternative text for images of text. * Short Answer Questions — Present students with a situation where a human verification system needs to be used and ask them to provide authentication alternatives for other sensory characteristics apart from vision. Assess how students understand the need for providing human verification systems that rely on different sensory characteristics in addition to vision. {% include excol.html type="end" %} diff --git a/content/designer/information-design.md b/content/designer/information-design.md index c21aca6ed..7edc7c776 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -117,7 +117,7 @@ Students should be able to: * chapter markers (in digital publications) * create graphical representations that accompany the text, to make the information easier to understand; for example, a diagram representation of the process described in the text * design methods to identify specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon -* design user methods to identify the expanded form or meaning of acronyms and abbreviations +* design methods to identify the expanded form or meaning of acronyms and abbreviations * identify related requirements for developers to make language programmatically determined * identify related requirements for content authors to provide clear language and easy-to-read texts whenever possible @@ -127,17 +127,17 @@ Optional ideas to teach the learning outcomes: * Show examples of pages and explain how they are divided into several regions. Explain that, in addition to visually distinguishing these regions, semantics and text need to be added so that all users can understand the relationship between them. Explain that defining and planning the different regions is a designers' responsibility, whereas adding the semantics is a responsibility shared with the developer. * Show examples of online articles and forms. Discuss how these are divided into manageable pieces so that they are easier to understand and to navigate. For example, by using headings and their corresponding rank levels to indicate the different chapters, sections, and subsections of content. -* Show examples of diagrams and illustrations that can complement the information presented in text. For example, visual instructions that supplement the textual information of a user manual. Explain that they help users with reading disabilities understand difficult pieces of text. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). -* Show examples of words that may be difficult to understand or that are used in a restricted way. Explain that people who are not familiar with such words need definitions to understand their meaning. Explain that defining the mechanisms to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. -* Show examples of abbreviations, such as short forms of words and acronyms. Explain that people who are not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the mechanisms to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. +* Show examples of diagrams and illustrations that can complement the information presented in text. For example, visual instructions that supplement the textual information of a user manual. Explain that they help users with reading disabilities to understand difficult pieces of text. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). +* Show examples of words that may be difficult to understand or that are used in a restricted way. Explain that people who are not familiar with such words need definitions to understand their meaning. Explain that defining the methods to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. +* Show examples of abbreviations, such as short forms of words and acronyms. Explain that people who are not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the methods to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Present students with an eBook and ask them to define how it should be split into smaller and more manageable pieces so that it can be easier to navigate and understand. Assess how students use headings and rank levels, pages, and chapter markers to split large amounts of text into smaller and more manageable pieces. -f* Practical — Give students a complex piece of text and ask them to complement it with diagrams and illustrations. Assess how students provide mechanisms to complement processes and instructions presented in text. -* Practical — Present students with unusual words and abbreviations and ask them to define a mechanism to provide the explanation of such words or the expansion of the abbreviations. Assess how students define a mechanism to provide explanations of unusual words and expansions of abbreviations. +* Practical — Give students an eBook and ask them to define how it should be split into smaller and more manageable pieces so that it can be easier to navigate and understand. Assess how students use headings and rank levels, pages, and chapter markers to split large amounts of text into smaller and more manageable pieces. +* Practical — Give students a complex piece of text and ask them to complement it with diagrams and illustrations. Assess how students provide methods to complement processes and instructions presented in text. +* Practical — Give students unusual words and abbreviations and ask them to define methods to provide the explanation of such words or the expansion of the abbreviations. Assess how students define methods to provide explanations of unusual words and expansions of abbreviations. {% include excol.html type="end" %} @@ -164,7 +164,7 @@ Optional ideas to teach the learning outcomes: * Show examples of names for components, including links, buttons, and form controls. Explain that these names help users identify these components. Explain that defining the presentation of these names is a designers' responsibility, implementing these names is a developers' responsibility, and defining these names is a responsibility shared with the content author. * Show examples of overall instructions, for example indications of what will happen after pressing a button. Explain that these instructions help users better understand the purpose and functionality of components. Explain that defining the presentation of these instructions is a designer's responsibility, implementing these instructions is a developer's responsibility, and defining these instructions is a responsibility shared with the content author. -* Show examples of multi-step processes, such as a multi-step form, with and without instructions to indicate the current process and total number of steps. Explain that people rely on such instructions to get an understanding of where they are in the process adn how many step the process has. Explain that defining the presentation of such instructions is a designers' responsibility, implementing these instructions is a developers' responsibility, and providing these instructions is a responsibility shared with the content author. +* Show examples of multi-step processes, such as a multi-step form, with and without instructions to indicate the current process and total number of steps. Explain that people rely on such instructions to get an understanding of where they are in the process and how many step the process has. Explain that defining the presentation of such instructions is a designers' responsibility, implementing these instructions is a developers' responsibility, and providing these instructions is a responsibility shared with the content author. * Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to understand and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and programmatically, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look like is a designers' responsibility, whereas coding those relations is a developers' responsibility. #### Ideas to Assess Knowledge for Topic @@ -172,7 +172,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Students group related information in a form that asks for information to open a bank account. Assess how students build groups of related information, such as those collecting personal information, payment methods, and consent to legal conditions, and how students provide ways for users to identify each of the groups. -* Practical — Present students with a long list of items and ask them to define ways to split the list into smaller subsets. Assess how students use different strategies to group long sets of data into smaller subsets. +* Practical — Give students a long list of items and ask them to define ways to split the list into smaller subsets. Assess how students use different strategies to group long sets of data into smaller subsets. {% include excol.html type="end" %} @@ -189,7 +189,7 @@ Build on [Foundation Module 6: Understanding and Involving Users](/curricula/fou Students should be able to: * identify uses of tables to present data that share a logical relationship -* identify different ways of presenting tabular information, such as using several lists, or splitting a complex table into several simpler ones +* identify different ways of presenting tabular information, for example using several lists, or splitting a complex table into several simpler ones * define table header cells and data cells, and provide clear and distinguishable styles for each * create designs with graphical representations of complex tables that help users more easily understand its purpose and meaning * evaluate the use of complex tables and select simpler ways to provide the information, for example: @@ -212,8 +212,8 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Give students a set of tables and ask them to define their header cells and data cells. Assess how students understand the difference between header cells and data cells. -* Practical — Present students with a set of tables and ask them to provide clear styles to distinguish data cells from header cells. Assess how students provide clear and distinguishable styles for header cells and data cells. -* Practical — Present students with a complex table and ask them to split the information using simpler tables, lists, and graphical representations where appropriate. Assess how students provide alternative ways to present tabular information. +* Practical — Give students a set of tables and ask them to provide clear styles to distinguish data cells from header cells. Assess how students provide clear and distinguishable styles for header cells and data cells. +* Practical — Give students a complex table and ask them to split the information using simpler tables, lists, and graphical representations where appropriate. Assess how students provide alternative ways to present tabular information. {% include excol.html type="end" %} diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index ce27527bc..365140eb7 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -152,7 +152,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Short Answer Questions — Ask students about commonly used modifier keys of operating systems, browsers, and assistive technologies. Assess how students identify commonly used modifier keys in operating systems, browsers, and assistive technologies. -* Practical — Present students with a user interface that can be interacted only with the mouse and ask them to define keyboard interaction patterns. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. +* Practical — Give students an interface that only works with the mouse and ask them to define keyboard interaction patterns. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. * Practical — Students work with developers to avoid custom keyboard shortcut conflicts with existing operating system and assistive technology keystrokes. Assess how students work with other team members to develop strategies that avoid custom keyboard shortcut conflicts. {% include excol.html type="end" %} diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index b9aa97599..dcc035a87 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -66,10 +66,7 @@ Skills required for this module: {% include excol.html type="middle" %} * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) -* [Designer Module 1: Visual Design](/curricula/designer-modules/visual-design/) -* [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) -* [Designer Module 3: Navigation Design](/curricula/designer-modules/navigation-design/) -* [Designer Module 4: Images and Graphics](/curricula/designer-modules/images-and-graphics) +* Prior [Designer Modules](/curricula/designer-modules/) * Basic knowledge of: * Visual Design * Prototyping @@ -98,10 +95,7 @@ Skills required for this module: * [WCAG Success Criterion 3.2.5 Change on Request](https://www.w3.org/WAI/WCAG21/quickref/#change-on-request) * In-depth knowledge of: * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) - * [Designer Module 1: Visual Design](/curricula/designer-modules/visual-design/) - * [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) - * [Designer Module 3: Navigation Design](/curricula/designer-modules/navigation-design/) - * [Designer Module 4: Images and Graphics](/curricula/designer-modules/images-and-graphics) + * Prior [Designer Modules](/curricula/designer-modules/) * Visual Design * Prototyping * Responsive Design @@ -201,8 +195,8 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Present students with instances of flashing content and ask them to determine if they are below the general flash and red flash thresholds. Assess how students understand accessibility requirements for flashing content. -* Practical — Present students with a user interface containing animations and ask them to make them accessible. Assess how students define mechanisms to reduce or disable the animations. +* Practical — Give students flashing content and ask them to determine if it is below the general flash and red flash thresholds. Assess how students understand accessibility requirements for flashing content. +* Practical — Give students an interface containing animations and ask them to make them accessible. Assess how students define mechanisms to reduce or disable the animations. {% include excol.html type="end" %} diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index fac3a163a..0b84ebc7d 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -62,8 +62,7 @@ Skills required for this module: {% include excol.html type="middle" %} * [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) -* [Designer Module 1: Visual Design](/curricula/designer-modules/visual-design/) -* [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) +* Prior [Designer Modules](/curricula/designer-modules/) * Basic knowledge of: * Visual Design * Prototyping @@ -90,8 +89,7 @@ Skills required for this module: * [WCAG 2 Success Criterion 3.2.3 Consistent Navigation](https://www.w3.org/WAI/WCAG21/quickref/#consistent-navigation) * In-depth knowledge of: * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) - * [Designer Module 1: Visual Design](/curricula/designer-modules/visual-design/) - * [Designer Module 2: Information Design](/curricula/designer-modules/information-design/) + * Prior [Designer Modules](/curricula/designer-modules/) * Visual Design * Prototyping * Responsive Design @@ -143,8 +141,8 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Students define mouse, keyboard, touch, and voice interactions for navigation menus. For example, how to open, navigate, activate, and close such menus using the mouse, keyboard, touch, and voice. Assess how students understand the need for different interaction patterns based on the input method in use. -* Practical — Present students with different navigation menu states, such as hover, focus, current, active, and visited, and ask them to provide visual and non-visual cues to distinguish them from one another. Assess how students communicate navigation menus and menu items states visually and non-visually. -* Practical — Present students with navigation menus containing long strings of text and ask them to ensure the text is shown irrespective of the viewport and screen configuration used. Assess how students understand the diversity among different languages, viewports, and screen configurations. +* Practical — give students different navigation menu states, such as hover, focus, current, active, and visited, and ask them to provide visual and non-visual cues to distinguish them from one another. Assess how students communicate navigation menus and menu items states visually and non-visually. +* Practical — Give students navigation menus containing long strings of text and ask them to ensure the text is shown irrespective of the viewport and screen configuration used. Assess how students understand the diversity among different languages, viewports, and screen configurations. {% include excol.html type="end" %} @@ -179,7 +177,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to teach the learning outcomes: -* Practical — Present students with an interface and ask them to provide multiple ways to navigate across the website. Assess how students identify the different user experiences for navigation, including search functionalities, breadcrumb trails, site maps, and tables of contents. +* Practical — Give students an interface and ask them to provide multiple ways to navigate across the website. Assess how students identify the different user experiences for navigation, including search functionalities, breadcrumb trails, site maps, and tables of contents. * Practical — Give students an interface with excessive use of navigational components and ask them to determine which of these navigational components should stay and which should be removed. Assess how students balance the use of navigational components to avoid distraction and unnecessary noise. {% include excol.html type="end" %} @@ -252,7 +250,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Give students a specific web page inside a website and ask them to provide appropriate indications about the page location with respect to the entire website. Assess how students balance the use of text and visual cues, breadcrumb trails, and descriptive titles and headings. -* Practical — Present students with a website and ask them to provide descriptive titles that identify each of the pages and describe what they are about. Assess how students provide clear and descriptive page titles. +* Practical — Give students a website and ask them to provide descriptive titles that identify each of the pages and describe what they are about. Assess how students provide clear and descriptive page titles. {% include excol.html type="end" %} diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index e1307982a..e433398ad 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -127,9 +127,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of sufficient and insufficient color contrast for text. Explain that color contrast for text (including images of text) need to be at least 4.5:1 with respect to their background. For references on how to apply sufficient color contrast to text (including images of text), see technique [G18: Ensuring that a color contrast of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). +* Show examples of sufficient and insufficient color contrast for text. Explain that color contrast for text (including images of text) needs to be at least 4.5:1 with respect to their background. For references on how to apply sufficient color contrast to text (including images of text), see technique [G18: Ensuring that a color contrast of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). * Show examples of different interactive components, such as buttons and links, and explain that they should have a color contrast of at least 3:1. -* Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so these users require additional methods to convey that information. For references on how to supplement information conveyed through color, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). +* Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so they require additional methods to convey that information. For references on how to supplement information conveyed through color, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). #### Ideas to Assess Knowledge for Topic @@ -218,7 +218,7 @@ Optional ideas to assess knowledge: Explain how people with disabilities rely on layouts that adapt to different screen sizes, screen configurations, and style sheets to identify, distinguish, and process content. -Demonstrate how content sequence, focus indicators, and target sizes adapt to interactions when using different screen sizes, screen configurations, and style sheets. Emphasize that these behaviors need to be planned early on in the visual design phase. +Demonstrate how content sequence, focus indicators, and target sizes adapt to different screen sizes, screen configurations, and style sheets. Emphasize that these behaviors need to be planned early on in the visual design phase. #### Learning Outcomes for Topic diff --git a/content/foundation/understanding-and-involving-users.md b/content/foundation/understanding-and-involving-users.md index 8bb512304..8d477a0a6 100644 --- a/content/foundation/understanding-and-involving-users.md +++ b/content/foundation/understanding-and-involving-users.md @@ -53,6 +53,7 @@ Students: * Basic understanding of computers and the Web. Instructors: + * Prior [Foundation Modules](/curricula/foundation-modules/) * Good understanding of the links between web accessibility components. * In-depth knowledge of how people with disabilities use the Web (including assistive technologies and adaptive strategies) and of accessibility principles. From b62a20ca32042dc590e4bf41e241cec1d64d3e68 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 28 Sep 2021 14:15:38 +0200 Subject: [PATCH 262/416] Updates to modules and topics --- content/designer/forms-and-widgets.md | 12 ++++----- content/designer/images-and-graphics.md | 8 +++--- content/designer/information-design.md | 2 +- content/designer/interaction-design.md | 19 +++++++------- content/designer/multimedia-and-animations.md | 26 +++++++++---------- content/designer/navigation-design.md | 12 ++++----- 6 files changed, 40 insertions(+), 39 deletions(-) diff --git a/content/designer/forms-and-widgets.md b/content/designer/forms-and-widgets.md index bca8e7b48..061049c63 100644 --- a/content/designer/forms-and-widgets.md +++ b/content/designer/forms-and-widgets.md @@ -123,7 +123,7 @@ Topics to achieve the learning outcomes: Refer back to [Designer Module 2: Information Design: Labels and Instructions](/curricula/designer-modules/information-design/#topic-labels-and-instructions). Show examples of labels and instructions in the context of forms and other complex widgets. -Show examples of different ways to group large amounts of selectable data. For example, filtering out data into smaller pieces to better handle data, and enable mechanisms to type the first letters of their desired option to select data more efficiently. +Show examples of different ways to group large amounts of selectable data. For example, filtering out data into smaller pieces to better handle data, and typing the first letters of their desired option to select data more efficiently. #### Learning outcomes for Topic @@ -142,8 +142,8 @@ Optional ideas to teach the learning outcomes: * Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. * Show examples of different form fields and widgets, for example buttons, links, lists, and grids, across web pages and rich applications. Emphasize that each should have a clear name that allows to identify its purpose. For reference on how to provide names for different form elements and custom widgets, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). -* Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several mechanisms, including textual and visual cues. -* Present examples of time limits, such as those warning about session expirations. Explain that instructions need to be provided so that users are aware of the time limits, and mechanisms need to be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designers' responsibility, whereas implementing mechanisms to stop, extend, or adjust time limits is a responsibility shared with the developer. +* Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several methods, including textual and visual cues. +* Present examples of time limits, such as those warning about session expirations. Explain that instructions need to be provided so that users are aware of the time limits, and methods need to be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designers' responsibility, whereas implementing methods to stop, extend, or adjust time limits is a responsibility shared with the developer. * Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. #### Ideas to Assess Knowledge for Topic @@ -211,15 +211,15 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different mechanisms to communicate notifications, such as through text messages, semantic relations, haptic and audio feedback, and popup windows. -* Show examples of overlapping notifications in the context of complex applications. Explain that some users may find it daunting to process several notifications at the same time, so a mechanism needs to be defined that allows to prioritize notifications based on their relevance. Explain that defining mechanisms to prioritize notifications based on their relevance is a designers' responsibility, whereas implementing the mechanisms is a developers' responsibility. +* Show examples of different methods to communicate notifications, such as through text messages, semantic relations, haptic and audio feedback, and popup windows. +* Show examples of overlapping notifications in the context of complex applications. Explain that some users may find it daunting to process several notifications at the same time, so a method needs to be defined that allows to prioritize notifications based on their relevance. Explain that defining methods to prioritize notifications based on their relevance is a designers' responsibility, whereas implementing the methods is a developers' responsibility. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: * Practical — Give students a form field that validate on user input and ask them to provide descriptive validation messages. Assess how students provide clear validation messages for fields that validate on user input. -* Practical — Give students an application with notifications coming from different view and ask them to define mechanisms to queue and prioritize such notifications. Assess how students prioritize and organize notifications coming from different views. +* Practical — Give students an application with notifications coming from different view and ask them to define methods to queue and prioritize such notifications. Assess how students prioritize and organize notifications coming from different views. {% include excol.html type="end" %} diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 5ad1beec0..c04679384 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -106,7 +106,7 @@ Functional images convey functionality of a component. For example, search, prin Students should be able to: -* define text alternatives for functional images using the following mechanisms: +* define text alternatives for functional images using the following methodss: * text alternatives for images * combinations of text alternatives of images and adjacent text inside components * adjacent text inside components to understand its function @@ -143,7 +143,7 @@ Explain that providing text alternatives for informative images is a responsibil Students should be able to: -* define text alternatives that present equivalent information as that contained in informative images using the following mechanisms: +* define text alternatives that present equivalent information as that contained in informative images using the following methodss: * boilerplate descriptions that would then be completed and maintained through the development and authoring phases * adjacent textual information to complement images and icons, for example in a news headline * text alternatives that describe the information conveyed by images @@ -160,7 +160,7 @@ Optional ideas to teach the learning outcomes: * Show examples of different images that convey information, such as images to provide instructions, and to identify people and objects. Explain that such information needs to be provided using text alternatives, so that the purpose of the image can be understood without having to look at the image. Emphasize that these alternatives may require coordination among designers, developers, and content authors. For references on how to provide text alternatives for images, see [G82: Providing a text alternative that identifies the purpose of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G82.html). * Explain that images of text present information intended to be read as text. Emphasize that sometimes it is difficult to tell visually if text has been coded as a text or as an image, so coordination among designers, developers, and content authors is needed to determine if the technologies in use can achieve the desired visual presentation. Emphasize that, if an image of text is still required, there needs to be a text alternative that conveys the same information as the image of text. Explain that coding an image of text appropriately is a responsibility of the developer, whereas providing descriptions for images of text is a responsibility shared with the content author. -* Show examples of different verification systems, such as CAPTCHA, to identify human beings trying to access a service or system. Explain that these mechanisms need to support several modalities, including visual, auditory, and cognitive. For references on how to provide accessible CAPTCHA, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). +* Show examples of different verification systems, such as CAPTCHA, to identify human beings trying to access a service or system. Explain that these methods need to support several modalities, including visual, auditory, and cognitive. For references on how to provide accessible CAPTCHA, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). #### Ideas to Assess Knowledge for Topic @@ -189,7 +189,7 @@ Students should be able to: * evaluate the use of complex images and select other ways to present the information; for example, using tables, simpler images, and plain text * determine if and how complex images are operated using input devices, including mouse, keyboard, voice, and touch * consider placement and spacing for alternatives to complex images -* design clear and consistent identification mechanisms for complex image descriptions, including appropriate headings and expandable and collapsible components +* design clear and consistent identification methods for complex image descriptions, including appropriate headings and expandable and collapsible components * design user experiences for complex images, including how to get to the image descriptions, how the content of the description should look like, and if the descriptions could ultimately replace the image itself * identify related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, including diagrams, charts, maps, and infographics * identify related requirements for content authors to break down complex images into smaller and more manageable pieces, for example simpler images, tables, and plain text diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 7edc7c776..6d8bb7302 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -223,7 +223,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Portfolio — Students organize different pieces of information on a website, including text, forms, and images. Assess how students provide mechanisms for people to identify different pieces of information, how students split large amounts of information into smaller and more manageable pieces, and how they group related information together. +* Portfolio — Students organize different pieces of information on a website, including text, forms, and images. Assess how students provide methods for people to identify different pieces of information, how students split large amounts of information into smaller and more manageable pieces, and how they group related information together. ## Teaching Resources diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index 365140eb7..9e7c70c8c 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -133,7 +133,7 @@ Students should be able to: * specific keyboard shortcuts to support efficiency * identify situations when it is necessary to provide additional keyboard shortcuts, for example when designing a custom functionality that is not keyboard supported by default * evaluate the use of custom keyboard interactions and select keyboard interactions that avoid conflicts with the operating system, browser, and assistive technologies when possible -* cooperate with developers to provide mechanisms to remap or disable conflicting shortcuts +* cooperate with developers to provide methods to remap or disable conflicting shortcuts * define methods to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications * define focus indicators that are visible and that have appropriate contrast ratios for complex widgets * identify related requirements for developers to implement keyboard support for components that have no keyboard support by default @@ -145,7 +145,7 @@ Optional ideas to teach the learning outcomes: * Invite students to try standard keyboard conventions. For example, use of the tab to move through user interface components, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that these interactions need to be preserved as much as possible when designing custom widgets, as these are mostly expected by users. * Reflect with students about keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers need to work closely with other team members, including developers and user researchers, on strategies to define custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and working with developers to implement such keystrokes. * Present examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. -* Show examples of help functionality for custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using such shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these help mechanisms is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. +* Show examples of help functionality for custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using such shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these help methods is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic @@ -171,25 +171,26 @@ Discuss some gestures that require dragging and drawing specific paths on a touc Students should be able to: -* use components that do not require motion as an alternative for device or user motion such as shaking -* design methods to disable response to motion to prevent accidental actuation, for example undoing an action by shaking a device -* design alternatives to multi-pointer gestures (including swipe or pinch) using single pointer activation -* design methods to undo or abort an action carried out with path-based operations +* design alternatives to multi-pointer gestures (including swiping, pinching, and drawing shapes) by using single pointer activation +* design methods to undo or abort an action carried out with path-based gestures, including use of the up event to undo, abort, and reverse activation +* define alternatives for device or user motion, for example components that perform the same function that do not require user motion +* design methods to disable response to device or user motion to prevent accidental actuation #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments cannot perform such gestures, so user interfaces need to have alternatives that do not require motion for these gestures. * Show examples of gestures such as swipe or pinch. Explain that users with mobility impairments cannot perform such gestures, so user interfaces need to have alternatives that do not require swiping or pinching to perform an action. +* Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments cannot perform such gestures, so user interfaces need to have alternatives that do not require motion for these gestures. * Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events, so user interfaces need to support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Give students an interface that uses a motion-based gesture to perform an action and ask them to provide alternatives to that gesture. Assess how students provide alternatives to motion-based gestures. +* Practical — Students design an interface that can be used both in portrait and landscape modes. Assess how students understand the different ways of interacting with components. * Practical — Give students an interface that uses a multi path-based gesture to perform an action and ask them to provide alternatives to that gesture. Assess how students provide alternatives to multi-pointer and path-based gestures. +* Practical — Give students an interface that uses a motion-based gesture to perform an action and ask them to provide alternatives to that gesture. Assess how students provide alternatives to motion-based gestures. {% include excol.html type="end" %} @@ -200,7 +201,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: * Practical &mdash: Give students a web email client and ask them to provide the necessary custom keyboard shortcuts. Assess how students balance the use of standard versus custom keyboard shortcuts. -* Portfolio — Students design the interactions for a given interface. Assess how students design user experiences for different input methods, including mouse, touch, keyboard, and speech. +* Portfolio — Students design the interactions for a given interface, including mouse, keyboard, touch, and voice. Assess how students design user experiences for different input methods, including mouse, touch, keyboard, and speech. ## Teaching Resources diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index dcc035a87..f01c67da3 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -39,13 +39,13 @@ Students should be able to: * identify accessibility requirements for different types of audio and video content * design user experiences for description, captions, transcripts, and sign languages, including: * placement and spacing for alternatives to multimedia content - * mechanisms for turning on and off alternatives + * methods for turning on and off alternatives * ways for users to interact with the alternatives * identify accessibility issues of media player, including: * evaluate the need for designing custom media players and select existing media players with support for accessibility where possible * select media players with support for different methods of interaction, including mouse, keyboard, touch, and voice * select media player controls that have clear and descriptive names, that are easy to find, and that are always reachable for users -* design mechanisms to control automatic audio or movement, including: +* design methods to control automatic audio or movement, including: * mute and control the volume of auto-playing audio * pause, stop, and hide moving, blinking, and auto-updating content, including animations and carousels * identify related requirements for: @@ -115,7 +115,7 @@ Topics to achieve the learning outcomes: Audio description of visual information is essential for people who cannot see the visuals. Captions are essential for people who cannot hear the audio. Text transcripts provide an alternative to visual and audio information. -Discuss the need for planning in the design phase to accommodate media alternatives such as audio description of visual information, captions, text transcripts, and sign language. Present mechanisms to turn on and off alternatives to multimedia content depending on user needs. Explain that these mechanisms need to have clear names and need to be always reachable for users. Explain that defining such mechanisms is a designer's responsibility, whereas providing the alternatives is a responsibility shared with the content author. +Discuss the need for planning in the design phase to accommodate media alternatives such as audio description of visual information, captions, text transcripts, and sign language. Present methods to turn on and off alternatives to multimedia content depending on user needs. Explain that these methods need to have clear names and need to be always reachable for users. Explain that defining such methods is a designer's responsibility, whereas providing the alternatives is a responsibility shared with the content author. #### Learning Outcomes for Topic @@ -127,10 +127,10 @@ Students should be able to * captions; text versions of the speech and non-speech audio information needed to understand the content * text transcripts; text that provides an alternative to visual and audio information * sign language; the native language of some deaf people -* design mechanisms for controlling the volume of audio that plays automatically for more than 3 seconds -* design mechanisms to pause, stop, or hide alternatives to multimedia content that blink, move, or auto-update +* design methods for controlling the volume of audio that plays automatically for more than 3 seconds +* design methods to pause, stop, or hide alternatives to multimedia content that blink, move, or auto-update * design the placement and user experience of alternatives for multimedia content, including audio descriptions, captions, transcripts, and sign language -* design mechanisms to turn on and off audio descriptions, captions, transcripts, and sign language +* design methods to turn on and off audio descriptions, captions, transcripts, and sign language * design player controls that: * have descriptive names * are operable by keyboard @@ -141,10 +141,10 @@ Students should be able to Optional ideas to teach the learning outcomes: -* Show examples of audio descriptions of visual information. Explain that audio descriptions are alternatives for people who cannot see the video. Explain that defining the mechanisms to enable and disable audio description of visual information is a designers' responsibility, whereas providing the audio description is a responsibility shared with the content author. +* Show examples of audio descriptions of visual information. Explain that audio descriptions are alternatives for people who cannot see the video. Explain that defining the methods to enable and disable audio description of visual information is a designers' responsibility, whereas providing the audio description is a responsibility shared with the content author. * Show examples of captions. Explain that captions are alternatives for people who cannot hear the audio, and that they are useful in other situations. Explain that determining where to place captions is a designers' responsibility, whereas providing such captions is a responsibility shared with the content author. * Show examples of text transcripts. Explain that transcripts are alternatives for people who cannot hear the audio information and for people who cannot see the visual information. Explain that allocating the necessary space for the transcripts is a designers' responsibility, whereas providing such transcripts is a responsibility shared with the content author. -* Show examples of sign language. Explain that sign language is essential for people who are deaf and who do not understand written language well. Explain that defining the mechanisms to enable and disable sign language is a designers' responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. +* Show examples of sign language. Explain that sign language is essential for people who are deaf and who do not understand written language well. Explain that defining the methods to enable and disable sign language is a designers' responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. * Show examples of accessible and inaccessible media players. Emphasize that it is generally more reliable to use an existing media player with support for accessibility than to designing one from scratch. Explain how accessible media player controls have appropriate contrast ratios, are operable by keyboard, and are easy to find. Emphasize that users need to be able to reach the controls even when the media is playing. #### Ideas to Assess Knowledge for Topic @@ -161,18 +161,18 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Show moving content, such as carousels and animations. Present mechanisms to avoid distractions, seizures and physical reactions, and unpredictable keyboard focus management caused by moving content. For example, support for pausing, stopping, or hiding moving content, as well as using flashing that is below the accepted ratios where possible. +Show moving content, such as carousels and animations. Present methods to avoid distractions, seizures and physical reactions, and unpredictable keyboard focus management caused by moving content. For example, support for pausing, stopping, or hiding moving content, as well as using flashing that is below the accepted ratios where possible. #### Learning Outcomes for Topic Students should be able to: -* design mechanisms for pausing, stopping, or hiding any content that blinks, moves, or auto-updates, for example animations, carousels, and decorative gimmicks +* design methods for pausing, stopping, or hiding any content that blinks, moves, or auto-updates, for example animations, carousels, and decorative gimmicks * create designs that avoid flashing entirely or only flash below the acceptable thresholds * create designs with enough time for users to read parts of moving content, for example different slides in a carousel * define visual and non-visual identification of animated content and its different parts, for example identifying a carousel region and its different slides * define focus order within animated contents, including how to move to different parts of the carousel and how to get to the carousel controls -* design mechanisms for stopping or controlling the volume of any audio that plays automatically for more than 3 seconds +* design methods for stopping or controlling the volume of any audio that plays automatically for more than 3 seconds #### Teaching Ideas for Topic @@ -186,7 +186,7 @@ Optional ideas to teach the learning outcomes: * [G187: Using a technology to include blinking content that can be turned off via the user agent](https://www.w3.org/WAI/WCAG21/Techniques/general/G187). * Show examples of flashing content and explain that they can cause seizures and physical reactions for some people. Emphasize that all components of the content need to be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole web page or application. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash below 3 seconds, see techniques [G19: Ensuring that no component of the content flashes more than three times in any 1-second period](https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html) and [G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold](https://www.w3.org/WAI/WCAG21/Techniques/general/G15.html). * Show examples of interactions triggered by animations, such as additional movements when scrolling and decorative gimmicks. Explain that these animations can cause distraction and vestibular disorders (such as dizziness, nausea, and headaches) for some people. Discuss the use of preferences as well as technology specific properties to reduce or disable such animations. -* Demonstrate the use of a screen reader to navigate an application that plays audio automatically for more than 3 seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a mechanism to pause or control the volume of that audio. Explain that the operating system often provides such mechanism. For references on how to design interfaces with mechanisms to pause or control the volume of any audio that plays automatically, see the following techniques: +* Demonstrate the use of a screen reader to navigate an application that plays audio automatically for more than 3 seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a method to pause or control the volume of that audio. Explain that the operating system often provides such method. For references on how to design interfaces with methods to pause or control the volume of any audio that plays automatically, see the following techniques: * [G60: Playing a sound that turns off automatically within three seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G60.html), * [G170: Providing a control near the beginning of the Web page that turns off sounds that play automatically](https://www.w3.org/WAI/WCAG21/Techniques/general/G170.html), and * [G171: Playing sounds only on user request](https://www.w3.org/WAI/WCAG21/Techniques/general/G171.html). @@ -196,7 +196,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Give students flashing content and ask them to determine if it is below the general flash and red flash thresholds. Assess how students understand accessibility requirements for flashing content. -* Practical — Give students an interface containing animations and ask them to make them accessible. Assess how students define mechanisms to reduce or disable the animations. +* Practical — Give students an interface containing animations and ask them to make them accessible. Assess how students define methods to reduce or disable the animations. {% include excol.html type="end" %} diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 0b84ebc7d..e17843a27 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -194,8 +194,8 @@ Build on [Foundation Module 6: Understanding and Involving Users](/curricula/fou Students should be able to: -* define mechanisms to identify blocks of repeated content, such as navigation bars and header contents -* define mechanisms to skip blocks of repeated content using the following approaches: +* define methods to identify blocks of repeated content, such as navigation bars and header contents +* define methods to skip blocks of repeated content using the following approaches: * a link at the top of each page that goes directly to the main content area * a link at the beginning of a block of repeated content to go to the end of the block * tables of contents at the top of the page that go to each area of the content @@ -206,7 +206,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of mechanisms to bypass blocks of repeated content, such as a link at the top of the page and the use of expandable and collapsible components. Explain that navigating through sets of repeated blocks of content using only the tab key is time consuming. For examples on how to provide a mechanism to bypass blocks of repeated content, see the following techniques: +* Show examples of methods to bypass blocks of repeated content, such as a link at the top of the page and the use of expandable and collapsible components. Explain that navigating through sets of repeated blocks of content using only the tab key is time consuming. For examples on how to provide a method to bypass blocks of repeated content, see the following techniques: * [G1: Adding a link at the top of each page that goes directly to the main content area](https://www.w3.org/WAI/WCAG21/Techniques/general/G1.html), * [G123: Adding a link at the beginning of a block of repeated content to go to the end of the block](https://www.w3.org/WAI/WCAG21/Techniques/general/G123.html), and * [G124: Adding links at the top of the page to each area of the content](https://www.w3.org/WAI/WCAG21/Techniques/general/G124.html). @@ -216,7 +216,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Students define the blocks of repeated content in a website and cooperate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they work with developers to provide a mechanism to bypass such blocks. +* Practical — Students define the blocks of repeated content in a website and cooperate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they work with developers to provide a method to bypass such blocks. {% include excol.html type="end" %} @@ -232,11 +232,11 @@ Explain strategies that people use to identify web pages, including page titles, Students should be able to: -* design mechanisms for users to locate specific web pages within websites, for example: +* design methods for users to locate specific web pages within websites, for example: * descriptive page titles * text and visual cues in the navigation menu to indicate the current page * descriptive page headings -* evaluate the amount of location mechanisms in use, and select mechanisms that avoid distractions and unnecessary noise +* evaluate the amount of location methods in use, and select methods that avoid distractions and unnecessary noise * identify related requirements for developers to apply semantics to page titles, headings, and text cues ### Teaching Ideas From 95d32a4fba44417208f3040817841f52a92ee4f4 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 28 Sep 2021 19:04:09 +0200 Subject: [PATCH 263/416] Shortening LOs for module lists --- content/designer/interaction-design.md | 6 ++++-- content/designer/navigation-design.md | 8 +++++--- content/designer/visual-design.md | 7 ++++--- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index 9e7c70c8c..42cffe409 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -39,6 +39,8 @@ Students should be able to: * design user experiences for different input methods, including mouse, touch, keyboard, and speech * define keyboard interactions and meaningful sequences inside complex widgets, including buttons, carousels, sliders, tabs, and treeviews * evaluate the use of custom keyboard shortcuts for complex widgets and applications and provide information about their purpose and scope +* define methods to disable device and user motion to prevent accidental actuation +* define alternatives for complex gestures, including swiping, pinching, and drawing shapes * identify related requirements for developers to code interactions for components, including through mouse, keyboard, touch, and voice {% include excol.html type="all" %} @@ -180,8 +182,8 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of gestures such as swipe or pinch. Explain that users with mobility impairments cannot perform such gestures, so user interfaces need to have alternatives that do not require swiping or pinching to perform an action. -* Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments cannot perform such gestures, so user interfaces need to have alternatives that do not require motion for these gestures. +* Show examples of gestures such as swipe or pinch. Explain that users with mobility impairments may have difficulty to perform such gestures, so user interfaces need to have alternatives that do not require swiping or pinching to perform an action. +* Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments may have difficulty to perform such gestures, so user interfaces need to have alternatives that do not require motion for these gestures. * Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events, so user interfaces need to support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index e17843a27..df03aa926 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -39,15 +39,17 @@ Students should be able to: * explain strategies that people with disabilities use to navigate websites and applications * design different navigational components, including menus, tables of contents, and search functionalities * define different interactions for navigational components, including keyboard, mouse, touch, and voice -* define clear and consistent visual and non-visual presentation of menus and menu items -* define clear and consistent visual and non-visual indication of state changes for menu items -* cooperate with developers to define and implement methods to bypass blocks of repeated content +* define clear and consistent visual and non-visual: + * presentation of menus and menu items + * indication of state changes for menu items +* define blocks of repeated content * define site maps and descriptive page titles to help users locate specific web pages within websites * evaluate the use of navigational components, including menus, tables of content, and site maps, and select navigational components that avoid distraction and unnecessary noise * identify related requirements for developers to implement: * interactions for navigational components, including by keyboard, mouse, touch, and voice * clear and descriptive names for navigational components * additional semantics for navigational components, including menus, menu items, and menu item states + * methods to bypass blocks of repeated content {% include excol.html type="all" %} diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index e433398ad..a357f40cb 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -39,9 +39,10 @@ Students should be able to: * explain how people with disabilities rely on designs that adapt to different colors, layouts, spacing, and positions * design layouts with sufficient color contrast for text, images of text, and controls * design clear and distinguishable focus indicators, for example using borders, color, and highlighting -* design layouts that adapt to different font sizes and spacing set by the user in browser and operating system settings -* design layouts that adapt to different screen sizes, screen configurations, and user style sheets -* use landmarks to group related content, including headings, spacing, and styling +* design layouts that adapt to: + * different font sizes and spacing set by the user in browser and operating system settings + * different screen sizes, screen configurations, and user style sheets +* use headings, spacing, and styling to group related content * use visual and non-visual cues to convey information, including text, color, patterns, and icons * evaluate the use of too many design elements, in particular interactive widgets, images, and moving content) on a page, and select elements that avoid potential distraction and cognitive overload * identify related requirements for developers to apply the necessary semantics to interface components From 6a88c21e28c87f0acc03443cd2aff114ca40097e Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 30 Sep 2021 12:00:55 +0200 Subject: [PATCH 264/416] Updates to modules and topics --- _data/navigation.yml | 4 +- content/designer/designer-modules.md | 17 +++--- .../{forms-and-widgets.md => forms-design.md} | 22 +++---- content/designer/information-design.md | 43 +++++++------ content/designer/interaction-design.md | 10 +-- content/designer/multimedia-and-animations.md | 8 +-- content/designer/navigation-design.md | 61 ++++++------------- content/designer/visual-design.md | 12 ++-- 8 files changed, 78 insertions(+), 99 deletions(-) rename content/designer/{forms-and-widgets.md => forms-design.md} (93%) diff --git a/_data/navigation.yml b/_data/navigation.yml index 1350393cd..6fcc4001d 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -273,8 +273,8 @@ url: "/curricula/designer-modules/images-and-graphics/" - name: Multimedia and Animations url: "/curricula/designer-modules/multimedia-and-animations/" - - name: Forms and Widgets - url: "/curricula/designer-modules/forms-and-widgets" + - name: Forms Design + url: "/curricula/designer-modules/forms-design" - name: Changelog url: "/curricula/changelog/" hide: true diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index b53e37f1c..4798437ae 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -69,17 +69,16 @@ The designer modules are designed for students who have achieved the learning ou - [Module 1: Visual Design](/curricula/designer-modules/visual-design) - [Topic: Color](/curricula/designer-modules/visual-design/#topic-color) - [Topic: Styles](/curricula/designer-modules/visual-design/#topic-styles) - - [Topic: Landmarks and Cues](/curricula/designer-modules/visual-design/#topic-landmarks-and-cues) + - [Topic: Cues](/curricula/designer-modules/visual-design/#topic-cues) - [Topic: Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts) - [Module 2: Information Design](/curricula/designer-modules/information-design/) - - [Topic: Landmarks and Text](/curricula/designer-modules/information-design/#topic-landmarks-and-text) - - [Topic: Labels and Instructions](/curricula/designer-modules/information-design/#topic-labels-and-instructions) + - [Topic: Structure and Text](/curricula/designer-modules/information-design/#topic-structure-and-text) + - [Topic: Naming and Grouping](/curricula/designer-modules/information-design/#topic-naming-and-grouping) - [Topic: Tables](/curricula/designer-modules/information-design/#topic-tables) - [Module 3: Navigation Design](/curricula/designer-modules/navigation-design/) - - [Topic: Menu Behaviors and Patterns](/curricula/designer-modules/navigation-design/#topic-menu-behaviors-and-patterns) + - [Topic: Menus](/curricula/designer-modules/navigation-design/#topic-menus) - [Topic: Site Navigation](/curricula/designer-modules/navigation-design/#topic-site-navigation) - [Topic: Page Navigation](/curricula/designer-modules/navigation-design/#topic-page-navigation) - - [Topic: Page Identification](/curricula/designer-modules/navigation-design/#topic-page-identification) - [Module 4: Interaction Design](/curricula/designer-modules/interaction-design/) - [Topic: Keyboard Interaction](/curricula/designer-modules/interaction-design/#topic-keyboard-interaction) - [Topic: Gestures and Motion](/curricula/designer-modules/interaction-design/#topic-gestures-and-motion) @@ -91,7 +90,7 @@ The designer modules are designed for students who have achieved the learning ou - [Module 6: Multimedia and Animations](/curricula/designer-modules/multimedia-and-animations/) - [Topic: Alternatives to Multimedia Content](/curricula/designer-modules/multimedia-and-animations/#topic-alternatives-to-multimedia-content) - [Topic: Movement and Animations](/curricula/designer-modules/multimedia-and-animations/#topic-movement-and-animations) -- [Module 7: Forms Design](/curricula/designer-modules/forms-and-widgets/) - - Topic: Labels and Instructions - - Topic: Error Prevention - - Topic: Notifications +- [Module 7: Forms Design](/curricula/designer-modules/forms-design/) + - [Topic: Labels and Instructions](/curricula/designer-modules/forms-design/#topic-labels-and-instructions) + - [Topic: Error Prevention](/curricula/designer-modules/forms-design/#topic-error-revention) + - [Topic: Notifications](/curricula/designer-modules/forms-design/#topic-notifications) diff --git a/content/designer/forms-and-widgets.md b/content/designer/forms-design.md similarity index 93% rename from content/designer/forms-and-widgets.md rename to content/designer/forms-design.md index 061049c63..498cb4070 100644 --- a/content/designer/forms-and-widgets.md +++ b/content/designer/forms-design.md @@ -1,8 +1,8 @@ --- -title: "[Draft] Module 7: Forms and Widgets [WIP]" -nav_title: "Forms and Widgets" -permalink: /curricula/designer-modules/forms-and-widgets/ -ref: /curricula/designer-modules/forms-and-widgets/ +title: "[Draft] Module 7: Forms Design" +nav_title: "Forms Design" +permalink: /curricula/designer-modules/forms-design/ +ref: /curricula/designer-modules/forms-design/ lang: en github: repository: w3c/wai-curricula @@ -28,8 +28,8 @@ navigation: Courses based on this module should: -* demonstrate how people with disabilities interact with forms and widgets -* explain accessibility requirements related to forms and widgets, including placement, structure, labels, instructions, and notifications +* demonstrate how people with disabilities interact with forms +* explain accessibility requirements related to forms, including placement, structure, labels, instructions, and notifications ## Learning Outcomes for Module @@ -37,13 +37,13 @@ Students should be able to: * demonstrate how people with disabilities rely on placement, structure, labels, instructions, and notifications to understand, navigate, and interact with forms * define consistent placement and appearance of form fields and widgets -* define interactions with forms and controls that accept user input, including through mouse, keyboard, touch, and voice -* define clear and distinguishable names for forms and widgets -* define textual instructions, color, and other visual cues to help understand the context, information, and functionality of components that accept user input +* define interactions with form controls and input fields, including through mouse, keyboard, touch, and voice +* define clear and distinguishable names for forms controls and input fields +* define textual instructions, color, and other visual cues to help understand the context, information, and functionality of forms and input fields * define clear and descriptive visual and non-visual cues about the current step and about the total number of steps in a multi-step process, including multi-step forms * define clear and descriptive error messages that identify the field in error and provide suggestions for corrections where possible * define meaningful and descriptive visual and non-visual notifications, including for imminent time limits, success messages, status changes, and feedback from user input -* describe related requirements for developers to implement semantics and programmatic relationships for forms and widgets +* describe related requirements for developers to implement semantics and programmatic relationships for forms {% include excol.html type="all" %} @@ -194,7 +194,7 @@ Optional ideas to assess knowledge: Show examples of notification messages. Explain that they need to be distinguishable by all users, including through visual cues and programmatically. -Show examples of text and visual notifications for error messages and other types of feedback for forms and widgets. Explain that notifications may have different levels of priority when in the context of a complex application. Explain that defining such levels of priority and which types of notifications each of these levels should contain is a designers' responsibility whereas implementing these levels is a developers' responsibility. +Show examples of text and visual notifications for error messages and other types of feedback for forms. Explain that notifications may have different levels of priority when in the context of a complex application. Explain that defining such levels of priority and which types of notifications each of these levels should contain is a designers' responsibility whereas implementing these levels is a developers' responsibility. #### Learning Outcomes for Topic diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 6d8bb7302..8324ad5de 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -29,8 +29,8 @@ navigation: Courses based on this module should: -* demonstrate how people with disabilities obtain and process information -* describe several approaches to communicate the structure, relations, and purpose of information using a variety of methods, including text, labels, instructions, semantics, and imagery +* demonstrate how people with disabilities obtain and process information using a variety of methods, including text, labels, instructions, semantics, and imagery +* describe several approaches to communicate the structure, relations, and purpose of information ## Learning Outcomes for Module @@ -38,12 +38,13 @@ Students should be able to: * explain how people with disabilities use several methods to obtain and process information, including text, labels, instructions, semantics, and imagery * describe approaches to break down different types of content into smaller and more manageable pieces, for example using: - * headings, pages, and chapter markers + * pages, landmarks, and headings * lists, simpler tables, and plain text to convey information presented in complex tables * groups of form controls that share a common purpose -* describe the use of visual and non-visual cues to make information in multi-step processes more understandable +* describe the use of visual and non-visual cues to communicate information in multi-step processes * describe how to communicate the structure of multi-page articles or processes visually and non-visually -* describe how to provide information about the total number of items and about the current item in a multi-step process visually and non-visually +* describe how to provide information about the name and purpose of components using descriptive labels and instructions +* discuss ways to break down information presented in tables, including use of simple tables, lists, imagery, and plain text * evaluate the use of several methods to convey the information, including text, labels, instructions, semantics, and imagery depending on user needs * identify related requirements for developers to programmatically associate headings, table header cells and data cells, as well as form labels and instructions, to their corresponding control @@ -99,34 +100,34 @@ Topics to achieve the learning outcomes: {% include excol.html type="start" %} -### Topic: Landmarks and Text +### Topic: Structure and Text {% include excol.html type="middle" %} -Discuss ways to split large amounts of text into smaller pieces. For example, using landmarks to define page regions, headings and their corresponding rank levels, pages to split the contents into logical units, and chapter markers to indicate chapters in digital publications. +Discuss ways to communicate the structure of pages and documents. For example, using pages to split the content into logical units, landmarks to define page regions, headings with their corresponding rank levels to group related information. #### Learning Outcomes for Topic Students should be able to: * design textual content as manageable passages of text, for example by splitting larger blocks of text into smaller and more manageable pieces using: + * pages * landmarks with their corresponding region type * headings (with their corresponding rank levels) * sidebars and other page regions - * pages - * chapter markers (in digital publications) * create graphical representations that accompany the text, to make the information easier to understand; for example, a diagram representation of the process described in the text * design methods to identify specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon * design methods to identify the expanded form or meaning of acronyms and abbreviations -* identify related requirements for developers to make language programmatically determined -* identify related requirements for content authors to provide clear language and easy-to-read texts whenever possible +* identify related requirements for: + * developers to make language programmatically determined + * content authors to provide clear language and easy-to-read texts whenever possible #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: * Show examples of pages and explain how they are divided into several regions. Explain that, in addition to visually distinguishing these regions, semantics and text need to be added so that all users can understand the relationship between them. Explain that defining and planning the different regions is a designers' responsibility, whereas adding the semantics is a responsibility shared with the developer. -* Show examples of online articles and forms. Discuss how these are divided into manageable pieces so that they are easier to understand and to navigate. For example, by using headings and their corresponding rank levels to indicate the different chapters, sections, and subsections of content. +* Show examples of online articles and forms. Discuss how these are divided into manageable pieces so that they are easier to understand and to navigate. For example, by using headings with their corresponding rank levels to indicate the different chapters, sections, and subsections of content. * Show examples of diagrams and illustrations that can complement the information presented in text. For example, visual instructions that supplement the textual information of a user manual. Explain that they help users with reading disabilities to understand difficult pieces of text. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). * Show examples of words that may be difficult to understand or that are used in a restricted way. Explain that people who are not familiar with such words need definitions to understand their meaning. Explain that defining the methods to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. * Show examples of abbreviations, such as short forms of words and acronyms. Explain that people who are not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the methods to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. @@ -135,7 +136,8 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Give students an eBook and ask them to define how it should be split into smaller and more manageable pieces so that it can be easier to navigate and understand. Assess how students use headings and rank levels, pages, and chapter markers to split large amounts of text into smaller and more manageable pieces. +* Short Answer Questions — Ask students about the different approaches they can use to communicate structure in web pages and documents. Assess how students recognize structures such as pages, headings, and landmarks. +* Practical — Give students an eBook and ask them to define how it should be split into smaller and more manageable pieces so that it can be easier to navigate and understand. Assess how students use pages, landmarks, and headings with their corresponding rank levels to split large amounts of text into smaller and more manageable pieces. * Practical — Give students a complex piece of text and ask them to complement it with diagrams and illustrations. Assess how students provide methods to complement processes and instructions presented in text. * Practical — Give students unusual words and abbreviations and ask them to define methods to provide the explanation of such words or the expansion of the abbreviations. Assess how students define methods to provide explanations of unusual words and expansions of abbreviations. @@ -143,11 +145,11 @@ Optional ideas to assess knowledge: {% include excol.html type="start" %} -### Topic: Labels and Instructions +### Topic: Naming and Grouping {% include excol.html type="middle" %} -Discuss the use of labels, instructions, and graphical representations to help people understand components. Explain that defining how to present labels, instructions, and graphical representations is a responsibility of the designer, whereas providing them is a responsibility shared with the content author. +Discuss the use of labels, instructions, and graphical representations to help people understand components. Explain that defining the presentation of labels, instructions, and graphical representations is a responsibility of the designer, whereas providing such labels and instructions is a responsibility shared with the content author. #### Learning Outcomes for Topic @@ -164,7 +166,7 @@ Optional ideas to teach the learning outcomes: * Show examples of names for components, including links, buttons, and form controls. Explain that these names help users identify these components. Explain that defining the presentation of these names is a designers' responsibility, implementing these names is a developers' responsibility, and defining these names is a responsibility shared with the content author. * Show examples of overall instructions, for example indications of what will happen after pressing a button. Explain that these instructions help users better understand the purpose and functionality of components. Explain that defining the presentation of these instructions is a designer's responsibility, implementing these instructions is a developer's responsibility, and defining these instructions is a responsibility shared with the content author. -* Show examples of multi-step processes, such as a multi-step form, with and without instructions to indicate the current process and total number of steps. Explain that people rely on such instructions to get an understanding of where they are in the process and how many step the process has. Explain that defining the presentation of such instructions is a designers' responsibility, implementing these instructions is a developers' responsibility, and providing these instructions is a responsibility shared with the content author. +* Show examples of multi-step processes, such as a multi-step form, with and without instructions to indicate the current process and total number of steps. Explain that people rely on such instructions to get an understanding of where they are in the process and how many steps the process has. Explain that defining the presentation of such instructions is a designers' responsibility, implementing these instructions is a developers' responsibility, and providing these instructions is a responsibility shared with the content author. * Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to understand and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and programmatically, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look like is a designers' responsibility, whereas coding those relations is a developers' responsibility. #### Ideas to Assess Knowledge for Topic @@ -191,20 +193,21 @@ Students should be able to: * identify uses of tables to present data that share a logical relationship * identify different ways of presenting tabular information, for example using several lists, or splitting a complex table into several simpler ones * define table header cells and data cells, and provide clear and distinguishable styles for each -* create designs with graphical representations of complex tables that help users more easily understand its purpose and meaning +* define graphical representations of complex tables that help users more easily understand its purpose and meaning * evaluate the use of complex tables and select simpler ways to provide the information, for example: * simpler tables * charts, diagrams, and other graphical representations * plain text -* identify related requirements for developers to programmatically associate table descriptions, data cells, and header cells with their corresponding table -* identify related requirements for content authors to provide table descriptions where appropriate +* identify related requirements for + * developers to programmatically associate table descriptions, data cells, and header cells with their corresponding table + * content authors to provide table descriptions where appropriate #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: * Show examples of different types of information presented in tables. Explain that tables are used when there is a logical, tabular relationship between the information presented, for example when displaying a list of events with their date and venue. -* Refer back to [Designer Module 1: Topic Adaptability](/curricula/designer-modules/visual-design/#topic-adaptability) and explain that some users may require different ways of presenting tabular information. For example, providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. +* Refer back to [Designer Module 1: Visual Design, Topic Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts) and explain that some users may require different ways of presenting tabular information. For example, providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. * Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells needs to be perceived both visually and programmatically. Explain that providing the styles is a designers' responsibility, whereas establishing the programmatic relationship is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index 42cffe409..62f5c2122 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -28,8 +28,8 @@ navigation: Courses based on this module should: -* explain strategies that people with disabilities use to interact with components -* describe accessibility requirements related to input methods, including mouse, keyboard, touch, and voice +* demonstrate strategies that people with disabilities use to interact with components +* explain accessibility requirements related to input methods, including mouse, keyboard, touch, and voice ## Learning Outcomes for Module @@ -41,7 +41,7 @@ Students should be able to: * evaluate the use of custom keyboard shortcuts for complex widgets and applications and provide information about their purpose and scope * define methods to disable device and user motion to prevent accidental actuation * define alternatives for complex gestures, including swiping, pinching, and drawing shapes -* identify related requirements for developers to code interactions for components, including through mouse, keyboard, touch, and voice +* identify related requirements for developers to code interactions, including through mouse, keyboard, touch, and voice {% include excol.html type="all" %} @@ -119,7 +119,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain that providing custom keyboard interactions can favor efficiency but can also disrupt the users' expectations. Thus, designers need to document these interactions and make them consistent throughout the interface. +Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain that providing custom keyboard interactions can favor efficiency but can also disrupt the users' expectations. Thus, designers need to document these interactions and make them consistent throughout the interface. Emphasize that defining the keyboard interactions is a designers' responsibility, whereas implementing such interactions is a responsibility shared with the developer. #### Learning Outcomes for Topic @@ -155,7 +155,7 @@ Optional ideas to assess knowledge: * Short Answer Questions — Ask students about commonly used modifier keys of operating systems, browsers, and assistive technologies. Assess how students identify commonly used modifier keys in operating systems, browsers, and assistive technologies. * Practical — Give students an interface that only works with the mouse and ask them to define keyboard interaction patterns. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. -* Practical — Students work with developers to avoid custom keyboard shortcut conflicts with existing operating system and assistive technology keystrokes. Assess how students work with other team members to develop strategies that avoid custom keyboard shortcut conflicts. +* Practical — Students work with developers to avoid custom keyboard shortcut conflicts with existing operating system and assistive technology keystrokes. Assess how students work with developers to develop strategies that avoid custom keyboard shortcut conflicts. {% include excol.html type="end" %} diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index f01c67da3..ab3547e84 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -21,7 +21,7 @@ parent_in_h1: name: "Curricula on Web Accessibility" navigation: previous: /curricula/designer-modules/images-and-graphics/ - next: /curricula/designer-modules/forms-and-widgets/ + next: /curricula/designer-modules/forms-design/ --- ## Introduction @@ -30,18 +30,18 @@ navigation: Courses based on this module should: * explain strategies that people with disabilities use to access multimedia contents, such as audio and video -* explain accessibility requirements for multimedia content, such as audio descriptions of visual information, captions (also known as subtitles), transcripts, and sign languages +* explain accessibility requirements for multimedia content, such as descriptions of visual information àalso known as audio description, video description, or described video), captions (also known as subtitles), transcripts, and sign languages ## Learning Outcomes for Module Students should be able to: * identify accessibility requirements for different types of audio and video content -* design user experiences for description, captions, transcripts, and sign languages, including: +* design user experiences for descriptions, captions, transcripts, and sign languages, including: * placement and spacing for alternatives to multimedia content * methods for turning on and off alternatives * ways for users to interact with the alternatives -* identify accessibility issues of media player, including: +* identify accessibility issues of media players, including: * evaluate the need for designing custom media players and select existing media players with support for accessibility where possible * select media players with support for different methods of interaction, including mouse, keyboard, touch, and voice * select media player controls that have clear and descriptive names, that are easy to find, and that are always reachable for users diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index df03aa926..716b0c584 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -44,7 +44,7 @@ Students should be able to: * indication of state changes for menu items * define blocks of repeated content * define site maps and descriptive page titles to help users locate specific web pages within websites -* evaluate the use of navigational components, including menus, tables of content, and site maps, and select navigational components that avoid distraction and unnecessary noise +* evaluate the use of navigational components, including menus, tables of contents, and ``site maps, and select navigational components that avoid distraction and unnecessary noise * identify related requirements for developers to implement: * interactions for navigational components, including by keyboard, mouse, touch, and voice * clear and descriptive names for navigational components @@ -105,7 +105,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="start" %} -### Topic: Menu Behaviors and Patterns +### Topic: Menus {% include excol.html type="middle" %} @@ -117,10 +117,11 @@ Explain styling conventions for menus, such as expected location, appropriate si Students should be able to: -* identify and describe uses of different types of navigation menus, such as static, fly-out, and mega menus -* define visual and text cues to distinguish menus from other components, -* define consistent styling for menu identification across websites -* define interactions inside navigation menus, including mouse, keyboard, and touch +* describe uses of different types of navigation menus, such as static, fly-out, and mega menus +* define visual and text cues to identify menus, including: + * consistent styling for menu identification across websites + * cues in the navigation menu to indicate the current page +* define interactions inside navigation menus, including mouse, keyboard, touch, and voice * design navigation menus that adapt to different text sizes, screen magnifications, and screen sizes and resolutions * design distinguishable and consistent styles for menu items in their different states, for example in fly-out menus * identify related requirements for developers to implement: @@ -143,7 +144,8 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Students define mouse, keyboard, touch, and voice interactions for navigation menus. For example, how to open, navigate, activate, and close such menus using the mouse, keyboard, touch, and voice. Assess how students understand the need for different interaction patterns based on the input method in use. -* Practical — give students different navigation menu states, such as hover, focus, current, active, and visited, and ask them to provide visual and non-visual cues to distinguish them from one another. Assess how students communicate navigation menus and menu items states visually and non-visually. +* Practical — Give students different navigation menu states, such as hover, focus, current, active, and visited, and ask them to provide visual and non-visual cues to distinguish them from one another. Assess how students communicate navigation menus and menu items states visually and non-visually. +* Practical — Give students a navigation menu and ask them to provide text and visual indications about the currently selected item. Assess how students provide appropriate indications about the page location with respect to the entire website. * Practical — Give students navigation menus containing long strings of text and ask them to ensure the text is shown irrespective of the viewport and screen configuration used. Assess how students understand the diversity among different languages, viewports, and screen configurations. {% include excol.html type="end" %} @@ -165,7 +167,11 @@ Students should be able to: * breadcrumb trails to communicate the current location within the site * site maps to provide an overview of the entire website * search functionalities to navigate to specific parts of the site +* design methods for users to locate specific web pages within websites, for example: + * descriptive page titles + * text and visual cues in the navigation menu to indicate the current page * evaluate the amount of site navigational components in use, and select components that help users navigate and orient +* identify related requirements for developers to apply semantics to page titles, headings, and text cues #### Teaching Ideas for Topic @@ -174,12 +180,15 @@ Optional ideas to teach the learning outcomes: * Show examples of breadcrumb trails. Explain that they provide information about the user's location in the context of a whole website. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail](https://www.w3.org/WAI/WCAG21/Techniques/general/G65). * Show examples of site maps and explain that they serve the purpose of providing an overview of the whole site. Explain that some users rely on them to better understand the structure of the site and to find its way more easily through it. For references on how to provide a site map, see [G63: Providing a site map](https://www.w3.org/WAI/WCAG21/Techniques/general/G63.html). * Show examples of search functionalities. Explain that they help users find content by supporting navigation to different parts of the site. Emphasize that some users prefer this way of navigating, especially when they are already familiar with the site and know what they are looking for. For references on how to provide a search functionality, see technique [G161: Providing a search function to help users find content](https://www.w3.org/WAI/WCAG21/Techniques/general/G161). +* Invite students to give examples of page titles they are familiar with and reflect with them on how well the titles describe the page contents. Explain that page titles are useful to identify the purpose of a specific web page within a website. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page. Some browsers and assistive technologies may truncate the titles or not show them at all. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). +* Show examples of visual and text cues in menus to indicate what is the currently visible page with respect to the set of websites. #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Practical — Give students an interface and ask them to provide multiple ways to navigate across the website. Assess how students identify the different user experiences for navigation, including search functionalities, breadcrumb trails, site maps, and tables of contents. +* Practical — Give students awebsite and ask them to provide multiple ways to navigate across the website. Assess how students identify the different user experiences for navigation, including search functionalities, breadcrumb trails, and site maps. +* Practical — Give students a website and ask them to provide descriptive titles that identify each of the pages. Assess how students provide clear and descriptive page titles. * Practical — Give students an interface with excessive use of navigational components and ask them to determine which of these navigational components should stay and which should be removed. Assess how students balance the use of navigational components to avoid distraction and unnecessary noise. {% include excol.html type="end" %} @@ -219,40 +228,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Students define the blocks of repeated content in a website and cooperate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they work with developers to provide a method to bypass such blocks. - -{% include excol.html type="end" %} - -{% include excol.html type="start" %} - -### Topic: Page Identification - -{% include excol.html type="middle" %} - -Explain strategies that people use to identify web pages, including page titles, as well as text and visual cues in the navigational menu to indicate the current page. - -#### Learning Outcomes for Topic - -Students should be able to: - -* design methods for users to locate specific web pages within websites, for example: - * descriptive page titles - * text and visual cues in the navigation menu to indicate the current page - * descriptive page headings -* evaluate the amount of location methods in use, and select methods that avoid distractions and unnecessary noise -* identify related requirements for developers to apply semantics to page titles, headings, and text cues - -### Teaching Ideas - -Optional ideas to teach the learning outcomes: - -* Invite students to give examples of page titles they are familiar with and reflect with them on how well the titles describe the page contents. Explain that page titles are useful to identify the purpose of a specific web page within a website. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page. Some browsers and assistive technologies may truncate the titles or not show them at all. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). - -#### Ideas to Assess Knowledge - -Optional ideas to assess knowledge: - -* Practical — Give students a specific web page inside a website and ask them to provide appropriate indications about the page location with respect to the entire website. Assess how students balance the use of text and visual cues, breadcrumb trails, and descriptive titles and headings. -* Practical — Give students a website and ask them to provide descriptive titles that identify each of the pages and describe what they are about. Assess how students provide clear and descriptive page titles. +* Practical — Give students a document and ask them to provide the table of contents. Assess how students provide table of contents for documents. {% include excol.html type="end" %} @@ -277,3 +253,4 @@ Suggested resources to support your teaching: * [Text to Speech (Web Accessibility Perspectives)](/perspective-videos/speech/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [Large Links, Buttons, and Controls (Web Accessibility Perspectives)](/perspective-videos/controls/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. + diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index a357f40cb..b22ea02b5 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -179,19 +179,19 @@ Optional ideas to assess knowledge: {% include excol.html type="start" %} -### Topic: Landmarks and Cues +### Topic: Cues {% include excol.html type="middle" %} -Explain how people with disabilities perceive different web page regions and content through text, landmarks, and cues. Present strategies to plan for the inclusion of such text, landmarks, and cues early in the visual design phase. +Explain how people with disabilities perceive different web page regions and content through text and visual cues. Present strategies to plan for the inclusion of such cues early in the visual design phase. #### Learning Outcomes for Topic Students should be able to: * design focus indicators that enable people to tell where they are as they move through web pages and applications using the keyboard -* define page regions by using appropriate visual landmarks, such as headings -* design layouts that enable to present landmarks and cues in different screen sizes, screen configurations, and style sheets +* define page regions by using appropriate visual and non-visual cues, such as headings +* design layouts that enable to present visual and non-visual cues in different screen sizes, screen configurations, and style sheets * use text cues to supplement information provided through vision only, for example available dates in a calendar represented with a different background color #### Teaching Ideas for Topic @@ -199,14 +199,14 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Invite students to use a web page that has appropriate focus indicators first, and then invite them to use a web page without focus indicators. Explain how focus indicators allow people using the keyboard only to determine where they are as they move through web pages and applications using the keyboard only. For reference on how to provide appropriate focus indicators, see techniques [G149: Using user interface components that are highlighted by the user agent when they receive focus](https://www.w3.org/WAI/WCAG21/Techniques/general/G149.html) and [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). -* Show examples of different web page regions, such as header, navigation, main, and footer. Explain that several groups of people with disabilities rely on visual and programmatic landmarks to perceive such regions. Explain that defining landmarks and their styles is a designers' responsibility, whereas implementing such landmarks and their semantics is a developers' responsibility. +* Show examples of different web page regions, such as header, navigation, main, and footer. Explain that several groups of people with disabilities rely on visual and programmatic cues to perceive such regions. Explain that defining the presentation of these cues is a designers' responsibility, whereas implementing such cues and their semantics is a developers' responsibility. * Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a form field is required and those with colors to convey available dates in a calendar. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Give students a web page and ask them to define the appropriate landmarks and their styling. Assess how students define landmarks and regions using a variety of methods, including semantics and styling. +* Practical — Give students a web page and ask them to define its regions and cues. Assess how students define regions and cues using a variety of methods, including semantics and styling. * Practical &mdash: Give students examples of information conveyed visually and ask them to provide text to help understand the information. Assess how students provide the necessary textual information to supplement information conveyed visually. {% include excol.html type="end" %} From 61fadb1e80d1d5eaeeed4db4924a2174d5acc0ca Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 30 Sep 2021 12:04:32 +0200 Subject: [PATCH 265/416] missing '/' --- _data/navigation.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_data/navigation.yml b/_data/navigation.yml index 6fcc4001d..6595fccac 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -274,7 +274,7 @@ - name: Multimedia and Animations url: "/curricula/designer-modules/multimedia-and-animations/" - name: Forms Design - url: "/curricula/designer-modules/forms-design" + url: "/curricula/designer-modules/forms-design/" - name: Changelog url: "/curricula/changelog/" hide: true From 7e1b7748399cb2766499b38091c1ec700d5fb9a3 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 30 Sep 2021 14:01:49 +0200 Subject: [PATCH 266/416] Updates to designers front page --- content/designer/designer-modules.md | 192 +++++++++++++-------------- 1 file changed, 96 insertions(+), 96 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 4798437ae..cf54007d8 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -1,96 +1,96 @@ ---- -title: "[Draft] Designer Modules" -nav_title: "Designer Modules" -permalink: /curricula/designer-modules/ -ref: /curricula/designer-modules/ -lang: en -github: - repository: w3c/wai-curricula - path: content/designer/designer-modules/ -license: creative-commons -acknowledgements: /curricula/acknowledgements/ -changelog: /curricula/changelog/ -footer: > -

Date: Updated @@ Month 2021. First published December 2019.

-

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

-

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

-parent_in_h1: - - ref: /curricula/ - name: title -navigation: - previous: /curricula/developer-modules/rich-applications/ - next: /curricula/designer-modules/visual-design/ ---- - -## Introduction -{:.no-display} - -The designer modules guide the creation of courses that: - -* explain how design principles and practices relate to accessibility -* demonstrate and explain how accessible design enables people with disabilities to use websites and applications -* teach accessible design techniques for: - * visual design - * information design - * navigation design - * interaction design - * user experience - -These modules have been organized for designers whose work is clsoely related to the knowledge discussed in the [developer modules](/curricula/developer-modules/). If you are teaching other type of designers, feel free to change the structure so that it fits your audience needs. - -These modules focus on visual, information, user experience, and interaction aspects to design accessible web pages and applications. - -The modules primarily address the following roles: - -* Visual Designer -* Information Architect -* User Experience (UX) Designer -* Interaction Designer - -### Foundation Prerequisites - -The designer modules are designed for students who have achieved the learning outcomes from the following subset of [Foundation modules](/curricula/foundation-modules/): - -* [Module 1: What is Web accessibility](/curricula/foundation-modules/what-is-web-accessibility/) - * Topic: Stories of People with Disabilities - * Topic: Scope of Web Accessibility -* [Module 2: People and Digital Technology](/curricula/foundation-modules/people-and-digital-technology/) - * Topic: Diverse Abilities, Tools, and Strategies - * Topic: Components of Web Accessibility -* [Module 4: Principles, Standards, and Checks](/curricula/foundation-modules/principles-standards-and-checks/) - * Topic: Principles of Web Accessibility - * Topic: W3C Accessibility Standards - * Topic: Hands-on Experience of Standards -* [Module 5: Getting Started with Accessibility](/curricula/foundation-modules/getting-started-with-accessibility/) - * Topic: Roles and Responsibilities - -## Designer Modules - -- [Module 1: Visual Design](/curricula/designer-modules/visual-design) - - [Topic: Color](/curricula/designer-modules/visual-design/#topic-color) - - [Topic: Styles](/curricula/designer-modules/visual-design/#topic-styles) - - [Topic: Cues](/curricula/designer-modules/visual-design/#topic-cues) - - [Topic: Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts) -- [Module 2: Information Design](/curricula/designer-modules/information-design/) - - [Topic: Structure and Text](/curricula/designer-modules/information-design/#topic-structure-and-text) - - [Topic: Naming and Grouping](/curricula/designer-modules/information-design/#topic-naming-and-grouping) - - [Topic: Tables](/curricula/designer-modules/information-design/#topic-tables) -- [Module 3: Navigation Design](/curricula/designer-modules/navigation-design/) - - [Topic: Menus](/curricula/designer-modules/navigation-design/#topic-menus) - - [Topic: Site Navigation](/curricula/designer-modules/navigation-design/#topic-site-navigation) - - [Topic: Page Navigation](/curricula/designer-modules/navigation-design/#topic-page-navigation) -- [Module 4: Interaction Design](/curricula/designer-modules/interaction-design/) - - [Topic: Keyboard Interaction](/curricula/designer-modules/interaction-design/#topic-keyboard-interaction) - - [Topic: Gestures and Motion](/curricula/designer-modules/interaction-design/#topic-gestures-and-motion) -- [Module 5: Images and Graphics](/curricula/designer-modules/images-and-graphics/) - - [Topic: Functional Images](/curricula/designer-modules/images-and-graphics/#topic-functional-images) - - [Topic: Informative Images](/curricula/designer-modules/images-and-graphics/#topic-informative-images) - - [Topic: Complex Images](/curricula/designer-modules/images-and-graphics/#topic-complex-images) - - [Topic: Decorative Images](/curricula/designer-modules/images-and-graphics/#topic-decorative-images) -- [Module 6: Multimedia and Animations](/curricula/designer-modules/multimedia-and-animations/) - - [Topic: Alternatives to Multimedia Content](/curricula/designer-modules/multimedia-and-animations/#topic-alternatives-to-multimedia-content) - - [Topic: Movement and Animations](/curricula/designer-modules/multimedia-and-animations/#topic-movement-and-animations) -- [Module 7: Forms Design](/curricula/designer-modules/forms-design/) - - [Topic: Labels and Instructions](/curricula/designer-modules/forms-design/#topic-labels-and-instructions) - - [Topic: Error Prevention](/curricula/designer-modules/forms-design/#topic-error-revention) - - [Topic: Notifications](/curricula/designer-modules/forms-design/#topic-notifications) +--- +title: "[Draft] Designer Modules" +nav_title: "Designer Modules" +permalink: /curricula/designer-modules/ +ref: /curricula/designer-modules/ +lang: en +github: + repository: w3c/wai-curricula + path: content/designer/designer-modules/ +license: creative-commons +acknowledgements: /curricula/acknowledgements/ +changelog: /curricula/changelog/ +footer: > +

Date: Updated @@ Month 2021. First published December 2019.

+

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

+

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

+parent_in_h1: + - ref: /curricula/ + name: title +navigation: + previous: /curricula/developer-modules/rich-applications/ + next: /curricula/designer-modules/visual-design/ +--- + +## Introduction +{:.no-display} + +The designer modules guide the creation of courses that: + +* explain how design principles and practices relate to accessibility +* demonstrate and explain how accessible design enables people with disabilities to use websites and applications +* teach accessible design techniques for: + * visual design + * information design + * navigation design + * interaction design + * user experience + +These modules focus on visual, information, user experience, and interaction aspects to design accessible web pages and applications. + +The modules primarily address the following roles: + +* Visual Designer +* Information Architect +* User Experience (UX) Designer +* Interaction Designer + +These modules have been organized to facilitate teaching designers and developers together. If you are teaching in other environments, feel free to change the structure so that it fits your audience needs. + +### Foundation Prerequisites + +The designer modules are designed for students who have achieved the learning outcomes from the following subset of [Foundation modules](/curricula/foundation-modules/): + +* [Module 1: What is Web accessibility](/curricula/foundation-modules/what-is-web-accessibility/) + * Topic: Stories of People with Disabilities + * Topic: Scope of Web Accessibility +* [Module 2: People and Digital Technology](/curricula/foundation-modules/people-and-digital-technology/) + * Topic: Diverse Abilities, Tools, and Strategies + * Topic: Components of Web Accessibility +* [Module 4: Principles, Standards, and Checks](/curricula/foundation-modules/principles-standards-and-checks/) + * Topic: Principles of Web Accessibility + * Topic: W3C Accessibility Standards + * Topic: Hands-on Experience of Standards +* [Module 5: Getting Started with Accessibility](/curricula/foundation-modules/getting-started-with-accessibility/) + * Topic: Roles and Responsibilities + +## Designer Modules + +- [Module 1: Visual Design](/curricula/designer-modules/visual-design) + - [Topic: Color](/curricula/designer-modules/visual-design/#topic-color) + - [Topic: Styles](/curricula/designer-modules/visual-design/#topic-styles) + - [Topic: Cues](/curricula/designer-modules/visual-design/#topic-cues) + - [Topic: Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts) +- [Module 2: Information Design](/curricula/designer-modules/information-design/) + - [Topic: Structure and Text](/curricula/designer-modules/information-design/#topic-structure-and-text) + - [Topic: Naming and Grouping](/curricula/designer-modules/information-design/#topic-naming-and-grouping) + - [Topic: Tables](/curricula/designer-modules/information-design/#topic-tables) +- [Module 3: Navigation Design](/curricula/designer-modules/navigation-design/) + - [Topic: Menus](/curricula/designer-modules/navigation-design/#topic-menus) + - [Topic: Site Navigation](/curricula/designer-modules/navigation-design/#topic-site-navigation) + - [Topic: Page Navigation](/curricula/designer-modules/navigation-design/#topic-page-navigation) +- [Module 4: Interaction Design](/curricula/designer-modules/interaction-design/) + - [Topic: Keyboard Interaction](/curricula/designer-modules/interaction-design/#topic-keyboard-interaction) + - [Topic: Gestures and Motion](/curricula/designer-modules/interaction-design/#topic-gestures-and-motion) +- [Module 5: Images and Graphics](/curricula/designer-modules/images-and-graphics/) + - [Topic: Functional Images](/curricula/designer-modules/images-and-graphics/#topic-functional-images) + - [Topic: Informative Images](/curricula/designer-modules/images-and-graphics/#topic-informative-images) + - [Topic: Complex Images](/curricula/designer-modules/images-and-graphics/#topic-complex-images) + - [Topic: Decorative Images](/curricula/designer-modules/images-and-graphics/#topic-decorative-images) +- [Module 6: Multimedia and Animations](/curricula/designer-modules/multimedia-and-animations/) + - [Topic: Alternatives to Multimedia Content](/curricula/designer-modules/multimedia-and-animations/#topic-alternatives-to-multimedia-content) + - [Topic: Movement and Animations](/curricula/designer-modules/multimedia-and-animations/#topic-movement-and-animations) +- [Module 7: Forms Design](/curricula/designer-modules/forms-design/) + - [Topic: Labels and Instructions](/curricula/designer-modules/forms-design/#topic-labels-and-instructions) + - [Topic: Error Prevention](/curricula/designer-modules/forms-design/#topic-error-revention) + - [Topic: Notifications](/curricula/designer-modules/forms-design/#topic-notifications) From 995669935be231e915ebfceea3efa863901350f7 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 4 Oct 2021 12:51:12 +0200 Subject: [PATCH 267/416] Updates to modules and topics --- content/designer/designer-modules.md | 2 +- content/designer/information-design.md | 18 ++++---- content/designer/multimedia-and-animations.md | 45 +++++++++---------- content/designer/visual-design.md | 21 +++++---- 4 files changed, 43 insertions(+), 43 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index cf54007d8..2d5991a74 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -72,7 +72,7 @@ The designer modules are designed for students who have achieved the learning ou - [Topic: Cues](/curricula/designer-modules/visual-design/#topic-cues) - [Topic: Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts) - [Module 2: Information Design](/curricula/designer-modules/information-design/) - - [Topic: Structure and Text](/curricula/designer-modules/information-design/#topic-structure-and-text) + - [Topic: Text and Structure](/curricula/designer-modules/information-design/#topic-text-and-structure) - [Topic: Naming and Grouping](/curricula/designer-modules/information-design/#topic-naming-and-grouping) - [Topic: Tables](/curricula/designer-modules/information-design/#topic-tables) - [Module 3: Navigation Design](/curricula/designer-modules/navigation-design/) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 8324ad5de..60a633330 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -30,7 +30,7 @@ navigation: Courses based on this module should: * demonstrate how people with disabilities obtain and process information using a variety of methods, including text, labels, instructions, semantics, and imagery -* describe several approaches to communicate the structure, relations, and purpose of information +* explain accessible approaches to communicate the structure, relations, and purpose of information ## Learning Outcomes for Module @@ -39,14 +39,14 @@ Students should be able to: * explain how people with disabilities use several methods to obtain and process information, including text, labels, instructions, semantics, and imagery * describe approaches to break down different types of content into smaller and more manageable pieces, for example using: * pages, landmarks, and headings - * lists, simpler tables, and plain text to convey information presented in complex tables + * lists, simpler tables, and plain text * groups of form controls that share a common purpose -* describe the use of visual and non-visual cues to communicate information in multi-step processes +* define methods to communicate information in multi-step processes visually and non-visually * describe how to communicate the structure of multi-page articles or processes visually and non-visually * describe how to provide information about the name and purpose of components using descriptive labels and instructions * discuss ways to break down information presented in tables, including use of simple tables, lists, imagery, and plain text * evaluate the use of several methods to convey the information, including text, labels, instructions, semantics, and imagery depending on user needs -* identify related requirements for developers to programmatically associate headings, table header cells and data cells, as well as form labels and instructions, to their corresponding control +* identify related requirements for developers to programmatically associate landmarks, headings, table header cells and data cells, as well as form labels and instructions, to their corresponding control {% include excol.html type="all" %} @@ -100,11 +100,11 @@ Topics to achieve the learning outcomes: {% include excol.html type="start" %} -### Topic: Structure and Text +### Topic: Text and Structure {% include excol.html type="middle" %} -Discuss ways to communicate the structure of pages and documents. For example, using pages to split the content into logical units, landmarks to define page regions, headings with their corresponding rank levels to group related information. +Discuss ways to communicate the structure of pages and documents using text and semantics. For example, using pages to split the content into logical units, landmarks to define page regions, and headings with their corresponding rank levels to group related information. #### Learning Outcomes for Topic @@ -119,7 +119,7 @@ Students should be able to: * design methods to identify specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon * design methods to identify the expanded form or meaning of acronyms and abbreviations * identify related requirements for: - * developers to make language programmatically determined + * developers to code the regions, headings, and language of pages and parts * content authors to provide clear language and easy-to-read texts whenever possible #### Teaching Ideas for Topic @@ -184,19 +184,19 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Build on [Foundation Module 6: Understanding and Involving Users](/curricula/foundation-modules/understanding-and-involving-users/). Research strategies that people with disabilities use to interact with information presented in tables. For example, through textual descriptions, through graphical representation of the table contents, by splitting a complex table into several simpler tables, and by splitting the information in the table into individual lists. +Build on [Foundation Module 6: Understanding and Involving Users](/curricula/foundation-modules/understanding-and-involving-users/). Research strategies that people with disabilities use to interact with information presented in tables. For example, using textual descriptions, graphical representations of the table content, as well as several simpler tables or individual lists to present the information in a complex table. #### Learning Outcomes for Topic Students should be able to: * identify uses of tables to present data that share a logical relationship -* identify different ways of presenting tabular information, for example using several lists, or splitting a complex table into several simpler ones * define table header cells and data cells, and provide clear and distinguishable styles for each * define graphical representations of complex tables that help users more easily understand its purpose and meaning * evaluate the use of complex tables and select simpler ways to provide the information, for example: * simpler tables * charts, diagrams, and other graphical representations + * individual lists * plain text * identify related requirements for * developers to programmatically associate table descriptions, data cells, and header cells with their corresponding table diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index ab3547e84..e02f19928 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -30,28 +30,24 @@ navigation: Courses based on this module should: * explain strategies that people with disabilities use to access multimedia contents, such as audio and video -* explain accessibility requirements for multimedia content, such as descriptions of visual information àalso known as audio description, video description, or described video), captions (also known as subtitles), transcripts, and sign languages +* explain accessibility requirements for multimedia content, such as description of visual information (also known as audio description, video description, or described video), captions (also known as subtitles), transcripts, and sign languages ## Learning Outcomes for Module Students should be able to: * identify accessibility requirements for different types of audio and video content -* design user experiences for descriptions, captions, transcripts, and sign languages, including: - * placement and spacing for alternatives to multimedia content - * methods for turning on and off alternatives - * ways for users to interact with the alternatives -* identify accessibility issues of media players, including: - * evaluate the need for designing custom media players and select existing media players with support for accessibility where possible +* design user experiences for descriptions, captions, transcripts, and sign languages, including interactions, placement, and methods to turn on and off the alternatives +* identify accessibility issues associated with media players, including: * select media players with support for different methods of interaction, including mouse, keyboard, touch, and voice * select media player controls that have clear and descriptive names, that are easy to find, and that are always reachable for users -* design methods to control automatic audio or movement, including: +* design methods to control automatic audio and movement, including: * mute and control the volume of auto-playing audio - * pause, stop, and hide moving, blinking, and auto-updating content, including animations and carousels + * pause, stop, and hide moving, blinking, and auto-updating content, including carousels and other animations * identify related requirements for: * developers to programmatically associate alternatives and descriptions to their corresponding media content * developers to include accessibility support for media players - * content authors to provide appropriate text transcripts, captions, audio descriptions, and sign language + * content authors to provide appropriate descriptions, captions, transcripts, and sign languages {% include excol.html type="all" %} @@ -113,25 +109,25 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Audio description of visual information is essential for people who cannot see the visuals. Captions are essential for people who cannot hear the audio. Text transcripts provide an alternative to visual and audio information. +Descriptions of visual information are essential for people who cannot see the visuals. Captions are essential for people who cannot hear the audio. Text transcripts provide an alternative to visual and audio information. -Discuss the need for planning in the design phase to accommodate media alternatives such as audio description of visual information, captions, text transcripts, and sign language. Present methods to turn on and off alternatives to multimedia content depending on user needs. Explain that these methods need to have clear names and need to be always reachable for users. Explain that defining such methods is a designer's responsibility, whereas providing the alternatives is a responsibility shared with the content author. +Discuss the need for planning in the design phase to accommodate media alternatives such as descriptions, captions, text transcripts, and sign languages. Present methods to turn on and off alternatives to multimedia content depending on user needs. Explain that these methods need to have clear names and need to be always reachable for users. Explain that defining such methods is a designer's responsibility, whereas providing the alternatives is a responsibility shared with the content author. #### Learning Outcomes for Topic Students should be able to -* identify accessibility requirements for the different types of multimedia content, such as audio descriptions of visual information, captions, transcripts, and sign languages -* define the following alternatives to multimedia content: - * audio descriptions; descriptions to adequately get the visual information needed to understand the content - * captions; text versions of the speech and non-speech audio information needed to understand the content - * text transcripts; text that provides an alternative to visual and audio information - * sign language; the native language of some deaf people -* design methods for controlling the volume of audio that plays automatically for more than 3 seconds -* design methods to pause, stop, or hide alternatives to multimedia content that blink, move, or auto-update -* design the placement and user experience of alternatives for multimedia content, including audio descriptions, captions, transcripts, and sign language -* design methods to turn on and off audio descriptions, captions, transcripts, and sign language -* design player controls that: +* identify accessibility requirements for the different types of multimedia content, such as descriptions, captions, transcripts, and sign languages +* describe the following alternatives to multimedia content: + * descriptions + * captions + * transcripts + * sign language +* design user experiences of alternatives for multimedia content, including: + * placement of the alternatives + * methods to turn on and off the alternatives +* evaluate the need for designing custom media players and select existing media players with support for accessibility where possible +* design media player controls that: * have descriptive names * are operable by keyboard * are easy to find @@ -151,7 +147,8 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Short Answer Questions — Give students pieces of multimedia content and ask them where they would place their corresponding alternatives. Assess students' understanding of the requirements for alternatives to multimedia content. +* Short Answer Questions — Ask students what descriptions, captions, transcripts, and sign language mean. Assess how students define alternatives to multimedia content. +* Practical — Give students pieces of multimedia content and ask them to define the user experiences for the alternatives of those contents. Assess how students define placement, interactions, and methods to turn the alternatives on and off. {% include excol.html type="end" %} diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index b22ea02b5..7d848f01f 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -39,12 +39,12 @@ Students should be able to: * explain how people with disabilities rely on designs that adapt to different colors, layouts, spacing, and positions * design layouts with sufficient color contrast for text, images of text, and controls * design clear and distinguishable focus indicators, for example using borders, color, and highlighting +* use headings, spacing, and styling to group related content +* use visual and non-visual cues to convey information, including text, color, patterns, and icons * design layouts that adapt to: * different font sizes and spacing set by the user in browser and operating system settings * different screen sizes, screen configurations, and user style sheets -* use headings, spacing, and styling to group related content -* use visual and non-visual cues to convey information, including text, color, patterns, and icons -* evaluate the use of too many design elements, in particular interactive widgets, images, and moving content) on a page, and select elements that avoid potential distraction and cognitive overload +* evaluate the use of too many design elements and select elements that avoid potential distraction and cognitive overload * identify related requirements for developers to apply the necessary semantics to interface components {% include excol.html type="all" %} @@ -109,7 +109,7 @@ Topics to achieve the learning outcomes: Explain how sufficient color contrast (contrast ratio in WCAG) is essential for people with disabilities to perceive, distinguish, and understand content. -Describe how some people rely on color to understand and distinguish content. Explain that some people cannot perceive color well or at all. Discuss different ways to supplement information that is presented using color, such as using shapes and icons. +Describe how some people rely on color to understand and distinguish content. Explain that some people cannot perceive color well or at all. Discuss different ways to supplement information presented using color, such as using shapes and icons. #### Learning Outcomes for Topic @@ -129,7 +129,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of sufficient and insufficient color contrast for text. Explain that color contrast for text (including images of text) needs to be at least 4.5:1 with respect to their background. For references on how to apply sufficient color contrast to text (including images of text), see technique [G18: Ensuring that a color contrast of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). -* Show examples of different interactive components, such as buttons and links, and explain that they should have a color contrast of at least 3:1. +* Show examples of different interactive components, such as buttons and links. Explain that they should have a color contrast of at least 3:1. * Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so they require additional methods to convey that information. For references on how to supplement information conveyed through color, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). #### Ideas to Assess Knowledge for Topic @@ -166,7 +166,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Demonstrate the use of styles to distinguish links, buttons, and form labels and instructions, from plain text. Explain how people rely on font types, font sizes, spacing, and color to distinguish components. -* Show examples of usable font sizes and explain how they support readability. Contrast previous examples with fonts that are not as easy to read. Emphasize that several user groups rely on customizable fonts to be able to read and understand content properly. +* Show examples of usable font sizes and explain how they support readability. Contrast previous examples with fonts that are not as easy to read. Emphasize that several user groups rely on customizable fonts to read and understand content properly. * Show examples of different page layouts with and without appropriate spacing. Explain how spacing allows for better readability of the content and for better identification of the different parts of the interface. #### Ideas to Assess Knowledge for Topic @@ -183,7 +183,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Explain how people with disabilities perceive different web page regions and content through text and visual cues. Present strategies to plan for the inclusion of such cues early in the visual design phase. +Explain how people with disabilities perceive where they are in the page and in the content through text and visual cues. Present strategies to plan for the inclusion of such cues early in the visual design phase. #### Learning Outcomes for Topic @@ -200,7 +200,7 @@ Optional ideas to teach the learning outcomes: * Invite students to use a web page that has appropriate focus indicators first, and then invite them to use a web page without focus indicators. Explain how focus indicators allow people using the keyboard only to determine where they are as they move through web pages and applications using the keyboard only. For reference on how to provide appropriate focus indicators, see techniques [G149: Using user interface components that are highlighted by the user agent when they receive focus](https://www.w3.org/WAI/WCAG21/Techniques/general/G149.html) and [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). * Show examples of different web page regions, such as header, navigation, main, and footer. Explain that several groups of people with disabilities rely on visual and programmatic cues to perceive such regions. Explain that defining the presentation of these cues is a designers' responsibility, whereas implementing such cues and their semantics is a developers' responsibility. -* Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a form field is required and those with colors to convey available dates in a calendar. Explain that some people cannot rely on visual means to obtain information, so text is needed for them to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). +* Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a form field is required and those with colors to convey available dates in a calendar. Explain that some people cannot rely on visual means to obtain information, so they need text to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). #### Ideas to Assess Knowledge for Topic @@ -219,7 +219,9 @@ Optional ideas to assess knowledge: Explain how people with disabilities rely on layouts that adapt to different screen sizes, screen configurations, and style sheets to identify, distinguish, and process content. -Demonstrate how content sequence, focus indicators, and target sizes adapt to different screen sizes, screen configurations, and style sheets. Emphasize that these behaviors need to be planned early on in the visual design phase. +Demonstrate how content sequence, focus indicators, and target sizes adapt to different screen sizes, screen configurations, and style sheets. Emphasize that designers need to plan for these features early on in the visual design phase. + +Demonstrate how too many design elements can cause overload and distraction for some users. Demonstrate approaches to balance the use of too many design elements. #### Learning Outcomes for Topic @@ -231,6 +233,7 @@ Students should be able to: * design layouts with target sizes that adapt to different screen sizes, screen configurations, and style sheets * design layouts to support user customization of line height, as well as spacing between paragraphs, words, and letters * design meaningful focus orders that adapt to different viewports, screen sizes, and multiple breakpoints +* evaluate the use of too many design elements, in particular interactive widgets, images, and moving content) on a page, and select elements that avoid potential distraction and cognitive overload #### Teaching Ideas for Topic From 6b0c657a79689df5f5c0002b4eaf980f79679fba Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 4 Oct 2021 12:56:02 +0200 Subject: [PATCH 268/416] Removing unnecessary "audio" --- content/designer/multimedia-and-animations.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index e02f19928..ca9d9b020 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -137,7 +137,7 @@ Students should be able to Optional ideas to teach the learning outcomes: -* Show examples of audio descriptions of visual information. Explain that audio descriptions are alternatives for people who cannot see the video. Explain that defining the methods to enable and disable audio description of visual information is a designers' responsibility, whereas providing the audio description is a responsibility shared with the content author. +* Show examples of descriptions of visual information. Explain that descriptions are alternatives for people who cannot see the visuals. Explain that defining the methods to turn on and off the description is a designers' responsibility, whereas providing the description is a responsibility shared with the content author. * Show examples of captions. Explain that captions are alternatives for people who cannot hear the audio, and that they are useful in other situations. Explain that determining where to place captions is a designers' responsibility, whereas providing such captions is a responsibility shared with the content author. * Show examples of text transcripts. Explain that transcripts are alternatives for people who cannot hear the audio information and for people who cannot see the visual information. Explain that allocating the necessary space for the transcripts is a designers' responsibility, whereas providing such transcripts is a responsibility shared with the content author. * Show examples of sign language. Explain that sign language is essential for people who are deaf and who do not understand written language well. Explain that defining the methods to enable and disable sign language is a designers' responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. @@ -203,7 +203,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Portfolio — Students include accessible video and audio contents on a website. Assess how students understand the accessibility requirements of video and audio content, including transcripts for audio, audio descriptions, and sign language. +* Portfolio — Students include accessible video and audio contents on a website. Assess how students understand the accessibility requirements of video and audio content, including descriptions, captions, transcripts, and sign language. ## Teaching Resources From f8be16267892f9c4bbc6972122a3ba1fd6b16df7 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 5 Oct 2021 09:33:38 +0200 Subject: [PATCH 269/416] Updates to modules and topics --- content/designer/forms-design.md | 4 ++-- content/designer/information-design.md | 4 +++- content/designer/interaction-design.md | 6 +++--- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 498cb4070..3d93ab10f 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -38,7 +38,7 @@ Students should be able to: * demonstrate how people with disabilities rely on placement, structure, labels, instructions, and notifications to understand, navigate, and interact with forms * define consistent placement and appearance of form fields and widgets * define interactions with form controls and input fields, including through mouse, keyboard, touch, and voice -* define clear and distinguishable names for forms controls and input fields +* define clear and distinguishable names for form controls and input fields * define textual instructions, color, and other visual cues to help understand the context, information, and functionality of forms and input fields * define clear and descriptive visual and non-visual cues about the current step and about the total number of steps in a multi-step process, including multi-step forms * define clear and descriptive error messages that identify the field in error and provide suggestions for corrections where possible @@ -121,7 +121,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Refer back to [Designer Module 2: Information Design: Labels and Instructions](/curricula/designer-modules/information-design/#topic-labels-and-instructions). Show examples of labels and instructions in the context of forms and other complex widgets. +Refer back to [Designer Module 2: Information Design: Topic Naming and Grouping](/curricula/designer-modules/information-design/#topic-naming-and-grouping). Show examples of labels and instructions in the context of forms. Show examples of different ways to group large amounts of selectable data. For example, filtering out data into smaller pieces to better handle data, and typing the first letters of their desired option to select data more efficiently. diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 60a633330..0260b7929 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -46,7 +46,7 @@ Students should be able to: * describe how to provide information about the name and purpose of components using descriptive labels and instructions * discuss ways to break down information presented in tables, including use of simple tables, lists, imagery, and plain text * evaluate the use of several methods to convey the information, including text, labels, instructions, semantics, and imagery depending on user needs -* identify related requirements for developers to programmatically associate landmarks, headings, table header cells and data cells, as well as form labels and instructions, to their corresponding control +* identify related requirements for developers to programmatically associate landmarks, headings, table header cells and data cells, as well as form labels and instructions to their corresponding control {% include excol.html type="all" %} @@ -106,6 +106,8 @@ Topics to achieve the learning outcomes: Discuss ways to communicate the structure of pages and documents using text and semantics. For example, using pages to split the content into logical units, landmarks to define page regions, and headings with their corresponding rank levels to group related information. +Discuss the use of diagrams and illustrations to help users understand the information provided in text. + #### Learning Outcomes for Topic Students should be able to: diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index 62f5c2122..7cf4f1287 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -28,14 +28,14 @@ navigation: Courses based on this module should: -* demonstrate strategies that people with disabilities use to interact with components +* demonstrate strategies that people with disabilities use to interact with components, including forms, links, buttons, controls, and widgets * explain accessibility requirements related to input methods, including mouse, keyboard, touch, and voice ## Learning Outcomes for Module Students should be able to: -* explain strategies that people with disabilities use to interact with components +* explain strategies that people with disabilities use to interact with components, including forms, links, buttons, controls, and widgets * design user experiences for different input methods, including mouse, touch, keyboard, and speech * define keyboard interactions and meaningful sequences inside complex widgets, including buttons, carousels, sliders, tabs, and treeviews * evaluate the use of custom keyboard shortcuts for complex widgets and applications and provide information about their purpose and scope @@ -119,7 +119,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain that providing custom keyboard interactions can favor efficiency but can also disrupt the users' expectations. Thus, designers need to document these interactions and make them consistent throughout the interface. +Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys, versus specific non-standard shortcuts. Explain that providing custom keyboard interactions can favor efficiency but can also disrupt the users' expectations. Thus, designers need to document these custom interactions and make them consistent throughout the interface. Emphasize that defining the keyboard interactions is a designers' responsibility, whereas implementing such interactions is a responsibility shared with the developer. #### Learning Outcomes for Topic From 5b22f01a7479c5a0e5e211a59b75da5cb966c5ea Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 5 Oct 2021 10:22:09 +0200 Subject: [PATCH 270/416] Updating topic name --- content/designer/forms-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 3d93ab10f..4553c6f18 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -117,7 +117,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="start" %} -### Topic: Naming, Grouping, and Placement +### Topic: Labels and Instructions {% include excol.html type="middle" %} From ec6e587dc48a206a6044734d624f31f4ec251a11 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 5 Oct 2021 12:11:51 +0200 Subject: [PATCH 271/416] Aligns outline with current structure --- content/designer/designer-modules.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 2d5991a74..147c2fe7b 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -34,7 +34,9 @@ The designer modules guide the creation of courses that: * information design * navigation design * interaction design - * user experience + * images and graphics + * multimedia and animations + * forms These modules focus on visual, information, user experience, and interaction aspects to design accessible web pages and applications. From 00fb768fb0f97b0010ce7f80c739184f874ce883 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 5 Oct 2021 15:12:05 +0200 Subject: [PATCH 272/416] Clarifying and cleaning up --- content/designer/images-and-graphics.md | 31 ++++++++++++++----------- content/designer/information-design.md | 2 +- content/designer/interaction-design.md | 8 +++---- content/designer/navigation-design.md | 4 ++-- 4 files changed, 25 insertions(+), 20 deletions(-) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index c04679384..f1f8f78b2 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -42,9 +42,10 @@ Students should be able to: * design consistent imagery to help users recognize the purpose of icons, thumbnails, and other graphical components * explain the issues associated with perception, interpretation, and rendering of images of text * explain how to avoid images of text by using technologies that achieve the desired visual presentation wherever possible -* evaluate the use of images and select alternative ways to provide the information, including tables and plain text -* identify related requirements for developers to code images and text alternatives appropriately -* identify related requirements for content authors to provide appropriate descriptions for images, such as charts, diagrams, and other complex graphics +* evaluate the potential distraction and cognitive overload from using too many images and select alternative ways to provide the information, including tables and plain text +* identify related requirements for: + * developers to code images and text alternatives appropriately + * content authors to provide appropriate descriptions for images, such as charts, diagrams, and other complex graphics {% include excol.html type="all" %} @@ -118,7 +119,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different images used to convey functionality, for example for printing, searching, or saving a document. Explain that it is necessary to provide an equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). +* Show examples of different images used to convey functionality, for example for printing, searching, or saving a document. Explain that these images need an equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). #### Ideas to Assess Knowledge for Topic @@ -151,7 +152,7 @@ Students should be able to: * use styled text instead of images of text when the technology in use can provide the desired visual presentation * define alternatives to CAPTCHA and biometrics, for example by providing visual, auditory, and logical CAPTCHA * explain the issues associated with relying only on one form of biometrics and CAPTCHA, and describe alternative approaches for authentication -* evaluate the use of too many informative images and justify the use of other ways to convey the information, including plain text +* evaluate the issues associated to accessing information contained in informative images and select other ways to convey the information where possible, including plain text * identify related requirements for developers to code alternative texts for informative images ### Teaching Ideas for Topic @@ -160,7 +161,7 @@ Optional ideas to teach the learning outcomes: * Show examples of different images that convey information, such as images to provide instructions, and to identify people and objects. Explain that such information needs to be provided using text alternatives, so that the purpose of the image can be understood without having to look at the image. Emphasize that these alternatives may require coordination among designers, developers, and content authors. For references on how to provide text alternatives for images, see [G82: Providing a text alternative that identifies the purpose of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G82.html). * Explain that images of text present information intended to be read as text. Emphasize that sometimes it is difficult to tell visually if text has been coded as a text or as an image, so coordination among designers, developers, and content authors is needed to determine if the technologies in use can achieve the desired visual presentation. Emphasize that, if an image of text is still required, there needs to be a text alternative that conveys the same information as the image of text. Explain that coding an image of text appropriately is a responsibility of the developer, whereas providing descriptions for images of text is a responsibility shared with the content author. -* Show examples of different verification systems, such as CAPTCHA, to identify human beings trying to access a service or system. Explain that these methods need to support several modalities, including visual, auditory, and cognitive. For references on how to provide accessible CAPTCHA, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). +* Show examples of different verification systems, such as CAPTCHA, to identify human beings trying to access a service or system. Explain that these verification systems need to support several modalities, including visual, auditory, and cognitive. For references on how to provide accessible CAPTCHA, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). #### Ideas to Assess Knowledge for Topic @@ -185,14 +186,18 @@ Explain that coordination among different team members is required to assess the Students should be able to: -* use appropriate contrast ratios for complex images -* evaluate the use of complex images and select other ways to present the information; for example, using tables, simpler images, and plain text +* apply appropriate contrast ratios for complex images +* evaluate the use of complex images and select other ways to present the information, for example using tables, simpler images, and plain text * determine if and how complex images are operated using input devices, including mouse, keyboard, voice, and touch * consider placement and spacing for alternatives to complex images * design clear and consistent identification methods for complex image descriptions, including appropriate headings and expandable and collapsible components -* design user experiences for complex images, including how to get to the image descriptions, how the content of the description should look like, and if the descriptions could ultimately replace the image itself -* identify related requirements for content authors to provide descriptive, equivalent textual information to understand complex images and graphics, including diagrams, charts, maps, and infographics -* identify related requirements for content authors to break down complex images into smaller and more manageable pieces, for example simpler images, tables, and plain text +* design user experiences for complex images, including: + * how to get to the image descriptions + * how the content of the description should look like + * if the descriptions could ultimately replace the image itself +* identify related requirements for content authors to: + * provide descriptive, equivalent textual information to understand complex images and graphics, including diagrams, charts, maps, and infographics + * break down complex images into smaller and more manageable pieces, for example simpler images, tables, and plain text #### Teaching Ideas for Topic @@ -216,7 +221,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Decorative images are used for ornamental purposes and convey no information or function. Build on [Designer Module 1: Visual Design](/curricula/designer-modules/visual-design/) to explain accessibility requirements such as use of color, ability to resize, and adaptability in the context of decorative images. Decorative images require empty text alternatives, so that they can be ignored by assistive technologies, and reduce noise. Explain that determining if an image is decorative is a responsibility shared with the content author. +Decorative images are used for ornamental purposes and convey no information or function. Decorative images require empty text alternatives, so that they can be ignored by assistive technologies, and reduce noise. Explain that determining if an image is decorative is a responsibility shared with the content author. #### Learning Outcomes for Topic @@ -224,7 +229,7 @@ Students should be able to: * describe the differences between decorative and non-decorative images depending on the type of information conveyed by the image and the overall context * describe different ways to present information contained in an image in the surrounding content so that the image can be considered decorative -* evaluate the potential distraction and cognitive overload from using too many decorative images and select wwdecorative images that avoid distractions and cognitive overload +* evaluate the potential distraction and cognitive overload from using too many decorative images and select decorative images that avoid distractions and cognitive overload * explain how the overuse of decorative images could become distracting for some users and slow down loading times and interaction for other users * identify related requirements for developers to code decorative images so that they are skipped by assistive technologies diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 0260b7929..a23587f69 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -216,7 +216,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Give students a set of tables and ask them to define their header cells and data cells. Assess how students understand the difference between header cells and data cells. +* Practical — Give students a table and ask them to define the table's header cells and data cells. Assess how students understand the difference between header cells and data cells. * Practical — Give students a set of tables and ask them to provide clear styles to distinguish data cells from header cells. Assess how students provide clear and distinguishable styles for header cells and data cells. * Practical — Give students a complex table and ask them to split the information using simpler tables, lists, and graphical representations where appropriate. Assess how students provide alternative ways to present tabular information. diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index 7cf4f1287..9ec96043e 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -37,7 +37,7 @@ Students should be able to: * explain strategies that people with disabilities use to interact with components, including forms, links, buttons, controls, and widgets * design user experiences for different input methods, including mouse, touch, keyboard, and speech -* define keyboard interactions and meaningful sequences inside complex widgets, including buttons, carousels, sliders, tabs, and treeviews +* define keyboard interactions and meaningful sequences inside complex widgets, including sliders, tabs, and treeviews * evaluate the use of custom keyboard shortcuts for complex widgets and applications and provide information about their purpose and scope * define methods to disable device and user motion to prevent accidental actuation * define alternatives for complex gestures, including swiping, pinching, and drawing shapes @@ -165,7 +165,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Show examples of user interfaces that react to motion, such as shaking the device to perform a specific action. Explain that some people may perform these motion-based gestures inadvertently, some others may not be able to perform them at all. Discuss some alternatives to motion-based gestures. +Show examples of user interfaces that react to motion, such as shaking the device to perform a specific action. Explain that some people may perform these motion-based gestures inadvertently, some others may not be able to perform them at all. Present some alternatives to motion-based gestures, for example providing methods to undo, abort, and reverse actions performed using complex gestures. Discuss some gestures that require dragging and drawing specific paths on a touch screen. Explain that these are difficult (and sometimes impossible) to perform for some people with mobility impairments. @@ -175,7 +175,7 @@ Students should be able to: * design alternatives to multi-pointer gestures (including swiping, pinching, and drawing shapes) by using single pointer activation * design methods to undo or abort an action carried out with path-based gestures, including use of the up event to undo, abort, and reverse activation -* define alternatives for device or user motion, for example components that perform the same function that do not require user motion +* define alternatives for device or user motion, for example components performing the same function that do not require user motion * design methods to disable response to device or user motion to prevent accidental actuation #### Teaching Ideas for Topic @@ -202,7 +202,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Practical &mdash: Give students a web email client and ask them to provide the necessary custom keyboard shortcuts. Assess how students balance the use of standard versus custom keyboard shortcuts. +* Practical &mdash: Give students a web application, such as a web email client, and ask them to provide the necessary custom keyboard shortcuts. Assess how students balance the use of standard versus custom keyboard shortcuts. * Portfolio — Students design the interactions for a given interface, including mouse, keyboard, touch, and voice. Assess how students design user experiences for different input methods, including mouse, touch, keyboard, and speech. ## Teaching Resources diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 716b0c584..bb110b4cb 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -120,7 +120,7 @@ Students should be able to: * describe uses of different types of navigation menus, such as static, fly-out, and mega menus * define visual and text cues to identify menus, including: * consistent styling for menu identification across websites - * cues in the navigation menu to indicate the current page + * visual and non-visual cues in the navigation menu to indicate the current page * define interactions inside navigation menus, including mouse, keyboard, touch, and voice * design navigation menus that adapt to different text sizes, screen magnifications, and screen sizes and resolutions * design distinguishable and consistent styles for menu items in their different states, for example in fly-out menus @@ -187,7 +187,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to teach the learning outcomes: -* Practical — Give students awebsite and ask them to provide multiple ways to navigate across the website. Assess how students identify the different user experiences for navigation, including search functionalities, breadcrumb trails, and site maps. +* Practical — Give students a website and ask them to provide multiple ways to navigate across the website. Assess how students identify the different user experiences for navigation, including search functionalities, breadcrumb trails, and site maps. * Practical — Give students a website and ask them to provide descriptive titles that identify each of the pages. Assess how students provide clear and descriptive page titles. * Practical — Give students an interface with excessive use of navigational components and ask them to determine which of these navigational components should stay and which should be removed. Assess how students balance the use of navigational components to avoid distraction and unnecessary noise. From 58f55d7dd68483735fa24a0d484564414d06c045 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 5 Oct 2021 15:29:04 +0200 Subject: [PATCH 273/416] Unifying references --- content/designer/forms-design.md | 2 +- content/designer/information-design.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 4553c6f18..dfd95503a 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -121,7 +121,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Refer back to [Designer Module 2: Information Design: Topic Naming and Grouping](/curricula/designer-modules/information-design/#topic-naming-and-grouping). Show examples of labels and instructions in the context of forms. +Refer back to [Designer Module 2: Information Design, Topic: Naming and Grouping](/curricula/designer-modules/information-design/#topic-naming-and-grouping). Show examples of labels and instructions in the context of forms. Show examples of different ways to group large amounts of selectable data. For example, filtering out data into smaller pieces to better handle data, and typing the first letters of their desired option to select data more efficiently. diff --git a/content/designer/information-design.md b/content/designer/information-design.md index a23587f69..e7f03bcae 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -209,7 +209,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of different types of information presented in tables. Explain that tables are used when there is a logical, tabular relationship between the information presented, for example when displaying a list of events with their date and venue. -* Refer back to [Designer Module 1: Visual Design, Topic Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts) and explain that some users may require different ways of presenting tabular information. For example, providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. +* Refer back to [Designer Module 1: Visual Design, Topic: Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts) and explain that some users may require different ways of presenting tabular information. For example, providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. * Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells needs to be perceived both visually and programmatically. Explain that providing the styles is a designers' responsibility, whereas establishing the programmatic relationship is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic From 03683f43523a3328df65072be5ddfadaf7ff0a28 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 6 Oct 2021 16:20:51 +0200 Subject: [PATCH 274/416] Qualifying description of visual information --- content/designer/information-design.md | 2 +- content/designer/interaction-design.md | 2 +- content/designer/multimedia-and-animations.md | 10 +++++----- content/designer/visual-design.md | 2 +- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index e7f03bcae..b574c3d6b 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 2: Information Design [WIP]" +title: "[Draft] Module 2: Information Design" nav_title: "Information Design" permalink: /curricula/designer-modules/information-design/ ref: /curricula/designer-modules/information-design/ diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index 9ec96043e..38da5a086 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -28,7 +28,7 @@ navigation: Courses based on this module should: -* demonstrate strategies that people with disabilities use to interact with components, including forms, links, buttons, controls, and widgets +* demonstrate strategies that people with disabilities use to interact with components, custom widgets, and rich applications, including links, buttons, controls, forms, and widgets * explain accessibility requirements related to input methods, including mouse, keyboard, touch, and voice ## Learning Outcomes for Module diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index ca9d9b020..15c7df79e 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 6: Multimedia and Animations [WIP]" +title: "[Draft] Module 6: Multimedia and Animations" nav_title: "Multimedia and Animations" permalink: /curricula/designer-modules/multimedia-and-animations/ ref: /curricula/designer-modules/multimedia-and-animations/ @@ -109,9 +109,9 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Descriptions of visual information are essential for people who cannot see the visuals. Captions are essential for people who cannot hear the audio. Text transcripts provide an alternative to visual and audio information. +Description of visual information is essential for people who cannot see the visuals. Captions are essential for people who cannot hear the audio. Text transcripts provide an alternative to visual and audio information. -Discuss the need for planning in the design phase to accommodate media alternatives such as descriptions, captions, text transcripts, and sign languages. Present methods to turn on and off alternatives to multimedia content depending on user needs. Explain that these methods need to have clear names and need to be always reachable for users. Explain that defining such methods is a designer's responsibility, whereas providing the alternatives is a responsibility shared with the content author. +Discuss the need for planning in the design phase to accommodate alternatives to multimedia content such as descriptions, captions, text transcripts, and sign languages. Present methods to turn on and off alternatives to multimedia content depending on user needs. Explain that these methods need to have clear names and need to be always reachable for users. Explain that defining such methods is a designer's responsibility, whereas providing the alternatives is a responsibility shared with the content author. #### Learning Outcomes for Topic @@ -119,7 +119,7 @@ Students should be able to * identify accessibility requirements for the different types of multimedia content, such as descriptions, captions, transcripts, and sign languages * describe the following alternatives to multimedia content: - * descriptions + * descriptions of visual information * captions * transcripts * sign language @@ -137,7 +137,7 @@ Students should be able to Optional ideas to teach the learning outcomes: -* Show examples of descriptions of visual information. Explain that descriptions are alternatives for people who cannot see the visuals. Explain that defining the methods to turn on and off the description is a designers' responsibility, whereas providing the description is a responsibility shared with the content author. +* Show examples of descriptions of visual information. Emphasize how these alternatives deswcribe the visual information (including text) for people who cannot see the videos. Explain that different standards and policies may refer to descriptions of visual information using different terms, such as audio descriptions, video descriptions, and described videos. Explain that defining the methods to turn on and off the description is a designers' responsibility, whereas providing the description is a responsibility shared with the content author. * Show examples of captions. Explain that captions are alternatives for people who cannot hear the audio, and that they are useful in other situations. Explain that determining where to place captions is a designers' responsibility, whereas providing such captions is a responsibility shared with the content author. * Show examples of text transcripts. Explain that transcripts are alternatives for people who cannot hear the audio information and for people who cannot see the visual information. Explain that allocating the necessary space for the transcripts is a designers' responsibility, whereas providing such transcripts is a responsibility shared with the content author. * Show examples of sign language. Explain that sign language is essential for people who are deaf and who do not understand written language well. Explain that defining the methods to enable and disable sign language is a designers' responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 7d848f01f..4afa2ea93 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 1: Visual Design [WIP]" +title: "[Draft] Module 1: Visual Design" nav_title: "Visual Design" permalink: /curricula/designer-modules/visual-design/ ref: /curricula/designer-modules/visual-design/ From a1e3e7fdbd4d7972c97628ff8e9ece4cccb68756 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 6 Oct 2021 16:26:48 +0200 Subject: [PATCH 275/416] Fix typo --- content/designer/multimedia-and-animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 15c7df79e..201f062be 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -137,7 +137,7 @@ Students should be able to Optional ideas to teach the learning outcomes: -* Show examples of descriptions of visual information. Emphasize how these alternatives deswcribe the visual information (including text) for people who cannot see the videos. Explain that different standards and policies may refer to descriptions of visual information using different terms, such as audio descriptions, video descriptions, and described videos. Explain that defining the methods to turn on and off the description is a designers' responsibility, whereas providing the description is a responsibility shared with the content author. +* Show examples of descriptions of visual information. Emphasize how these alternatives describe the visual information (including text) for people who cannot see the videos. Explain that different standards and policies may refer to descriptions of visual information using different terms, such as audio descriptions, video descriptions, and described videos. Explain that defining the methods to turn on and off the description is a designers' responsibility, whereas providing the description is a responsibility shared with the content author. * Show examples of captions. Explain that captions are alternatives for people who cannot hear the audio, and that they are useful in other situations. Explain that determining where to place captions is a designers' responsibility, whereas providing such captions is a responsibility shared with the content author. * Show examples of text transcripts. Explain that transcripts are alternatives for people who cannot hear the audio information and for people who cannot see the visual information. Explain that allocating the necessary space for the transcripts is a designers' responsibility, whereas providing such transcripts is a responsibility shared with the content author. * Show examples of sign language. Explain that sign language is essential for people who are deaf and who do not understand written language well. Explain that defining the methods to enable and disable sign language is a designers' responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. From 08b324632c498855873ef4bb8420e23eb033834c Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 14 Oct 2021 12:30:44 +0200 Subject: [PATCH 276/416] Updates to modules and topics --- content/designer/designer-modules.md | 4 +- content/designer/information-design.md | 4 +- content/designer/interaction-design.md | 40 +++++++++---------- content/designer/multimedia-and-animations.md | 22 +++++----- content/designer/navigation-design.md | 10 ++--- content/designer/visual-design.md | 12 +++--- 6 files changed, 46 insertions(+), 46 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 147c2fe7b..d2d1513e4 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -71,7 +71,7 @@ The designer modules are designed for students who have achieved the learning ou - [Module 1: Visual Design](/curricula/designer-modules/visual-design) - [Topic: Color](/curricula/designer-modules/visual-design/#topic-color) - [Topic: Styles](/curricula/designer-modules/visual-design/#topic-styles) - - [Topic: Cues](/curricula/designer-modules/visual-design/#topic-cues) + - [Topic: Orientation Cues](/curricula/designer-modules/visual-design/#topic-orientation-cues) - [Topic: Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts) - [Module 2: Information Design](/curricula/designer-modules/information-design/) - [Topic: Text and Structure](/curricula/designer-modules/information-design/#topic-text-and-structure) @@ -82,7 +82,7 @@ The designer modules are designed for students who have achieved the learning ou - [Topic: Site Navigation](/curricula/designer-modules/navigation-design/#topic-site-navigation) - [Topic: Page Navigation](/curricula/designer-modules/navigation-design/#topic-page-navigation) - [Module 4: Interaction Design](/curricula/designer-modules/interaction-design/) - - [Topic: Keyboard Interaction](/curricula/designer-modules/interaction-design/#topic-keyboard-interaction) + - [Topic: Keyboard Interactions](/curricula/designer-modules/interaction-design/#topic-keyboard-interactions) - [Topic: Gestures and Motion](/curricula/designer-modules/interaction-design/#topic-gestures-and-motion) - [Module 5: Images and Graphics](/curricula/designer-modules/images-and-graphics/) - [Topic: Functional Images](/curricula/designer-modules/images-and-graphics/#topic-functional-images) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index b574c3d6b..aef33c126 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -138,7 +138,6 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Short Answer Questions — Ask students about the different approaches they can use to communicate structure in web pages and documents. Assess how students recognize structures such as pages, headings, and landmarks. * Practical — Give students an eBook and ask them to define how it should be split into smaller and more manageable pieces so that it can be easier to navigate and understand. Assess how students use pages, landmarks, and headings with their corresponding rank levels to split large amounts of text into smaller and more manageable pieces. * Practical — Give students a complex piece of text and ask them to complement it with diagrams and illustrations. Assess how students provide methods to complement processes and instructions presented in text. * Practical — Give students unusual words and abbreviations and ask them to define methods to provide the explanation of such words or the expansion of the abbreviations. Assess how students define methods to provide explanations of unusual words and expansions of abbreviations. @@ -168,7 +167,7 @@ Optional ideas to teach the learning outcomes: * Show examples of names for components, including links, buttons, and form controls. Explain that these names help users identify these components. Explain that defining the presentation of these names is a designers' responsibility, implementing these names is a developers' responsibility, and defining these names is a responsibility shared with the content author. * Show examples of overall instructions, for example indications of what will happen after pressing a button. Explain that these instructions help users better understand the purpose and functionality of components. Explain that defining the presentation of these instructions is a designer's responsibility, implementing these instructions is a developer's responsibility, and defining these instructions is a responsibility shared with the content author. -* Show examples of multi-step processes, such as a multi-step form, with and without instructions to indicate the current process and total number of steps. Explain that people rely on such instructions to get an understanding of where they are in the process and how many steps the process has. Explain that defining the presentation of such instructions is a designers' responsibility, implementing these instructions is a developers' responsibility, and providing these instructions is a responsibility shared with the content author. +* Show examples of multi-step processes, such as a multi-step form, with instructions to indicate the current step and total number of steps in the process. Then show examples of multi-step processes without such instructions. Compare the user experiences for each of the examples. Explain that people rely on such instructions to get an understanding of where they are in the process and how many steps the process has. Explain that defining the presentation of such instructions is a designers' responsibility, implementing these instructions is a developers' responsibility, and providing these instructions is a responsibility shared with the content author. * Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to understand and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and programmatically, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look like is a designers' responsibility, whereas coding those relations is a developers' responsibility. #### Ideas to Assess Knowledge for Topic @@ -228,6 +227,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: +* Short Answer Questions — Ask students about the different approaches they can use to communicate the structure in web pages and documents. Assess how students recognize structures such as pages, headings, and landmarks. * Portfolio — Students organize different pieces of information on a website, including text, forms, and images. Assess how students provide methods for people to identify different pieces of information, how students split large amounts of information into smaller and more manageable pieces, and how they group related information together. ## Teaching Resources diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index 38da5a086..71d1e0178 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -1,5 +1,5 @@ --- -title: "[Draft] Module 4: Interaction Design [WIP]" +title: "[Draft] Module 4: Interaction Design" nav_title: "Interaction Design" permalink: /curricula/designer-modules/interaction-design/ ref: /curricula/designer-modules/interaction-design/ @@ -28,16 +28,16 @@ navigation: Courses based on this module should: -* demonstrate strategies that people with disabilities use to interact with components, custom widgets, and rich applications, including links, buttons, controls, forms, and widgets +* demonstrate strategies that people with disabilities use to interact with components of web pages and applications, including links, buttons, controls, forms, and widgets * explain accessibility requirements related to input methods, including mouse, keyboard, touch, and voice ## Learning Outcomes for Module Students should be able to: -* explain strategies that people with disabilities use to interact with components, including forms, links, buttons, controls, and widgets +* explain strategies that people with disabilities use to interact with components of web pages and applications, including forms, links, buttons, controls, and widgets * design user experiences for different input methods, including mouse, touch, keyboard, and speech -* define keyboard interactions and meaningful sequences inside complex widgets, including sliders, tabs, and treeviews +* define interactions and meaningful sequences inside complex widgets, including sliders, tabs, dialogs, application menus, and tree views * evaluate the use of custom keyboard shortcuts for complex widgets and applications and provide information about their purpose and scope * define methods to disable device and user motion to prevent accidental actuation * define alternatives for complex gestures, including swiping, pinching, and drawing shapes @@ -115,7 +115,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="start" %} -### Topic: Keyboard Interaction +### Topic: Keyboard Interactions {% include excol.html type="middle" %} @@ -126,12 +126,12 @@ Emphasize that defining the keyboard interactions is a designers' responsibility Students should be able to: -* design user experiences for keyboard navigation through and inside components, for example: - * using the tab key to move through different components - * using the enter key to enter a specific component and to select a specific item on a component - * using the arrow keys to move through elements inside components, including application menus, dialogs, list items, and grid cells - * using the escape key to exit components - * using first letter navigation to jump to specific pieces of data in lists and grids +* design user experiences for keyboard navigation through and inside components, for example using: + * the tab key to move through different components + * the enter key to enter a specific component and to select a specific item on a component + * the arrow keys to move through elements inside components, including sliders, tabs, dialogs, application menus, and tree views + * the escape key to exit components + * first letter navigation to jump to specific pieces of data in lists and grids * specific keyboard shortcuts to support efficiency * identify situations when it is necessary to provide additional keyboard shortcuts, for example when designing a custom functionality that is not keyboard supported by default * evaluate the use of custom keyboard interactions and select keyboard interactions that avoid conflicts with the operating system, browser, and assistive technologies when possible @@ -145,7 +145,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Invite students to try standard keyboard conventions. For example, use of the tab to move through user interface components, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that these interactions need to be preserved as much as possible when designing custom widgets, as these are mostly expected by users. -* Reflect with students about keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers need to work closely with other team members, including developers and user researchers, on strategies to define custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and working with developers to implement such keystrokes. +* Invite students to research keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers need to work closely with other team members, including developers and user researchers, on strategies to define custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and working with developers to implement such keystrokes. * Present examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. * Show examples of help functionality for custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using such shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these help methods is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. @@ -165,26 +165,26 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Show examples of user interfaces that react to motion, such as shaking the device to perform a specific action. Explain that some people may perform these motion-based gestures inadvertently, some others may not be able to perform them at all. Present some alternatives to motion-based gestures, for example providing methods to undo, abort, and reverse actions performed using complex gestures. +Show examples of user interfaces that react to motion, such as shaking the device to perform a specific action. Explain that some people may perform these motion-based gestures inadvertently, others may not be able to perform them at all. Present alternatives to motion-based gestures, for example providing methods to undo, abort, and reverse actions performed using complex gestures. -Discuss some gestures that require dragging and drawing specific paths on a touch screen. Explain that these are difficult (and sometimes impossible) to perform for some people with mobility impairments. +Discuss some gestures that require dragging and drawing specific paths on a touch screen. Explain that these are difficult (and sometimes impossible) to perform for some people. #### Learning Outcomes for Topic Students should be able to: -* design alternatives to multi-pointer gestures (including swiping, pinching, and drawing shapes) by using single pointer activation -* design methods to undo or abort an action carried out with path-based gestures, including use of the up event to undo, abort, and reverse activation +* define alternatives to multi-pointer gestures (including swiping, pinching, and drawing shapes) by using single pointer activation +* define methods to undo or abort an action carried out with path-based gestures, including use of the up event to undo, abort, and reverse activation * define alternatives for device or user motion, for example components performing the same function that do not require user motion -* design methods to disable response to device or user motion to prevent accidental actuation +* define methods to disable response to device or user motion to prevent accidental actuation #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of gestures such as swipe or pinch. Explain that users with mobility impairments may have difficulty to perform such gestures, so user interfaces need to have alternatives that do not require swiping or pinching to perform an action. -* Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments may have difficulty to perform such gestures, so user interfaces need to have alternatives that do not require motion for these gestures. -* Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events, so user interfaces need to support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. +* Show examples of interactions based on swipe and pinch gestures. Explain that users with mobility impairments may have difficulty to perform such gestures, so interfaces need to have alternatives that do not require swiping or pinching to perform an action. +* Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments may have difficulty to perform such gestures, so interfaces need to have alternatives that do not require motion for these gestures. +* Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events, so interfaces need to support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 201f062be..4869e6284 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -37,7 +37,7 @@ Courses based on this module should: Students should be able to: * identify accessibility requirements for different types of audio and video content -* design user experiences for descriptions, captions, transcripts, and sign languages, including interactions, placement, and methods to turn on and off the alternatives +* design user experiences for description, captions, transcripts, and sign languages, including interactions, placement, and methods to turn on and off the alternatives * identify accessibility issues associated with media players, including: * select media players with support for different methods of interaction, including mouse, keyboard, touch, and voice * select media player controls that have clear and descriptive names, that are easy to find, and that are always reachable for users @@ -45,9 +45,9 @@ Students should be able to: * mute and control the volume of auto-playing audio * pause, stop, and hide moving, blinking, and auto-updating content, including carousels and other animations * identify related requirements for: - * developers to programmatically associate alternatives and descriptions to their corresponding media content + * developers to programmatically associate alternatives to their corresponding media content * developers to include accessibility support for media players - * content authors to provide appropriate descriptions, captions, transcripts, and sign languages + * content authors to provide appropriate description, captions, transcripts, and sign languages {% include excol.html type="all" %} @@ -111,15 +111,15 @@ Topics to achieve the learning outcomes: Description of visual information is essential for people who cannot see the visuals. Captions are essential for people who cannot hear the audio. Text transcripts provide an alternative to visual and audio information. -Discuss the need for planning in the design phase to accommodate alternatives to multimedia content such as descriptions, captions, text transcripts, and sign languages. Present methods to turn on and off alternatives to multimedia content depending on user needs. Explain that these methods need to have clear names and need to be always reachable for users. Explain that defining such methods is a designer's responsibility, whereas providing the alternatives is a responsibility shared with the content author. +Discuss the need for planning in the design phase to accommodate alternatives to multimedia content such as description, captions, text transcripts, and sign languages. Present methods to turn on and off alternatives to multimedia content depending on user needs. Explain that these methods need to have clear names and need to be always reachable for users. Explain that defining such methods is a designer's responsibility, whereas providing the alternatives is a responsibility shared with the content author. #### Learning Outcomes for Topic Students should be able to -* identify accessibility requirements for the different types of multimedia content, such as descriptions, captions, transcripts, and sign languages +* identify accessibility requirements for the different types of multimedia content, such as description, captions, transcripts, and sign languages * describe the following alternatives to multimedia content: - * descriptions of visual information + * description of visual information * captions * transcripts * sign language @@ -127,7 +127,7 @@ Students should be able to * placement of the alternatives * methods to turn on and off the alternatives * evaluate the need for designing custom media players and select existing media players with support for accessibility where possible -* design media player controls that: +* describe approaches to design media player controls that: * have descriptive names * are operable by keyboard * are easy to find @@ -137,17 +137,17 @@ Students should be able to Optional ideas to teach the learning outcomes: -* Show examples of descriptions of visual information. Emphasize how these alternatives describe the visual information (including text) for people who cannot see the videos. Explain that different standards and policies may refer to descriptions of visual information using different terms, such as audio descriptions, video descriptions, and described videos. Explain that defining the methods to turn on and off the description is a designers' responsibility, whereas providing the description is a responsibility shared with the content author. +* Show examples of description of visual information. Emphasize how these alternatives describe the visual information (including text) for people who cannot see the videos. Explain that different standards and policies may refer to description of visual information using different terms, such as audio description, video description, and described videos. Explain that defining the methods to turn on and off the description is a designers' responsibility, whereas providing the description is a responsibility shared with the content author. * Show examples of captions. Explain that captions are alternatives for people who cannot hear the audio, and that they are useful in other situations. Explain that determining where to place captions is a designers' responsibility, whereas providing such captions is a responsibility shared with the content author. * Show examples of text transcripts. Explain that transcripts are alternatives for people who cannot hear the audio information and for people who cannot see the visual information. Explain that allocating the necessary space for the transcripts is a designers' responsibility, whereas providing such transcripts is a responsibility shared with the content author. * Show examples of sign language. Explain that sign language is essential for people who are deaf and who do not understand written language well. Explain that defining the methods to enable and disable sign language is a designers' responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. -* Show examples of accessible and inaccessible media players. Emphasize that it is generally more reliable to use an existing media player with support for accessibility than to designing one from scratch. Explain how accessible media player controls have appropriate contrast ratios, are operable by keyboard, and are easy to find. Emphasize that users need to be able to reach the controls even when the media is playing. +* Show examples of accessible and inaccessible media players. Emphasize that it is generally more reliable to use an existing media player with support for accessibility than to designing one from scratch. Explain how accessible media player controls have appropriate contrast ratios, are operable by keyboard, and are easy to find. Emphasize that users need to be able to reach the controls even when the media is playing. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Short Answer Questions — Ask students what descriptions, captions, transcripts, and sign language mean. Assess how students define alternatives to multimedia content. +* Short Answer Questions — Ask students what description, captions, transcripts, and sign language mean in the context of accessible media content. Assess how students define alternatives to multimedia content. * Practical — Give students pieces of multimedia content and ask them to define the user experiences for the alternatives of those contents. Assess how students define placement, interactions, and methods to turn the alternatives on and off. {% include excol.html type="end" %} @@ -203,7 +203,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Portfolio — Students include accessible video and audio contents on a website. Assess how students understand the accessibility requirements of video and audio content, including descriptions, captions, transcripts, and sign language. +* Portfolio — Students include accessible video and audio contents on a website. Assess how students understand the accessibility requirements of video and audio content, including description, captions, transcripts, and sign language. ## Teaching Resources diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index bb110b4cb..711332507 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -137,15 +137,15 @@ Optional ideas to teach the learning outcomes: * Present different types of navigation menus, such as static, fly-out, and mega menus. Explain conventions for accessible navigation menus, for example clear and consistent styling to convey menu behaviors and states. * Demonstrate interactions with navigation menu using different input devices, including keyboard, mouse, touch, and voice. For example, activating a menu option by tapping, pressing the Enter and Space keys, and mouse clicking. Explain that defining the interactions is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. * Show examples of navigation menus and menu items large text. Explain that the text needs to adapt to different viewports and screen configurations, for example wrap so that it is perceived in its entirety. Explain that different languages may have different word sizes, so designers need to consider provisions for different word lengths. -* Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Emphasize that the states of these menu items need to be communicated using visual cues as well as semantics. Explain that providing the visual cues is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. +* Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Explain how to communicate the states of these menu items visually and non-visually. Explain that defining the visual presentation is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: * Practical — Students define mouse, keyboard, touch, and voice interactions for navigation menus. For example, how to open, navigate, activate, and close such menus using the mouse, keyboard, touch, and voice. Assess how students understand the need for different interaction patterns based on the input method in use. -* Practical — Give students different navigation menu states, such as hover, focus, current, active, and visited, and ask them to provide visual and non-visual cues to distinguish them from one another. Assess how students communicate navigation menus and menu items states visually and non-visually. -* Practical — Give students a navigation menu and ask them to provide text and visual indications about the currently selected item. Assess how students provide appropriate indications about the page location with respect to the entire website. +* Practical — Give students different navigation menu states, such as hover, focus, current, active, and visited, and ask them to provide visual and non-visual methods to distinguish them from one another. Assess how students communicate navigation menus and menu items states visually and non-visually. +* Practical — Give students a navigation menu and ask them to provide visual and non-visual indications about the currently selected item. Assess how students provide appropriate indications about the page location with respect to the entire website. * Practical — Give students navigation menus containing long strings of text and ask them to ensure the text is shown irrespective of the viewport and screen configuration used. Assess how students understand the diversity among different languages, viewports, and screen configurations. {% include excol.html type="end" %} @@ -180,8 +180,8 @@ Optional ideas to teach the learning outcomes: * Show examples of breadcrumb trails. Explain that they provide information about the user's location in the context of a whole website. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail](https://www.w3.org/WAI/WCAG21/Techniques/general/G65). * Show examples of site maps and explain that they serve the purpose of providing an overview of the whole site. Explain that some users rely on them to better understand the structure of the site and to find its way more easily through it. For references on how to provide a site map, see [G63: Providing a site map](https://www.w3.org/WAI/WCAG21/Techniques/general/G63.html). * Show examples of search functionalities. Explain that they help users find content by supporting navigation to different parts of the site. Emphasize that some users prefer this way of navigating, especially when they are already familiar with the site and know what they are looking for. For references on how to provide a search functionality, see technique [G161: Providing a search function to help users find content](https://www.w3.org/WAI/WCAG21/Techniques/general/G161). -* Invite students to give examples of page titles they are familiar with and reflect with them on how well the titles describe the page contents. Explain that page titles are useful to identify the purpose of a specific web page within a website. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page. Some browsers and assistive technologies may truncate the titles or not show them at all. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). -* Show examples of visual and text cues in menus to indicate what is the currently visible page with respect to the set of websites. +* Invite students to research different ways to present information in page titles. Reflect with them on how well the titles describe the page contents. Explain that page titles are useful to identify the purpose of a specific web page within a website. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page. Some browsers and assistive technologies may truncate the titles or not show them at all. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). +* Show examples of visual and non-visual indications in menus about the current page with respect to the websites. #### Teaching Ideas for Topic diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 4afa2ea93..071d6871f 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -179,11 +179,11 @@ Optional ideas to assess knowledge: {% include excol.html type="start" %} -### Topic: Cues +### Topic: Orientation Cues {% include excol.html type="middle" %} -Explain how people with disabilities perceive where they are in the page and in the content through text and visual cues. Present strategies to plan for the inclusion of such cues early in the visual design phase. +Explain how people with disabilities orient on web pages and applications using text and visual cues, including focus indicators, as well as spacing and grouping to communicate regions. Present strategies to plan for the inclusion of such cues early in the visual design phase. #### Learning Outcomes for Topic @@ -206,8 +206,9 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: +* Practical — Ask students to define the visual presentation of focus indicators on a web page or application. Assess how students understand the importance of focus indicators for users to know where they are on a web page or application. * Practical — Give students a web page and ask them to define its regions and cues. Assess how students define regions and cues using a variety of methods, including semantics and styling. -* Practical &mdash: Give students examples of information conveyed visually and ask them to provide text to help understand the information. Assess how students provide the necessary textual information to supplement information conveyed visually. +* Short Answer Questions — Give students examples of orientation cues conveyed visually and ask them to provide text to help understand the information. Assess how students provide the necessary textual information to supplement orientation cues conveyed visually. {% include excol.html type="end" %} @@ -217,9 +218,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Explain how people with disabilities rely on layouts that adapt to different screen sizes, screen configurations, and style sheets to identify, distinguish, and process content. - -Demonstrate how content sequence, focus indicators, and target sizes adapt to different screen sizes, screen configurations, and style sheets. Emphasize that designers need to plan for these features early on in the visual design phase. +Explain how people with disabilities rely on layouts that adapt to different screen sizes, screen configurations, and style sheets to identify, distinguish, and process content. Demonstrate how content sequence, focus indicators, and target sizes adapt to different screen sizes, screen configurations, and style sheets. Emphasize that designers need to plan for these features early on in the visual design phase. Demonstrate how too many design elements can cause overload and distraction for some users. Demonstrate approaches to balance the use of too many design elements. @@ -259,6 +258,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: +* Short Answer Questions — Ask students about the color contrast ratios for the different user interface components. Assess how students understand the different color contrast requirements depending on the components. * Portfolio — Students design a web page. Assess how students use customizable color, layout, spacing, and position to support content perception, identification, and readability. ## Teaching Resources From 4cf238902fe5b34f66a6ca362509b1957cdf85af Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 18 Oct 2021 10:21:13 +0200 Subject: [PATCH 277/416] Updates to modules and topics --- content/designer/forms-design.md | 72 +++++++++++-------- content/designer/images-and-graphics.md | 21 +++--- content/designer/information-design.md | 4 +- content/designer/multimedia-and-animations.md | 36 +++++----- content/designer/navigation-design.md | 2 +- content/designer/visual-design.md | 2 +- 6 files changed, 79 insertions(+), 58 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index dfd95503a..2b8e48ec6 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -36,13 +36,18 @@ Courses based on this module should: Students should be able to: * demonstrate how people with disabilities rely on placement, structure, labels, instructions, and notifications to understand, navigate, and interact with forms -* define consistent placement and appearance of form fields and widgets +* define consistent placement and appearance of form controls and input fields * define interactions with form controls and input fields, including through mouse, keyboard, touch, and voice -* define clear and distinguishable names for form controls and input fields -* define textual instructions, color, and other visual cues to help understand the context, information, and functionality of forms and input fields -* define clear and descriptive visual and non-visual cues about the current step and about the total number of steps in a multi-step process, including multi-step forms -* define clear and descriptive error messages that identify the field in error and provide suggestions for corrections where possible -* define meaningful and descriptive visual and non-visual notifications, including for imminent time limits, success messages, status changes, and feedback from user input +* define clear and distinguishable names as well as visual and non-visual instructions to understand the purpose and functionality of controls and input fields +* define clear and descriptive visual and non-visual instructions about the current step and about the total number of steps in multi-step forms +* define clear and descriptive error messages that: + * identify the field in error + * provide suggestions for correction where possible +* define meaningful and descriptive visual and non-visual notifications, including for: + * imminent time limits + * success messages + * status changes + * feedback from user input * describe related requirements for developers to implement semantics and programmatic relationships for forms {% include excol.html type="all" %} @@ -123,27 +128,26 @@ Topics to achieve the learning outcomes: Refer back to [Designer Module 2: Information Design, Topic: Naming and Grouping](/curricula/designer-modules/information-design/#topic-naming-and-grouping). Show examples of labels and instructions in the context of forms. -Show examples of different ways to group large amounts of selectable data. For example, filtering out data into smaller pieces to better handle data, and typing the first letters of their desired option to select data more efficiently. - #### Learning outcomes for Topic Students should be able to: -* design user experiences that consider position, appearance, and naming for labels and instructions +* design user experiences that consider position and appearance for labels and instructions +* define clear and consistent names for form controls and input fields across websites and applications * define visual and non-visual instructions about which input fields are required -* define clear instructions about changes in context before the component that originates such changes -* define overall instructions about existing time limits in a form and about how to adjust them, extend them, and turn them off -* define clear instructions about the current step and about the total number of steps involved in a multi-step form -* identify related requirements for developers to provide semantics for labels and instructions appropriately +* define clear visual and non-visual instructions about changes in context before the component that originates such changes +* define overall visual and non-visual instructions about existing time limits in a form and about how to adjust them, extend them, and turn them off +* define clear visual and non-visual instructions about the current step and about the total number of steps involved in a multi-step form +* identify related requirements for developers to provide semantics for labels and instructions #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: * Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. -* Show examples of different form fields and widgets, for example buttons, links, lists, and grids, across web pages and rich applications. Emphasize that each should have a clear name that allows to identify its purpose. For reference on how to provide names for different form elements and custom widgets, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). -* Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several methods, including textual and visual cues. -* Present examples of time limits, such as those warning about session expirations. Explain that instructions need to be provided so that users are aware of the time limits, and methods need to be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designers' responsibility, whereas implementing methods to stop, extend, or adjust time limits is a responsibility shared with the developer. +* Show examples of different form controls and input fields , for example buttons, checkboxes, text boxes, and listboxes, across websites and applications. Emphasize that each should have a clear name that identifies its purpose. For reference on how to provide consistent names for different form elements across websites and applications, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). +* Show examples of required and non-required form fields. Explain that instructions about which of the fields are required should be provided using several methods, including visual and non-visual instructions. +* Present examples of time limits, such as those warning about session expirations. Explain that visual and non-visual instructions need to be provided so that users are aware of the time limits, and methods need to be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designers' responsibility, whereas implementing methods to stop, extend, or adjust time limits is a responsibility shared with the developer. * Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. #### Ideas to Assess Knowledge for Topic @@ -151,7 +155,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Give students a form and ask them to define labels for each of the fields. Assess how students provide clear and descriptive names for each of the form fields. -* Practical — Give students an application and ask them to provide names for each of the application subsections. Assess how students identify application subsections and provide clear and understandable names for each. +* Practical — Give students a form with required and non-required fields and ask them to provide visual and non-visual instructions to communicate the required fields. Assess how students provide clear and understandable instructions for each required field. * Practical — Give students a form and ask them to provide the necessary instructions for users to understand each of the fields and fill in the form. Assess how students provide clear and concise instructions. {% include excol.html type="end" %} @@ -162,10 +166,13 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} +Show examples of common input errors and possible ways to correct them. Explain that users rely on clear indications of each of the fields in error and on suggestions for correction where possible. + #### Learning Outcomes for Topic Students should be able to: +* define the placement and appearance of error messages * define error messages in the page title or before the form control that: * identify the fields in error * describe the cause of the error @@ -175,14 +182,18 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different types of error messages, including overall information about errors, specific information about each of the fields in error, and suggestions for correcting such errors when possible. Show examples of user interfaces with and without such error messages and explain that these enable several groups of people with disabilities to better interact and understand the contents. +* Show examples of placement and appearance of error messages. Explain that some users rely on consistent placement and appearance of these messages to identify the errors. +* Show examples of overall information about submission errors. Explain that this information makes users aware that their submission contains errors and help them search for specific error messages in the rest of the content. +* Show examples of specific messages that identify each of the fields in error. Explain that these messages help users identify and locate the specific fields that contain errors. +* Show examples of suggestions for correction. Explain that these help users understand what the right way is to submit the form. Emphasize that these suggestions should be provided when possible, unless they compromise the security and the purpose of the form. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: * Practical — Give students an interface containing errors and ask them to provide an overall descriptive message informing that there are submission errors. Assess how students provide overall informative messages when there are submission errors -* Practical — Give students a form field submission containing errors and ask them to provide notifications about each of the wrongly submitted field, together with suggestions for corrections when possible. Assess how students provide appropriate error messages for wrongly submitted fields and how they provide suggestions for corrections when possible. +* Practical — Give students a form field submission containing errors and ask them to provide messages about each of the wrongly submitted field. Assess how students provide appropriate error messages for wrongly submitted fields and how they provide suggestions for correction when possible. +* Practical — Give students a form field submission containing errors and ask them to provide suggestion for correction when possible. Assess how students provide suggestion for correction. {% include excol.html type="end" %} @@ -192,34 +203,37 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Show examples of notification messages. Explain that they need to be distinguishable by all users, including through visual cues and programmatically. +Show examples of notification messages. Explain that they need to be distinguishable by all users, including visually and programmatically. -Show examples of text and visual notifications for error messages and other types of feedback for forms. Explain that notifications may have different levels of priority when in the context of a complex application. Explain that defining such levels of priority and which types of notifications each of these levels should contain is a designers' responsibility whereas implementing these levels is a developers' responsibility. +Show examples of text and visual notifications for error messages and other types of feedback for forms. Explain that notifications may have different levels of priority when in the context of a complex form. Explain that defining such levels of priority and which types of notifications each of these levels should contain is a designers' responsibility whereas implementing these levels is a developers' responsibility. #### Learning Outcomes for Topic Students should be able to: -* define meaningful and descriptive notification messages, for example: +* define the placement and appearance of notifications +* define meaningful and descriptive notification messages, including: * on input (to communicate if the provided input is valid or invalid * on task completion (to communicate success or failure of a specific task) * design user experiences to queue and prioritize application notifications coming from different components -* design user experiences to store and check notifications that disappear after a period of time at the users' pace +* design user experiences to store notifications that disappear after a period of time to be checked at the users' pace * identify related requirements for developers to implement notifications #### Teaching Ideas for Topic - + Optional ideas to teach the learning outcomes: -* Show examples of different methods to communicate notifications, such as through text messages, semantic relations, haptic and audio feedback, and popup windows. -* Show examples of overlapping notifications in the context of complex applications. Explain that some users may find it daunting to process several notifications at the same time, so a method needs to be defined that allows to prioritize notifications based on their relevance. Explain that defining methods to prioritize notifications based on their relevance is a designers' responsibility, whereas implementing the methods is a developers' responsibility. +* Show examples of placement and appearance of notifications. Explain that these notifications need to be distinguishable both visually and non-visually. Explain that defining the notifications placement and appearance is responsibility of the designer, whereas implementing such notifications is a developer's responsibility. +* Show examples of different methods to communicate notifications, such as through text messages, semantic relations, haptic and audio feedback, and popup windows. Explain that there needs to be a variety of methods available to allow interaction by different groups of users. +* Show examples of overlapping notifications. Explain that some users may find it daunting to process several notifications at the same time, so a method needs to be defined that allows to prioritize notifications based on their relevance. Explain that defining methods to prioritize notifications based on their relevance is a designers' responsibility, whereas implementing the methods is a developers' responsibility. +* Demonstrate examples of notification processing using assistive technologies, including screen readers and voice assistants. Explain that the notifications may come at a faster pace than the technology is able to process, so users may end up missing information. Emphasize that it is good practice to design methods to store the notifications to allow users to check the notifications at their own pace. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: * Practical — Give students a form field that validate on user input and ask them to provide descriptive validation messages. Assess how students provide clear validation messages for fields that validate on user input. -* Practical — Give students an application with notifications coming from different view and ask them to define methods to queue and prioritize such notifications. Assess how students prioritize and organize notifications coming from different views. +* Practical — Give students a form with notifications coming from different fields and ask them to define methods to queue and prioritize such notifications. Assess how students prioritize and organize notifications coming from different views. {% include excol.html type="end" %} @@ -229,12 +243,14 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -Portfolio — Students design a form. Assess how students consider placement, structure, labels, instructions, and notifications when designing accessible forms. +* Short Answer Questions — Ask students when it is possible to provide suggestions for correction and when it is not. Assess how students identify scenarios where it is possible to provide suggestions for correction and scenarios where it is not. +* Portfolio — Students design a form. Assess how students consider placement, structure, labels, instructions, and notifications when designing accessible forms. ## Teaching Resources Suggested resources to support your teaching: +* [Designing for Web Accessibility](/tips/designing/) — Tips for user interface and visual design. * [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. * [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [Colors with Good Contrast (Web Accessibility Perspective)](/perspective-videos/contrast/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index f1f8f78b2..2cf5827a7 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -30,7 +30,7 @@ navigation: Courses based on this module should: * explain strategies that people with disabilities use to access information contained in images and graphics -* explain accessibility requirements related to images and graphics, such as text alternatives and contrast ratios +* explain accessibility requirements related to images and graphics, including text alternatives and contrast ratios ## Learning Outcomes for Module @@ -39,13 +39,13 @@ Students should be able to: * explain how images and graphics help people with disabilities to process information, identify content, and understand functionality * explain how text alternatives are essential for people with disabilities to understand the information contained in images * define meaningful and consistent text alternatives for functional images, for example those included in buttons, links, icons, and logos -* design consistent imagery to help users recognize the purpose of icons, thumbnails, and other graphical components +* define consistent imagery to help users recognize the purpose of icons, thumbnails, and other graphical components * explain the issues associated with perception, interpretation, and rendering of images of text * explain how to avoid images of text by using technologies that achieve the desired visual presentation wherever possible * evaluate the potential distraction and cognitive overload from using too many images and select alternative ways to provide the information, including tables and plain text * identify related requirements for: * developers to code images and text alternatives appropriately - * content authors to provide appropriate descriptions for images, such as charts, diagrams, and other complex graphics + * content authors to provide appropriate descriptions for images, including charts, diagrams, and other complex graphics {% include excol.html type="all" %} @@ -120,6 +120,8 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of different images used to convey functionality, for example for printing, searching, or saving a document. Explain that these images need an equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). +* Invite students to research the most common iconography and naming for elements such as print, save, and search. Explain that these iconography and names need to be consistent throughout the website. +* Refer back to [Designer Module 1 Visual Design, Topic Color](/curricula/designer-modules/visual-design/#topic-color) to explain color contrast requirements for functional images. #### Ideas to Assess Knowledge for Topic @@ -188,9 +190,9 @@ Students should be able to: * apply appropriate contrast ratios for complex images * evaluate the use of complex images and select other ways to present the information, for example using tables, simpler images, and plain text -* determine if and how complex images are operated using input devices, including mouse, keyboard, voice, and touch -* consider placement and spacing for alternatives to complex images -* design clear and consistent identification methods for complex image descriptions, including appropriate headings and expandable and collapsible components +* determine if and how complex images are operated using input devices, including mouse, keyboard, touch, and voice +* define the placement and spacing for alternatives to complex images +* define clear and consistent identification methods for complex image descriptions, including appropriate headings and expandable and collapsible components * design user experiences for complex images, including: * how to get to the image descriptions * how the content of the description should look like @@ -203,7 +205,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Explain that they need to have a contrast ratio of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). +* Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Refer back to [Module 1: Visual Design, Topic: Color](/curricula/designer-modules/visual-design/#topic-use-of-color). Explain that they need to have a contrast ratio of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). * Explain that complex images also need to have text descriptions that allow people to understand and interact with such images without having to look at them. Explain that providing these text alternatives is a designers' responsibility, whereas providing the text descriptions is a responsibility shared with the content author. #### Ideas to Assess Knowledge for Topic @@ -230,7 +232,7 @@ Students should be able to: * describe the differences between decorative and non-decorative images depending on the type of information conveyed by the image and the overall context * describe different ways to present information contained in an image in the surrounding content so that the image can be considered decorative * evaluate the potential distraction and cognitive overload from using too many decorative images and select decorative images that avoid distractions and cognitive overload -* explain how the overuse of decorative images could become distracting for some users and slow down loading times and interaction for other users +* explain how the overuse of decorative images could slow down loading times and interaction for users * identify related requirements for developers to code decorative images so that they are skipped by assistive technologies #### Teaching Ideas for Topic @@ -238,12 +240,14 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of images and graphics that do not convey function or information, such as ornamental icons. Explain that they serve ornamental purposes as long as people can understand and interact with the user interface with or without such icons. Explain that deciding what is the images' role is a designers' responsibility, whereas coding the images so that they render with the appropriate role is a developers' responsibility. +* Invite students to research how uveruse of decorative images can impact some users. For example, too many decorative images can create distractions and cognitive overload, as well as slow down loading times. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: * Practical — Ask students to provide decorative images to illustrate a text article and ask them to ensure these icons are visible in different screen sizes and devices. Assess how students understand the need for decorative images to adapt to the different user needs and preferences. +* Practical — Give students and interface with too many decorative images and ask students to select the ones that avoid distractions, cognitive overload, and slow loading times. Assess how students balance the use of decorative images to avoid distractions, cognitive overload, and slow loading times. {% include excol.html type="end" %} @@ -253,6 +257,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: +* Short Answer Questions — Ask students which types of images require which color contrast ratios. Assess how students understand the different types of images and their color contrast requirements. * Portfolio — Students design the imagery for a website. Assess how students include accessibility requirements in the images in graphics they design, for example contrast ratios, text alternatives that belong to the design phase, and placeholders for any other text alternative that is planned for later stages of the design and development process. ## Teaching Resources diff --git a/content/designer/information-design.md b/content/designer/information-design.md index aef33c126..8293c602a 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -118,8 +118,8 @@ Students should be able to: * headings (with their corresponding rank levels) * sidebars and other page regions * create graphical representations that accompany the text, to make the information easier to understand; for example, a diagram representation of the process described in the text -* design methods to identify specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon -* design methods to identify the expanded form or meaning of acronyms and abbreviations +* define methods to identify specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon +* define methods to identify the expanded form or meaning of acronyms and abbreviations * identify related requirements for: * developers to code the regions, headings, and language of pages and parts * content authors to provide clear language and easy-to-read texts whenever possible diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 4869e6284..a08a6ab43 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -29,7 +29,7 @@ navigation: Courses based on this module should: -* explain strategies that people with disabilities use to access multimedia contents, such as audio and video +* explain strategies that people with disabilities use to access multimedia content, including audio and video * explain accessibility requirements for multimedia content, such as description of visual information (also known as audio description, video description, or described video), captions (also known as subtitles), transcripts, and sign languages ## Learning Outcomes for Module @@ -41,7 +41,7 @@ Students should be able to: * identify accessibility issues associated with media players, including: * select media players with support for different methods of interaction, including mouse, keyboard, touch, and voice * select media player controls that have clear and descriptive names, that are easy to find, and that are always reachable for users -* design methods to control automatic audio and movement, including: +* define methods to control automatic audio and movement, including: * mute and control the volume of auto-playing audio * pause, stop, and hide moving, blinking, and auto-updating content, including carousels and other animations * identify related requirements for: @@ -117,7 +117,7 @@ Discuss the need for planning in the design phase to accommodate alternatives to Students should be able to -* identify accessibility requirements for the different types of multimedia content, such as description, captions, transcripts, and sign languages +* identify accessibility requirements for the different types of multimedia content, including description, captions, transcripts, and sign languages * describe the following alternatives to multimedia content: * description of visual information * captions @@ -128,27 +128,27 @@ Students should be able to * methods to turn on and off the alternatives * evaluate the need for designing custom media players and select existing media players with support for accessibility where possible * describe approaches to design media player controls that: - * have descriptive names - * are operable by keyboard - * are easy to find - * are always reachable for users - + * provide keyboard support + * make the keyboard focus indicator visible + * provide clear lables + * have sufficient contrast between colors for text, controls, and backgrounds ( + #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: * Show examples of description of visual information. Emphasize how these alternatives describe the visual information (including text) for people who cannot see the videos. Explain that different standards and policies may refer to description of visual information using different terms, such as audio description, video description, and described videos. Explain that defining the methods to turn on and off the description is a designers' responsibility, whereas providing the description is a responsibility shared with the content author. -* Show examples of captions. Explain that captions are alternatives for people who cannot hear the audio, and that they are useful in other situations. Explain that determining where to place captions is a designers' responsibility, whereas providing such captions is a responsibility shared with the content author. -* Show examples of text transcripts. Explain that transcripts are alternatives for people who cannot hear the audio information and for people who cannot see the visual information. Explain that allocating the necessary space for the transcripts is a designers' responsibility, whereas providing such transcripts is a responsibility shared with the content author. +* Show examples of captions. Explain that captions are a synchronized text version of the speech and non-speech audio information needed to understand the content. Explain that different standards and policies may refer to captions using different terms, such as subtitles. Explain that defining the methods to turn on and off the description is a designers' responsibility, whereas providing the description is a responsibility shared with the content author. Explain that determining where to place captions is a designers' responsibility, whereas providing such captions is a responsibility shared with the content author. +* Show examples of text transcripts. Explain that transcripts are a text version of the speech and non-speech audio information needed to understand the content. Explain that defining the placement and spacing for the transcripts is a designers' responsibility, whereas providing the transcripts is a responsibility shared with the content author. * Show examples of sign language. Explain that sign language is essential for people who are deaf and who do not understand written language well. Explain that defining the methods to enable and disable sign language is a designers' responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. -* Show examples of accessible and inaccessible media players. Emphasize that it is generally more reliable to use an existing media player with support for accessibility than to designing one from scratch. Explain how accessible media player controls have appropriate contrast ratios, are operable by keyboard, and are easy to find. Emphasize that users need to be able to reach the controls even when the media is playing. +* Show examples of accessible and inaccessible media players. Emphasize that it is generally more reliable to use an existing media player with support for accessibility than to designing one from scratch. Emphasize how accessible media players are operable by keyboard, make keyboard focus visible, have clear labels, have appropriate contrast ratios, and are easy to find. For an overview on skills needed to develop a media player, expected functionality, and existing players, see the resource Making Audio and Video Media Accessible, [Media players](/media/av/player/). #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: * Short Answer Questions — Ask students what description, captions, transcripts, and sign language mean in the context of accessible media content. Assess how students define alternatives to multimedia content. -* Practical — Give students pieces of multimedia content and ask them to define the user experiences for the alternatives of those contents. Assess how students define placement, interactions, and methods to turn the alternatives on and off. +* Practical — Give students pieces of multimedia content and ask them to define the user experiences for the alternatives of those pieces. Assess how students define placement, interactions, and methods to turn the alternatives on and off. {% include excol.html type="end" %} @@ -164,24 +164,24 @@ Show moving content, such as carousels and animations. Present methods to avoid Students should be able to: -* design methods for pausing, stopping, or hiding any content that blinks, moves, or auto-updates, for example animations, carousels, and decorative gimmicks +* define methods for pausing, stopping, or hiding any content that blinks, moves, or auto-updates, for example animations, carousels, and decorative gimmicks * create designs that avoid flashing entirely or only flash below the acceptable thresholds * create designs with enough time for users to read parts of moving content, for example different slides in a carousel * define visual and non-visual identification of animated content and its different parts, for example identifying a carousel region and its different slides -* define focus order within animated contents, including how to move to different parts of the carousel and how to get to the carousel controls -* design methods for stopping or controlling the volume of any audio that plays automatically for more than 3 seconds +* define focus order within animated content, including how to move to different parts of the carousel and how to get to the carousel controls +* define methods for stopping or controlling the volume of any audio that plays automatically for more than 3 seconds #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of contents that move or blink, such as animations and carousels. Explain that these can cause problems for some users that cannot keep up with the pace of the auto-updating content. Emphasize that, in addition, these animations can cause seizures and physical reactions. For references on how to design user interfaces that allow to pause, stop, and hide moving, blinking, or auto-updating content, see the following techniques: +* Show examples of content that moves or blinks, such as animations and carousels. Explain that these animations can cause problems for some users that cannot keep up with the pace of the auto-updating content. Emphasize that, in addition, these animations can cause seizures and physical reactions. For references on how to design interfaces that allow to pause, stop, and hide moving, blinking, or auto-updating content, see the following techniques: * [G4: Allowing the content to be paused and restarted from where it was paused](https://www.w3.org/WAI/WCAG21/Techniques/general/G4), * [G11: Creating content that blinks for less than 5 seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G11), * [G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)](https://www.w3.org/WAI/WCAG21/Techniques/general/G152), * [G186: Using a control in the Web page that stops moving, blinking, or auto-updating content](https://www.w3.org/WAI/WCAG21/Techniques/general/G186), and * [G187: Using a technology to include blinking content that can be turned off via the user agent](https://www.w3.org/WAI/WCAG21/Techniques/general/G187). -* Show examples of flashing content and explain that they can cause seizures and physical reactions for some people. Emphasize that all components of the content need to be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole web page or application. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash below 3 seconds, see techniques [G19: Ensuring that no component of the content flashes more than three times in any 1-second period](https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html) and [G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold](https://www.w3.org/WAI/WCAG21/Techniques/general/G15.html). +* Show examples of flashing content and explain that it can cause seizures and physical reactions for some people. Emphasize that all interface components need to be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole interface. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash below 3 seconds, see techniques [G19: Ensuring that no component of the content flashes more than three times in any 1-second period](https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html) and [G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold](https://www.w3.org/WAI/WCAG21/Techniques/general/G15.html). * Show examples of interactions triggered by animations, such as additional movements when scrolling and decorative gimmicks. Explain that these animations can cause distraction and vestibular disorders (such as dizziness, nausea, and headaches) for some people. Discuss the use of preferences as well as technology specific properties to reduce or disable such animations. * Demonstrate the use of a screen reader to navigate an application that plays audio automatically for more than 3 seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a method to pause or control the volume of that audio. Explain that the operating system often provides such method. For references on how to design interfaces with methods to pause or control the volume of any audio that plays automatically, see the following techniques: * [G60: Playing a sound that turns off automatically within three seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G60.html), @@ -203,7 +203,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Portfolio — Students include accessible video and audio contents on a website. Assess how students understand the accessibility requirements of video and audio content, including description, captions, transcripts, and sign language. +* Portfolio — Students include accessible video and audio content on a website. Assess how students understand the accessibility requirements of video and audio content, including description, captions, transcripts, and sign language. ## Teaching Resources diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 711332507..6fdd89855 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -123,7 +123,7 @@ Students should be able to: * visual and non-visual cues in the navigation menu to indicate the current page * define interactions inside navigation menus, including mouse, keyboard, touch, and voice * design navigation menus that adapt to different text sizes, screen magnifications, and screen sizes and resolutions -* design distinguishable and consistent styles for menu items in their different states, for example in fly-out menus +* define distinguishable and consistent styles for menu items in their different states, for example in fly-out menus * identify related requirements for developers to implement: * non-visual identification and naming of menus * semantics for different menu states and properties, such as hover, focus, current, active, and visited diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 071d6871f..5cb087d55 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -231,7 +231,7 @@ Students should be able to: * design layouts that adapt their content view and operation to portrait and landscape orientations * design layouts with target sizes that adapt to different screen sizes, screen configurations, and style sheets * design layouts to support user customization of line height, as well as spacing between paragraphs, words, and letters -* design meaningful focus orders that adapt to different viewports, screen sizes, and multiple breakpoints +* define meaningful focus orders that adapt to different viewports, screen sizes, and multiple breakpoints * evaluate the use of too many design elements, in particular interactive widgets, images, and moving content) on a page, and select elements that avoid potential distraction and cognitive overload #### Teaching Ideas for Topic From 4c735dfdf171be11066b9c4644bfa09df047a974 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 18 Oct 2021 16:39:35 +0200 Subject: [PATCH 278/416] Updates to modules and topics --- content/designer/interaction-design.md | 11 +++++++---- content/designer/visual-design.md | 4 ++-- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index 71d1e0178..6f8bdc575 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -28,15 +28,15 @@ navigation: Courses based on this module should: -* demonstrate strategies that people with disabilities use to interact with components of web pages and applications, including links, buttons, controls, forms, and widgets +* demonstrate strategies that people with disabilities use to interact with components of web pages and applications, including links, buttons, controls, forms, widgets, and notifications * explain accessibility requirements related to input methods, including mouse, keyboard, touch, and voice ## Learning Outcomes for Module Students should be able to: -* explain strategies that people with disabilities use to interact with components of web pages and applications, including forms, links, buttons, controls, and widgets -* design user experiences for different input methods, including mouse, touch, keyboard, and speech +* explain strategies that people with disabilities use to interact with components of web pages and applications, including links, buttons, controls, forms, widgets, and notifications +* design user experiences for different input methods, including mouse, touch, keyboard, and speech * define interactions and meaningful sequences inside complex widgets, including sliders, tabs, dialogs, application menus, and tree views * evaluate the use of custom keyboard shortcuts for complex widgets and applications and provide information about their purpose and scope * define methods to disable device and user motion to prevent accidental actuation @@ -119,13 +119,16 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys, versus specific non-standard shortcuts. Explain that providing custom keyboard interactions can favor efficiency but can also disrupt the users' expectations. Thus, designers need to document these custom interactions and make them consistent throughout the interface. +Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain how keyboard support favors other ways of interaction, including touch and voice. + +Present examples of specific non-standard shortcuts. Explain that providing custom keyboard interactions can favor efficiency but can also disrupt the users' expectations. Thus, designers need to document these custom interactions and make them consistent throughout the interface. Emphasize that defining the keyboard interactions is a designers' responsibility, whereas implementing such interactions is a responsibility shared with the developer. #### Learning Outcomes for Topic Students should be able to: +* explain how keyboard support favors other ways of interaction, including touch and voice * design user experiences for keyboard navigation through and inside components, for example using: * the tab key to move through different components * the enter key to enter a specific component and to select a specific item on a component diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 5cb087d55..af0fba4a8 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -192,7 +192,7 @@ Students should be able to: * design focus indicators that enable people to tell where they are as they move through web pages and applications using the keyboard * define page regions by using appropriate visual and non-visual cues, such as headings * design layouts that enable to present visual and non-visual cues in different screen sizes, screen configurations, and style sheets -* use text cues to supplement information provided through vision only, for example available dates in a calendar represented with a different background color +* use text cues to supplement information provided through vision only, for example those with icons to convey when a form field is required #### Teaching Ideas for Topic @@ -200,7 +200,7 @@ Optional ideas to teach the learning outcomes: * Invite students to use a web page that has appropriate focus indicators first, and then invite them to use a web page without focus indicators. Explain how focus indicators allow people using the keyboard only to determine where they are as they move through web pages and applications using the keyboard only. For reference on how to provide appropriate focus indicators, see techniques [G149: Using user interface components that are highlighted by the user agent when they receive focus](https://www.w3.org/WAI/WCAG21/Techniques/general/G149.html) and [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). * Show examples of different web page regions, such as header, navigation, main, and footer. Explain that several groups of people with disabilities rely on visual and programmatic cues to perceive such regions. Explain that defining the presentation of these cues is a designers' responsibility, whereas implementing such cues and their semantics is a developers' responsibility. -* Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a form field is required and those with colors to convey available dates in a calendar. Explain that some people cannot rely on visual means to obtain information, so they need text to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). +* Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a form field is required. Explain that some people cannot rely on visual means to obtain information, so they need text to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). #### Ideas to Assess Knowledge for Topic From 63ce7804206886dc891a1605ce1074b29f27e512 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 19 Oct 2021 11:53:52 +0200 Subject: [PATCH 279/416] Typo --- content/designer/navigation-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 6fdd89855..bc69a53fb 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -44,7 +44,7 @@ Students should be able to: * indication of state changes for menu items * define blocks of repeated content * define site maps and descriptive page titles to help users locate specific web pages within websites -* evaluate the use of navigational components, including menus, tables of contents, and ``site maps, and select navigational components that avoid distraction and unnecessary noise +* evaluate the use of navigational components, including menus, tables of contents, and site maps, and select navigational components that avoid distraction and unnecessary noise * identify related requirements for developers to implement: * interactions for navigational components, including by keyboard, mouse, touch, and voice * clear and descriptive names for navigational components From 780a8b81f189c88b0c581bb7f2644f3e0433bcdd Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 19 Oct 2021 12:02:48 +0200 Subject: [PATCH 280/416] "Cues" -> "indications" --- content/designer/navigation-design.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index bc69a53fb..3305ea501 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -118,9 +118,9 @@ Explain styling conventions for menus, such as expected location, appropriate si Students should be able to: * describe uses of different types of navigation menus, such as static, fly-out, and mega menus -* define visual and text cues to identify menus, including: +* define visual and text indications to identify menus, including: * consistent styling for menu identification across websites - * visual and non-visual cues in the navigation menu to indicate the current page + * visual and non-visual indications about the current page in the navigation menu * define interactions inside navigation menus, including mouse, keyboard, touch, and voice * design navigation menus that adapt to different text sizes, screen magnifications, and screen sizes and resolutions * define distinguishable and consistent styles for menu items in their different states, for example in fly-out menus From 675c3891fc6f905166beddc63effee1f3c37c6af Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 19 Oct 2021 12:11:09 +0200 Subject: [PATCH 281/416] "Cues" -> "indications" --- content/designer/navigation-design.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 3305ea501..48f05ca03 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -38,7 +38,7 @@ Students should be able to: * explain strategies that people with disabilities use to navigate websites and applications * design different navigational components, including menus, tables of contents, and search functionalities -* define different interactions for navigational components, including keyboard, mouse, touch, and voice +* define different interactions for navigational components, including by keyboard, mouse, touch, and voice * define clear and consistent visual and non-visual: * presentation of menus and menu items * indication of state changes for menu items @@ -169,9 +169,9 @@ Students should be able to: * search functionalities to navigate to specific parts of the site * design methods for users to locate specific web pages within websites, for example: * descriptive page titles - * text and visual cues in the navigation menu to indicate the current page + * text and visual indications about the current page in the navigation menu * evaluate the amount of site navigational components in use, and select components that help users navigate and orient -* identify related requirements for developers to apply semantics to page titles, headings, and text cues +* identify related requirements for developers to apply semantics to page titles, headings, as well as visual and non-visual indications in navigation menus #### Teaching Ideas for Topic From c9d9defb0d95827eb264ea052c35bdb233de20d1 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 19 Oct 2021 12:14:09 +0200 Subject: [PATCH 282/416] websites -> website --- content/designer/navigation-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 48f05ca03..feac9ba90 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -181,7 +181,7 @@ Optional ideas to teach the learning outcomes: * Show examples of site maps and explain that they serve the purpose of providing an overview of the whole site. Explain that some users rely on them to better understand the structure of the site and to find its way more easily through it. For references on how to provide a site map, see [G63: Providing a site map](https://www.w3.org/WAI/WCAG21/Techniques/general/G63.html). * Show examples of search functionalities. Explain that they help users find content by supporting navigation to different parts of the site. Emphasize that some users prefer this way of navigating, especially when they are already familiar with the site and know what they are looking for. For references on how to provide a search functionality, see technique [G161: Providing a search function to help users find content](https://www.w3.org/WAI/WCAG21/Techniques/general/G161). * Invite students to research different ways to present information in page titles. Reflect with them on how well the titles describe the page contents. Explain that page titles are useful to identify the purpose of a specific web page within a website. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page. Some browsers and assistive technologies may truncate the titles or not show them at all. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). -* Show examples of visual and non-visual indications in menus about the current page with respect to the websites. +* Show examples of visual and non-visual indications in menus about the current page with respect to the website. #### Teaching Ideas for Topic From 00c3f5ce4e0b7d73dff50ad3a354c7e734b91e7f Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 19 Oct 2021 12:23:35 +0200 Subject: [PATCH 283/416] Clarifying assessment idea --- content/designer/navigation-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index feac9ba90..c305d8e1e 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -238,7 +238,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Short Answer Questions — Ask students about the different types of navigational methods. Assess how students recite the different types of navigational methods for websites, documents, and applications. +* Short Answer Questions — Ask students to recite the different types of navigational methods that exist and provide examples for each. Assess how students understand the different types of navigational methods for websites, documents, and applications. * Portfolio — Students design the navigation menu and other navigational components for a website. Assess how students understand accessibility features of navigation across websites and applications. ## Teaching Resources From dba94f3328d9dcf9ccde8f1475be229e5cd2be08 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 19 Oct 2021 12:39:16 +0200 Subject: [PATCH 284/416] Clarifying assessment idea --- content/designer/interaction-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index 6f8bdc575..1d234153c 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -193,7 +193,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Students design an interface that can be used both in portrait and landscape modes. Assess how students understand the different ways of interacting with components. +* Practical — Students design an interface that can be used both in portrait and landscape modes. Assess how students understand the need to support different orientations methods while interacting with components. * Practical — Give students an interface that uses a multi path-based gesture to perform an action and ask them to provide alternatives to that gesture. Assess how students provide alternatives to multi-pointer and path-based gestures. * Practical — Give students an interface that uses a motion-based gesture to perform an action and ask them to provide alternatives to that gesture. Assess how students provide alternatives to motion-based gestures. From 2dc07a689dd5391d963adab3ce9e47c9e66ac4b3 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 19 Oct 2021 13:27:45 +0200 Subject: [PATCH 285/416] Contrast ratios -> Color contrast --- content/designer/images-and-graphics.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 2cf5827a7..88cf82203 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -30,7 +30,7 @@ navigation: Courses based on this module should: * explain strategies that people with disabilities use to access information contained in images and graphics -* explain accessibility requirements related to images and graphics, including text alternatives and contrast ratios +* explain accessibility requirements related to images and graphics, including text alternatives and color contrast ## Learning Outcomes for Module @@ -101,7 +101,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Functional images convey functionality of a component. For example, search, print, and save functionality. Explain requirements related to color and contrast to help users distinguish these images from other components. Show examples of graphical links and buttons as well as logos. Discuss how they would describe each of those examples. +Functional images convey functionality of a component. For example, search, print, and save functionality. Explain requirements related to color and contrast to help users distinguish these images from other components. Show examples of graphical links and buttons as well as logos. Discuss with students how they would describe each of those examples. #### Learning Outcomes for Topic @@ -113,7 +113,7 @@ Students should be able to: * adjacent text inside components to understand its function * use consistent naming and imagery for components that have the same functionality across web pages * explain the benefits of using text labels and decorative images for functionality, instead of using images with text alternatives that are only available to some users, such as screen reader users -* apply appropriate contrast ratios for functional images +* apply appropriate color contrast for functional images #### Teaching Ideas for Topic @@ -128,7 +128,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Give students different examples of images conveying function, such as a printer for a "print" button and a magnifying glass for a "search" button. Ask students to provide an appropriate text alternative. Assess how students identify images that convey function and how they provide text alternatives that describe the functionality of the component the image is attached to. -* Practical — Ask students to design a series of graphical buttons and links in a way that they are perceivable and distinguishable by all users. Assess how students apply accessibility requirements, such as contrast ratios, to graphical buttons and links. +* Practical — Ask students to design a series of graphical buttons and links in a way that they are perceivable and distinguishable by all users. Assess how students apply accessibility requirements, such as color contrast, to graphical buttons and links. {% include excol.html type="end" %} @@ -150,7 +150,7 @@ Students should be able to: * boilerplate descriptions that would then be completed and maintained through the development and authoring phases * adjacent textual information to complement images and icons, for example in a news headline * text alternatives that describe the information conveyed by images -* apply the appropriate contrast ratio to images that are necessary to understand the content +* apply the appropriate color contrast to images that are necessary to understand the content * use styled text instead of images of text when the technology in use can provide the desired visual presentation * define alternatives to CAPTCHA and biometrics, for example by providing visual, auditory, and logical CAPTCHA * explain the issues associated with relying only on one form of biometrics and CAPTCHA, and describe alternative approaches for authentication @@ -180,7 +180,7 @@ Optional ideas to support assessment. {% include excol.html type="middle" %} -Complex images are those whose description requires more than a short phrase or sentence. Show examples of complex images, including diagrams and charts, and explain accessibility requirements that these images have, such as appropriate contrast ratios and appropriate text descriptions. +Complex images are those whose description requires more than a short phrase or sentence. Show examples of complex images, including diagrams and charts, and explain accessibility requirements that these images have, such as appropriate color contrast and appropriate text descriptions. Explain that coordination among different team members is required to assess the use of complex images based on the overall context, so that the information of such images is perceived and understood visually and through the provided descriptions. @@ -188,7 +188,7 @@ Explain that coordination among different team members is required to assess the Students should be able to: -* apply appropriate contrast ratios for complex images +* apply appropriate color contrast for complex images * evaluate the use of complex images and select other ways to present the information, for example using tables, simpler images, and plain text * determine if and how complex images are operated using input devices, including mouse, keyboard, touch, and voice * define the placement and spacing for alternatives to complex images @@ -205,14 +205,14 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Refer back to [Module 1: Visual Design, Topic: Color](/curricula/designer-modules/visual-design/#topic-use-of-color). Explain that they need to have a contrast ratio of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). +* Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Refer back to [Module 1: Visual Design, Topic: Color](/curricula/designer-modules/visual-design/#topic-use-of-color). Explain that they need to have a color contrast ratio of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required color contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). * Explain that complex images also need to have text descriptions that allow people to understand and interact with such images without having to look at them. Explain that providing these text alternatives is a designers' responsibility, whereas providing the text descriptions is a responsibility shared with the content author. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Students add complex images to a website, such as charts or diagrams, and ensure they have the required contrast ratio. Assess how students understand the contrast requirements for complex images. +* Practical — Students add complex images to a website, such as charts or diagrams, and ensure they have the required color contrast. Assess how students understand the contrast requirements for complex images. * Practical — Students cooperate with developers and content authors to implement a map in a way that everybody can understand its meaning and interact with it. Assess how students identify the need for text alternatives for complex images and cooperate with other team members to ensure such alternatives exist. {% include excol.html type="end" %} @@ -258,7 +258,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: * Short Answer Questions — Ask students which types of images require which color contrast ratios. Assess how students understand the different types of images and their color contrast requirements. -* Portfolio — Students design the imagery for a website. Assess how students include accessibility requirements in the images in graphics they design, for example contrast ratios, text alternatives that belong to the design phase, and placeholders for any other text alternative that is planned for later stages of the design and development process. +* Portfolio — Students design the imagery for a website. Assess how students include accessibility requirements in the images in graphics they design, for example color contrast, text alternatives that belong to the design phase, and placeholders for any other text alternative that is planned for later stages of the design and development process. ## Teaching Resources From badf1179dfaa2fb2d9d0d399b4841ea9207608fd Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 19 Oct 2021 16:21:12 +0200 Subject: [PATCH 286/416] Updates to modules --- content/designer/interaction-design.md | 1 - content/designer/multimedia-and-animations.md | 10 +++++----- content/designer/visual-design.md | 1 + 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index 1d234153c..9e50db163 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -193,7 +193,6 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Students design an interface that can be used both in portrait and landscape modes. Assess how students understand the need to support different orientations methods while interacting with components. * Practical — Give students an interface that uses a multi path-based gesture to perform an action and ask them to provide alternatives to that gesture. Assess how students provide alternatives to multi-pointer and path-based gestures. * Practical — Give students an interface that uses a motion-based gesture to perform an action and ask them to provide alternatives to that gesture. Assess how students provide alternatives to motion-based gestures. diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index a08a6ab43..05ab17a66 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -127,11 +127,11 @@ Students should be able to * placement of the alternatives * methods to turn on and off the alternatives * evaluate the need for designing custom media players and select existing media players with support for accessibility where possible -* describe approaches to design media player controls that: - * provide keyboard support - * make the keyboard focus indicator visible - * provide clear lables - * have sufficient contrast between colors for text, controls, and backgrounds ( +* describe characteristics of accessible media player controls, including: + * keyboard support + * visible keyboard focus indicators + * clear lables + * sufficient contrast between colors for text, controls, and backgrounds #### Teaching Ideas for Topic diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index af0fba4a8..829a95873 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -249,6 +249,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Students design different layouts considering text resizing, line height, spacing between paragraphs, words, and letters. Assess how students consider text resizing, line height, and spacing between paragraphs, words, and letters. +* Practical — Students design an interface that adapts to portrait and landscape modes. Assess how students understand the need for interfaces to adapt to both portrait and landscape modes. {% include excol.html type="end" %} From 2352ca8264e09aff4989bfb7d843578e1042a267 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 19 Oct 2021 16:41:53 +0200 Subject: [PATCH 287/416] Grammar fix --- content/designer/multimedia-and-animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 05ab17a66..91f78f7a9 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -141,7 +141,7 @@ Optional ideas to teach the learning outcomes: * Show examples of captions. Explain that captions are a synchronized text version of the speech and non-speech audio information needed to understand the content. Explain that different standards and policies may refer to captions using different terms, such as subtitles. Explain that defining the methods to turn on and off the description is a designers' responsibility, whereas providing the description is a responsibility shared with the content author. Explain that determining where to place captions is a designers' responsibility, whereas providing such captions is a responsibility shared with the content author. * Show examples of text transcripts. Explain that transcripts are a text version of the speech and non-speech audio information needed to understand the content. Explain that defining the placement and spacing for the transcripts is a designers' responsibility, whereas providing the transcripts is a responsibility shared with the content author. * Show examples of sign language. Explain that sign language is essential for people who are deaf and who do not understand written language well. Explain that defining the methods to enable and disable sign language is a designers' responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. -* Show examples of accessible and inaccessible media players. Emphasize that it is generally more reliable to use an existing media player with support for accessibility than to designing one from scratch. Emphasize how accessible media players are operable by keyboard, make keyboard focus visible, have clear labels, have appropriate contrast ratios, and are easy to find. For an overview on skills needed to develop a media player, expected functionality, and existing players, see the resource Making Audio and Video Media Accessible, [Media players](/media/av/player/). +* Show examples of accessible and inaccessible media players. Emphasize that it is generally more reliable to use an existing media player with support for accessibility than to design one from scratch. Emphasize how accessible media players are operable by keyboard, make keyboard focus visible, have clear labels, have appropriate contrast ratios, and are easy to find. For an overview on skills needed to develop a media player, expected functionality, and existing players, see the resource Making Audio and Video Media Accessible, [Media players](/media/av/player/). #### Ideas to Assess Knowledge for Topic From c9af6080b559dc2b06b8c34952483b43523a214f Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 20 Oct 2021 11:51:07 +0200 Subject: [PATCH 288/416] Updates to modules and topics --- content/designer/forms-design.md | 2 +- content/designer/interaction-design.md | 17 +++++++++-------- content/designer/multimedia-and-animations.md | 2 +- content/designer/visual-design.md | 2 +- 4 files changed, 12 insertions(+), 11 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 2b8e48ec6..2f6c6c9da 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -185,7 +185,7 @@ Optional ideas to teach the learning outcomes: * Show examples of placement and appearance of error messages. Explain that some users rely on consistent placement and appearance of these messages to identify the errors. * Show examples of overall information about submission errors. Explain that this information makes users aware that their submission contains errors and help them search for specific error messages in the rest of the content. * Show examples of specific messages that identify each of the fields in error. Explain that these messages help users identify and locate the specific fields that contain errors. -* Show examples of suggestions for correction. Explain that these help users understand what the right way is to submit the form. Emphasize that these suggestions should be provided when possible, unless they compromise the security and the purpose of the form. +* Show examples of suggestions for correction. Explain that these suggestions, together with the original user input, help users understand what the right way is to submit the form. Emphasize that these suggestions should be provided when possible, unless they compromise the security and the purpose of the form. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index 9e50db163..3bf3a1c89 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -36,12 +36,12 @@ Courses based on this module should: Students should be able to: * explain strategies that people with disabilities use to interact with components of web pages and applications, including links, buttons, controls, forms, widgets, and notifications -* design user experiences for different input methods, including mouse, touch, keyboard, and speech -* define interactions and meaningful sequences inside complex widgets, including sliders, tabs, dialogs, application menus, and tree views +* design user experiences for different input methods, including mouse, touch, keyboard, and voice +* define interactions and meaningful sequences inside complex widgets, including sliders, tabs, dialogs, application menus, tree views, and notifications * evaluate the use of custom keyboard shortcuts for complex widgets and applications and provide information about their purpose and scope * define methods to disable device and user motion to prevent accidental actuation * define alternatives for complex gestures, including swiping, pinching, and drawing shapes -* identify related requirements for developers to code interactions, including through mouse, keyboard, touch, and voice +* identify related requirements for developers to write code interactions, including through mouse, keyboard, touch, and voice {% include excol.html type="all" %} @@ -119,7 +119,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain how keyboard support favors other ways of interaction, including touch and voice. +Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain how keyboard support favors other ways of interaction, including voice interaction and interaction using some assistive technologies. Present examples of specific non-standard shortcuts. Explain that providing custom keyboard interactions can favor efficiency but can also disrupt the users' expectations. Thus, designers need to document these custom interactions and make them consistent throughout the interface. Emphasize that defining the keyboard interactions is a designers' responsibility, whereas implementing such interactions is a responsibility shared with the developer. @@ -128,13 +128,14 @@ Emphasize that defining the keyboard interactions is a designers' responsibility Students should be able to: -* explain how keyboard support favors other ways of interaction, including touch and voice -* design user experiences for keyboard navigation through and inside components, for example using: +* explain how keyboard support favors other ways of interaction, including voice interaction and interaction using some assistive technologies +* design user experiences for keyboard navigation through and inside components of websites and applications, for example using: * the tab key to move through different components * the enter key to enter a specific component and to select a specific item on a component * the arrow keys to move through elements inside components, including sliders, tabs, dialogs, application menus, and tree views * the escape key to exit components * first letter navigation to jump to specific pieces of data in lists and grids + * specific keyboard shortcuts to reveal, review, and dismiss notifications * specific keyboard shortcuts to support efficiency * identify situations when it is necessary to provide additional keyboard shortcuts, for example when designing a custom functionality that is not keyboard supported by default * evaluate the use of custom keyboard interactions and select keyboard interactions that avoid conflicts with the operating system, browser, and assistive technologies when possible @@ -150,7 +151,7 @@ Optional ideas to teach the learning outcomes: * Invite students to try standard keyboard conventions. For example, use of the tab to move through user interface components, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that these interactions need to be preserved as much as possible when designing custom widgets, as these are mostly expected by users. * Invite students to research keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers need to work closely with other team members, including developers and user researchers, on strategies to define custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and working with developers to implement such keystrokes. * Present examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. -* Show examples of help functionality for custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using such shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these help methods is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. +* Show examples of help functionality for custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using those shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these help methods is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic @@ -205,7 +206,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: * Practical &mdash: Give students a web application, such as a web email client, and ask them to provide the necessary custom keyboard shortcuts. Assess how students balance the use of standard versus custom keyboard shortcuts. -* Portfolio — Students design the interactions for a given interface, including mouse, keyboard, touch, and voice. Assess how students design user experiences for different input methods, including mouse, touch, keyboard, and speech. +* Portfolio — Students design the interactions for a given interface, including mouse, keyboard, touch, and voice. Assess how students design user experiences for different input methods, including mouse, touch, keyboard, and voice. ## Teaching Resources diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 91f78f7a9..edf601b0d 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -130,7 +130,7 @@ Students should be able to * describe characteristics of accessible media player controls, including: * keyboard support * visible keyboard focus indicators - * clear lables + * clear labels * sufficient contrast between colors for text, controls, and backgrounds #### Teaching Ideas for Topic diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 829a95873..b974020f5 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -192,7 +192,7 @@ Students should be able to: * design focus indicators that enable people to tell where they are as they move through web pages and applications using the keyboard * define page regions by using appropriate visual and non-visual cues, such as headings * design layouts that enable to present visual and non-visual cues in different screen sizes, screen configurations, and style sheets -* use text cues to supplement information provided through vision only, for example those with icons to convey when a form field is required +* use text cues to supplement information provided through vision only, for example using text and icons to convey when a form field is required #### Teaching Ideas for Topic From 106bf706bc1603a88170a1d62a9c3d23aa45bef9 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 22 Oct 2021 11:49:08 +0200 Subject: [PATCH 289/416] Tweaking teaching idea --- content/designer/forms-design.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 2f6c6c9da..2e54c8f60 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -184,8 +184,8 @@ Optional ideas to teach the learning outcomes: * Show examples of placement and appearance of error messages. Explain that some users rely on consistent placement and appearance of these messages to identify the errors. * Show examples of overall information about submission errors. Explain that this information makes users aware that their submission contains errors and help them search for specific error messages in the rest of the content. -* Show examples of specific messages that identify each of the fields in error. Explain that these messages help users identify and locate the specific fields that contain errors. -* Show examples of suggestions for correction. Explain that these suggestions, together with the original user input, help users understand what the right way is to submit the form. Emphasize that these suggestions should be provided when possible, unless they compromise the security and the purpose of the form. +* Show examples of specific messages that identify each of the fields in error. Explain that these messages help users identify and locate the specific fields that contain errors. Mention that it is best practice to keep the original submision where possible, so that users can understand what needs to be corrected. +* Show examples of suggestions for correction. Explain that these suggestions help users understand what the right way is to submit the form. Emphasize that these suggestions should be provided when possible, unless they compromise the security and the purpose of the form. #### Ideas to Assess Knowledge for Topic From 1b5fc782b6434c820b3aea06e95c11071679c334 Mon Sep 17 00:00:00 2001 From: daniel-montalvo <49305434+daniel-montalvo@users.noreply.github.com> Date: Mon, 25 Oct 2021 12:45:46 +0200 Subject: [PATCH 290/416] Update forms-design.md --- content/designer/forms-design.md | 51 +++++++++++++++++++++++++++----- 1 file changed, 44 insertions(+), 7 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 2f6c6c9da..830dca97c 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -35,10 +35,10 @@ Courses based on this module should: Students should be able to: -* demonstrate how people with disabilities rely on placement, structure, labels, instructions, and notifications to understand, navigate, and interact with forms -* define consistent placement and appearance of form controls and input fields -* define interactions with form controls and input fields, including through mouse, keyboard, touch, and voice -* define clear and distinguishable names as well as visual and non-visual instructions to understand the purpose and functionality of controls and input fields +* explain how people with disabilities rely on placement, structure, labels, instructions, and notifications to understand, navigate, and interact with forms +* define consistent use, placement, and appearance of form elements according to overall usability best practices +* define interactions with form elements, including through mouse, keyboard, touch, and voice +* define clear and distinguishable names as well as visual and non-visual instructions to understand the purpose and functionality of form fields * define clear and descriptive visual and non-visual instructions about the current step and about the total number of steps in multi-step forms * define clear and descriptive error messages that: * identify the field in error @@ -122,6 +122,43 @@ Topics to achieve the learning outcomes: {% include excol.html type="start" %} +### Topic: Form Elements + +{% include excol.html type="middle" %} + +Show examples of different form elements and their intended purpose according to overall usability best practices, including edit boxes, check boxes, radio buttons. Explain uses of standard and non-standard components and how they impact accessibility. + +#### Learning Outcomes for Topic + +Students should be able to: + +* identify different uses and intended purposes of form elements, including: + * edit boxes for text insertion + * check boxes for multiple selections + * radio buttons for single selections + * buttons for input submission +* identify the compatibility issues and cognitive overload from using form elements with unintended purposes +* evaluate the use of standard versus non-standard form elements and select those which minimize extra work to include accessibility features at a later phase +* identify related requirements for developers to write code for form elements that programmatically identifies their intended purpose + +### Teaching Ideas for Topic + +Optional ideas to teach the learning outcomes. + +* Explain the intended purpose of form elements according to overall usability best practices. For example, edit boxes for text insertion, check boxes for multiple selections, radio buttons for single selections, and buttons for input submissions. Emphasize that using a form element with an unintended purpose can cause cognitive overload and compatibility issues with assistive technologies and adaptive strategies. +* Show examples of standard versus non-standard form elements. Explain that standard elements are generally accessible by default, and that there is little need to tweak them for accessibility at a later phase. However, use of non-standard elements generally requires further coding to ensure these elements are usable with the keyboard and accessible to assistive technologies. + +#### Ideas to Assess Knowledge for Topic + +Optional ideas to support assessment: + +* Short Answer Questions — Ask students about different form elements and their intended purpose according to overall usability best practices. Assess how students relate form elements to their intended purpose according to overall usability best practices. +* Practical — Ask students to design a form with input requirements including text insertion, multiple selections, single selections, and input submission. Ask students to use the appropriate element for each of these input requirements. + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + ### Topic: Labels and Instructions {% include excol.html type="middle" %} @@ -133,7 +170,7 @@ Refer back to [Designer Module 2: Information Design, Topic: Naming and Grouping Students should be able to: * design user experiences that consider position and appearance for labels and instructions -* define clear and consistent names for form controls and input fields across websites and applications +* define clear and consistent names for form elements across websites and applications * define visual and non-visual instructions about which input fields are required * define clear visual and non-visual instructions about changes in context before the component that originates such changes * define overall visual and non-visual instructions about existing time limits in a form and about how to adjust them, extend them, and turn them off @@ -145,7 +182,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. -* Show examples of different form controls and input fields , for example buttons, checkboxes, text boxes, and listboxes, across websites and applications. Emphasize that each should have a clear name that identifies its purpose. For reference on how to provide consistent names for different form elements across websites and applications, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). +* Show examples of different form elements, for example buttons, checkboxes, text boxes, and listboxes, across websites and applications. Emphasize that each should have a clear name that identifies its purpose. For reference on how to provide consistent names for different form elements across websites and applications, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). * Show examples of required and non-required form fields. Explain that instructions about which of the fields are required should be provided using several methods, including visual and non-visual instructions. * Present examples of time limits, such as those warning about session expirations. Explain that visual and non-visual instructions need to be provided so that users are aware of the time limits, and methods need to be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designers' responsibility, whereas implementing methods to stop, extend, or adjust time limits is a responsibility shared with the developer. * Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. @@ -173,7 +210,7 @@ Show examples of common input errors and possible ways to correct them. Explain Students should be able to: * define the placement and appearance of error messages -* define error messages in the page title or before the form control that: +* define error messages in the page title or before the form that: * identify the fields in error * describe the cause of the error * provide suggestions to correct the error where possible From 4d2275da5248ad7117283b3761a7ef549c675e48 Mon Sep 17 00:00:00 2001 From: daniel-montalvo <49305434+daniel-montalvo@users.noreply.github.com> Date: Mon, 25 Oct 2021 12:48:46 +0200 Subject: [PATCH 291/416] Update designer-modules.md --- content/designer/designer-modules.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index d2d1513e4..d8db5680d 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -93,6 +93,7 @@ The designer modules are designed for students who have achieved the learning ou - [Topic: Alternatives to Multimedia Content](/curricula/designer-modules/multimedia-and-animations/#topic-alternatives-to-multimedia-content) - [Topic: Movement and Animations](/curricula/designer-modules/multimedia-and-animations/#topic-movement-and-animations) - [Module 7: Forms Design](/curricula/designer-modules/forms-design/) + - [Topic: Form Elements](/curricula/designer-modules/forms-design/#topic-form-elements] - [Topic: Labels and Instructions](/curricula/designer-modules/forms-design/#topic-labels-and-instructions) - [Topic: Error Prevention](/curricula/designer-modules/forms-design/#topic-error-revention) - [Topic: Notifications](/curricula/designer-modules/forms-design/#topic-notifications) From e24772e42e6de47072300ba825126962e946549b Mon Sep 17 00:00:00 2001 From: daniel-montalvo <49305434+daniel-montalvo@users.noreply.github.com> Date: Mon, 25 Oct 2021 13:07:44 +0200 Subject: [PATCH 292/416] Update content/designer/designer-modules.md --- content/designer/designer-modules.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index d8db5680d..3ccecfc20 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -93,7 +93,8 @@ The designer modules are designed for students who have achieved the learning ou - [Topic: Alternatives to Multimedia Content](/curricula/designer-modules/multimedia-and-animations/#topic-alternatives-to-multimedia-content) - [Topic: Movement and Animations](/curricula/designer-modules/multimedia-and-animations/#topic-movement-and-animations) - [Module 7: Forms Design](/curricula/designer-modules/forms-design/) - - [Topic: Form Elements](/curricula/designer-modules/forms-design/#topic-form-elements] + - [Topic: Form Elements](/curricula/designer-modules/forms-design/#topic-form-elements) + - [Topic: Labels and Instructions](/curricula/designer-modules/forms-design/#topic-labels-and-instructions) - [Topic: Error Prevention](/curricula/designer-modules/forms-design/#topic-error-revention) - [Topic: Notifications](/curricula/designer-modules/forms-design/#topic-notifications) From 3c0ed56623b5401bfbc311c7f8cc2021c2688178 Mon Sep 17 00:00:00 2001 From: Daniel-Montalvo Date: Mon, 25 Oct 2021 17:19:08 +0200 Subject: [PATCH 293/416] Updating forms design --- content/designer/forms-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 2e54c8f60..78e4634f9 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -184,7 +184,7 @@ Optional ideas to teach the learning outcomes: * Show examples of placement and appearance of error messages. Explain that some users rely on consistent placement and appearance of these messages to identify the errors. * Show examples of overall information about submission errors. Explain that this information makes users aware that their submission contains errors and help them search for specific error messages in the rest of the content. -* Show examples of specific messages that identify each of the fields in error. Explain that these messages help users identify and locate the specific fields that contain errors. Mention that it is best practice to keep the original submision where possible, so that users can understand what needs to be corrected. +* Show examples of specific messages that identify each of the fields in error. Explain that these messages help users identify and locate the specific fields that contain errors. Mention that it is best practice to keep the original submission where possible, so that users can understand what needs to be corrected. * Show examples of suggestions for correction. Explain that these suggestions help users understand what the right way is to submit the form. Emphasize that these suggestions should be provided when possible, unless they compromise the security and the purpose of the form. #### Ideas to Assess Knowledge for Topic From 6108f32381f4bf1a7c68f275eac972303f12577a Mon Sep 17 00:00:00 2001 From: Daniel-Montalvo Date: Mon, 25 Oct 2021 17:23:12 +0200 Subject: [PATCH 294/416] Remove extra blank --- content/designer/designer-modules.md | 1 - 1 file changed, 1 deletion(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 3ccecfc20..bc5a470e4 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -94,7 +94,6 @@ The designer modules are designed for students who have achieved the learning ou - [Topic: Movement and Animations](/curricula/designer-modules/multimedia-and-animations/#topic-movement-and-animations) - [Module 7: Forms Design](/curricula/designer-modules/forms-design/) - [Topic: Form Elements](/curricula/designer-modules/forms-design/#topic-form-elements) - - [Topic: Labels and Instructions](/curricula/designer-modules/forms-design/#topic-labels-and-instructions) - [Topic: Error Prevention](/curricula/designer-modules/forms-design/#topic-error-revention) - [Topic: Notifications](/curricula/designer-modules/forms-design/#topic-notifications) From b271b0e17d963cd0a08ddaba06f4e0a586b7357d Mon Sep 17 00:00:00 2001 From: daniel-montalvo <49305434+daniel-montalvo@users.noreply.github.com> Date: Tue, 26 Oct 2021 19:25:02 +0200 Subject: [PATCH 295/416] Apply suggestions from code review --- content/designer/forms-design.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index faec75904..294bf0dad 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -36,7 +36,7 @@ Courses based on this module should: Students should be able to: * explain how people with disabilities rely on placement, structure, labels, instructions, and notifications to understand, navigate, and interact with forms -* define consistent use, placement, and appearance of form elements according to overall usability best practices +* define consistent use, placement, and appearance of form elements * define interactions with form elements, including through mouse, keyboard, touch, and voice * define clear and distinguishable names as well as visual and non-visual instructions to understand the purpose and functionality of form fields * define clear and descriptive visual and non-visual instructions about the current step and about the total number of steps in multi-step forms @@ -138,7 +138,7 @@ Students should be able to: * radio buttons for single selections * buttons for input submission * identify the compatibility issues and cognitive overload from using form elements with unintended purposes -* evaluate the use of standard versus non-standard form elements and select those which minimize extra work to include accessibility features at a later phase +* evaluate the use of standard versus non-standard form elements and select those which minimize extra work to make them accessible at a later phase * identify related requirements for developers to write code for form elements that programmatically identifies their intended purpose ### Teaching Ideas for Topic From 3f36ef897bce1b2883d55e2692b8349251b6c9a9 Mon Sep 17 00:00:00 2001 From: daniel-montalvo <49305434+daniel-montalvo@users.noreply.github.com> Date: Wed, 27 Oct 2021 10:24:41 +0200 Subject: [PATCH 296/416] Update forms-design.md --- content/designer/forms-design.md | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 294bf0dad..98281a6cc 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -126,17 +126,13 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Show examples of different form elements and their intended purpose according to overall usability best practices, including edit boxes, check boxes, radio buttons. Explain uses of standard and non-standard components and how they impact accessibility. +Show examples of different form elements and their intended purpose, including edit boxes, check boxes, radio buttons, and buttons. Explain uses of standard versus non-standard components and how use of non-standard elements impacts accessibility. #### Learning Outcomes for Topic Students should be able to: -* identify different uses and intended purposes of form elements, including: - * edit boxes for text insertion - * check boxes for multiple selections - * radio buttons for single selections - * buttons for input submission +* identify different uses and intended purposes of form elements * identify the compatibility issues and cognitive overload from using form elements with unintended purposes * evaluate the use of standard versus non-standard form elements and select those which minimize extra work to make them accessible at a later phase * identify related requirements for developers to write code for form elements that programmatically identifies their intended purpose @@ -145,15 +141,15 @@ Students should be able to: Optional ideas to teach the learning outcomes. -* Explain the intended purpose of form elements according to overall usability best practices. For example, edit boxes for text insertion, check boxes for multiple selections, radio buttons for single selections, and buttons for input submissions. Emphasize that using a form element with an unintended purpose can cause cognitive overload and compatibility issues with assistive technologies and adaptive strategies. -* Show examples of standard versus non-standard form elements. Explain that standard elements are generally accessible by default, and that there is little need to tweak them for accessibility at a later phase. However, use of non-standard elements generally requires further coding to ensure these elements are usable with the keyboard and accessible to assistive technologies. +* Show examples of different form elements and reflect on their intended purpose. For example, edit boxes, check boxes, radio buttons, and buttons. Emphasize that using a form element with an unintended purpose can cause cognitive overload as well as compatibility issues with assistive technologies and adaptive strategies. +* Show examples of standard versus non-standard form elements. Explain that standard elements are generally accessible by default, and that there is little need for extra work to make them accessible at a later phase. However, use of non-standard elements generally requires further coding to ensure these elements are usable with the keyboard and compatible with assistive technologies. #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -* Short Answer Questions — Ask students about different form elements and their intended purpose according to overall usability best practices. Assess how students relate form elements to their intended purpose according to overall usability best practices. -* Practical — Ask students to design a form with input requirements including text insertion, multiple selections, single selections, and input submission. Ask students to use the appropriate element for each of these input requirements. +* Short Answer Questions — Give students specific purposes for form elements. Ask them to research how to convey these purposes using standard elements when possible, and to elaborate on what are the accessibility implications of using non-standard elements. Assess how students understand the accessibility implications of using non-standard elements. +* Practical — Ask students to select the appropriate form elements based on a given set of input requirements. Ask students to use standard elements where possible for each of these input requirements and to annotate keyboard interaction and expected behavior with assistive technologies when using non-standard elements. Assess how students annotate keyboard interactions and expected behavior with assistive technologies when using non-standard elements. {% include excol.html type="end" %} From ef551968be8fa26ed6f35ab38c730dba64591ded Mon Sep 17 00:00:00 2001 From: Daniel-Montalvo Date: Wed, 27 Oct 2021 12:52:18 +0200 Subject: [PATCH 297/416] "form elements" --- content/designer/forms-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 98281a6cc..8c0636f39 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -38,7 +38,7 @@ Students should be able to: * explain how people with disabilities rely on placement, structure, labels, instructions, and notifications to understand, navigate, and interact with forms * define consistent use, placement, and appearance of form elements * define interactions with form elements, including through mouse, keyboard, touch, and voice -* define clear and distinguishable names as well as visual and non-visual instructions to understand the purpose and functionality of form fields +* define clear and distinguishable names as well as visual and non-visual instructions to understand the purpose and functionality of form elementss * define clear and descriptive visual and non-visual instructions about the current step and about the total number of steps in multi-step forms * define clear and descriptive error messages that: * identify the field in error From 3f51f970eddbe8e3745854dbfc2385e551c862f1 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 29 Oct 2021 14:50:40 +0200 Subject: [PATCH 298/416] later phase -> implementation phase --- content/designer/forms-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 8c0636f39..3a3dde714 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -134,7 +134,7 @@ Students should be able to: * identify different uses and intended purposes of form elements * identify the compatibility issues and cognitive overload from using form elements with unintended purposes -* evaluate the use of standard versus non-standard form elements and select those which minimize extra work to make them accessible at a later phase +* evaluate the use of standard versus non-standard form elements and select those which minimize extra work to make them accessible in the implementation phase * identify related requirements for developers to write code for form elements that programmatically identifies their intended purpose ### Teaching Ideas for Topic From f46f160db481685fb4dc2a215fd67f7a95f9cc4e Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 3 Nov 2021 09:51:13 +0100 Subject: [PATCH 299/416] Fix SC title --- content/designer/multimedia-and-animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index edf601b0d..d0cf34487 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -82,7 +82,7 @@ Skills required for this module: * [WCAG Success Criterion 1.2.2 Captions (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#captions-prerecorded) * [WCAG Success Criterion 1.2.3 Audio Description or Media Alternative (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#audio-description-or-media-alternative-prerecorded) * [WCAG Success Criterion 1.2.4 Captions (Live)](https://www.w3.org/WAI/WCAG21/quickref/#captions-live) - * [WCAG Success Criterion 1.2.5 Audio Descriptions (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#audio-description-prerecorded) + * [WCAG Success Criterion 1.2.5 Audio Description (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#audio-description-prerecorded) * [WCAG Success Criteria 1.4.2 Audio Control](https://www.w3.org/WAI/WCAG21/quickref/#audio-control) * [WCAG Success Criterion 1.4.6 Sign Language (prerecorded](https://www.w3.org/WAI/WCAG21/quickref/#sign-language-prerecorded) * [WCAG Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide) From d699887ff4b850a2918b42649bbd14a2ef824ba2 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 3 Nov 2021 11:55:52 +0100 Subject: [PATCH 300/416] Fixes remaining issues in [overall] module numbering #385 --- content/designer/images-and-graphics.md | 2 +- content/developer/custom-widgets.md | 4 ++-- content/developer/forms.md | 6 +++--- content/developer/menus.md | 8 ++++---- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 88cf82203..74b9b3148 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -205,7 +205,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Refer back to [Module 1: Visual Design, Topic: Color](/curricula/designer-modules/visual-design/#topic-use-of-color). Explain that they need to have a color contrast ratio of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required color contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). +* Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Refer back to [Designer Module 1: Visual Design, Topic: Color](/curricula/designer-modules/visual-design/#topic-use-of-color). Explain that they need to have a color contrast ratio of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required color contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). * Explain that complex images also need to have text descriptions that allow people to understand and interact with such images without having to look at them. Explain that providing these text alternatives is a designers' responsibility, whereas providing the text descriptions is a responsibility shared with the content author. #### Ideas to Assess Knowledge for Topic diff --git a/content/developer/custom-widgets.md b/content/developer/custom-widgets.md index 99c4ed3e3..5f06ec239 100644 --- a/content/developer/custom-widgets.md +++ b/content/developer/custom-widgets.md @@ -93,7 +93,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Build on previous modules, in particular [Module 5: Forms](/curricula/developer-modules/forms/) and [Module 1: Page Structure](/curricula/developer-modules/page-structure/) to explain the importance of proper role definitions for widgets. Demonstrate how native HTML interactive elements, such as controls and links, provide such semantics by default. Demonstrate and explain the use of WAI-ARIA attributes to define additional roles when HTML interactive elements are not sufficient. +Build on previous modules, in particular [Developer Module 5: Forms](/curricula/developer-modules/forms/) and [Developer Module 1: Page Structure](/curricula/developer-modules/page-structure/) to explain the importance of proper role definitions for widgets. Demonstrate how native HTML interactive elements, such as controls and links, provide such semantics by default. Demonstrate and explain the use of WAI-ARIA attributes to define additional roles when HTML interactive elements are not sufficient. #### Learning Outcomes for Topic @@ -133,7 +133,7 @@ Optional ideas to support assessment: {% include excol.html type="middle" %} -Refer back to [Module 5: Forms](/curricula/developer-modules/forms/) to review the importance of labels for controls. Demonstrate how custom widgets also require similar labeling techniques, and explain how to provide accessible names for widgets. Demonstrate how some custom widgets require additional descriptions, and explain how to provide such descriptions for widgets. +Refer back to [Developer Module 5: Forms](/curricula/developer-modules/forms/) to review the importance of labels for controls. Demonstrate how custom widgets also require similar labeling techniques, and explain how to provide accessible names for widgets. Demonstrate how some custom widgets require additional descriptions, and explain how to provide such descriptions for widgets. #### Learning Outcomes for Topic diff --git a/content/developer/forms.md b/content/developer/forms.md index 0d614bbfc..373201889 100644 --- a/content/developer/forms.md +++ b/content/developer/forms.md @@ -55,7 +55,7 @@ Skills required for this module: {% include excol.html type="middle" %} * [Foundation Prerequisites](/curricula/developer-modules/#foundation-prerequisites) -* [Developer Modules](/curricula/curriculum-for-developers) +* [Developer Modules](/curricula/developer-modules) * [Module 1: Page Structure](/curricula/developer-modules/page-structure/) * Basic knowledge of [HTML forms {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/forms.html#forms) @@ -91,7 +91,7 @@ Skills required for this module: * [HTML date, time, and input formats {% include_cached icon.html name="external-link" %}](https://html.spec.whatwg.org/multipage/forms.html#input-author-notes) * In-depth knowledge of: * [Foundation Prerequisites](/curricula/developer-modules/#foundation-prerequisites) - * [Page Structure](/curricula/developer-modules/page-structure/) + * [Developer Module 1: Page Structure](/curricula/developer-modules/page-structure/) {% include excol.html type="end" %} @@ -105,7 +105,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Explain the use of HTML elements and, if necessary, WAI-ARIA attributes to provide form controls and labels for form controls. Demonstrate how these semantics benefit different users in different situations, such as people using screen readers, screen magnification, voice interaction, and other assistive technologies. Non-standard form controls are addressed in [Module 6: Custom Widgets](/curricula/developer-modules/custom-widgets/). +Explain the use of HTML elements and, if necessary, WAI-ARIA attributes to provide form controls and labels for form controls. Demonstrate how these semantics benefit different users in different situations, such as people using screen readers, screen magnification, voice interaction, and other assistive technologies. Non-standard form controls are addressed in [Developer Module 6: Custom Widgets](/curricula/developer-modules/custom-widgets/). #### Learning Outcomes for Topic diff --git a/content/developer/menus.md b/content/developer/menus.md index 3531ad8c1..ba095a21c 100644 --- a/content/developer/menus.md +++ b/content/developer/menus.md @@ -59,7 +59,7 @@ Skills required for this module: {% include excol.html type="middle" %} * [Foundation Prerequisites](/curricula/developer-modules/#foundation-prerequisites) -* [Module 1: Page Structure](/curricula/developer-modules/page-structure/) from [Developer Modules](/curricula/developer-modules/) +* [Developer Module 1: Page Structure](/curricula/developer-modules/page-structure/) {% include excol.html type="end" %} @@ -82,7 +82,7 @@ Skills required for this module: * [WAI-ARIA landmark roles](https://www.w3.org/TR/wai-aria/#landmark_roles) * In-depth knowledge of: * [Foundation Prerequisites](/curricula/developer-modules/#foundation-prerequisites) - * [Module 1: Page Structure](/curricula/developer-modules/page-structure/) from [Developer Modules](/curricula/developer-modules/) + * [Developer Module 1: Page Structure](/curricula/developer-modules/page-structure/) {% include excol.html type="end" %} @@ -96,7 +96,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Build on [Module 1: Page Structure](/curricula/developer-modules/page-structure/) to explain the use of HTML and WAI-ARIA to convey structure. Relate this to the structure of menus, in particular using lists and list items. +Build on [Developer Module 1: Page Structure](/curricula/developer-modules/page-structure/) to explain the use of HTML and WAI-ARIA to convey structure. Relate this to the structure of menus, in particular using lists and list items. #### Learning Outcomes for Topic @@ -206,7 +206,7 @@ Optional ideas to support assessment: {% include excol.html type="middle" %} -Show examples of specific scenarios where application menus can be used. Application menus are commonly used in rich applications, which are further discussed in [Module 7 Rich Applications](/curricula/developer-modules/rich-applications). Explain the uses of additional WAI-ARIA roles and properties to mark up application menus. Refer to coding techniques to make application menus operable using various input devices, including keyboard only. +Show examples of specific scenarios where application menus can be used. Application menus are commonly used in rich applications, which are further discussed in [Developer Module 7 Rich Applications](/curricula/developer-modules/rich-applications). Explain the uses of additional WAI-ARIA roles and properties to mark up application menus. Refer to coding techniques to make application menus operable using various input devices, including keyboard only. #### Learning Outcomes for Topic From 25c88844522a5300b83587375d7548e5d3039599 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 3 Nov 2021 12:00:49 +0100 Subject: [PATCH 301/416] Fixes remaining issues in [overall] module numbering #385 --- content/foundation/people-and-digital-technology.md | 2 +- content/foundation/understanding-and-involving-users.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/content/foundation/people-and-digital-technology.md b/content/foundation/people-and-digital-technology.md index 9f44dfc12..a6015a6b4 100644 --- a/content/foundation/people-and-digital-technology.md +++ b/content/foundation/people-and-digital-technology.md @@ -106,7 +106,7 @@ Optional ideas to support assessment: {% include excol.html type="middle" %} -Explain that web accessibility depends on several components working together: content, browsers, authoring tools, web designers and developers, and more. Briefly note that there are W3C Standards for the different components. (The standards are explored in detail in [Module 4](/curricula/foundation-modules/principles-standards-and-checks/).) For an explanation of the components and how they link together, see [Essential Components of Web Accessibility](/fundamentals/components/). +Explain that web accessibility depends on several components working together: content, browsers, authoring tools, web designers and developers, and more. Briefly note that there are W3C Standards for the different components. (The standards are explored in detail in [Foundation Module 4](/curricula/foundation-modules/principles-standards-and-checks/).) For an explanation of the components and how they link together, see [Essential Components of Web Accessibility](/fundamentals/components/). #### Learning Outcomes for Topic diff --git a/content/foundation/understanding-and-involving-users.md b/content/foundation/understanding-and-involving-users.md index 8d477a0a6..9e01cce17 100644 --- a/content/foundation/understanding-and-involving-users.md +++ b/content/foundation/understanding-and-involving-users.md @@ -104,7 +104,7 @@ Optional ideas to support assessment. {% include excol.html type="middle" %} -Refer back to Module 4: Principles. Standards, and Checks [Topic: W3C Accessibility Standards](/curricula/foundation-modules/principles-standards-and-checks/#topic-w3c-accessibility-standards). Present requirements that relate to people with disabilities, such as those included in the W3C accessibility standards. Invite students to explore policies that may apply in their region (if any). +Refer back to [Foundation Module 4: Principles. Standards, and Checks Topic: W3C Accessibility Standards](/curricula/foundation-modules/principles-standards-and-checks/#topic-w3c-accessibility-standards). Present requirements that relate to people with disabilities, such as those included in the W3C accessibility standards. Invite students to explore policies that may apply in their region (if any). #### Learning Outcomes for Topic From 8cd66cf98b20ce4976565b22f8fac99033412912 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 3 Nov 2021 12:49:13 +0100 Subject: [PATCH 302/416] Fixes #361 --- content/designer/information-design.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 8293c602a..036d48d55 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -117,7 +117,7 @@ Students should be able to: * landmarks with their corresponding region type * headings (with their corresponding rank levels) * sidebars and other page regions -* create graphical representations that accompany the text, to make the information easier to understand; for example, a diagram representation of the process described in the text +* define the presentation of diagrams and illustrations that make the information easier to understand; for example, a diagram representation of the process described in the text * define methods to identify specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon * define methods to identify the expanded form or meaning of acronyms and abbreviations * identify related requirements for: @@ -130,7 +130,7 @@ Optional ideas to teach the learning outcomes: * Show examples of pages and explain how they are divided into several regions. Explain that, in addition to visually distinguishing these regions, semantics and text need to be added so that all users can understand the relationship between them. Explain that defining and planning the different regions is a designers' responsibility, whereas adding the semantics is a responsibility shared with the developer. * Show examples of online articles and forms. Discuss how these are divided into manageable pieces so that they are easier to understand and to navigate. For example, by using headings with their corresponding rank levels to indicate the different chapters, sections, and subsections of content. -* Show examples of diagrams and illustrations that can complement the information presented in text. For example, visual instructions that supplement the textual information of a user manual. Explain that they help users with reading disabilities to understand difficult pieces of text. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). +* Show examples of diagrams and illustrations that can complement the information presented in text. For example, visual instructions that supplement the textual information of a user manual. Explain that they help users with reading disabilities to understand difficult pieces of text. Explain that defining the presentation of such diagrams and illustrations is a responsibility of the designer, whereas providing the diagrams and illustrations is a responsibility of the content author. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). * Show examples of words that may be difficult to understand or that are used in a restricted way. Explain that people who are not familiar with such words need definitions to understand their meaning. Explain that defining the methods to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. * Show examples of abbreviations, such as short forms of words and acronyms. Explain that people who are not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the methods to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. @@ -139,7 +139,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Give students an eBook and ask them to define how it should be split into smaller and more manageable pieces so that it can be easier to navigate and understand. Assess how students use pages, landmarks, and headings with their corresponding rank levels to split large amounts of text into smaller and more manageable pieces. -* Practical — Give students a complex piece of text and ask them to complement it with diagrams and illustrations. Assess how students provide methods to complement processes and instructions presented in text. +* Practical — Give students a complex piece of text and ask them to define the presentations of diagrams and illustrations that complement the text. Assess how students define the presentations of diagrams and illustrations to complement processes and instructions presented in text. * Practical — Give students unusual words and abbreviations and ask them to define methods to provide the explanation of such words or the expansion of the abbreviations. Assess how students define methods to provide explanations of unusual words and expansions of abbreviations. {% include excol.html type="end" %} From 6a7942196b2a7741b874a35087a3bc2d4cfc45e5 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 4 Nov 2021 18:55:00 +0100 Subject: [PATCH 303/416] Updates to SCs and topics --- content/designer/forms-design.md | 1 + content/designer/navigation-design.md | 1 + content/designer/visual-design.md | 5 +++-- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 3a3dde714..4826d66c6 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -84,6 +84,7 @@ Skills required for this module: * [WCAG Success Criterion 1.3.2 Meaningful Sequence](https://www.w3.org/WAI/WCAG21/quickref/#meaningful-sequence) * [WCAG Success Criterion 1.3.3 Sensory Characteristics](https://www.w3.org/WAI/WCAG21/quickref/#sensory-characteristics) * [WCAG Success Criterion 1.3.4 Orientation](https://www.w3.org/WAI/WCAG21/quickref/#orientation) + * [WCAG Success Criteria 1.3.5 Identify Input Purpose](https://www.w3.org/WAI/WCAG21/quickref/#identify-input-purpose) * [WCAG Success Criterion 1.4.1 Use of Color](https://www.w3.org/WAI/WCAG21/quickref/#use-of-color) * [WCAG Success Criterion 1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum) * [WCAG Success Criterion 1.4.4 Resize Text](https://www.w3.org/WAI/WCAG21/quickref/#resize-text) diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index c305d8e1e..3d3064539 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -81,6 +81,7 @@ Skills required for this module: * Applied expertise in teaching: * [WCAG Success Criterion 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) + * [WCAG Success Criterion 1.3.2 Meaningful Sequence](https://www.w3.org/WAI/WCAG21/quickref/#meaningful-sequence) * [WCAG Success Criterion 2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/quickref/#keyboard) * [WCAG Success Criterion 2.1.2 No Keyboard Trap](https://www.w3.org/WAI/WCAG21/quickref/#no-keyboard-trap) * [WCAG 2 Success Criterion 2.4.1 Bypass Blocks](https://www.w3.org/WAI/WCAG21/quickref/#bypass-blocks) diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index b974020f5..1ff654ac4 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -89,6 +89,7 @@ Skills required for this module: * [WCAG Success Criterion 2.4.3 Focus Order](https://www.w3.org/WAI/WCAG21/quickref/#focus-order) * [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) * [WCAG Success Criterion 2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG21/quickref/#focus-visible) + * [WCAG Success Criterion 2.5.5 Target Size](https://www.w3.org/WAI/WCAG21/quickref/#target-size) * In-depth knowledge of: * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) * Visual Design @@ -190,9 +191,9 @@ Explain how people with disabilities orient on web pages and applications using Students should be able to: * design focus indicators that enable people to tell where they are as they move through web pages and applications using the keyboard -* define page regions by using appropriate visual and non-visual cues, such as headings +* define page regions by using headings, spacing, and grouping * design layouts that enable to present visual and non-visual cues in different screen sizes, screen configurations, and style sheets -* use text cues to supplement information provided through vision only, for example using text and icons to convey when a form field is required +* define methods to help users perceive and understand orientation cues, for example using text, color, and icons to convey the status of tasks in a project #### Teaching Ideas for Topic From 4e2612e3996a4459b91e0e399e573440b8ffdada Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 5 Nov 2021 15:16:57 +0100 Subject: [PATCH 304/416] Clarifying learning outcomes and assessment ideas --- content/designer/forms-design.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 4826d66c6..b53a41eff 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -134,9 +134,9 @@ Show examples of different form elements and their intended purpose, including e Students should be able to: * identify different uses and intended purposes of form elements -* identify the compatibility issues and cognitive overload from using form elements with unintended purposes +* identify how using form elements with unintended purposes can cause compatibility issues and cognitive overload * evaluate the use of standard versus non-standard form elements and select those which minimize extra work to make them accessible in the implementation phase -* identify related requirements for developers to write code for form elements that programmatically identifies their intended purpose +* identify related requirements for developers to write code for form elements that programmatically identifies their intended purpose as well as their current state and value ### Teaching Ideas for Topic @@ -149,7 +149,7 @@ Optional ideas to teach the learning outcomes. Optional ideas to support assessment: -* Short Answer Questions — Give students specific purposes for form elements. Ask them to research how to convey these purposes using standard elements when possible, and to elaborate on what are the accessibility implications of using non-standard elements. Assess how students understand the accessibility implications of using non-standard elements. +* Short Answer Questions — Give students specific purposes for form elements. Ask them to research how to convey these purposes using standard elements when possible, and to elaborate on what are the accessibility implications of using non-standard elements. Assess how students understand and communicate the accessibility implications of using non-standard elements. * Practical — Ask students to select the appropriate form elements based on a given set of input requirements. Ask students to use standard elements where possible for each of these input requirements and to annotate keyboard interaction and expected behavior with assistive technologies when using non-standard elements. Assess how students annotate keyboard interactions and expected behavior with assistive technologies when using non-standard elements. {% include excol.html type="end" %} @@ -196,7 +196,7 @@ Optional ideas to assess knowledge: {% include excol.html type="start" %} -### Topic: Error Prevention +### Topic: Errors {% include excol.html type="middle" %} From 4f1cdaef0c4638a39774288d650b608602af80da Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 5 Nov 2021 15:23:33 +0100 Subject: [PATCH 305/416] Removes redundant info --- content/designer/designer-modules.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index bc5a470e4..fd17509db 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -47,8 +47,6 @@ The modules primarily address the following roles: * User Experience (UX) Designer * Interaction Designer -These modules have been organized to facilitate teaching designers and developers together. If you are teaching in other environments, feel free to change the structure so that it fits your audience needs. - ### Foundation Prerequisites The designer modules are designed for students who have achieved the learning outcomes from the following subset of [Foundation modules](/curricula/foundation-modules/): From 5174f707549a50d1ca68b76236c5fd27814ee320 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 15 Nov 2021 11:42:45 +0100 Subject: [PATCH 306/416] Updates to modules and topics --- content/designer/designer-modules.md | 2 +- content/designer/images-and-graphics.md | 4 ++-- content/designer/information-design.md | 8 ++++---- content/designer/interaction-design.md | 23 +++++++++++++---------- content/designer/navigation-design.md | 12 ++++++------ content/designer/visual-design.md | 14 +++++++------- 6 files changed, 33 insertions(+), 30 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index fd17509db..1161ea426 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -93,5 +93,5 @@ The designer modules are designed for students who have achieved the learning ou - [Module 7: Forms Design](/curricula/designer-modules/forms-design/) - [Topic: Form Elements](/curricula/designer-modules/forms-design/#topic-form-elements) - [Topic: Labels and Instructions](/curricula/designer-modules/forms-design/#topic-labels-and-instructions) - - [Topic: Error Prevention](/curricula/designer-modules/forms-design/#topic-error-revention) + - [Topic: Errors](/curricula/designer-modules/forms-design/#topic-errors) - [Topic: Notifications](/curricula/designer-modules/forms-design/#topic-notifications) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 74b9b3148..754f759aa 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -152,7 +152,7 @@ Students should be able to: * text alternatives that describe the information conveyed by images * apply the appropriate color contrast to images that are necessary to understand the content * use styled text instead of images of text when the technology in use can provide the desired visual presentation -* define alternatives to CAPTCHA and biometrics, for example by providing visual, auditory, and logical CAPTCHA +* define alternatives to biometrics and CAPTCHA, for example by providing visual, auditory, and logical CAPTCHA * explain the issues associated with relying only on one form of biometrics and CAPTCHA, and describe alternative approaches for authentication * evaluate the issues associated to accessing information contained in informative images and select other ways to convey the information where possible, including plain text * identify related requirements for developers to code alternative texts for informative images @@ -170,7 +170,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to support assessment. * Practical — Give students an image of text and ask them to cooperate with other team roles such as developers and content authors to ensure the image has an equivalent alternative text. Assess how students identify the need for alternative text for images of text. -* Short Answer Questions — Present students with a situation where a human verification system needs to be used and ask them to provide authentication alternatives for other sensory characteristics apart from vision. Assess how students understand the need for providing human verification systems that rely on different sensory characteristics in addition to vision. +* Short Answer Questions — Present students with a situation where a human verification system needs to be used and ask them to provide various authentication alternatives for biometrics and CAPTCHA. Assess how students understand the need for providing various authentication alternatives for biometrics and CAPTCHA. {% include excol.html type="end" %} diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 036d48d55..36aedd191 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -125,7 +125,7 @@ Students should be able to: * content authors to provide clear language and easy-to-read texts whenever possible #### Teaching Ideas for Topic - + Optional ideas to teach the learning outcomes: * Show examples of pages and explain how they are divided into several regions. Explain that, in addition to visually distinguishing these regions, semantics and text need to be added so that all users can understand the relationship between them. Explain that defining and planning the different regions is a designers' responsibility, whereas adding the semantics is a responsibility shared with the developer. @@ -174,7 +174,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Students group related information in a form that asks for information to open a bank account. Assess how students build groups of related information, such as those collecting personal information, payment methods, and consent to legal conditions, and how students provide ways for users to identify each of the groups. +* Practical — Students group related information in a form that collects personal information, payment methods, and consent to legal conditions. Assess how students build groups of related information, and how students provide ways for users to identify each of the groups. * Practical — Give students a long list of items and ask them to define ways to split the list into smaller subsets. Assess how students use different strategies to group long sets of data into smaller subsets. {% include excol.html type="end" %} @@ -209,7 +209,7 @@ Optional ideas to teach the learning outcomes: * Show examples of different types of information presented in tables. Explain that tables are used when there is a logical, tabular relationship between the information presented, for example when displaying a list of events with their date and venue. * Refer back to [Designer Module 1: Visual Design, Topic: Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts) and explain that some users may require different ways of presenting tabular information. For example, providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. -* Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells needs to be perceived both visually and programmatically. Explain that providing the styles is a designers' responsibility, whereas establishing the programmatic relationship is a responsibility shared with the developer. +* Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells needs to be perceived both visually and programmatically. Explain that providing the styles is a designers' responsibility, whereas establishing the programmatic relation is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic @@ -228,7 +228,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: * Short Answer Questions — Ask students about the different approaches they can use to communicate the structure in web pages and documents. Assess how students recognize structures such as pages, headings, and landmarks. -* Portfolio — Students organize different pieces of information on a website, including text, forms, and images. Assess how students provide methods for people to identify different pieces of information, how students split large amounts of information into smaller and more manageable pieces, and how they group related information together. +* Portfolio — Students organize different pieces of information on a website, including text, forms, and images. Assess how students provide methods for users to identify different pieces of information, how students split large amounts of information into smaller and more manageable pieces, and how students group related information together. ## Teaching Resources diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index 3bf3a1c89..8b0af4bd0 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -28,20 +28,20 @@ navigation: Courses based on this module should: -* demonstrate strategies that people with disabilities use to interact with components of web pages and applications, including links, buttons, controls, forms, widgets, and notifications +* demonstrate strategies that people with disabilities use to interact with components of web pages and applications, including links, buttons, controls, widgets, and notifications * explain accessibility requirements related to input methods, including mouse, keyboard, touch, and voice ## Learning Outcomes for Module Students should be able to: -* explain strategies that people with disabilities use to interact with components of web pages and applications, including links, buttons, controls, forms, widgets, and notifications +* explain strategies that people with disabilities use to interact with components of web pages and applications, including links, buttons, controls, widgets, and notifications * design user experiences for different input methods, including mouse, touch, keyboard, and voice * define interactions and meaningful sequences inside complex widgets, including sliders, tabs, dialogs, application menus, tree views, and notifications * evaluate the use of custom keyboard shortcuts for complex widgets and applications and provide information about their purpose and scope * define methods to disable device and user motion to prevent accidental actuation * define alternatives for complex gestures, including swiping, pinching, and drawing shapes -* identify related requirements for developers to write code interactions, including through mouse, keyboard, touch, and voice +* identify related requirements for developers to write code for interactions, including through mouse, keyboard, touch, and voice {% include excol.html type="all" %} @@ -119,31 +119,31 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain how keyboard support favors other ways of interaction, including voice interaction and interaction using some assistive technologies. +Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain how keyboard support benefits other ways of interaction, including voice interaction and interaction using some assistive technologies. -Present examples of specific non-standard shortcuts. Explain that providing custom keyboard interactions can favor efficiency but can also disrupt the users' expectations. Thus, designers need to document these custom interactions and make them consistent throughout the interface. +Present examples of specific non-standard shortcuts. Explain that providing custom keyboard interactions can support efficiency but can also disrupt the users' expectations. Thus, designers need to document these custom interactions and make them consistent throughout the interface. Emphasize that defining the keyboard interactions is a designers' responsibility, whereas implementing such interactions is a responsibility shared with the developer. #### Learning Outcomes for Topic Students should be able to: -* explain how keyboard support favors other ways of interaction, including voice interaction and interaction using some assistive technologies * design user experiences for keyboard navigation through and inside components of websites and applications, for example using: * the tab key to move through different components * the enter key to enter a specific component and to select a specific item on a component * the arrow keys to move through elements inside components, including sliders, tabs, dialogs, application menus, and tree views * the escape key to exit components - * first letter navigation to jump to specific pieces of data in lists and grids * specific keyboard shortcuts to reveal, review, and dismiss notifications * specific keyboard shortcuts to support efficiency + * first letter navigation to jump to specific pieces of data in lists and grids +* explain how keyboard support benefits other ways of interaction, including voice interaction and interaction using assistive technologies * identify situations when it is necessary to provide additional keyboard shortcuts, for example when designing a custom functionality that is not keyboard supported by default * evaluate the use of custom keyboard interactions and select keyboard interactions that avoid conflicts with the operating system, browser, and assistive technologies when possible * cooperate with developers to provide methods to remap or disable conflicting shortcuts * define methods to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications -* define focus indicators that are visible and that have appropriate contrast ratios for complex widgets +* define consistent placement and appearance of focus indicators and programmatic focus, for example in complex widgets * identify related requirements for developers to implement keyboard support for components that have no keyboard support by default - + #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: @@ -151,6 +151,8 @@ Optional ideas to teach the learning outcomes: * Invite students to try standard keyboard conventions. For example, use of the tab to move through user interface components, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that these interactions need to be preserved as much as possible when designing custom widgets, as these are mostly expected by users. * Invite students to research keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers need to work closely with other team members, including developers and user researchers, on strategies to define custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and working with developers to implement such keystrokes. * Present examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. +* Invite students to research how assistive technologies and adaptive strategies rely on keyboard support to provide specific functionality, such as navigating sequentially using voice commands. Demonstrate interaction with assistive technologies in web pages and applications with and without keyboard support. +* Refer back to [Designer Module 1: Visual Design, Topic Orientation Cues](/curricula/designer-modules/visual-design/#topic-orientation-cues) to reflect on focus indicators. Explain that, in addition to visually distinguishable focus indicators, programmatic keyboard focus needs to be considered when providing keyboard support. Emphasize that designers need to work closely with other team members, including developers and user researchers, to design user experiences that consider placement of programmatic focus depending on changes of context and user interaction. * Show examples of help functionality for custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using those shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these help methods is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic @@ -160,6 +162,7 @@ Optional ideas to assess knowledge: * Short Answer Questions — Ask students about commonly used modifier keys of operating systems, browsers, and assistive technologies. Assess how students identify commonly used modifier keys in operating systems, browsers, and assistive technologies. * Practical — Give students an interface that only works with the mouse and ask them to define keyboard interaction patterns. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. * Practical — Students work with developers to avoid custom keyboard shortcut conflicts with existing operating system and assistive technology keystrokes. Assess how students work with developers to develop strategies that avoid custom keyboard shortcut conflicts. +* Practical — Give students a custom widget and ask them to define appropriate focus placement and appearance depending on changes in context and user interaction. Assess how students create user experiences that consider visual focus indicators and programmatic focus. {% include excol.html type="end" %} @@ -171,7 +174,7 @@ Optional ideas to assess knowledge: Show examples of user interfaces that react to motion, such as shaking the device to perform a specific action. Explain that some people may perform these motion-based gestures inadvertently, others may not be able to perform them at all. Present alternatives to motion-based gestures, for example providing methods to undo, abort, and reverse actions performed using complex gestures. -Discuss some gestures that require dragging and drawing specific paths on a touch screen. Explain that these are difficult (and sometimes impossible) to perform for some people. +Discuss gestures that require dragging and drawing specific paths on a touch screen. Explain that these are difficult (and sometimes impossible) to perform for some people. #### Learning Outcomes for Topic diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 3d3064539..8d8ed07ca 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -44,7 +44,7 @@ Students should be able to: * indication of state changes for menu items * define blocks of repeated content * define site maps and descriptive page titles to help users locate specific web pages within websites -* evaluate the use of navigational components, including menus, tables of contents, and site maps, and select navigational components that avoid distraction and unnecessary noise +* evaluate the use of navigational components, including menus, tables of contents, and site maps, and select navigational components that avoid potential distraction and unnecessary noise * identify related requirements for developers to implement: * interactions for navigational components, including by keyboard, mouse, touch, and voice * clear and descriptive names for navigational components @@ -130,7 +130,7 @@ Students should be able to: * semantics for different menu states and properties, such as hover, focus, current, active, and visited * support for different interaction methods, including keyboard, mouse, touch, and voice * support for different text and screen sizes - + #### Teaching Ideas Optional ideas to teach the learning outcomes: @@ -157,7 +157,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Build on [Foundation Module 6: Understanding and Involving Users](/curricula/foundation-modules/understanding-and-involving-users/). Discuss strategies that people use to navigate to different pages of the same site, including menus, breadcrumb trails, search functionalities, and site maps. Explain that different groups of users rely on different navigational components. Discuss how to assess and balance which ones to use to favor various user experiences while avoiding distractions and unnecessary noise. +Build on [Foundation Module 6: Understanding and Involving Users](/curricula/foundation-modules/understanding-and-involving-users/). Discuss strategies that people use to navigate to different pages of the same site, including menus, breadcrumb trails, search functionalities, and site maps. Explain that different groups of users rely on different navigational components. Discuss how to assess and balance which ones to use to favor various user experiences while avoiding potential distractions and unnecessary noise. #### Learning Outcomes for Module @@ -179,7 +179,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of breadcrumb trails. Explain that they provide information about the user's location in the context of a whole website. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail](https://www.w3.org/WAI/WCAG21/Techniques/general/G65). -* Show examples of site maps and explain that they serve the purpose of providing an overview of the whole site. Explain that some users rely on them to better understand the structure of the site and to find its way more easily through it. For references on how to provide a site map, see [G63: Providing a site map](https://www.w3.org/WAI/WCAG21/Techniques/general/G63.html). +* Show examples of site maps and explain that they provide an overview of the whole site. Explain that some users rely on site maps to better understand the structure of the site and to find its way more easily through it. For references on how to provide a site map, see [G63: Providing a site map](https://www.w3.org/WAI/WCAG21/Techniques/general/G63.html). * Show examples of search functionalities. Explain that they help users find content by supporting navigation to different parts of the site. Emphasize that some users prefer this way of navigating, especially when they are already familiar with the site and know what they are looking for. For references on how to provide a search functionality, see technique [G161: Providing a search function to help users find content](https://www.w3.org/WAI/WCAG21/Techniques/general/G161). * Invite students to research different ways to present information in page titles. Reflect with them on how well the titles describe the page contents. Explain that page titles are useful to identify the purpose of a specific web page within a website. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page. Some browsers and assistive technologies may truncate the titles or not show them at all. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). * Show examples of visual and non-visual indications in menus about the current page with respect to the website. @@ -188,7 +188,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to teach the learning outcomes: -* Practical — Give students a website and ask them to provide multiple ways to navigate across the website. Assess how students identify the different user experiences for navigation, including search functionalities, breadcrumb trails, and site maps. +* Practical — Give students a website and ask them to provide multiple ways to navigate across the website. Assess how students identify and design the different user experiences for site navigation, including search functionalities, breadcrumb trails, and site maps. * Practical — Give students a website and ask them to provide descriptive titles that identify each of the pages. Assess how students provide clear and descriptive page titles. * Practical — Give students an interface with excessive use of navigational components and ask them to determine which of these navigational components should stay and which should be removed. Assess how students balance the use of navigational components to avoid distraction and unnecessary noise. @@ -239,7 +239,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Short Answer Questions — Ask students to recite the different types of navigational methods that exist and provide examples for each. Assess how students understand the different types of navigational methods for websites, documents, and applications. +* Short Answer Questions — Ask students to recite the different types of navigational methods that exist and provide examples for each. Assess how students understand and communicate them different types of navigational methods for websites, documents, and applications. * Portfolio — Students design the navigation menu and other navigational components for a website. Assess how students understand accessibility features of navigation across websites and applications. ## Teaching Resources diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 1ff654ac4..ba3a3529c 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -31,7 +31,7 @@ Courses based on this module should: * demonstrate how people with disabilities rely on layouts that adapt to different screen sizes, screen configurations, and style sheets * explain accessibility requirements for color, layout, spacing, and position of components - + ## Learning Outcomes for Module Students should be able to: @@ -184,7 +184,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Explain how people with disabilities orient on web pages and applications using text and visual cues, including focus indicators, as well as spacing and grouping to communicate regions. Present strategies to plan for the inclusion of such cues early in the visual design phase. +Explain how people with disabilities orient on web pages and applications using visual and non-visual cues, including focus indicators, as well as spacing and grouping to communicate regions. Present strategies to plan for the inclusion of such cues early in the visual design phase. #### Learning Outcomes for Topic @@ -193,7 +193,7 @@ Students should be able to: * design focus indicators that enable people to tell where they are as they move through web pages and applications using the keyboard * define page regions by using headings, spacing, and grouping * design layouts that enable to present visual and non-visual cues in different screen sizes, screen configurations, and style sheets -* define methods to help users perceive and understand orientation cues, for example using text, color, and icons to convey the status of tasks in a project +* define methods to help users perceive and understand visual and non-visual cues, for example using text, color, and icons to convey the status of tasks in a project #### Teaching Ideas for Topic @@ -201,14 +201,14 @@ Optional ideas to teach the learning outcomes: * Invite students to use a web page that has appropriate focus indicators first, and then invite them to use a web page without focus indicators. Explain how focus indicators allow people using the keyboard only to determine where they are as they move through web pages and applications using the keyboard only. For reference on how to provide appropriate focus indicators, see techniques [G149: Using user interface components that are highlighted by the user agent when they receive focus](https://www.w3.org/WAI/WCAG21/Techniques/general/G149.html) and [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). * Show examples of different web page regions, such as header, navigation, main, and footer. Explain that several groups of people with disabilities rely on visual and programmatic cues to perceive such regions. Explain that defining the presentation of these cues is a designers' responsibility, whereas implementing such cues and their semantics is a developers' responsibility. -* Show examples of interfaces where information is provided through vision only, such as those with icons to convey when a form field is required. Explain that some people cannot rely on visual means to obtain information, so they need text to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). +* Show examples of interfaces where information is provided through vision only, such as those with icons and color to convey the status of different tasks in a project. Explain that some people cannot rely on visual means to obtain information, so they need text to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: * Practical — Ask students to define the visual presentation of focus indicators on a web page or application. Assess how students understand the importance of focus indicators for users to know where they are on a web page or application. -* Practical — Give students a web page and ask them to define its regions and cues. Assess how students define regions and cues using a variety of methods, including semantics and styling. +* Practical — Give students a web page and ask them to define its regions. Assess how students define web page regions using a variety of methods, including headings, spacing, and grouping. * Short Answer Questions — Give students examples of orientation cues conveyed visually and ask them to provide text to help understand the information. Assess how students provide the necessary textual information to supplement orientation cues conveyed visually. {% include excol.html type="end" %} @@ -241,9 +241,9 @@ Optional ideas to teach the learning outcomes: * Discuss with students the differences between web sites and applications that preserve content and functionality when resized up to 200% and those which do not. Explain that some people often need to resize text to read it properly. For references on how to ensure text resizes up to 200%, see technique [G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width](https://www.w3.org/WAI/WCAG21/Techniques/general/G179). * Discuss the use of multiple screen sizes, screen configurations, and style sheets by people with low vision. Explain that these configurations often go beyond the traditional mobile, tablet, and desktop breakpoints. -* Show examples of user interfaces showing up in both portrait and landscape modes. Explain that the ability to show an interface both in portrait and landscape is important for people who cannot change their device orientation due to mobility impairments. +* Show examples of user interfaces showing up in both portrait and landscape modes. Explain that the ability to show an interface both in portrait and landscape is essential for people who cannot change their device orientation due to mobility impairments. * Show examples of different user interfaces that support customizing line height as well as spacing between paragraphs, words, and letters to support readability. -* Show examples of different tap targets and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that tap targets need to be large enough to accommodate different people's needs. +* Show examples of different target sizes and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain thattarget sizes need to be large enough to accommodate different people's needs. #### Ideas to Assess Knowledge for Topic From 648dec323a9a445f1d0d8ce44c74e6da4f980e2c Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 16 Nov 2021 10:31:38 +0100 Subject: [PATCH 307/416] Adding coverage for 3.3.4 and correcting typos and wording --- content/designer/forms-design.md | 5 ++++- content/designer/visual-design.md | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index b53a41eff..366ae00db 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -38,7 +38,7 @@ Students should be able to: * explain how people with disabilities rely on placement, structure, labels, instructions, and notifications to understand, navigate, and interact with forms * define consistent use, placement, and appearance of form elements * define interactions with form elements, including through mouse, keyboard, touch, and voice -* define clear and distinguishable names as well as visual and non-visual instructions to understand the purpose and functionality of form elementss +* define clear and distinguishable names as well as visual and non-visual instructions to understand the purpose and functionality of form elements * define clear and descriptive visual and non-visual instructions about the current step and about the total number of steps in multi-step forms * define clear and descriptive error messages that: * identify the field in error @@ -211,6 +211,7 @@ Students should be able to: * identify the fields in error * describe the cause of the error * provide suggestions to correct the error where possible +* define methods to reverse, check, and confirm critical submissions, including legal, financial, and sensitive data #### Teaching Ideas for Topic @@ -220,6 +221,7 @@ Optional ideas to teach the learning outcomes: * Show examples of overall information about submission errors. Explain that this information makes users aware that their submission contains errors and help them search for specific error messages in the rest of the content. * Show examples of specific messages that identify each of the fields in error. Explain that these messages help users identify and locate the specific fields that contain errors. Mention that it is best practice to keep the original submission where possible, so that users can understand what needs to be corrected. * Show examples of suggestions for correction. Explain that these suggestions help users understand what the right way is to submit the form. Emphasize that these suggestions should be provided when possible, unless they compromise the security and the purpose of the form. +* Show examples of critical submissions, for example buying an airline ticket and submitting legal information. Discuss methods to reverse, check, and confirm the information included in such submissions. #### Ideas to Assess Knowledge for Topic @@ -228,6 +230,7 @@ Optional ideas to assess knowledge: * Practical — Give students an interface containing errors and ask them to provide an overall descriptive message informing that there are submission errors. Assess how students provide overall informative messages when there are submission errors * Practical — Give students a form field submission containing errors and ask them to provide messages about each of the wrongly submitted field. Assess how students provide appropriate error messages for wrongly submitted fields and how they provide suggestions for correction when possible. * Practical — Give students a form field submission containing errors and ask them to provide suggestion for correction when possible. Assess how students provide suggestion for correction. +* Practical — Give students a form submission containing legal information and ask them to provide methods to reverse, check, and confirm that submission. Assess how students understand the need for methods to reverse, check, and confirm critical submissions. {% include excol.html type="end" %} diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index ba3a3529c..0c92f35ac 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -209,7 +209,7 @@ Optional ideas to assess knowledge: * Practical — Ask students to define the visual presentation of focus indicators on a web page or application. Assess how students understand the importance of focus indicators for users to know where they are on a web page or application. * Practical — Give students a web page and ask them to define its regions. Assess how students define web page regions using a variety of methods, including headings, spacing, and grouping. -* Short Answer Questions — Give students examples of orientation cues conveyed visually and ask them to provide text to help understand the information. Assess how students provide the necessary textual information to supplement orientation cues conveyed visually. +* Short Answer Questions — Give students examples of orientation cues conveyed visually and ask them to provide other visual and non-visual cues to help understand the information. Assess how students provide several visual and non-visual cues to help users understand the information. {% include excol.html type="end" %} From ee9d21a10e1269fe7de7a088adade341a4ed90d8 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 16 Nov 2021 13:17:11 +0100 Subject: [PATCH 308/416] Wording changes to 3.3.4 --- content/designer/forms-design.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 366ae00db..901a58726 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -221,7 +221,7 @@ Optional ideas to teach the learning outcomes: * Show examples of overall information about submission errors. Explain that this information makes users aware that their submission contains errors and help them search for specific error messages in the rest of the content. * Show examples of specific messages that identify each of the fields in error. Explain that these messages help users identify and locate the specific fields that contain errors. Mention that it is best practice to keep the original submission where possible, so that users can understand what needs to be corrected. * Show examples of suggestions for correction. Explain that these suggestions help users understand what the right way is to submit the form. Emphasize that these suggestions should be provided when possible, unless they compromise the security and the purpose of the form. -* Show examples of critical submissions, for example buying an airline ticket and submitting legal information. Discuss methods to reverse, check, and confirm the information included in such submissions. +* Show examples of critical submissions, for example buying an airline ticket and submitting legal data. Discuss methods to reverse, check, and confirm the information included in such submissions. #### Ideas to Assess Knowledge for Topic @@ -230,7 +230,7 @@ Optional ideas to assess knowledge: * Practical — Give students an interface containing errors and ask them to provide an overall descriptive message informing that there are submission errors. Assess how students provide overall informative messages when there are submission errors * Practical — Give students a form field submission containing errors and ask them to provide messages about each of the wrongly submitted field. Assess how students provide appropriate error messages for wrongly submitted fields and how they provide suggestions for correction when possible. * Practical — Give students a form field submission containing errors and ask them to provide suggestion for correction when possible. Assess how students provide suggestion for correction. -* Practical — Give students a form submission containing legal information and ask them to provide methods to reverse, check, and confirm that submission. Assess how students understand the need for methods to reverse, check, and confirm critical submissions. +* Practical — Give students a form submission containing legal data and ask them to provide methods to reverse, check, and confirm that submission. Assess how students understand the need for methods to reverse, check, and confirm critical submissions. {% include excol.html type="end" %} @@ -242,7 +242,7 @@ Optional ideas to assess knowledge: Show examples of notification messages. Explain that they need to be distinguishable by all users, including visually and programmatically. -Show examples of text and visual notifications for error messages and other types of feedback for forms. Explain that notifications may have different levels of priority when in the context of a complex form. Explain that defining such levels of priority and which types of notifications each of these levels should contain is a designers' responsibility whereas implementing these levels is a developers' responsibility. +Show examples of visual and non-visual notifications for error messages and other types of feedback for forms. Explain that notifications may have different levels of priority when in the context of a complex form. Explain that defining such levels of priority and which types of notifications each of these levels should contain is a designers' responsibility whereas implementing these levels is a developers' responsibility. #### Learning Outcomes for Topic From cd269dcceda8ede7ea384ea1c3d723f48786e3b2 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 16 Nov 2021 16:49:46 +0100 Subject: [PATCH 309/416] Correct placement of LO --- content/designer/interaction-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index 8b0af4bd0..845913efb 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -136,8 +136,8 @@ Students should be able to: * specific keyboard shortcuts to reveal, review, and dismiss notifications * specific keyboard shortcuts to support efficiency * first letter navigation to jump to specific pieces of data in lists and grids -* explain how keyboard support benefits other ways of interaction, including voice interaction and interaction using assistive technologies * identify situations when it is necessary to provide additional keyboard shortcuts, for example when designing a custom functionality that is not keyboard supported by default +* explain how keyboard support benefits other ways of interaction, including voice interaction and interaction using assistive technologies * evaluate the use of custom keyboard interactions and select keyboard interactions that avoid conflicts with the operating system, browser, and assistive technologies when possible * cooperate with developers to provide methods to remap or disable conflicting shortcuts * define methods to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications From aa6191c13d62e6fa3f2e9d02a262f9281edb016e Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 17 Nov 2021 10:48:46 +0100 Subject: [PATCH 310/416] Updates based on TF 16 Nov discussion --- content/designer/designer-modules.md | 12 +++++------- content/designer/interaction-design.md | 18 +++++++++++------- content/designer/visual-design.md | 6 +++--- 3 files changed, 19 insertions(+), 17 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index 1161ea426..aa243d840 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -38,14 +38,12 @@ The designer modules guide the creation of courses that: * multimedia and animations * forms -These modules focus on visual, information, user experience, and interaction aspects to design accessible web pages and applications. +These modules focus on accessible user experiences. They are primarily designed for teaching: -The modules primarily address the following roles: - -* Visual Designer -* Information Architect -* User Experience (UX) Designer -* Interaction Designer +* Visual Designers +* Information Architects +* User Experience (UX) Designers +* Interaction Designers ### Foundation Prerequisites diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index 845913efb..dad712730 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -28,14 +28,14 @@ navigation: Courses based on this module should: -* demonstrate strategies that people with disabilities use to interact with components of web pages and applications, including links, buttons, controls, widgets, and notifications +* demonstrate strategies that people with disabilities use to interact with links, buttons, controls, as wellas complex widgets, including sliders, tabs, dialogs, application menus, tree views, and notifications * explain accessibility requirements related to input methods, including mouse, keyboard, touch, and voice ## Learning Outcomes for Module Students should be able to: -* explain strategies that people with disabilities use to interact with components of web pages and applications, including links, buttons, controls, widgets, and notifications +* explain strategies that people with disabilities use to interact with links, buttons, controls, and complex widgets, including sliders, tabs, dialogs, application menus, tree views, and notifications * design user experiences for different input methods, including mouse, touch, keyboard, and voice * define interactions and meaningful sequences inside complex widgets, including sliders, tabs, dialogs, application menus, tree views, and notifications * evaluate the use of custom keyboard shortcuts for complex widgets and applications and provide information about their purpose and scope @@ -119,7 +119,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain how keyboard support benefits other ways of interaction, including voice interaction and interaction using some assistive technologies. +Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain how keyboard support benefits other ways of interacting, including voice interaction and interaction using some assistive technologies. Present examples of specific non-standard shortcuts. Explain that providing custom keyboard interactions can support efficiency but can also disrupt the users' expectations. Thus, designers need to document these custom interactions and make them consistent throughout the interface. Emphasize that defining the keyboard interactions is a designers' responsibility, whereas implementing such interactions is a responsibility shared with the developer. @@ -137,11 +137,12 @@ Students should be able to: * specific keyboard shortcuts to support efficiency * first letter navigation to jump to specific pieces of data in lists and grids * identify situations when it is necessary to provide additional keyboard shortcuts, for example when designing a custom functionality that is not keyboard supported by default -* explain how keyboard support benefits other ways of interaction, including voice interaction and interaction using assistive technologies +* explain how keyboard support benefits other ways of interacting, including voice interaction and interaction using assistive technologies * evaluate the use of custom keyboard interactions and select keyboard interactions that avoid conflicts with the operating system, browser, and assistive technologies when possible * cooperate with developers to provide methods to remap or disable conflicting shortcuts * define methods to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications -* define consistent placement and appearance of focus indicators and programmatic focus, for example in complex widgets +* define consistent placement and appearance of focus indicators + * cooperate with developers to programmaticly set focus in complex widgets, including sliders, tabs, dialogs, application menus, tree views, and notifications * identify related requirements for developers to implement keyboard support for components that have no keyboard support by default #### Teaching Ideas for Topic @@ -152,7 +153,7 @@ Optional ideas to teach the learning outcomes: * Invite students to research keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers need to work closely with other team members, including developers and user researchers, on strategies to define custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and working with developers to implement such keystrokes. * Present examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. * Invite students to research how assistive technologies and adaptive strategies rely on keyboard support to provide specific functionality, such as navigating sequentially using voice commands. Demonstrate interaction with assistive technologies in web pages and applications with and without keyboard support. -* Refer back to [Designer Module 1: Visual Design, Topic Orientation Cues](/curricula/designer-modules/visual-design/#topic-orientation-cues) to reflect on focus indicators. Explain that, in addition to visually distinguishable focus indicators, programmatic keyboard focus needs to be considered when providing keyboard support. Emphasize that designers need to work closely with other team members, including developers and user researchers, to design user experiences that consider placement of programmatic focus depending on changes of context and user interaction. +* Refer back to [Designer Module 1: Visual Design, Topic Orientation Cues](/curricula/designer-modules/visual-design/#topic-orientation-cues) to reflect on focus indicators. Explain that, in addition to visually distinguishable focus indicators, programmatic keyboard focus needs to be considered when providing keyboard support. Emphasize that designers need to work closely with other team members, including developers and user researchers, to design user experiences that consider focus placement depending on changes of context and user interaction. * Show examples of help functionality for custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using those shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these help methods is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic @@ -162,7 +163,7 @@ Optional ideas to assess knowledge: * Short Answer Questions — Ask students about commonly used modifier keys of operating systems, browsers, and assistive technologies. Assess how students identify commonly used modifier keys in operating systems, browsers, and assistive technologies. * Practical — Give students an interface that only works with the mouse and ask them to define keyboard interaction patterns. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. * Practical — Students work with developers to avoid custom keyboard shortcut conflicts with existing operating system and assistive technology keystrokes. Assess how students work with developers to develop strategies that avoid custom keyboard shortcut conflicts. -* Practical — Give students a custom widget and ask them to define appropriate focus placement and appearance depending on changes in context and user interaction. Assess how students create user experiences that consider visual focus indicators and programmatic focus. +* Practical — Give students a custom widget and ask them to define appropriate focus placement and appearance depending on changes in context and user interaction. Assess how students create user experiences that consider visual focus indicators and focus placement. {% include excol.html type="end" %} @@ -184,6 +185,7 @@ Students should be able to: * define methods to undo or abort an action carried out with path-based gestures, including use of the up event to undo, abort, and reverse activation * define alternatives for device or user motion, for example components performing the same function that do not require user motion * define methods to disable response to device or user motion to prevent accidental actuation +* design user experiences that consider larger target sizes for pointer inputs #### Teaching Ideas for Topic @@ -192,6 +194,7 @@ Optional ideas to teach the learning outcomes: * Show examples of interactions based on swipe and pinch gestures. Explain that users with mobility impairments may have difficulty to perform such gestures, so interfaces need to have alternatives that do not require swiping or pinching to perform an action. * Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments may have difficulty to perform such gestures, so interfaces need to have alternatives that do not require motion for these gestures. * Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events, so interfaces need to support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. +* Refer back to [Designer Module 1: Visual Design, Topic Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts). Explain that larger target sizes for pointer are recommended where possible. The minimum recommended size is 44 by 44 CSS pixels. #### Ideas to Assess Knowledge for Topic @@ -199,6 +202,7 @@ Optional ideas to assess knowledge: * Practical — Give students an interface that uses a multi path-based gesture to perform an action and ask them to provide alternatives to that gesture. Assess how students provide alternatives to multi-pointer and path-based gestures. * Practical — Give students an interface that uses a motion-based gesture to perform an action and ask them to provide alternatives to that gesture. Assess how students provide alternatives to motion-based gestures. +* Short Answer Questions — Ask students what the recommended minimum target size is for pointer inputs. Assess how students provide the minimum target size for pointer inputs. {% include excol.html type="end" %} diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 0c92f35ac..39f0102d4 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -219,9 +219,9 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Explain how people with disabilities rely on layouts that adapt to different screen sizes, screen configurations, and style sheets to identify, distinguish, and process content. Demonstrate how content sequence, focus indicators, and target sizes adapt to different screen sizes, screen configurations, and style sheets. Emphasize that designers need to plan for these features early on in the visual design phase. +Explain how people with disabilities rely on layouts that adapt to different screen sizes, screen configurations, and style sheets to identify, distinguish, and process content. Explain that, in addition to using techniques such as responsive design, other elements, including content sequence, focus indicators, and target sizes need to adapt to different screen sizes, screen configurations, and style sheets for an accessible user experience. Emphasize that designers need to plan for these accessible user experiences early on in the visual design phase. -Demonstrate how too many design elements can cause overload and distraction for some users. Demonstrate approaches to balance the use of too many design elements. +Demonstrate approaches to balance the use of too many design elements to avoid potential overload and distraction for some users. #### Learning Outcomes for Topic @@ -230,7 +230,7 @@ Students should be able to: * design layouts to support text resizing without loss of content and functionality * design layouts to support text zooming and enlarging in different viewport sizes and through multiple breakpoints * design layouts that adapt their content view and operation to portrait and landscape orientations -* design layouts with target sizes that adapt to different screen sizes, screen configurations, and style sheets +* design layouts with target sizes that adapt to different screen sizes, screen configurations, and style sheets, for example when creating responsive designs * design layouts to support user customization of line height, as well as spacing between paragraphs, words, and letters * define meaningful focus orders that adapt to different viewports, screen sizes, and multiple breakpoints * evaluate the use of too many design elements, in particular interactive widgets, images, and moving content) on a page, and select elements that avoid potential distraction and cognitive overload From 5e4e59353735a7d98fc746a49546d630bfcd6019 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 17 Nov 2021 14:29:49 +0100 Subject: [PATCH 311/416] Clean-up --- content/designer/forms-design.md | 14 +++++++------- content/designer/images-and-graphics.md | 8 ++++---- content/designer/information-design.md | 12 ++++++------ content/designer/interaction-design.md | 17 ++++++++--------- content/designer/multimedia-and-animations.md | 4 ++-- content/designer/navigation-design.md | 8 ++++---- content/designer/visual-design.md | 6 +++--- 7 files changed, 34 insertions(+), 35 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 901a58726..0457d0608 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -42,7 +42,7 @@ Students should be able to: * define clear and descriptive visual and non-visual instructions about the current step and about the total number of steps in multi-step forms * define clear and descriptive error messages that: * identify the field in error - * provide suggestions for correction where possible + * provide suggestions for correction when possible * define meaningful and descriptive visual and non-visual notifications, including for: * imminent time limits * success messages @@ -150,7 +150,7 @@ Optional ideas to teach the learning outcomes. Optional ideas to support assessment: * Short Answer Questions — Give students specific purposes for form elements. Ask them to research how to convey these purposes using standard elements when possible, and to elaborate on what are the accessibility implications of using non-standard elements. Assess how students understand and communicate the accessibility implications of using non-standard elements. -* Practical — Ask students to select the appropriate form elements based on a given set of input requirements. Ask students to use standard elements where possible for each of these input requirements and to annotate keyboard interaction and expected behavior with assistive technologies when using non-standard elements. Assess how students annotate keyboard interactions and expected behavior with assistive technologies when using non-standard elements. +* Practical — Ask students to select the appropriate form elements based on a given set of input requirements. Ask students to use standard elements when possible for each of these input requirements and to annotate keyboard interaction and expected behavior with assistive technologies when using non-standard elements. Assess how students annotate keyboard interactions and expected behavior with assistive technologies when using non-standard elements. {% include excol.html type="end" %} @@ -189,7 +189,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Give students a form and ask them to define labels for each of the fields. Assess how students provide clear and descriptive names for each of the form fields. -* Practical — Give students a form with required and non-required fields and ask them to provide visual and non-visual instructions to communicate the required fields. Assess how students provide clear and understandable instructions for each required field. +* Practical — Give students a form with required and non-required fields and ask them to provide visual and non-visual instructions to communicate the required fields. Assess how students provide clear and understandable instructions for each required field. * Practical — Give students a form and ask them to provide the necessary instructions for users to understand each of the fields and fill in the form. Assess how students provide clear and concise instructions. {% include excol.html type="end" %} @@ -200,7 +200,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Show examples of common input errors and possible ways to correct them. Explain that users rely on clear indications of each of the fields in error and on suggestions for correction where possible. +Show examples of common input errors and suggestions for correcting them. Explain that users rely on clear indications of each of the fields in error and on suggestions for correction when possible. #### Learning Outcomes for Topic @@ -210,7 +210,7 @@ Students should be able to: * define error messages in the page title or before the form that: * identify the fields in error * describe the cause of the error - * provide suggestions to correct the error where possible + * provide suggestions to correct the error when possible * define methods to reverse, check, and confirm critical submissions, including legal, financial, and sensitive data #### Teaching Ideas for Topic @@ -219,7 +219,7 @@ Optional ideas to teach the learning outcomes: * Show examples of placement and appearance of error messages. Explain that some users rely on consistent placement and appearance of these messages to identify the errors. * Show examples of overall information about submission errors. Explain that this information makes users aware that their submission contains errors and help them search for specific error messages in the rest of the content. -* Show examples of specific messages that identify each of the fields in error. Explain that these messages help users identify and locate the specific fields that contain errors. Mention that it is best practice to keep the original submission where possible, so that users can understand what needs to be corrected. +* Show examples of specific messages that identify each of the fields in error. Explain that these messages help users identify and locate the specific fields that contain errors. Mention that it is best practice to keep the original submission when possible, so that users can understand what needs to be corrected. * Show examples of suggestions for correction. Explain that these suggestions help users understand what the right way is to submit the form. Emphasize that these suggestions should be provided when possible, unless they compromise the security and the purpose of the form. * Show examples of critical submissions, for example buying an airline ticket and submitting legal data. Discuss methods to reverse, check, and confirm the information included in such submissions. @@ -257,7 +257,7 @@ Students should be able to: * identify related requirements for developers to implement notifications #### Teaching Ideas for Topic - + Optional ideas to teach the learning outcomes: * Show examples of placement and appearance of notifications. Explain that these notifications need to be distinguishable both visually and non-visually. Explain that defining the notifications placement and appearance is responsibility of the designer, whereas implementing such notifications is a developer's responsibility. diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 754f759aa..dbdaed00d 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -107,7 +107,7 @@ Functional images convey functionality of a component. For example, search, prin Students should be able to: -* define text alternatives for functional images using the following methodss: +* define text alternatives for functional images using the following methods: * text alternatives for images * combinations of text alternatives of images and adjacent text inside components * adjacent text inside components to understand its function @@ -146,7 +146,7 @@ Explain that providing text alternatives for informative images is a responsibil Students should be able to: -* define text alternatives that present equivalent information as that contained in informative images using the following methodss: +* define text alternatives that present equivalent information as that contained in informative images using the following methods: * boilerplate descriptions that would then be completed and maintained through the development and authoring phases * adjacent textual information to complement images and icons, for example in a news headline * text alternatives that describe the information conveyed by images @@ -154,7 +154,7 @@ Students should be able to: * use styled text instead of images of text when the technology in use can provide the desired visual presentation * define alternatives to biometrics and CAPTCHA, for example by providing visual, auditory, and logical CAPTCHA * explain the issues associated with relying only on one form of biometrics and CAPTCHA, and describe alternative approaches for authentication -* evaluate the issues associated to accessing information contained in informative images and select other ways to convey the information where possible, including plain text +* evaluate the issues associated to accessing information contained in informative images and select other ways to convey the information when possible, including plain text * identify related requirements for developers to code alternative texts for informative images ### Teaching Ideas for Topic @@ -240,7 +240,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of images and graphics that do not convey function or information, such as ornamental icons. Explain that they serve ornamental purposes as long as people can understand and interact with the user interface with or without such icons. Explain that deciding what is the images' role is a designers' responsibility, whereas coding the images so that they render with the appropriate role is a developers' responsibility. -* Invite students to research how uveruse of decorative images can impact some users. For example, too many decorative images can create distractions and cognitive overload, as well as slow down loading times. +* Invite students to research how overuse of decorative images can impact some users. For example, too many decorative images can create distractions and cognitive overload, as well as slow down loading times. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 36aedd191..6bcab272e 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -128,11 +128,11 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of pages and explain how they are divided into several regions. Explain that, in addition to visually distinguishing these regions, semantics and text need to be added so that all users can understand the relationship between them. Explain that defining and planning the different regions is a designers' responsibility, whereas adding the semantics is a responsibility shared with the developer. +* Show examples of pages and explain how they are divided into several regions. Explain that, in addition to visually distinguishing these regions, semantics and text need to be added so that all users can understand the relationship between them. Explain that defining and planning the different regions is a designers' responsibility, whereas adding the semantics is a responsibility shared with the developer. * Show examples of online articles and forms. Discuss how these are divided into manageable pieces so that they are easier to understand and to navigate. For example, by using headings with their corresponding rank levels to indicate the different chapters, sections, and subsections of content. -* Show examples of diagrams and illustrations that can complement the information presented in text. For example, visual instructions that supplement the textual information of a user manual. Explain that they help users with reading disabilities to understand difficult pieces of text. Explain that defining the presentation of such diagrams and illustrations is a responsibility of the designer, whereas providing the diagrams and illustrations is a responsibility of the content author. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). -* Show examples of words that may be difficult to understand or that are used in a restricted way. Explain that people who are not familiar with such words need definitions to understand their meaning. Explain that defining the methods to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. -* Show examples of abbreviations, such as short forms of words and acronyms. Explain that people who are not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the methods to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. +* Show examples of diagrams and illustrations that can complement the information presented in text. For example, visual instructions that supplement the textual information of a user manual. Explain that they help users with reading disabilities to understand difficult pieces of text. Explain that defining the presentation of such diagrams and illustrations is a responsibility of the designer, whereas providing the diagrams and illustrations is a responsibility of the content author. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). +* Show examples of words that may be difficult to understand or that are used in a restricted way. Explain that people who are not familiar with such words need definitions to understand their meaning. Explain that defining the methods to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. +* Show examples of abbreviations, such as short forms of words and acronyms. Explain that people who are not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the methods to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. #### Ideas to Assess Knowledge for Topic @@ -175,7 +175,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Students group related information in a form that collects personal information, payment methods, and consent to legal conditions. Assess how students build groups of related information, and how students provide ways for users to identify each of the groups. -* Practical — Give students a long list of items and ask them to define ways to split the list into smaller subsets. Assess how students use different strategies to group long sets of data into smaller subsets. +* Practical — Give students a long list of items and ask them to define ways to split the list into smaller subsets. Assess how students use different strategies to group long sets of data into smaller subsets. {% include excol.html type="end" %} @@ -215,7 +215,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Give students a table and ask them to define the table's header cells and data cells. Assess how students understand the difference between header cells and data cells. +* Practical — Give students a table and ask them to define the table's header cells and data cells. Assess how students understand the difference between header cells and data cells. * Practical — Give students a set of tables and ask them to provide clear styles to distinguish data cells from header cells. Assess how students provide clear and distinguishable styles for header cells and data cells. * Practical — Give students a complex table and ask them to split the information using simpler tables, lists, and graphical representations where appropriate. Assess how students provide alternative ways to present tabular information. diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index dad712730..b18c1f1c6 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -28,7 +28,7 @@ navigation: Courses based on this module should: -* demonstrate strategies that people with disabilities use to interact with links, buttons, controls, as wellas complex widgets, including sliders, tabs, dialogs, application menus, tree views, and notifications +* demonstrate strategies that people with disabilities use to interact with links, buttons, controls, as well as complex widgets, including sliders, tabs, dialogs, application menus, tree views, and notifications * explain accessibility requirements related to input methods, including mouse, keyboard, touch, and voice ## Learning Outcomes for Module @@ -121,8 +121,7 @@ Topics to achieve the learning outcomes: Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain how keyboard support benefits other ways of interacting, including voice interaction and interaction using some assistive technologies. -Present examples of specific non-standard shortcuts. Explain that providing custom keyboard interactions can support efficiency but can also disrupt the users' expectations. Thus, designers need to document these custom interactions and make them consistent throughout the interface. -Emphasize that defining the keyboard interactions is a designers' responsibility, whereas implementing such interactions is a responsibility shared with the developer. +Present examples of specific non-standard shortcuts. Explain that providing custom keyboard interactions can support efficiency but can also disrupt the users' expectations. Designers need to document these custom interactions and make them consistent throughout the interface. Emphasize that defining the keyboard interactions is a designers' responsibility, whereas implementing such interactions is a responsibility shared with the developer. #### Learning Outcomes for Topic @@ -142,18 +141,18 @@ Students should be able to: * cooperate with developers to provide methods to remap or disable conflicting shortcuts * define methods to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications * define consistent placement and appearance of focus indicators - * cooperate with developers to programmaticly set focus in complex widgets, including sliders, tabs, dialogs, application menus, tree views, and notifications + * cooperate with developers to programmatically set focus in complex widgets, including sliders, tabs, dialogs, application menus, tree views, and notifications * identify related requirements for developers to implement keyboard support for components that have no keyboard support by default #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Invite students to try standard keyboard conventions. For example, use of the tab to move through user interface components, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that these interactions need to be preserved as much as possible when designing custom widgets, as these are mostly expected by users. -* Invite students to research keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers need to work closely with other team members, including developers and user researchers, on strategies to define custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and working with developers to implement such keystrokes. +* Invite students to try standard keyboard conventions. For example, use of the tab to move through user interface components, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that standard interactions need to be preserved as much as possible when designing custom widgets, as users mostly expect these. +* Invite students to research keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers need to cooperate with other team members, including developers and user researchers, on strategies to define custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and collaborating with developers to implement such keystrokes. * Present examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. * Invite students to research how assistive technologies and adaptive strategies rely on keyboard support to provide specific functionality, such as navigating sequentially using voice commands. Demonstrate interaction with assistive technologies in web pages and applications with and without keyboard support. -* Refer back to [Designer Module 1: Visual Design, Topic Orientation Cues](/curricula/designer-modules/visual-design/#topic-orientation-cues) to reflect on focus indicators. Explain that, in addition to visually distinguishable focus indicators, programmatic keyboard focus needs to be considered when providing keyboard support. Emphasize that designers need to work closely with other team members, including developers and user researchers, to design user experiences that consider focus placement depending on changes of context and user interaction. +* Refer back to [Designer Module 1: Visual Design, Topic Orientation Cues](/curricula/designer-modules/visual-design/#topic-orientation-cues) to reflect on focus indicators. Explain that, in addition to visually distinguishable focus indicators, programmatic keyboard focus needs to be considered when providing keyboard support. Emphasize that designers need to cooperate with other team members, including developers and user researchers, to design user experiences that consider focus placement depending on changes of context and user interaction. * Show examples of help functionality for custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using those shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these help methods is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic @@ -162,7 +161,7 @@ Optional ideas to assess knowledge: * Short Answer Questions — Ask students about commonly used modifier keys of operating systems, browsers, and assistive technologies. Assess how students identify commonly used modifier keys in operating systems, browsers, and assistive technologies. * Practical — Give students an interface that only works with the mouse and ask them to define keyboard interaction patterns. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. -* Practical — Students work with developers to avoid custom keyboard shortcut conflicts with existing operating system and assistive technology keystrokes. Assess how students work with developers to develop strategies that avoid custom keyboard shortcut conflicts. +* Practical — Students cooperate with developers to avoid custom keyboard shortcut conflicts with existing operating system and assistive technology keystrokes. Assess how students cooperate with developers to develop strategies that avoid custom keyboard shortcut conflicts. * Practical — Give students a custom widget and ask them to define appropriate focus placement and appearance depending on changes in context and user interaction. Assess how students create user experiences that consider visual focus indicators and focus placement. {% include excol.html type="end" %} @@ -193,7 +192,7 @@ Optional ideas to teach the learning outcomes: * Show examples of interactions based on swipe and pinch gestures. Explain that users with mobility impairments may have difficulty to perform such gestures, so interfaces need to have alternatives that do not require swiping or pinching to perform an action. * Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments may have difficulty to perform such gestures, so interfaces need to have alternatives that do not require motion for these gestures. -* Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events, so interfaces need to support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. +* Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events, so interfaces need to support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. * Refer back to [Designer Module 1: Visual Design, Topic Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts). Explain that larger target sizes for pointer are recommended where possible. The minimum recommended size is 44 by 44 CSS pixels. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index d0cf34487..4d0ed4068 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -126,7 +126,7 @@ Students should be able to * design user experiences of alternatives for multimedia content, including: * placement of the alternatives * methods to turn on and off the alternatives -* evaluate the need for designing custom media players and select existing media players with support for accessibility where possible +* evaluate the need for designing custom media players and select existing media players with support for accessibility when possible * describe characteristics of accessible media player controls, including: * keyboard support * visible keyboard focus indicators @@ -158,7 +158,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Show moving content, such as carousels and animations. Present methods to avoid distractions, seizures and physical reactions, and unpredictable keyboard focus management caused by moving content. For example, support for pausing, stopping, or hiding moving content, as well as using flashing that is below the accepted ratios where possible. +Show moving content, such as carousels and animations. Present methods to avoid distractions, seizures and physical reactions, and unpredictable keyboard focus management caused by moving content. For example, support for pausing, stopping, or hiding moving content, as well as using flashing that is below the accepted ratios when possible. #### Learning Outcomes for Topic diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 8d8ed07ca..f3c46c837 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -138,7 +138,7 @@ Optional ideas to teach the learning outcomes: * Present different types of navigation menus, such as static, fly-out, and mega menus. Explain conventions for accessible navigation menus, for example clear and consistent styling to convey menu behaviors and states. * Demonstrate interactions with navigation menu using different input devices, including keyboard, mouse, touch, and voice. For example, activating a menu option by tapping, pressing the Enter and Space keys, and mouse clicking. Explain that defining the interactions is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. * Show examples of navigation menus and menu items large text. Explain that the text needs to adapt to different viewports and screen configurations, for example wrap so that it is perceived in its entirety. Explain that different languages may have different word sizes, so designers need to consider provisions for different word lengths. -* Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Explain how to communicate the states of these menu items visually and non-visually. Explain that defining the visual presentation is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. +* Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Explain how to communicate the states of these menu items visually and non-visually. Explain that defining the visual presentation is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. #### Ideas to Assess Knowledge for Topic @@ -188,7 +188,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to teach the learning outcomes: -* Practical — Give students a website and ask them to provide multiple ways to navigate across the website. Assess how students identify and design the different user experiences for site navigation, including search functionalities, breadcrumb trails, and site maps. +* Practical — Give students a website and ask them to provide multiple ways to navigate across the website. Assess how students identify and design the different user experiences for site navigation, including search functionalities, breadcrumb trails, and site maps. * Practical — Give students a website and ask them to provide descriptive titles that identify each of the pages. Assess how students provide clear and descriptive page titles. * Practical — Give students an interface with excessive use of navigational components and ask them to determine which of these navigational components should stay and which should be removed. Assess how students balance the use of navigational components to avoid distraction and unnecessary noise. @@ -228,7 +228,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Students define the blocks of repeated content in a website and cooperate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they work with developers to provide a method to bypass such blocks. +* Practical — Students define the blocks of repeated content in a website and cooperate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they cooperate with developers to provide a method to bypass such blocks. * Practical — Give students a document and ask them to provide the table of contents. Assess how students provide table of contents for documents. {% include excol.html type="end" %} @@ -239,7 +239,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Short Answer Questions — Ask students to recite the different types of navigational methods that exist and provide examples for each. Assess how students understand and communicate them different types of navigational methods for websites, documents, and applications. +* Short Answer Questions — Ask students to recite the different types of navigational methods that exist and provide examples for each. Assess how students understand and communicate theose different types of navigational methods for websites, documents, and applications. * Portfolio — Students design the navigation menu and other navigational components for a website. Assess how students understand accessibility features of navigation across websites and applications. ## Teaching Resources diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 39f0102d4..86f89735c 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -230,7 +230,7 @@ Students should be able to: * design layouts to support text resizing without loss of content and functionality * design layouts to support text zooming and enlarging in different viewport sizes and through multiple breakpoints * design layouts that adapt their content view and operation to portrait and landscape orientations -* design layouts with target sizes that adapt to different screen sizes, screen configurations, and style sheets, for example when creating responsive designs +* design layouts with target sizes that adapt to different screen sizes, screen configurations, and style sheets, for example when creating responsive designs * design layouts to support user customization of line height, as well as spacing between paragraphs, words, and letters * define meaningful focus orders that adapt to different viewports, screen sizes, and multiple breakpoints * evaluate the use of too many design elements, in particular interactive widgets, images, and moving content) on a page, and select elements that avoid potential distraction and cognitive overload @@ -239,11 +239,11 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Discuss with students the differences between web sites and applications that preserve content and functionality when resized up to 200% and those which do not. Explain that some people often need to resize text to read it properly. For references on how to ensure text resizes up to 200%, see technique [G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width](https://www.w3.org/WAI/WCAG21/Techniques/general/G179). +* Discuss with students the differences between web sites and applications that preserve content and functionality when resized up to 200% and those which do not. Explain that some people often need to resize text to read it properly. For references on how to ensure text resizes up to 200%, see technique [G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width](https://www.w3.org/WAI/WCAG21/Techniques/general/G179). * Discuss the use of multiple screen sizes, screen configurations, and style sheets by people with low vision. Explain that these configurations often go beyond the traditional mobile, tablet, and desktop breakpoints. * Show examples of user interfaces showing up in both portrait and landscape modes. Explain that the ability to show an interface both in portrait and landscape is essential for people who cannot change their device orientation due to mobility impairments. * Show examples of different user interfaces that support customizing line height as well as spacing between paragraphs, words, and letters to support readability. -* Show examples of different target sizes and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain thattarget sizes need to be large enough to accommodate different people's needs. +* Show examples of different target sizes and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that target sizes need to be large enough to accommodate different people's needs. #### Ideas to Assess Knowledge for Topic From e466e48a07e1388e100e033dc5fa675d2dc4409e Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 17 Nov 2021 15:57:04 +0100 Subject: [PATCH 312/416] Removed references to draft foundation module 6 --- content/designer/information-design.md | 2 +- content/designer/navigation-design.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 6bcab272e..6ac81537a 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -185,7 +185,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Build on [Foundation Module 6: Understanding and Involving Users](/curricula/foundation-modules/understanding-and-involving-users/). Research strategies that people with disabilities use to interact with information presented in tables. For example, using textual descriptions, graphical representations of the table content, as well as several simpler tables or individual lists to present the information in a complex table. +Research strategies that people with disabilities use to interact with information presented in tables. For example, using textual descriptions, graphical representations of the table content, as well as several simpler tables or individual lists to present the information in a complex table. #### Learning Outcomes for Topic diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index f3c46c837..d217fb023 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -157,7 +157,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Build on [Foundation Module 6: Understanding and Involving Users](/curricula/foundation-modules/understanding-and-involving-users/). Discuss strategies that people use to navigate to different pages of the same site, including menus, breadcrumb trails, search functionalities, and site maps. Explain that different groups of users rely on different navigational components. Discuss how to assess and balance which ones to use to favor various user experiences while avoiding potential distractions and unnecessary noise. +Discuss strategies that people use to navigate to different pages of the same site, including menus, breadcrumb trails, search functionalities, and site maps. Explain that different groups of users rely on different navigational components. Discuss how to assess and balance which ones to use to favor various user experiences while avoiding potential distractions and unnecessary noise. #### Learning Outcomes for Module @@ -200,7 +200,7 @@ Optional ideas to teach the learning outcomes: {% include excol.html type="middle" %} -Build on [Foundation Module 6: Understanding and Involving Users](/curricula/foundation-modules/understanding-and-involving-users/). Discuss strategies that people use to navigate to different parts of a web page, including tables of contents and methods to bypass blocks of repeated content. Explain that different groups of users rely on different navigational components. Discuss how to assess and balance which ones to use to favor various user experiences while avoiding distractions and unnecessary noise. +Discuss strategies that people use to navigate to different parts of a web page, including tables of contents and methods to bypass blocks of repeated content. Explain that different groups of users rely on different navigational components. Discuss how to assess and balance which ones to use to favor various user experiences while avoiding distractions and unnecessary noise. ### Learning Outcomes for Topic From 583aad6d25c307df9a3ee0070c249715d081417d Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 18 Nov 2021 17:12:15 +0100 Subject: [PATCH 313/416] Copy edits --- content/designer/forms-design.md | 5 ++- content/designer/images-and-graphics.md | 15 ++++--- content/designer/information-design.md | 38 ++++++++--------- content/designer/interaction-design.md | 9 ++-- content/designer/multimedia-and-animations.md | 5 ++- content/designer/navigation-design.md | 41 ++++++++++--------- content/designer/visual-design.md | 34 +++++++-------- 7 files changed, 79 insertions(+), 68 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 0457d0608..80ac62a11 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -135,7 +135,8 @@ Students should be able to: * identify different uses and intended purposes of form elements * identify how using form elements with unintended purposes can cause compatibility issues and cognitive overload -* evaluate the use of standard versus non-standard form elements and select those which minimize extra work to make them accessible in the implementation phase +* evaluate the use of standard versus non-standard form elements +* select form elements that minimize extra work to make them accessible in the implementation phase * identify related requirements for developers to write code for form elements that programmatically identifies their intended purpose as well as their current state and value ### Teaching Ideas for Topic @@ -281,7 +282,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: * Short Answer Questions — Ask students when it is possible to provide suggestions for correction and when it is not. Assess how students identify scenarios where it is possible to provide suggestions for correction and scenarios where it is not. -* Portfolio — Students design a form. Assess how students consider placement, structure, labels, instructions, and notifications when designing accessible forms. +* Portfolio — Have students design a form. Assess how students consider placement, structure, labels, instructions, and notifications when designing accessible forms. ## Teaching Resources diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index dbdaed00d..672c8d59d 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -42,7 +42,8 @@ Students should be able to: * define consistent imagery to help users recognize the purpose of icons, thumbnails, and other graphical components * explain the issues associated with perception, interpretation, and rendering of images of text * explain how to avoid images of text by using technologies that achieve the desired visual presentation wherever possible -* evaluate the potential distraction and cognitive overload from using too many images and select alternative ways to provide the information, including tables and plain text +* evaluate the potential distraction and cognitive overload from using too many images +* select alternative ways to provide the information contained in images, including tables and plain text * identify related requirements for: * developers to code images and text alternatives appropriately * content authors to provide appropriate descriptions for images, including charts, diagrams, and other complex graphics @@ -154,7 +155,8 @@ Students should be able to: * use styled text instead of images of text when the technology in use can provide the desired visual presentation * define alternatives to biometrics and CAPTCHA, for example by providing visual, auditory, and logical CAPTCHA * explain the issues associated with relying only on one form of biometrics and CAPTCHA, and describe alternative approaches for authentication -* evaluate the issues associated to accessing information contained in informative images and select other ways to convey the information when possible, including plain text +* evaluate the issues associated to accessing information contained in informative images +* select other ways to convey the information contained in images when possible, including plain text * identify related requirements for developers to code alternative texts for informative images ### Teaching Ideas for Topic @@ -189,7 +191,8 @@ Explain that coordination among different team members is required to assess the Students should be able to: * apply appropriate color contrast for complex images -* evaluate the use of complex images and select other ways to present the information, for example using tables, simpler images, and plain text +* evaluate the use of complex images +* select other ways to present the information contained in complex images, for example using tables, simpler images, and plain text * determine if and how complex images are operated using input devices, including mouse, keyboard, touch, and voice * define the placement and spacing for alternatives to complex images * define clear and consistent identification methods for complex image descriptions, including appropriate headings and expandable and collapsible components @@ -212,8 +215,8 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Students add complex images to a website, such as charts or diagrams, and ensure they have the required color contrast. Assess how students understand the contrast requirements for complex images. -* Practical — Students cooperate with developers and content authors to implement a map in a way that everybody can understand its meaning and interact with it. Assess how students identify the need for text alternatives for complex images and cooperate with other team members to ensure such alternatives exist. +* Practical — Have students add complex images to a website, such as charts or diagrams, and ensure they have the required color contrast. Assess how students understand the contrast requirements for complex images. +* Practical — Have students cooperate with developers and content authors to implement a map in a way that everybody can understand its meaning and interact with it. Assess how students identify the need for text alternatives for complex images and cooperate with other team members to ensure such alternatives exist. {% include excol.html type="end" %} @@ -258,7 +261,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: * Short Answer Questions — Ask students which types of images require which color contrast ratios. Assess how students understand the different types of images and their color contrast requirements. -* Portfolio — Students design the imagery for a website. Assess how students include accessibility requirements in the images in graphics they design, for example color contrast, text alternatives that belong to the design phase, and placeholders for any other text alternative that is planned for later stages of the design and development process. +* Portfolio — Have students design the imagery for a website. Assess how students include accessibility requirements in the images in graphics they design, for example color contrast, text alternatives that belong to the design phase, and placeholders for any other text alternative that is planned for later stages of the design and development process. ## Teaching Resources diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 6ac81537a..8878fd73b 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -37,11 +37,11 @@ Courses based on this module should: Students should be able to: * explain how people with disabilities use several methods to obtain and process information, including text, labels, instructions, semantics, and imagery -* describe approaches to break down different types of content into smaller and more manageable pieces, for example using: +* describe approaches to define content in discrete and more manageable segments, for example using: * pages, landmarks, and headings * lists, simpler tables, and plain text * groups of form controls that share a common purpose -* define methods to communicate information in multi-step processes visually and non-visually +* define methods to communicate both visually and non-visually all relevant information about multi-step processes * describe how to communicate the structure of multi-page articles or processes visually and non-visually * describe how to provide information about the name and purpose of components using descriptive labels and instructions * discuss ways to break down information presented in tables, including use of simple tables, lists, imagery, and plain text @@ -104,7 +104,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Discuss ways to communicate the structure of pages and documents using text and semantics. For example, using pages to split the content into logical units, landmarks to define page regions, and headings with their corresponding rank levels to group related information. +Discuss ways to use text and semantic structure to communicate the organization of pages and documents. For example, using pages to split the content into logical units, landmarks to define page regions, and headings with their corresponding rank levels to group related information. Discuss the use of diagrams and illustrations to help users understand the information provided in text. @@ -112,14 +112,14 @@ Discuss the use of diagrams and illustrations to help users understand the infor Students should be able to: -* design textual content as manageable passages of text, for example by splitting larger blocks of text into smaller and more manageable pieces using: +* design textual content to be easily consumed, for example by splitting larger blocks of text into more manageable segments using: * pages * landmarks with their corresponding region type * headings (with their corresponding rank levels) * sidebars and other page regions -* define the presentation of diagrams and illustrations that make the information easier to understand; for example, a diagram representation of the process described in the text -* define methods to identify specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon -* define methods to identify the expanded form or meaning of acronyms and abbreviations +* define the presentation of diagrams and illustrations to make textual information easier to understand; for example, a diagram representation of the process described in the text +* select methods to provide specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon +* select methods to provide the expanded form or meaning of acronyms and abbreviations * identify related requirements for: * developers to code the regions, headings, and language of pages and parts * content authors to provide clear language and easy-to-read texts whenever possible @@ -128,19 +128,19 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of pages and explain how they are divided into several regions. Explain that, in addition to visually distinguishing these regions, semantics and text need to be added so that all users can understand the relationship between them. Explain that defining and planning the different regions is a designers' responsibility, whereas adding the semantics is a responsibility shared with the developer. +* Show examples of pages and explain how they are divided into several regions. Demonstrate that, in addition to visually distinguishing these regions, semantics and text are needed to ensure that all users can understand the relations between them. Explain that defining and planning the different regions is a designers' responsibility, whereas adding the semantics is a responsibility shared with the developer. * Show examples of online articles and forms. Discuss how these are divided into manageable pieces so that they are easier to understand and to navigate. For example, by using headings with their corresponding rank levels to indicate the different chapters, sections, and subsections of content. * Show examples of diagrams and illustrations that can complement the information presented in text. For example, visual instructions that supplement the textual information of a user manual. Explain that they help users with reading disabilities to understand difficult pieces of text. Explain that defining the presentation of such diagrams and illustrations is a responsibility of the designer, whereas providing the diagrams and illustrations is a responsibility of the content author. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). -* Show examples of words that may be difficult to understand or that are used in a restricted way. Explain that people who are not familiar with such words need definitions to understand their meaning. Explain that defining the methods to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. -* Show examples of abbreviations, such as short forms of words and acronyms. Explain that people who are not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand their meaning. Explain that defining the methods to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. +* Show examples of words that may be difficult to understand or that are used in a specialized way. Explain that people who are not familiar with such words need definitions to understand their meaning. Explain that defining the methods to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. +* Show examples of abbreviations, such as short forms of words and acronyms. Explain that people who are not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand them. Explain that specifying the methods to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Give students an eBook and ask them to define how it should be split into smaller and more manageable pieces so that it can be easier to navigate and understand. Assess how students use pages, landmarks, and headings with their corresponding rank levels to split large amounts of text into smaller and more manageable pieces. -* Practical — Give students a complex piece of text and ask them to define the presentations of diagrams and illustrations that complement the text. Assess how students define the presentations of diagrams and illustrations to complement processes and instructions presented in text. -* Practical — Give students unusual words and abbreviations and ask them to define methods to provide the explanation of such words or the expansion of the abbreviations. Assess how students define methods to provide explanations of unusual words and expansions of abbreviations. +* Practical — Give students an eBook. Ask them to propose how it might be split into smaller and more manageable pieces to more easily navigate and understand. Assess how students use pages, landmarks, and headings with their corresponding rank levels to split large amounts of text into smaller and more manageable pieces. +* Practical — Give students a complex piece of text. Ask them to define the presentations of diagrams and illustrations that complement the text. Assess how students define the presentations of diagrams and illustrations to complement processes and instructions presented in text. +* Practical — Give students unusual words and abbreviations. Ask them to propose methods to explain such words or expand the abbreviations. Assess how students define methods to provide explanations of unusual words and expansions of abbreviations. {% include excol.html type="end" %} @@ -165,16 +165,16 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of names for components, including links, buttons, and form controls. Explain that these names help users identify these components. Explain that defining the presentation of these names is a designers' responsibility, implementing these names is a developers' responsibility, and defining these names is a responsibility shared with the content author. -* Show examples of overall instructions, for example indications of what will happen after pressing a button. Explain that these instructions help users better understand the purpose and functionality of components. Explain that defining the presentation of these instructions is a designer's responsibility, implementing these instructions is a developer's responsibility, and defining these instructions is a responsibility shared with the content author. +* Show examples of names for components, including links, buttons, and form controls. Explain that these names help users identify these components. Explain that defining the presentation of these names is a designers' responsibility, implementing these names is a developers' responsibility, and defining names is a responsibility shared with the content author. +* Show examples of overall instructions, for example indications of what will happen after pressing a button. Explain that these instructions help users better understand the purpose and functionality of components. Explain that instruction presentation is a designer's responsibility, implementing these instructions is a developer's responsibility, and defining the content of these instructions is a responsibility shared with the content author. * Show examples of multi-step processes, such as a multi-step form, with instructions to indicate the current step and total number of steps in the process. Then show examples of multi-step processes without such instructions. Compare the user experiences for each of the examples. Explain that people rely on such instructions to get an understanding of where they are in the process and how many steps the process has. Explain that defining the presentation of such instructions is a designers' responsibility, implementing these instructions is a developers' responsibility, and providing these instructions is a responsibility shared with the content author. -* Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to understand and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and programmatically, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look like is a designers' responsibility, whereas coding those relations is a developers' responsibility. +* Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to understand and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and programmatically, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look is a designers' responsibility, whereas coding those relations is a developers' responsibility. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Students group related information in a form that collects personal information, payment methods, and consent to legal conditions. Assess how students build groups of related information, and how students provide ways for users to identify each of the groups. +* Practical — Have students group related information in a form that collects personal information, payment methods, and consent to legal conditions. Assess how students build groups of related information, and how students provide ways for users to identify each of the groups. * Practical — Give students a long list of items and ask them to define ways to split the list into smaller subsets. Assess how students use different strategies to group long sets of data into smaller subsets. {% include excol.html type="end" %} @@ -209,7 +209,7 @@ Optional ideas to teach the learning outcomes: * Show examples of different types of information presented in tables. Explain that tables are used when there is a logical, tabular relationship between the information presented, for example when displaying a list of events with their date and venue. * Refer back to [Designer Module 1: Visual Design, Topic: Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts) and explain that some users may require different ways of presenting tabular information. For example, providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. -* Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells needs to be perceived both visually and programmatically. Explain that providing the styles is a designers' responsibility, whereas establishing the programmatic relation is a responsibility shared with the developer. +* Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells must be perceived both visually and programmatically. Explain that providing the styles is a designers' responsibility, whereas establishing the programmatic relation is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic @@ -228,7 +228,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: * Short Answer Questions — Ask students about the different approaches they can use to communicate the structure in web pages and documents. Assess how students recognize structures such as pages, headings, and landmarks. -* Portfolio — Students organize different pieces of information on a website, including text, forms, and images. Assess how students provide methods for users to identify different pieces of information, how students split large amounts of information into smaller and more manageable pieces, and how students group related information together. +* Portfolio — Have students organize different pieces of information on a website, including text, forms, and images. Assess how students provide methods for users to identify different pieces of information, how students split large amounts of information into smaller and more manageable pieces, and how students group related information together. ## Teaching Resources diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index b18c1f1c6..027a65001 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -37,7 +37,7 @@ Students should be able to: * explain strategies that people with disabilities use to interact with links, buttons, controls, and complex widgets, including sliders, tabs, dialogs, application menus, tree views, and notifications * design user experiences for different input methods, including mouse, touch, keyboard, and voice -* define interactions and meaningful sequences inside complex widgets, including sliders, tabs, dialogs, application menus, tree views, and notifications +* design interactions and meaningful sequences inside complex widgets, including sliders, tabs, dialogs, application menus, tree views, and notifications * evaluate the use of custom keyboard shortcuts for complex widgets and applications and provide information about their purpose and scope * define methods to disable device and user motion to prevent accidental actuation * define alternatives for complex gestures, including swiping, pinching, and drawing shapes @@ -137,7 +137,8 @@ Students should be able to: * first letter navigation to jump to specific pieces of data in lists and grids * identify situations when it is necessary to provide additional keyboard shortcuts, for example when designing a custom functionality that is not keyboard supported by default * explain how keyboard support benefits other ways of interacting, including voice interaction and interaction using assistive technologies -* evaluate the use of custom keyboard interactions and select keyboard interactions that avoid conflicts with the operating system, browser, and assistive technologies when possible +* evaluate the use of custom keyboard interactions +* select keyboard interactions that avoid conflicts with the operating system, browser, and assistive technologies when possible * cooperate with developers to provide methods to remap or disable conflicting shortcuts * define methods to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications * define consistent placement and appearance of focus indicators @@ -161,7 +162,7 @@ Optional ideas to assess knowledge: * Short Answer Questions — Ask students about commonly used modifier keys of operating systems, browsers, and assistive technologies. Assess how students identify commonly used modifier keys in operating systems, browsers, and assistive technologies. * Practical — Give students an interface that only works with the mouse and ask them to define keyboard interaction patterns. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. -* Practical — Students cooperate with developers to avoid custom keyboard shortcut conflicts with existing operating system and assistive technology keystrokes. Assess how students cooperate with developers to develop strategies that avoid custom keyboard shortcut conflicts. +* Practical — Have students cooperate with developers to avoid custom keyboard shortcut conflicts with existing operating system and assistive technology keystrokes. Assess how students cooperate with developers to develop strategies that avoid custom keyboard shortcut conflicts. * Practical — Give students a custom widget and ask them to define appropriate focus placement and appearance depending on changes in context and user interaction. Assess how students create user experiences that consider visual focus indicators and focus placement. {% include excol.html type="end" %} @@ -212,7 +213,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: * Practical &mdash: Give students a web application, such as a web email client, and ask them to provide the necessary custom keyboard shortcuts. Assess how students balance the use of standard versus custom keyboard shortcuts. -* Portfolio — Students design the interactions for a given interface, including mouse, keyboard, touch, and voice. Assess how students design user experiences for different input methods, including mouse, touch, keyboard, and voice. +* Portfolio — Have students design the interactions for a given interface, including mouse, keyboard, touch, and voice. Assess how students design user experiences for different input methods, including mouse, touch, keyboard, and voice. ## Teaching Resources diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 4d0ed4068..8d93d22f3 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -126,7 +126,8 @@ Students should be able to * design user experiences of alternatives for multimedia content, including: * placement of the alternatives * methods to turn on and off the alternatives -* evaluate the need for designing custom media players and select existing media players with support for accessibility when possible +* evaluate the need for designing custom media players +* select existing media players with support for accessibility when possible * describe characteristics of accessible media player controls, including: * keyboard support * visible keyboard focus indicators @@ -203,7 +204,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Portfolio — Students include accessible video and audio content on a website. Assess how students understand the accessibility requirements of video and audio content, including description, captions, transcripts, and sign language. +* Portfolio — Have students include accessible video and audio content on a website. Assess how students understand the accessibility requirements of video and audio content, including description, captions, transcripts, and sign language. ## Teaching Resources diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index d217fb023..cd17a920a 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -38,13 +38,14 @@ Students should be able to: * explain strategies that people with disabilities use to navigate websites and applications * design different navigational components, including menus, tables of contents, and search functionalities -* define different interactions for navigational components, including by keyboard, mouse, touch, and voice +* describe different interactions for navigational components, including by keyboard, mouse, touch, and voice * define clear and consistent visual and non-visual: * presentation of menus and menu items * indication of state changes for menu items * define blocks of repeated content * define site maps and descriptive page titles to help users locate specific web pages within websites -* evaluate the use of navigational components, including menus, tables of contents, and site maps, and select navigational components that avoid potential distraction and unnecessary noise +* evaluate the use of navigational components, including menus, tables of contents, and site maps +* select navigational components that minimize distraction and unnecessary noise * identify related requirements for developers to implement: * interactions for navigational components, including by keyboard, mouse, touch, and voice * clear and descriptive names for navigational components @@ -110,7 +111,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Show different types of navigation menus, for example static, fly-out, and mega menus. Explain the different scenarios where each of them can be used. For references on the different types of menus and their uses, see the WAI tutorials on [Menus](https://www.w3.org/WAI/tutorials/menus/). +Explore different types of navigation menus, for example static, fly-out, and mega menus. Explain the different scenarios where each of them can be used. For references on the different types of menus and their uses, see the WAI tutorials on [Menus](https://www.w3.org/WAI/tutorials/menus/). Explain styling conventions for menus, such as expected location, appropriate size, and ability for menus and menu items to resize depending on different user configurations. For references on how to apply accessible menu styles, see the WAI tutorial on [Menu Styling](https://www.w3.org/WAI/tutorials/menus/styling/). @@ -124,7 +125,7 @@ Students should be able to: * visual and non-visual indications about the current page in the navigation menu * define interactions inside navigation menus, including mouse, keyboard, touch, and voice * design navigation menus that adapt to different text sizes, screen magnifications, and screen sizes and resolutions -* define distinguishable and consistent styles for menu items in their different states, for example in fly-out menus +* apply distinguishable and consistent styles for menu items in their different states, for example in fly-out menus * identify related requirements for developers to implement: * non-visual identification and naming of menus * semantics for different menu states and properties, such as hover, focus, current, active, and visited @@ -136,18 +137,18 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Present different types of navigation menus, such as static, fly-out, and mega menus. Explain conventions for accessible navigation menus, for example clear and consistent styling to convey menu behaviors and states. -* Demonstrate interactions with navigation menu using different input devices, including keyboard, mouse, touch, and voice. For example, activating a menu option by tapping, pressing the Enter and Space keys, and mouse clicking. Explain that defining the interactions is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. -* Show examples of navigation menus and menu items large text. Explain that the text needs to adapt to different viewports and screen configurations, for example wrap so that it is perceived in its entirety. Explain that different languages may have different word sizes, so designers need to consider provisions for different word lengths. +* Demonstrate interactions with navigation menus using different input devices, including keyboard, mouse, touch, and voice. For example, activating a menu option by tapping, pressing the Enter and Space keys, and mouse clicking. Explain that defining the interactions is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. +* Show examples of navigation menus and menu items large text. Explain that the text needs to adapt to different viewports and screen configurations, for example lines of text must wrap to avoid horizontal scrolling. Explain that different languages may have different word sizes, so designers must consider provisions for different word lengths. * Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Explain how to communicate the states of these menu items visually and non-visually. Explain that defining the visual presentation is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Students define mouse, keyboard, touch, and voice interactions for navigation menus. For example, how to open, navigate, activate, and close such menus using the mouse, keyboard, touch, and voice. Assess how students understand the need for different interaction patterns based on the input method in use. +* Practical — Have students define mouse, keyboard, touch, and voice interactions for navigation menus. For example, how to open, navigate, activate, and close such menus using the mouse, keyboard, touch, and voice. Assess how students understand the need for different interaction patterns based on the input method in use. * Practical — Give students different navigation menu states, such as hover, focus, current, active, and visited, and ask them to provide visual and non-visual methods to distinguish them from one another. Assess how students communicate navigation menus and menu items states visually and non-visually. * Practical — Give students a navigation menu and ask them to provide visual and non-visual indications about the currently selected item. Assess how students provide appropriate indications about the page location with respect to the entire website. -* Practical — Give students navigation menus containing long strings of text and ask them to ensure the text is shown irrespective of the viewport and screen configuration used. Assess how students understand the diversity among different languages, viewports, and screen configurations. +* Practical — Give students navigation menus containing long strings of text. Ask them to ensure the text is displayed irrespective of the viewport and screen configuration used. Assess how students understand the diversity among different languages, viewports, and screen configurations. {% include excol.html type="end" %} @@ -163,7 +164,7 @@ Discuss strategies that people use to navigate to different pages of the same si Students should be able to: -* define navigational components to help navigate to different pages of the same site, including: +* select navigational components to help navigate to different pages of the same site, including: * navigational menus to provide the overall site structure * breadcrumb trails to communicate the current location within the site * site maps to provide an overview of the entire website @@ -171,15 +172,16 @@ Students should be able to: * design methods for users to locate specific web pages within websites, for example: * descriptive page titles * text and visual indications about the current page in the navigation menu -* evaluate the amount of site navigational components in use, and select components that help users navigate and orient +* evaluate the amount of site navigational components in use +* select components that help users navigate and orient * identify related requirements for developers to apply semantics to page titles, headings, as well as visual and non-visual indications in navigation menus #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of breadcrumb trails. Explain that they provide information about the user's location in the context of a whole website. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail](https://www.w3.org/WAI/WCAG21/Techniques/general/G65). -* Show examples of site maps and explain that they provide an overview of the whole site. Explain that some users rely on site maps to better understand the structure of the site and to find its way more easily through it. For references on how to provide a site map, see [G63: Providing a site map](https://www.w3.org/WAI/WCAG21/Techniques/general/G63.html). +* Show examples of breadcrumb trails. Explain that they provide information about the user's location in the context of a whole website. Emphasize that they are useful especially in cases where the navigation contains several nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail](https://www.w3.org/WAI/WCAG21/Techniques/general/G65). +* Show examples of site maps and explain that they provide an overview of the whole site. Explain that some users rely on site maps to better understand the structure of the site and to find their way more easily through it. For references on how to provide a site map, see [G63: Providing a site map](https://www.w3.org/WAI/WCAG21/Techniques/general/G63.html). * Show examples of search functionalities. Explain that they help users find content by supporting navigation to different parts of the site. Emphasize that some users prefer this way of navigating, especially when they are already familiar with the site and know what they are looking for. For references on how to provide a search functionality, see technique [G161: Providing a search function to help users find content](https://www.w3.org/WAI/WCAG21/Techniques/general/G161). * Invite students to research different ways to present information in page titles. Reflect with them on how well the titles describe the page contents. Explain that page titles are useful to identify the purpose of a specific web page within a website. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page. Some browsers and assistive technologies may truncate the titles or not show them at all. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). * Show examples of visual and non-visual indications in menus about the current page with respect to the website. @@ -190,7 +192,7 @@ Optional ideas to teach the learning outcomes: * Practical — Give students a website and ask them to provide multiple ways to navigate across the website. Assess how students identify and design the different user experiences for site navigation, including search functionalities, breadcrumb trails, and site maps. * Practical — Give students a website and ask them to provide descriptive titles that identify each of the pages. Assess how students provide clear and descriptive page titles. -* Practical — Give students an interface with excessive use of navigational components and ask them to determine which of these navigational components should stay and which should be removed. Assess how students balance the use of navigational components to avoid distraction and unnecessary noise. +* Practical — Give students an interface with excessive use of navigational components and ask them to determine which of these navigational components are necessary and which should be removed. Assess how students balance the use of navigational components to avoid distraction and unnecessary noise. {% include excol.html type="end" %} @@ -206,13 +208,14 @@ Discuss strategies that people use to navigate to different parts of a web page, Students should be able to: -* define methods to identify blocks of repeated content, such as navigation bars and header contents -* define methods to skip blocks of repeated content using the following approaches: +* select methods to identify blocks of repeated content, such as navigation bars and header contents +* select methods to skip blocks of repeated content using the following approaches: * a link at the top of each page that goes directly to the main content area * a link at the beginning of a block of repeated content to go to the end of the block * tables of contents at the top of the page that go to each area of the content * expandable and collapsible contents to make it easier for users to skip over them -* evaluate the amount of page navigational components in use, and select components that help users navigate and orient +* evaluate the amount of page navigational components in use +* select components that help users navigate and orient #### Teaching Ideas for Topic @@ -228,7 +231,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Students define the blocks of repeated content in a website and cooperate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they cooperate with developers to provide a method to bypass such blocks. +* Practical — Have students define the blocks of repeated content in a website and cooperate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they cooperate with developers to provide a method to bypass such blocks. * Practical — Give students a document and ask them to provide the table of contents. Assess how students provide table of contents for documents. {% include excol.html type="end" %} @@ -239,8 +242,8 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Short Answer Questions — Ask students to recite the different types of navigational methods that exist and provide examples for each. Assess how students understand and communicate theose different types of navigational methods for websites, documents, and applications. -* Portfolio — Students design the navigation menu and other navigational components for a website. Assess how students understand accessibility features of navigation across websites and applications. +* Short Answer Questions — Ask students to recite the different types of navigational methods that exist and provide examples for each. Assess how students understand and communicate those different types of navigational methods for websites, documents, and applications. +* Portfolio — Have students design the navigation menu and other navigational components for a website. Assess how students understand accessibility features of navigation across websites and applications. ## Teaching Resources diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 86f89735c..fc4be96aa 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -38,13 +38,14 @@ Students should be able to: * explain how people with disabilities rely on designs that adapt to different colors, layouts, spacing, and positions * design layouts with sufficient color contrast for text, images of text, and controls -* design clear and distinguishable focus indicators, for example using borders, color, and highlighting +* design clear and distinguishable focus indicators, for example by using borders, color, and highlighting * use headings, spacing, and styling to group related content * use visual and non-visual cues to convey information, including text, color, patterns, and icons * design layouts that adapt to: * different font sizes and spacing set by the user in browser and operating system settings * different screen sizes, screen configurations, and user style sheets -* evaluate the use of too many design elements and select elements that avoid potential distraction and cognitive overload +* evaluate the overuse of design elements +* select design elements that minimize distraction and cognitive overload * identify related requirements for developers to apply the necessary semantics to interface components {% include excol.html type="all" %} @@ -122,7 +123,7 @@ Students should be able to: * design large-scale text and images of text that have a color contrast of at least 3:1 with respect to their background * design components and graphics that have a color contrast of at least 3:1 with respect to their background * define layouts to enable users to change colors based on customized screen sizes, screen configurations, and style sheets -* use visual cues in addition to text color, for example using different patterns, shapes, and icons +* use visual cues in addition to text color, for example by using different patterns, shapes, and icons * use text to complement information provided visually #### Teaching Ideas for Topic @@ -138,8 +139,8 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Short Answer Questions — Give students several components and ask them what the color contrast should be. Assess how students understand and distinguish sufficient color contrast for different components. -* Practical — Students design a prototype and apply sufficient color contrast to text, images of text, components, and graphics. Assess how students understand and apply sufficient color contrast based on the different components that they are designing. -* Practical — Discuss examples of information presented using color with students and ask them to supplement that information using other visual cues. Assess how students use shapes and icons to supplement information presented using color distinguishable. +* Practical — Have students design a prototype and apply sufficient color contrast to text, images of text, components, and graphics. Assess how students understand and apply sufficient color contrast based on the different components that they are designing. +* Practical — Discuss examples of information presented using color. Ask students to supplement that information using other visual cues. Assess how students use shapes and icons to supplement information presented using color distinguishable. {% include excol.html type="end" %} @@ -174,7 +175,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Students design a prototype with adaptable and distinguishable styles that help users perceive different content. Assess how students use different style properties such as font sizes and spacing to make content perceivable and to distinguish components from one another. +* Practical — Have students design a prototype with adaptable and distinguishable styles that help users perceive different content. Assess how students use different style properties such as font sizes and spacing to make content perceivable and to distinguish components from one another. {% include excol.html type="end" %} @@ -184,7 +185,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Explain how people with disabilities orient on web pages and applications using visual and non-visual cues, including focus indicators, as well as spacing and grouping to communicate regions. Present strategies to plan for the inclusion of such cues early in the visual design phase. +Explain how people with disabilities use visual and non-visual cues to orient on web pages and applications. For example, focus indicators as well as spacing and grouping to communicate regions. Present strategies to help students incorporate early planning for such cues within the visual design phase. #### Learning Outcomes for Topic @@ -192,16 +193,16 @@ Students should be able to: * design focus indicators that enable people to tell where they are as they move through web pages and applications using the keyboard * define page regions by using headings, spacing, and grouping -* design layouts that enable to present visual and non-visual cues in different screen sizes, screen configurations, and style sheets -* define methods to help users perceive and understand visual and non-visual cues, for example using text, color, and icons to convey the status of tasks in a project +* design layouts that enable presentation of visual and non-visual cues in different screen sizes, screen configurations, and style sheets +* define methods to help users perceive and understand visual and non-visual cues, for example by using text, color, and icons to convey the status of tasks in a project #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Invite students to use a web page that has appropriate focus indicators first, and then invite them to use a web page without focus indicators. Explain how focus indicators allow people using the keyboard only to determine where they are as they move through web pages and applications using the keyboard only. For reference on how to provide appropriate focus indicators, see techniques [G149: Using user interface components that are highlighted by the user agent when they receive focus](https://www.w3.org/WAI/WCAG21/Techniques/general/G149.html) and [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). +* Invite students to use a web page that has appropriate focus indicators first, and then invite them to use a web page without focus indicators. Explain how focus indicators allow people who rely on keyboard navigation to determine where they are as they move through web pages and applications. For reference on how to provide appropriate focus indicators, see techniques [G149: Using user interface components that are highlighted by the user agent when they receive focus](https://www.w3.org/WAI/WCAG21/Techniques/general/G149.html) and [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). * Show examples of different web page regions, such as header, navigation, main, and footer. Explain that several groups of people with disabilities rely on visual and programmatic cues to perceive such regions. Explain that defining the presentation of these cues is a designers' responsibility, whereas implementing such cues and their semantics is a developers' responsibility. -* Show examples of interfaces where information is provided through vision only, such as those with icons and color to convey the status of different tasks in a project. Explain that some people cannot rely on visual means to obtain information, so they need text to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). +* Show examples of interfaces where information is provided through vision only, such as those with icons and color to convey the status of different tasks in a project. Explain that some people cannot rely on visual means to obtain information. These users need text to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). #### Ideas to Assess Knowledge for Topic @@ -219,7 +220,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Explain how people with disabilities rely on layouts that adapt to different screen sizes, screen configurations, and style sheets to identify, distinguish, and process content. Explain that, in addition to using techniques such as responsive design, other elements, including content sequence, focus indicators, and target sizes need to adapt to different screen sizes, screen configurations, and style sheets for an accessible user experience. Emphasize that designers need to plan for these accessible user experiences early on in the visual design phase. +Refer to responsive design techniques. Explain that other elements also contribute to an accessible user experience. Encourage consideration of how content sequence, focus indicators, and target size can be designed to adapt to different screen sizes, screen configurations, and style sheets. Demonstrate approaches to balance the use of too many design elements to avoid potential overload and distraction for some users. @@ -233,7 +234,8 @@ Students should be able to: * design layouts with target sizes that adapt to different screen sizes, screen configurations, and style sheets, for example when creating responsive designs * design layouts to support user customization of line height, as well as spacing between paragraphs, words, and letters * define meaningful focus orders that adapt to different viewports, screen sizes, and multiple breakpoints -* evaluate the use of too many design elements, in particular interactive widgets, images, and moving content) on a page, and select elements that avoid potential distraction and cognitive overload +* evaluate the overuse of design elements, in particular interactive widgets, images, and moving content +* select elements that minimize distraction and cognitive overload #### Teaching Ideas for Topic @@ -249,8 +251,8 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Students design different layouts considering text resizing, line height, spacing between paragraphs, words, and letters. Assess how students consider text resizing, line height, and spacing between paragraphs, words, and letters. -* Practical — Students design an interface that adapts to portrait and landscape modes. Assess how students understand the need for interfaces to adapt to both portrait and landscape modes. +* Practical — Have students design different layouts considering text resizing, line height, spacing between paragraphs, words, and letters. Assess how students consider text resizing, line height, and spacing between paragraphs, words, and letters. +* Practical — Have students design an interface that adapts to portrait and landscape modes. Assess how students understand the need for interfaces to adapt to both portrait and landscape modes. {% include excol.html type="end" %} @@ -261,7 +263,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: * Short Answer Questions — Ask students about the color contrast ratios for the different user interface components. Assess how students understand the different color contrast requirements depending on the components. -* Portfolio — Students design a web page. Assess how students use customizable color, layout, spacing, and position to support content perception, identification, and readability. +* Portfolio — Have students design a web page. Assess how students use customizable color, layout, spacing, and position to support content perception, identification, and readability. ## Teaching Resources From 262e5ff328ac72666bf550c4a3f155fd6626c5e4 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 1 Dec 2021 10:39:16 +0100 Subject: [PATCH 314/416] Changes based on survey feedback --- content/designer/designer-modules.md | 2 +- content/designer/forms-design.md | 26 +++++++++--------- content/designer/images-and-graphics.md | 27 ++++++++++--------- content/designer/interaction-design.md | 26 +++++++++--------- content/designer/multimedia-and-animations.md | 18 ++++++------- content/designer/navigation-design.md | 6 ++--- content/designer/visual-design.md | 6 ++--- 7 files changed, 56 insertions(+), 55 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index aa243d840..dd2b25ed2 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -36,7 +36,7 @@ The designer modules guide the creation of courses that: * interaction design * images and graphics * multimedia and animations - * forms + * forms design These modules focus on accessible user experiences. They are primarily designed for teaching: diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 80ac62a11..0e79ccea7 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -84,7 +84,7 @@ Skills required for this module: * [WCAG Success Criterion 1.3.2 Meaningful Sequence](https://www.w3.org/WAI/WCAG21/quickref/#meaningful-sequence) * [WCAG Success Criterion 1.3.3 Sensory Characteristics](https://www.w3.org/WAI/WCAG21/quickref/#sensory-characteristics) * [WCAG Success Criterion 1.3.4 Orientation](https://www.w3.org/WAI/WCAG21/quickref/#orientation) - * [WCAG Success Criteria 1.3.5 Identify Input Purpose](https://www.w3.org/WAI/WCAG21/quickref/#identify-input-purpose) + * [WCAG Success Criterion 1.3.5 Identify Input Purpose](https://www.w3.org/WAI/WCAG21/quickref/#identify-input-purpose) * [WCAG Success Criterion 1.4.1 Use of Color](https://www.w3.org/WAI/WCAG21/quickref/#use-of-color) * [WCAG Success Criterion 1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum) * [WCAG Success Criterion 1.4.4 Resize Text](https://www.w3.org/WAI/WCAG21/quickref/#resize-text) @@ -127,7 +127,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Show examples of different form elements and their intended purpose, including edit boxes, check boxes, radio buttons, and buttons. Explain uses of standard versus non-standard components and how use of non-standard elements impacts accessibility. +Explore different form elements and their intended purpose, including edit boxes, check boxes, radio buttons, and buttons. Explain uses of standard versus non-standard components and how use of non-standard elements impacts accessibility. #### Learning Outcomes for Topic @@ -144,13 +144,13 @@ Students should be able to: Optional ideas to teach the learning outcomes. * Show examples of different form elements and reflect on their intended purpose. For example, edit boxes, check boxes, radio buttons, and buttons. Emphasize that using a form element with an unintended purpose can cause cognitive overload as well as compatibility issues with assistive technologies and adaptive strategies. -* Show examples of standard versus non-standard form elements. Explain that standard elements are generally accessible by default, and that there is little need for extra work to make them accessible at a later phase. However, use of non-standard elements generally requires further coding to ensure these elements are usable with the keyboard and compatible with assistive technologies. +* Show examples of standard versus non-standard form elements. Explain that standard elements are generally accessible by default, and that there is little need for extra work to make them accessible at a later phase. However, use of non-standard elements generally requires additional coding to ensure these elements are usable with the keyboard and compatible with assistive technologies. #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -* Short Answer Questions — Give students specific purposes for form elements. Ask them to research how to convey these purposes using standard elements when possible, and to elaborate on what are the accessibility implications of using non-standard elements. Assess how students understand and communicate the accessibility implications of using non-standard elements. +* Short Answer Questions — Give students specific purposes for form elements. Ask them to research how to communicate these purposes using standard elements. If standard elements are found to be inadequate for the purpose, have students discuss the accessibility requirements for using non-standard elements and how they would approach such requirements. Assess how students understand and communicate the accessibility requirements for using non-standard elements. * Practical — Ask students to select the appropriate form elements based on a given set of input requirements. Ask students to use standard elements when possible for each of these input requirements and to annotate keyboard interaction and expected behavior with assistive technologies when using non-standard elements. Assess how students annotate keyboard interactions and expected behavior with assistive technologies when using non-standard elements. {% include excol.html type="end" %} @@ -182,14 +182,14 @@ Optional ideas to teach the learning outcomes: * Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. * Show examples of different form elements, for example buttons, checkboxes, text boxes, and listboxes, across websites and applications. Emphasize that each should have a clear name that identifies its purpose. For reference on how to provide consistent names for different form elements across websites and applications, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). * Show examples of required and non-required form fields. Explain that instructions about which of the fields are required should be provided using several methods, including visual and non-visual instructions. -* Present examples of time limits, such as those warning about session expirations. Explain that visual and non-visual instructions need to be provided so that users are aware of the time limits, and methods need to be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designers' responsibility, whereas implementing methods to stop, extend, or adjust time limits is a responsibility shared with the developer. +* Present examples of time limits, such as those warning about session expirations. Explain that visual and non-visual instructions must be provided so that users are aware of the time limits, and methods must be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designers' responsibility, whereas implementing methods to stop, extend, or adjust time limits is a responsibility shared with the developer. * Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Give students a form and ask them to define labels for each of the fields. Assess how students provide clear and descriptive names for each of the form fields. +* Practical — Give students a form and ask them to assign labels for each of the fields. Assess how students provide clear and descriptive names for each of the form fields. * Practical — Give students a form with required and non-required fields and ask them to provide visual and non-visual instructions to communicate the required fields. Assess how students provide clear and understandable instructions for each required field. * Practical — Give students a form and ask them to provide the necessary instructions for users to understand each of the fields and fill in the form. Assess how students provide clear and concise instructions. @@ -218,10 +218,10 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of placement and appearance of error messages. Explain that some users rely on consistent placement and appearance of these messages to identify the errors. +* Show both effective and ineffective examples of placement and appearance of error messages. Explain that some users rely on consistent placement and appearance of these messages to identify the errors. * Show examples of overall information about submission errors. Explain that this information makes users aware that their submission contains errors and help them search for specific error messages in the rest of the content. -* Show examples of specific messages that identify each of the fields in error. Explain that these messages help users identify and locate the specific fields that contain errors. Mention that it is best practice to keep the original submission when possible, so that users can understand what needs to be corrected. -* Show examples of suggestions for correction. Explain that these suggestions help users understand what the right way is to submit the form. Emphasize that these suggestions should be provided when possible, unless they compromise the security and the purpose of the form. +* Show effective and ineffective examples of specific messages that identify each of the fields in error. Explain that these messages help users identify and locate the specific fields that contain errors. Mention that it is best practice to keep the original submission when possible, so that users can understand what needs to be corrected. +* Show effective and ineffective examples of suggestions for correction. Explain that these suggestions help users understand what the right way is to submit the form. Emphasize that these suggestions should be provided when possible, unless they compromise the security and the purpose of the form. * Show examples of critical submissions, for example buying an airline ticket and submitting legal data. Discuss methods to reverse, check, and confirm the information included in such submissions. #### Ideas to Assess Knowledge for Topic @@ -241,7 +241,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Show examples of notification messages. Explain that they need to be distinguishable by all users, including visually and programmatically. +Show examples of notification messages. Explain that they must be identified both visually and programmatically in order to be distinguishable by all users. Show examples of visual and non-visual notifications for error messages and other types of feedback for forms. Explain that notifications may have different levels of priority when in the context of a complex form. Explain that defining such levels of priority and which types of notifications each of these levels should contain is a designers' responsibility whereas implementing these levels is a developers' responsibility. @@ -251,7 +251,7 @@ Students should be able to: * define the placement and appearance of notifications * define meaningful and descriptive notification messages, including: - * on input (to communicate if the provided input is valid or invalid + * on input (to communicate if the provided input is valid or invalid) * on task completion (to communicate success or failure of a specific task) * design user experiences to queue and prioritize application notifications coming from different components * design user experiences to store notifications that disappear after a period of time to be checked at the users' pace @@ -261,7 +261,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of placement and appearance of notifications. Explain that these notifications need to be distinguishable both visually and non-visually. Explain that defining the notifications placement and appearance is responsibility of the designer, whereas implementing such notifications is a developer's responsibility. +* Show examples of placement and appearance of notifications. Explain that these notifications must be distinguishable both visually and non-visually. Explain that defining the notifications placement and appearance is responsibility of the designer, whereas implementing such notifications is a developer's responsibility. * Show examples of different methods to communicate notifications, such as through text messages, semantic relations, haptic and audio feedback, and popup windows. Explain that there needs to be a variety of methods available to allow interaction by different groups of users. * Show examples of overlapping notifications. Explain that some users may find it daunting to process several notifications at the same time, so a method needs to be defined that allows to prioritize notifications based on their relevance. Explain that defining methods to prioritize notifications based on their relevance is a designers' responsibility, whereas implementing the methods is a developers' responsibility. * Demonstrate examples of notification processing using assistive technologies, including screen readers and voice assistants. Explain that the notifications may come at a faster pace than the technology is able to process, so users may end up missing information. Emphasize that it is good practice to design methods to store the notifications to allow users to check the notifications at their own pace. @@ -270,7 +270,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Give students a form field that validate on user input and ask them to provide descriptive validation messages. Assess how students provide clear validation messages for fields that validate on user input. +* Practical — Give students a form field that validates on user input and ask them to provide descriptive validation messages. Assess how students provide clear validation messages for fields that validate on user input. * Practical — Give students a form with notifications coming from different fields and ask them to define methods to queue and prioritize such notifications. Assess how students prioritize and organize notifications coming from different views. {% include excol.html type="end" %} diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 672c8d59d..54c078e82 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -102,7 +102,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Functional images convey functionality of a component. For example, search, print, and save functionality. Explain requirements related to color and contrast to help users distinguish these images from other components. Show examples of graphical links and buttons as well as logos. Discuss with students how they would describe each of those examples. +Functional images convey functionality of a component. For example, search, print, and save functionality are often presented using icon imagery. Explain requirements related to color and contrast to help users distinguish these images from other components. Show examples of graphical links and buttons as well as logos. Discuss with students how they would describe each of those examples. #### Learning Outcomes for Topic @@ -121,7 +121,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of different images used to convey functionality, for example for printing, searching, or saving a document. Explain that these images need an equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). -* Invite students to research the most common iconography and naming for elements such as print, save, and search. Explain that these iconography and names need to be consistent throughout the website. +* Invite students to research the most common iconography and naming for elements such as print, save, and search. Explain that these iconography and names must be consistent throughout the website. * Refer back to [Designer Module 1 Visual Design, Topic Color](/curricula/designer-modules/visual-design/#topic-color) to explain color contrast requirements for functional images. #### Ideas to Assess Knowledge for Topic @@ -147,15 +147,15 @@ Explain that providing text alternatives for informative images is a responsibil Students should be able to: -* define text alternatives that present equivalent information as that contained in informative images using the following methods: +* define text alternatives that are equally informative as the described images using the following methods: * boilerplate descriptions that would then be completed and maintained through the development and authoring phases * adjacent textual information to complement images and icons, for example in a news headline * text alternatives that describe the information conveyed by images * apply the appropriate color contrast to images that are necessary to understand the content * use styled text instead of images of text when the technology in use can provide the desired visual presentation -* define alternatives to biometrics and CAPTCHA, for example by providing visual, auditory, and logical CAPTCHA +* define alternatives to biometrics and CAPTCHA, for example by using visual, auditory, and logical CAPTCHA * explain the issues associated with relying only on one form of biometrics and CAPTCHA, and describe alternative approaches for authentication -* evaluate the issues associated to accessing information contained in informative images +* evaluate the issues associated with accessing information contained in informative images * select other ways to convey the information contained in images when possible, including plain text * identify related requirements for developers to code alternative texts for informative images @@ -163,9 +163,10 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different images that convey information, such as images to provide instructions, and to identify people and objects. Explain that such information needs to be provided using text alternatives, so that the purpose of the image can be understood without having to look at the image. Emphasize that these alternatives may require coordination among designers, developers, and content authors. For references on how to provide text alternatives for images, see [G82: Providing a text alternative that identifies the purpose of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G82.html). -* Explain that images of text present information intended to be read as text. Emphasize that sometimes it is difficult to tell visually if text has been coded as a text or as an image, so coordination among designers, developers, and content authors is needed to determine if the technologies in use can achieve the desired visual presentation. Emphasize that, if an image of text is still required, there needs to be a text alternative that conveys the same information as the image of text. Explain that coding an image of text appropriately is a responsibility of the developer, whereas providing descriptions for images of text is a responsibility shared with the content author. -* Show examples of different verification systems, such as CAPTCHA, to identify human beings trying to access a service or system. Explain that these verification systems need to support several modalities, including visual, auditory, and cognitive. For references on how to provide accessible CAPTCHA, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). +* Show examples of different images that convey information, such as images to provide instructions, and to identify people and objects. Explain that such information must be provided using text alternatives in order to be understood by users who do not see the image. Emphasize that these alternatives may require coordination among designers, developers, and content authors. For references on how to provide text alternatives for images, see [G82: Providing a text alternative that identifies the purpose of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G82.html). +* Explain that images of text present information intended to be read as text. Emphasize that sometimes it is difficult to tell visually if text has been coded as text or as an image. Coordination among designers, developers, +and content authors is therefore needed to determine if the technologies in use can achieve the same desired visual presentation in a text format. Emphasize that, if an image of text is still required, there must be a text alternative that conveys the same information as the image of text. Explain that coding an image of text appropriately is a responsibility of the developer, whereas providing descriptions for images of text is a responsibility shared with the content author. +* Show examples of different verification systems, such as CAPTCHA, to identify human beings trying to access a service or system. Explain that these verification systems must support several modalities, including visual, auditory, and cognitive. For references on how to provide accessible CAPTCHA, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). #### Ideas to Assess Knowledge for Topic @@ -198,7 +199,7 @@ Students should be able to: * define clear and consistent identification methods for complex image descriptions, including appropriate headings and expandable and collapsible components * design user experiences for complex images, including: * how to get to the image descriptions - * how the content of the description should look like + * what the description should look like * if the descriptions could ultimately replace the image itself * identify related requirements for content authors to: * provide descriptive, equivalent textual information to understand complex images and graphics, including diagrams, charts, maps, and infographics @@ -208,15 +209,15 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Refer back to [Designer Module 1: Visual Design, Topic: Color](/curricula/designer-modules/visual-design/#topic-use-of-color). Explain that they need to have a color contrast ratio of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required color contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). -* Explain that complex images also need to have text descriptions that allow people to understand and interact with such images without having to look at them. Explain that providing these text alternatives is a designers' responsibility, whereas providing the text descriptions is a responsibility shared with the content author. +* Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Refer back to [Designer Module 1: Visual Design, Topic: Color](/curricula/designer-modules/visual-design/#topic-use-of-color). Explain that they must have a color contrast ratio of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required color contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). +* Explain that complex images must also have text descriptions that allow people who don’t see them to understand and interact with the image content. Explain that providing these text alternatives is a designers' responsibility, whereas providing the text descriptions is a responsibility shared with the content author. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: * Practical — Have students add complex images to a website, such as charts or diagrams, and ensure they have the required color contrast. Assess how students understand the contrast requirements for complex images. -* Practical — Have students cooperate with developers and content authors to implement a map in a way that everybody can understand its meaning and interact with it. Assess how students identify the need for text alternatives for complex images and cooperate with other team members to ensure such alternatives exist. +* Practical — Have students cooperate with developers and content authors to implement a map that can be understood and effectively used by all. Assess how students identify the need for text alternatives for complex images and cooperate with other team members to ensure such alternatives are effective. {% include excol.html type="end" %} @@ -250,7 +251,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Ask students to provide decorative images to illustrate a text article and ask them to ensure these icons are visible in different screen sizes and devices. Assess how students understand the need for decorative images to adapt to the different user needs and preferences. -* Practical — Give students and interface with too many decorative images and ask students to select the ones that avoid distractions, cognitive overload, and slow loading times. Assess how students balance the use of decorative images to avoid distractions, cognitive overload, and slow loading times. +* Practical — Give students an interface with too many decorative images and ask students to identify the ones that are likely to cause distractions, cognitive overload, and slow loading times. Assess how students balance the use of decorative images to minimize distractions, cognitive overload, and slow loading times. {% include excol.html type="end" %} diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index 027a65001..6f6514d8b 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -121,7 +121,7 @@ Topics to achieve the learning outcomes: Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain how keyboard support benefits other ways of interacting, including voice interaction and interaction using some assistive technologies. -Present examples of specific non-standard shortcuts. Explain that providing custom keyboard interactions can support efficiency but can also disrupt the users' expectations. Designers need to document these custom interactions and make them consistent throughout the interface. Emphasize that defining the keyboard interactions is a designers' responsibility, whereas implementing such interactions is a responsibility shared with the developer. +Present examples of specific non-standard shortcuts. Explain that providing custom keyboard interactions can support efficiency but can also disrupt the users' expectations. Designers must document these custom interactions and make them consistent throughout the interface. Emphasize that defining the keyboard interactions is a designers' responsibility, whereas implementing such interactions is a responsibility shared with the developer. #### Learning Outcomes for Topic @@ -129,16 +129,16 @@ Students should be able to: * design user experiences for keyboard navigation through and inside components of websites and applications, for example using: * the tab key to move through different components - * the enter key to enter a specific component and to select a specific item on a component + * the enter key to access a specific component and to select an item on a component * the arrow keys to move through elements inside components, including sliders, tabs, dialogs, application menus, and tree views * the escape key to exit components * specific keyboard shortcuts to reveal, review, and dismiss notifications * specific keyboard shortcuts to support efficiency * first letter navigation to jump to specific pieces of data in lists and grids -* identify situations when it is necessary to provide additional keyboard shortcuts, for example when designing a custom functionality that is not keyboard supported by default +* identify situations when additional keyboard shortcuts are necessary, for example when designing a custom functionality that is not keyboard supported by default * explain how keyboard support benefits other ways of interacting, including voice interaction and interaction using assistive technologies * evaluate the use of custom keyboard interactions -* select keyboard interactions that avoid conflicts with the operating system, browser, and assistive technologies when possible +* select keyboard interactions that do not conflict with the operating system, browser, and assistive technologies when possible * cooperate with developers to provide methods to remap or disable conflicting shortcuts * define methods to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications * define consistent placement and appearance of focus indicators @@ -149,11 +149,11 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Invite students to try standard keyboard conventions. For example, use of the tab to move through user interface components, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that standard interactions need to be preserved as much as possible when designing custom widgets, as users mostly expect these. -* Invite students to research keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers need to cooperate with other team members, including developers and user researchers, on strategies to define custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and collaborating with developers to implement such keystrokes. +* Invite students to try standard keyboard conventions. For example, use of the tab to move through user interface components, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that standard interactions must be preserved as much as possible when designing custom widgets, as users mostly expect these. +* Invite students to research keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers must cooperate with other team members, including developers and user researchers, on strategies to define custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and collaborating with developers to implement such keystrokes. * Present examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. * Invite students to research how assistive technologies and adaptive strategies rely on keyboard support to provide specific functionality, such as navigating sequentially using voice commands. Demonstrate interaction with assistive technologies in web pages and applications with and without keyboard support. -* Refer back to [Designer Module 1: Visual Design, Topic Orientation Cues](/curricula/designer-modules/visual-design/#topic-orientation-cues) to reflect on focus indicators. Explain that, in addition to visually distinguishable focus indicators, programmatic keyboard focus needs to be considered when providing keyboard support. Emphasize that designers need to cooperate with other team members, including developers and user researchers, to design user experiences that consider focus placement depending on changes of context and user interaction. +* Refer back to [Designer Module 1: Visual Design, Topic Orientation Cues](/curricula/designer-modules/visual-design/#topic-orientation-cues) to reflect on focus indicators. Explain that, in addition to visually distinguishable focus indicators, designers must consider programmatic keyboard focus must be considered when providing keyboard support. Emphasize that designers must cooperate with other team members, including developers and user researchers, to design user experiences that use focus placement to reflect changes of context and user interaction. * Show examples of help functionality for custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using those shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these help methods is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic @@ -161,7 +161,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Short Answer Questions — Ask students about commonly used modifier keys of operating systems, browsers, and assistive technologies. Assess how students identify commonly used modifier keys in operating systems, browsers, and assistive technologies. -* Practical — Give students an interface that only works with the mouse and ask them to define keyboard interaction patterns. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. +* Practical — Give students an interface that only works with the mouse and ask them to provide keyboard interaction. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. * Practical — Have students cooperate with developers to avoid custom keyboard shortcut conflicts with existing operating system and assistive technology keystrokes. Assess how students cooperate with developers to develop strategies that avoid custom keyboard shortcut conflicts. * Practical — Give students a custom widget and ask them to define appropriate focus placement and appearance depending on changes in context and user interaction. Assess how students create user experiences that consider visual focus indicators and focus placement. @@ -173,7 +173,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Show examples of user interfaces that react to motion, such as shaking the device to perform a specific action. Explain that some people may perform these motion-based gestures inadvertently, others may not be able to perform them at all. Present alternatives to motion-based gestures, for example providing methods to undo, abort, and reverse actions performed using complex gestures. +Show examples of user interfaces that react to motion, such as shaking the device to perform a specific action. Explain that some people may perform these motion-based gestures inadvertently, while others may not be able to perform them at all. Present alternatives to motion-based gestures, for example providing methods to undo, abort, and reverse actions performed using complex gestures. Discuss gestures that require dragging and drawing specific paths on a touch screen. Explain that these are difficult (and sometimes impossible) to perform for some people. @@ -191,9 +191,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of interactions based on swipe and pinch gestures. Explain that users with mobility impairments may have difficulty to perform such gestures, so interfaces need to have alternatives that do not require swiping or pinching to perform an action. -* Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments may have difficulty to perform such gestures, so interfaces need to have alternatives that do not require motion for these gestures. -* Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events, so interfaces need to support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. +* Show examples of interactions based on swipe and pinch gestures. Explain that users with mobility impairments may have difficulty to perform such gestures, so interfaces must have alternatives that do not require swiping or pinching to perform an action. +* Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments may have difficulty to perform such gestures, so interfaces must have alternatives that do not require motion for these gestures. +* Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events. Therefore, interfaces must support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. * Refer back to [Designer Module 1: Visual Design, Topic Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts). Explain that larger target sizes for pointer are recommended where possible. The minimum recommended size is 44 by 44 CSS pixels. #### Ideas to Assess Knowledge for Topic @@ -212,7 +212,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Practical &mdash: Give students a web application, such as a web email client, and ask them to provide the necessary custom keyboard shortcuts. Assess how students balance the use of standard versus custom keyboard shortcuts. +* Practical — Give students a web application, such as a web email client, and ask them to provide the necessary custom keyboard shortcuts. Assess how students balance the use of standard versus custom keyboard shortcuts. * Portfolio — Have students design the interactions for a given interface, including mouse, keyboard, touch, and voice. Assess how students design user experiences for different input methods, including mouse, touch, keyboard, and voice. ## Teaching Resources diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 8d93d22f3..1f8880f06 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -38,12 +38,12 @@ Students should be able to: * identify accessibility requirements for different types of audio and video content * design user experiences for description, captions, transcripts, and sign languages, including interactions, placement, and methods to turn on and off the alternatives -* identify accessibility issues associated with media players, including: - * select media players with support for different methods of interaction, including mouse, keyboard, touch, and voice - * select media player controls that have clear and descriptive names, that are easy to find, and that are always reachable for users +* identify accessibility considerations for media players, including: + * support for different methods of interaction, including mouse, keyboard, touch, and voice + * controls that have clear and descriptive names, that are easy to find, and that are reachable by all users * define methods to control automatic audio and movement, including: * mute and control the volume of auto-playing audio - * pause, stop, and hide moving, blinking, and auto-updating content, including carousels and other animations + * pause, stop, and hide moving, blinking, and auto-updating content, including carousels and animations * identify related requirements for: * developers to programmatically associate alternatives to their corresponding media content * developers to include accessibility support for media players @@ -83,7 +83,7 @@ Skills required for this module: * [WCAG Success Criterion 1.2.3 Audio Description or Media Alternative (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#audio-description-or-media-alternative-prerecorded) * [WCAG Success Criterion 1.2.4 Captions (Live)](https://www.w3.org/WAI/WCAG21/quickref/#captions-live) * [WCAG Success Criterion 1.2.5 Audio Description (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#audio-description-prerecorded) - * [WCAG Success Criteria 1.4.2 Audio Control](https://www.w3.org/WAI/WCAG21/quickref/#audio-control) + * [WCAG Success Criterion 1.4.2 Audio Control](https://www.w3.org/WAI/WCAG21/quickref/#audio-control) * [WCAG Success Criterion 1.4.6 Sign Language (prerecorded](https://www.w3.org/WAI/WCAG21/quickref/#sign-language-prerecorded) * [WCAG Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide) * [WCAG Success Criterion 2.3.1 Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG21/quickref/#three-flashes-or-below-threshold) @@ -111,7 +111,7 @@ Topics to achieve the learning outcomes: Description of visual information is essential for people who cannot see the visuals. Captions are essential for people who cannot hear the audio. Text transcripts provide an alternative to visual and audio information. -Discuss the need for planning in the design phase to accommodate alternatives to multimedia content such as description, captions, text transcripts, and sign languages. Present methods to turn on and off alternatives to multimedia content depending on user needs. Explain that these methods need to have clear names and need to be always reachable for users. Explain that defining such methods is a designer's responsibility, whereas providing the alternatives is a responsibility shared with the content author. +Discuss the need for planning in the design phase to accommodate alternatives to multimedia content such as description, captions, text transcripts, and sign languages. Present methods to turn on and off alternatives to multimedia content depending on user needs. Explain that these methods must have clear names and must be reachable by all users. Explain that defining such methods is a designer's responsibility, whereas providing the alternatives is a responsibility shared with the content author. #### Learning Outcomes for Topic @@ -139,7 +139,7 @@ Students should be able to Optional ideas to teach the learning outcomes: * Show examples of description of visual information. Emphasize how these alternatives describe the visual information (including text) for people who cannot see the videos. Explain that different standards and policies may refer to description of visual information using different terms, such as audio description, video description, and described videos. Explain that defining the methods to turn on and off the description is a designers' responsibility, whereas providing the description is a responsibility shared with the content author. -* Show examples of captions. Explain that captions are a synchronized text version of the speech and non-speech audio information needed to understand the content. Explain that different standards and policies may refer to captions using different terms, such as subtitles. Explain that defining the methods to turn on and off the description is a designers' responsibility, whereas providing the description is a responsibility shared with the content author. Explain that determining where to place captions is a designers' responsibility, whereas providing such captions is a responsibility shared with the content author. +* Show examples of captions. Explain that captions are a synchronized text version of the speech and non-speech audio information needed to understand the content. Explain that different standards and policies may refer to captions using different terms, such as subtitles. Explain that defining the methods to turn on and off the captions is a designers' responsibility, whereas providing the captions is a responsibility shared with the content author. Explain that determining where to place captions and in what color and font they are presented is a designers' responsibility, whereas providing such captions is a responsibility shared with the content author. * Show examples of text transcripts. Explain that transcripts are a text version of the speech and non-speech audio information needed to understand the content. Explain that defining the placement and spacing for the transcripts is a designers' responsibility, whereas providing the transcripts is a responsibility shared with the content author. * Show examples of sign language. Explain that sign language is essential for people who are deaf and who do not understand written language well. Explain that defining the methods to enable and disable sign language is a designers' responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. * Show examples of accessible and inaccessible media players. Emphasize that it is generally more reliable to use an existing media player with support for accessibility than to design one from scratch. Emphasize how accessible media players are operable by keyboard, make keyboard focus visible, have clear labels, have appropriate contrast ratios, and are easy to find. For an overview on skills needed to develop a media player, expected functionality, and existing players, see the resource Making Audio and Video Media Accessible, [Media players](/media/av/player/). @@ -176,13 +176,13 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of content that moves or blinks, such as animations and carousels. Explain that these animations can cause problems for some users that cannot keep up with the pace of the auto-updating content. Emphasize that, in addition, these animations can cause seizures and physical reactions. For references on how to design interfaces that allow to pause, stop, and hide moving, blinking, or auto-updating content, see the following techniques: +* Show examples of content that moves or blinks, such as animations and carousels. Explain that moving content can be problematic and can cause distraction and anxiety for several types of users. Emphasize that some animation frequencies are also known to cause seizures and physical reactions for certain users. For references on how to design interfaces that allow to pause, stop, and hide moving, blinking, or auto-updating content, see the following techniques: * [G4: Allowing the content to be paused and restarted from where it was paused](https://www.w3.org/WAI/WCAG21/Techniques/general/G4), * [G11: Creating content that blinks for less than 5 seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G11), * [G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)](https://www.w3.org/WAI/WCAG21/Techniques/general/G152), * [G186: Using a control in the Web page that stops moving, blinking, or auto-updating content](https://www.w3.org/WAI/WCAG21/Techniques/general/G186), and * [G187: Using a technology to include blinking content that can be turned off via the user agent](https://www.w3.org/WAI/WCAG21/Techniques/general/G187). -* Show examples of flashing content and explain that it can cause seizures and physical reactions for some people. Emphasize that all interface components need to be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole interface. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash below 3 seconds, see techniques [G19: Ensuring that no component of the content flashes more than three times in any 1-second period](https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html) and [G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold](https://www.w3.org/WAI/WCAG21/Techniques/general/G15.html). +* Show examples of flashing content and explain that it can cause seizures and physical reactions for some people. Emphasize that all interface components muswt be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole interface. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash below 3 seconds, see techniques [G19: Ensuring that no component of the content flashes more than three times in any 1-second period](https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html) and [G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold](https://www.w3.org/WAI/WCAG21/Techniques/general/G15.html). * Show examples of interactions triggered by animations, such as additional movements when scrolling and decorative gimmicks. Explain that these animations can cause distraction and vestibular disorders (such as dizziness, nausea, and headaches) for some people. Discuss the use of preferences as well as technology specific properties to reduce or disable such animations. * Demonstrate the use of a screen reader to navigate an application that plays audio automatically for more than 3 seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a method to pause or control the volume of that audio. Explain that the operating system often provides such method. For references on how to design interfaces with methods to pause or control the volume of any audio that plays automatically, see the following techniques: * [G60: Playing a sound that turns off automatically within three seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G60.html), diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index cd17a920a..98de83179 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -138,7 +138,7 @@ Optional ideas to teach the learning outcomes: * Present different types of navigation menus, such as static, fly-out, and mega menus. Explain conventions for accessible navigation menus, for example clear and consistent styling to convey menu behaviors and states. * Demonstrate interactions with navigation menus using different input devices, including keyboard, mouse, touch, and voice. For example, activating a menu option by tapping, pressing the Enter and Space keys, and mouse clicking. Explain that defining the interactions is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. -* Show examples of navigation menus and menu items large text. Explain that the text needs to adapt to different viewports and screen configurations, for example lines of text must wrap to avoid horizontal scrolling. Explain that different languages may have different word sizes, so designers must consider provisions for different word lengths. +* Show examples of navigation menus and menu items with large text. Explain that the text needs to adapt to different viewports and screen configurations, for example lines of text must wrap to avoid horizontal scrolling. Explain that different languages may have different word sizes, so designers must consider provisions for different word lengths. * Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Explain how to communicate the states of these menu items visually and non-visually. Explain that defining the visual presentation is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. #### Ideas to Assess Knowledge for Topic @@ -186,9 +186,9 @@ Optional ideas to teach the learning outcomes: * Invite students to research different ways to present information in page titles. Reflect with them on how well the titles describe the page contents. Explain that page titles are useful to identify the purpose of a specific web page within a website. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page. Some browsers and assistive technologies may truncate the titles or not show them at all. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). * Show examples of visual and non-visual indications in menus about the current page with respect to the website. -#### Teaching Ideas for Topic +#### Ideas to Assess Knowledge for Topic -Optional ideas to teach the learning outcomes: +Optional ideas to assess knowledge: * Practical — Give students a website and ask them to provide multiple ways to navigate across the website. Assess how students identify and design the different user experiences for site navigation, including search functionalities, breadcrumb trails, and site maps. * Practical — Give students a website and ask them to provide descriptive titles that identify each of the pages. Assess how students provide clear and descriptive page titles. diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index fc4be96aa..9e9e87c94 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -40,7 +40,7 @@ Students should be able to: * design layouts with sufficient color contrast for text, images of text, and controls * design clear and distinguishable focus indicators, for example by using borders, color, and highlighting * use headings, spacing, and styling to group related content -* use visual and non-visual cues to convey information, including text, color, patterns, and icons +* use several visual and non-visual cues to convey information, including text, color, patterns, and icons * design layouts that adapt to: * different font sizes and spacing set by the user in browser and operating system settings * different screen sizes, screen configurations, and user style sheets @@ -241,11 +241,11 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Discuss with students the differences between web sites and applications that preserve content and functionality when resized up to 200% and those which do not. Explain that some people often need to resize text to read it properly. For references on how to ensure text resizes up to 200%, see technique [G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width](https://www.w3.org/WAI/WCAG21/Techniques/general/G179). +* Discuss with students the differences between web sites and applications that preserve content and functionality when resized up to 200% and those which do not. Explain that some people often must resize text to read it properly. For references on how to ensure text resizes up to 200%, see technique [G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width](https://www.w3.org/WAI/WCAG21/Techniques/general/G179). * Discuss the use of multiple screen sizes, screen configurations, and style sheets by people with low vision. Explain that these configurations often go beyond the traditional mobile, tablet, and desktop breakpoints. * Show examples of user interfaces showing up in both portrait and landscape modes. Explain that the ability to show an interface both in portrait and landscape is essential for people who cannot change their device orientation due to mobility impairments. * Show examples of different user interfaces that support customizing line height as well as spacing between paragraphs, words, and letters to support readability. -* Show examples of different target sizes and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that target sizes need to be large enough to accommodate different people's needs. +* Show examples of different target sizes and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that target sizes must be large enough to accommodate different people's needs. #### Ideas to Assess Knowledge for Topic From a7284eb074c379d07275684ccc187f03e47fe6e5 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 1 Dec 2021 11:36:43 +0100 Subject: [PATCH 315/416] Adding G207 and G209 -- fixes [Designer Module 1: Visual Design] Topic: Color - teaching ideas #400 --- content/designer/visual-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 9e9e87c94..0fc600f44 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -131,7 +131,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of sufficient and insufficient color contrast for text. Explain that color contrast for text (including images of text) needs to be at least 4.5:1 with respect to their background. For references on how to apply sufficient color contrast to text (including images of text), see technique [G18: Ensuring that a color contrast of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). -* Show examples of different interactive components, such as buttons and links. Explain that they should have a color contrast of at least 3:1. +* Show examples of different interactive components, such as buttons and links. Explain that they should have a color contrast of at least 3:1. For references on how to apply sufficient color contrast to interactive components, see techniques [G207: Ensuring that a contrast ratio of 3:1 is provided for icons](https://www.w3.org/WAI/WCAG21/Techniques/general/G207) and [G209: Provide sufficient contrast at the boundaries between adjoining colors](https://www.w3.org/WAI/WCAG21/Techniques/general/G209). * Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so they require additional methods to convey that information. For references on how to supplement information conveyed through color, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). #### Ideas to Assess Knowledge for Topic From 1ac392a65b2c83ea989f8ec6120ca3eeaa22afda Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 1 Dec 2021 14:50:09 +0100 Subject: [PATCH 316/416] "easy to find" -> "easy to find on the page" -- fixes [Designer Module 6: Multimedia and Animations] Editorial suggestion for teaching idea on media players for topic Alternatives to Multimedia Content #420 --- content/designer/multimedia-and-animations.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 1f8880f06..ab2fdd5d0 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -40,7 +40,7 @@ Students should be able to: * design user experiences for description, captions, transcripts, and sign languages, including interactions, placement, and methods to turn on and off the alternatives * identify accessibility considerations for media players, including: * support for different methods of interaction, including mouse, keyboard, touch, and voice - * controls that have clear and descriptive names, that are easy to find, and that are reachable by all users + * controls that have clear and descriptive names, that are easy to find on the page, and that are reachable by all users * define methods to control automatic audio and movement, including: * mute and control the volume of auto-playing audio * pause, stop, and hide moving, blinking, and auto-updating content, including carousels and animations @@ -142,7 +142,7 @@ Optional ideas to teach the learning outcomes: * Show examples of captions. Explain that captions are a synchronized text version of the speech and non-speech audio information needed to understand the content. Explain that different standards and policies may refer to captions using different terms, such as subtitles. Explain that defining the methods to turn on and off the captions is a designers' responsibility, whereas providing the captions is a responsibility shared with the content author. Explain that determining where to place captions and in what color and font they are presented is a designers' responsibility, whereas providing such captions is a responsibility shared with the content author. * Show examples of text transcripts. Explain that transcripts are a text version of the speech and non-speech audio information needed to understand the content. Explain that defining the placement and spacing for the transcripts is a designers' responsibility, whereas providing the transcripts is a responsibility shared with the content author. * Show examples of sign language. Explain that sign language is essential for people who are deaf and who do not understand written language well. Explain that defining the methods to enable and disable sign language is a designers' responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. -* Show examples of accessible and inaccessible media players. Emphasize that it is generally more reliable to use an existing media player with support for accessibility than to design one from scratch. Emphasize how accessible media players are operable by keyboard, make keyboard focus visible, have clear labels, have appropriate contrast ratios, and are easy to find. For an overview on skills needed to develop a media player, expected functionality, and existing players, see the resource Making Audio and Video Media Accessible, [Media players](/media/av/player/). +* Show examples of accessible and inaccessible media players. Emphasize that it is generally more reliable to use an existing media player with support for accessibility than to design one from scratch. Emphasize how accessible media players are operable by keyboard, make keyboard focus visible, have clear labels, have appropriate contrast ratios, and are easy to find on the page. For an overview on skills needed to develop a media player, expected functionality, and existing players, see the resource Making Audio and Video Media Accessible, [Media players](/media/av/player/). #### Ideas to Assess Knowledge for Topic From 05e164add26243388270cc1d815c24337afe57c1 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 1 Dec 2021 16:19:50 +0100 Subject: [PATCH 317/416] Color Contrast -> Contrast Ratio --- content/designer/images-and-graphics.md | 22 +++++++++++----------- content/designer/visual-design.md | 22 +++++++++++----------- 2 files changed, 22 insertions(+), 22 deletions(-) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 54c078e82..5b343c793 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -30,7 +30,7 @@ navigation: Courses based on this module should: * explain strategies that people with disabilities use to access information contained in images and graphics -* explain accessibility requirements related to images and graphics, including text alternatives and color contrast +* explain accessibility requirements related to images and graphics, including text alternatives and contrast ratio ## Learning Outcomes for Module @@ -114,7 +114,7 @@ Students should be able to: * adjacent text inside components to understand its function * use consistent naming and imagery for components that have the same functionality across web pages * explain the benefits of using text labels and decorative images for functionality, instead of using images with text alternatives that are only available to some users, such as screen reader users -* apply appropriate color contrast for functional images +* apply appropriate contrast ratio for functional images #### Teaching Ideas for Topic @@ -122,14 +122,14 @@ Optional ideas to teach the learning outcomes: * Show examples of different images used to convey functionality, for example for printing, searching, or saving a document. Explain that these images need an equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). * Invite students to research the most common iconography and naming for elements such as print, save, and search. Explain that these iconography and names must be consistent throughout the website. -* Refer back to [Designer Module 1 Visual Design, Topic Color](/curricula/designer-modules/visual-design/#topic-color) to explain color contrast requirements for functional images. +* Refer back to [Designer Module 1 Visual Design, Topic Color](/curricula/designer-modules/visual-design/#topic-color) to explain contrast ratio requirements for functional images. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: * Practical — Give students different examples of images conveying function, such as a printer for a "print" button and a magnifying glass for a "search" button. Ask students to provide an appropriate text alternative. Assess how students identify images that convey function and how they provide text alternatives that describe the functionality of the component the image is attached to. -* Practical — Ask students to design a series of graphical buttons and links in a way that they are perceivable and distinguishable by all users. Assess how students apply accessibility requirements, such as color contrast, to graphical buttons and links. +* Practical — Ask students to design a series of graphical buttons and links in a way that they are perceivable and distinguishable by all users. Assess how students apply accessibility requirements, such as contrast ratio, to graphical buttons and links. {% include excol.html type="end" %} @@ -151,7 +151,7 @@ Students should be able to: * boilerplate descriptions that would then be completed and maintained through the development and authoring phases * adjacent textual information to complement images and icons, for example in a news headline * text alternatives that describe the information conveyed by images -* apply the appropriate color contrast to images that are necessary to understand the content +* apply the appropriate contrast ratio to images that are necessary to understand the content * use styled text instead of images of text when the technology in use can provide the desired visual presentation * define alternatives to biometrics and CAPTCHA, for example by using visual, auditory, and logical CAPTCHA * explain the issues associated with relying only on one form of biometrics and CAPTCHA, and describe alternative approaches for authentication @@ -183,7 +183,7 @@ Optional ideas to support assessment. {% include excol.html type="middle" %} -Complex images are those whose description requires more than a short phrase or sentence. Show examples of complex images, including diagrams and charts, and explain accessibility requirements that these images have, such as appropriate color contrast and appropriate text descriptions. +Complex images are those whose description requires more than a short phrase or sentence. Show examples of complex images, including diagrams and charts, and explain accessibility requirements that these images have, such as appropriate contrast ratio and appropriate text descriptions. Explain that coordination among different team members is required to assess the use of complex images based on the overall context, so that the information of such images is perceived and understood visually and through the provided descriptions. @@ -191,7 +191,7 @@ Explain that coordination among different team members is required to assess the Students should be able to: -* apply appropriate color contrast for complex images +* apply appropriate contrast ratio for complex images * evaluate the use of complex images * select other ways to present the information contained in complex images, for example using tables, simpler images, and plain text * determine if and how complex images are operated using input devices, including mouse, keyboard, touch, and voice @@ -209,14 +209,14 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Refer back to [Designer Module 1: Visual Design, Topic: Color](/curricula/designer-modules/visual-design/#topic-use-of-color). Explain that they must have a color contrast ratio of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required color contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). +* Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Refer back to [Designer Module 1: Visual Design, Topic: Color](/curricula/designer-modules/visual-design/#topic-use-of-color). Explain that they must have a contrast ratio of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). * Explain that complex images must also have text descriptions that allow people who don’t see them to understand and interact with the image content. Explain that providing these text alternatives is a designers' responsibility, whereas providing the text descriptions is a responsibility shared with the content author. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Have students add complex images to a website, such as charts or diagrams, and ensure they have the required color contrast. Assess how students understand the contrast requirements for complex images. +* Practical — Have students add complex images to a website, such as charts or diagrams, and ensure they have the required contrast ratio. Assess how students understand the contrast requirements for complex images. * Practical — Have students cooperate with developers and content authors to implement a map that can be understood and effectively used by all. Assess how students identify the need for text alternatives for complex images and cooperate with other team members to ensure such alternatives are effective. {% include excol.html type="end" %} @@ -261,8 +261,8 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Short Answer Questions — Ask students which types of images require which color contrast ratios. Assess how students understand the different types of images and their color contrast requirements. -* Portfolio — Have students design the imagery for a website. Assess how students include accessibility requirements in the images in graphics they design, for example color contrast, text alternatives that belong to the design phase, and placeholders for any other text alternative that is planned for later stages of the design and development process. +* Short Answer Questions — Ask students which types of images require which contrast ratio. Assess how students understand the different types of images and their contrast ratio requirements. +* Portfolio — Have students design the imagery for a website. Assess how students include accessibility requirements in the images in graphics they design, for example contrast ratio, text alternatives that belong to the design phase, and placeholders for any other text alternative that is planned for later stages of the design and development process. ## Teaching Resources diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 0fc600f44..82eaac936 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -37,7 +37,7 @@ Courses based on this module should: Students should be able to: * explain how people with disabilities rely on designs that adapt to different colors, layouts, spacing, and positions -* design layouts with sufficient color contrast for text, images of text, and controls +* design layouts with sufficient contrast ratio for text, images of text, and controls * design clear and distinguishable focus indicators, for example by using borders, color, and highlighting * use headings, spacing, and styling to group related content * use several visual and non-visual cues to convey information, including text, color, patterns, and icons @@ -109,7 +109,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Explain how sufficient color contrast (contrast ratio in WCAG) is essential for people with disabilities to perceive, distinguish, and understand content. +Explain how sufficient contrast ratio is essential for people with disabilities to perceive, distinguish, and understand content. Describe how some people rely on color to understand and distinguish content. Explain that some people cannot perceive color well or at all. Discuss different ways to supplement information presented using color, such as using shapes and icons. @@ -118,10 +118,10 @@ Describe how some people rely on color to understand and distinguish content. Ex Students should be able to: * explain how appropriate use of color enables people with disabilities to read, understand, and distinguish components -* determine sufficient color contrast for text, images of text, and controls -* design text and images of text that have a color contrast of at least 4.5:1 with respect to their background -* design large-scale text and images of text that have a color contrast of at least 3:1 with respect to their background -* design components and graphics that have a color contrast of at least 3:1 with respect to their background +* determine sufficient contrast ratiofor text, images of text, and controls +* design text and images of text that have a contrast ratio of at least 4.5:1 with respect to their background +* design large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background +* design components and graphics that have a contrast ratio of at least 3:1 with respect to their background * define layouts to enable users to change colors based on customized screen sizes, screen configurations, and style sheets * use visual cues in addition to text color, for example by using different patterns, shapes, and icons * use text to complement information provided visually @@ -130,16 +130,16 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of sufficient and insufficient color contrast for text. Explain that color contrast for text (including images of text) needs to be at least 4.5:1 with respect to their background. For references on how to apply sufficient color contrast to text (including images of text), see technique [G18: Ensuring that a color contrast of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). -* Show examples of different interactive components, such as buttons and links. Explain that they should have a color contrast of at least 3:1. For references on how to apply sufficient color contrast to interactive components, see techniques [G207: Ensuring that a contrast ratio of 3:1 is provided for icons](https://www.w3.org/WAI/WCAG21/Techniques/general/G207) and [G209: Provide sufficient contrast at the boundaries between adjoining colors](https://www.w3.org/WAI/WCAG21/Techniques/general/G209). +* Show examples of sufficient and insufficient contrast ratio for text. Explain that contrast ratio for text (including images of text) needs to be at least 4.5:1 with respect to their background. For references on how to apply sufficient contrast ratio to text (including images of text), see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). +* Show examples of different interactive components, such as buttons and links. Explain that they should have a contrast ratio of at least 3:1. For references on how to apply sufficient contrast ratio to interactive components, see techniques [G207: Ensuring that a contrast ratio of 3:1 is provided for icons](https://www.w3.org/WAI/WCAG21/Techniques/general/G207) and [G209: Provide sufficient contrast at the boundaries between adjoining colors](https://www.w3.org/WAI/WCAG21/Techniques/general/G209). * Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so they require additional methods to convey that information. For references on how to supplement information conveyed through color, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Short Answer Questions — Give students several components and ask them what the color contrast should be. Assess how students understand and distinguish sufficient color contrast for different components. -* Practical — Have students design a prototype and apply sufficient color contrast to text, images of text, components, and graphics. Assess how students understand and apply sufficient color contrast based on the different components that they are designing. +* Short Answer Questions — Give students several components and ask them what the contrast ratio should be. Assess how students understand and distinguish sufficient contrast ratio for different components. +* Practical — Have students design a prototype and apply sufficient contrast ratio to text, images of text, components, and graphics. Assess how students understand and apply sufficient contrast ratio based on the different components that they are designing. * Practical — Discuss examples of information presented using color. Ask students to supplement that information using other visual cues. Assess how students use shapes and icons to supplement information presented using color distinguishable. {% include excol.html type="end" %} @@ -262,7 +262,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Short Answer Questions — Ask students about the color contrast ratios for the different user interface components. Assess how students understand the different color contrast requirements depending on the components. +* Short Answer Questions — Ask students about the contrast ratio for the different user interface components. Assess how students understand the different contrast ratio requirements depending on the components. * Portfolio — Have students design a web page. Assess how students use customizable color, layout, spacing, and position to support content perception, identification, and readability. ## Teaching Resources From cdd247397edd60fa0a52875a347295f6f6ffad26 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 1 Dec 2021 17:51:55 +0100 Subject: [PATCH 318/416] designers'/developers' -> designer's/developer's --- content/designer/forms-design.md | 6 +++--- content/designer/images-and-graphics.md | 4 ++-- content/designer/information-design.md | 14 +++++++------- content/designer/interaction-design.md | 4 ++-- content/designer/multimedia-and-animations.md | 8 ++++---- content/designer/navigation-design.md | 4 ++-- content/designer/visual-design.md | 2 +- 7 files changed, 21 insertions(+), 21 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 0e79ccea7..aa5e770ba 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -182,7 +182,7 @@ Optional ideas to teach the learning outcomes: * Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. * Show examples of different form elements, for example buttons, checkboxes, text boxes, and listboxes, across websites and applications. Emphasize that each should have a clear name that identifies its purpose. For reference on how to provide consistent names for different form elements across websites and applications, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). * Show examples of required and non-required form fields. Explain that instructions about which of the fields are required should be provided using several methods, including visual and non-visual instructions. -* Present examples of time limits, such as those warning about session expirations. Explain that visual and non-visual instructions must be provided so that users are aware of the time limits, and methods must be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designers' responsibility, whereas implementing methods to stop, extend, or adjust time limits is a responsibility shared with the developer. +* Present examples of time limits, such as those warning about session expirations. Explain that visual and non-visual instructions must be provided so that users are aware of the time limits, and methods must be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designer's responsibility, whereas implementing methods to stop, extend, or adjust time limits is a responsibility shared with the developer. * Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. #### Ideas to Assess Knowledge for Topic @@ -243,7 +243,7 @@ Optional ideas to assess knowledge: Show examples of notification messages. Explain that they must be identified both visually and programmatically in order to be distinguishable by all users. -Show examples of visual and non-visual notifications for error messages and other types of feedback for forms. Explain that notifications may have different levels of priority when in the context of a complex form. Explain that defining such levels of priority and which types of notifications each of these levels should contain is a designers' responsibility whereas implementing these levels is a developers' responsibility. +Show examples of visual and non-visual notifications for error messages and other types of feedback for forms. Explain that notifications may have different levels of priority when in the context of a complex form. Explain that defining such levels of priority and which types of notifications each of these levels should contain is a designer's responsibility whereas implementing these levels is a developer's responsibility. #### Learning Outcomes for Topic @@ -263,7 +263,7 @@ Optional ideas to teach the learning outcomes: * Show examples of placement and appearance of notifications. Explain that these notifications must be distinguishable both visually and non-visually. Explain that defining the notifications placement and appearance is responsibility of the designer, whereas implementing such notifications is a developer's responsibility. * Show examples of different methods to communicate notifications, such as through text messages, semantic relations, haptic and audio feedback, and popup windows. Explain that there needs to be a variety of methods available to allow interaction by different groups of users. -* Show examples of overlapping notifications. Explain that some users may find it daunting to process several notifications at the same time, so a method needs to be defined that allows to prioritize notifications based on their relevance. Explain that defining methods to prioritize notifications based on their relevance is a designers' responsibility, whereas implementing the methods is a developers' responsibility. +* Show examples of overlapping notifications. Explain that some users may find it daunting to process several notifications at the same time, so a method needs to be defined that allows to prioritize notifications based on their relevance. Explain that defining methods to prioritize notifications based on their relevance is a designer's responsibility, whereas implementing the methods is a developer's responsibility. * Demonstrate examples of notification processing using assistive technologies, including screen readers and voice assistants. Explain that the notifications may come at a faster pace than the technology is able to process, so users may end up missing information. Emphasize that it is good practice to design methods to store the notifications to allow users to check the notifications at their own pace. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 5b343c793..40a1d3ea5 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -210,7 +210,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Refer back to [Designer Module 1: Visual Design, Topic: Color](/curricula/designer-modules/visual-design/#topic-use-of-color). Explain that they must have a contrast ratio of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). -* Explain that complex images must also have text descriptions that allow people who don’t see them to understand and interact with the image content. Explain that providing these text alternatives is a designers' responsibility, whereas providing the text descriptions is a responsibility shared with the content author. +* Explain that complex images must also have text descriptions that allow people who don’t see them to understand and interact with the image content. Explain that providing these text alternatives is a designer's responsibility, whereas providing the text descriptions is a responsibility shared with the content author. #### Ideas to Assess Knowledge for Topic @@ -243,7 +243,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of images and graphics that do not convey function or information, such as ornamental icons. Explain that they serve ornamental purposes as long as people can understand and interact with the user interface with or without such icons. Explain that deciding what is the images' role is a designers' responsibility, whereas coding the images so that they render with the appropriate role is a developers' responsibility. +* Show examples of images and graphics that do not convey function or information, such as ornamental icons. Explain that they serve ornamental purposes as long as people can understand and interact with the user interface with or without such icons. Explain that deciding what is the images' role is a designer's responsibility, whereas coding the images so that they render with the appropriate role is a developer's responsibility. * Invite students to research how overuse of decorative images can impact some users. For example, too many decorative images can create distractions and cognitive overload, as well as slow down loading times. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 8878fd73b..cd41315cc 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -128,11 +128,11 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of pages and explain how they are divided into several regions. Demonstrate that, in addition to visually distinguishing these regions, semantics and text are needed to ensure that all users can understand the relations between them. Explain that defining and planning the different regions is a designers' responsibility, whereas adding the semantics is a responsibility shared with the developer. +* Show examples of pages and explain how they are divided into several regions. Demonstrate that, in addition to visually distinguishing these regions, semantics and text are needed to ensure that all users can understand the relations between them. Explain that defining and planning the different regions is a designer's responsibility, whereas adding the semantics is a responsibility shared with the developer. * Show examples of online articles and forms. Discuss how these are divided into manageable pieces so that they are easier to understand and to navigate. For example, by using headings with their corresponding rank levels to indicate the different chapters, sections, and subsections of content. * Show examples of diagrams and illustrations that can complement the information presented in text. For example, visual instructions that supplement the textual information of a user manual. Explain that they help users with reading disabilities to understand difficult pieces of text. Explain that defining the presentation of such diagrams and illustrations is a responsibility of the designer, whereas providing the diagrams and illustrations is a responsibility of the content author. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). -* Show examples of words that may be difficult to understand or that are used in a specialized way. Explain that people who are not familiar with such words need definitions to understand their meaning. Explain that defining the methods to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. -* Show examples of abbreviations, such as short forms of words and acronyms. Explain that people who are not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand them. Explain that specifying the methods to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. +* Show examples of words that may be difficult to understand or that are used in a specialized way. Explain that people who are not familiar with such words need definitions to understand their meaning. Explain that defining the methods to provide such definitions is a designer's responsibility, whereas providing the definitions is a responsibility shared with the content author. +* Show examples of abbreviations, such as short forms of words and acronyms. Explain that people who are not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand them. Explain that specifying the methods to provide such explanations or expansions is a designer's responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. #### Ideas to Assess Knowledge for Topic @@ -165,10 +165,10 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of names for components, including links, buttons, and form controls. Explain that these names help users identify these components. Explain that defining the presentation of these names is a designers' responsibility, implementing these names is a developers' responsibility, and defining names is a responsibility shared with the content author. +* Show examples of names for components, including links, buttons, and form controls. Explain that these names help users identify these components. Explain that defining the presentation of these names is a designer's responsibility, implementing these names is a developer's responsibility, and defining names is a responsibility shared with the content author. * Show examples of overall instructions, for example indications of what will happen after pressing a button. Explain that these instructions help users better understand the purpose and functionality of components. Explain that instruction presentation is a designer's responsibility, implementing these instructions is a developer's responsibility, and defining the content of these instructions is a responsibility shared with the content author. -* Show examples of multi-step processes, such as a multi-step form, with instructions to indicate the current step and total number of steps in the process. Then show examples of multi-step processes without such instructions. Compare the user experiences for each of the examples. Explain that people rely on such instructions to get an understanding of where they are in the process and how many steps the process has. Explain that defining the presentation of such instructions is a designers' responsibility, implementing these instructions is a developers' responsibility, and providing these instructions is a responsibility shared with the content author. -* Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to understand and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and programmatically, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look is a designers' responsibility, whereas coding those relations is a developers' responsibility. +* Show examples of multi-step processes, such as a multi-step form, with instructions to indicate the current step and total number of steps in the process. Then show examples of multi-step processes without such instructions. Compare the user experiences for each of the examples. Explain that people rely on such instructions to get an understanding of where they are in the process and how many steps the process has. Explain that defining the presentation of such instructions is a designer's responsibility, implementing these instructions is a developer's responsibility, and providing these instructions is a responsibility shared with the content author. +* Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to understand and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and programmatically, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look is a designer's responsibility, whereas coding those relations is a developer's responsibility. #### Ideas to Assess Knowledge for Topic @@ -209,7 +209,7 @@ Optional ideas to teach the learning outcomes: * Show examples of different types of information presented in tables. Explain that tables are used when there is a logical, tabular relationship between the information presented, for example when displaying a list of events with their date and venue. * Refer back to [Designer Module 1: Visual Design, Topic: Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts) and explain that some users may require different ways of presenting tabular information. For example, providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. -* Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells must be perceived both visually and programmatically. Explain that providing the styles is a designers' responsibility, whereas establishing the programmatic relation is a responsibility shared with the developer. +* Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells must be perceived both visually and programmatically. Explain that providing the styles is a designer's responsibility, whereas establishing the programmatic relation is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index 6f6514d8b..f404b6a13 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -121,7 +121,7 @@ Topics to achieve the learning outcomes: Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain how keyboard support benefits other ways of interacting, including voice interaction and interaction using some assistive technologies. -Present examples of specific non-standard shortcuts. Explain that providing custom keyboard interactions can support efficiency but can also disrupt the users' expectations. Designers must document these custom interactions and make them consistent throughout the interface. Emphasize that defining the keyboard interactions is a designers' responsibility, whereas implementing such interactions is a responsibility shared with the developer. +Present examples of specific non-standard shortcuts. Explain that providing custom keyboard interactions can support efficiency but can also disrupt the users' expectations. Designers must document these custom interactions and make them consistent throughout the interface. Emphasize that defining the keyboard interactions is a designer's responsibility, whereas implementing such interactions is a responsibility shared with the developer. #### Learning Outcomes for Topic @@ -154,7 +154,7 @@ Optional ideas to teach the learning outcomes: * Present examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. * Invite students to research how assistive technologies and adaptive strategies rely on keyboard support to provide specific functionality, such as navigating sequentially using voice commands. Demonstrate interaction with assistive technologies in web pages and applications with and without keyboard support. * Refer back to [Designer Module 1: Visual Design, Topic Orientation Cues](/curricula/designer-modules/visual-design/#topic-orientation-cues) to reflect on focus indicators. Explain that, in addition to visually distinguishable focus indicators, designers must consider programmatic keyboard focus must be considered when providing keyboard support. Emphasize that designers must cooperate with other team members, including developers and user researchers, to design user experiences that use focus placement to reflect changes of context and user interaction. -* Show examples of help functionality for custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using those shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these help methods is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. +* Show examples of help functionality for custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using those shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these help methods is a designer's responsibility, whereas implementing them is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index ab2fdd5d0..5c4cb03ca 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -138,10 +138,10 @@ Students should be able to Optional ideas to teach the learning outcomes: -* Show examples of description of visual information. Emphasize how these alternatives describe the visual information (including text) for people who cannot see the videos. Explain that different standards and policies may refer to description of visual information using different terms, such as audio description, video description, and described videos. Explain that defining the methods to turn on and off the description is a designers' responsibility, whereas providing the description is a responsibility shared with the content author. -* Show examples of captions. Explain that captions are a synchronized text version of the speech and non-speech audio information needed to understand the content. Explain that different standards and policies may refer to captions using different terms, such as subtitles. Explain that defining the methods to turn on and off the captions is a designers' responsibility, whereas providing the captions is a responsibility shared with the content author. Explain that determining where to place captions and in what color and font they are presented is a designers' responsibility, whereas providing such captions is a responsibility shared with the content author. -* Show examples of text transcripts. Explain that transcripts are a text version of the speech and non-speech audio information needed to understand the content. Explain that defining the placement and spacing for the transcripts is a designers' responsibility, whereas providing the transcripts is a responsibility shared with the content author. -* Show examples of sign language. Explain that sign language is essential for people who are deaf and who do not understand written language well. Explain that defining the methods to enable and disable sign language is a designers' responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. +* Show examples of description of visual information. Emphasize how these alternatives describe the visual information (including text) for people who cannot see the videos. Explain that different standards and policies may refer to description of visual information using different terms, such as audio description, video description, and described videos. Explain that defining the methods to turn on and off the description is a designer's responsibility, whereas providing the description is a responsibility shared with the content author. +* Show examples of captions. Explain that captions are a synchronized text version of the speech and non-speech audio information needed to understand the content. Explain that different standards and policies may refer to captions using different terms, such as subtitles. Explain that defining the methods to turn on and off the captions is a designer's responsibility, whereas providing the captions is a responsibility shared with the content author. Explain that determining where to place captions and in what color and font they are presented is a designer's responsibility, whereas providing such captions is a responsibility shared with the content author. +* Show examples of text transcripts. Explain that transcripts are a text version of the speech and non-speech audio information needed to understand the content. Explain that defining the placement and spacing for the transcripts is a designer's responsibility, whereas providing the transcripts is a responsibility shared with the content author. +* Show examples of sign language. Explain that sign language is essential for people who are deaf and who do not understand written language well. Explain that defining the methods to enable and disable sign language is a designer's responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. * Show examples of accessible and inaccessible media players. Emphasize that it is generally more reliable to use an existing media player with support for accessibility than to design one from scratch. Emphasize how accessible media players are operable by keyboard, make keyboard focus visible, have clear labels, have appropriate contrast ratios, and are easy to find on the page. For an overview on skills needed to develop a media player, expected functionality, and existing players, see the resource Making Audio and Video Media Accessible, [Media players](/media/av/player/). #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 98de83179..5a88b08be 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -137,9 +137,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Present different types of navigation menus, such as static, fly-out, and mega menus. Explain conventions for accessible navigation menus, for example clear and consistent styling to convey menu behaviors and states. -* Demonstrate interactions with navigation menus using different input devices, including keyboard, mouse, touch, and voice. For example, activating a menu option by tapping, pressing the Enter and Space keys, and mouse clicking. Explain that defining the interactions is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. +* Demonstrate interactions with navigation menus using different input devices, including keyboard, mouse, touch, and voice. For example, activating a menu option by tapping, pressing the Enter and Space keys, and mouse clicking. Explain that defining the interactions is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. * Show examples of navigation menus and menu items with large text. Explain that the text needs to adapt to different viewports and screen configurations, for example lines of text must wrap to avoid horizontal scrolling. Explain that different languages may have different word sizes, so designers must consider provisions for different word lengths. -* Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Explain how to communicate the states of these menu items visually and non-visually. Explain that defining the visual presentation is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. +* Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Explain how to communicate the states of these menu items visually and non-visually. Explain that defining the visual presentation is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 82eaac936..fc5eaefe7 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -201,7 +201,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Invite students to use a web page that has appropriate focus indicators first, and then invite them to use a web page without focus indicators. Explain how focus indicators allow people who rely on keyboard navigation to determine where they are as they move through web pages and applications. For reference on how to provide appropriate focus indicators, see techniques [G149: Using user interface components that are highlighted by the user agent when they receive focus](https://www.w3.org/WAI/WCAG21/Techniques/general/G149.html) and [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). -* Show examples of different web page regions, such as header, navigation, main, and footer. Explain that several groups of people with disabilities rely on visual and programmatic cues to perceive such regions. Explain that defining the presentation of these cues is a designers' responsibility, whereas implementing such cues and their semantics is a developers' responsibility. +* Show examples of different web page regions, such as header, navigation, main, and footer. Explain that several groups of people with disabilities rely on visual and programmatic cues to perceive such regions. Explain that defining the presentation of these cues is a designer's responsibility, whereas implementing such cues and their semantics is a developer's responsibility. * Show examples of interfaces where information is provided through vision only, such as those with icons and color to convey the status of different tasks in a project. Explain that some people cannot rely on visual means to obtain information. These users need text to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). #### Ideas to Assess Knowledge for Topic From 670a277cbeb2f18e829c942cf775a5dc34c9f260 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 1 Dec 2021 19:11:35 +0100 Subject: [PATCH 319/416] Grammar fixes --- content/designer/forms-design.md | 2 +- content/designer/information-design.md | 2 +- content/designer/interaction-design.md | 2 +- content/designer/navigation-design.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index aa5e770ba..707702b3a 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -229,7 +229,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Give students an interface containing errors and ask them to provide an overall descriptive message informing that there are submission errors. Assess how students provide overall informative messages when there are submission errors -* Practical — Give students a form field submission containing errors and ask them to provide messages about each of the wrongly submitted field. Assess how students provide appropriate error messages for wrongly submitted fields and how they provide suggestions for correction when possible. +* Practical — Give students a form field submission containing errors and ask them to provide messages about each of the wrongly submitted fields. Assess how students provide appropriate error messages for wrongly submitted fields and how they provide suggestions for correction when possible. * Practical — Give students a form field submission containing errors and ask them to provide suggestion for correction when possible. Assess how students provide suggestion for correction. * Practical — Give students a form submission containing legal data and ask them to provide methods to reverse, check, and confirm that submission. Assess how students understand the need for methods to reverse, check, and confirm critical submissions. diff --git a/content/designer/information-design.md b/content/designer/information-design.md index cd41315cc..1a380ad7e 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -44,7 +44,7 @@ Students should be able to: * define methods to communicate both visually and non-visually all relevant information about multi-step processes * describe how to communicate the structure of multi-page articles or processes visually and non-visually * describe how to provide information about the name and purpose of components using descriptive labels and instructions -* discuss ways to break down information presented in tables, including use of simple tables, lists, imagery, and plain text +* discuss ways to break down information presented in tables, including the use of simple tables, lists, imagery, and plain text * evaluate the use of several methods to convey the information, including text, labels, instructions, semantics, and imagery depending on user needs * identify related requirements for developers to programmatically associate landmarks, headings, table header cells and data cells, as well as form labels and instructions to their corresponding control diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index f404b6a13..c4615bdaf 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -160,7 +160,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Short Answer Questions — Ask students about commonly used modifier keys of operating systems, browsers, and assistive technologies. Assess how students identify commonly used modifier keys in operating systems, browsers, and assistive technologies. +* Short Answer Questions — Ask students about the commonly used modifier keys in operating systems, browsers, and assistive technologies. Assess how students identify commonly used modifier keys in operating systems, browsers, and assistive technologies. * Practical — Give students an interface that only works with the mouse and ask them to provide keyboard interaction. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. * Practical — Have students cooperate with developers to avoid custom keyboard shortcut conflicts with existing operating system and assistive technology keystrokes. Assess how students cooperate with developers to develop strategies that avoid custom keyboard shortcut conflicts. * Practical — Give students a custom widget and ask them to define appropriate focus placement and appearance depending on changes in context and user interaction. Assess how students create user experiences that consider visual focus indicators and focus placement. diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 5a88b08be..65136b7a6 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -232,7 +232,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Have students define the blocks of repeated content in a website and cooperate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they cooperate with developers to provide a method to bypass such blocks. -* Practical — Give students a document and ask them to provide the table of contents. Assess how students provide table of contents for documents. +* Practical — Give students a document and ask them to provide the table of contents. Assess how students provide the table of contents for documents. {% include excol.html type="end" %} From 27b9c99a6e203a9825873fabe04d00593d39e91c Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 1 Dec 2021 19:14:06 +0100 Subject: [PATCH 320/416] Avoids good/bad value dichotomy --- content/designer/visual-design.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index fc5eaefe7..73ecc02f8 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -111,7 +111,7 @@ Topics to achieve the learning outcomes: Explain how sufficient contrast ratio is essential for people with disabilities to perceive, distinguish, and understand content. -Describe how some people rely on color to understand and distinguish content. Explain that some people cannot perceive color well or at all. Discuss different ways to supplement information presented using color, such as using shapes and icons. +Describe how some people rely on color to understand and distinguish content. Explain that some people perceive color in different ways, and that some may not perceive color at all. Discuss different ways to supplement information presented using color, such as using shapes and icons. #### Learning Outcomes for Topic @@ -132,7 +132,7 @@ Optional ideas to teach the learning outcomes: * Show examples of sufficient and insufficient contrast ratio for text. Explain that contrast ratio for text (including images of text) needs to be at least 4.5:1 with respect to their background. For references on how to apply sufficient contrast ratio to text (including images of text), see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). * Show examples of different interactive components, such as buttons and links. Explain that they should have a contrast ratio of at least 3:1. For references on how to apply sufficient contrast ratio to interactive components, see techniques [G207: Ensuring that a contrast ratio of 3:1 is provided for icons](https://www.w3.org/WAI/WCAG21/Techniques/general/G207) and [G209: Provide sufficient contrast at the boundaries between adjoining colors](https://www.w3.org/WAI/WCAG21/Techniques/general/G209). -* Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so they require additional methods to convey that information. For references on how to supplement information conveyed through color, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). +* Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some people perceive color in different ways, and that some may not perceive color at all. Some people may require methods different from color to understand that information. For references on how to supplement information conveyed through color, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). #### Ideas to Assess Knowledge for Topic From ca7f7abe150d5bf1b5d90d008c4f971459c66cac Mon Sep 17 00:00:00 2001 From: Kevin White Date: Thu, 2 Dec 2021 09:43:39 +0000 Subject: [PATCH 321/416] Minor text edits (#432) Co-authored-by: daniel-montalvo --- content/designer/forms-design.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 707702b3a..428990906 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -39,7 +39,7 @@ Students should be able to: * define consistent use, placement, and appearance of form elements * define interactions with form elements, including through mouse, keyboard, touch, and voice * define clear and distinguishable names as well as visual and non-visual instructions to understand the purpose and functionality of form elements -* define clear and descriptive visual and non-visual instructions about the current step and about the total number of steps in multi-step forms +* define clear and descriptive visual and non-visual instructions for the current step and the total number of steps in multi-step forms * define clear and descriptive error messages that: * identify the field in error * provide suggestions for correction when possible @@ -127,7 +127,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Explore different form elements and their intended purpose, including edit boxes, check boxes, radio buttons, and buttons. Explain uses of standard versus non-standard components and how use of non-standard elements impacts accessibility. +Explore different form elements and their intended purpose, including edit boxes, check boxes, radio buttons, and buttons. Explain uses of standard versus non-standard elements and how use of non-standard elements impacts accessibility. #### Learning Outcomes for Topic @@ -169,10 +169,10 @@ Students should be able to: * design user experiences that consider position and appearance for labels and instructions * define clear and consistent names for form elements across websites and applications -* define visual and non-visual instructions about which input fields are required +* define visual and non-visual instructions for required input fields * define clear visual and non-visual instructions about changes in context before the component that originates such changes * define overall visual and non-visual instructions about existing time limits in a form and about how to adjust them, extend them, and turn them off -* define clear visual and non-visual instructions about the current step and about the total number of steps involved in a multi-step form +* define clear visual and non-visual instructions for the current step and the total number of steps involved in a multi-step form * identify related requirements for developers to provide semantics for labels and instructions #### Teaching Ideas for Topic From 558e3840293694cc9f1b46150b5b7007aa23239d Mon Sep 17 00:00:00 2001 From: Kevin White Date: Thu, 2 Dec 2021 09:51:01 +0000 Subject: [PATCH 322/416] Minor edits (#431) * Minor edits * Changes based on survey feedback * Adding G207 and G209 -- fixes [Designer Module 1: Visual Design] Topic: Color - teaching ideas #400 * "easy to find" -> "easy to find on the page" -- fixes [Designer Module 6: Multimedia and Animations] Editorial suggestion for teaching idea on media players for topic Alternatives to Multimedia Content #420 * Color Contrast -> Contrast Ratio * designers'/developers' -> designer's/developer's * Grammar fixes * Avoids good/bad value dichotomy Co-authored-by: daniel-montalvo --- content/designer/designer-modules.md | 2 +- content/designer/forms-design.md | 32 ++++++------ content/designer/images-and-graphics.md | 49 ++++++++++--------- content/designer/information-design.md | 16 +++--- content/designer/interaction-design.md | 30 ++++++------ content/designer/multimedia-and-animations.md | 34 +++++++------ content/designer/navigation-design.md | 12 ++--- content/designer/visual-design.md | 34 ++++++------- 8 files changed, 107 insertions(+), 102 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index aa243d840..dd2b25ed2 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -36,7 +36,7 @@ The designer modules guide the creation of courses that: * interaction design * images and graphics * multimedia and animations - * forms + * forms design These modules focus on accessible user experiences. They are primarily designed for teaching: diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 80ac62a11..707702b3a 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -84,7 +84,7 @@ Skills required for this module: * [WCAG Success Criterion 1.3.2 Meaningful Sequence](https://www.w3.org/WAI/WCAG21/quickref/#meaningful-sequence) * [WCAG Success Criterion 1.3.3 Sensory Characteristics](https://www.w3.org/WAI/WCAG21/quickref/#sensory-characteristics) * [WCAG Success Criterion 1.3.4 Orientation](https://www.w3.org/WAI/WCAG21/quickref/#orientation) - * [WCAG Success Criteria 1.3.5 Identify Input Purpose](https://www.w3.org/WAI/WCAG21/quickref/#identify-input-purpose) + * [WCAG Success Criterion 1.3.5 Identify Input Purpose](https://www.w3.org/WAI/WCAG21/quickref/#identify-input-purpose) * [WCAG Success Criterion 1.4.1 Use of Color](https://www.w3.org/WAI/WCAG21/quickref/#use-of-color) * [WCAG Success Criterion 1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum) * [WCAG Success Criterion 1.4.4 Resize Text](https://www.w3.org/WAI/WCAG21/quickref/#resize-text) @@ -127,7 +127,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Show examples of different form elements and their intended purpose, including edit boxes, check boxes, radio buttons, and buttons. Explain uses of standard versus non-standard components and how use of non-standard elements impacts accessibility. +Explore different form elements and their intended purpose, including edit boxes, check boxes, radio buttons, and buttons. Explain uses of standard versus non-standard components and how use of non-standard elements impacts accessibility. #### Learning Outcomes for Topic @@ -144,13 +144,13 @@ Students should be able to: Optional ideas to teach the learning outcomes. * Show examples of different form elements and reflect on their intended purpose. For example, edit boxes, check boxes, radio buttons, and buttons. Emphasize that using a form element with an unintended purpose can cause cognitive overload as well as compatibility issues with assistive technologies and adaptive strategies. -* Show examples of standard versus non-standard form elements. Explain that standard elements are generally accessible by default, and that there is little need for extra work to make them accessible at a later phase. However, use of non-standard elements generally requires further coding to ensure these elements are usable with the keyboard and compatible with assistive technologies. +* Show examples of standard versus non-standard form elements. Explain that standard elements are generally accessible by default, and that there is little need for extra work to make them accessible at a later phase. However, use of non-standard elements generally requires additional coding to ensure these elements are usable with the keyboard and compatible with assistive technologies. #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -* Short Answer Questions — Give students specific purposes for form elements. Ask them to research how to convey these purposes using standard elements when possible, and to elaborate on what are the accessibility implications of using non-standard elements. Assess how students understand and communicate the accessibility implications of using non-standard elements. +* Short Answer Questions — Give students specific purposes for form elements. Ask them to research how to communicate these purposes using standard elements. If standard elements are found to be inadequate for the purpose, have students discuss the accessibility requirements for using non-standard elements and how they would approach such requirements. Assess how students understand and communicate the accessibility requirements for using non-standard elements. * Practical — Ask students to select the appropriate form elements based on a given set of input requirements. Ask students to use standard elements when possible for each of these input requirements and to annotate keyboard interaction and expected behavior with assistive technologies when using non-standard elements. Assess how students annotate keyboard interactions and expected behavior with assistive technologies when using non-standard elements. {% include excol.html type="end" %} @@ -182,14 +182,14 @@ Optional ideas to teach the learning outcomes: * Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. * Show examples of different form elements, for example buttons, checkboxes, text boxes, and listboxes, across websites and applications. Emphasize that each should have a clear name that identifies its purpose. For reference on how to provide consistent names for different form elements across websites and applications, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). * Show examples of required and non-required form fields. Explain that instructions about which of the fields are required should be provided using several methods, including visual and non-visual instructions. -* Present examples of time limits, such as those warning about session expirations. Explain that visual and non-visual instructions need to be provided so that users are aware of the time limits, and methods need to be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designers' responsibility, whereas implementing methods to stop, extend, or adjust time limits is a responsibility shared with the developer. +* Present examples of time limits, such as those warning about session expirations. Explain that visual and non-visual instructions must be provided so that users are aware of the time limits, and methods must be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designer's responsibility, whereas implementing methods to stop, extend, or adjust time limits is a responsibility shared with the developer. * Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Give students a form and ask them to define labels for each of the fields. Assess how students provide clear and descriptive names for each of the form fields. +* Practical — Give students a form and ask them to assign labels for each of the fields. Assess how students provide clear and descriptive names for each of the form fields. * Practical — Give students a form with required and non-required fields and ask them to provide visual and non-visual instructions to communicate the required fields. Assess how students provide clear and understandable instructions for each required field. * Practical — Give students a form and ask them to provide the necessary instructions for users to understand each of the fields and fill in the form. Assess how students provide clear and concise instructions. @@ -218,10 +218,10 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of placement and appearance of error messages. Explain that some users rely on consistent placement and appearance of these messages to identify the errors. +* Show both effective and ineffective examples of placement and appearance of error messages. Explain that some users rely on consistent placement and appearance of these messages to identify the errors. * Show examples of overall information about submission errors. Explain that this information makes users aware that their submission contains errors and help them search for specific error messages in the rest of the content. -* Show examples of specific messages that identify each of the fields in error. Explain that these messages help users identify and locate the specific fields that contain errors. Mention that it is best practice to keep the original submission when possible, so that users can understand what needs to be corrected. -* Show examples of suggestions for correction. Explain that these suggestions help users understand what the right way is to submit the form. Emphasize that these suggestions should be provided when possible, unless they compromise the security and the purpose of the form. +* Show effective and ineffective examples of specific messages that identify each of the fields in error. Explain that these messages help users identify and locate the specific fields that contain errors. Mention that it is best practice to keep the original submission when possible, so that users can understand what needs to be corrected. +* Show effective and ineffective examples of suggestions for correction. Explain that these suggestions help users understand what the right way is to submit the form. Emphasize that these suggestions should be provided when possible, unless they compromise the security and the purpose of the form. * Show examples of critical submissions, for example buying an airline ticket and submitting legal data. Discuss methods to reverse, check, and confirm the information included in such submissions. #### Ideas to Assess Knowledge for Topic @@ -229,7 +229,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Give students an interface containing errors and ask them to provide an overall descriptive message informing that there are submission errors. Assess how students provide overall informative messages when there are submission errors -* Practical — Give students a form field submission containing errors and ask them to provide messages about each of the wrongly submitted field. Assess how students provide appropriate error messages for wrongly submitted fields and how they provide suggestions for correction when possible. +* Practical — Give students a form field submission containing errors and ask them to provide messages about each of the wrongly submitted fields. Assess how students provide appropriate error messages for wrongly submitted fields and how they provide suggestions for correction when possible. * Practical — Give students a form field submission containing errors and ask them to provide suggestion for correction when possible. Assess how students provide suggestion for correction. * Practical — Give students a form submission containing legal data and ask them to provide methods to reverse, check, and confirm that submission. Assess how students understand the need for methods to reverse, check, and confirm critical submissions. @@ -241,9 +241,9 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Show examples of notification messages. Explain that they need to be distinguishable by all users, including visually and programmatically. +Show examples of notification messages. Explain that they must be identified both visually and programmatically in order to be distinguishable by all users. -Show examples of visual and non-visual notifications for error messages and other types of feedback for forms. Explain that notifications may have different levels of priority when in the context of a complex form. Explain that defining such levels of priority and which types of notifications each of these levels should contain is a designers' responsibility whereas implementing these levels is a developers' responsibility. +Show examples of visual and non-visual notifications for error messages and other types of feedback for forms. Explain that notifications may have different levels of priority when in the context of a complex form. Explain that defining such levels of priority and which types of notifications each of these levels should contain is a designer's responsibility whereas implementing these levels is a developer's responsibility. #### Learning Outcomes for Topic @@ -251,7 +251,7 @@ Students should be able to: * define the placement and appearance of notifications * define meaningful and descriptive notification messages, including: - * on input (to communicate if the provided input is valid or invalid + * on input (to communicate if the provided input is valid or invalid) * on task completion (to communicate success or failure of a specific task) * design user experiences to queue and prioritize application notifications coming from different components * design user experiences to store notifications that disappear after a period of time to be checked at the users' pace @@ -261,16 +261,16 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of placement and appearance of notifications. Explain that these notifications need to be distinguishable both visually and non-visually. Explain that defining the notifications placement and appearance is responsibility of the designer, whereas implementing such notifications is a developer's responsibility. +* Show examples of placement and appearance of notifications. Explain that these notifications must be distinguishable both visually and non-visually. Explain that defining the notifications placement and appearance is responsibility of the designer, whereas implementing such notifications is a developer's responsibility. * Show examples of different methods to communicate notifications, such as through text messages, semantic relations, haptic and audio feedback, and popup windows. Explain that there needs to be a variety of methods available to allow interaction by different groups of users. -* Show examples of overlapping notifications. Explain that some users may find it daunting to process several notifications at the same time, so a method needs to be defined that allows to prioritize notifications based on their relevance. Explain that defining methods to prioritize notifications based on their relevance is a designers' responsibility, whereas implementing the methods is a developers' responsibility. +* Show examples of overlapping notifications. Explain that some users may find it daunting to process several notifications at the same time, so a method needs to be defined that allows to prioritize notifications based on their relevance. Explain that defining methods to prioritize notifications based on their relevance is a designer's responsibility, whereas implementing the methods is a developer's responsibility. * Demonstrate examples of notification processing using assistive technologies, including screen readers and voice assistants. Explain that the notifications may come at a faster pace than the technology is able to process, so users may end up missing information. Emphasize that it is good practice to design methods to store the notifications to allow users to check the notifications at their own pace. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Give students a form field that validate on user input and ask them to provide descriptive validation messages. Assess how students provide clear validation messages for fields that validate on user input. +* Practical — Give students a form field that validates on user input and ask them to provide descriptive validation messages. Assess how students provide clear validation messages for fields that validate on user input. * Practical — Give students a form with notifications coming from different fields and ask them to define methods to queue and prioritize such notifications. Assess how students prioritize and organize notifications coming from different views. {% include excol.html type="end" %} diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 672c8d59d..40a1d3ea5 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -30,7 +30,7 @@ navigation: Courses based on this module should: * explain strategies that people with disabilities use to access information contained in images and graphics -* explain accessibility requirements related to images and graphics, including text alternatives and color contrast +* explain accessibility requirements related to images and graphics, including text alternatives and contrast ratio ## Learning Outcomes for Module @@ -102,7 +102,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Functional images convey functionality of a component. For example, search, print, and save functionality. Explain requirements related to color and contrast to help users distinguish these images from other components. Show examples of graphical links and buttons as well as logos. Discuss with students how they would describe each of those examples. +Functional images convey functionality of a component. For example, search, print, and save functionality are often presented using icon imagery. Explain requirements related to color and contrast to help users distinguish these images from other components. Show examples of graphical links and buttons as well as logos. Discuss with students how they would describe each of those examples. #### Learning Outcomes for Topic @@ -114,22 +114,22 @@ Students should be able to: * adjacent text inside components to understand its function * use consistent naming and imagery for components that have the same functionality across web pages * explain the benefits of using text labels and decorative images for functionality, instead of using images with text alternatives that are only available to some users, such as screen reader users -* apply appropriate color contrast for functional images +* apply appropriate contrast ratio for functional images #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: * Show examples of different images used to convey functionality, for example for printing, searching, or saving a document. Explain that these images need an equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). -* Invite students to research the most common iconography and naming for elements such as print, save, and search. Explain that these iconography and names need to be consistent throughout the website. -* Refer back to [Designer Module 1 Visual Design, Topic Color](/curricula/designer-modules/visual-design/#topic-color) to explain color contrast requirements for functional images. +* Invite students to research the most common iconography and naming for elements such as print, save, and search. Explain that these iconography and names must be consistent throughout the website. +* Refer back to [Designer Module 1 Visual Design, Topic Color](/curricula/designer-modules/visual-design/#topic-color) to explain contrast ratio requirements for functional images. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: * Practical — Give students different examples of images conveying function, such as a printer for a "print" button and a magnifying glass for a "search" button. Ask students to provide an appropriate text alternative. Assess how students identify images that convey function and how they provide text alternatives that describe the functionality of the component the image is attached to. -* Practical — Ask students to design a series of graphical buttons and links in a way that they are perceivable and distinguishable by all users. Assess how students apply accessibility requirements, such as color contrast, to graphical buttons and links. +* Practical — Ask students to design a series of graphical buttons and links in a way that they are perceivable and distinguishable by all users. Assess how students apply accessibility requirements, such as contrast ratio, to graphical buttons and links. {% include excol.html type="end" %} @@ -147,15 +147,15 @@ Explain that providing text alternatives for informative images is a responsibil Students should be able to: -* define text alternatives that present equivalent information as that contained in informative images using the following methods: +* define text alternatives that are equally informative as the described images using the following methods: * boilerplate descriptions that would then be completed and maintained through the development and authoring phases * adjacent textual information to complement images and icons, for example in a news headline * text alternatives that describe the information conveyed by images -* apply the appropriate color contrast to images that are necessary to understand the content +* apply the appropriate contrast ratio to images that are necessary to understand the content * use styled text instead of images of text when the technology in use can provide the desired visual presentation -* define alternatives to biometrics and CAPTCHA, for example by providing visual, auditory, and logical CAPTCHA +* define alternatives to biometrics and CAPTCHA, for example by using visual, auditory, and logical CAPTCHA * explain the issues associated with relying only on one form of biometrics and CAPTCHA, and describe alternative approaches for authentication -* evaluate the issues associated to accessing information contained in informative images +* evaluate the issues associated with accessing information contained in informative images * select other ways to convey the information contained in images when possible, including plain text * identify related requirements for developers to code alternative texts for informative images @@ -163,9 +163,10 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different images that convey information, such as images to provide instructions, and to identify people and objects. Explain that such information needs to be provided using text alternatives, so that the purpose of the image can be understood without having to look at the image. Emphasize that these alternatives may require coordination among designers, developers, and content authors. For references on how to provide text alternatives for images, see [G82: Providing a text alternative that identifies the purpose of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G82.html). -* Explain that images of text present information intended to be read as text. Emphasize that sometimes it is difficult to tell visually if text has been coded as a text or as an image, so coordination among designers, developers, and content authors is needed to determine if the technologies in use can achieve the desired visual presentation. Emphasize that, if an image of text is still required, there needs to be a text alternative that conveys the same information as the image of text. Explain that coding an image of text appropriately is a responsibility of the developer, whereas providing descriptions for images of text is a responsibility shared with the content author. -* Show examples of different verification systems, such as CAPTCHA, to identify human beings trying to access a service or system. Explain that these verification systems need to support several modalities, including visual, auditory, and cognitive. For references on how to provide accessible CAPTCHA, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). +* Show examples of different images that convey information, such as images to provide instructions, and to identify people and objects. Explain that such information must be provided using text alternatives in order to be understood by users who do not see the image. Emphasize that these alternatives may require coordination among designers, developers, and content authors. For references on how to provide text alternatives for images, see [G82: Providing a text alternative that identifies the purpose of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G82.html). +* Explain that images of text present information intended to be read as text. Emphasize that sometimes it is difficult to tell visually if text has been coded as text or as an image. Coordination among designers, developers, +and content authors is therefore needed to determine if the technologies in use can achieve the same desired visual presentation in a text format. Emphasize that, if an image of text is still required, there must be a text alternative that conveys the same information as the image of text. Explain that coding an image of text appropriately is a responsibility of the developer, whereas providing descriptions for images of text is a responsibility shared with the content author. +* Show examples of different verification systems, such as CAPTCHA, to identify human beings trying to access a service or system. Explain that these verification systems must support several modalities, including visual, auditory, and cognitive. For references on how to provide accessible CAPTCHA, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). #### Ideas to Assess Knowledge for Topic @@ -182,7 +183,7 @@ Optional ideas to support assessment. {% include excol.html type="middle" %} -Complex images are those whose description requires more than a short phrase or sentence. Show examples of complex images, including diagrams and charts, and explain accessibility requirements that these images have, such as appropriate color contrast and appropriate text descriptions. +Complex images are those whose description requires more than a short phrase or sentence. Show examples of complex images, including diagrams and charts, and explain accessibility requirements that these images have, such as appropriate contrast ratio and appropriate text descriptions. Explain that coordination among different team members is required to assess the use of complex images based on the overall context, so that the information of such images is perceived and understood visually and through the provided descriptions. @@ -190,7 +191,7 @@ Explain that coordination among different team members is required to assess the Students should be able to: -* apply appropriate color contrast for complex images +* apply appropriate contrast ratio for complex images * evaluate the use of complex images * select other ways to present the information contained in complex images, for example using tables, simpler images, and plain text * determine if and how complex images are operated using input devices, including mouse, keyboard, touch, and voice @@ -198,7 +199,7 @@ Students should be able to: * define clear and consistent identification methods for complex image descriptions, including appropriate headings and expandable and collapsible components * design user experiences for complex images, including: * how to get to the image descriptions - * how the content of the description should look like + * what the description should look like * if the descriptions could ultimately replace the image itself * identify related requirements for content authors to: * provide descriptive, equivalent textual information to understand complex images and graphics, including diagrams, charts, maps, and infographics @@ -208,15 +209,15 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Refer back to [Designer Module 1: Visual Design, Topic: Color](/curricula/designer-modules/visual-design/#topic-use-of-color). Explain that they need to have a color contrast ratio of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required color contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). -* Explain that complex images also need to have text descriptions that allow people to understand and interact with such images without having to look at them. Explain that providing these text alternatives is a designers' responsibility, whereas providing the text descriptions is a responsibility shared with the content author. +* Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Refer back to [Designer Module 1: Visual Design, Topic: Color](/curricula/designer-modules/visual-design/#topic-use-of-color). Explain that they must have a contrast ratio of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). +* Explain that complex images must also have text descriptions that allow people who don’t see them to understand and interact with the image content. Explain that providing these text alternatives is a designer's responsibility, whereas providing the text descriptions is a responsibility shared with the content author. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Have students add complex images to a website, such as charts or diagrams, and ensure they have the required color contrast. Assess how students understand the contrast requirements for complex images. -* Practical — Have students cooperate with developers and content authors to implement a map in a way that everybody can understand its meaning and interact with it. Assess how students identify the need for text alternatives for complex images and cooperate with other team members to ensure such alternatives exist. +* Practical — Have students add complex images to a website, such as charts or diagrams, and ensure they have the required contrast ratio. Assess how students understand the contrast requirements for complex images. +* Practical — Have students cooperate with developers and content authors to implement a map that can be understood and effectively used by all. Assess how students identify the need for text alternatives for complex images and cooperate with other team members to ensure such alternatives are effective. {% include excol.html type="end" %} @@ -242,7 +243,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of images and graphics that do not convey function or information, such as ornamental icons. Explain that they serve ornamental purposes as long as people can understand and interact with the user interface with or without such icons. Explain that deciding what is the images' role is a designers' responsibility, whereas coding the images so that they render with the appropriate role is a developers' responsibility. +* Show examples of images and graphics that do not convey function or information, such as ornamental icons. Explain that they serve ornamental purposes as long as people can understand and interact with the user interface with or without such icons. Explain that deciding what is the images' role is a designer's responsibility, whereas coding the images so that they render with the appropriate role is a developer's responsibility. * Invite students to research how overuse of decorative images can impact some users. For example, too many decorative images can create distractions and cognitive overload, as well as slow down loading times. #### Ideas to Assess Knowledge for Topic @@ -250,7 +251,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Ask students to provide decorative images to illustrate a text article and ask them to ensure these icons are visible in different screen sizes and devices. Assess how students understand the need for decorative images to adapt to the different user needs and preferences. -* Practical — Give students and interface with too many decorative images and ask students to select the ones that avoid distractions, cognitive overload, and slow loading times. Assess how students balance the use of decorative images to avoid distractions, cognitive overload, and slow loading times. +* Practical — Give students an interface with too many decorative images and ask students to identify the ones that are likely to cause distractions, cognitive overload, and slow loading times. Assess how students balance the use of decorative images to minimize distractions, cognitive overload, and slow loading times. {% include excol.html type="end" %} @@ -260,8 +261,8 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Short Answer Questions — Ask students which types of images require which color contrast ratios. Assess how students understand the different types of images and their color contrast requirements. -* Portfolio — Have students design the imagery for a website. Assess how students include accessibility requirements in the images in graphics they design, for example color contrast, text alternatives that belong to the design phase, and placeholders for any other text alternative that is planned for later stages of the design and development process. +* Short Answer Questions — Ask students which types of images require which contrast ratio. Assess how students understand the different types of images and their contrast ratio requirements. +* Portfolio — Have students design the imagery for a website. Assess how students include accessibility requirements in the images in graphics they design, for example contrast ratio, text alternatives that belong to the design phase, and placeholders for any other text alternative that is planned for later stages of the design and development process. ## Teaching Resources diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 8878fd73b..1a380ad7e 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -44,7 +44,7 @@ Students should be able to: * define methods to communicate both visually and non-visually all relevant information about multi-step processes * describe how to communicate the structure of multi-page articles or processes visually and non-visually * describe how to provide information about the name and purpose of components using descriptive labels and instructions -* discuss ways to break down information presented in tables, including use of simple tables, lists, imagery, and plain text +* discuss ways to break down information presented in tables, including the use of simple tables, lists, imagery, and plain text * evaluate the use of several methods to convey the information, including text, labels, instructions, semantics, and imagery depending on user needs * identify related requirements for developers to programmatically associate landmarks, headings, table header cells and data cells, as well as form labels and instructions to their corresponding control @@ -128,11 +128,11 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of pages and explain how they are divided into several regions. Demonstrate that, in addition to visually distinguishing these regions, semantics and text are needed to ensure that all users can understand the relations between them. Explain that defining and planning the different regions is a designers' responsibility, whereas adding the semantics is a responsibility shared with the developer. +* Show examples of pages and explain how they are divided into several regions. Demonstrate that, in addition to visually distinguishing these regions, semantics and text are needed to ensure that all users can understand the relations between them. Explain that defining and planning the different regions is a designer's responsibility, whereas adding the semantics is a responsibility shared with the developer. * Show examples of online articles and forms. Discuss how these are divided into manageable pieces so that they are easier to understand and to navigate. For example, by using headings with their corresponding rank levels to indicate the different chapters, sections, and subsections of content. * Show examples of diagrams and illustrations that can complement the information presented in text. For example, visual instructions that supplement the textual information of a user manual. Explain that they help users with reading disabilities to understand difficult pieces of text. Explain that defining the presentation of such diagrams and illustrations is a responsibility of the designer, whereas providing the diagrams and illustrations is a responsibility of the content author. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). -* Show examples of words that may be difficult to understand or that are used in a specialized way. Explain that people who are not familiar with such words need definitions to understand their meaning. Explain that defining the methods to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. -* Show examples of abbreviations, such as short forms of words and acronyms. Explain that people who are not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand them. Explain that specifying the methods to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. +* Show examples of words that may be difficult to understand or that are used in a specialized way. Explain that people who are not familiar with such words need definitions to understand their meaning. Explain that defining the methods to provide such definitions is a designer's responsibility, whereas providing the definitions is a responsibility shared with the content author. +* Show examples of abbreviations, such as short forms of words and acronyms. Explain that people who are not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand them. Explain that specifying the methods to provide such explanations or expansions is a designer's responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. #### Ideas to Assess Knowledge for Topic @@ -165,10 +165,10 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of names for components, including links, buttons, and form controls. Explain that these names help users identify these components. Explain that defining the presentation of these names is a designers' responsibility, implementing these names is a developers' responsibility, and defining names is a responsibility shared with the content author. +* Show examples of names for components, including links, buttons, and form controls. Explain that these names help users identify these components. Explain that defining the presentation of these names is a designer's responsibility, implementing these names is a developer's responsibility, and defining names is a responsibility shared with the content author. * Show examples of overall instructions, for example indications of what will happen after pressing a button. Explain that these instructions help users better understand the purpose and functionality of components. Explain that instruction presentation is a designer's responsibility, implementing these instructions is a developer's responsibility, and defining the content of these instructions is a responsibility shared with the content author. -* Show examples of multi-step processes, such as a multi-step form, with instructions to indicate the current step and total number of steps in the process. Then show examples of multi-step processes without such instructions. Compare the user experiences for each of the examples. Explain that people rely on such instructions to get an understanding of where they are in the process and how many steps the process has. Explain that defining the presentation of such instructions is a designers' responsibility, implementing these instructions is a developers' responsibility, and providing these instructions is a responsibility shared with the content author. -* Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to understand and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and programmatically, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look is a designers' responsibility, whereas coding those relations is a developers' responsibility. +* Show examples of multi-step processes, such as a multi-step form, with instructions to indicate the current step and total number of steps in the process. Then show examples of multi-step processes without such instructions. Compare the user experiences for each of the examples. Explain that people rely on such instructions to get an understanding of where they are in the process and how many steps the process has. Explain that defining the presentation of such instructions is a designer's responsibility, implementing these instructions is a developer's responsibility, and providing these instructions is a responsibility shared with the content author. +* Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to understand and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and programmatically, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look is a designer's responsibility, whereas coding those relations is a developer's responsibility. #### Ideas to Assess Knowledge for Topic @@ -209,7 +209,7 @@ Optional ideas to teach the learning outcomes: * Show examples of different types of information presented in tables. Explain that tables are used when there is a logical, tabular relationship between the information presented, for example when displaying a list of events with their date and venue. * Refer back to [Designer Module 1: Visual Design, Topic: Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts) and explain that some users may require different ways of presenting tabular information. For example, providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. -* Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells must be perceived both visually and programmatically. Explain that providing the styles is a designers' responsibility, whereas establishing the programmatic relation is a responsibility shared with the developer. +* Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells must be perceived both visually and programmatically. Explain that providing the styles is a designer's responsibility, whereas establishing the programmatic relation is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index 027a65001..c4615bdaf 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -121,7 +121,7 @@ Topics to achieve the learning outcomes: Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain how keyboard support benefits other ways of interacting, including voice interaction and interaction using some assistive technologies. -Present examples of specific non-standard shortcuts. Explain that providing custom keyboard interactions can support efficiency but can also disrupt the users' expectations. Designers need to document these custom interactions and make them consistent throughout the interface. Emphasize that defining the keyboard interactions is a designers' responsibility, whereas implementing such interactions is a responsibility shared with the developer. +Present examples of specific non-standard shortcuts. Explain that providing custom keyboard interactions can support efficiency but can also disrupt the users' expectations. Designers must document these custom interactions and make them consistent throughout the interface. Emphasize that defining the keyboard interactions is a designer's responsibility, whereas implementing such interactions is a responsibility shared with the developer. #### Learning Outcomes for Topic @@ -129,16 +129,16 @@ Students should be able to: * design user experiences for keyboard navigation through and inside components of websites and applications, for example using: * the tab key to move through different components - * the enter key to enter a specific component and to select a specific item on a component + * the enter key to access a specific component and to select an item on a component * the arrow keys to move through elements inside components, including sliders, tabs, dialogs, application menus, and tree views * the escape key to exit components * specific keyboard shortcuts to reveal, review, and dismiss notifications * specific keyboard shortcuts to support efficiency * first letter navigation to jump to specific pieces of data in lists and grids -* identify situations when it is necessary to provide additional keyboard shortcuts, for example when designing a custom functionality that is not keyboard supported by default +* identify situations when additional keyboard shortcuts are necessary, for example when designing a custom functionality that is not keyboard supported by default * explain how keyboard support benefits other ways of interacting, including voice interaction and interaction using assistive technologies * evaluate the use of custom keyboard interactions -* select keyboard interactions that avoid conflicts with the operating system, browser, and assistive technologies when possible +* select keyboard interactions that do not conflict with the operating system, browser, and assistive technologies when possible * cooperate with developers to provide methods to remap or disable conflicting shortcuts * define methods to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications * define consistent placement and appearance of focus indicators @@ -149,19 +149,19 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Invite students to try standard keyboard conventions. For example, use of the tab to move through user interface components, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that standard interactions need to be preserved as much as possible when designing custom widgets, as users mostly expect these. -* Invite students to research keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers need to cooperate with other team members, including developers and user researchers, on strategies to define custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and collaborating with developers to implement such keystrokes. +* Invite students to try standard keyboard conventions. For example, use of the tab to move through user interface components, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that standard interactions must be preserved as much as possible when designing custom widgets, as users mostly expect these. +* Invite students to research keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers must cooperate with other team members, including developers and user researchers, on strategies to define custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and collaborating with developers to implement such keystrokes. * Present examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. * Invite students to research how assistive technologies and adaptive strategies rely on keyboard support to provide specific functionality, such as navigating sequentially using voice commands. Demonstrate interaction with assistive technologies in web pages and applications with and without keyboard support. -* Refer back to [Designer Module 1: Visual Design, Topic Orientation Cues](/curricula/designer-modules/visual-design/#topic-orientation-cues) to reflect on focus indicators. Explain that, in addition to visually distinguishable focus indicators, programmatic keyboard focus needs to be considered when providing keyboard support. Emphasize that designers need to cooperate with other team members, including developers and user researchers, to design user experiences that consider focus placement depending on changes of context and user interaction. -* Show examples of help functionality for custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using those shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these help methods is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. +* Refer back to [Designer Module 1: Visual Design, Topic Orientation Cues](/curricula/designer-modules/visual-design/#topic-orientation-cues) to reflect on focus indicators. Explain that, in addition to visually distinguishable focus indicators, designers must consider programmatic keyboard focus must be considered when providing keyboard support. Emphasize that designers must cooperate with other team members, including developers and user researchers, to design user experiences that use focus placement to reflect changes of context and user interaction. +* Show examples of help functionality for custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using those shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these help methods is a designer's responsibility, whereas implementing them is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Short Answer Questions — Ask students about commonly used modifier keys of operating systems, browsers, and assistive technologies. Assess how students identify commonly used modifier keys in operating systems, browsers, and assistive technologies. -* Practical — Give students an interface that only works with the mouse and ask them to define keyboard interaction patterns. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. +* Short Answer Questions — Ask students about the commonly used modifier keys in operating systems, browsers, and assistive technologies. Assess how students identify commonly used modifier keys in operating systems, browsers, and assistive technologies. +* Practical — Give students an interface that only works with the mouse and ask them to provide keyboard interaction. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. * Practical — Have students cooperate with developers to avoid custom keyboard shortcut conflicts with existing operating system and assistive technology keystrokes. Assess how students cooperate with developers to develop strategies that avoid custom keyboard shortcut conflicts. * Practical — Give students a custom widget and ask them to define appropriate focus placement and appearance depending on changes in context and user interaction. Assess how students create user experiences that consider visual focus indicators and focus placement. @@ -173,7 +173,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Show examples of user interfaces that react to motion, such as shaking the device to perform a specific action. Explain that some people may perform these motion-based gestures inadvertently, others may not be able to perform them at all. Present alternatives to motion-based gestures, for example providing methods to undo, abort, and reverse actions performed using complex gestures. +Show examples of user interfaces that react to motion, such as shaking the device to perform a specific action. Explain that some people may perform these motion-based gestures inadvertently, while others may not be able to perform them at all. Present alternatives to motion-based gestures, for example providing methods to undo, abort, and reverse actions performed using complex gestures. Discuss gestures that require dragging and drawing specific paths on a touch screen. Explain that these are difficult (and sometimes impossible) to perform for some people. @@ -191,9 +191,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of interactions based on swipe and pinch gestures. Explain that users with mobility impairments may have difficulty to perform such gestures, so interfaces need to have alternatives that do not require swiping or pinching to perform an action. -* Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments may have difficulty to perform such gestures, so interfaces need to have alternatives that do not require motion for these gestures. -* Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events, so interfaces need to support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. +* Show examples of interactions based on swipe and pinch gestures. Explain that users with mobility impairments may have difficulty to perform such gestures, so interfaces must have alternatives that do not require swiping or pinching to perform an action. +* Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments may have difficulty to perform such gestures, so interfaces must have alternatives that do not require motion for these gestures. +* Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events. Therefore, interfaces must support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. * Refer back to [Designer Module 1: Visual Design, Topic Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts). Explain that larger target sizes for pointer are recommended where possible. The minimum recommended size is 44 by 44 CSS pixels. #### Ideas to Assess Knowledge for Topic @@ -212,7 +212,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Practical &mdash: Give students a web application, such as a web email client, and ask them to provide the necessary custom keyboard shortcuts. Assess how students balance the use of standard versus custom keyboard shortcuts. +* Practical — Give students a web application, such as a web email client, and ask them to provide the necessary custom keyboard shortcuts. Assess how students balance the use of standard versus custom keyboard shortcuts. * Portfolio — Have students design the interactions for a given interface, including mouse, keyboard, touch, and voice. Assess how students design user experiences for different input methods, including mouse, touch, keyboard, and voice. ## Teaching Resources diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 8d93d22f3..98fcf00ab 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -38,12 +38,12 @@ Students should be able to: * identify accessibility requirements for different types of audio and video content * design user experiences for description, captions, transcripts, and sign languages, including interactions, placement, and methods to turn on and off the alternatives -* identify accessibility issues associated with media players, including: - * select media players with support for different methods of interaction, including mouse, keyboard, touch, and voice - * select media player controls that have clear and descriptive names, that are easy to find, and that are always reachable for users +* identify accessibility considerations for media players, including: + * support for different methods of interaction, including mouse, keyboard, touch, and speech + * controls that have clear and descriptive names, that are easy to find on the page, and that are reachable by all users * define methods to control automatic audio and movement, including: * mute and control the volume of auto-playing audio - * pause, stop, and hide moving, blinking, and auto-updating content, including carousels and other animations + * pause, stop, and hide moving, blinking, and auto-updating content, including carousels and animations * identify related requirements for: * developers to programmatically associate alternatives to their corresponding media content * developers to include accessibility support for media players @@ -83,7 +83,7 @@ Skills required for this module: * [WCAG Success Criterion 1.2.3 Audio Description or Media Alternative (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#audio-description-or-media-alternative-prerecorded) * [WCAG Success Criterion 1.2.4 Captions (Live)](https://www.w3.org/WAI/WCAG21/quickref/#captions-live) * [WCAG Success Criterion 1.2.5 Audio Description (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#audio-description-prerecorded) - * [WCAG Success Criteria 1.4.2 Audio Control](https://www.w3.org/WAI/WCAG21/quickref/#audio-control) + * [WCAG Success Criterion 1.4.2 Audio Control](https://www.w3.org/WAI/WCAG21/quickref/#audio-control) * [WCAG Success Criterion 1.4.6 Sign Language (prerecorded](https://www.w3.org/WAI/WCAG21/quickref/#sign-language-prerecorded) * [WCAG Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide) * [WCAG Success Criterion 2.3.1 Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG21/quickref/#three-flashes-or-below-threshold) @@ -111,7 +111,7 @@ Topics to achieve the learning outcomes: Description of visual information is essential for people who cannot see the visuals. Captions are essential for people who cannot hear the audio. Text transcripts provide an alternative to visual and audio information. -Discuss the need for planning in the design phase to accommodate alternatives to multimedia content such as description, captions, text transcripts, and sign languages. Present methods to turn on and off alternatives to multimedia content depending on user needs. Explain that these methods need to have clear names and need to be always reachable for users. Explain that defining such methods is a designer's responsibility, whereas providing the alternatives is a responsibility shared with the content author. +Discuss the need for planning in the design phase to accommodate alternatives to multimedia content such as description, captions, text transcripts, and sign languages. Present methods to turn on and off alternatives to multimedia content depending on user needs. Explain that these methods must have clear names and must be reachable by all users. Explain that defining such methods is a designer's responsibility, whereas providing the alternatives is a responsibility shared with the content author. #### Learning Outcomes for Topic @@ -138,11 +138,11 @@ Students should be able to Optional ideas to teach the learning outcomes: -* Show examples of description of visual information. Emphasize how these alternatives describe the visual information (including text) for people who cannot see the videos. Explain that different standards and policies may refer to description of visual information using different terms, such as audio description, video description, and described videos. Explain that defining the methods to turn on and off the description is a designers' responsibility, whereas providing the description is a responsibility shared with the content author. -* Show examples of captions. Explain that captions are a synchronized text version of the speech and non-speech audio information needed to understand the content. Explain that different standards and policies may refer to captions using different terms, such as subtitles. Explain that defining the methods to turn on and off the description is a designers' responsibility, whereas providing the description is a responsibility shared with the content author. Explain that determining where to place captions is a designers' responsibility, whereas providing such captions is a responsibility shared with the content author. -* Show examples of text transcripts. Explain that transcripts are a text version of the speech and non-speech audio information needed to understand the content. Explain that defining the placement and spacing for the transcripts is a designers' responsibility, whereas providing the transcripts is a responsibility shared with the content author. -* Show examples of sign language. Explain that sign language is essential for people who are deaf and who do not understand written language well. Explain that defining the methods to enable and disable sign language is a designers' responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. -* Show examples of accessible and inaccessible media players. Emphasize that it is generally more reliable to use an existing media player with support for accessibility than to design one from scratch. Emphasize how accessible media players are operable by keyboard, make keyboard focus visible, have clear labels, have appropriate contrast ratios, and are easy to find. For an overview on skills needed to develop a media player, expected functionality, and existing players, see the resource Making Audio and Video Media Accessible, [Media players](/media/av/player/). +* Show examples of description of visual information. Emphasize how these alternatives describe the visual information (including text) for people who cannot see the videos. Explain that different standards and policies may refer to description of visual information using different terms, such as audio description, video description, and described videos. Explain that defining the methods to turn on and off the description is a designer's responsibility, whereas providing the description is a responsibility shared with the content author. +* Show examples of captions. Explain that captions are a synchronized text version of the speech and non-speech audio information needed to understand the content. Explain that different standards and policies may refer to captions using different terms, such as subtitles. Explain that defining the methods to turn on and off the captions is a designer's responsibility, whereas providing the captions is a responsibility shared with the content author. Explain that determining where to place captions and in what color and font they are presented is a designer's responsibility, whereas providing such captions is a responsibility shared with the content author. +* Show examples of text transcripts. Explain that transcripts are a text version of the speech and non-speech audio information needed to understand the content. Explain that defining the placement and spacing for the transcripts is a designer's responsibility, whereas providing the transcripts is a responsibility shared with the content author. +* Show examples of sign language. Explain that sign language is essential for people who are deaf and who do not understand written language well. Explain that defining the methods to enable and disable sign language is a designer's responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. +* Show examples of accessible and inaccessible media players. Emphasize that it is generally more reliable to use an existing media player with support for accessibility than to design one from scratch. Emphasize how accessible media players are operable by keyboard, make keyboard focus visible, have clear labels, have appropriate contrast ratios, and are easy to find on the page. For an overview on skills needed to develop a media player, expected functionality, and existing players, see the resource Making Audio and Video Media Accessible, [Media players](/media/av/player/). #### Ideas to Assess Knowledge for Topic @@ -170,21 +170,25 @@ Students should be able to: * create designs with enough time for users to read parts of moving content, for example different slides in a carousel * define visual and non-visual identification of animated content and its different parts, for example identifying a carousel region and its different slides * define focus order within animated content, including how to move to different parts of the carousel and how to get to the carousel controls -* define methods for stopping or controlling the volume of any audio that plays automatically for more than 3 seconds +* define methods for stopping or controlling the volume of any audio that plays automatically for more than three seconds #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of content that moves or blinks, such as animations and carousels. Explain that these animations can cause problems for some users that cannot keep up with the pace of the auto-updating content. Emphasize that, in addition, these animations can cause seizures and physical reactions. For references on how to design interfaces that allow to pause, stop, and hide moving, blinking, or auto-updating content, see the following techniques: +* Show examples of content that moves or blinks, such as animations and carousels. Explain that moving content can be problematic and can cause distraction and anxiety for several types of users. Emphasize that some animation frequencies are also known to cause seizures and physical reactions for certain users. For references on how to design interfaces that allow to pause, stop, and hide moving, blinking, or auto-updating content, see the following techniques: * [G4: Allowing the content to be paused and restarted from where it was paused](https://www.w3.org/WAI/WCAG21/Techniques/general/G4), * [G11: Creating content that blinks for less than 5 seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G11), * [G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)](https://www.w3.org/WAI/WCAG21/Techniques/general/G152), * [G186: Using a control in the Web page that stops moving, blinking, or auto-updating content](https://www.w3.org/WAI/WCAG21/Techniques/general/G186), and * [G187: Using a technology to include blinking content that can be turned off via the user agent](https://www.w3.org/WAI/WCAG21/Techniques/general/G187). -* Show examples of flashing content and explain that it can cause seizures and physical reactions for some people. Emphasize that all interface components need to be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole interface. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash below 3 seconds, see techniques [G19: Ensuring that no component of the content flashes more than three times in any 1-second period](https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html) and [G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold](https://www.w3.org/WAI/WCAG21/Techniques/general/G15.html). +<<<<<<< HEAD +* Show examples of flashing content and explain that it can cause seizures and physical reactions for some people. Emphasize that all interface components need to be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole interface. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash below three seconds, see techniques [G19: Ensuring that no component of the content flashes more than three times in any 1-second period](https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html) and [G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold](https://www.w3.org/WAI/WCAG21/Techniques/general/G15.html). +======= +* Show examples of flashing content and explain that it can cause seizures and physical reactions for some people. Emphasize that all interface components muswt be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole interface. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash below 3 seconds, see techniques [G19: Ensuring that no component of the content flashes more than three times in any 1-second period](https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html) and [G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold](https://www.w3.org/WAI/WCAG21/Techniques/general/G15.html). +>>>>>>> survey-changes * Show examples of interactions triggered by animations, such as additional movements when scrolling and decorative gimmicks. Explain that these animations can cause distraction and vestibular disorders (such as dizziness, nausea, and headaches) for some people. Discuss the use of preferences as well as technology specific properties to reduce or disable such animations. -* Demonstrate the use of a screen reader to navigate an application that plays audio automatically for more than 3 seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a method to pause or control the volume of that audio. Explain that the operating system often provides such method. For references on how to design interfaces with methods to pause or control the volume of any audio that plays automatically, see the following techniques: +* Demonstrate the use of a screen reader to navigate an application that plays audio automatically for more than three seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a method to pause or control the volume of that audio. Explain that the operating system often provides such method. For references on how to design interfaces with methods to pause or control the volume of any audio that plays automatically, see the following techniques: * [G60: Playing a sound that turns off automatically within three seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G60.html), * [G170: Providing a control near the beginning of the Web page that turns off sounds that play automatically](https://www.w3.org/WAI/WCAG21/Techniques/general/G170.html), and * [G171: Playing sounds only on user request](https://www.w3.org/WAI/WCAG21/Techniques/general/G171.html). diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index cd17a920a..65136b7a6 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -137,9 +137,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Present different types of navigation menus, such as static, fly-out, and mega menus. Explain conventions for accessible navigation menus, for example clear and consistent styling to convey menu behaviors and states. -* Demonstrate interactions with navigation menus using different input devices, including keyboard, mouse, touch, and voice. For example, activating a menu option by tapping, pressing the Enter and Space keys, and mouse clicking. Explain that defining the interactions is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. -* Show examples of navigation menus and menu items large text. Explain that the text needs to adapt to different viewports and screen configurations, for example lines of text must wrap to avoid horizontal scrolling. Explain that different languages may have different word sizes, so designers must consider provisions for different word lengths. -* Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Explain how to communicate the states of these menu items visually and non-visually. Explain that defining the visual presentation is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. +* Demonstrate interactions with navigation menus using different input devices, including keyboard, mouse, touch, and voice. For example, activating a menu option by tapping, pressing the Enter and Space keys, and mouse clicking. Explain that defining the interactions is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. +* Show examples of navigation menus and menu items with large text. Explain that the text needs to adapt to different viewports and screen configurations, for example lines of text must wrap to avoid horizontal scrolling. Explain that different languages may have different word sizes, so designers must consider provisions for different word lengths. +* Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Explain how to communicate the states of these menu items visually and non-visually. Explain that defining the visual presentation is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. #### Ideas to Assess Knowledge for Topic @@ -186,9 +186,9 @@ Optional ideas to teach the learning outcomes: * Invite students to research different ways to present information in page titles. Reflect with them on how well the titles describe the page contents. Explain that page titles are useful to identify the purpose of a specific web page within a website. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page. Some browsers and assistive technologies may truncate the titles or not show them at all. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). * Show examples of visual and non-visual indications in menus about the current page with respect to the website. -#### Teaching Ideas for Topic +#### Ideas to Assess Knowledge for Topic -Optional ideas to teach the learning outcomes: +Optional ideas to assess knowledge: * Practical — Give students a website and ask them to provide multiple ways to navigate across the website. Assess how students identify and design the different user experiences for site navigation, including search functionalities, breadcrumb trails, and site maps. * Practical — Give students a website and ask them to provide descriptive titles that identify each of the pages. Assess how students provide clear and descriptive page titles. @@ -232,7 +232,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Have students define the blocks of repeated content in a website and cooperate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they cooperate with developers to provide a method to bypass such blocks. -* Practical — Give students a document and ask them to provide the table of contents. Assess how students provide table of contents for documents. +* Practical — Give students a document and ask them to provide the table of contents. Assess how students provide the table of contents for documents. {% include excol.html type="end" %} diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index fc4be96aa..73ecc02f8 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -37,10 +37,10 @@ Courses based on this module should: Students should be able to: * explain how people with disabilities rely on designs that adapt to different colors, layouts, spacing, and positions -* design layouts with sufficient color contrast for text, images of text, and controls +* design layouts with sufficient contrast ratio for text, images of text, and controls * design clear and distinguishable focus indicators, for example by using borders, color, and highlighting * use headings, spacing, and styling to group related content -* use visual and non-visual cues to convey information, including text, color, patterns, and icons +* use several visual and non-visual cues to convey information, including text, color, patterns, and icons * design layouts that adapt to: * different font sizes and spacing set by the user in browser and operating system settings * different screen sizes, screen configurations, and user style sheets @@ -109,19 +109,19 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Explain how sufficient color contrast (contrast ratio in WCAG) is essential for people with disabilities to perceive, distinguish, and understand content. +Explain how sufficient contrast ratio is essential for people with disabilities to perceive, distinguish, and understand content. -Describe how some people rely on color to understand and distinguish content. Explain that some people cannot perceive color well or at all. Discuss different ways to supplement information presented using color, such as using shapes and icons. +Describe how some people rely on color to understand and distinguish content. Explain that some people perceive color in different ways, and that some may not perceive color at all. Discuss different ways to supplement information presented using color, such as using shapes and icons. #### Learning Outcomes for Topic Students should be able to: * explain how appropriate use of color enables people with disabilities to read, understand, and distinguish components -* determine sufficient color contrast for text, images of text, and controls -* design text and images of text that have a color contrast of at least 4.5:1 with respect to their background -* design large-scale text and images of text that have a color contrast of at least 3:1 with respect to their background -* design components and graphics that have a color contrast of at least 3:1 with respect to their background +* determine sufficient contrast ratiofor text, images of text, and controls +* design text and images of text that have a contrast ratio of at least 4.5:1 with respect to their background +* design large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background +* design components and graphics that have a contrast ratio of at least 3:1 with respect to their background * define layouts to enable users to change colors based on customized screen sizes, screen configurations, and style sheets * use visual cues in addition to text color, for example by using different patterns, shapes, and icons * use text to complement information provided visually @@ -130,16 +130,16 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of sufficient and insufficient color contrast for text. Explain that color contrast for text (including images of text) needs to be at least 4.5:1 with respect to their background. For references on how to apply sufficient color contrast to text (including images of text), see technique [G18: Ensuring that a color contrast of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). -* Show examples of different interactive components, such as buttons and links. Explain that they should have a color contrast of at least 3:1. -* Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so they require additional methods to convey that information. For references on how to supplement information conveyed through color, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). +* Show examples of sufficient and insufficient contrast ratio for text. Explain that contrast ratio for text (including images of text) needs to be at least 4.5:1 with respect to their background. For references on how to apply sufficient contrast ratio to text (including images of text), see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). +* Show examples of different interactive components, such as buttons and links. Explain that they should have a contrast ratio of at least 3:1. For references on how to apply sufficient contrast ratio to interactive components, see techniques [G207: Ensuring that a contrast ratio of 3:1 is provided for icons](https://www.w3.org/WAI/WCAG21/Techniques/general/G207) and [G209: Provide sufficient contrast at the boundaries between adjoining colors](https://www.w3.org/WAI/WCAG21/Techniques/general/G209). +* Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some people perceive color in different ways, and that some may not perceive color at all. Some people may require methods different from color to understand that information. For references on how to supplement information conveyed through color, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Short Answer Questions — Give students several components and ask them what the color contrast should be. Assess how students understand and distinguish sufficient color contrast for different components. -* Practical — Have students design a prototype and apply sufficient color contrast to text, images of text, components, and graphics. Assess how students understand and apply sufficient color contrast based on the different components that they are designing. +* Short Answer Questions — Give students several components and ask them what the contrast ratio should be. Assess how students understand and distinguish sufficient contrast ratio for different components. +* Practical — Have students design a prototype and apply sufficient contrast ratio to text, images of text, components, and graphics. Assess how students understand and apply sufficient contrast ratio based on the different components that they are designing. * Practical — Discuss examples of information presented using color. Ask students to supplement that information using other visual cues. Assess how students use shapes and icons to supplement information presented using color distinguishable. {% include excol.html type="end" %} @@ -201,7 +201,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Invite students to use a web page that has appropriate focus indicators first, and then invite them to use a web page without focus indicators. Explain how focus indicators allow people who rely on keyboard navigation to determine where they are as they move through web pages and applications. For reference on how to provide appropriate focus indicators, see techniques [G149: Using user interface components that are highlighted by the user agent when they receive focus](https://www.w3.org/WAI/WCAG21/Techniques/general/G149.html) and [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). -* Show examples of different web page regions, such as header, navigation, main, and footer. Explain that several groups of people with disabilities rely on visual and programmatic cues to perceive such regions. Explain that defining the presentation of these cues is a designers' responsibility, whereas implementing such cues and their semantics is a developers' responsibility. +* Show examples of different web page regions, such as header, navigation, main, and footer. Explain that several groups of people with disabilities rely on visual and programmatic cues to perceive such regions. Explain that defining the presentation of these cues is a designer's responsibility, whereas implementing such cues and their semantics is a developer's responsibility. * Show examples of interfaces where information is provided through vision only, such as those with icons and color to convey the status of different tasks in a project. Explain that some people cannot rely on visual means to obtain information. These users need text to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). #### Ideas to Assess Knowledge for Topic @@ -241,11 +241,11 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Discuss with students the differences between web sites and applications that preserve content and functionality when resized up to 200% and those which do not. Explain that some people often need to resize text to read it properly. For references on how to ensure text resizes up to 200%, see technique [G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width](https://www.w3.org/WAI/WCAG21/Techniques/general/G179). +* Discuss with students the differences between web sites and applications that preserve content and functionality when resized up to 200% and those which do not. Explain that some people often must resize text to read it properly. For references on how to ensure text resizes up to 200%, see technique [G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width](https://www.w3.org/WAI/WCAG21/Techniques/general/G179). * Discuss the use of multiple screen sizes, screen configurations, and style sheets by people with low vision. Explain that these configurations often go beyond the traditional mobile, tablet, and desktop breakpoints. * Show examples of user interfaces showing up in both portrait and landscape modes. Explain that the ability to show an interface both in portrait and landscape is essential for people who cannot change their device orientation due to mobility impairments. * Show examples of different user interfaces that support customizing line height as well as spacing between paragraphs, words, and letters to support readability. -* Show examples of different target sizes and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that target sizes need to be large enough to accommodate different people's needs. +* Show examples of different target sizes and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that target sizes must be large enough to accommodate different people's needs. #### Ideas to Assess Knowledge for Topic @@ -262,7 +262,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Short Answer Questions — Ask students about the color contrast ratios for the different user interface components. Assess how students understand the different color contrast requirements depending on the components. +* Short Answer Questions — Ask students about the contrast ratio for the different user interface components. Assess how students understand the different contrast ratio requirements depending on the components. * Portfolio — Have students design a web page. Assess how students use customizable color, layout, spacing, and position to support content perception, identification, and readability. ## Teaching Resources From 7c714dbd6c238b06f5acda9f1be6d9aabc90deb7 Mon Sep 17 00:00:00 2001 From: daniel-montalvo <49305434+daniel-montalvo@users.noreply.github.com> Date: Thu, 2 Dec 2021 11:05:26 +0100 Subject: [PATCH 323/416] Revert "Minor edits (#431)" (#434) This reverts commit 558e3840293694cc9f1b46150b5b7007aa23239d. --- content/designer/designer-modules.md | 2 +- content/designer/forms-design.md | 32 ++++++------ content/designer/images-and-graphics.md | 49 +++++++++---------- content/designer/information-design.md | 16 +++--- content/designer/interaction-design.md | 30 ++++++------ content/designer/multimedia-and-animations.md | 34 ++++++------- content/designer/navigation-design.md | 12 ++--- content/designer/visual-design.md | 34 ++++++------- 8 files changed, 102 insertions(+), 107 deletions(-) diff --git a/content/designer/designer-modules.md b/content/designer/designer-modules.md index dd2b25ed2..aa243d840 100644 --- a/content/designer/designer-modules.md +++ b/content/designer/designer-modules.md @@ -36,7 +36,7 @@ The designer modules guide the creation of courses that: * interaction design * images and graphics * multimedia and animations - * forms design + * forms These modules focus on accessible user experiences. They are primarily designed for teaching: diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 707702b3a..80ac62a11 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -84,7 +84,7 @@ Skills required for this module: * [WCAG Success Criterion 1.3.2 Meaningful Sequence](https://www.w3.org/WAI/WCAG21/quickref/#meaningful-sequence) * [WCAG Success Criterion 1.3.3 Sensory Characteristics](https://www.w3.org/WAI/WCAG21/quickref/#sensory-characteristics) * [WCAG Success Criterion 1.3.4 Orientation](https://www.w3.org/WAI/WCAG21/quickref/#orientation) - * [WCAG Success Criterion 1.3.5 Identify Input Purpose](https://www.w3.org/WAI/WCAG21/quickref/#identify-input-purpose) + * [WCAG Success Criteria 1.3.5 Identify Input Purpose](https://www.w3.org/WAI/WCAG21/quickref/#identify-input-purpose) * [WCAG Success Criterion 1.4.1 Use of Color](https://www.w3.org/WAI/WCAG21/quickref/#use-of-color) * [WCAG Success Criterion 1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum) * [WCAG Success Criterion 1.4.4 Resize Text](https://www.w3.org/WAI/WCAG21/quickref/#resize-text) @@ -127,7 +127,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Explore different form elements and their intended purpose, including edit boxes, check boxes, radio buttons, and buttons. Explain uses of standard versus non-standard components and how use of non-standard elements impacts accessibility. +Show examples of different form elements and their intended purpose, including edit boxes, check boxes, radio buttons, and buttons. Explain uses of standard versus non-standard components and how use of non-standard elements impacts accessibility. #### Learning Outcomes for Topic @@ -144,13 +144,13 @@ Students should be able to: Optional ideas to teach the learning outcomes. * Show examples of different form elements and reflect on their intended purpose. For example, edit boxes, check boxes, radio buttons, and buttons. Emphasize that using a form element with an unintended purpose can cause cognitive overload as well as compatibility issues with assistive technologies and adaptive strategies. -* Show examples of standard versus non-standard form elements. Explain that standard elements are generally accessible by default, and that there is little need for extra work to make them accessible at a later phase. However, use of non-standard elements generally requires additional coding to ensure these elements are usable with the keyboard and compatible with assistive technologies. +* Show examples of standard versus non-standard form elements. Explain that standard elements are generally accessible by default, and that there is little need for extra work to make them accessible at a later phase. However, use of non-standard elements generally requires further coding to ensure these elements are usable with the keyboard and compatible with assistive technologies. #### Ideas to Assess Knowledge for Topic Optional ideas to support assessment: -* Short Answer Questions — Give students specific purposes for form elements. Ask them to research how to communicate these purposes using standard elements. If standard elements are found to be inadequate for the purpose, have students discuss the accessibility requirements for using non-standard elements and how they would approach such requirements. Assess how students understand and communicate the accessibility requirements for using non-standard elements. +* Short Answer Questions — Give students specific purposes for form elements. Ask them to research how to convey these purposes using standard elements when possible, and to elaborate on what are the accessibility implications of using non-standard elements. Assess how students understand and communicate the accessibility implications of using non-standard elements. * Practical — Ask students to select the appropriate form elements based on a given set of input requirements. Ask students to use standard elements when possible for each of these input requirements and to annotate keyboard interaction and expected behavior with assistive technologies when using non-standard elements. Assess how students annotate keyboard interactions and expected behavior with assistive technologies when using non-standard elements. {% include excol.html type="end" %} @@ -182,14 +182,14 @@ Optional ideas to teach the learning outcomes: * Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. * Show examples of different form elements, for example buttons, checkboxes, text boxes, and listboxes, across websites and applications. Emphasize that each should have a clear name that identifies its purpose. For reference on how to provide consistent names for different form elements across websites and applications, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). * Show examples of required and non-required form fields. Explain that instructions about which of the fields are required should be provided using several methods, including visual and non-visual instructions. -* Present examples of time limits, such as those warning about session expirations. Explain that visual and non-visual instructions must be provided so that users are aware of the time limits, and methods must be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designer's responsibility, whereas implementing methods to stop, extend, or adjust time limits is a responsibility shared with the developer. +* Present examples of time limits, such as those warning about session expirations. Explain that visual and non-visual instructions need to be provided so that users are aware of the time limits, and methods need to be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designers' responsibility, whereas implementing methods to stop, extend, or adjust time limits is a responsibility shared with the developer. * Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Give students a form and ask them to assign labels for each of the fields. Assess how students provide clear and descriptive names for each of the form fields. +* Practical — Give students a form and ask them to define labels for each of the fields. Assess how students provide clear and descriptive names for each of the form fields. * Practical — Give students a form with required and non-required fields and ask them to provide visual and non-visual instructions to communicate the required fields. Assess how students provide clear and understandable instructions for each required field. * Practical — Give students a form and ask them to provide the necessary instructions for users to understand each of the fields and fill in the form. Assess how students provide clear and concise instructions. @@ -218,10 +218,10 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show both effective and ineffective examples of placement and appearance of error messages. Explain that some users rely on consistent placement and appearance of these messages to identify the errors. +* Show examples of placement and appearance of error messages. Explain that some users rely on consistent placement and appearance of these messages to identify the errors. * Show examples of overall information about submission errors. Explain that this information makes users aware that their submission contains errors and help them search for specific error messages in the rest of the content. -* Show effective and ineffective examples of specific messages that identify each of the fields in error. Explain that these messages help users identify and locate the specific fields that contain errors. Mention that it is best practice to keep the original submission when possible, so that users can understand what needs to be corrected. -* Show effective and ineffective examples of suggestions for correction. Explain that these suggestions help users understand what the right way is to submit the form. Emphasize that these suggestions should be provided when possible, unless they compromise the security and the purpose of the form. +* Show examples of specific messages that identify each of the fields in error. Explain that these messages help users identify and locate the specific fields that contain errors. Mention that it is best practice to keep the original submission when possible, so that users can understand what needs to be corrected. +* Show examples of suggestions for correction. Explain that these suggestions help users understand what the right way is to submit the form. Emphasize that these suggestions should be provided when possible, unless they compromise the security and the purpose of the form. * Show examples of critical submissions, for example buying an airline ticket and submitting legal data. Discuss methods to reverse, check, and confirm the information included in such submissions. #### Ideas to Assess Knowledge for Topic @@ -229,7 +229,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Give students an interface containing errors and ask them to provide an overall descriptive message informing that there are submission errors. Assess how students provide overall informative messages when there are submission errors -* Practical — Give students a form field submission containing errors and ask them to provide messages about each of the wrongly submitted fields. Assess how students provide appropriate error messages for wrongly submitted fields and how they provide suggestions for correction when possible. +* Practical — Give students a form field submission containing errors and ask them to provide messages about each of the wrongly submitted field. Assess how students provide appropriate error messages for wrongly submitted fields and how they provide suggestions for correction when possible. * Practical — Give students a form field submission containing errors and ask them to provide suggestion for correction when possible. Assess how students provide suggestion for correction. * Practical — Give students a form submission containing legal data and ask them to provide methods to reverse, check, and confirm that submission. Assess how students understand the need for methods to reverse, check, and confirm critical submissions. @@ -241,9 +241,9 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Show examples of notification messages. Explain that they must be identified both visually and programmatically in order to be distinguishable by all users. +Show examples of notification messages. Explain that they need to be distinguishable by all users, including visually and programmatically. -Show examples of visual and non-visual notifications for error messages and other types of feedback for forms. Explain that notifications may have different levels of priority when in the context of a complex form. Explain that defining such levels of priority and which types of notifications each of these levels should contain is a designer's responsibility whereas implementing these levels is a developer's responsibility. +Show examples of visual and non-visual notifications for error messages and other types of feedback for forms. Explain that notifications may have different levels of priority when in the context of a complex form. Explain that defining such levels of priority and which types of notifications each of these levels should contain is a designers' responsibility whereas implementing these levels is a developers' responsibility. #### Learning Outcomes for Topic @@ -251,7 +251,7 @@ Students should be able to: * define the placement and appearance of notifications * define meaningful and descriptive notification messages, including: - * on input (to communicate if the provided input is valid or invalid) + * on input (to communicate if the provided input is valid or invalid * on task completion (to communicate success or failure of a specific task) * design user experiences to queue and prioritize application notifications coming from different components * design user experiences to store notifications that disappear after a period of time to be checked at the users' pace @@ -261,16 +261,16 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of placement and appearance of notifications. Explain that these notifications must be distinguishable both visually and non-visually. Explain that defining the notifications placement and appearance is responsibility of the designer, whereas implementing such notifications is a developer's responsibility. +* Show examples of placement and appearance of notifications. Explain that these notifications need to be distinguishable both visually and non-visually. Explain that defining the notifications placement and appearance is responsibility of the designer, whereas implementing such notifications is a developer's responsibility. * Show examples of different methods to communicate notifications, such as through text messages, semantic relations, haptic and audio feedback, and popup windows. Explain that there needs to be a variety of methods available to allow interaction by different groups of users. -* Show examples of overlapping notifications. Explain that some users may find it daunting to process several notifications at the same time, so a method needs to be defined that allows to prioritize notifications based on their relevance. Explain that defining methods to prioritize notifications based on their relevance is a designer's responsibility, whereas implementing the methods is a developer's responsibility. +* Show examples of overlapping notifications. Explain that some users may find it daunting to process several notifications at the same time, so a method needs to be defined that allows to prioritize notifications based on their relevance. Explain that defining methods to prioritize notifications based on their relevance is a designers' responsibility, whereas implementing the methods is a developers' responsibility. * Demonstrate examples of notification processing using assistive technologies, including screen readers and voice assistants. Explain that the notifications may come at a faster pace than the technology is able to process, so users may end up missing information. Emphasize that it is good practice to design methods to store the notifications to allow users to check the notifications at their own pace. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Give students a form field that validates on user input and ask them to provide descriptive validation messages. Assess how students provide clear validation messages for fields that validate on user input. +* Practical — Give students a form field that validate on user input and ask them to provide descriptive validation messages. Assess how students provide clear validation messages for fields that validate on user input. * Practical — Give students a form with notifications coming from different fields and ask them to define methods to queue and prioritize such notifications. Assess how students prioritize and organize notifications coming from different views. {% include excol.html type="end" %} diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 40a1d3ea5..672c8d59d 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -30,7 +30,7 @@ navigation: Courses based on this module should: * explain strategies that people with disabilities use to access information contained in images and graphics -* explain accessibility requirements related to images and graphics, including text alternatives and contrast ratio +* explain accessibility requirements related to images and graphics, including text alternatives and color contrast ## Learning Outcomes for Module @@ -102,7 +102,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Functional images convey functionality of a component. For example, search, print, and save functionality are often presented using icon imagery. Explain requirements related to color and contrast to help users distinguish these images from other components. Show examples of graphical links and buttons as well as logos. Discuss with students how they would describe each of those examples. +Functional images convey functionality of a component. For example, search, print, and save functionality. Explain requirements related to color and contrast to help users distinguish these images from other components. Show examples of graphical links and buttons as well as logos. Discuss with students how they would describe each of those examples. #### Learning Outcomes for Topic @@ -114,22 +114,22 @@ Students should be able to: * adjacent text inside components to understand its function * use consistent naming and imagery for components that have the same functionality across web pages * explain the benefits of using text labels and decorative images for functionality, instead of using images with text alternatives that are only available to some users, such as screen reader users -* apply appropriate contrast ratio for functional images +* apply appropriate color contrast for functional images #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: * Show examples of different images used to convey functionality, for example for printing, searching, or saving a document. Explain that these images need an equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). -* Invite students to research the most common iconography and naming for elements such as print, save, and search. Explain that these iconography and names must be consistent throughout the website. -* Refer back to [Designer Module 1 Visual Design, Topic Color](/curricula/designer-modules/visual-design/#topic-color) to explain contrast ratio requirements for functional images. +* Invite students to research the most common iconography and naming for elements such as print, save, and search. Explain that these iconography and names need to be consistent throughout the website. +* Refer back to [Designer Module 1 Visual Design, Topic Color](/curricula/designer-modules/visual-design/#topic-color) to explain color contrast requirements for functional images. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: * Practical — Give students different examples of images conveying function, such as a printer for a "print" button and a magnifying glass for a "search" button. Ask students to provide an appropriate text alternative. Assess how students identify images that convey function and how they provide text alternatives that describe the functionality of the component the image is attached to. -* Practical — Ask students to design a series of graphical buttons and links in a way that they are perceivable and distinguishable by all users. Assess how students apply accessibility requirements, such as contrast ratio, to graphical buttons and links. +* Practical — Ask students to design a series of graphical buttons and links in a way that they are perceivable and distinguishable by all users. Assess how students apply accessibility requirements, such as color contrast, to graphical buttons and links. {% include excol.html type="end" %} @@ -147,15 +147,15 @@ Explain that providing text alternatives for informative images is a responsibil Students should be able to: -* define text alternatives that are equally informative as the described images using the following methods: +* define text alternatives that present equivalent information as that contained in informative images using the following methods: * boilerplate descriptions that would then be completed and maintained through the development and authoring phases * adjacent textual information to complement images and icons, for example in a news headline * text alternatives that describe the information conveyed by images -* apply the appropriate contrast ratio to images that are necessary to understand the content +* apply the appropriate color contrast to images that are necessary to understand the content * use styled text instead of images of text when the technology in use can provide the desired visual presentation -* define alternatives to biometrics and CAPTCHA, for example by using visual, auditory, and logical CAPTCHA +* define alternatives to biometrics and CAPTCHA, for example by providing visual, auditory, and logical CAPTCHA * explain the issues associated with relying only on one form of biometrics and CAPTCHA, and describe alternative approaches for authentication -* evaluate the issues associated with accessing information contained in informative images +* evaluate the issues associated to accessing information contained in informative images * select other ways to convey the information contained in images when possible, including plain text * identify related requirements for developers to code alternative texts for informative images @@ -163,10 +163,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different images that convey information, such as images to provide instructions, and to identify people and objects. Explain that such information must be provided using text alternatives in order to be understood by users who do not see the image. Emphasize that these alternatives may require coordination among designers, developers, and content authors. For references on how to provide text alternatives for images, see [G82: Providing a text alternative that identifies the purpose of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G82.html). -* Explain that images of text present information intended to be read as text. Emphasize that sometimes it is difficult to tell visually if text has been coded as text or as an image. Coordination among designers, developers, -and content authors is therefore needed to determine if the technologies in use can achieve the same desired visual presentation in a text format. Emphasize that, if an image of text is still required, there must be a text alternative that conveys the same information as the image of text. Explain that coding an image of text appropriately is a responsibility of the developer, whereas providing descriptions for images of text is a responsibility shared with the content author. -* Show examples of different verification systems, such as CAPTCHA, to identify human beings trying to access a service or system. Explain that these verification systems must support several modalities, including visual, auditory, and cognitive. For references on how to provide accessible CAPTCHA, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). +* Show examples of different images that convey information, such as images to provide instructions, and to identify people and objects. Explain that such information needs to be provided using text alternatives, so that the purpose of the image can be understood without having to look at the image. Emphasize that these alternatives may require coordination among designers, developers, and content authors. For references on how to provide text alternatives for images, see [G82: Providing a text alternative that identifies the purpose of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G82.html). +* Explain that images of text present information intended to be read as text. Emphasize that sometimes it is difficult to tell visually if text has been coded as a text or as an image, so coordination among designers, developers, and content authors is needed to determine if the technologies in use can achieve the desired visual presentation. Emphasize that, if an image of text is still required, there needs to be a text alternative that conveys the same information as the image of text. Explain that coding an image of text appropriately is a responsibility of the developer, whereas providing descriptions for images of text is a responsibility shared with the content author. +* Show examples of different verification systems, such as CAPTCHA, to identify human beings trying to access a service or system. Explain that these verification systems need to support several modalities, including visual, auditory, and cognitive. For references on how to provide accessible CAPTCHA, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). #### Ideas to Assess Knowledge for Topic @@ -183,7 +182,7 @@ Optional ideas to support assessment. {% include excol.html type="middle" %} -Complex images are those whose description requires more than a short phrase or sentence. Show examples of complex images, including diagrams and charts, and explain accessibility requirements that these images have, such as appropriate contrast ratio and appropriate text descriptions. +Complex images are those whose description requires more than a short phrase or sentence. Show examples of complex images, including diagrams and charts, and explain accessibility requirements that these images have, such as appropriate color contrast and appropriate text descriptions. Explain that coordination among different team members is required to assess the use of complex images based on the overall context, so that the information of such images is perceived and understood visually and through the provided descriptions. @@ -191,7 +190,7 @@ Explain that coordination among different team members is required to assess the Students should be able to: -* apply appropriate contrast ratio for complex images +* apply appropriate color contrast for complex images * evaluate the use of complex images * select other ways to present the information contained in complex images, for example using tables, simpler images, and plain text * determine if and how complex images are operated using input devices, including mouse, keyboard, touch, and voice @@ -199,7 +198,7 @@ Students should be able to: * define clear and consistent identification methods for complex image descriptions, including appropriate headings and expandable and collapsible components * design user experiences for complex images, including: * how to get to the image descriptions - * what the description should look like + * how the content of the description should look like * if the descriptions could ultimately replace the image itself * identify related requirements for content authors to: * provide descriptive, equivalent textual information to understand complex images and graphics, including diagrams, charts, maps, and infographics @@ -209,15 +208,15 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Refer back to [Designer Module 1: Visual Design, Topic: Color](/curricula/designer-modules/visual-design/#topic-use-of-color). Explain that they must have a contrast ratio of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). -* Explain that complex images must also have text descriptions that allow people who don’t see them to understand and interact with the image content. Explain that providing these text alternatives is a designer's responsibility, whereas providing the text descriptions is a responsibility shared with the content author. +* Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Refer back to [Designer Module 1: Visual Design, Topic: Color](/curricula/designer-modules/visual-design/#topic-use-of-color). Explain that they need to have a color contrast ratio of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required color contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). +* Explain that complex images also need to have text descriptions that allow people to understand and interact with such images without having to look at them. Explain that providing these text alternatives is a designers' responsibility, whereas providing the text descriptions is a responsibility shared with the content author. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Have students add complex images to a website, such as charts or diagrams, and ensure they have the required contrast ratio. Assess how students understand the contrast requirements for complex images. -* Practical — Have students cooperate with developers and content authors to implement a map that can be understood and effectively used by all. Assess how students identify the need for text alternatives for complex images and cooperate with other team members to ensure such alternatives are effective. +* Practical — Have students add complex images to a website, such as charts or diagrams, and ensure they have the required color contrast. Assess how students understand the contrast requirements for complex images. +* Practical — Have students cooperate with developers and content authors to implement a map in a way that everybody can understand its meaning and interact with it. Assess how students identify the need for text alternatives for complex images and cooperate with other team members to ensure such alternatives exist. {% include excol.html type="end" %} @@ -243,7 +242,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of images and graphics that do not convey function or information, such as ornamental icons. Explain that they serve ornamental purposes as long as people can understand and interact with the user interface with or without such icons. Explain that deciding what is the images' role is a designer's responsibility, whereas coding the images so that they render with the appropriate role is a developer's responsibility. +* Show examples of images and graphics that do not convey function or information, such as ornamental icons. Explain that they serve ornamental purposes as long as people can understand and interact with the user interface with or without such icons. Explain that deciding what is the images' role is a designers' responsibility, whereas coding the images so that they render with the appropriate role is a developers' responsibility. * Invite students to research how overuse of decorative images can impact some users. For example, too many decorative images can create distractions and cognitive overload, as well as slow down loading times. #### Ideas to Assess Knowledge for Topic @@ -251,7 +250,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Ask students to provide decorative images to illustrate a text article and ask them to ensure these icons are visible in different screen sizes and devices. Assess how students understand the need for decorative images to adapt to the different user needs and preferences. -* Practical — Give students an interface with too many decorative images and ask students to identify the ones that are likely to cause distractions, cognitive overload, and slow loading times. Assess how students balance the use of decorative images to minimize distractions, cognitive overload, and slow loading times. +* Practical — Give students and interface with too many decorative images and ask students to select the ones that avoid distractions, cognitive overload, and slow loading times. Assess how students balance the use of decorative images to avoid distractions, cognitive overload, and slow loading times. {% include excol.html type="end" %} @@ -261,8 +260,8 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Short Answer Questions — Ask students which types of images require which contrast ratio. Assess how students understand the different types of images and their contrast ratio requirements. -* Portfolio — Have students design the imagery for a website. Assess how students include accessibility requirements in the images in graphics they design, for example contrast ratio, text alternatives that belong to the design phase, and placeholders for any other text alternative that is planned for later stages of the design and development process. +* Short Answer Questions — Ask students which types of images require which color contrast ratios. Assess how students understand the different types of images and their color contrast requirements. +* Portfolio — Have students design the imagery for a website. Assess how students include accessibility requirements in the images in graphics they design, for example color contrast, text alternatives that belong to the design phase, and placeholders for any other text alternative that is planned for later stages of the design and development process. ## Teaching Resources diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 1a380ad7e..8878fd73b 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -44,7 +44,7 @@ Students should be able to: * define methods to communicate both visually and non-visually all relevant information about multi-step processes * describe how to communicate the structure of multi-page articles or processes visually and non-visually * describe how to provide information about the name and purpose of components using descriptive labels and instructions -* discuss ways to break down information presented in tables, including the use of simple tables, lists, imagery, and plain text +* discuss ways to break down information presented in tables, including use of simple tables, lists, imagery, and plain text * evaluate the use of several methods to convey the information, including text, labels, instructions, semantics, and imagery depending on user needs * identify related requirements for developers to programmatically associate landmarks, headings, table header cells and data cells, as well as form labels and instructions to their corresponding control @@ -128,11 +128,11 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of pages and explain how they are divided into several regions. Demonstrate that, in addition to visually distinguishing these regions, semantics and text are needed to ensure that all users can understand the relations between them. Explain that defining and planning the different regions is a designer's responsibility, whereas adding the semantics is a responsibility shared with the developer. +* Show examples of pages and explain how they are divided into several regions. Demonstrate that, in addition to visually distinguishing these regions, semantics and text are needed to ensure that all users can understand the relations between them. Explain that defining and planning the different regions is a designers' responsibility, whereas adding the semantics is a responsibility shared with the developer. * Show examples of online articles and forms. Discuss how these are divided into manageable pieces so that they are easier to understand and to navigate. For example, by using headings with their corresponding rank levels to indicate the different chapters, sections, and subsections of content. * Show examples of diagrams and illustrations that can complement the information presented in text. For example, visual instructions that supplement the textual information of a user manual. Explain that they help users with reading disabilities to understand difficult pieces of text. Explain that defining the presentation of such diagrams and illustrations is a responsibility of the designer, whereas providing the diagrams and illustrations is a responsibility of the content author. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). -* Show examples of words that may be difficult to understand or that are used in a specialized way. Explain that people who are not familiar with such words need definitions to understand their meaning. Explain that defining the methods to provide such definitions is a designer's responsibility, whereas providing the definitions is a responsibility shared with the content author. -* Show examples of abbreviations, such as short forms of words and acronyms. Explain that people who are not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand them. Explain that specifying the methods to provide such explanations or expansions is a designer's responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. +* Show examples of words that may be difficult to understand or that are used in a specialized way. Explain that people who are not familiar with such words need definitions to understand their meaning. Explain that defining the methods to provide such definitions is a designers' responsibility, whereas providing the definitions is a responsibility shared with the content author. +* Show examples of abbreviations, such as short forms of words and acronyms. Explain that people who are not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand them. Explain that specifying the methods to provide such explanations or expansions is a designers' responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. #### Ideas to Assess Knowledge for Topic @@ -165,10 +165,10 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of names for components, including links, buttons, and form controls. Explain that these names help users identify these components. Explain that defining the presentation of these names is a designer's responsibility, implementing these names is a developer's responsibility, and defining names is a responsibility shared with the content author. +* Show examples of names for components, including links, buttons, and form controls. Explain that these names help users identify these components. Explain that defining the presentation of these names is a designers' responsibility, implementing these names is a developers' responsibility, and defining names is a responsibility shared with the content author. * Show examples of overall instructions, for example indications of what will happen after pressing a button. Explain that these instructions help users better understand the purpose and functionality of components. Explain that instruction presentation is a designer's responsibility, implementing these instructions is a developer's responsibility, and defining the content of these instructions is a responsibility shared with the content author. -* Show examples of multi-step processes, such as a multi-step form, with instructions to indicate the current step and total number of steps in the process. Then show examples of multi-step processes without such instructions. Compare the user experiences for each of the examples. Explain that people rely on such instructions to get an understanding of where they are in the process and how many steps the process has. Explain that defining the presentation of such instructions is a designer's responsibility, implementing these instructions is a developer's responsibility, and providing these instructions is a responsibility shared with the content author. -* Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to understand and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and programmatically, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look is a designer's responsibility, whereas coding those relations is a developer's responsibility. +* Show examples of multi-step processes, such as a multi-step form, with instructions to indicate the current step and total number of steps in the process. Then show examples of multi-step processes without such instructions. Compare the user experiences for each of the examples. Explain that people rely on such instructions to get an understanding of where they are in the process and how many steps the process has. Explain that defining the presentation of such instructions is a designers' responsibility, implementing these instructions is a developers' responsibility, and providing these instructions is a responsibility shared with the content author. +* Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to understand and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and programmatically, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look is a designers' responsibility, whereas coding those relations is a developers' responsibility. #### Ideas to Assess Knowledge for Topic @@ -209,7 +209,7 @@ Optional ideas to teach the learning outcomes: * Show examples of different types of information presented in tables. Explain that tables are used when there is a logical, tabular relationship between the information presented, for example when displaying a list of events with their date and venue. * Refer back to [Designer Module 1: Visual Design, Topic: Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts) and explain that some users may require different ways of presenting tabular information. For example, providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. -* Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells must be perceived both visually and programmatically. Explain that providing the styles is a designer's responsibility, whereas establishing the programmatic relation is a responsibility shared with the developer. +* Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells must be perceived both visually and programmatically. Explain that providing the styles is a designers' responsibility, whereas establishing the programmatic relation is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index c4615bdaf..027a65001 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -121,7 +121,7 @@ Topics to achieve the learning outcomes: Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain how keyboard support benefits other ways of interacting, including voice interaction and interaction using some assistive technologies. -Present examples of specific non-standard shortcuts. Explain that providing custom keyboard interactions can support efficiency but can also disrupt the users' expectations. Designers must document these custom interactions and make them consistent throughout the interface. Emphasize that defining the keyboard interactions is a designer's responsibility, whereas implementing such interactions is a responsibility shared with the developer. +Present examples of specific non-standard shortcuts. Explain that providing custom keyboard interactions can support efficiency but can also disrupt the users' expectations. Designers need to document these custom interactions and make them consistent throughout the interface. Emphasize that defining the keyboard interactions is a designers' responsibility, whereas implementing such interactions is a responsibility shared with the developer. #### Learning Outcomes for Topic @@ -129,16 +129,16 @@ Students should be able to: * design user experiences for keyboard navigation through and inside components of websites and applications, for example using: * the tab key to move through different components - * the enter key to access a specific component and to select an item on a component + * the enter key to enter a specific component and to select a specific item on a component * the arrow keys to move through elements inside components, including sliders, tabs, dialogs, application menus, and tree views * the escape key to exit components * specific keyboard shortcuts to reveal, review, and dismiss notifications * specific keyboard shortcuts to support efficiency * first letter navigation to jump to specific pieces of data in lists and grids -* identify situations when additional keyboard shortcuts are necessary, for example when designing a custom functionality that is not keyboard supported by default +* identify situations when it is necessary to provide additional keyboard shortcuts, for example when designing a custom functionality that is not keyboard supported by default * explain how keyboard support benefits other ways of interacting, including voice interaction and interaction using assistive technologies * evaluate the use of custom keyboard interactions -* select keyboard interactions that do not conflict with the operating system, browser, and assistive technologies when possible +* select keyboard interactions that avoid conflicts with the operating system, browser, and assistive technologies when possible * cooperate with developers to provide methods to remap or disable conflicting shortcuts * define methods to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications * define consistent placement and appearance of focus indicators @@ -149,19 +149,19 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Invite students to try standard keyboard conventions. For example, use of the tab to move through user interface components, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that standard interactions must be preserved as much as possible when designing custom widgets, as users mostly expect these. -* Invite students to research keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers must cooperate with other team members, including developers and user researchers, on strategies to define custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and collaborating with developers to implement such keystrokes. +* Invite students to try standard keyboard conventions. For example, use of the tab to move through user interface components, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that standard interactions need to be preserved as much as possible when designing custom widgets, as users mostly expect these. +* Invite students to research keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers need to cooperate with other team members, including developers and user researchers, on strategies to define custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and collaborating with developers to implement such keystrokes. * Present examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. * Invite students to research how assistive technologies and adaptive strategies rely on keyboard support to provide specific functionality, such as navigating sequentially using voice commands. Demonstrate interaction with assistive technologies in web pages and applications with and without keyboard support. -* Refer back to [Designer Module 1: Visual Design, Topic Orientation Cues](/curricula/designer-modules/visual-design/#topic-orientation-cues) to reflect on focus indicators. Explain that, in addition to visually distinguishable focus indicators, designers must consider programmatic keyboard focus must be considered when providing keyboard support. Emphasize that designers must cooperate with other team members, including developers and user researchers, to design user experiences that use focus placement to reflect changes of context and user interaction. -* Show examples of help functionality for custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using those shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these help methods is a designer's responsibility, whereas implementing them is a responsibility shared with the developer. +* Refer back to [Designer Module 1: Visual Design, Topic Orientation Cues](/curricula/designer-modules/visual-design/#topic-orientation-cues) to reflect on focus indicators. Explain that, in addition to visually distinguishable focus indicators, programmatic keyboard focus needs to be considered when providing keyboard support. Emphasize that designers need to cooperate with other team members, including developers and user researchers, to design user experiences that consider focus placement depending on changes of context and user interaction. +* Show examples of help functionality for custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using those shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these help methods is a designers' responsibility, whereas implementing them is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Short Answer Questions — Ask students about the commonly used modifier keys in operating systems, browsers, and assistive technologies. Assess how students identify commonly used modifier keys in operating systems, browsers, and assistive technologies. -* Practical — Give students an interface that only works with the mouse and ask them to provide keyboard interaction. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. +* Short Answer Questions — Ask students about commonly used modifier keys of operating systems, browsers, and assistive technologies. Assess how students identify commonly used modifier keys in operating systems, browsers, and assistive technologies. +* Practical — Give students an interface that only works with the mouse and ask them to define keyboard interaction patterns. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. * Practical — Have students cooperate with developers to avoid custom keyboard shortcut conflicts with existing operating system and assistive technology keystrokes. Assess how students cooperate with developers to develop strategies that avoid custom keyboard shortcut conflicts. * Practical — Give students a custom widget and ask them to define appropriate focus placement and appearance depending on changes in context and user interaction. Assess how students create user experiences that consider visual focus indicators and focus placement. @@ -173,7 +173,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Show examples of user interfaces that react to motion, such as shaking the device to perform a specific action. Explain that some people may perform these motion-based gestures inadvertently, while others may not be able to perform them at all. Present alternatives to motion-based gestures, for example providing methods to undo, abort, and reverse actions performed using complex gestures. +Show examples of user interfaces that react to motion, such as shaking the device to perform a specific action. Explain that some people may perform these motion-based gestures inadvertently, others may not be able to perform them at all. Present alternatives to motion-based gestures, for example providing methods to undo, abort, and reverse actions performed using complex gestures. Discuss gestures that require dragging and drawing specific paths on a touch screen. Explain that these are difficult (and sometimes impossible) to perform for some people. @@ -191,9 +191,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of interactions based on swipe and pinch gestures. Explain that users with mobility impairments may have difficulty to perform such gestures, so interfaces must have alternatives that do not require swiping or pinching to perform an action. -* Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments may have difficulty to perform such gestures, so interfaces must have alternatives that do not require motion for these gestures. -* Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events. Therefore, interfaces must support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. +* Show examples of interactions based on swipe and pinch gestures. Explain that users with mobility impairments may have difficulty to perform such gestures, so interfaces need to have alternatives that do not require swiping or pinching to perform an action. +* Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments may have difficulty to perform such gestures, so interfaces need to have alternatives that do not require motion for these gestures. +* Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events, so interfaces need to support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. * Refer back to [Designer Module 1: Visual Design, Topic Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts). Explain that larger target sizes for pointer are recommended where possible. The minimum recommended size is 44 by 44 CSS pixels. #### Ideas to Assess Knowledge for Topic @@ -212,7 +212,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Practical — Give students a web application, such as a web email client, and ask them to provide the necessary custom keyboard shortcuts. Assess how students balance the use of standard versus custom keyboard shortcuts. +* Practical &mdash: Give students a web application, such as a web email client, and ask them to provide the necessary custom keyboard shortcuts. Assess how students balance the use of standard versus custom keyboard shortcuts. * Portfolio — Have students design the interactions for a given interface, including mouse, keyboard, touch, and voice. Assess how students design user experiences for different input methods, including mouse, touch, keyboard, and voice. ## Teaching Resources diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 98fcf00ab..8d93d22f3 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -38,12 +38,12 @@ Students should be able to: * identify accessibility requirements for different types of audio and video content * design user experiences for description, captions, transcripts, and sign languages, including interactions, placement, and methods to turn on and off the alternatives -* identify accessibility considerations for media players, including: - * support for different methods of interaction, including mouse, keyboard, touch, and speech - * controls that have clear and descriptive names, that are easy to find on the page, and that are reachable by all users +* identify accessibility issues associated with media players, including: + * select media players with support for different methods of interaction, including mouse, keyboard, touch, and voice + * select media player controls that have clear and descriptive names, that are easy to find, and that are always reachable for users * define methods to control automatic audio and movement, including: * mute and control the volume of auto-playing audio - * pause, stop, and hide moving, blinking, and auto-updating content, including carousels and animations + * pause, stop, and hide moving, blinking, and auto-updating content, including carousels and other animations * identify related requirements for: * developers to programmatically associate alternatives to their corresponding media content * developers to include accessibility support for media players @@ -83,7 +83,7 @@ Skills required for this module: * [WCAG Success Criterion 1.2.3 Audio Description or Media Alternative (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#audio-description-or-media-alternative-prerecorded) * [WCAG Success Criterion 1.2.4 Captions (Live)](https://www.w3.org/WAI/WCAG21/quickref/#captions-live) * [WCAG Success Criterion 1.2.5 Audio Description (Prerecorded)](https://www.w3.org/WAI/WCAG21/quickref/#audio-description-prerecorded) - * [WCAG Success Criterion 1.4.2 Audio Control](https://www.w3.org/WAI/WCAG21/quickref/#audio-control) + * [WCAG Success Criteria 1.4.2 Audio Control](https://www.w3.org/WAI/WCAG21/quickref/#audio-control) * [WCAG Success Criterion 1.4.6 Sign Language (prerecorded](https://www.w3.org/WAI/WCAG21/quickref/#sign-language-prerecorded) * [WCAG Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide) * [WCAG Success Criterion 2.3.1 Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG21/quickref/#three-flashes-or-below-threshold) @@ -111,7 +111,7 @@ Topics to achieve the learning outcomes: Description of visual information is essential for people who cannot see the visuals. Captions are essential for people who cannot hear the audio. Text transcripts provide an alternative to visual and audio information. -Discuss the need for planning in the design phase to accommodate alternatives to multimedia content such as description, captions, text transcripts, and sign languages. Present methods to turn on and off alternatives to multimedia content depending on user needs. Explain that these methods must have clear names and must be reachable by all users. Explain that defining such methods is a designer's responsibility, whereas providing the alternatives is a responsibility shared with the content author. +Discuss the need for planning in the design phase to accommodate alternatives to multimedia content such as description, captions, text transcripts, and sign languages. Present methods to turn on and off alternatives to multimedia content depending on user needs. Explain that these methods need to have clear names and need to be always reachable for users. Explain that defining such methods is a designer's responsibility, whereas providing the alternatives is a responsibility shared with the content author. #### Learning Outcomes for Topic @@ -138,11 +138,11 @@ Students should be able to Optional ideas to teach the learning outcomes: -* Show examples of description of visual information. Emphasize how these alternatives describe the visual information (including text) for people who cannot see the videos. Explain that different standards and policies may refer to description of visual information using different terms, such as audio description, video description, and described videos. Explain that defining the methods to turn on and off the description is a designer's responsibility, whereas providing the description is a responsibility shared with the content author. -* Show examples of captions. Explain that captions are a synchronized text version of the speech and non-speech audio information needed to understand the content. Explain that different standards and policies may refer to captions using different terms, such as subtitles. Explain that defining the methods to turn on and off the captions is a designer's responsibility, whereas providing the captions is a responsibility shared with the content author. Explain that determining where to place captions and in what color and font they are presented is a designer's responsibility, whereas providing such captions is a responsibility shared with the content author. -* Show examples of text transcripts. Explain that transcripts are a text version of the speech and non-speech audio information needed to understand the content. Explain that defining the placement and spacing for the transcripts is a designer's responsibility, whereas providing the transcripts is a responsibility shared with the content author. -* Show examples of sign language. Explain that sign language is essential for people who are deaf and who do not understand written language well. Explain that defining the methods to enable and disable sign language is a designer's responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. -* Show examples of accessible and inaccessible media players. Emphasize that it is generally more reliable to use an existing media player with support for accessibility than to design one from scratch. Emphasize how accessible media players are operable by keyboard, make keyboard focus visible, have clear labels, have appropriate contrast ratios, and are easy to find on the page. For an overview on skills needed to develop a media player, expected functionality, and existing players, see the resource Making Audio and Video Media Accessible, [Media players](/media/av/player/). +* Show examples of description of visual information. Emphasize how these alternatives describe the visual information (including text) for people who cannot see the videos. Explain that different standards and policies may refer to description of visual information using different terms, such as audio description, video description, and described videos. Explain that defining the methods to turn on and off the description is a designers' responsibility, whereas providing the description is a responsibility shared with the content author. +* Show examples of captions. Explain that captions are a synchronized text version of the speech and non-speech audio information needed to understand the content. Explain that different standards and policies may refer to captions using different terms, such as subtitles. Explain that defining the methods to turn on and off the description is a designers' responsibility, whereas providing the description is a responsibility shared with the content author. Explain that determining where to place captions is a designers' responsibility, whereas providing such captions is a responsibility shared with the content author. +* Show examples of text transcripts. Explain that transcripts are a text version of the speech and non-speech audio information needed to understand the content. Explain that defining the placement and spacing for the transcripts is a designers' responsibility, whereas providing the transcripts is a responsibility shared with the content author. +* Show examples of sign language. Explain that sign language is essential for people who are deaf and who do not understand written language well. Explain that defining the methods to enable and disable sign language is a designers' responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. +* Show examples of accessible and inaccessible media players. Emphasize that it is generally more reliable to use an existing media player with support for accessibility than to design one from scratch. Emphasize how accessible media players are operable by keyboard, make keyboard focus visible, have clear labels, have appropriate contrast ratios, and are easy to find. For an overview on skills needed to develop a media player, expected functionality, and existing players, see the resource Making Audio and Video Media Accessible, [Media players](/media/av/player/). #### Ideas to Assess Knowledge for Topic @@ -170,25 +170,21 @@ Students should be able to: * create designs with enough time for users to read parts of moving content, for example different slides in a carousel * define visual and non-visual identification of animated content and its different parts, for example identifying a carousel region and its different slides * define focus order within animated content, including how to move to different parts of the carousel and how to get to the carousel controls -* define methods for stopping or controlling the volume of any audio that plays automatically for more than three seconds +* define methods for stopping or controlling the volume of any audio that plays automatically for more than 3 seconds #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Show examples of content that moves or blinks, such as animations and carousels. Explain that moving content can be problematic and can cause distraction and anxiety for several types of users. Emphasize that some animation frequencies are also known to cause seizures and physical reactions for certain users. For references on how to design interfaces that allow to pause, stop, and hide moving, blinking, or auto-updating content, see the following techniques: +* Show examples of content that moves or blinks, such as animations and carousels. Explain that these animations can cause problems for some users that cannot keep up with the pace of the auto-updating content. Emphasize that, in addition, these animations can cause seizures and physical reactions. For references on how to design interfaces that allow to pause, stop, and hide moving, blinking, or auto-updating content, see the following techniques: * [G4: Allowing the content to be paused and restarted from where it was paused](https://www.w3.org/WAI/WCAG21/Techniques/general/G4), * [G11: Creating content that blinks for less than 5 seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G11), * [G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)](https://www.w3.org/WAI/WCAG21/Techniques/general/G152), * [G186: Using a control in the Web page that stops moving, blinking, or auto-updating content](https://www.w3.org/WAI/WCAG21/Techniques/general/G186), and * [G187: Using a technology to include blinking content that can be turned off via the user agent](https://www.w3.org/WAI/WCAG21/Techniques/general/G187). -<<<<<<< HEAD -* Show examples of flashing content and explain that it can cause seizures and physical reactions for some people. Emphasize that all interface components need to be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole interface. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash below three seconds, see techniques [G19: Ensuring that no component of the content flashes more than three times in any 1-second period](https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html) and [G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold](https://www.w3.org/WAI/WCAG21/Techniques/general/G15.html). -======= -* Show examples of flashing content and explain that it can cause seizures and physical reactions for some people. Emphasize that all interface components muswt be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole interface. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash below 3 seconds, see techniques [G19: Ensuring that no component of the content flashes more than three times in any 1-second period](https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html) and [G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold](https://www.w3.org/WAI/WCAG21/Techniques/general/G15.html). ->>>>>>> survey-changes +* Show examples of flashing content and explain that it can cause seizures and physical reactions for some people. Emphasize that all interface components need to be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole interface. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash below 3 seconds, see techniques [G19: Ensuring that no component of the content flashes more than three times in any 1-second period](https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html) and [G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold](https://www.w3.org/WAI/WCAG21/Techniques/general/G15.html). * Show examples of interactions triggered by animations, such as additional movements when scrolling and decorative gimmicks. Explain that these animations can cause distraction and vestibular disorders (such as dizziness, nausea, and headaches) for some people. Discuss the use of preferences as well as technology specific properties to reduce or disable such animations. -* Demonstrate the use of a screen reader to navigate an application that plays audio automatically for more than three seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a method to pause or control the volume of that audio. Explain that the operating system often provides such method. For references on how to design interfaces with methods to pause or control the volume of any audio that plays automatically, see the following techniques: +* Demonstrate the use of a screen reader to navigate an application that plays audio automatically for more than 3 seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a method to pause or control the volume of that audio. Explain that the operating system often provides such method. For references on how to design interfaces with methods to pause or control the volume of any audio that plays automatically, see the following techniques: * [G60: Playing a sound that turns off automatically within three seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G60.html), * [G170: Providing a control near the beginning of the Web page that turns off sounds that play automatically](https://www.w3.org/WAI/WCAG21/Techniques/general/G170.html), and * [G171: Playing sounds only on user request](https://www.w3.org/WAI/WCAG21/Techniques/general/G171.html). diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 65136b7a6..cd17a920a 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -137,9 +137,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Present different types of navigation menus, such as static, fly-out, and mega menus. Explain conventions for accessible navigation menus, for example clear and consistent styling to convey menu behaviors and states. -* Demonstrate interactions with navigation menus using different input devices, including keyboard, mouse, touch, and voice. For example, activating a menu option by tapping, pressing the Enter and Space keys, and mouse clicking. Explain that defining the interactions is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. -* Show examples of navigation menus and menu items with large text. Explain that the text needs to adapt to different viewports and screen configurations, for example lines of text must wrap to avoid horizontal scrolling. Explain that different languages may have different word sizes, so designers must consider provisions for different word lengths. -* Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Explain how to communicate the states of these menu items visually and non-visually. Explain that defining the visual presentation is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. +* Demonstrate interactions with navigation menus using different input devices, including keyboard, mouse, touch, and voice. For example, activating a menu option by tapping, pressing the Enter and Space keys, and mouse clicking. Explain that defining the interactions is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. +* Show examples of navigation menus and menu items large text. Explain that the text needs to adapt to different viewports and screen configurations, for example lines of text must wrap to avoid horizontal scrolling. Explain that different languages may have different word sizes, so designers must consider provisions for different word lengths. +* Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Explain how to communicate the states of these menu items visually and non-visually. Explain that defining the visual presentation is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. #### Ideas to Assess Knowledge for Topic @@ -186,9 +186,9 @@ Optional ideas to teach the learning outcomes: * Invite students to research different ways to present information in page titles. Reflect with them on how well the titles describe the page contents. Explain that page titles are useful to identify the purpose of a specific web page within a website. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page. Some browsers and assistive technologies may truncate the titles or not show them at all. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique [G88: Providing descriptive titles for Web pages](https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html). * Show examples of visual and non-visual indications in menus about the current page with respect to the website. -#### Ideas to Assess Knowledge for Topic +#### Teaching Ideas for Topic -Optional ideas to assess knowledge: +Optional ideas to teach the learning outcomes: * Practical — Give students a website and ask them to provide multiple ways to navigate across the website. Assess how students identify and design the different user experiences for site navigation, including search functionalities, breadcrumb trails, and site maps. * Practical — Give students a website and ask them to provide descriptive titles that identify each of the pages. Assess how students provide clear and descriptive page titles. @@ -232,7 +232,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Have students define the blocks of repeated content in a website and cooperate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they cooperate with developers to provide a method to bypass such blocks. -* Practical — Give students a document and ask them to provide the table of contents. Assess how students provide the table of contents for documents. +* Practical — Give students a document and ask them to provide the table of contents. Assess how students provide table of contents for documents. {% include excol.html type="end" %} diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 73ecc02f8..fc4be96aa 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -37,10 +37,10 @@ Courses based on this module should: Students should be able to: * explain how people with disabilities rely on designs that adapt to different colors, layouts, spacing, and positions -* design layouts with sufficient contrast ratio for text, images of text, and controls +* design layouts with sufficient color contrast for text, images of text, and controls * design clear and distinguishable focus indicators, for example by using borders, color, and highlighting * use headings, spacing, and styling to group related content -* use several visual and non-visual cues to convey information, including text, color, patterns, and icons +* use visual and non-visual cues to convey information, including text, color, patterns, and icons * design layouts that adapt to: * different font sizes and spacing set by the user in browser and operating system settings * different screen sizes, screen configurations, and user style sheets @@ -109,19 +109,19 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Explain how sufficient contrast ratio is essential for people with disabilities to perceive, distinguish, and understand content. +Explain how sufficient color contrast (contrast ratio in WCAG) is essential for people with disabilities to perceive, distinguish, and understand content. -Describe how some people rely on color to understand and distinguish content. Explain that some people perceive color in different ways, and that some may not perceive color at all. Discuss different ways to supplement information presented using color, such as using shapes and icons. +Describe how some people rely on color to understand and distinguish content. Explain that some people cannot perceive color well or at all. Discuss different ways to supplement information presented using color, such as using shapes and icons. #### Learning Outcomes for Topic Students should be able to: * explain how appropriate use of color enables people with disabilities to read, understand, and distinguish components -* determine sufficient contrast ratiofor text, images of text, and controls -* design text and images of text that have a contrast ratio of at least 4.5:1 with respect to their background -* design large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background -* design components and graphics that have a contrast ratio of at least 3:1 with respect to their background +* determine sufficient color contrast for text, images of text, and controls +* design text and images of text that have a color contrast of at least 4.5:1 with respect to their background +* design large-scale text and images of text that have a color contrast of at least 3:1 with respect to their background +* design components and graphics that have a color contrast of at least 3:1 with respect to their background * define layouts to enable users to change colors based on customized screen sizes, screen configurations, and style sheets * use visual cues in addition to text color, for example by using different patterns, shapes, and icons * use text to complement information provided visually @@ -130,16 +130,16 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of sufficient and insufficient contrast ratio for text. Explain that contrast ratio for text (including images of text) needs to be at least 4.5:1 with respect to their background. For references on how to apply sufficient contrast ratio to text (including images of text), see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). -* Show examples of different interactive components, such as buttons and links. Explain that they should have a contrast ratio of at least 3:1. For references on how to apply sufficient contrast ratio to interactive components, see techniques [G207: Ensuring that a contrast ratio of 3:1 is provided for icons](https://www.w3.org/WAI/WCAG21/Techniques/general/G207) and [G209: Provide sufficient contrast at the boundaries between adjoining colors](https://www.w3.org/WAI/WCAG21/Techniques/general/G209). -* Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some people perceive color in different ways, and that some may not perceive color at all. Some people may require methods different from color to understand that information. For references on how to supplement information conveyed through color, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). +* Show examples of sufficient and insufficient color contrast for text. Explain that color contrast for text (including images of text) needs to be at least 4.5:1 with respect to their background. For references on how to apply sufficient color contrast to text (including images of text), see technique [G18: Ensuring that a color contrast of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). +* Show examples of different interactive components, such as buttons and links. Explain that they should have a color contrast of at least 3:1. +* Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some users cannot perceive color well or at all, so they require additional methods to convey that information. For references on how to supplement information conveyed through color, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Short Answer Questions — Give students several components and ask them what the contrast ratio should be. Assess how students understand and distinguish sufficient contrast ratio for different components. -* Practical — Have students design a prototype and apply sufficient contrast ratio to text, images of text, components, and graphics. Assess how students understand and apply sufficient contrast ratio based on the different components that they are designing. +* Short Answer Questions — Give students several components and ask them what the color contrast should be. Assess how students understand and distinguish sufficient color contrast for different components. +* Practical — Have students design a prototype and apply sufficient color contrast to text, images of text, components, and graphics. Assess how students understand and apply sufficient color contrast based on the different components that they are designing. * Practical — Discuss examples of information presented using color. Ask students to supplement that information using other visual cues. Assess how students use shapes and icons to supplement information presented using color distinguishable. {% include excol.html type="end" %} @@ -201,7 +201,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Invite students to use a web page that has appropriate focus indicators first, and then invite them to use a web page without focus indicators. Explain how focus indicators allow people who rely on keyboard navigation to determine where they are as they move through web pages and applications. For reference on how to provide appropriate focus indicators, see techniques [G149: Using user interface components that are highlighted by the user agent when they receive focus](https://www.w3.org/WAI/WCAG21/Techniques/general/G149.html) and [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). -* Show examples of different web page regions, such as header, navigation, main, and footer. Explain that several groups of people with disabilities rely on visual and programmatic cues to perceive such regions. Explain that defining the presentation of these cues is a designer's responsibility, whereas implementing such cues and their semantics is a developer's responsibility. +* Show examples of different web page regions, such as header, navigation, main, and footer. Explain that several groups of people with disabilities rely on visual and programmatic cues to perceive such regions. Explain that defining the presentation of these cues is a designers' responsibility, whereas implementing such cues and their semantics is a developers' responsibility. * Show examples of interfaces where information is provided through vision only, such as those with icons and color to convey the status of different tasks in a project. Explain that some people cannot rely on visual means to obtain information. These users need text to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). #### Ideas to Assess Knowledge for Topic @@ -241,11 +241,11 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Discuss with students the differences between web sites and applications that preserve content and functionality when resized up to 200% and those which do not. Explain that some people often must resize text to read it properly. For references on how to ensure text resizes up to 200%, see technique [G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width](https://www.w3.org/WAI/WCAG21/Techniques/general/G179). +* Discuss with students the differences between web sites and applications that preserve content and functionality when resized up to 200% and those which do not. Explain that some people often need to resize text to read it properly. For references on how to ensure text resizes up to 200%, see technique [G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width](https://www.w3.org/WAI/WCAG21/Techniques/general/G179). * Discuss the use of multiple screen sizes, screen configurations, and style sheets by people with low vision. Explain that these configurations often go beyond the traditional mobile, tablet, and desktop breakpoints. * Show examples of user interfaces showing up in both portrait and landscape modes. Explain that the ability to show an interface both in portrait and landscape is essential for people who cannot change their device orientation due to mobility impairments. * Show examples of different user interfaces that support customizing line height as well as spacing between paragraphs, words, and letters to support readability. -* Show examples of different target sizes and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that target sizes must be large enough to accommodate different people's needs. +* Show examples of different target sizes and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that target sizes need to be large enough to accommodate different people's needs. #### Ideas to Assess Knowledge for Topic @@ -262,7 +262,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Short Answer Questions — Ask students about the contrast ratio for the different user interface components. Assess how students understand the different contrast ratio requirements depending on the components. +* Short Answer Questions — Ask students about the color contrast ratios for the different user interface components. Assess how students understand the different color contrast requirements depending on the components. * Portfolio — Have students design a web page. Assess how students use customizable color, layout, spacing, and position to support content perception, identification, and readability. ## Teaching Resources From 9513b2a78c25e9bd70c5294067c57b3945eff5a7 Mon Sep 17 00:00:00 2001 From: Kevin White Date: Thu, 2 Dec 2021 10:11:31 +0000 Subject: [PATCH 324/416] Minor text changes (#430) * Not sure on 'actuation'. It is a bit of an uncommon word. Suggested 'activation' but that isn't quite all encompassing. * Same dilemma about speech and voice! Co-authored-by: daniel-montalvo --- content/designer/interaction-design.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index c4615bdaf..b56ed7b42 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -29,19 +29,19 @@ navigation: Courses based on this module should: * demonstrate strategies that people with disabilities use to interact with links, buttons, controls, as well as complex widgets, including sliders, tabs, dialogs, application menus, tree views, and notifications -* explain accessibility requirements related to input methods, including mouse, keyboard, touch, and voice +* explain accessibility requirements related to input methods, including mouse, keyboard, touch, and speech ## Learning Outcomes for Module Students should be able to: * explain strategies that people with disabilities use to interact with links, buttons, controls, and complex widgets, including sliders, tabs, dialogs, application menus, tree views, and notifications -* design user experiences for different input methods, including mouse, touch, keyboard, and voice +* design user experiences for different input methods, including mouse, touch, keyboard, and speech * design interactions and meaningful sequences inside complex widgets, including sliders, tabs, dialogs, application menus, tree views, and notifications * evaluate the use of custom keyboard shortcuts for complex widgets and applications and provide information about their purpose and scope -* define methods to disable device and user motion to prevent accidental actuation +* define methods to disable response to device and user motion to prevent accidental activation * define alternatives for complex gestures, including swiping, pinching, and drawing shapes -* identify related requirements for developers to write code for interactions, including through mouse, keyboard, touch, and voice +* identify related requirements for developers to write code for interactions, including through mouse, keyboard, touch, and speech {% include excol.html type="all" %} @@ -119,7 +119,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain how keyboard support benefits other ways of interacting, including voice interaction and interaction using some assistive technologies. +Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain how keyboard support benefits other ways of interacting, including speech interaction and interaction using some assistive technologies. Present examples of specific non-standard shortcuts. Explain that providing custom keyboard interactions can support efficiency but can also disrupt the users' expectations. Designers must document these custom interactions and make them consistent throughout the interface. Emphasize that defining the keyboard interactions is a designer's responsibility, whereas implementing such interactions is a responsibility shared with the developer. @@ -136,7 +136,7 @@ Students should be able to: * specific keyboard shortcuts to support efficiency * first letter navigation to jump to specific pieces of data in lists and grids * identify situations when additional keyboard shortcuts are necessary, for example when designing a custom functionality that is not keyboard supported by default -* explain how keyboard support benefits other ways of interacting, including voice interaction and interaction using assistive technologies +* explain how keyboard support benefits other ways of interacting, including speech interaction and interaction using assistive technologies * evaluate the use of custom keyboard interactions * select keyboard interactions that do not conflict with the operating system, browser, and assistive technologies when possible * cooperate with developers to provide methods to remap or disable conflicting shortcuts @@ -152,7 +152,7 @@ Optional ideas to teach the learning outcomes: * Invite students to try standard keyboard conventions. For example, use of the tab to move through user interface components, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that standard interactions must be preserved as much as possible when designing custom widgets, as users mostly expect these. * Invite students to research keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers must cooperate with other team members, including developers and user researchers, on strategies to define custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and collaborating with developers to implement such keystrokes. * Present examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. -* Invite students to research how assistive technologies and adaptive strategies rely on keyboard support to provide specific functionality, such as navigating sequentially using voice commands. Demonstrate interaction with assistive technologies in web pages and applications with and without keyboard support. +* Invite students to research how assistive technologies and adaptive strategies rely on keyboard support to provide specific functionality, such as navigating sequentially using spoken commands. Demonstrate interaction with assistive technologies in web pages and applications with and without keyboard support. * Refer back to [Designer Module 1: Visual Design, Topic Orientation Cues](/curricula/designer-modules/visual-design/#topic-orientation-cues) to reflect on focus indicators. Explain that, in addition to visually distinguishable focus indicators, designers must consider programmatic keyboard focus must be considered when providing keyboard support. Emphasize that designers must cooperate with other team members, including developers and user researchers, to design user experiences that use focus placement to reflect changes of context and user interaction. * Show examples of help functionality for custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using those shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these help methods is a designer's responsibility, whereas implementing them is a responsibility shared with the developer. @@ -184,7 +184,7 @@ Students should be able to: * define alternatives to multi-pointer gestures (including swiping, pinching, and drawing shapes) by using single pointer activation * define methods to undo or abort an action carried out with path-based gestures, including use of the up event to undo, abort, and reverse activation * define alternatives for device or user motion, for example components performing the same function that do not require user motion -* define methods to disable response to device or user motion to prevent accidental actuation +* define methods to disable response to device or user motion to prevent accidental activation * design user experiences that consider larger target sizes for pointer inputs #### Teaching Ideas for Topic @@ -213,7 +213,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: * Practical — Give students a web application, such as a web email client, and ask them to provide the necessary custom keyboard shortcuts. Assess how students balance the use of standard versus custom keyboard shortcuts. -* Portfolio — Have students design the interactions for a given interface, including mouse, keyboard, touch, and voice. Assess how students design user experiences for different input methods, including mouse, touch, keyboard, and voice. +* Portfolio — Have students design the interactions for a given interface, including mouse, keyboard, touch, and speech. Assess how students design user experiences for different input methods, including mouse, touch, keyboard, and speech. ## Teaching Resources From 029bdb120acd1a911e93b49cd475817ebb31708c Mon Sep 17 00:00:00 2001 From: Kevin White Date: Thu, 2 Dec 2021 10:17:33 +0000 Subject: [PATCH 325/416] Minor text changes (#429) Not sure about the 'speech' or 'voice'. Sometimes I think it is useful to use 'speech' to get it into my head other times I think 'voice' sounds a wee bit better. Open for editors :) Co-authored-by: daniel-montalvo --- content/designer/navigation-design.md | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 65136b7a6..7ab108a75 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -38,7 +38,7 @@ Students should be able to: * explain strategies that people with disabilities use to navigate websites and applications * design different navigational components, including menus, tables of contents, and search functionalities -* describe different interactions for navigational components, including by keyboard, mouse, touch, and voice +* describe different interactions for navigational components, including by keyboard, mouse, touch, and speech * define clear and consistent visual and non-visual: * presentation of menus and menu items * indication of state changes for menu items @@ -47,7 +47,7 @@ Students should be able to: * evaluate the use of navigational components, including menus, tables of contents, and site maps * select navigational components that minimize distraction and unnecessary noise * identify related requirements for developers to implement: - * interactions for navigational components, including by keyboard, mouse, touch, and voice + * interactions for navigational components, including by keyboard, mouse, touch, and speech * clear and descriptive names for navigational components * additional semantics for navigational components, including menus, menu items, and menu item states * methods to bypass blocks of repeated content @@ -123,13 +123,13 @@ Students should be able to: * define visual and text indications to identify menus, including: * consistent styling for menu identification across websites * visual and non-visual indications about the current page in the navigation menu -* define interactions inside navigation menus, including mouse, keyboard, touch, and voice +* define interactions inside navigation menus, including mouse, keyboard, touch, and speech * design navigation menus that adapt to different text sizes, screen magnifications, and screen sizes and resolutions * apply distinguishable and consistent styles for menu items in their different states, for example in fly-out menus * identify related requirements for developers to implement: * non-visual identification and naming of menus * semantics for different menu states and properties, such as hover, focus, current, active, and visited - * support for different interaction methods, including keyboard, mouse, touch, and voice + * support for different interaction methods, including keyboard, mouse, touch, and speech * support for different text and screen sizes #### Teaching Ideas @@ -137,15 +137,21 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Present different types of navigation menus, such as static, fly-out, and mega menus. Explain conventions for accessible navigation menus, for example clear and consistent styling to convey menu behaviors and states. +<<<<<<< HEAD +* Demonstrate interactions with navigation menus using different input devices, including keyboard, mouse, touch, and speech. For example, activating a menu option by tapping, pressing the Enter and Space keys, and mouse clicking. Explain that defining the interactions is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. +* Show examples of navigation menus and menu items large text. Explain that the text needs to adapt to different viewports and screen configurations, for example lines of text must wrap to avoid horizontal scrolling. Explain that different languages may have different word sizes, so designers must consider provisions for different word lengths. +* Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Explain how to communicate the states of these menu items visually and non-visually. Explain that defining the visual presentation is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. +======= * Demonstrate interactions with navigation menus using different input devices, including keyboard, mouse, touch, and voice. For example, activating a menu option by tapping, pressing the Enter and Space keys, and mouse clicking. Explain that defining the interactions is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. * Show examples of navigation menus and menu items with large text. Explain that the text needs to adapt to different viewports and screen configurations, for example lines of text must wrap to avoid horizontal scrolling. Explain that different languages may have different word sizes, so designers must consider provisions for different word lengths. * Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Explain how to communicate the states of these menu items visually and non-visually. Explain that defining the visual presentation is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. +>>>>>>> survey-changes #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Have students define mouse, keyboard, touch, and voice interactions for navigation menus. For example, how to open, navigate, activate, and close such menus using the mouse, keyboard, touch, and voice. Assess how students understand the need for different interaction patterns based on the input method in use. +* Practical — Have students define mouse, keyboard, touch, and speech interactions for navigation menus. For example, how to open, navigate, activate, and close such menus using the mouse, keyboard, touch, and speech. Assess how students understand the need for different interaction patterns based on the input method in use. * Practical — Give students different navigation menu states, such as hover, focus, current, active, and visited, and ask them to provide visual and non-visual methods to distinguish them from one another. Assess how students communicate navigation menus and menu items states visually and non-visually. * Practical — Give students a navigation menu and ask them to provide visual and non-visual indications about the currently selected item. Assess how students provide appropriate indications about the page location with respect to the entire website. * Practical — Give students navigation menus containing long strings of text. Ask them to ensure the text is displayed irrespective of the viewport and screen configuration used. Assess how students understand the diversity among different languages, viewports, and screen configurations. @@ -242,7 +248,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Short Answer Questions — Ask students to recite the different types of navigational methods that exist and provide examples for each. Assess how students understand and communicate those different types of navigational methods for websites, documents, and applications. +* Short Answer Questions — Ask students to outline the different types of navigational methods that exist and provide examples for each. Assess how students understand and communicate those different types of navigational methods for websites, documents, and applications. * Portfolio — Have students design the navigation menu and other navigational components for a website. Assess how students understand accessibility features of navigation across websites and applications. ## Teaching Resources From eeeeb21756b88ea65df8b45d49fd31eddd97eba7 Mon Sep 17 00:00:00 2001 From: Kevin White Date: Thu, 2 Dec 2021 10:24:07 +0000 Subject: [PATCH 326/416] Minor text edits (#428) Co-authored-by: daniel-montalvo --- content/designer/information-design.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 1a380ad7e..153fa5d58 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -104,7 +104,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Discuss ways to use text and semantic structure to communicate the organization of pages and documents. For example, using pages to split the content into logical units, landmarks to define page regions, and headings with their corresponding rank levels to group related information. +Discuss ways to use text and semantic structure to communicate the organization of pages and documents. For example, using pages to split the content into logical units, landmarks to define page regions, and headings with their corresponding levels to group related information. Discuss the use of diagrams and illustrations to help users understand the information provided in text. @@ -117,7 +117,7 @@ Students should be able to: * landmarks with their corresponding region type * headings (with their corresponding rank levels) * sidebars and other page regions -* define the presentation of diagrams and illustrations to make textual information easier to understand; for example, a diagram representation of the process described in the text +* define the presentation of diagrams and illustrations to make textual information easier to understand; for example, a diagram of the process described in the text * select methods to provide specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon * select methods to provide the expanded form or meaning of acronyms and abbreviations * identify related requirements for: @@ -130,7 +130,7 @@ Optional ideas to teach the learning outcomes: * Show examples of pages and explain how they are divided into several regions. Demonstrate that, in addition to visually distinguishing these regions, semantics and text are needed to ensure that all users can understand the relations between them. Explain that defining and planning the different regions is a designer's responsibility, whereas adding the semantics is a responsibility shared with the developer. * Show examples of online articles and forms. Discuss how these are divided into manageable pieces so that they are easier to understand and to navigate. For example, by using headings with their corresponding rank levels to indicate the different chapters, sections, and subsections of content. -* Show examples of diagrams and illustrations that can complement the information presented in text. For example, visual instructions that supplement the textual information of a user manual. Explain that they help users with reading disabilities to understand difficult pieces of text. Explain that defining the presentation of such diagrams and illustrations is a responsibility of the designer, whereas providing the diagrams and illustrations is a responsibility of the content author. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). +* Show examples of diagrams and illustrations that can complement the information presented in text. For example, visual instructions that supplement the text of a user manual. Explain that they help users with reading disabilities to understand difficult pieces of text. Explain that defining the presentation of such diagrams and illustrations is a responsibility of the designer, whereas providing the diagrams and illustrations is a responsibility of the content author. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). * Show examples of words that may be difficult to understand or that are used in a specialized way. Explain that people who are not familiar with such words need definitions to understand their meaning. Explain that defining the methods to provide such definitions is a designer's responsibility, whereas providing the definitions is a responsibility shared with the content author. * Show examples of abbreviations, such as short forms of words and acronyms. Explain that people who are not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand them. Explain that specifying the methods to provide such explanations or expansions is a designer's responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. @@ -215,8 +215,8 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Give students a table and ask them to define the table's header cells and data cells. Assess how students understand the difference between header cells and data cells. -* Practical — Give students a set of tables and ask them to provide clear styles to distinguish data cells from header cells. Assess how students provide clear and distinguishable styles for header cells and data cells. +* Practical — Give students a table and ask them to define the table's header and data cells. Assess how students understand the difference between header and data cells. +* Practical — Give students a set of tables and ask them to provide clear styles to distinguish header cells from data cells. Assess how students provide clear and distinguishable styles for header and data cells. * Practical — Give students a complex table and ask them to split the information using simpler tables, lists, and graphical representations where appropriate. Assess how students provide alternative ways to present tabular information. {% include excol.html type="end" %} From 642355ae709f96c06c21d8dff580c729258b221e Mon Sep 17 00:00:00 2001 From: Kevin White Date: Thu, 2 Dec 2021 10:28:07 +0000 Subject: [PATCH 327/416] Minor text edits (#427) Not sure about the 'and style sheets'. I see style sheets as the way to effect alternative presentations. I was also concerned that it might suggest teaching designers CSS which may not be the intention Co-authored-by: daniel-montalvo --- content/designer/visual-design.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 73ecc02f8..d0571c8cf 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -118,10 +118,10 @@ Describe how some people rely on color to understand and distinguish content. Ex Students should be able to: * explain how appropriate use of color enables people with disabilities to read, understand, and distinguish components -* determine sufficient contrast ratiofor text, images of text, and controls +* determine sufficient contrast ratio for text, images of text, and controls * design text and images of text that have a contrast ratio of at least 4.5:1 with respect to their background * design large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background -* design components and graphics that have a contrast ratio of at least 3:1 with respect to their background +* design user interface components and graphics that have a contrast ratio of at least 3:1 with respect to their background * define layouts to enable users to change colors based on customized screen sizes, screen configurations, and style sheets * use visual cues in addition to text color, for example by using different patterns, shapes, and icons * use text to complement information provided visually @@ -175,7 +175,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Have students design a prototype with adaptable and distinguishable styles that help users perceive different content. Assess how students use different style properties such as font sizes and spacing to make content perceivable and to distinguish components from one another. +* Practical — Have students design a prototype with adaptable and distinguishable styles that help users perceive different content. Assess how students use different styles such as font sizes and spacing to make content perceivable and to distinguish components from one another. {% include excol.html type="end" %} @@ -185,7 +185,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Explain how people with disabilities use visual and non-visual cues to orient on web pages and applications. For example, focus indicators as well as spacing and grouping to communicate regions. Present strategies to help students incorporate early planning for such cues within the visual design phase. +Explain how people with disabilities use visual and non-visual cues to orient on web pages and applications. For example, focus indicators to show interactive elements and spacing and grouping to communicate regions. Present strategies to help students incorporate early planning for such cues within the visual design phase. #### Learning Outcomes for Topic @@ -193,7 +193,7 @@ Students should be able to: * design focus indicators that enable people to tell where they are as they move through web pages and applications using the keyboard * define page regions by using headings, spacing, and grouping -* design layouts that enable presentation of visual and non-visual cues in different screen sizes, screen configurations, and style sheets +* design layouts that enable presentation of visual and non-visual cues in different screen sizes and screen configurations * define methods to help users perceive and understand visual and non-visual cues, for example by using text, color, and icons to convey the status of tasks in a project #### Teaching Ideas for Topic @@ -220,7 +220,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Refer to responsive design techniques. Explain that other elements also contribute to an accessible user experience. Encourage consideration of how content sequence, focus indicators, and target size can be designed to adapt to different screen sizes, screen configurations, and style sheets. +Refer to responsive design techniques. Explain that other elements also contribute to an accessible user experience. Encourage consideration of how content sequence, focus indicators, and target size can be designed to adapt to different screen sizes and screen configurations. Demonstrate approaches to balance the use of too many design elements to avoid potential overload and distraction for some users. @@ -231,7 +231,7 @@ Students should be able to: * design layouts to support text resizing without loss of content and functionality * design layouts to support text zooming and enlarging in different viewport sizes and through multiple breakpoints * design layouts that adapt their content view and operation to portrait and landscape orientations -* design layouts with target sizes that adapt to different screen sizes, screen configurations, and style sheets, for example when creating responsive designs +* design layouts with target sizes that adapt to different screen sizes and screen configurations, for example when creating responsive designs * design layouts to support user customization of line height, as well as spacing between paragraphs, words, and letters * define meaningful focus orders that adapt to different viewports, screen sizes, and multiple breakpoints * evaluate the overuse of design elements, in particular interactive widgets, images, and moving content From f5d0b314d2f52c775396f61dfdb1dda8ba7f3fa4 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 2 Dec 2021 11:31:06 +0100 Subject: [PATCH 328/416] Solving conflict --- content/designer/navigation-design.md | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 7ab108a75..314808882 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -137,15 +137,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Present different types of navigation menus, such as static, fly-out, and mega menus. Explain conventions for accessible navigation menus, for example clear and consistent styling to convey menu behaviors and states. -<<<<<<< HEAD -* Demonstrate interactions with navigation menus using different input devices, including keyboard, mouse, touch, and speech. For example, activating a menu option by tapping, pressing the Enter and Space keys, and mouse clicking. Explain that defining the interactions is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. -* Show examples of navigation menus and menu items large text. Explain that the text needs to adapt to different viewports and screen configurations, for example lines of text must wrap to avoid horizontal scrolling. Explain that different languages may have different word sizes, so designers must consider provisions for different word lengths. -* Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Explain how to communicate the states of these menu items visually and non-visually. Explain that defining the visual presentation is a designers' responsibility, whereas providing the underlying code is a developers' responsibility. -======= -* Demonstrate interactions with navigation menus using different input devices, including keyboard, mouse, touch, and voice. For example, activating a menu option by tapping, pressing the Enter and Space keys, and mouse clicking. Explain that defining the interactions is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. +* Demonstrate interactions with navigation menus using different input devices, including keyboard, mouse, touch, and speech. For example, activating a menu option by tapping, pressing the Enter and Space keys, and mouse clicking. Explain that defining the interactions is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. * Show examples of navigation menus and menu items with large text. Explain that the text needs to adapt to different viewports and screen configurations, for example lines of text must wrap to avoid horizontal scrolling. Explain that different languages may have different word sizes, so designers must consider provisions for different word lengths. * Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Explain how to communicate the states of these menu items visually and non-visually. Explain that defining the visual presentation is a designer's responsibility, whereas providing the underlying code is a developer's responsibility. ->>>>>>> survey-changes #### Ideas to Assess Knowledge for Topic From cf93a19f30f3f8f64ed698ca8e38b521796f5bda Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 2 Dec 2021 11:37:02 +0100 Subject: [PATCH 329/416] Fixes multimedia-and-animations and adds @iadawn editorial suggestions --- content/designer/multimedia-and-animations.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 5c4cb03ca..a70e1fd7f 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -39,7 +39,7 @@ Students should be able to: * identify accessibility requirements for different types of audio and video content * design user experiences for description, captions, transcripts, and sign languages, including interactions, placement, and methods to turn on and off the alternatives * identify accessibility considerations for media players, including: - * support for different methods of interaction, including mouse, keyboard, touch, and voice + * support for different methods of interaction, including mouse, keyboard, touch, and speech * controls that have clear and descriptive names, that are easy to find on the page, and that are reachable by all users * define methods to control automatic audio and movement, including: * mute and control the volume of auto-playing audio @@ -170,7 +170,7 @@ Students should be able to: * create designs with enough time for users to read parts of moving content, for example different slides in a carousel * define visual and non-visual identification of animated content and its different parts, for example identifying a carousel region and its different slides * define focus order within animated content, including how to move to different parts of the carousel and how to get to the carousel controls -* define methods for stopping or controlling the volume of any audio that plays automatically for more than 3 seconds +* define methods for stopping or controlling the volume of any audio that plays automatically for more than three seconds #### Teaching Ideas for Topic @@ -182,9 +182,9 @@ Optional ideas to teach the learning outcomes: * [G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)](https://www.w3.org/WAI/WCAG21/Techniques/general/G152), * [G186: Using a control in the Web page that stops moving, blinking, or auto-updating content](https://www.w3.org/WAI/WCAG21/Techniques/general/G186), and * [G187: Using a technology to include blinking content that can be turned off via the user agent](https://www.w3.org/WAI/WCAG21/Techniques/general/G187). -* Show examples of flashing content and explain that it can cause seizures and physical reactions for some people. Emphasize that all interface components muswt be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole interface. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash below 3 seconds, see techniques [G19: Ensuring that no component of the content flashes more than three times in any 1-second period](https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html) and [G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold](https://www.w3.org/WAI/WCAG21/Techniques/general/G15.html). +* Show examples of flashing content and explain that it can cause seizures and physical reactions for some people. Emphasize that all interface components muswt be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole interface. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash below three seconds, see techniques [G19: Ensuring that no component of the content flashes more than three times in any 1-second period](https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html) and [G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold](https://www.w3.org/WAI/WCAG21/Techniques/general/G15.html). * Show examples of interactions triggered by animations, such as additional movements when scrolling and decorative gimmicks. Explain that these animations can cause distraction and vestibular disorders (such as dizziness, nausea, and headaches) for some people. Discuss the use of preferences as well as technology specific properties to reduce or disable such animations. -* Demonstrate the use of a screen reader to navigate an application that plays audio automatically for more than 3 seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a method to pause or control the volume of that audio. Explain that the operating system often provides such method. For references on how to design interfaces with methods to pause or control the volume of any audio that plays automatically, see the following techniques: +* Demonstrate the use of a screen reader to navigate an application that plays audio automatically for more than three seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a method to pause or control the volume of that audio. Explain that the operating system often provides such method. For references on how to design interfaces with methods to pause or control the volume of any audio that plays automatically, see the following techniques: * [G60: Playing a sound that turns off automatically within three seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G60.html), * [G170: Providing a control near the beginning of the Web page that turns off sounds that play automatically](https://www.w3.org/WAI/WCAG21/Techniques/general/G170.html), and * [G171: Playing sounds only on user request](https://www.w3.org/WAI/WCAG21/Techniques/general/G171.html). @@ -218,4 +218,4 @@ Suggested resources to support your teaching: * [Colors with Good Contrast (Web Accessibility Perspective)](/perspective-videos/contrast/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [Clear Layout and Design (Web Accessibility Perspective)](/perspective-videos/layout/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [Large Links, Buttons, and Controls (Web Accessibility Perspectives)](/perspective-videos/controls/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. -* [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. +* [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. \ No newline at end of file From f594bf68a43150e1d1e6b7f7616f4cae35df268b Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 6 Dec 2021 10:30:00 +0100 Subject: [PATCH 330/416] #403 names for components -> labels --- content/designer/information-design.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 153fa5d58..13928117a 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -104,7 +104,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Discuss ways to use text and semantic structure to communicate the organization of pages and documents. For example, using pages to split the content into logical units, landmarks to define page regions, and headings with their corresponding levels to group related information. +Discuss ways to use text and semantic structure to communicate the organization of pages and documents. For example, using pages to split the content into logical units, landmarks to define page regions, and headings with their corresponding rank levels to group related information. Discuss the use of diagrams and illustrations to help users understand the information provided in text. @@ -156,7 +156,7 @@ Discuss the use of labels, instructions, and graphical representations to help p Students should be able to: -* define clear and distinguishable names for components, including visual and programmatic labels +* define clear and distinguishable labels for components, including visual and programmatic names * define overall instructions to make information in multi-step processes more understandable, for example text and graphical representations * define visual and non-visual instructions to communicate the total number of steps and the current step in multi-step forms and processes * define related controls, such as those collecting personal information, payment methods, and consent to legal conditions, and communicate such relationships visually and non-visually @@ -165,7 +165,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of names for components, including links, buttons, and form controls. Explain that these names help users identify these components. Explain that defining the presentation of these names is a designer's responsibility, implementing these names is a developer's responsibility, and defining names is a responsibility shared with the content author. +* Show examples of labels, including names for links, buttons, and form controls. Explain that these labels help users identify these components. Explain that defining the presentation of these labels is a designer's responsibility, implementing these labels is a developer's responsibility, and providing labels is a responsibility shared with the content author. * Show examples of overall instructions, for example indications of what will happen after pressing a button. Explain that these instructions help users better understand the purpose and functionality of components. Explain that instruction presentation is a designer's responsibility, implementing these instructions is a developer's responsibility, and defining the content of these instructions is a responsibility shared with the content author. * Show examples of multi-step processes, such as a multi-step form, with instructions to indicate the current step and total number of steps in the process. Then show examples of multi-step processes without such instructions. Compare the user experiences for each of the examples. Explain that people rely on such instructions to get an understanding of where they are in the process and how many steps the process has. Explain that defining the presentation of such instructions is a designer's responsibility, implementing these instructions is a developer's responsibility, and providing these instructions is a responsibility shared with the content author. * Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to understand and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and programmatically, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look is a designer's responsibility, whereas coding those relations is a developer's responsibility. @@ -215,8 +215,8 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Give students a table and ask them to define the table's header and data cells. Assess how students understand the difference between header and data cells. -* Practical — Give students a set of tables and ask them to provide clear styles to distinguish header cells from data cells. Assess how students provide clear and distinguishable styles for header and data cells. +* Practical — Give students a table and ask them to define the table's header cells and data cells. Assess how students understand the difference between header cells and data cells. +* Practical — Give students a set of tables and ask them to provide clear styles to distinguish header cells from data cells. Assess how students provide clear and distinguishable styles for header cells and data cells. * Practical — Give students a complex table and ask them to split the information using simpler tables, lists, and graphical representations where appropriate. Assess how students provide alternative ways to present tabular information. {% include excol.html type="end" %} From 9360384168029343e05c7ff1d015beb2e70a5267 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 6 Dec 2021 10:51:30 +0100 Subject: [PATCH 331/416] #435 Clarifying "unintended purpose" --- content/designer/forms-design.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 428990906..3d6608f33 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -37,7 +37,7 @@ Students should be able to: * explain how people with disabilities rely on placement, structure, labels, instructions, and notifications to understand, navigate, and interact with forms * define consistent use, placement, and appearance of form elements -* define interactions with form elements, including through mouse, keyboard, touch, and voice +* define interactions with form elements, including through mouse, keyboard, touch, and speech * define clear and distinguishable names as well as visual and non-visual instructions to understand the purpose and functionality of form elements * define clear and descriptive visual and non-visual instructions for the current step and the total number of steps in multi-step forms * define clear and descriptive error messages that: @@ -127,23 +127,23 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Explore different form elements and their intended purpose, including edit boxes, check boxes, radio buttons, and buttons. Explain uses of standard versus non-standard elements and how use of non-standard elements impacts accessibility. +Explore different form elements and their purpose, including edit boxes, check boxes, radio buttons, and buttons. Explain uses of standard versus non-standard elements and how use of non-standard elements impacts accessibility. #### Learning Outcomes for Topic Students should be able to: -* identify different uses and intended purposes of form elements -* identify how using form elements with unintended purposes can cause compatibility issues and cognitive overload +* identify the purposes of form elements, including edit boxes, check boxes, radio buttons, and buttons +* identify how using form elements with purposes different than those defined in the standards can cause compatibility issues and cognitive overload * evaluate the use of standard versus non-standard form elements * select form elements that minimize extra work to make them accessible in the implementation phase -* identify related requirements for developers to write code for form elements that programmatically identifies their intended purpose as well as their current state and value +* identify related requirements for developers to write code for form elements that programmatically identifies their purpose as well as their current state and value ### Teaching Ideas for Topic -Optional ideas to teach the learning outcomes. +Optional ideas to teach the learning outcomes: -* Show examples of different form elements and reflect on their intended purpose. For example, edit boxes, check boxes, radio buttons, and buttons. Emphasize that using a form element with an unintended purpose can cause cognitive overload as well as compatibility issues with assistive technologies and adaptive strategies. +* Show examples of different form elements and reflect on their purposes as defined in the standards. For example, edit boxes, check boxes, radio buttons, and buttons. Emphasize that using form elements with purposes different than those defined in the standards can cause cognitive overload as well as compatibility issues with assistive technologies and adaptive strategies. * Show examples of standard versus non-standard form elements. Explain that standard elements are generally accessible by default, and that there is little need for extra work to make them accessible at a later phase. However, use of non-standard elements generally requires additional coding to ensure these elements are usable with the keyboard and compatible with assistive technologies. #### Ideas to Assess Knowledge for Topic From c683da09fffb1860c0abc1c2c25f4c78c5e6ae7d Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 7 Dec 2021 13:37:05 +0100 Subject: [PATCH 332/416] #398 -- pass on "overuse" + Position -> placement --- content/designer/visual-design.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index d0571c8cf..7491ca186 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -30,13 +30,13 @@ navigation: Courses based on this module should: * demonstrate how people with disabilities rely on layouts that adapt to different screen sizes, screen configurations, and style sheets -* explain accessibility requirements for color, layout, spacing, and position of components +* explain accessibility requirements for color, layout, spacing, and placement of components ## Learning Outcomes for Module Students should be able to: -* explain how people with disabilities rely on designs that adapt to different colors, layouts, spacing, and positions +* explain how people with disabilities rely on designs that adapt to different colors, layouts, spacing, and placement * design layouts with sufficient contrast ratio for text, images of text, and controls * design clear and distinguishable focus indicators, for example by using borders, color, and highlighting * use headings, spacing, and styling to group related content @@ -44,7 +44,7 @@ Students should be able to: * design layouts that adapt to: * different font sizes and spacing set by the user in browser and operating system settings * different screen sizes, screen configurations, and user style sheets -* evaluate the overuse of design elements +* evaluate the potential overuse of design elements * select design elements that minimize distraction and cognitive overload * identify related requirements for developers to apply the necessary semantics to interface components @@ -193,7 +193,7 @@ Students should be able to: * design focus indicators that enable people to tell where they are as they move through web pages and applications using the keyboard * define page regions by using headings, spacing, and grouping -* design layouts that enable presentation of visual and non-visual cues in different screen sizes and screen configurations +* design layouts that enable presentation of visual and non-visual cues in different screen sizes, screen configurations, and style sheets * define methods to help users perceive and understand visual and non-visual cues, for example by using text, color, and icons to convey the status of tasks in a project #### Teaching Ideas for Topic @@ -231,17 +231,17 @@ Students should be able to: * design layouts to support text resizing without loss of content and functionality * design layouts to support text zooming and enlarging in different viewport sizes and through multiple breakpoints * design layouts that adapt their content view and operation to portrait and landscape orientations -* design layouts with target sizes that adapt to different screen sizes and screen configurations, for example when creating responsive designs +* design layouts with target sizes that adapt to different screen sizes, screen configurations, and style sheets, for example when creating responsive designs * design layouts to support user customization of line height, as well as spacing between paragraphs, words, and letters * define meaningful focus orders that adapt to different viewports, screen sizes, and multiple breakpoints -* evaluate the overuse of design elements, in particular interactive widgets, images, and moving content +* evaluate the potential overuse of design elements, in particular interactive widgets, images, and moving content * select elements that minimize distraction and cognitive overload #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Discuss with students the differences between web sites and applications that preserve content and functionality when resized up to 200% and those which do not. Explain that some people often must resize text to read it properly. For references on how to ensure text resizes up to 200%, see technique [G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width](https://www.w3.org/WAI/WCAG21/Techniques/general/G179). +* Discuss with students the differences between web sites and applications that preserve content and functionality when resized up to 200% and those which do not. Explain that some people often need to resize text to read it properly. For references on how to ensure text resizes up to 200%, see technique [G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width](https://www.w3.org/WAI/WCAG21/Techniques/general/G179). * Discuss the use of multiple screen sizes, screen configurations, and style sheets by people with low vision. Explain that these configurations often go beyond the traditional mobile, tablet, and desktop breakpoints. * Show examples of user interfaces showing up in both portrait and landscape modes. Explain that the ability to show an interface both in portrait and landscape is essential for people who cannot change their device orientation due to mobility impairments. * Show examples of different user interfaces that support customizing line height as well as spacing between paragraphs, words, and letters to support readability. @@ -263,7 +263,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: * Short Answer Questions — Ask students about the contrast ratio for the different user interface components. Assess how students understand the different contrast ratio requirements depending on the components. -* Portfolio — Have students design a web page. Assess how students use customizable color, layout, spacing, and position to support content perception, identification, and readability. +* Portfolio — Have students design a web page. Assess how students use customizable color, layout, spacing, and placement to support content perception, identification, and readability. ## Teaching Resources From bc369089e742aba8cc4f4dc66e687ecc4d2847f5 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 7 Dec 2021 13:37:52 +0100 Subject: [PATCH 333/416] Fix confusion of "research" being a name --- content/designer/information-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 13928117a..5dd423ca8 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -185,7 +185,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Research strategies that people with disabilities use to interact with information presented in tables. For example, using textual descriptions, graphical representations of the table content, as well as several simpler tables or individual lists to present the information in a complex table. +Investigate strategies that people with disabilities use to interact with information presented in tables. For example, using textual descriptions, graphical representations of the table content, as well as several simpler tables or individual lists to present the information in a complex table. #### Learning Outcomes for Topic From b3e9b7dff67d3341de4ded147f3cc6f55faf2edd Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 7 Dec 2021 13:39:53 +0100 Subject: [PATCH 334/416] Editorial changes --- content/designer/interaction-design.md | 14 +++++++------- content/designer/navigation-design.md | 6 +++--- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index b56ed7b42..fe67c1710 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -119,7 +119,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain how keyboard support benefits other ways of interacting, including speech interaction and interaction using some assistive technologies. +Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain how keyboard support benefits other ways of interacting, including speech interaction and effective use of some assistive technologies. Present examples of specific non-standard shortcuts. Explain that providing custom keyboard interactions can support efficiency but can also disrupt the users' expectations. Designers must document these custom interactions and make them consistent throughout the interface. Emphasize that defining the keyboard interactions is a designer's responsibility, whereas implementing such interactions is a responsibility shared with the developer. @@ -129,11 +129,11 @@ Students should be able to: * design user experiences for keyboard navigation through and inside components of websites and applications, for example using: * the tab key to move through different components - * the enter key to access a specific component and to select an item on a component + * the enter key to access a component and to select a specific item on a component * the arrow keys to move through elements inside components, including sliders, tabs, dialogs, application menus, and tree views * the escape key to exit components - * specific keyboard shortcuts to reveal, review, and dismiss notifications - * specific keyboard shortcuts to support efficiency + * additional keyboard shortcuts to reveal, review, and dismiss notifications + * additional keyboard shortcuts to support efficiency * first letter navigation to jump to specific pieces of data in lists and grids * identify situations when additional keyboard shortcuts are necessary, for example when designing a custom functionality that is not keyboard supported by default * explain how keyboard support benefits other ways of interacting, including speech interaction and interaction using assistive technologies @@ -175,7 +175,7 @@ Optional ideas to assess knowledge: Show examples of user interfaces that react to motion, such as shaking the device to perform a specific action. Explain that some people may perform these motion-based gestures inadvertently, while others may not be able to perform them at all. Present alternatives to motion-based gestures, for example providing methods to undo, abort, and reverse actions performed using complex gestures. -Discuss gestures that require dragging and drawing specific paths on a touch screen. Explain that these are difficult (and sometimes impossible) to perform for some people. +Discuss gestures that require dragging and drawing specific paths on a touch screen. Explain the difficulties these may present for some people with disabilities. Present approaches to using complex gestures appropriately in interaction design. #### Learning Outcomes for Topic @@ -191,8 +191,8 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of interactions based on swipe and pinch gestures. Explain that users with mobility impairments may have difficulty to perform such gestures, so interfaces must have alternatives that do not require swiping or pinching to perform an action. -* Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments may have difficulty to perform such gestures, so interfaces must have alternatives that do not require motion for these gestures. +* Show examples of interactions based on swipe and pinch gestures. Explain that users with mobility impairments may have difficulty to perform such gestures. Therefore, interfaces must have alternatives that do not require swiping or pinching to perform an action. +* Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments may have difficulty to perform such gestures. Therefore, interfaces must have alternatives that do not require motion for these gestures. * Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events. Therefore, interfaces must support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. * Refer back to [Designer Module 1: Visual Design, Topic Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts). Explain that larger target sizes for pointer are recommended where possible. The minimum recommended size is 44 by 44 CSS pixels. diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 314808882..3bd5a62fd 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -132,7 +132,7 @@ Students should be able to: * support for different interaction methods, including keyboard, mouse, touch, and speech * support for different text and screen sizes -#### Teaching Ideas +#### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: @@ -158,7 +158,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Discuss strategies that people use to navigate to different pages of the same site, including menus, breadcrumb trails, search functionalities, and site maps. Explain that different groups of users rely on different navigational components. Discuss how to assess and balance which ones to use to favor various user experiences while avoiding potential distractions and unnecessary noise. +Discuss strategies that people use to navigate to different pages of the same site, including menus, breadcrumb trails, search functionalities, and site maps. Explain that different people rely on different navigational components. Discuss strategies to use several site navigational methods that minimize distractions and unnecessary noise. #### Learning Outcomes for Module @@ -174,7 +174,7 @@ Students should be able to: * text and visual indications about the current page in the navigation menu * evaluate the amount of site navigational components in use * select components that help users navigate and orient -* identify related requirements for developers to apply semantics to page titles, headings, as well as visual and non-visual indications in navigation menus +* identify related requirements for developers to apply semantics and styles to site navigational components #### Teaching Ideas for Topic From 67244d87bc94cfbff777c7e2400b574387741725 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 7 Dec 2021 13:41:57 +0100 Subject: [PATCH 335/416] Editorial --- content/designer/images-and-graphics.md | 11 +++++------ content/designer/multimedia-and-animations.md | 14 +++++++------- 2 files changed, 12 insertions(+), 13 deletions(-) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 40a1d3ea5..168db1c74 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -102,7 +102,7 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Functional images convey functionality of a component. For example, search, print, and save functionality are often presented using icon imagery. Explain requirements related to color and contrast to help users distinguish these images from other components. Show examples of graphical links and buttons as well as logos. Discuss with students how they would describe each of those examples. +Functional images convey the purpose of a component. For example, search, print, and save functionality are often presented using icon imagery. Explain requirements related to color and contrast to help users distinguish these images from other components. Show examples of graphical links and buttons as well as logos. Discuss with students how they would describe each of those examples. #### Learning Outcomes for Topic @@ -153,7 +153,7 @@ Students should be able to: * text alternatives that describe the information conveyed by images * apply the appropriate contrast ratio to images that are necessary to understand the content * use styled text instead of images of text when the technology in use can provide the desired visual presentation -* define alternatives to biometrics and CAPTCHA, for example by using visual, auditory, and logical CAPTCHA +* define alternatives to biometrics and CAPTCHA, for example using visual, auditory, and logical CAPTCHA * explain the issues associated with relying only on one form of biometrics and CAPTCHA, and describe alternative approaches for authentication * evaluate the issues associated with accessing information contained in informative images * select other ways to convey the information contained in images when possible, including plain text @@ -164,9 +164,8 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of different images that convey information, such as images to provide instructions, and to identify people and objects. Explain that such information must be provided using text alternatives in order to be understood by users who do not see the image. Emphasize that these alternatives may require coordination among designers, developers, and content authors. For references on how to provide text alternatives for images, see [G82: Providing a text alternative that identifies the purpose of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G82.html). -* Explain that images of text present information intended to be read as text. Emphasize that sometimes it is difficult to tell visually if text has been coded as text or as an image. Coordination among designers, developers, -and content authors is therefore needed to determine if the technologies in use can achieve the same desired visual presentation in a text format. Emphasize that, if an image of text is still required, there must be a text alternative that conveys the same information as the image of text. Explain that coding an image of text appropriately is a responsibility of the developer, whereas providing descriptions for images of text is a responsibility shared with the content author. -* Show examples of different verification systems, such as CAPTCHA, to identify human beings trying to access a service or system. Explain that these verification systems must support several modalities, including visual, auditory, and cognitive. For references on how to provide accessible CAPTCHA, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). +* Explain that images of text present information intended to be read as text. Emphasize that sometimes it is difficult to tell visually if text has been coded as text or as an image. Coordination among designers, developers, and content authors is therefore needed to determine if the technologies in use can achieve the same desired visual presentation in a text format. Emphasize that, if an image of text is still required, there must be a text alternative that conveys the same information as the image of text. Explain that coding an image of text appropriately is a responsibility of the developer, whereas providing descriptions for images of text is a responsibility shared with the content author. +* Show examples of different verification systems, such as CAPTCHA, to identify humans trying to access a service or system. Explain that these verification systems must support several modalities, including visual, auditory, and cognitive. For references on how to provide accessible CAPTCHA, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). #### Ideas to Assess Knowledge for Topic @@ -261,7 +260,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Short Answer Questions — Ask students which types of images require which contrast ratio. Assess how students understand the different types of images and their contrast ratio requirements. +* Short Answer Questions — Ask students which types of images require which contrast ratio. Assess how students understand the different types of images and their requirements for contrast ratio . * Portfolio — Have students design the imagery for a website. Assess how students include accessibility requirements in the images in graphics they design, for example contrast ratio, text alternatives that belong to the design phase, and placeholders for any other text alternative that is planned for later stages of the design and development process. ## Teaching Resources diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index a70e1fd7f..7cbda9d87 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -37,7 +37,7 @@ Courses based on this module should: Students should be able to: * identify accessibility requirements for different types of audio and video content -* design user experiences for description, captions, transcripts, and sign languages, including interactions, placement, and methods to turn on and off the alternatives +* design user experiences for description, captions, transcripts, and sign languages, including interactions, placement, and methods to control the alternatives * identify accessibility considerations for media players, including: * support for different methods of interaction, including mouse, keyboard, touch, and speech * controls that have clear and descriptive names, that are easy to find on the page, and that are reachable by all users @@ -109,9 +109,9 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Description of visual information is essential for people who cannot see the visuals. Captions are essential for people who cannot hear the audio. Text transcripts provide an alternative to visual and audio information. +Descriptions are essential for people who don’t see visual media content. Captions are essential for people who don’t hear audio content. Text transcripts provide an alternative to both visual and audio information. -Discuss the need for planning in the design phase to accommodate alternatives to multimedia content such as description, captions, text transcripts, and sign languages. Present methods to turn on and off alternatives to multimedia content depending on user needs. Explain that these methods must have clear names and must be reachable by all users. Explain that defining such methods is a designer's responsibility, whereas providing the alternatives is a responsibility shared with the content author. +Discuss the need for planning in the design phase to accommodate alternatives to multimedia content such as description, captions, text transcripts, and sign languages. Present methods to control alternatives to multimedia content depending on user needs. Explain that these methods must have clear names and must be reachable by all users. Explain that defining such methods is a designer's responsibility, whereas providing the alternatives is a responsibility shared with the content author. #### Learning Outcomes for Topic @@ -125,7 +125,7 @@ Students should be able to * sign language * design user experiences of alternatives for multimedia content, including: * placement of the alternatives - * methods to turn on and off the alternatives + * methods to control the alternatives * evaluate the need for designing custom media players * select existing media players with support for accessibility when possible * describe characteristics of accessible media player controls, including: @@ -138,8 +138,8 @@ Students should be able to Optional ideas to teach the learning outcomes: -* Show examples of description of visual information. Emphasize how these alternatives describe the visual information (including text) for people who cannot see the videos. Explain that different standards and policies may refer to description of visual information using different terms, such as audio description, video description, and described videos. Explain that defining the methods to turn on and off the description is a designer's responsibility, whereas providing the description is a responsibility shared with the content author. -* Show examples of captions. Explain that captions are a synchronized text version of the speech and non-speech audio information needed to understand the content. Explain that different standards and policies may refer to captions using different terms, such as subtitles. Explain that defining the methods to turn on and off the captions is a designer's responsibility, whereas providing the captions is a responsibility shared with the content author. Explain that determining where to place captions and in what color and font they are presented is a designer's responsibility, whereas providing such captions is a responsibility shared with the content author. +* Show examples of description of visual information. Emphasize how these alternatives describe the visual information (including text) for people who cannot see the videos. Explain that different standards and policies may refer to description of visual information using different terms, such as audio description, video description, and described videos. Explain that defining the methods to control the description is a designer's responsibility, whereas providing the description is a responsibility shared with the content author. +* Show examples of captions. Explain that captions are a synchronized text version of the speech and non-speech audio information needed to understand the content. Explain that different standards and policies may refer to captions using different terms, such as subtitles. Explain that defining the methods to control the captions is a designer's responsibility, whereas providing the captions is a responsibility shared with the content author. Explain that determining where to place captions and in what color and font they are presented is a designer's responsibility, whereas providing such captions is a responsibility shared with the content author. * Show examples of text transcripts. Explain that transcripts are a text version of the speech and non-speech audio information needed to understand the content. Explain that defining the placement and spacing for the transcripts is a designer's responsibility, whereas providing the transcripts is a responsibility shared with the content author. * Show examples of sign language. Explain that sign language is essential for people who are deaf and who do not understand written language well. Explain that defining the methods to enable and disable sign language is a designer's responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. * Show examples of accessible and inaccessible media players. Emphasize that it is generally more reliable to use an existing media player with support for accessibility than to design one from scratch. Emphasize how accessible media players are operable by keyboard, make keyboard focus visible, have clear labels, have appropriate contrast ratios, and are easy to find on the page. For an overview on skills needed to develop a media player, expected functionality, and existing players, see the resource Making Audio and Video Media Accessible, [Media players](/media/av/player/). @@ -149,7 +149,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Short Answer Questions — Ask students what description, captions, transcripts, and sign language mean in the context of accessible media content. Assess how students define alternatives to multimedia content. -* Practical — Give students pieces of multimedia content and ask them to define the user experiences for the alternatives of those pieces. Assess how students define placement, interactions, and methods to turn the alternatives on and off. +* Practical — Give students pieces of multimedia content and ask them to define the user experiences for the alternatives of those pieces. Assess how students define placement, interactions, and methods to control the alternatives. {% include excol.html type="end" %} From fa30ba146f8f793919beace7e7aefb579af085b0 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 9 Dec 2021 12:13:25 +0100 Subject: [PATCH 336/416] #435 -- "standard versus non-standard uses of form elements" as discussed in 7 December TF meeting --- content/designer/forms-design.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 3d6608f33..f50312f52 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -127,14 +127,14 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Explore different form elements and their purpose, including edit boxes, check boxes, radio buttons, and buttons. Explain uses of standard versus non-standard elements and how use of non-standard elements impacts accessibility. +Explore different form elements and their purpose, including edit boxes, check boxes, radio buttons, and buttons. Explain standard versus non-standard uses of form elements and how non-standard uses of form elements impacts accessibility. #### Learning Outcomes for Topic Students should be able to: * identify the purposes of form elements, including edit boxes, check boxes, radio buttons, and buttons -* identify how using form elements with purposes different than those defined in the standards can cause compatibility issues and cognitive overload +* identify how non-standard uses of form elements (for example using read-only edit boxes when expecting text input) can cause compatibility issues and cognitive overload * evaluate the use of standard versus non-standard form elements * select form elements that minimize extra work to make them accessible in the implementation phase * identify related requirements for developers to write code for form elements that programmatically identifies their purpose as well as their current state and value @@ -143,7 +143,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different form elements and reflect on their purposes as defined in the standards. For example, edit boxes, check boxes, radio buttons, and buttons. Emphasize that using form elements with purposes different than those defined in the standards can cause cognitive overload as well as compatibility issues with assistive technologies and adaptive strategies. +* Show examples of different form elements and reflect on their purposes. For example, edit boxes, check boxes, radio buttons, and buttons. Emphasize that non-standard uses of form elements can cause cognitive overload as well as compatibility issues with assistive technologies and adaptive strategies. * Show examples of standard versus non-standard form elements. Explain that standard elements are generally accessible by default, and that there is little need for extra work to make them accessible at a later phase. However, use of non-standard elements generally requires additional coding to ensure these elements are usable with the keyboard and compatible with assistive technologies. #### Ideas to Assess Knowledge for Topic From 938fd245fce2a9c62356b68d302cd8397275b86b Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 9 Dec 2021 12:54:31 +0100 Subject: [PATCH 337/416] Fixes #397 --- content/designer/visual-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 7491ca186..11a2c7d0b 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -40,7 +40,7 @@ Students should be able to: * design layouts with sufficient contrast ratio for text, images of text, and controls * design clear and distinguishable focus indicators, for example by using borders, color, and highlighting * use headings, spacing, and styling to group related content -* use several visual and non-visual cues to convey information, including text, color, patterns, and icons +* use multiple visual and non-visual cues to convey information, including text, color, patterns, and icons * design layouts that adapt to: * different font sizes and spacing set by the user in browser and operating system settings * different screen sizes, screen configurations, and user style sheets From c8795b5aa3a05b2b72e7045748a2e6378dae9dff Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 10 Dec 2021 09:53:12 +0100 Subject: [PATCH 338/416] [Designer Module 1: Visual Design] Adding something about text alignment to Topic: Styles #401 --- content/designer/visual-design.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 11a2c7d0b..51b7b53b6 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -84,6 +84,7 @@ Skills required for this module: * [WCAG Success Criterion 1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum) * [WCAG Success Criterion 1.4.4 Resize Text](https://www.w3.org/WAI/WCAG21/quickref/#resize-text) * [WCAG Success Criterion 1.4.6 Contrast (Enhanced)](https://www.w3.org/WAI/WCAG21/quickref/#contrast-enhanced) + * [WCAG Success Criterion 1.4.8 Visual Presentation](https://www.w3.org/WAI/WCAG21/quickref/#visual-presentation) * [WCAG Success Criterion 1.4.10 Reflow](https://www.w3.org/WAI/WCAG21/quickref/#reflow) * [WCAG Success Criterion 1.4.11 Non-Text Contrast](https://www.w3.org/WAI/WCAG21/quickref/#non-text-contrast) * [WCAG Success Criterion 1.4.12 Text Spacing](https://www.w3.org/WAI/WCAG21/quickref/#text-spacing) @@ -150,7 +151,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Explain how people with disabilities rely on distinguishable and customizable style properties, such as font types, sizes, and spacing, to support readability. +Explain how people with disabilities rely on distinguishable and customizable style properties, such as font types, sizes, spacing, and text alignment to support readability. #### Learning Outcomes for Topic @@ -161,6 +162,7 @@ Students should be able to: * font types * font sizes * spacing + * text alignment * colors #### Teaching Ideas for Topic @@ -170,12 +172,13 @@ Optional ideas to teach the learning outcomes: * Demonstrate the use of styles to distinguish links, buttons, and form labels and instructions, from plain text. Explain how people rely on font types, font sizes, spacing, and color to distinguish components. * Show examples of usable font sizes and explain how they support readability. Contrast previous examples with fonts that are not as easy to read. Emphasize that several user groups rely on customizable fonts to read and understand content properly. * Show examples of different page layouts with and without appropriate spacing. Explain how spacing allows for better readability of the content and for better identification of the different parts of the interface. +* Show examples of text aligned to the left, to the right, and justified. Explain that it is difficult for some users to read justified text due to the unpredictable spacing created by the justification. Therefore, text should align to only one side where possible to enhance readability. For reference, see technique [G169: Aligning Text on Only One Side](https://www.w3.org/WAI/WCAG21/Techniques/general/G169). #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Practical — Have students design a prototype with adaptable and distinguishable styles that help users perceive different content. Assess how students use different styles such as font sizes and spacing to make content perceivable and to distinguish components from one another. +* Practical — Have students design a prototype with adaptable and distinguishable styles that help users perceive different content. Assess how students use different style properties such as font types, sizes, spacing, and text alignment to make content perceivable and to distinguish components from one another. {% include excol.html type="end" %} From f19ab624e1a87ac244bc384e99cae3517cdadaab Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 10 Dec 2021 11:04:30 +0100 Subject: [PATCH 339/416] [Designer Module 2: Information Design] Alternative forms of presentation in Topic: Text and Structure #402 --- content/designer/information-design.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 5dd423ca8..029ed7eac 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -118,6 +118,7 @@ Students should be able to: * headings (with their corresponding rank levels) * sidebars and other page regions * define the presentation of diagrams and illustrations to make textual information easier to understand; for example, a diagram of the process described in the text +* define the presentation of textual information to make diagrams and illustrations perceivable, for example a text description of an electronic device in a user manual * select methods to provide specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon * select methods to provide the expanded form or meaning of acronyms and abbreviations * identify related requirements for: @@ -131,6 +132,7 @@ Optional ideas to teach the learning outcomes: * Show examples of pages and explain how they are divided into several regions. Demonstrate that, in addition to visually distinguishing these regions, semantics and text are needed to ensure that all users can understand the relations between them. Explain that defining and planning the different regions is a designer's responsibility, whereas adding the semantics is a responsibility shared with the developer. * Show examples of online articles and forms. Discuss how these are divided into manageable pieces so that they are easier to understand and to navigate. For example, by using headings with their corresponding rank levels to indicate the different chapters, sections, and subsections of content. * Show examples of diagrams and illustrations that can complement the information presented in text. For example, visual instructions that supplement the text of a user manual. Explain that they help users with reading disabilities to understand difficult pieces of text. Explain that defining the presentation of such diagrams and illustrations is a responsibility of the designer, whereas providing the diagrams and illustrations is a responsibility of the content author. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). +* Show examples of text descriptions to make diagrams and illustrations perceivable. For example, text descriptions of an electronic device layout. Explain that these descriptions help people who don’t see the images to perceive the information. Explain that defining the presentation of such descriptions is a responsibility of the designer, whereas providing such descriptions is a responsibility shared with the content author. Text alternatives will be discussed in detail in [Module 5: Images and Graphics](/curricula/designer-modules/images-and-graphics/). * Show examples of words that may be difficult to understand or that are used in a specialized way. Explain that people who are not familiar with such words need definitions to understand their meaning. Explain that defining the methods to provide such definitions is a designer's responsibility, whereas providing the definitions is a responsibility shared with the content author. * Show examples of abbreviations, such as short forms of words and acronyms. Explain that people who are not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand them. Explain that specifying the methods to provide such explanations or expansions is a designer's responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. @@ -140,6 +142,7 @@ Optional ideas to assess knowledge: * Practical — Give students an eBook. Ask them to propose how it might be split into smaller and more manageable pieces to more easily navigate and understand. Assess how students use pages, landmarks, and headings with their corresponding rank levels to split large amounts of text into smaller and more manageable pieces. * Practical — Give students a complex piece of text. Ask them to define the presentations of diagrams and illustrations that complement the text. Assess how students define the presentations of diagrams and illustrations to complement processes and instructions presented in text. +* Practical — Give students diagrams and illustrations. Ask them to define the presentation of descriptions to make information perceivable for people who cannot see the images. Assess how students define the presentation of descriptions for diagrams and illustrations. * Practical — Give students unusual words and abbreviations. Ask them to propose methods to explain such words or expand the abbreviations. Assess how students define methods to provide explanations of unusual words and expansions of abbreviations. {% include excol.html type="end" %} From 7f3636ca9f1493e51cd25c428fd8f9bd4994a9ff Mon Sep 17 00:00:00 2001 From: daniel-montalvo <49305434+daniel-montalvo@users.noreply.github.com> Date: Fri, 10 Dec 2021 11:40:17 +0100 Subject: [PATCH 340/416] presentations -> presentation --- content/designer/information-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 029ed7eac..6b082e221 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -141,7 +141,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Give students an eBook. Ask them to propose how it might be split into smaller and more manageable pieces to more easily navigate and understand. Assess how students use pages, landmarks, and headings with their corresponding rank levels to split large amounts of text into smaller and more manageable pieces. -* Practical — Give students a complex piece of text. Ask them to define the presentations of diagrams and illustrations that complement the text. Assess how students define the presentations of diagrams and illustrations to complement processes and instructions presented in text. +* Practical — Give students a complex piece of text. Ask them to define the presentation of diagrams and illustrations that complement the text. Assess how students define the presentation of diagrams and illustrations to complement processes and instructions presented in text. * Practical — Give students diagrams and illustrations. Ask them to define the presentation of descriptions to make information perceivable for people who cannot see the images. Assess how students define the presentation of descriptions for diagrams and illustrations. * Practical — Give students unusual words and abbreviations. Ask them to propose methods to explain such words or expand the abbreviations. Assess how students define methods to provide explanations of unusual words and expansions of abbreviations. From 4b85b3985383c4b412773d4a41a1a9ecb456f5e7 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 10 Dec 2021 11:53:42 +0100 Subject: [PATCH 341/416] [Designer Module 2: Information Design] Should we have something about lists? #404 --- content/designer/information-design.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 6b082e221..a335a9250 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -117,6 +117,7 @@ Students should be able to: * landmarks with their corresponding region type * headings (with their corresponding rank levels) * sidebars and other page regions + * paragraphs, lists, and other structures to convey content meaning * define the presentation of diagrams and illustrations to make textual information easier to understand; for example, a diagram of the process described in the text * define the presentation of textual information to make diagrams and illustrations perceivable, for example a text description of an electronic device in a user manual * select methods to provide specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon @@ -130,7 +131,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of pages and explain how they are divided into several regions. Demonstrate that, in addition to visually distinguishing these regions, semantics and text are needed to ensure that all users can understand the relations between them. Explain that defining and planning the different regions is a designer's responsibility, whereas adding the semantics is a responsibility shared with the developer. -* Show examples of online articles and forms. Discuss how these are divided into manageable pieces so that they are easier to understand and to navigate. For example, by using headings with their corresponding rank levels to indicate the different chapters, sections, and subsections of content. +* Show examples of online articles and forms. Discuss how these are divided into manageable pieces so that they are easier to understand and to navigate. For example, by using headings with their corresponding rank levels to indicate the different parts, as well as sections, paragraphs, and lists to convey content meaning. * Show examples of diagrams and illustrations that can complement the information presented in text. For example, visual instructions that supplement the text of a user manual. Explain that they help users with reading disabilities to understand difficult pieces of text. Explain that defining the presentation of such diagrams and illustrations is a responsibility of the designer, whereas providing the diagrams and illustrations is a responsibility of the content author. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). * Show examples of text descriptions to make diagrams and illustrations perceivable. For example, text descriptions of an electronic device layout. Explain that these descriptions help people who don’t see the images to perceive the information. Explain that defining the presentation of such descriptions is a responsibility of the designer, whereas providing such descriptions is a responsibility shared with the content author. Text alternatives will be discussed in detail in [Module 5: Images and Graphics](/curricula/designer-modules/images-and-graphics/). * Show examples of words that may be difficult to understand or that are used in a specialized way. Explain that people who are not familiar with such words need definitions to understand their meaning. Explain that defining the methods to provide such definitions is a designer's responsibility, whereas providing the definitions is a responsibility shared with the content author. @@ -140,7 +141,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Give students an eBook. Ask them to propose how it might be split into smaller and more manageable pieces to more easily navigate and understand. Assess how students use pages, landmarks, and headings with their corresponding rank levels to split large amounts of text into smaller and more manageable pieces. +* Practical — Give students an eBook. Ask them to propose how it might be split into smaller and more manageable pieces to more easily navigate and understand. Assess how students use pages, landmarks, and headings with their corresponding rank levels as well as paragraphs, lists, and other structures to split large amounts of text into smaller and more manageable pieces. * Practical — Give students a complex piece of text. Ask them to define the presentation of diagrams and illustrations that complement the text. Assess how students define the presentation of diagrams and illustrations to complement processes and instructions presented in text. * Practical — Give students diagrams and illustrations. Ask them to define the presentation of descriptions to make information perceivable for people who cannot see the images. Assess how students define the presentation of descriptions for diagrams and illustrations. * Practical — Give students unusual words and abbreviations. Ask them to propose methods to explain such words or expand the abbreviations. Assess how students define methods to provide explanations of unusual words and expansions of abbreviations. From 8649955671f2963c199eb028abade8a07d61bb80 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 10 Dec 2021 12:26:19 +0100 Subject: [PATCH 342/416] [Designer Module 5: Images and Graphics] Suggestion of an idea to assess knowledge for topic Informative Images #413 --- content/designer/images-and-graphics.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 168db1c74..03d7d42f0 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -171,6 +171,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to support assessment. +* Practical — Give students a set of informative images. Ask students to annotate text alternatives that help developers and content authors provide the descriptions in the implementation phase. Assess how students provide boilerplate descriptions that would then be completed and maintained through the development and authoring phases. * Practical — Give students an image of text and ask them to cooperate with other team roles such as developers and content authors to ensure the image has an equivalent alternative text. Assess how students identify the need for alternative text for images of text. * Short Answer Questions — Present students with a situation where a human verification system needs to be used and ask them to provide various authentication alternatives for biometrics and CAPTCHA. Assess how students understand the need for providing various authentication alternatives for biometrics and CAPTCHA. From 673093c1f24d10c397221a3edf07ce609d6a0ac5 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 10 Dec 2021 13:04:23 +0100 Subject: [PATCH 343/416] Split into two shorter and clearer LOs --- content/designer/images-and-graphics.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 03d7d42f0..673b30b2e 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -235,7 +235,8 @@ Students should be able to: * describe the differences between decorative and non-decorative images depending on the type of information conveyed by the image and the overall context * describe different ways to present information contained in an image in the surrounding content so that the image can be considered decorative -* evaluate the potential distraction and cognitive overload from using too many decorative images and select decorative images that avoid distractions and cognitive overload +* evaluate the use of decorative images +* select decorative images that avoid distractions and cognitive overload * explain how the overuse of decorative images could slow down loading times and interaction for users * identify related requirements for developers to code decorative images so that they are skipped by assistive technologies From c3539fae5c5a09c07ecf7ab69024f6c28f5ebc62 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 10 Dec 2021 13:11:28 +0100 Subject: [PATCH 344/416] [Designer Module 5: Images and Graphics] [Topic Informative Images] Learning outcomes on captcha and biometrics are the other way round in terms of importance #436 Flipped order and removed redundancy --- content/designer/images-and-graphics.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 673b30b2e..494e6a4d1 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -153,8 +153,8 @@ Students should be able to: * text alternatives that describe the information conveyed by images * apply the appropriate contrast ratio to images that are necessary to understand the content * use styled text instead of images of text when the technology in use can provide the desired visual presentation -* define alternatives to biometrics and CAPTCHA, for example using visual, auditory, and logical CAPTCHA -* explain the issues associated with relying only on one form of biometrics and CAPTCHA, and describe alternative approaches for authentication +* explain the accessibility considerations when relying only on one form of biometrics and CAPTCHA +* describe alternatives to biometrics and CAPTCHA, for example using visual, auditory, and logical CAPTCHA * evaluate the issues associated with accessing information contained in informative images * select other ways to convey the information contained in images when possible, including plain text * identify related requirements for developers to code alternative texts for informative images From 183076fcf73cc99e116203d80169eed8e97a478d Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 10 Dec 2021 19:09:53 +0100 Subject: [PATCH 345/416] Adding "designer" --- content/designer/information-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index a335a9250..697ac5f20 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -133,7 +133,7 @@ Optional ideas to teach the learning outcomes: * Show examples of pages and explain how they are divided into several regions. Demonstrate that, in addition to visually distinguishing these regions, semantics and text are needed to ensure that all users can understand the relations between them. Explain that defining and planning the different regions is a designer's responsibility, whereas adding the semantics is a responsibility shared with the developer. * Show examples of online articles and forms. Discuss how these are divided into manageable pieces so that they are easier to understand and to navigate. For example, by using headings with their corresponding rank levels to indicate the different parts, as well as sections, paragraphs, and lists to convey content meaning. * Show examples of diagrams and illustrations that can complement the information presented in text. For example, visual instructions that supplement the text of a user manual. Explain that they help users with reading disabilities to understand difficult pieces of text. Explain that defining the presentation of such diagrams and illustrations is a responsibility of the designer, whereas providing the diagrams and illustrations is a responsibility of the content author. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). -* Show examples of text descriptions to make diagrams and illustrations perceivable. For example, text descriptions of an electronic device layout. Explain that these descriptions help people who don’t see the images to perceive the information. Explain that defining the presentation of such descriptions is a responsibility of the designer, whereas providing such descriptions is a responsibility shared with the content author. Text alternatives will be discussed in detail in [Module 5: Images and Graphics](/curricula/designer-modules/images-and-graphics/). +* Show examples of text descriptions to make diagrams and illustrations perceivable. For example, text descriptions of an electronic device layout. Explain that these descriptions help people who don’t see the images to perceive the information. Explain that defining the presentation of such descriptions is a responsibility of the designer, whereas providing such descriptions is a responsibility shared with the content author. Text alternatives will be discussed in detail in [Designer Module 5: Images and Graphics](/curricula/designer-modules/images-and-graphics/). * Show examples of words that may be difficult to understand or that are used in a specialized way. Explain that people who are not familiar with such words need definitions to understand their meaning. Explain that defining the methods to provide such definitions is a designer's responsibility, whereas providing the definitions is a responsibility shared with the content author. * Show examples of abbreviations, such as short forms of words and acronyms. Explain that people who are not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand them. Explain that specifying the methods to provide such explanations or expansions is a designer's responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author. From c04a608db5739756f3f211493c787d2580e3638e Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 10 Dec 2021 19:32:12 +0100 Subject: [PATCH 346/416] [Module 6: Multimedia and Animations] Examples of flickering/flashing content can put students at risk #437 First pass --- content/designer/multimedia-and-animations.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 7cbda9d87..2e3cca1c9 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -159,6 +159,8 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} +Blinking and flashing content can put some people at risk, including yourself. Communicate clearly that you are about to show blinking and flashing content. Ensure students are comfortable with being exposed to blinking and flashing content. + Show moving content, such as carousels and animations. Present methods to avoid distractions, seizures and physical reactions, and unpredictable keyboard focus management caused by moving content. For example, support for pausing, stopping, or hiding moving content, as well as using flashing that is below the accepted ratios when possible. #### Learning Outcomes for Topic @@ -182,8 +184,8 @@ Optional ideas to teach the learning outcomes: * [G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)](https://www.w3.org/WAI/WCAG21/Techniques/general/G152), * [G186: Using a control in the Web page that stops moving, blinking, or auto-updating content](https://www.w3.org/WAI/WCAG21/Techniques/general/G186), and * [G187: Using a technology to include blinking content that can be turned off via the user agent](https://www.w3.org/WAI/WCAG21/Techniques/general/G187). -* Show examples of flashing content and explain that it can cause seizures and physical reactions for some people. Emphasize that all interface components muswt be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole interface. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash below three seconds, see techniques [G19: Ensuring that no component of the content flashes more than three times in any 1-second period](https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html) and [G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold](https://www.w3.org/WAI/WCAG21/Techniques/general/G15.html). -* Show examples of interactions triggered by animations, such as additional movements when scrolling and decorative gimmicks. Explain that these animations can cause distraction and vestibular disorders (such as dizziness, nausea, and headaches) for some people. Discuss the use of preferences as well as technology specific properties to reduce or disable such animations. +* Reiterate that flashing content can cause seizures and physical reactions for some people. Illustrate with examples of flashing content only when students understand the risks and are comfortable with being exposed to such content. Emphasize that all interface components must be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole interface. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash below three seconds, see techniques [G19: Ensuring that no component of the content flashes more than three times in any 1-second period](https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html) and [G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold](https://www.w3.org/WAI/WCAG21/Techniques/general/G15.html). +* Explain that interactions triggered by animations, such as additional movements when scrolling and decorative gimmicks, can cause distraction and vestibular disorders (such as dizziness, nausea, and headaches) for some people. Illustrate with examples only when students understand the risks and are comfortable with being exposed to such content. Discuss the use of preferences as well as technology specific properties to reduce or disable such animations. * Demonstrate the use of a screen reader to navigate an application that plays audio automatically for more than three seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a method to pause or control the volume of that audio. Explain that the operating system often provides such method. For references on how to design interfaces with methods to pause or control the volume of any audio that plays automatically, see the following techniques: * [G60: Playing a sound that turns off automatically within three seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G60.html), * [G170: Providing a control near the beginning of the Web page that turns off sounds that play automatically](https://www.w3.org/WAI/WCAG21/Techniques/general/G170.html), and From 73f1d2eb886992b7c454e632b1a4dc86fe47c598 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 13 Dec 2021 10:11:39 +0100 Subject: [PATCH 347/416] [Module 6: Multimedia and Animations] Examples of flickering/flashing content can put students at risk #437 --- content/designer/interaction-design.md | 12 +++++++----- content/designer/multimedia-and-animations.md | 4 ++-- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index fe67c1710..3551db2fd 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -128,10 +128,11 @@ Present examples of specific non-standard shortcuts. Explain that providing cust Students should be able to: * design user experiences for keyboard navigation through and inside components of websites and applications, for example using: - * the tab key to move through different components + * the tab key to move through different components in a meaningful sequence * the enter key to access a component and to select a specific item on a component * the arrow keys to move through elements inside components, including sliders, tabs, dialogs, application menus, and tree views * the escape key to exit components + * meaningful sequences across web pages and applications and inside complex widgets * additional keyboard shortcuts to reveal, review, and dismiss notifications * additional keyboard shortcuts to support efficiency * first letter navigation to jump to specific pieces of data in lists and grids @@ -139,17 +140,18 @@ Students should be able to: * explain how keyboard support benefits other ways of interacting, including speech interaction and interaction using assistive technologies * evaluate the use of custom keyboard interactions * select keyboard interactions that do not conflict with the operating system, browser, and assistive technologies when possible -* cooperate with developers to provide methods to remap or disable conflicting shortcuts * define methods to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications * define consistent placement and appearance of focus indicators - * cooperate with developers to programmatically set focus in complex widgets, including sliders, tabs, dialogs, application menus, tree views, and notifications +* cooperate with developers to: + * provide methods to remap or disable conflicting shortcuts + * programmatically set focus in complex widgets, including sliders, tabs, dialogs, application menus, tree views, and notifications * identify related requirements for developers to implement keyboard support for components that have no keyboard support by default #### Teaching Ideas for Topic Optional ideas to teach the learning outcomes: -* Invite students to try standard keyboard conventions. For example, use of the tab to move through user interface components, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that standard interactions must be preserved as much as possible when designing custom widgets, as users mostly expect these. +* Invite students to try standard keyboard conventions. For example, the use of the tab to move through user interface components in a meaningful sequence, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that standard interactions must be preserved as much as possible when designing custom widgets, as users mostly expect these. * Invite students to research keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers must cooperate with other team members, including developers and user researchers, on strategies to define custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and collaborating with developers to implement such keystrokes. * Present examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. * Invite students to research how assistive technologies and adaptive strategies rely on keyboard support to provide specific functionality, such as navigating sequentially using spoken commands. Demonstrate interaction with assistive technologies in web pages and applications with and without keyboard support. @@ -163,7 +165,7 @@ Optional ideas to assess knowledge: * Short Answer Questions — Ask students about the commonly used modifier keys in operating systems, browsers, and assistive technologies. Assess how students identify commonly used modifier keys in operating systems, browsers, and assistive technologies. * Practical — Give students an interface that only works with the mouse and ask them to provide keyboard interaction. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. * Practical — Have students cooperate with developers to avoid custom keyboard shortcut conflicts with existing operating system and assistive technology keystrokes. Assess how students cooperate with developers to develop strategies that avoid custom keyboard shortcut conflicts. -* Practical — Give students a custom widget and ask them to define appropriate focus placement and appearance depending on changes in context and user interaction. Assess how students create user experiences that consider visual focus indicators and focus placement. +* Practical — Give students a custom widget and ask them to define appropriate focus placement and appearance as well as depending on changes in context and user interaction. Assess how students create user experiences that consider visual focus indicators and focus placement as well as meaningful sequences. {% include excol.html type="end" %} diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 2e3cca1c9..c796754a6 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -184,7 +184,7 @@ Optional ideas to teach the learning outcomes: * [G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)](https://www.w3.org/WAI/WCAG21/Techniques/general/G152), * [G186: Using a control in the Web page that stops moving, blinking, or auto-updating content](https://www.w3.org/WAI/WCAG21/Techniques/general/G186), and * [G187: Using a technology to include blinking content that can be turned off via the user agent](https://www.w3.org/WAI/WCAG21/Techniques/general/G187). -* Reiterate that flashing content can cause seizures and physical reactions for some people. Illustrate with examples of flashing content only when students understand the risks and are comfortable with being exposed to such content. Emphasize that all interface components must be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole interface. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash below three seconds, see techniques [G19: Ensuring that no component of the content flashes more than three times in any 1-second period](https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html) and [G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold](https://www.w3.org/WAI/WCAG21/Techniques/general/G15.html). +* Reiterate that flashing content can cause seizures and physical reactions for some people. Illustrate with examples of flashing content only when students understand the risks and are comfortable with being exposed to such content. Emphasize that all interface components must be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole interface. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash below three seconds, see [Understanding Success Criterion 2.3.1: Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or-below-threshold). * Explain that interactions triggered by animations, such as additional movements when scrolling and decorative gimmicks, can cause distraction and vestibular disorders (such as dizziness, nausea, and headaches) for some people. Illustrate with examples only when students understand the risks and are comfortable with being exposed to such content. Discuss the use of preferences as well as technology specific properties to reduce or disable such animations. * Demonstrate the use of a screen reader to navigate an application that plays audio automatically for more than three seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a method to pause or control the volume of that audio. Explain that the operating system often provides such method. For references on how to design interfaces with methods to pause or control the volume of any audio that plays automatically, see the following techniques: * [G60: Playing a sound that turns off automatically within three seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G60.html), @@ -195,7 +195,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Give students flashing content and ask them to determine if it is below the general flash and red flash thresholds. Assess how students understand accessibility requirements for flashing content. +* Short Answer Questions — Ask students about the accepted general flash and red flash thresholds. Assess how students understand accessibility requirements for flashing content. * Practical — Give students an interface containing animations and ask them to make them accessible. Assess how students define methods to reduce or disable the animations. {% include excol.html type="end" %} From 91d1dd32a313126c05467ee5dd49da09d3c6533e Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 13 Dec 2021 11:35:01 +0100 Subject: [PATCH 348/416] [Designer Module 6: Multimedia and Animations] Question about sign language in the teaching ideas for topic Alternatives to Multimedia Content #419 --- content/designer/multimedia-and-animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index c796754a6..56e4e8a7b 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -141,7 +141,7 @@ Optional ideas to teach the learning outcomes: * Show examples of description of visual information. Emphasize how these alternatives describe the visual information (including text) for people who cannot see the videos. Explain that different standards and policies may refer to description of visual information using different terms, such as audio description, video description, and described videos. Explain that defining the methods to control the description is a designer's responsibility, whereas providing the description is a responsibility shared with the content author. * Show examples of captions. Explain that captions are a synchronized text version of the speech and non-speech audio information needed to understand the content. Explain that different standards and policies may refer to captions using different terms, such as subtitles. Explain that defining the methods to control the captions is a designer's responsibility, whereas providing the captions is a responsibility shared with the content author. Explain that determining where to place captions and in what color and font they are presented is a designer's responsibility, whereas providing such captions is a responsibility shared with the content author. * Show examples of text transcripts. Explain that transcripts are a text version of the speech and non-speech audio information needed to understand the content. Explain that defining the placement and spacing for the transcripts is a designer's responsibility, whereas providing the transcripts is a responsibility shared with the content author. -* Show examples of sign language. Explain that sign language is essential for people who are deaf and who do not understand written language well. Explain that defining the methods to enable and disable sign language is a designer's responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. +* Show examples of sign languages. Reflect on the different sign languages that exist depending on region and country. Explain that sign languages are essential for some people who are deaf and do not understand written language well. Mention that some deaf people do not understand sign languages. Explain that defining the methods to enable and disable sign languages is a designer's responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. * Show examples of accessible and inaccessible media players. Emphasize that it is generally more reliable to use an existing media player with support for accessibility than to design one from scratch. Emphasize how accessible media players are operable by keyboard, make keyboard focus visible, have clear labels, have appropriate contrast ratios, and are easy to find on the page. For an overview on skills needed to develop a media player, expected functionality, and existing players, see the resource Making Audio and Video Media Accessible, [Media players](/media/av/player/). #### Ideas to Assess Knowledge for Topic From cd02fcf1761442948f5409fb9f902236c1d0afad Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 13 Dec 2021 11:52:25 +0100 Subject: [PATCH 349/416] [Designer Module 6: Multimedia and Animations] Question about sign language in the teaching ideas for topic Alternatives to Multimedia Content #419 --- content/designer/multimedia-and-animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 56e4e8a7b..15c843506 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -141,7 +141,7 @@ Optional ideas to teach the learning outcomes: * Show examples of description of visual information. Emphasize how these alternatives describe the visual information (including text) for people who cannot see the videos. Explain that different standards and policies may refer to description of visual information using different terms, such as audio description, video description, and described videos. Explain that defining the methods to control the description is a designer's responsibility, whereas providing the description is a responsibility shared with the content author. * Show examples of captions. Explain that captions are a synchronized text version of the speech and non-speech audio information needed to understand the content. Explain that different standards and policies may refer to captions using different terms, such as subtitles. Explain that defining the methods to control the captions is a designer's responsibility, whereas providing the captions is a responsibility shared with the content author. Explain that determining where to place captions and in what color and font they are presented is a designer's responsibility, whereas providing such captions is a responsibility shared with the content author. * Show examples of text transcripts. Explain that transcripts are a text version of the speech and non-speech audio information needed to understand the content. Explain that defining the placement and spacing for the transcripts is a designer's responsibility, whereas providing the transcripts is a responsibility shared with the content author. -* Show examples of sign languages. Reflect on the different sign languages that exist depending on region and country. Explain that sign languages are essential for some people who are deaf and do not understand written language well. Mention that some deaf people do not understand sign languages. Explain that defining the methods to enable and disable sign languages is a designer's responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. +* Show examples of sign languages. Reflect on the different sign languages that exist depending on region and country. Explain that sign languages are essential for some people who are deaf and use written language as their second language. Mention that some deaf people do not use sign languages. Explain that defining the methods to enable and disable sign languages is a designer's responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. * Show examples of accessible and inaccessible media players. Emphasize that it is generally more reliable to use an existing media player with support for accessibility than to design one from scratch. Emphasize how accessible media players are operable by keyboard, make keyboard focus visible, have clear labels, have appropriate contrast ratios, and are easy to find on the page. For an overview on skills needed to develop a media player, expected functionality, and existing players, see the resource Making Audio and Video Media Accessible, [Media players](/media/av/player/). #### Ideas to Assess Knowledge for Topic From 30e8555f27ef12f64952278c7ac8819df771a934 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 15 Dec 2021 13:07:13 +0100 Subject: [PATCH 350/416] Clarifying use of the word "define" in learning outcomes --- content/designer/forms-design.md | 29 ++++++++++--------- content/designer/images-and-graphics.md | 10 +++---- content/designer/information-design.md | 20 ++++++------- content/designer/interaction-design.md | 16 +++++----- content/designer/multimedia-and-animations.md | 10 +++---- content/designer/navigation-design.md | 14 ++++----- content/designer/visual-design.md | 14 ++++----- 7 files changed, 57 insertions(+), 56 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index f50312f52..403138b10 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -36,14 +36,14 @@ Courses based on this module should: Students should be able to: * explain how people with disabilities rely on placement, structure, labels, instructions, and notifications to understand, navigate, and interact with forms -* define consistent use, placement, and appearance of form elements -* define interactions with form elements, including through mouse, keyboard, touch, and speech -* define clear and distinguishable names as well as visual and non-visual instructions to understand the purpose and functionality of form elements -* define clear and descriptive visual and non-visual instructions for the current step and the total number of steps in multi-step forms -* define clear and descriptive error messages that: +* design consistent use, placement, and appearance of form elements +* design interactions with form elements, including through mouse, keyboard, touch, and speech +* select clear and distinguishable names as well as visual and non-visual instructions to understand the purpose and functionality of form elements +* select clear and descriptive visual and non-visual instructions for the current step and the total number of steps in multi-step forms +* apply clear and descriptive error messages that: * identify the field in error * provide suggestions for correction when possible -* define meaningful and descriptive visual and non-visual notifications, including for: +* apply meaningful and descriptive visual and non-visual notifications, including for: * imminent time limits * success messages * status changes @@ -168,11 +168,12 @@ Refer back to [Designer Module 2: Information Design, Topic: Naming and Grouping Students should be able to: * design user experiences that consider position and appearance for labels and instructions -* define clear and consistent names for form elements across websites and applications -* define visual and non-visual instructions for required input fields -* define clear visual and non-visual instructions about changes in context before the component that originates such changes -* define overall visual and non-visual instructions about existing time limits in a form and about how to adjust them, extend them, and turn them off -* define clear visual and non-visual instructions for the current step and the total number of steps involved in a multi-step form +* select clear and consistent names for form elements across websites and applications +* apply visual and non-visual instructions for + * required input fields + * changes in context before the component that originates such changes + * existing time limits in a form and how to adjust them, extend them, and turn them off + * the current step and the total number of steps involved in a multi-step form * identify related requirements for developers to provide semantics for labels and instructions #### Teaching Ideas for Topic @@ -207,12 +208,12 @@ Show examples of common input errors and suggestions for correcting them. Explai Students should be able to: -* define the placement and appearance of error messages +* design the placement and appearance of error messages * define error messages in the page title or before the form that: * identify the fields in error * describe the cause of the error * provide suggestions to correct the error when possible -* define methods to reverse, check, and confirm critical submissions, including legal, financial, and sensitive data +* apply methods to reverse, check, and confirm critical submissions, including legal, financial, and sensitive data #### Teaching Ideas for Topic @@ -250,7 +251,7 @@ Show examples of visual and non-visual notifications for error messages and othe Students should be able to: * define the placement and appearance of notifications -* define meaningful and descriptive notification messages, including: +* seelect meaningful and descriptive notification messages, including: * on input (to communicate if the provided input is valid or invalid) * on task completion (to communicate success or failure of a specific task) * design user experiences to queue and prioritize application notifications coming from different components diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 494e6a4d1..4b7f6d9a8 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -38,7 +38,7 @@ Students should be able to: * explain how images and graphics help people with disabilities to process information, identify content, and understand functionality * explain how text alternatives are essential for people with disabilities to understand the information contained in images -* define meaningful and consistent text alternatives for functional images, for example those included in buttons, links, icons, and logos +* select meaningful and consistent text alternatives for functional images, for example those included in buttons, links, icons, and logos * define consistent imagery to help users recognize the purpose of icons, thumbnails, and other graphical components * explain the issues associated with perception, interpretation, and rendering of images of text * explain how to avoid images of text by using technologies that achieve the desired visual presentation wherever possible @@ -108,7 +108,7 @@ Functional images convey the purpose of a component. For example, search, print, Students should be able to: -* define text alternatives for functional images using the following methods: +* select text alternatives for functional images using the following methods: * text alternatives for images * combinations of text alternatives of images and adjacent text inside components * adjacent text inside components to understand its function @@ -147,7 +147,7 @@ Explain that providing text alternatives for informative images is a responsibil Students should be able to: -* define text alternatives that are equally informative as the described images using the following methods: +* apply text alternatives that are equally informative as the described images using the following methods: * boilerplate descriptions that would then be completed and maintained through the development and authoring phases * adjacent textual information to complement images and icons, for example in a news headline * text alternatives that describe the information conveyed by images @@ -195,8 +195,8 @@ Students should be able to: * evaluate the use of complex images * select other ways to present the information contained in complex images, for example using tables, simpler images, and plain text * determine if and how complex images are operated using input devices, including mouse, keyboard, touch, and voice -* define the placement and spacing for alternatives to complex images -* define clear and consistent identification methods for complex image descriptions, including appropriate headings and expandable and collapsible components +* design the placement and spacing for alternatives to complex images +* apply methods to identify methods for complex image descriptions, including appropriate headings and expandable and collapsible components * design user experiences for complex images, including: * how to get to the image descriptions * what the description should look like diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 697ac5f20..4dda27eba 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -41,7 +41,7 @@ Students should be able to: * pages, landmarks, and headings * lists, simpler tables, and plain text * groups of form controls that share a common purpose -* define methods to communicate both visually and non-visually all relevant information about multi-step processes +* apply methods to communicat all relevant information about multi-step processes visually and non-visually * describe how to communicate the structure of multi-page articles or processes visually and non-visually * describe how to provide information about the name and purpose of components using descriptive labels and instructions * discuss ways to break down information presented in tables, including the use of simple tables, lists, imagery, and plain text @@ -118,10 +118,10 @@ Students should be able to: * headings (with their corresponding rank levels) * sidebars and other page regions * paragraphs, lists, and other structures to convey content meaning -* define the presentation of diagrams and illustrations to make textual information easier to understand; for example, a diagram of the process described in the text -* define the presentation of textual information to make diagrams and illustrations perceivable, for example a text description of an electronic device in a user manual -* select methods to provide specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon -* select methods to provide the expanded form or meaning of acronyms and abbreviations +* select diagrams and illustrations to make textual information easier to understand; for example, a diagram of the process described in the text +* select textual information to make diagrams and illustrations perceivable, for example a text description of an electronic device in a user manual +* apply methods to provide specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon +* apply methods to provide the expanded form or meaning of acronyms and abbreviations * identify related requirements for: * developers to code the regions, headings, and language of pages and parts * content authors to provide clear language and easy-to-read texts whenever possible @@ -160,10 +160,10 @@ Discuss the use of labels, instructions, and graphical representations to help p Students should be able to: -* define clear and distinguishable labels for components, including visual and programmatic names -* define overall instructions to make information in multi-step processes more understandable, for example text and graphical representations -* define visual and non-visual instructions to communicate the total number of steps and the current step in multi-step forms and processes -* define related controls, such as those collecting personal information, payment methods, and consent to legal conditions, and communicate such relationships visually and non-visually +* select clear and distinguishable labels for components, including visual and programmatic names +* select overall instructions to make information in multi-step processes more understandable, for example text and graphical representations +* select visual and non-visual instructions to communicate the total number of steps and the current step in multi-step forms and processes +* group controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions, and communicate such relationships visually and non-visually #### Teaching Ideas for Topic @@ -197,7 +197,7 @@ Students should be able to: * identify uses of tables to present data that share a logical relationship * define table header cells and data cells, and provide clear and distinguishable styles for each -* define graphical representations of complex tables that help users more easily understand its purpose and meaning +* select graphical representations of complex tables that help users more easily understand its purpose and meaning * evaluate the use of complex tables and select simpler ways to provide the information, for example: * simpler tables * charts, diagrams, and other graphical representations diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index 3551db2fd..200f6c4fc 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -39,8 +39,8 @@ Students should be able to: * design user experiences for different input methods, including mouse, touch, keyboard, and speech * design interactions and meaningful sequences inside complex widgets, including sliders, tabs, dialogs, application menus, tree views, and notifications * evaluate the use of custom keyboard shortcuts for complex widgets and applications and provide information about their purpose and scope -* define methods to disable response to device and user motion to prevent accidental activation -* define alternatives for complex gestures, including swiping, pinching, and drawing shapes +* apply methods to disable response to device and user motion to prevent accidental activation +* apply alternatives for complex gestures such as swiping, pinching, and drawing shapes * identify related requirements for developers to write code for interactions, including through mouse, keyboard, touch, and speech {% include excol.html type="all" %} @@ -140,8 +140,8 @@ Students should be able to: * explain how keyboard support benefits other ways of interacting, including speech interaction and interaction using assistive technologies * evaluate the use of custom keyboard interactions * select keyboard interactions that do not conflict with the operating system, browser, and assistive technologies when possible -* define methods to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications -* define consistent placement and appearance of focus indicators +* apply methods to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications +* design consistent placement and appearance of focus indicators * cooperate with developers to: * provide methods to remap or disable conflicting shortcuts * programmatically set focus in complex widgets, including sliders, tabs, dialogs, application menus, tree views, and notifications @@ -183,10 +183,10 @@ Discuss gestures that require dragging and drawing specific paths on a touch scr Students should be able to: -* define alternatives to multi-pointer gestures (including swiping, pinching, and drawing shapes) by using single pointer activation -* define methods to undo or abort an action carried out with path-based gestures, including use of the up event to undo, abort, and reverse activation -* define alternatives for device or user motion, for example components performing the same function that do not require user motion -* define methods to disable response to device or user motion to prevent accidental activation +* apply alternatives to multi-pointer gestures (including swiping, pinching, and drawing shapes) by using single pointer activation +* apply methods to undo or abort an action carried out with path-based gestures, including use of the up event to undo, abort, and reverse activation +* apply alternatives for device or user motion, for example components performing the same function that do not require user motion +* apply methods to disable response to device or user motion to prevent accidental activation * design user experiences that consider larger target sizes for pointer inputs #### Teaching Ideas for Topic diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 15c843506..534f1d844 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -41,7 +41,7 @@ Students should be able to: * identify accessibility considerations for media players, including: * support for different methods of interaction, including mouse, keyboard, touch, and speech * controls that have clear and descriptive names, that are easy to find on the page, and that are reachable by all users -* define methods to control automatic audio and movement, including: +* select methods to control automatic audio and movement, including: * mute and control the volume of auto-playing audio * pause, stop, and hide moving, blinking, and auto-updating content, including carousels and animations * identify related requirements for: @@ -167,12 +167,12 @@ Show moving content, such as carousels and animations. Present methods to avoid Students should be able to: -* define methods for pausing, stopping, or hiding any content that blinks, moves, or auto-updates, for example animations, carousels, and decorative gimmicks +* select methods for pausing, stopping, or hiding any content that blinks, moves, or auto-updates, for example animations, carousels, and decorative gimmicks * create designs that avoid flashing entirely or only flash below the acceptable thresholds * create designs with enough time for users to read parts of moving content, for example different slides in a carousel -* define visual and non-visual identification of animated content and its different parts, for example identifying a carousel region and its different slides -* define focus order within animated content, including how to move to different parts of the carousel and how to get to the carousel controls -* define methods for stopping or controlling the volume of any audio that plays automatically for more than three seconds +* identify and communiccate animated content and its different parts vissually and non-vissually, for example a carousel region and its different slides +* design focus order within animated content, including how to move to different parts of the carousel and how to get to the carousel controls +* select methods for stopping or controlling the volume of any audio that plays automatically for more than three seconds #### Teaching Ideas for Topic diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 3bd5a62fd..5dfc2de81 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -39,11 +39,11 @@ Students should be able to: * explain strategies that people with disabilities use to navigate websites and applications * design different navigational components, including menus, tables of contents, and search functionalities * describe different interactions for navigational components, including by keyboard, mouse, touch, and speech -* define clear and consistent visual and non-visual: +* select clear and consistent visual and non-visual: * presentation of menus and menu items * indication of state changes for menu items -* define blocks of repeated content -* define site maps and descriptive page titles to help users locate specific web pages within websites +* communicate blocks of repeated content +* create site maps and descriptive page titles to help users locate specific web pages within websites * evaluate the use of navigational components, including menus, tables of contents, and site maps * select navigational components that minimize distraction and unnecessary noise * identify related requirements for developers to implement: @@ -120,10 +120,10 @@ Explain styling conventions for menus, such as expected location, appropriate si Students should be able to: * describe uses of different types of navigation menus, such as static, fly-out, and mega menus -* define visual and text indications to identify menus, including: +* select visual and text indications to identify menus, including: * consistent styling for menu identification across websites * visual and non-visual indications about the current page in the navigation menu -* define interactions inside navigation menus, including mouse, keyboard, touch, and speech +* design interactions inside navigation menus, including mouse, keyboard, touch, and speech * design navigation menus that adapt to different text sizes, screen magnifications, and screen sizes and resolutions * apply distinguishable and consistent styles for menu items in their different states, for example in fly-out menus * identify related requirements for developers to implement: @@ -208,8 +208,8 @@ Discuss strategies that people use to navigate to different parts of a web page, Students should be able to: -* select methods to identify blocks of repeated content, such as navigation bars and header contents -* select methods to skip blocks of repeated content using the following approaches: +* identify and communicate blocks of repeated content, such as navigation bars and header contents +* apply methods to skip blocks of repeated content using the following approaches: * a link at the top of each page that goes directly to the main content area * a link at the beginning of a block of repeated content to go to the end of the block * tables of contents at the top of the page that go to each area of the content diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 51b7b53b6..03069939f 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -123,7 +123,7 @@ Students should be able to: * design text and images of text that have a contrast ratio of at least 4.5:1 with respect to their background * design large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background * design user interface components and graphics that have a contrast ratio of at least 3:1 with respect to their background -* define layouts to enable users to change colors based on customized screen sizes, screen configurations, and style sheets +* select layouts to enable users to change colors based on customized screen sizes, screen configurations, and style sheets * use visual cues in addition to text color, for example by using different patterns, shapes, and icons * use text to complement information provided visually @@ -158,7 +158,7 @@ Explain how people with disabilities rely on distinguishable and customizable st Students should be able to: * use clear and distinguishable styles for links, buttons, form labels and instructions, and text -* define customizable style properties to support content readability, including: +* select customizable style properties to support content readability, including: * font types * font sizes * spacing @@ -195,9 +195,9 @@ Explain how people with disabilities use visual and non-visual cues to orient on Students should be able to: * design focus indicators that enable people to tell where they are as they move through web pages and applications using the keyboard -* define page regions by using headings, spacing, and grouping -* design layouts that enable presentation of visual and non-visual cues in different screen sizes, screen configurations, and style sheets -* define methods to help users perceive and understand visual and non-visual cues, for example by using text, color, and icons to convey the status of tasks in a project +* create page regions using headings, spacing, and grouping +* select layouts that enable presentation of visual and non-visual cues in different screen sizes, screen configurations, and style sheets +* apply methods to help users perceive and understand visual and non-visual cues, for example by using text, color, and icons to convey the status of tasks in a project #### Teaching Ideas for Topic @@ -225,7 +225,7 @@ Optional ideas to assess knowledge: Refer to responsive design techniques. Explain that other elements also contribute to an accessible user experience. Encourage consideration of how content sequence, focus indicators, and target size can be designed to adapt to different screen sizes and screen configurations. -Demonstrate approaches to balance the use of too many design elements to avoid potential overload and distraction for some users. +Demonstrate approaches to detect the overuse of design elements to avoid potential overload and distraction for some users. #### Learning Outcomes for Topic @@ -236,7 +236,7 @@ Students should be able to: * design layouts that adapt their content view and operation to portrait and landscape orientations * design layouts with target sizes that adapt to different screen sizes, screen configurations, and style sheets, for example when creating responsive designs * design layouts to support user customization of line height, as well as spacing between paragraphs, words, and letters -* define meaningful focus orders that adapt to different viewports, screen sizes, and multiple breakpoints +* create meaningful focus orders that adapt to different viewports, screen sizes, and multiple breakpoints * evaluate the potential overuse of design elements, in particular interactive widgets, images, and moving content * select elements that minimize distraction and cognitive overload From ff8cf4e854ceaf8a7d9ca92c150eb95cb0e8530d Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 15 Dec 2021 13:50:26 +0100 Subject: [PATCH 351/416] [Designer Module 3: Navigation Design] First learning outcome in topic Page Navigation is ambiguous #408 --- content/designer/navigation-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 5dfc2de81..5fd433369 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -208,7 +208,7 @@ Discuss strategies that people use to navigate to different parts of a web page, Students should be able to: -* identify and communicate blocks of repeated content, such as navigation bars and header contents +* apply visual and non-visual methods to help users identify blocks of repeated content, including navigation bars and header contents * apply methods to skip blocks of repeated content using the following approaches: * a link at the top of each page that goes directly to the main content area * a link at the beginning of a block of repeated content to go to the end of the block From 11f12ba0c6b0e0efb1bccbe1218d2002c58c539e Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 15 Dec 2021 14:28:05 +0100 Subject: [PATCH 352/416] Adding example to intro instead of having it in LO --- content/designer/forms-design.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 403138b10..cc2f3447c 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -127,14 +127,14 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Explore different form elements and their purpose, including edit boxes, check boxes, radio buttons, and buttons. Explain standard versus non-standard uses of form elements and how non-standard uses of form elements impacts accessibility. +Explore different form elements and their purpose, including edit boxes, check boxes, radio buttons, and buttons. Explain standard versus non-standard uses of form elements (for example using read-only edit boxes when expecting text input) and how non-standard uses of form elements impacts accessibility. #### Learning Outcomes for Topic Students should be able to: * identify the purposes of form elements, including edit boxes, check boxes, radio buttons, and buttons -* identify how non-standard uses of form elements (for example using read-only edit boxes when expecting text input) can cause compatibility issues and cognitive overload +* describe how non-standard uses of form elements can cause compatibility issues and cognitive overload * evaluate the use of standard versus non-standard form elements * select form elements that minimize extra work to make them accessible in the implementation phase * identify related requirements for developers to write code for form elements that programmatically identifies their purpose as well as their current state and value From 0121e2d63ceb4380a464407f6f8316a6c617a142 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 17 Dec 2021 13:57:11 +0100 Subject: [PATCH 353/416] Rewording warnings --- content/designer/multimedia-and-animations.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 534f1d844..c01e03728 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -159,7 +159,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Blinking and flashing content can put some people at risk, including yourself. Communicate clearly that you are about to show blinking and flashing content. Ensure students are comfortable with being exposed to blinking and flashing content. +**Caution**: Blinking and flashing content can put some people at risk, including yourself. Let students know before showing blinking and flashing content. Ensure students understand the risks of being exposed to blinking and flashing content. Show moving content, such as carousels and animations. Present methods to avoid distractions, seizures and physical reactions, and unpredictable keyboard focus management caused by moving content. For example, support for pausing, stopping, or hiding moving content, as well as using flashing that is below the accepted ratios when possible. @@ -178,6 +178,8 @@ Students should be able to: Optional ideas to teach the learning outcomes: +**Caution**: Use all of the following teaching ideas only with prior warning that they include flickering, flashing, or animated content. Make sure students understand the risks of engaging with the examples. Make these teeaching ideas optional for learners. + * Show examples of content that moves or blinks, such as animations and carousels. Explain that moving content can be problematic and can cause distraction and anxiety for several types of users. Emphasize that some animation frequencies are also known to cause seizures and physical reactions for certain users. For references on how to design interfaces that allow to pause, stop, and hide moving, blinking, or auto-updating content, see the following techniques: * [G4: Allowing the content to be paused and restarted from where it was paused](https://www.w3.org/WAI/WCAG21/Techniques/general/G4), * [G11: Creating content that blinks for less than 5 seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G11), @@ -197,6 +199,7 @@ Optional ideas to assess knowledge: * Short Answer Questions — Ask students about the accepted general flash and red flash thresholds. Assess how students understand accessibility requirements for flashing content. * Practical — Give students an interface containing animations and ask them to make them accessible. Assess how students define methods to reduce or disable the animations. +* Practical — Give students examples of web pages using carousels. Ask them to evaluate the carousel's support for accessibility. Assess how students understand accessibility requirements for carousels. {% include excol.html type="end" %} From 1c0e5a21c90947210578024bf53e951822238f3f Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 17 Dec 2021 13:57:11 +0100 Subject: [PATCH 354/416] Rewording warnings --- content/designer/forms-design.md | 1 + content/designer/information-design.md | 2 +- content/designer/multimedia-and-animations.md | 5 ++++- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index cc2f3447c..96c8b53c2 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -174,6 +174,7 @@ Students should be able to: * changes in context before the component that originates such changes * existing time limits in a form and how to adjust them, extend them, and turn them off * the current step and the total number of steps involved in a multi-step form +* associate form elements that share the same purpose, such as those to provide an address, and communicate these groups visually and non-visually * identify related requirements for developers to provide semantics for labels and instructions #### Teaching Ideas for Topic diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 4dda27eba..3e535fd03 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -163,7 +163,7 @@ Students should be able to: * select clear and distinguishable labels for components, including visual and programmatic names * select overall instructions to make information in multi-step processes more understandable, for example text and graphical representations * select visual and non-visual instructions to communicate the total number of steps and the current step in multi-step forms and processes -* group controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions, and communicate such relationships visually and non-visually +* associate controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions, and communicate such groups visually and non-visually #### Teaching Ideas for Topic diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 534f1d844..c01e03728 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -159,7 +159,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Blinking and flashing content can put some people at risk, including yourself. Communicate clearly that you are about to show blinking and flashing content. Ensure students are comfortable with being exposed to blinking and flashing content. +**Caution**: Blinking and flashing content can put some people at risk, including yourself. Let students know before showing blinking and flashing content. Ensure students understand the risks of being exposed to blinking and flashing content. Show moving content, such as carousels and animations. Present methods to avoid distractions, seizures and physical reactions, and unpredictable keyboard focus management caused by moving content. For example, support for pausing, stopping, or hiding moving content, as well as using flashing that is below the accepted ratios when possible. @@ -178,6 +178,8 @@ Students should be able to: Optional ideas to teach the learning outcomes: +**Caution**: Use all of the following teaching ideas only with prior warning that they include flickering, flashing, or animated content. Make sure students understand the risks of engaging with the examples. Make these teeaching ideas optional for learners. + * Show examples of content that moves or blinks, such as animations and carousels. Explain that moving content can be problematic and can cause distraction and anxiety for several types of users. Emphasize that some animation frequencies are also known to cause seizures and physical reactions for certain users. For references on how to design interfaces that allow to pause, stop, and hide moving, blinking, or auto-updating content, see the following techniques: * [G4: Allowing the content to be paused and restarted from where it was paused](https://www.w3.org/WAI/WCAG21/Techniques/general/G4), * [G11: Creating content that blinks for less than 5 seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G11), @@ -197,6 +199,7 @@ Optional ideas to assess knowledge: * Short Answer Questions — Ask students about the accepted general flash and red flash thresholds. Assess how students understand accessibility requirements for flashing content. * Practical — Give students an interface containing animations and ask them to make them accessible. Assess how students define methods to reduce or disable the animations. +* Practical — Give students examples of web pages using carousels. Ask them to evaluate the carousel's support for accessibility. Assess how students understand accessibility requirements for carousels. {% include excol.html type="end" %} From 94511bc6557f2a1b9f5dc6e62b23351657106387 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 28 Dec 2021 13:31:54 +0100 Subject: [PATCH 355/416] #401 Unpredictable -> uneven --- content/designer/visual-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 03069939f..7b675db57 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -172,7 +172,7 @@ Optional ideas to teach the learning outcomes: * Demonstrate the use of styles to distinguish links, buttons, and form labels and instructions, from plain text. Explain how people rely on font types, font sizes, spacing, and color to distinguish components. * Show examples of usable font sizes and explain how they support readability. Contrast previous examples with fonts that are not as easy to read. Emphasize that several user groups rely on customizable fonts to read and understand content properly. * Show examples of different page layouts with and without appropriate spacing. Explain how spacing allows for better readability of the content and for better identification of the different parts of the interface. -* Show examples of text aligned to the left, to the right, and justified. Explain that it is difficult for some users to read justified text due to the unpredictable spacing created by the justification. Therefore, text should align to only one side where possible to enhance readability. For reference, see technique [G169: Aligning Text on Only One Side](https://www.w3.org/WAI/WCAG21/Techniques/general/G169). +* Show examples of text aligned to the left, to the right, and justified. Explain that it is difficult for some users to read justified text due to the uneven spacing created by the justification. Therefore, text should align to only one side where possible to enhance readability. For reference, see technique [G169: Aligning Text on Only One Side](https://www.w3.org/WAI/WCAG21/Techniques/general/G169). #### Ideas to Assess Knowledge for Topic From 480825cfd89682e6399fcbadf813039d36fa0ebd Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 3 Jan 2022 09:07:33 +0100 Subject: [PATCH 356/416] "help" added --- content/designer/forms-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 96c8b53c2..646d77cd3 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -38,7 +38,7 @@ Students should be able to: * explain how people with disabilities rely on placement, structure, labels, instructions, and notifications to understand, navigate, and interact with forms * design consistent use, placement, and appearance of form elements * design interactions with form elements, including through mouse, keyboard, touch, and speech -* select clear and distinguishable names as well as visual and non-visual instructions to understand the purpose and functionality of form elements +* select clear and distinguishable names as well as visual and non-visual instructions to help understand the purpose and functionality of form elements * select clear and descriptive visual and non-visual instructions for the current step and the total number of steps in multi-step forms * apply clear and descriptive error messages that: * identify the field in error From 7924ed6caf09b6942a49cb5540a79fedf17b532a Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 3 Jan 2022 10:09:33 +0100 Subject: [PATCH 357/416] Work on #437 +fixing some typos --- content/designer/multimedia-and-animations.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index c01e03728..7bc30df41 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -170,7 +170,7 @@ Students should be able to: * select methods for pausing, stopping, or hiding any content that blinks, moves, or auto-updates, for example animations, carousels, and decorative gimmicks * create designs that avoid flashing entirely or only flash below the acceptable thresholds * create designs with enough time for users to read parts of moving content, for example different slides in a carousel -* identify and communiccate animated content and its different parts vissually and non-vissually, for example a carousel region and its different slides +* identify and communicate animated content and its different parts visually and non-visually, for example a carousel region and its different slides * design focus order within animated content, including how to move to different parts of the carousel and how to get to the carousel controls * select methods for stopping or controlling the volume of any audio that plays automatically for more than three seconds @@ -178,7 +178,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -**Caution**: Use all of the following teaching ideas only with prior warning that they include flickering, flashing, or animated content. Make sure students understand the risks of engaging with the examples. Make these teeaching ideas optional for learners. +**Caution**: Use all of the following teaching ideas only with prior warning that they include flickering, flashing, or animated content. Make sure students understand the risks of engaging with the examples. Make these teaching ideas optional for learners. * Show examples of content that moves or blinks, such as animations and carousels. Explain that moving content can be problematic and can cause distraction and anxiety for several types of users. Emphasize that some animation frequencies are also known to cause seizures and physical reactions for certain users. For references on how to design interfaces that allow to pause, stop, and hide moving, blinking, or auto-updating content, see the following techniques: * [G4: Allowing the content to be paused and restarted from where it was paused](https://www.w3.org/WAI/WCAG21/Techniques/general/G4), @@ -186,7 +186,7 @@ Optional ideas to teach the learning outcomes: * [G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)](https://www.w3.org/WAI/WCAG21/Techniques/general/G152), * [G186: Using a control in the Web page that stops moving, blinking, or auto-updating content](https://www.w3.org/WAI/WCAG21/Techniques/general/G186), and * [G187: Using a technology to include blinking content that can be turned off via the user agent](https://www.w3.org/WAI/WCAG21/Techniques/general/G187). -* Reiterate that flashing content can cause seizures and physical reactions for some people. Illustrate with examples of flashing content only when students understand the risks and are comfortable with being exposed to such content. Emphasize that all interface components must be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole interface. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash below three seconds, see [Understanding Success Criterion 2.3.1: Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or-below-threshold). +* Show examples of flashing content. Emphasize that all interface components must be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole interface. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash below three seconds, see [Understanding Success Criterion 2.3.1: Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or-below-threshold). * Explain that interactions triggered by animations, such as additional movements when scrolling and decorative gimmicks, can cause distraction and vestibular disorders (such as dizziness, nausea, and headaches) for some people. Illustrate with examples only when students understand the risks and are comfortable with being exposed to such content. Discuss the use of preferences as well as technology specific properties to reduce or disable such animations. * Demonstrate the use of a screen reader to navigate an application that plays audio automatically for more than three seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a method to pause or control the volume of that audio. Explain that the operating system often provides such method. For references on how to design interfaces with methods to pause or control the volume of any audio that plays automatically, see the following techniques: * [G60: Playing a sound that turns off automatically within three seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G60.html), From dfa0d787839f581ac13c23de5cbfbe5b6f39ab46 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 3 Jan 2022 10:17:02 +0100 Subject: [PATCH 358/416] #437 Learners -> students --- content/designer/multimedia-and-animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 7bc30df41..c0075601c 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -178,7 +178,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -**Caution**: Use all of the following teaching ideas only with prior warning that they include flickering, flashing, or animated content. Make sure students understand the risks of engaging with the examples. Make these teaching ideas optional for learners. +**Caution**: Use all of the following teaching ideas only with prior warning that they include flickering, flashing, or animated content. Make sure students understand the risks of engaging with the examples. Make these teaching ideas optional for students. * Show examples of content that moves or blinks, such as animations and carousels. Explain that moving content can be problematic and can cause distraction and anxiety for several types of users. Emphasize that some animation frequencies are also known to cause seizures and physical reactions for certain users. For references on how to design interfaces that allow to pause, stop, and hide moving, blinking, or auto-updating content, see the following techniques: * [G4: Allowing the content to be paused and restarted from where it was paused](https://www.w3.org/WAI/WCAG21/Techniques/general/G4), From 7b5fbc153cfd8100280a88bb9f50b552e9ef09ed Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 3 Jan 2022 14:30:48 +0100 Subject: [PATCH 359/416] #412 + some more cleanup --- content/designer/images-and-graphics.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 4b7f6d9a8..43e411f78 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -42,7 +42,7 @@ Students should be able to: * define consistent imagery to help users recognize the purpose of icons, thumbnails, and other graphical components * explain the issues associated with perception, interpretation, and rendering of images of text * explain how to avoid images of text by using technologies that achieve the desired visual presentation wherever possible -* evaluate the potential distraction and cognitive overload from using too many images +* evaluate the potential overuse of images * select alternative ways to provide the information contained in images, including tables and plain text * identify related requirements for: * developers to code images and text alternatives appropriately @@ -155,7 +155,6 @@ Students should be able to: * use styled text instead of images of text when the technology in use can provide the desired visual presentation * explain the accessibility considerations when relying only on one form of biometrics and CAPTCHA * describe alternatives to biometrics and CAPTCHA, for example using visual, auditory, and logical CAPTCHA -* evaluate the issues associated with accessing information contained in informative images * select other ways to convey the information contained in images when possible, including plain text * identify related requirements for developers to code alternative texts for informative images @@ -192,7 +191,7 @@ Explain that coordination among different team members is required to assess the Students should be able to: * apply appropriate contrast ratio for complex images -* evaluate the use of complex images +* evaluate the potential overuse of complex images * select other ways to present the information contained in complex images, for example using tables, simpler images, and plain text * determine if and how complex images are operated using input devices, including mouse, keyboard, touch, and voice * design the placement and spacing for alternatives to complex images @@ -235,7 +234,7 @@ Students should be able to: * describe the differences between decorative and non-decorative images depending on the type of information conveyed by the image and the overall context * describe different ways to present information contained in an image in the surrounding content so that the image can be considered decorative -* evaluate the use of decorative images +* evaluate the potential overuse of decorative images * select decorative images that avoid distractions and cognitive overload * explain how the overuse of decorative images could slow down loading times and interaction for users * identify related requirements for developers to code decorative images so that they are skipped by assistive technologies From 9f7cd1ab9f854a2b0d03d488c65d0c400d7099f4 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 3 Jan 2022 14:47:38 +0100 Subject: [PATCH 360/416] Fix typo --- content/designer/interaction-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index 200f6c4fc..bf9cb7ea1 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -155,7 +155,7 @@ Optional ideas to teach the learning outcomes: * Invite students to research keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers must cooperate with other team members, including developers and user researchers, on strategies to define custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and collaborating with developers to implement such keystrokes. * Present examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. * Invite students to research how assistive technologies and adaptive strategies rely on keyboard support to provide specific functionality, such as navigating sequentially using spoken commands. Demonstrate interaction with assistive technologies in web pages and applications with and without keyboard support. -* Refer back to [Designer Module 1: Visual Design, Topic Orientation Cues](/curricula/designer-modules/visual-design/#topic-orientation-cues) to reflect on focus indicators. Explain that, in addition to visually distinguishable focus indicators, designers must consider programmatic keyboard focus must be considered when providing keyboard support. Emphasize that designers must cooperate with other team members, including developers and user researchers, to design user experiences that use focus placement to reflect changes of context and user interaction. +* Refer back to [Designer Module 1: Visual Design, Topic Orientation Cues](/curricula/designer-modules/visual-design/#topic-orientation-cues) to reflect on focus indicators. Explain that, in addition to visually distinguishable focus indicators, designers must consider programmatic keyboard focus when providing keyboard support. Emphasize that designers must cooperate with other team members, including developers and user researchers, to design user experiences that use focus placement to reflect changes of context and user interaction. * Show examples of help functionality for custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using those shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these help methods is a designer's responsibility, whereas implementing them is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic From 7ec63500b82e2df9c28d26b6fd7001ccee5b4075 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 3 Jan 2022 15:55:33 +0100 Subject: [PATCH 361/416] #411 Fixing typo --- content/designer/interaction-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index bf9cb7ea1..c962dea41 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -165,7 +165,7 @@ Optional ideas to assess knowledge: * Short Answer Questions — Ask students about the commonly used modifier keys in operating systems, browsers, and assistive technologies. Assess how students identify commonly used modifier keys in operating systems, browsers, and assistive technologies. * Practical — Give students an interface that only works with the mouse and ask them to provide keyboard interaction. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. * Practical — Have students cooperate with developers to avoid custom keyboard shortcut conflicts with existing operating system and assistive technology keystrokes. Assess how students cooperate with developers to develop strategies that avoid custom keyboard shortcut conflicts. -* Practical — Give students a custom widget and ask them to define appropriate focus placement and appearance as well as depending on changes in context and user interaction. Assess how students create user experiences that consider visual focus indicators and focus placement as well as meaningful sequences. +* Practical — Give students a custom widget and ask them to define appropriate focus placement and appearance as well as meaningful sequences depending on user interaction. Assess how students create user experiences that consider visual focus indicators and focus placement as well as meaningful sequences. {% include excol.html type="end" %} From 82e7aa136f9eb2a16da8ccfae23d2575cc2f55db Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 3 Jan 2022 16:53:48 +0100 Subject: [PATCH 362/416] #399 teaching idea --- content/designer/visual-design.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 7b675db57..4c5ed23ed 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -171,6 +171,7 @@ Optional ideas to teach the learning outcomes: * Demonstrate the use of styles to distinguish links, buttons, and form labels and instructions, from plain text. Explain how people rely on font types, font sizes, spacing, and color to distinguish components. * Show examples of usable font sizes and explain how they support readability. Contrast previous examples with fonts that are not as easy to read. Emphasize that several user groups rely on customizable fonts to read and understand content properly. +* Demonstrate the use of custom style properties to increase the contrast ratio of a web page, for example properties in user style sheets and functionality in operating systems. Explain that use of these tools affect how the page is viewed. * Show examples of different page layouts with and without appropriate spacing. Explain how spacing allows for better readability of the content and for better identification of the different parts of the interface. * Show examples of text aligned to the left, to the right, and justified. Explain that it is difficult for some users to read justified text due to the uneven spacing created by the justification. Therefore, text should align to only one side where possible to enhance readability. For reference, see technique [G169: Aligning Text on Only One Side](https://www.w3.org/WAI/WCAG21/Techniques/general/G169). From d17e6c4292831f423711b1a39f44348af02683ea Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 3 Jan 2022 17:46:24 +0100 Subject: [PATCH 363/416] of -> in --- content/designer/visual-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 4c5ed23ed..57edb0ea0 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -171,7 +171,7 @@ Optional ideas to teach the learning outcomes: * Demonstrate the use of styles to distinguish links, buttons, and form labels and instructions, from plain text. Explain how people rely on font types, font sizes, spacing, and color to distinguish components. * Show examples of usable font sizes and explain how they support readability. Contrast previous examples with fonts that are not as easy to read. Emphasize that several user groups rely on customizable fonts to read and understand content properly. -* Demonstrate the use of custom style properties to increase the contrast ratio of a web page, for example properties in user style sheets and functionality in operating systems. Explain that use of these tools affect how the page is viewed. +* Demonstrate the use of custom style properties to increase the contrast ratio in a web page, for example properties in user style sheets and functionality in operating systems. Explain that use of these tools affect how the page is viewed. * Show examples of different page layouts with and without appropriate spacing. Explain how spacing allows for better readability of the content and for better identification of the different parts of the interface. * Show examples of text aligned to the left, to the right, and justified. Explain that it is difficult for some users to read justified text due to the uneven spacing created by the justification. Therefore, text should align to only one side where possible to enhance readability. For reference, see technique [G169: Aligning Text on Only One Side](https://www.w3.org/WAI/WCAG21/Techniques/general/G169). From 2fa2257281111edc568d71ec50be553a95df09ba Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 4 Jan 2022 09:55:08 +0100 Subject: [PATCH 364/416] #424 --- content/designer/forms-design.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 646d77cd3..59866f0cb 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -169,7 +169,7 @@ Students should be able to: * design user experiences that consider position and appearance for labels and instructions * select clear and consistent names for form elements across websites and applications -* apply visual and non-visual instructions for +* apply visual and non-visual instructions for: * required input fields * changes in context before the component that originates such changes * existing time limits in a form and how to adjust them, extend them, and turn them off @@ -185,6 +185,7 @@ Optional ideas to teach the learning outcomes: * Show examples of different form elements, for example buttons, checkboxes, text boxes, and listboxes, across websites and applications. Emphasize that each should have a clear name that identifies its purpose. For reference on how to provide consistent names for different form elements across websites and applications, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). * Show examples of required and non-required form fields. Explain that instructions about which of the fields are required should be provided using several methods, including visual and non-visual instructions. * Present examples of time limits, such as those warning about session expirations. Explain that visual and non-visual instructions must be provided so that users are aware of the time limits, and methods must be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designer's responsibility, whereas implementing methods to stop, extend, or adjust time limits is a responsibility shared with the developer. +* Show examples of form elements that share the same purpose, for example those to provide an address. Explain that form elements that share the same purpose need clear visual and non-visual associations. * Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. #### Ideas to Assess Knowledge for Topic @@ -194,6 +195,7 @@ Optional ideas to assess knowledge: * Practical — Give students a form and ask them to assign labels for each of the fields. Assess how students provide clear and descriptive names for each of the form fields. * Practical — Give students a form with required and non-required fields and ask them to provide visual and non-visual instructions to communicate the required fields. Assess how students provide clear and understandable instructions for each required field. * Practical — Give students a form and ask them to provide the necessary instructions for users to understand each of the fields and fill in the form. Assess how students provide clear and concise instructions. +* Practical — Give students a form and ask them to associate those which share the same purpose. Assess how students associate form elements that share the same purpose. {% include excol.html type="end" %} @@ -252,7 +254,7 @@ Show examples of visual and non-visual notifications for error messages and othe Students should be able to: * define the placement and appearance of notifications -* seelect meaningful and descriptive notification messages, including: +* select meaningful and descriptive notification messages, including: * on input (to communicate if the provided input is valid or invalid) * on task completion (to communicate success or failure of a specific task) * design user experiences to queue and prioritize application notifications coming from different components From b968b3e9a6305b26aab72dc35fa5927b40188905 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 4 Jan 2022 09:55:26 +0100 Subject: [PATCH 365/416] Typo --- content/designer/information-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 3e535fd03..58820b7f1 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -41,7 +41,7 @@ Students should be able to: * pages, landmarks, and headings * lists, simpler tables, and plain text * groups of form controls that share a common purpose -* apply methods to communicat all relevant information about multi-step processes visually and non-visually +* apply methods to communicate all relevant information about multi-step processes visually and non-visually * describe how to communicate the structure of multi-page articles or processes visually and non-visually * describe how to provide information about the name and purpose of components using descriptive labels and instructions * discuss ways to break down information presented in tables, including the use of simple tables, lists, imagery, and plain text From e5b7af9ae6f23797b4d83253b2597f862a88ebb9 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 4 Jan 2022 10:39:26 +0100 Subject: [PATCH 366/416] [Designer Module 6: Multimedia and Animations] Suggestion of idea to assess knowledge for topic Alternatives to Multimedia Content #421 --- content/designer/multimedia-and-animations.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index c0075601c..546e8b220 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -150,6 +150,7 @@ Optional ideas to assess knowledge: * Short Answer Questions — Ask students what description, captions, transcripts, and sign language mean in the context of accessible media content. Assess how students define alternatives to multimedia content. * Practical — Give students pieces of multimedia content and ask them to define the user experiences for the alternatives of those pieces. Assess how students define placement, interactions, and methods to control the alternatives. +* Practical — Ask students to research for existing media players that can be integrated in a web page and to describe their support for accessibility. Assess how students recognize keyboard support, visible keyboard focus indicators, clear labels, and contrast ratio of controls. {% include excol.html type="end" %} From f16b91649bcc7ac26fb21aabb8c51d8d4bb8b887 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 4 Jan 2022 12:30:02 +0100 Subject: [PATCH 367/416] define -> design --- content/designer/visual-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 57edb0ea0..cf1758ccc 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -212,7 +212,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Ask students to define the visual presentation of focus indicators on a web page or application. Assess how students understand the importance of focus indicators for users to know where they are on a web page or application. +* Practical — Ask students to design the visual presentation of focus indicators on a web page or application. Assess how students understand the importance of focus indicators for users to know where they are on a web page or application. * Practical — Give students a web page and ask them to define its regions. Assess how students define web page regions using a variety of methods, including headings, spacing, and grouping. * Short Answer Questions — Give students examples of orientation cues conveyed visually and ask them to provide other visual and non-visual cues to help understand the information. Assess how students provide several visual and non-visual cues to help users understand the information. From 80876c782ec7d42e005f8db49789c5518b408fd4 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 4 Jan 2022 18:48:25 +0100 Subject: [PATCH 368/416] Trying LO verbs --- content/designer/forms-design.md | 4 ++-- content/designer/images-and-graphics.md | 2 +- content/designer/information-design.md | 4 ++-- content/designer/navigation-design.md | 2 +- content/designer/visual-design.md | 2 +- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 59866f0cb..18e1f3764 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -212,7 +212,7 @@ Show examples of common input errors and suggestions for correcting them. Explai Students should be able to: * design the placement and appearance of error messages -* define error messages in the page title or before the form that: +* specify error messages in the page title or before the form that: * identify the fields in error * describe the cause of the error * provide suggestions to correct the error when possible @@ -253,7 +253,7 @@ Show examples of visual and non-visual notifications for error messages and othe Students should be able to: -* define the placement and appearance of notifications +* specify the placement and appearance of notifications * select meaningful and descriptive notification messages, including: * on input (to communicate if the provided input is valid or invalid) * on task completion (to communicate success or failure of a specific task) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 43e411f78..99db7e5b4 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -195,7 +195,7 @@ Students should be able to: * select other ways to present the information contained in complex images, for example using tables, simpler images, and plain text * determine if and how complex images are operated using input devices, including mouse, keyboard, touch, and voice * design the placement and spacing for alternatives to complex images -* apply methods to identify methods for complex image descriptions, including appropriate headings and expandable and collapsible components +* specify clear and consistent identification methods for image descriptions, including appropriate headings and expandable and collapsible components * design user experiences for complex images, including: * how to get to the image descriptions * what the description should look like diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 58820b7f1..8f98d85b8 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -118,8 +118,8 @@ Students should be able to: * headings (with their corresponding rank levels) * sidebars and other page regions * paragraphs, lists, and other structures to convey content meaning -* select diagrams and illustrations to make textual information easier to understand; for example, a diagram of the process described in the text -* select textual information to make diagrams and illustrations perceivable, for example a text description of an electronic device in a user manual +* define the presentation of diagrams and illustrations to make textual information easier to understand; for example, a diagram of the process described in the text +* define the presentation of textual information to make diagrams and illustrations perceivable, for example a text description of an electronic device in a user manual * apply methods to provide specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon * apply methods to provide the expanded form or meaning of acronyms and abbreviations * identify related requirements for: diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 5fd433369..5f0afb291 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -208,7 +208,7 @@ Discuss strategies that people use to navigate to different parts of a web page, Students should be able to: -* apply visual and non-visual methods to help users identify blocks of repeated content, including navigation bars and header contents +* specify visual and non-visual methods to help users identify blocks of repeated content, including navigation bars and header contents * apply methods to skip blocks of repeated content using the following approaches: * a link at the top of each page that goes directly to the main content area * a link at the beginning of a block of repeated content to go to the end of the block diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index cf1758ccc..068babe9e 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -196,7 +196,7 @@ Explain how people with disabilities use visual and non-visual cues to orient on Students should be able to: * design focus indicators that enable people to tell where they are as they move through web pages and applications using the keyboard -* create page regions using headings, spacing, and grouping +* define page regions using headings, spacing, and grouping * select layouts that enable presentation of visual and non-visual cues in different screen sizes, screen configurations, and style sheets * apply methods to help users perceive and understand visual and non-visual cues, for example by using text, color, and icons to convey the status of tasks in a project From 153d121c85bbbe5e9a7a8f7f65682b92a02940dd Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 4 Jan 2022 18:59:30 +0100 Subject: [PATCH 369/416] Trying LO verbs --- content/designer/forms-design.md | 2 +- content/designer/information-design.md | 14 +++++++------- content/designer/navigation-design.md | 6 +++--- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 18e1f3764..84eb15220 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -245,7 +245,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Show examples of notification messages. Explain that they must be identified both visually and programmatically in order to be distinguishable by all users. +Show examples of notification messages. Explain that they must be identified both visually and non-visually in order to be distinguishable by all users. Show examples of visual and non-visual notifications for error messages and other types of feedback for forms. Explain that notifications may have different levels of priority when in the context of a complex form. Explain that defining such levels of priority and which types of notifications each of these levels should contain is a designer's responsibility whereas implementing these levels is a developer's responsibility. diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 8f98d85b8..d5b36d47e 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -38,7 +38,7 @@ Students should be able to: * explain how people with disabilities use several methods to obtain and process information, including text, labels, instructions, semantics, and imagery * describe approaches to define content in discrete and more manageable segments, for example using: - * pages, landmarks, and headings + * pages, landmarks, and headings * lists, simpler tables, and plain text * groups of form controls that share a common purpose * apply methods to communicate all relevant information about multi-step processes visually and non-visually @@ -142,9 +142,9 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Give students an eBook. Ask them to propose how it might be split into smaller and more manageable pieces to more easily navigate and understand. Assess how students use pages, landmarks, and headings with their corresponding rank levels as well as paragraphs, lists, and other structures to split large amounts of text into smaller and more manageable pieces. -* Practical — Give students a complex piece of text. Ask them to define the presentation of diagrams and illustrations that complement the text. Assess how students define the presentation of diagrams and illustrations to complement processes and instructions presented in text. -* Practical — Give students diagrams and illustrations. Ask them to define the presentation of descriptions to make information perceivable for people who cannot see the images. Assess how students define the presentation of descriptions for diagrams and illustrations. -* Practical — Give students unusual words and abbreviations. Ask them to propose methods to explain such words or expand the abbreviations. Assess how students define methods to provide explanations of unusual words and expansions of abbreviations. +* Practical — Give students a complex piece of text. Ask them to select diagrams and illustrations that complement the text. Assess how students select diagrams and illustrations to complement processes and instructions presented in text. +* Practical — Give students diagrams and illustrations. Ask them to select descriptions to make information perceivable for people who cannot see the images. Assess how students select descriptions for diagrams and illustrations. +* Practical — Give students unusual words and abbreviations. Ask them to select methods to explain such words or expand the abbreviations. Assess how students select methods to provide explanations of unusual words and expansions of abbreviations. {% include excol.html type="end" %} @@ -172,14 +172,14 @@ Optional ideas to teach the learning outcomes: * Show examples of labels, including names for links, buttons, and form controls. Explain that these labels help users identify these components. Explain that defining the presentation of these labels is a designer's responsibility, implementing these labels is a developer's responsibility, and providing labels is a responsibility shared with the content author. * Show examples of overall instructions, for example indications of what will happen after pressing a button. Explain that these instructions help users better understand the purpose and functionality of components. Explain that instruction presentation is a designer's responsibility, implementing these instructions is a developer's responsibility, and defining the content of these instructions is a responsibility shared with the content author. * Show examples of multi-step processes, such as a multi-step form, with instructions to indicate the current step and total number of steps in the process. Then show examples of multi-step processes without such instructions. Compare the user experiences for each of the examples. Explain that people rely on such instructions to get an understanding of where they are in the process and how many steps the process has. Explain that defining the presentation of such instructions is a designer's responsibility, implementing these instructions is a developer's responsibility, and providing these instructions is a responsibility shared with the content author. -* Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to understand and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and programmatically, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look is a designer's responsibility, whereas coding those relations is a developer's responsibility. +* Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to understand and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and non-visually, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look is a designer's responsibility, whereas coding those relations is a developer's responsibility. #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: * Practical — Have students group related information in a form that collects personal information, payment methods, and consent to legal conditions. Assess how students build groups of related information, and how students provide ways for users to identify each of the groups. -* Practical — Give students a long list of items and ask them to define ways to split the list into smaller subsets. Assess how students use different strategies to group long sets of data into smaller subsets. +* Practical — Give students a long list of items and ask them to select ways to split the list into smaller subsets. Assess how students use different strategies to group long sets of data into smaller subsets. {% include excol.html type="end" %} @@ -213,7 +213,7 @@ Optional ideas to teach the learning outcomes: * Show examples of different types of information presented in tables. Explain that tables are used when there is a logical, tabular relationship between the information presented, for example when displaying a list of events with their date and venue. * Refer back to [Designer Module 1: Visual Design, Topic: Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts) and explain that some users may require different ways of presenting tabular information. For example, providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information. -* Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells must be perceived both visually and programmatically. Explain that providing the styles is a designer's responsibility, whereas establishing the programmatic relation is a responsibility shared with the developer. +* Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells must be perceived both visually and non-visually. Explain that providing the styles is a designer's responsibility, whereas establishing the programmatic relation is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 5f0afb291..ba403827e 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -192,7 +192,7 @@ Optional ideas to assess knowledge: * Practical — Give students a website and ask them to provide multiple ways to navigate across the website. Assess how students identify and design the different user experiences for site navigation, including search functionalities, breadcrumb trails, and site maps. * Practical — Give students a website and ask them to provide descriptive titles that identify each of the pages. Assess how students provide clear and descriptive page titles. -* Practical — Give students an interface with excessive use of navigational components and ask them to determine which of these navigational components are necessary and which should be removed. Assess how students balance the use of navigational components to avoid distraction and unnecessary noise. +* Practical — Give students an interface with excessive use of navigational components and ask them to determine which of these navigational components are necessary and which should be removed. Assess how students select navigational components to avoid distraction and unnecessary noise. {% include excol.html type="end" %} @@ -215,7 +215,7 @@ Students should be able to: * tables of contents at the top of the page that go to each area of the content * expandable and collapsible contents to make it easier for users to skip over them * evaluate the amount of page navigational components in use -* select components that help users navigate and orient +* select components that minimize distractions and unnecessary noise #### Teaching Ideas for Topic @@ -231,7 +231,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Have students define the blocks of repeated content in a website and cooperate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they cooperate with developers to provide a method to bypass such blocks. +* Practical — Have students identify and describe the blocks of repeated content in a website and cooperate with developers to provide a way for users to bypass such blocks. Assess how students identify and describe blocks of repeated content and how they cooperate with developers to provide a method to bypass such blocks. * Practical — Give students a document and ask them to provide the table of contents. Assess how students provide the table of contents for documents. {% include excol.html type="end" %} From a543014f904b6ad3d19a6daf6b058f12b4894676 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 5 Jan 2022 10:15:22 +0100 Subject: [PATCH 370/416] Trying tweaks to warning --- content/designer/multimedia-and-animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 546e8b220..58868685b 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -160,7 +160,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -**Caution**: Blinking and flashing content can put some people at risk, including yourself. Let students know before showing blinking and flashing content. Ensure students understand the risks of being exposed to blinking and flashing content. +**Caution**: Blinking and flashing content can put some people at risk, including yourself. Let students know before showing blinking and flashing content. Ensure students understand the risks. Communicate to students with enough time when you plan to show flashing content. For example, tell them in advance when the session dealing with blinking and flashing content will take place. Give students the possibility to privately opt out from being exposed to blinking and flashing content. Show moving content, such as carousels and animations. Present methods to avoid distractions, seizures and physical reactions, and unpredictable keyboard focus management caused by moving content. For example, support for pausing, stopping, or hiding moving content, as well as using flashing that is below the accepted ratios when possible. From 93df26ba7ca2446dcfb4164d7fe8df65c9338e83 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 5 Jan 2022 13:56:05 +0100 Subject: [PATCH 371/416] Trying LO verbs --- content/designer/forms-design.md | 20 +++++++++---------- content/designer/images-and-graphics.md | 12 +++++------ content/designer/information-design.md | 19 +++++++++--------- content/designer/interaction-design.md | 10 +++++----- content/designer/multimedia-and-animations.md | 8 ++++---- content/designer/navigation-design.md | 8 ++++---- content/designer/visual-design.md | 10 +++++----- 7 files changed, 44 insertions(+), 43 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 84eb15220..5ae9e7176 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -37,10 +37,10 @@ Students should be able to: * explain how people with disabilities rely on placement, structure, labels, instructions, and notifications to understand, navigate, and interact with forms * design consistent use, placement, and appearance of form elements -* design interactions with form elements, including through mouse, keyboard, touch, and speech -* select clear and distinguishable names as well as visual and non-visual instructions to help understand the purpose and functionality of form elements -* select clear and descriptive visual and non-visual instructions for the current step and the total number of steps in multi-step forms -* apply clear and descriptive error messages that: +* specify interactions with form elements, including through mouse, keyboard, touch, and speech +* specify clear and distinguishable names as well as visual and non-visual instructions to help understand the purpose and functionality of form elements +* define clear and descriptive visual and non-visual instructions for the current step and the total number of steps in multi-step forms +* specify clear and descriptive error messages that: * identify the field in error * provide suggestions for correction when possible * apply meaningful and descriptive visual and non-visual notifications, including for: @@ -168,8 +168,8 @@ Refer back to [Designer Module 2: Information Design, Topic: Naming and Grouping Students should be able to: * design user experiences that consider position and appearance for labels and instructions -* select clear and consistent names for form elements across websites and applications -* apply visual and non-visual instructions for: +* specify clear and consistent names for form elements across websites and applications +* define visual and non-visual instructions for: * required input fields * changes in context before the component that originates such changes * existing time limits in a form and how to adjust them, extend them, and turn them off @@ -211,12 +211,12 @@ Show examples of common input errors and suggestions for correcting them. Explai Students should be able to: -* design the placement and appearance of error messages +* define the placement and appearance of error messages * specify error messages in the page title or before the form that: * identify the fields in error * describe the cause of the error * provide suggestions to correct the error when possible -* apply methods to reverse, check, and confirm critical submissions, including legal, financial, and sensitive data +* specify methods to reverse, check, and confirm critical submissions, including legal, financial, and sensitive data #### Teaching Ideas for Topic @@ -253,8 +253,8 @@ Show examples of visual and non-visual notifications for error messages and othe Students should be able to: -* specify the placement and appearance of notifications -* select meaningful and descriptive notification messages, including: +* define the placement and appearance of notifications +* specify meaningful and descriptive notification messages, including: * on input (to communicate if the provided input is valid or invalid) * on task completion (to communicate success or failure of a specific task) * design user experiences to queue and prioritize application notifications coming from different components diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 99db7e5b4..0ca64cccb 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -38,7 +38,7 @@ Students should be able to: * explain how images and graphics help people with disabilities to process information, identify content, and understand functionality * explain how text alternatives are essential for people with disabilities to understand the information contained in images -* select meaningful and consistent text alternatives for functional images, for example those included in buttons, links, icons, and logos +* specify meaningful and consistent text alternatives for functional images, for example those included in buttons, links, icons, and logos * define consistent imagery to help users recognize the purpose of icons, thumbnails, and other graphical components * explain the issues associated with perception, interpretation, and rendering of images of text * explain how to avoid images of text by using technologies that achieve the desired visual presentation wherever possible @@ -108,7 +108,7 @@ Functional images convey the purpose of a component. For example, search, print, Students should be able to: -* select text alternatives for functional images using the following methods: +* specify text alternatives for functional images using the following methods: * text alternatives for images * combinations of text alternatives of images and adjacent text inside components * adjacent text inside components to understand its function @@ -147,14 +147,14 @@ Explain that providing text alternatives for informative images is a responsibil Students should be able to: -* apply text alternatives that are equally informative as the described images using the following methods: +* specify text alternatives that are equally informative as the described images using the following methods: * boilerplate descriptions that would then be completed and maintained through the development and authoring phases * adjacent textual information to complement images and icons, for example in a news headline * text alternatives that describe the information conveyed by images * apply the appropriate contrast ratio to images that are necessary to understand the content * use styled text instead of images of text when the technology in use can provide the desired visual presentation -* explain the accessibility considerations when relying only on one form of biometrics and CAPTCHA -* describe alternatives to biometrics and CAPTCHA, for example using visual, auditory, and logical CAPTCHA +* explain the accessibility considerations of relying only on one form of biometrics and CAPTCHA +* specify alternatives to biometrics and CAPTCHA, for example using visual, auditory, and logical CAPTCHA * select other ways to convey the information contained in images when possible, including plain text * identify related requirements for developers to code alternative texts for informative images @@ -194,7 +194,7 @@ Students should be able to: * evaluate the potential overuse of complex images * select other ways to present the information contained in complex images, for example using tables, simpler images, and plain text * determine if and how complex images are operated using input devices, including mouse, keyboard, touch, and voice -* design the placement and spacing for alternatives to complex images +* define the placement and spacing for alternatives to complex images * specify clear and consistent identification methods for image descriptions, including appropriate headings and expandable and collapsible components * design user experiences for complex images, including: * how to get to the image descriptions diff --git a/content/designer/information-design.md b/content/designer/information-design.md index d5b36d47e..c3d72ab1c 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -41,7 +41,7 @@ Students should be able to: * pages, landmarks, and headings * lists, simpler tables, and plain text * groups of form controls that share a common purpose -* apply methods to communicate all relevant information about multi-step processes visually and non-visually +* specify methods to communicate all relevant information about multi-step processes visually and non-visually * describe how to communicate the structure of multi-page articles or processes visually and non-visually * describe how to provide information about the name and purpose of components using descriptive labels and instructions * discuss ways to break down information presented in tables, including the use of simple tables, lists, imagery, and plain text @@ -118,10 +118,11 @@ Students should be able to: * headings (with their corresponding rank levels) * sidebars and other page regions * paragraphs, lists, and other structures to convey content meaning -* define the presentation of diagrams and illustrations to make textual information easier to understand; for example, a diagram of the process described in the text -* define the presentation of textual information to make diagrams and illustrations perceivable, for example a text description of an electronic device in a user manual -* apply methods to provide specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon -* apply methods to provide the expanded form or meaning of acronyms and abbreviations +* define the presentation of: + * diagrams and illustrations to make textual information easier to understand; for example, a diagram of the process described in the text + * textual information to make diagrams and illustrations perceivable, for example a text description of an electronic device in a user manual + * methods to provide specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon + * methods to provide the expanded form or meaning of acronyms and abbreviations * identify related requirements for: * developers to code the regions, headings, and language of pages and parts * content authors to provide clear language and easy-to-read texts whenever possible @@ -160,9 +161,9 @@ Discuss the use of labels, instructions, and graphical representations to help p Students should be able to: -* select clear and distinguishable labels for components, including visual and programmatic names -* select overall instructions to make information in multi-step processes more understandable, for example text and graphical representations -* select visual and non-visual instructions to communicate the total number of steps and the current step in multi-step forms and processes +* specify clear and distinguishable labels for components, including visual and programmatic names +* define overall instructions to make information in multi-step processes more understandable, for example text and graphical representations +* define visual and non-visual instructions to communicate the total number of steps and the current step in multi-step forms and processes * associate controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions, and communicate such groups visually and non-visually #### Teaching Ideas for Topic @@ -197,7 +198,7 @@ Students should be able to: * identify uses of tables to present data that share a logical relationship * define table header cells and data cells, and provide clear and distinguishable styles for each -* select graphical representations of complex tables that help users more easily understand its purpose and meaning +* define graphical representations of complex tables that help users more easily understand its purpose and meaning * evaluate the use of complex tables and select simpler ways to provide the information, for example: * simpler tables * charts, diagrams, and other graphical representations diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index c962dea41..8388a5cdd 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -40,7 +40,7 @@ Students should be able to: * design interactions and meaningful sequences inside complex widgets, including sliders, tabs, dialogs, application menus, tree views, and notifications * evaluate the use of custom keyboard shortcuts for complex widgets and applications and provide information about their purpose and scope * apply methods to disable response to device and user motion to prevent accidental activation -* apply alternatives for complex gestures such as swiping, pinching, and drawing shapes +* specify alternatives for complex gestures such as swiping, pinching, and drawing shapes * identify related requirements for developers to write code for interactions, including through mouse, keyboard, touch, and speech {% include excol.html type="all" %} @@ -140,12 +140,12 @@ Students should be able to: * explain how keyboard support benefits other ways of interacting, including speech interaction and interaction using assistive technologies * evaluate the use of custom keyboard interactions * select keyboard interactions that do not conflict with the operating system, browser, and assistive technologies when possible -* apply methods to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications +* specify methods to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications * design consistent placement and appearance of focus indicators * cooperate with developers to: * provide methods to remap or disable conflicting shortcuts * programmatically set focus in complex widgets, including sliders, tabs, dialogs, application menus, tree views, and notifications -* identify related requirements for developers to implement keyboard support for components that have no keyboard support by default + * implement keyboard support for components that have no keyboard support by default #### Teaching Ideas for Topic @@ -183,9 +183,9 @@ Discuss gestures that require dragging and drawing specific paths on a touch scr Students should be able to: -* apply alternatives to multi-pointer gestures (including swiping, pinching, and drawing shapes) by using single pointer activation +* specify alternatives to multi-pointer gestures (including swiping, pinching, and drawing shapes) by using single pointer activation * apply methods to undo or abort an action carried out with path-based gestures, including use of the up event to undo, abort, and reverse activation -* apply alternatives for device or user motion, for example components performing the same function that do not require user motion +* specify alternatives for device or user motion, for example components performing the same function that do not require user motion * apply methods to disable response to device or user motion to prevent accidental activation * design user experiences that consider larger target sizes for pointer inputs diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 58868685b..e4105cd28 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -41,7 +41,7 @@ Students should be able to: * identify accessibility considerations for media players, including: * support for different methods of interaction, including mouse, keyboard, touch, and speech * controls that have clear and descriptive names, that are easy to find on the page, and that are reachable by all users -* select methods to control automatic audio and movement, including: +* specify methods to control automatic audio and movement, including: * mute and control the volume of auto-playing audio * pause, stop, and hide moving, blinking, and auto-updating content, including carousels and animations * identify related requirements for: @@ -168,12 +168,12 @@ Show moving content, such as carousels and animations. Present methods to avoid Students should be able to: -* select methods for pausing, stopping, or hiding any content that blinks, moves, or auto-updates, for example animations, carousels, and decorative gimmicks +* specify methods for pausing, stopping, or hiding any content that blinks, moves, or auto-updates, for example animations, carousels, and decorative gimmicks * create designs that avoid flashing entirely or only flash below the acceptable thresholds * create designs with enough time for users to read parts of moving content, for example different slides in a carousel * identify and communicate animated content and its different parts visually and non-visually, for example a carousel region and its different slides -* design focus order within animated content, including how to move to different parts of the carousel and how to get to the carousel controls -* select methods for stopping or controlling the volume of any audio that plays automatically for more than three seconds +* specify the focus order within animated content, including how to move to different parts of the carousel and how to get to the carousel controls +* specify methods for stopping or controlling the volume of any audio that plays automatically for more than three seconds #### Teaching Ideas for Topic diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index ba403827e..1e5f0dab5 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -39,10 +39,10 @@ Students should be able to: * explain strategies that people with disabilities use to navigate websites and applications * design different navigational components, including menus, tables of contents, and search functionalities * describe different interactions for navigational components, including by keyboard, mouse, touch, and speech -* select clear and consistent visual and non-visual: +* define clear and consistent visual and non-visual: * presentation of menus and menu items * indication of state changes for menu items -* communicate blocks of repeated content +* specify blocks of repeated content * create site maps and descriptive page titles to help users locate specific web pages within websites * evaluate the use of navigational components, including menus, tables of contents, and site maps * select navigational components that minimize distraction and unnecessary noise @@ -120,10 +120,10 @@ Explain styling conventions for menus, such as expected location, appropriate si Students should be able to: * describe uses of different types of navigation menus, such as static, fly-out, and mega menus -* select visual and text indications to identify menus, including: +* define visual and text indications to identify menus, including: * consistent styling for menu identification across websites * visual and non-visual indications about the current page in the navigation menu -* design interactions inside navigation menus, including mouse, keyboard, touch, and speech +* specify interactions inside navigation menus, including through mouse, keyboard, touch, and speech * design navigation menus that adapt to different text sizes, screen magnifications, and screen sizes and resolutions * apply distinguishable and consistent styles for menu items in their different states, for example in fly-out menus * identify related requirements for developers to implement: diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 068babe9e..4cd763ea6 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -123,7 +123,7 @@ Students should be able to: * design text and images of text that have a contrast ratio of at least 4.5:1 with respect to their background * design large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background * design user interface components and graphics that have a contrast ratio of at least 3:1 with respect to their background -* select layouts to enable users to change colors based on customized screen sizes, screen configurations, and style sheets +* define layouts that enable users to change colors based on customized screen sizes, screen configurations, and style sheets * use visual cues in addition to text color, for example by using different patterns, shapes, and icons * use text to complement information provided visually @@ -158,7 +158,7 @@ Explain how people with disabilities rely on distinguishable and customizable st Students should be able to: * use clear and distinguishable styles for links, buttons, form labels and instructions, and text -* select customizable style properties to support content readability, including: +* specify customizable style properties to support content readability, including: * font types * font sizes * spacing @@ -197,8 +197,8 @@ Students should be able to: * design focus indicators that enable people to tell where they are as they move through web pages and applications using the keyboard * define page regions using headings, spacing, and grouping -* select layouts that enable presentation of visual and non-visual cues in different screen sizes, screen configurations, and style sheets -* apply methods to help users perceive and understand visual and non-visual cues, for example by using text, color, and icons to convey the status of tasks in a project +* design layouts that enable presentation of visual and non-visual cues in different screen sizes, screen configurations, and style sheets +* specify methods to help users perceive and understand visual and non-visual cues, for example by using text, color, and icons to convey the status of tasks in a project #### Teaching Ideas for Topic @@ -237,7 +237,7 @@ Students should be able to: * design layouts that adapt their content view and operation to portrait and landscape orientations * design layouts with target sizes that adapt to different screen sizes, screen configurations, and style sheets, for example when creating responsive designs * design layouts to support user customization of line height, as well as spacing between paragraphs, words, and letters -* create meaningful focus orders that adapt to different viewports, screen sizes, and multiple breakpoints +* specify meaningful focus orders that adapt to different viewports, screen sizes, and multiple breakpoints * evaluate the potential overuse of design elements, in particular interactive widgets, images, and moving content * select elements that minimize distraction and cognitive overload From a4519027ca4658bac988a6928cb334752753f12b Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 7 Jan 2022 10:09:38 +0100 Subject: [PATCH 372/416] Clean-up --- content/designer/images-and-graphics.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 0ca64cccb..295caaf2e 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -155,7 +155,7 @@ Students should be able to: * use styled text instead of images of text when the technology in use can provide the desired visual presentation * explain the accessibility considerations of relying only on one form of biometrics and CAPTCHA * specify alternatives to biometrics and CAPTCHA, for example using visual, auditory, and logical CAPTCHA -* select other ways to convey the information contained in images when possible, including plain text +* select alternative ways to convey the information contained in images when possible, including plain text * identify related requirements for developers to code alternative texts for informative images ### Teaching Ideas for Topic @@ -192,7 +192,7 @@ Students should be able to: * apply appropriate contrast ratio for complex images * evaluate the potential overuse of complex images -* select other ways to present the information contained in complex images, for example using tables, simpler images, and plain text +* select alternative ways to present the information contained in complex images, for example using tables, simpler images, and plain text * determine if and how complex images are operated using input devices, including mouse, keyboard, touch, and voice * define the placement and spacing for alternatives to complex images * specify clear and consistent identification methods for image descriptions, including appropriate headings and expandable and collapsible components @@ -251,7 +251,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Ask students to provide decorative images to illustrate a text article and ask them to ensure these icons are visible in different screen sizes and devices. Assess how students understand the need for decorative images to adapt to the different user needs and preferences. -* Practical — Give students an interface with too many decorative images and ask students to identify the ones that are likely to cause distractions, cognitive overload, and slow loading times. Assess how students balance the use of decorative images to minimize distractions, cognitive overload, and slow loading times. +* Practical — Give students an interface with too many decorative images and ask students to identify the ones that are likely to cause distractions, cognitive overload, and slow loading times. Assess how students select decorative images that minimize distractions, cognitive overload, and loading times. {% include excol.html type="end" %} From e07697672a212e6149578f45a9a503ec66204885 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 7 Jan 2022 10:10:46 +0100 Subject: [PATCH 373/416] Adding teaching ideas and ideas to assess knowledge to clarify --- content/designer/navigation-design.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 1e5f0dab5..ab0e5222b 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -173,7 +173,6 @@ Students should be able to: * descriptive page titles * text and visual indications about the current page in the navigation menu * evaluate the amount of site navigational components in use -* select components that help users navigate and orient * identify related requirements for developers to apply semantics and styles to site navigational components #### Teaching Ideas for Topic @@ -226,6 +225,7 @@ Optional ideas to teach the learning outcomes: * [G123: Adding a link at the beginning of a block of repeated content to go to the end of the block](https://www.w3.org/WAI/WCAG21/Techniques/general/G123.html), and * [G124: Adding links at the top of the page to each area of the content](https://www.w3.org/WAI/WCAG21/Techniques/general/G124.html). * Show examples of tables of contents, for example in an electronic book or document. Explain that they provide an overview of the whole document and allow navigation to specific parts of the content. For references on how to provide a table of contents, see technique [G64: Providing a Table of Contents](https://www.w3.org/WAI/WCAG21/Techniques/general/G64.html). +* Invite students to research how the overuse of page navigational components can cause distraction and unnecessary noise for some users. For example, too many methods to bypass blocks of repeated content can contribute to a more cluttered keyboard user experience instead of making navigation easier. #### Ideas to Assess Knowledge for Topic @@ -233,6 +233,7 @@ Optional ideas to assess knowledge: * Practical — Have students identify and describe the blocks of repeated content in a website and cooperate with developers to provide a way for users to bypass such blocks. Assess how students identify and describe blocks of repeated content and how they cooperate with developers to provide a method to bypass such blocks. * Practical — Give students a document and ask them to provide the table of contents. Assess how students provide the table of contents for documents. +* Practical — Give students an interface with too many page navigational components. Ask students to identify the ones that are likely to cause distractions and unnecessary noise. Assess how students select page navigational components that minimize distractions and unnecesssary noise. {% include excol.html type="end" %} From 2367fa8779fb70447923963581326d78eb2e2fcf Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 7 Jan 2022 12:39:31 +0100 Subject: [PATCH 374/416] Fixes link to foundation prerequisites --- content/designer/forms-design.md | 2 +- content/designer/images-and-graphics.md | 4 ++-- content/designer/information-design.md | 4 ++-- content/designer/interaction-design.md | 2 +- content/designer/multimedia-and-animations.md | 4 ++-- content/designer/navigation-design.md | 2 +- content/designer/visual-design.md | 4 ++-- 7 files changed, 11 insertions(+), 11 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 5ae9e7176..0ec8355c8 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -62,7 +62,7 @@ Skills required for this module: {% include excol.html type="middle" %} -* [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) +* [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) * Prior [Designer Modules](/curricula/designer-modules/) * Knowledge of: * Visual Design diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 295caaf2e..8768caca7 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -60,7 +60,7 @@ Skills required for this module: {% include excol.html type="middle" %} -* [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) +* [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) * Prior [Designer Modules](/curricula/designer-modules/) * Basic knowledge of: * Visual Design @@ -81,7 +81,7 @@ Skills required for this module: * [WCAG Success Criterion 1.4.5 Images of Text](https://www.w3.org/WAI/WCAG21/quickref/#images-of-text) * [WCAG Success Criterion 1.4.9 Images of Text (No Exception)](https://www.w3.org/WAI/WCAG21/quickref/#images-of-text-no-exception) * In-depth knowledge of: - * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) + * [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) * Prior [Designer Modules](/curricula/designer-modules/) * Visual Design * Prototyping diff --git a/content/designer/information-design.md b/content/designer/information-design.md index c3d72ab1c..54eb44bcc 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -60,7 +60,7 @@ Skills required for this module: {% include excol.html type="middle" %} -* [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) +* [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) * [Designer Module 1: Visual Design](/curricula/designer-modules/visual-design/) * Basic knowledge of: * Visual Design @@ -85,7 +85,7 @@ Skills required for this module: * [WCAG Success Criterion 3.2.2 ON Input](https://www.w3.org/WAI/WCAG21/quickref/#on-input) * [WCAG Success Criterion 3.3.2 Labels or Instructions](https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions) * In-depth knowledge of: - * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) + * [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) * [Designer Module 1: Visual Design](/curricula/designer-modules/visual-design/) * Visual Design * Prototyping diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index 8388a5cdd..38c7016b5 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -55,7 +55,7 @@ Skills required for this module: {% include excol.html type="middle" %} -* [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) +* [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) * Prior [Designer Modules](/curricula/designer-modules/) * Knowledge of: * Visual Design diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index e4105cd28..b6c85b23e 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -61,7 +61,7 @@ Skills required for this module: {% include excol.html type="middle" %} -* [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) +* [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) * Prior [Designer Modules](/curricula/designer-modules/) * Basic knowledge of: * Visual Design @@ -90,7 +90,7 @@ Skills required for this module: * [WCAG Success Criterion 3.2.1 On Focus](https://www.w3.org/WAI/WCAG21/quickref/#on-focus) * [WCAG Success Criterion 3.2.5 Change on Request](https://www.w3.org/WAI/WCAG21/quickref/#change-on-request) * In-depth knowledge of: - * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) + * [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) * Prior [Designer Modules](/curricula/designer-modules/) * Visual Design * Prototyping diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index ab0e5222b..062ca601c 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -92,7 +92,7 @@ Skills required for this module: * [WCAG 2 Success Criterion 2.4.8 Location](https://www.w3.org/WAI/WCAG21/quickref/#location) * [WCAG 2 Success Criterion 3.2.3 Consistent Navigation](https://www.w3.org/WAI/WCAG21/quickref/#consistent-navigation) * In-depth knowledge of: - * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) + * [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) * Prior [Designer Modules](/curricula/designer-modules/) * Visual Design * Prototyping diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 4cd763ea6..dac29adb0 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -60,7 +60,7 @@ Skills required for this module: {% include excol.html type="middle" %} -* [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) +* [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) * Basic knowledge of: * Visual Design * Prototyping @@ -93,7 +93,7 @@ Skills required for this module: * [WCAG Success Criterion 2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG21/quickref/#focus-visible) * [WCAG Success Criterion 2.5.5 Target Size](https://www.w3.org/WAI/WCAG21/quickref/#target-size) * In-depth knowledge of: - * [Foundation Prerequisites](/curricula/designer-modules#foundation-prerequisites) + * [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) * Visual Design * Prototyping * Responsive Design From ff2712298a775ee7b121a2fc75c1fba069f45f6e Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 7 Jan 2022 14:10:56 +0100 Subject: [PATCH 375/416] From -> of --- content/designer/multimedia-and-animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index b6c85b23e..74b0e3e08 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -160,7 +160,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -**Caution**: Blinking and flashing content can put some people at risk, including yourself. Let students know before showing blinking and flashing content. Ensure students understand the risks. Communicate to students with enough time when you plan to show flashing content. For example, tell them in advance when the session dealing with blinking and flashing content will take place. Give students the possibility to privately opt out from being exposed to blinking and flashing content. +**Caution**: Blinking and flashing content can put some people at risk, including yourself. Let students know before showing blinking and flashing content. Ensure students understand the risks. Communicate to students with enough time when you plan to show flashing content. For example, tell them in advance when the session dealing with blinking and flashing content will take place. Give students the possibility to privately opt out of being exposed to blinking and flashing content. Show moving content, such as carousels and animations. Present methods to avoid distractions, seizures and physical reactions, and unpredictable keyboard focus management caused by moving content. For example, support for pausing, stopping, or hiding moving content, as well as using flashing that is below the accepted ratios when possible. From 4926c11b569f983b22cf11189aef61d7501bff57 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 7 Jan 2022 16:56:28 +0100 Subject: [PATCH 376/416] First pass at Movements and animations based on EOWG discussion --- content/designer/multimedia-and-animations.md | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 74b0e3e08..7554f899c 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -160,9 +160,9 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -**Caution**: Blinking and flashing content can put some people at risk, including yourself. Let students know before showing blinking and flashing content. Ensure students understand the risks. Communicate to students with enough time when you plan to show flashing content. For example, tell them in advance when the session dealing with blinking and flashing content will take place. Give students the possibility to privately opt out of being exposed to blinking and flashing content. +Discuss different types of moving content, including carousels and animations. Present methods to avoid distractions, seizures, physical reactions, and unpredictable keyboard focus management caused by moving content. For example, support for pausing, stopping, or hiding moving content, as well as minimizing blinking and flashing when possible. -Show moving content, such as carousels and animations. Present methods to avoid distractions, seizures and physical reactions, and unpredictable keyboard focus management caused by moving content. For example, support for pausing, stopping, or hiding moving content, as well as using flashing that is below the accepted ratios when possible. +**Caution**: Blinking and flashing content can put people at risk. Let students know with enough time if you plan to show examples. Ensure students understand the risks and can privately opt out of being exposed to this content. #### Learning Outcomes for Topic @@ -179,16 +179,14 @@ Students should be able to: Optional ideas to teach the learning outcomes: -**Caution**: Use all of the following teaching ideas only with prior warning that they include flickering, flashing, or animated content. Make sure students understand the risks of engaging with the examples. Make these teaching ideas optional for students. - -* Show examples of content that moves or blinks, such as animations and carousels. Explain that moving content can be problematic and can cause distraction and anxiety for several types of users. Emphasize that some animation frequencies are also known to cause seizures and physical reactions for certain users. For references on how to design interfaces that allow to pause, stop, and hide moving, blinking, or auto-updating content, see the following techniques: +* Invite students to research about different types of moving content, such as carousels and animations. Explain that moving content can cause distraction and anxiety for several types of users. Emphasize that some animation frequencies are also known to cause seizures and physical reactions for certain users. For references on how to design interfaces that allow to pause, stop, and hide moving, blinking, or auto-updating content, see the following techniques: * [G4: Allowing the content to be paused and restarted from where it was paused](https://www.w3.org/WAI/WCAG21/Techniques/general/G4), * [G11: Creating content that blinks for less than 5 seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G11), * [G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)](https://www.w3.org/WAI/WCAG21/Techniques/general/G152), * [G186: Using a control in the Web page that stops moving, blinking, or auto-updating content](https://www.w3.org/WAI/WCAG21/Techniques/general/G186), and * [G187: Using a technology to include blinking content that can be turned off via the user agent](https://www.w3.org/WAI/WCAG21/Techniques/general/G187). -* Show examples of flashing content. Emphasize that all interface components must be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole interface. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash below three seconds, see [Understanding Success Criterion 2.3.1: Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or-below-threshold). -* Explain that interactions triggered by animations, such as additional movements when scrolling and decorative gimmicks, can cause distraction and vestibular disorders (such as dizziness, nausea, and headaches) for some people. Illustrate with examples only when students understand the risks and are comfortable with being exposed to such content. Discuss the use of preferences as well as technology specific properties to reduce or disable such animations. +* Invite students to research about flashing content. Emphasize that all interface components must flash only up to three times in one second or be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole interface. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash below three times in a second, see [Understanding Success Criterion 2.3.1: Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or-below-threshold). +* Explain that interactions triggered by animations, such as additional movements when scrolling and decorative gimmicks, can cause distraction and vestibular disorders (such as dizziness, nausea, and headaches) for some people. Discuss the use of preferences as well as technology specific properties to reduce or disable such animations. * Demonstrate the use of a screen reader to navigate an application that plays audio automatically for more than three seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a method to pause or control the volume of that audio. Explain that the operating system often provides such method. For references on how to design interfaces with methods to pause or control the volume of any audio that plays automatically, see the following techniques: * [G60: Playing a sound that turns off automatically within three seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G60.html), * [G170: Providing a control near the beginning of the Web page that turns off sounds that play automatically](https://www.w3.org/WAI/WCAG21/Techniques/general/G170.html), and @@ -198,8 +196,8 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: +* Practical — Ask students to include methods for reducing or disabling animations in a user interface. Assess how students specify methods to reduce or disable animations. * Short Answer Questions — Ask students about the accepted general flash and red flash thresholds. Assess how students understand accessibility requirements for flashing content. -* Practical — Give students an interface containing animations and ask them to make them accessible. Assess how students define methods to reduce or disable the animations. * Practical — Give students examples of web pages using carousels. Ask them to evaluate the carousel's support for accessibility. Assess how students understand accessibility requirements for carousels. {% include excol.html type="end" %} From a6bfda79fae39f5dbe0282990301c321cdedb3c7 Mon Sep 17 00:00:00 2001 From: Shawn Lawton Henry Date: Fri, 7 Jan 2022 11:11:23 -0600 Subject: [PATCH 377/416] wording tweak ideas (#438) * wording tweak ideas tweaks to caution wording thinking that: * Instructors should not show seizure-causing content. * It's not only opt-out of seeing content during teaching, but also having to look at it, e.g,. for homework or test questions. * really, blinking and flashing should rarely be used at all! I didn't propose edits to the details later related to that... * further tersification! * Update content/designer/multimedia-and-animations.md Co-authored-by: daniel-montalvo <49305434+daniel-montalvo@users.noreply.github.com> --- content/designer/multimedia-and-animations.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 7554f899c..953c18b5e 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -160,9 +160,9 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Discuss different types of moving content, including carousels and animations. Present methods to avoid distractions, seizures, physical reactions, and unpredictable keyboard focus management caused by moving content. For example, support for pausing, stopping, or hiding moving content, as well as minimizing blinking and flashing when possible. +Discuss different types of moving content, including carousels and animations. Present methods to avoid seizures, physical reactions, distractions, and unpredictable keyboard focus management caused by moving content. For example, support for pausing, stopping, or hiding moving content, as well as minimizing blinking and flashing. -**Caution**: Blinking and flashing content can put people at risk. Let students know with enough time if you plan to show examples. Ensure students understand the risks and can privately opt out of being exposed to this content. +**Caution**: Do not show blinking or flashing that can cause seizures. Moving content can cause nausea and other reactions. If you choose to show examples, give students enough time to privately opt out of seeing the content. #### Learning Outcomes for Topic @@ -222,4 +222,4 @@ Suggested resources to support your teaching: * [Colors with Good Contrast (Web Accessibility Perspective)](/perspective-videos/contrast/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [Clear Layout and Design (Web Accessibility Perspective)](/perspective-videos/layout/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [Large Links, Buttons, and Controls (Web Accessibility Perspectives)](/perspective-videos/controls/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. -* [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. \ No newline at end of file +* [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. From 8c205728ba526dae5328a9506f60cf53414d3f53 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Sun, 9 Jan 2022 22:57:41 +0100 Subject: [PATCH 378/416] Updates to teaching ideas --- content/designer/multimedia-and-animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 953c18b5e..21e36d614 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -185,7 +185,7 @@ Optional ideas to teach the learning outcomes: * [G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)](https://www.w3.org/WAI/WCAG21/Techniques/general/G152), * [G186: Using a control in the Web page that stops moving, blinking, or auto-updating content](https://www.w3.org/WAI/WCAG21/Techniques/general/G186), and * [G187: Using a technology to include blinking content that can be turned off via the user agent](https://www.w3.org/WAI/WCAG21/Techniques/general/G187). -* Invite students to research about flashing content. Emphasize that all interface components must flash only up to three times in one second or be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole interface. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash below three times in a second, see [Understanding Success Criterion 2.3.1: Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or-below-threshold). +* Invite students to research about the general flash and red flash ratios. Emphasize that all interface components must flash only up to three times in one second or be below the general flash and red flash thresholds. Any flashing interferes with the user's ability to use the whole interface. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash up to three times in a second, see [Understanding Success Criterion 2.3.1: Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or-below-threshold). * Explain that interactions triggered by animations, such as additional movements when scrolling and decorative gimmicks, can cause distraction and vestibular disorders (such as dizziness, nausea, and headaches) for some people. Discuss the use of preferences as well as technology specific properties to reduce or disable such animations. * Demonstrate the use of a screen reader to navigate an application that plays audio automatically for more than three seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a method to pause or control the volume of that audio. Explain that the operating system often provides such method. For references on how to design interfaces with methods to pause or control the volume of any audio that plays automatically, see the following techniques: * [G60: Playing a sound that turns off automatically within three seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G60.html), From 56843e457a55adf42e81fb2e26b567e402078fbb Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 10 Jan 2022 13:42:31 +0100 Subject: [PATCH 379/416] Clean-up --- content/designer/forms-design.md | 2 +- content/designer/images-and-graphics.md | 6 +++--- content/designer/navigation-design.md | 6 +++--- content/designer/visual-design.md | 6 +++--- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 0ec8355c8..e665f5b3c 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -169,7 +169,7 @@ Students should be able to: * design user experiences that consider position and appearance for labels and instructions * specify clear and consistent names for form elements across websites and applications -* define visual and non-visual instructions for: +* specify visual and non-visual instructions for: * required input fields * changes in context before the component that originates such changes * existing time limits in a form and how to adjust them, extend them, and turn them off diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 8768caca7..7f9c6a1ca 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -112,7 +112,7 @@ Students should be able to: * text alternatives for images * combinations of text alternatives of images and adjacent text inside components * adjacent text inside components to understand its function -* use consistent naming and imagery for components that have the same functionality across web pages +* specify consistent naming and imagery for components that have the same functionality across web pages * explain the benefits of using text labels and decorative images for functionality, instead of using images with text alternatives that are only available to some users, such as screen reader users * apply appropriate contrast ratio for functional images @@ -152,10 +152,10 @@ Students should be able to: * adjacent textual information to complement images and icons, for example in a news headline * text alternatives that describe the information conveyed by images * apply the appropriate contrast ratio to images that are necessary to understand the content -* use styled text instead of images of text when the technology in use can provide the desired visual presentation +* cooperate with developers and content authors to use styled text when the technology in use can provide the desired visual presentation * explain the accessibility considerations of relying only on one form of biometrics and CAPTCHA * specify alternatives to biometrics and CAPTCHA, for example using visual, auditory, and logical CAPTCHA -* select alternative ways to convey the information contained in images when possible, including plain text +* specify alternative ways to convey the information contained in images, including plain text * identify related requirements for developers to code alternative texts for informative images ### Teaching Ideas for Topic diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 062ca601c..164d6b628 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -39,10 +39,10 @@ Students should be able to: * explain strategies that people with disabilities use to navigate websites and applications * design different navigational components, including menus, tables of contents, and search functionalities * describe different interactions for navigational components, including by keyboard, mouse, touch, and speech -* define clear and consistent visual and non-visual: +* specify clear and consistent visual and non-visual: * presentation of menus and menu items * indication of state changes for menu items -* specify blocks of repeated content +* define blocks of repeated content * create site maps and descriptive page titles to help users locate specific web pages within websites * evaluate the use of navigational components, including menus, tables of contents, and site maps * select navigational components that minimize distraction and unnecessary noise @@ -233,7 +233,7 @@ Optional ideas to assess knowledge: * Practical — Have students identify and describe the blocks of repeated content in a website and cooperate with developers to provide a way for users to bypass such blocks. Assess how students identify and describe blocks of repeated content and how they cooperate with developers to provide a method to bypass such blocks. * Practical — Give students a document and ask them to provide the table of contents. Assess how students provide the table of contents for documents. -* Practical — Give students an interface with too many page navigational components. Ask students to identify the ones that are likely to cause distractions and unnecessary noise. Assess how students select page navigational components that minimize distractions and unnecesssary noise. +* Practical — Give students an interface with too many page navigational components. Ask students to identify the ones that are likely to cause distractions and unnecessary noise. Assess how students select page navigational components that minimize distractions and unnecessary noise. {% include excol.html type="end" %} diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index dac29adb0..ff232cb1a 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -40,7 +40,7 @@ Students should be able to: * design layouts with sufficient contrast ratio for text, images of text, and controls * design clear and distinguishable focus indicators, for example by using borders, color, and highlighting * use headings, spacing, and styling to group related content -* use multiple visual and non-visual cues to convey information, including text, color, patterns, and icons +* specify multiple visual and non-visual cues to convey information, including text, color, patterns, and icons * design layouts that adapt to: * different font sizes and spacing set by the user in browser and operating system settings * different screen sizes, screen configurations, and user style sheets @@ -124,7 +124,7 @@ Students should be able to: * design large-scale text and images of text that have a contrast ratio of at least 3:1 with respect to their background * design user interface components and graphics that have a contrast ratio of at least 3:1 with respect to their background * define layouts that enable users to change colors based on customized screen sizes, screen configurations, and style sheets -* use visual cues in addition to text color, for example by using different patterns, shapes, and icons +* specify visual cues in addition to text color, for example by using different patterns, shapes, and icons * use text to complement information provided visually #### Teaching Ideas for Topic @@ -157,7 +157,7 @@ Explain how people with disabilities rely on distinguishable and customizable st Students should be able to: -* use clear and distinguishable styles for links, buttons, form labels and instructions, and text +* specify clear and distinguishable styles for links, buttons, form labels and instructions, and text * specify customizable style properties to support content readability, including: * font types * font sizes From 9cd209d60f805580def0017c32dfec4995c437d3 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 11 Jan 2022 18:27:03 +0100 Subject: [PATCH 380/416] Cooperate -> collaborate --- content/designer/images-and-graphics.md | 2 +- content/designer/interaction-design.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 7f9c6a1ca..9c8126281 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -152,7 +152,7 @@ Students should be able to: * adjacent textual information to complement images and icons, for example in a news headline * text alternatives that describe the information conveyed by images * apply the appropriate contrast ratio to images that are necessary to understand the content -* cooperate with developers and content authors to use styled text when the technology in use can provide the desired visual presentation +* collaborate with developers and content authors to use styled text when the technology in use can provide the desired visual presentation * explain the accessibility considerations of relying only on one form of biometrics and CAPTCHA * specify alternatives to biometrics and CAPTCHA, for example using visual, auditory, and logical CAPTCHA * specify alternative ways to convey the information contained in images, including plain text diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index 38c7016b5..b43825ef6 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -142,7 +142,7 @@ Students should be able to: * select keyboard interactions that do not conflict with the operating system, browser, and assistive technologies when possible * specify methods to obtain information about custom keyboard shortcuts, for example those used to support efficiency and those used in custom widgets and complex applications * design consistent placement and appearance of focus indicators -* cooperate with developers to: +* collaborate with developers to: * provide methods to remap or disable conflicting shortcuts * programmatically set focus in complex widgets, including sliders, tabs, dialogs, application menus, tree views, and notifications * implement keyboard support for components that have no keyboard support by default From 8866feb67954089acbf94a82f38f73ba4475f4e9 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 12 Jan 2022 11:15:25 +0100 Subject: [PATCH 381/416] Changes to teaching idea --- content/designer/multimedia-and-animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 21e36d614..b15cb0272 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -185,7 +185,7 @@ Optional ideas to teach the learning outcomes: * [G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)](https://www.w3.org/WAI/WCAG21/Techniques/general/G152), * [G186: Using a control in the Web page that stops moving, blinking, or auto-updating content](https://www.w3.org/WAI/WCAG21/Techniques/general/G186), and * [G187: Using a technology to include blinking content that can be turned off via the user agent](https://www.w3.org/WAI/WCAG21/Techniques/general/G187). -* Invite students to research about the general flash and red flash ratios. Emphasize that all interface components must flash only up to three times in one second or be below the general flash and red flash thresholds. Any flashing interferes with the user's ability to use the whole interface. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash up to three times in a second, see [Understanding Success Criterion 2.3.1: Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or-below-threshold). +* Emphasize that designers must avoid flashing content, as it can create seizures and other physical reactions. Explain the requirements for this content to flash only up to three times in one second or to be below the general flash and red flash thresholds. Invite students to research about the general flash and red flash ratios. For references on the accessibility requirements of flashing content, see [Understanding Success Criterion 2.3.1: Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or-below-threshold). * Explain that interactions triggered by animations, such as additional movements when scrolling and decorative gimmicks, can cause distraction and vestibular disorders (such as dizziness, nausea, and headaches) for some people. Discuss the use of preferences as well as technology specific properties to reduce or disable such animations. * Demonstrate the use of a screen reader to navigate an application that plays audio automatically for more than three seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a method to pause or control the volume of that audio. Explain that the operating system often provides such method. For references on how to design interfaces with methods to pause or control the volume of any audio that plays automatically, see the following techniques: * [G60: Playing a sound that turns off automatically within three seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G60.html), From 043bc9add51da5e3d5a43ab133d3a1bf915d46a1 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 12 Jan 2022 11:18:45 +0100 Subject: [PATCH 382/416] Removes proposal from master --- _data/navigation.yml | 2 - .../getting-started-with-accessibility.md | 2 +- .../understanding-and-involving-users.md | 195 ------------------ 3 files changed, 1 insertion(+), 198 deletions(-) delete mode 100644 content/foundation/understanding-and-involving-users.md diff --git a/_data/navigation.yml b/_data/navigation.yml index 6595fccac..dd5e79493 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -239,8 +239,6 @@ url: "/curricula/foundation-modules/principles-standards-and-checks/" - name: Getting Started with Accessibility url: "/curricula/foundation-modules/getting-started-with-accessibility/" - - name: Understanding and Involving Users - url: "/curricula/foundation-modules/understanding-and-involving-users/" - name: Developer Modules url: "/curricula/developer-modules/" pages: diff --git a/content/foundation/getting-started-with-accessibility.md b/content/foundation/getting-started-with-accessibility.md index 56d88f86a..d8f969dd3 100644 --- a/content/foundation/getting-started-with-accessibility.md +++ b/content/foundation/getting-started-with-accessibility.md @@ -21,7 +21,7 @@ parent_in_h1: name: "Curricula on Web Accessibility" navigation: previous: /curricula/foundation-modules/principles-standards-and-checks/ - next: /curricula/foundation-modules/understanding-and-involving-users/ + next: /curricula/developeer-modules/ --- ## Introduction diff --git a/content/foundation/understanding-and-involving-users.md b/content/foundation/understanding-and-involving-users.md deleted file mode 100644 index 9e01cce17..000000000 --- a/content/foundation/understanding-and-involving-users.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -title: "[Draft] Module 6: Understanding and Involving Users" -nav_title: "Understanding and Involving Users" -permalink: /curricula/foundation-modules/understanding-and-involving-users/ -ref: /curricula/foundation-modules/understanding-and-involving-users/ -lang: en -github: - repository: w3c/wai-curricula - path: content/foundation/understanding-and-involving-users.md -license: creative-commons -acknowledgements: /curricula/acknowledgements/ -changelog: /curricula/changelog/ -footer: > -

Date: Updated @@ Month 2021. First published December 2019.

-

Editors: Daniel Montalvo and Shadi Abou-Zahra. Contributors: EOWG Participants. ACKNOWLEDGEMENTS lists contributors and credits.

-

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-Guide Project funded by the European Commission (EC) under the Horizon 2020 program (Grant Agreement 822245).

-parent_in_h1: - - ref: /curricula/designer-modules/ - name: nav_title - - ref: /curricula/ - name: "Curricula on Web Accessibility" -navigation: - previous: /curricula/foundation-modules/getting-started-with-accessibility/ - next: /curricula/developer-modules/ ---- - -## Introduction -{:.no-display} - -Courses based on this module should: - -* explain the impact of involving people with disabilities to create more accessible products and services -* present strategies for involving real people with disabilities in the analysis, design, and development phases - -## Learning Outcomes for Module - -Students should be able to: - -* explain how involving people with disabilities can lead to more accessible products and services -* examine applicable requirements for accessibility, such as those defined by accessibility standards and policies -* articulate the potential risks of not involving people with disabilities, such as increased costs to implement accessibility at a later stage -* describe different types of feedback from people with disabilities depending on the project phase where they are involved -* describe strategies to consider when bringing in people with disabilities, such as providing accommodations, checking the accessibility of the facilities, exploring remote participation, and considering different timings depending on user skills - -{% include excol.html type="all" %} - -## Competencies - -Skills required for this module: - -Students: - -* Basic understanding of computers and the Web. - -Instructors: - -* Prior [Foundation Modules](/curricula/foundation-modules/) -* Good understanding of the links between web accessibility components. -* In-depth knowledge of how people with disabilities use the Web (including assistive technologies and adaptive strategies) and of accessibility principles. - -## Topics to Teach - -Topics to achieve the learning outcomes: - -{% include excol.html type="start" %} - -### Topic: User Research - -{% include excol.html type="middle" %} - -Discuss how organizations conducting user research can include feedback on different accessibility features, barriers, and requirements that relate to people with disabilities. - -#### Learning Outcomes for Topic - -Students should be able to: - -* describe the impact of including real people with disabilities versus including only personas or simulations -* describe other research activities to be conducted in situations where it is not feasible to include real people with disabilities, such as asking for experts' advice, or following documented best practices for accessibility -* articulate and communicate the consequences of not involving people with disabilities, for example higher costs to implement accessibility at a later stage -* describe the characteristics of potential participants in user research activities based on different factors, such as the type of disability and the level of skills using assistive technologies and adaptive strategies -* identify related requirements for project managers and other team members to include accessibility in the overall project requirements - -#### Teaching Ideas for Topic - -Optional ideas to teach the learning outcomes: - -* Discuss different examples of involving people with disabilities, such as bringing real people and using personas when you cannot bring real people. Explain that this gives the opportunity to collect direct feedback from people with disabilities on products that are working for them and on products that are not. Emphasize that you can then include that feedback in the research conclusions so that they lead to better overall design for everybody. -* Discuss scenarios where it might not be economically feasible to involve people with disabilities. Explain different research methods that can be used to get an understanding of how people with disabilities interact with technology. For example, asking users, checking documentation, or watching videos. Explain that these research activities help the team understand different solutions to common pitfalls that people with disabilities may encounter when using the product or service. -* Explain the consequences of not involving people with disabilities. Emphasize that accessibility remediation is often difficult and can lead to higher costs when implementing accessibility later on in the development phase. -* Present characteristics of potential participants in user research activities based on several factors, such as the type of disability and the level of skills using assistive technologies and adaptive strategies. - -#### Ideas to Assess Knowledge for Topic - -Optional ideas to support assessment. - -* Short Answer Questions — Students reflect about how they could include people with disabilities in their user research activities. Assess how students understand the added value of involving people with disabilities. -* Short Answer Questions — Students reflect about the characteristics of potential participants with disabilities in user research activities. Assess how students understand the diversity among people with disabilities. - -{% include excol.html type="end" %} - -{% include excol.html type="start" %} - -### Topic: Establishing Requirements - -{% include excol.html type="middle" %} - -Refer back to [Foundation Module 4: Principles. Standards, and Checks Topic: W3C Accessibility Standards](/curricula/foundation-modules/principles-standards-and-checks/#topic-w3c-accessibility-standards). Present requirements that relate to people with disabilities, such as those included in the W3C accessibility standards. Invite students to explore policies that may apply in their region (if any). - -#### Learning Outcomes for Topic - -Students should be able to: - -* identify requirements that relate to people with disabilities, for example: - * a person with disabilities needs to understand how clothing looks like both through vision and through text descriptions - * a person with disabilities needs to be able to choose their sit when buying a ticket using their assistive technology of choice -* research existing personas and scenarios that avoid common clichés and myths related to people with disabilities -* create personas that include people with different types of disabilities and different levels of skills using assistive technologies and adaptive strategies -* create scenarios that include use of the product with different types of assistive technologies and adaptive strategies - -### Teaching Ideas for Topic - -Optional ideas to support assessment: - -* Refer back to Foundation Module 4: Principles, Standards, and Checks, [Topic: W3C Accessibility Standards](/curricula/foundation-modules/principles-standards-and-checks/#topic-w3c-accessibility-standards) and explain the importance of including the W3C accessibility standards in the overall project requirements for ensuring accessible products. -* Explain some functional requirements of products and services that relate to accessibility, such as appropriate contrast ratios, compatibility with assistive technologies and adaptive strategies, and keyboard support. -* Reflect on the diversity of people with disabilities. Explain that, when creating personas, these need to reflect the different types of abilities people have as well as their level of skills using assistive technologies and adaptive strategies. Explain the importance of creating realistic personas that avoid clichés and myths. For reference, see [Interacting with People with Disabilities](http://www.uiaccess.com/accessucd/interact.html). - -### Ideas to Assess Knowledge for Topic - -Optional ideas to support assessment: - -* Short answer questions — Ask students about three different types of non-functional requirements included in accessibility standards, such as WCAG. Assess how students understand non-functional requirements included in accessibility standards. -* Short Answer Questions — Ask students about three types of functional requirements that are related to people with disabilities. Assess how students understand functional requirements that relate to people with disabilities. -* Practical — Students create several personas that include different types of disabilities and different levels of skills using assistive technologies and adaptive strategies. Assess how students understand diversity among people with disabilities. -* Practical — Students create several scenarios that include use of the product with different assistive technologies and adaptive strategies. Assess how students understand different scenarios that include use of the product with different assistive technologies and adaptive strategies. - -{% include excol.html type="end" %} - -{% include excol.html type="start" %} - -### Topic: Working with Real People with Disabilities - -{% include excol.html type="middle" %} - -Discuss different strategies to consider when working with people with disabilities, such as accommodations, participation modalities, accessibility of the facilities, and specific setups people with disabilities may require. - -#### Learning Outcomes for Topic - -Students should be able to: - -* identify the need for including people with disabilities depending on the project requirements and the activities to be conducted -* articulate the advantages and disadvantages of guided and non-guided testing -* identify the existence of custom setups that may require researchers to visit users at their home or office -* identify the following needs when research activities are conducted at a specific location: - * accessibility of the facilities - * assistive technology needs - * accessibility of transportation means to get to the chosen venue -* identify the need for appropriate timings for participants with different levels of skills to conduct the research activities -* relate different testing methods to different accessibility outcomes -* identify the need for involvement of different roles, such as project managers, user researchers, designers, developers, and content authors, to implement received feedback that relates to their specific tasks during the development and authoring phases - -#### Teaching Ideas for Topic - -Optional ideas to teach the learning outcomes: - -* Explain how including real people with disabilities can help better inform the decisions taken in iterative design processes. For example, mention complex interaction patterns, such as complex form fields or custom dialogs, and reinforce the idea that feedback on expected behaviors and interaction patterns will help take the best design decision. -* Discuss the different levels of skills of people with disabilities when using an assistive technology or an adaptive strategy. Emphasize that some assistive technologies and adaptive strategies are difficult to learn. Explain that different people may need different timings to conduct the proposed activities. Present different strategies to include these differences. For example, setting up different time expectations depending on different levels of experience with the assistive technology and different levels of familiarity with the product. -* Explain different testing methods that exist, such as testing with an assistive technology, testing a paper prototype, or testing an HTML template. Explain that each of these methods delivers different types of outputs. For example, testing a paper prototype is more likely to deliver results related to visual aspects, and assistive technology testing is more likely to deliver results related to the compatibility of the product with assistive technology. -* Discuss several examples of complex user interfaces. Explain that participation of other team members, such as developers and content authors, may be required to address the feedback received from people with disabilities. Emphasize that requesting that participation is a responsibility of the user researcher, whereas coordinating such participation is a responsibility of the project manager. - -#### Ideas to Assess Knowledge for Topic - -Optional ideas to support assessment: - -* Practical — Ask students to select a venue where they would conduct a face-to-face research activity with people with disabilities. Assess how students understand different accommodations and needs of people with disabilities, such as accessibility of the facilities, transportation means, and others. -* Practical — Give students an activity and ask them to provide different timings depending on the different levels of skills with adaptive strategies and assistive technologies that users have. Assess how students consider different timings depending on the participants' level of skills using assistive technologies and adaptive strategies. - -{% include excol.html type="end" %} - -{% include excol.html type="all" %} - -## Ideas to Assess Knowledge for Module - -Optional ideas to support assessment: - -* Portfolio — Students design a focus group involving users with disabilities to research about people with disabilities needs for a chat bot application. Assess how students research and include user requirements of people with disabilities in user research activities. -* Portfolio — Students pick a product feature of their choice and conduct a usability testing session including real people with disabilities. Explain how students consider aspects related to involving real people with disabilities, such as accommodations, and accessibility of the facilities, and different timings to conduct the activities. - -## Teaching Resources - -Suggested resources to support your teaching: - -* [[Involving Users in Web Projects for Better, Easier Accessibility]](https://www.w3.org/WAI/planning/involving-users/) — Helps you understand real-world accessibility issues, such as how people with disabilities and older people use the web with adaptive strategies and assistive technologies. -* [[Web Accessibility Perspectives Videos: Explore the Impact and Benefits for Everyone]](https://www.w3.org/WAI/perspective-videos/) — Explore the impact of accessibility and the benefits for everyone in a variety of situations. -* [[How People with Disabilities Use the Web]](/people-use-web/) — Describes some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. From 807d4ffaf4b486bcb272300eefab07bcb46a1ffa Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 12 Jan 2022 11:36:38 +0100 Subject: [PATCH 383/416] Typo --- content/foundation/getting-started-with-accessibility.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/foundation/getting-started-with-accessibility.md b/content/foundation/getting-started-with-accessibility.md index d8f969dd3..b19e38bb9 100644 --- a/content/foundation/getting-started-with-accessibility.md +++ b/content/foundation/getting-started-with-accessibility.md @@ -21,7 +21,7 @@ parent_in_h1: name: "Curricula on Web Accessibility" navigation: previous: /curricula/foundation-modules/principles-standards-and-checks/ - next: /curricula/developeer-modules/ + next: /curricula/developer-modules/ --- ## Introduction From 7cedfb7fff4691c5694c031680c7d86e765e6402 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 12 Jan 2022 15:31:56 +0100 Subject: [PATCH 384/416] Changes to teaching idea --- content/designer/multimedia-and-animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index b15cb0272..81cb95039 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -185,7 +185,7 @@ Optional ideas to teach the learning outcomes: * [G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)](https://www.w3.org/WAI/WCAG21/Techniques/general/G152), * [G186: Using a control in the Web page that stops moving, blinking, or auto-updating content](https://www.w3.org/WAI/WCAG21/Techniques/general/G186), and * [G187: Using a technology to include blinking content that can be turned off via the user agent](https://www.w3.org/WAI/WCAG21/Techniques/general/G187). -* Emphasize that designers must avoid flashing content, as it can create seizures and other physical reactions. Explain the requirements for this content to flash only up to three times in one second or to be below the general flash and red flash thresholds. Invite students to research about the general flash and red flash ratios. For references on the accessibility requirements of flashing content, see [Understanding Success Criterion 2.3.1: Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or-below-threshold). +* Emphasize that designers must avoid flashing content, as it can create seizures and other physical reactions. Encourage students to learn more about the different types of seizures caused by flashes. Explain the requirements for this content to flash only up to three times in one second or to be below the general flash and red flash thresholds. For information on the accessibility requirements for flashing content, see [Understanding Success Criterion 2.3.1: Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or-below-threshold). * Explain that interactions triggered by animations, such as additional movements when scrolling and decorative gimmicks, can cause distraction and vestibular disorders (such as dizziness, nausea, and headaches) for some people. Discuss the use of preferences as well as technology specific properties to reduce or disable such animations. * Demonstrate the use of a screen reader to navigate an application that plays audio automatically for more than three seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a method to pause or control the volume of that audio. Explain that the operating system often provides such method. For references on how to design interfaces with methods to pause or control the volume of any audio that plays automatically, see the following techniques: * [G60: Playing a sound that turns off automatically within three seconds](https://www.w3.org/WAI/WCAG21/Techniques/general/G60.html), From 9c4f52f78641b0cd6a096a3c11cc5a8822239ebe Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 17 Jan 2022 09:38:45 +0100 Subject: [PATCH 385/416] Fix typo --- content/designer/images-and-graphics.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 9c8126281..b63e38189 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -261,7 +261,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Short Answer Questions — Ask students which types of images require which contrast ratio. Assess how students understand the different types of images and their requirements for contrast ratio . +* Short Answer Questions — Ask students which types of images require which contrast ratio. Assess how students understand the different types of images and their requirements for contrast ratio. * Portfolio — Have students design the imagery for a website. Assess how students include accessibility requirements in the images in graphics they design, for example contrast ratio, text alternatives that belong to the design phase, and placeholders for any other text alternative that is planned for later stages of the design and development process. ## Teaching Resources From 1ad3b52358df5c0773d0f25987f28eda7c051230 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 17 Jan 2022 09:50:22 +0100 Subject: [PATCH 386/416] Added "images of text" --- content/designer/multimedia-and-animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 81cb95039..6898c2bdf 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -138,7 +138,7 @@ Students should be able to Optional ideas to teach the learning outcomes: -* Show examples of description of visual information. Emphasize how these alternatives describe the visual information (including text) for people who cannot see the videos. Explain that different standards and policies may refer to description of visual information using different terms, such as audio description, video description, and described videos. Explain that defining the methods to control the description is a designer's responsibility, whereas providing the description is a responsibility shared with the content author. +* Show examples of description of visual information. Emphasize how these alternatives describe the visual information (including images of text) for people who cannot see the videos. Explain that different standards and policies may refer to description of visual information using different terms, such as audio description, video description, and described videos. Explain that defining the methods to control the description is a designer's responsibility, whereas providing the description is a responsibility shared with the content author. * Show examples of captions. Explain that captions are a synchronized text version of the speech and non-speech audio information needed to understand the content. Explain that different standards and policies may refer to captions using different terms, such as subtitles. Explain that defining the methods to control the captions is a designer's responsibility, whereas providing the captions is a responsibility shared with the content author. Explain that determining where to place captions and in what color and font they are presented is a designer's responsibility, whereas providing such captions is a responsibility shared with the content author. * Show examples of text transcripts. Explain that transcripts are a text version of the speech and non-speech audio information needed to understand the content. Explain that defining the placement and spacing for the transcripts is a designer's responsibility, whereas providing the transcripts is a responsibility shared with the content author. * Show examples of sign languages. Reflect on the different sign languages that exist depending on region and country. Explain that sign languages are essential for some people who are deaf and use written language as their second language. Mention that some deaf people do not use sign languages. Explain that defining the methods to enable and disable sign languages is a designer's responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. From 6db1a326eea9300bf7a53aa28e814695e5275bf9 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 17 Jan 2022 14:35:11 +0100 Subject: [PATCH 387/416] Clarifying scope --- content/designer/images-and-graphics.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index b63e38189..ec2fbb116 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -198,8 +198,8 @@ Students should be able to: * specify clear and consistent identification methods for image descriptions, including appropriate headings and expandable and collapsible components * design user experiences for complex images, including: * how to get to the image descriptions - * what the description should look like - * if the descriptions could ultimately replace the image itself + * what the descriptions should look like + * if the descriptions are sufficient to understand the information provided in the image * identify related requirements for content authors to: * provide descriptive, equivalent textual information to understand complex images and graphics, including diagrams, charts, maps, and infographics * break down complex images into smaller and more manageable pieces, for example simpler images, tables, and plain text @@ -208,7 +208,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Refer back to [Designer Module 1: Visual Design, Topic: Color](/curricula/designer-modules/visual-design/#topic-use-of-color). Explain that they must have a contrast ratio of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). +* Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Refer back to [Designer Module 1: Visual Design, Topic: Color](/curricula/designer-modules/visual-design/#topic-color). Explain that they must have a contrast ratio of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). * Explain that complex images must also have text descriptions that allow people who don’t see them to understand and interact with the image content. Explain that providing these text alternatives is a designer's responsibility, whereas providing the text descriptions is a responsibility shared with the content author. #### Ideas to Assess Knowledge for Topic From 275aefb4985350a04f3a9733a32c66b3f62cc342 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 17 Jan 2022 15:14:15 +0100 Subject: [PATCH 388/416] Sufficient to understand -> equivalent --- content/designer/images-and-graphics.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index ec2fbb116..acddc7c93 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -199,7 +199,7 @@ Students should be able to: * design user experiences for complex images, including: * how to get to the image descriptions * what the descriptions should look like - * if the descriptions are sufficient to understand the information provided in the image + * if the descriptions are equivalent to the information provided in the image * identify related requirements for content authors to: * provide descriptive, equivalent textual information to understand complex images and graphics, including diagrams, charts, maps, and infographics * break down complex images into smaller and more manageable pieces, for example simpler images, tables, and plain text From 54cc7a49423af3c803739ee812dd114545148236 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 19 Jan 2022 10:33:42 +0100 Subject: [PATCH 389/416] Define -> specify -- clearer --- content/designer/forms-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index e665f5b3c..583ae10d6 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -253,7 +253,7 @@ Show examples of visual and non-visual notifications for error messages and othe Students should be able to: -* define the placement and appearance of notifications +* specify the placement and appearance of notifications * specify meaningful and descriptive notification messages, including: * on input (to communicate if the provided input is valid or invalid) * on task completion (to communicate success or failure of a specific task) From c62e11ee30e2f5cf5fbb884d4f227983c394bef2 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 19 Jan 2022 10:40:14 +0100 Subject: [PATCH 390/416] Components -> user interface components -- clarifies meaning of components --- content/designer/information-design.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 54eb44bcc..c3ab0fa9e 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -43,7 +43,7 @@ Students should be able to: * groups of form controls that share a common purpose * specify methods to communicate all relevant information about multi-step processes visually and non-visually * describe how to communicate the structure of multi-page articles or processes visually and non-visually -* describe how to provide information about the name and purpose of components using descriptive labels and instructions +* describe how to provide information about the name and purpose of user interface components using descriptive labels and instructions * discuss ways to break down information presented in tables, including the use of simple tables, lists, imagery, and plain text * evaluate the use of several methods to convey the information, including text, labels, instructions, semantics, and imagery depending on user needs * identify related requirements for developers to programmatically associate landmarks, headings, table header cells and data cells, as well as form labels and instructions to their corresponding control @@ -155,7 +155,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Discuss the use of labels, instructions, and graphical representations to help people understand components. Explain that defining the presentation of labels, instructions, and graphical representations is a responsibility of the designer, whereas providing such labels and instructions is a responsibility shared with the content author. +Discuss the use of labels, instructions, and graphical representations to help people understand the purpose and functionality of user interface components. Explain that defining the presentation of labels, instructions, and graphical representations is a responsibility of the designer, whereas providing such labels and instructions is a responsibility shared with the content author. #### Learning Outcomes for Topic From 3f7e41ce765edb0a332c4d186c5f85fef510ca27 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 19 Jan 2022 10:43:19 +0100 Subject: [PATCH 391/416] Clarifies, color differences --- content/designer/visual-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index ff232cb1a..c2b5f9a36 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -112,7 +112,7 @@ Topics to achieve the learning outcomes: Explain how sufficient contrast ratio is essential for people with disabilities to perceive, distinguish, and understand content. -Describe how some people rely on color to understand and distinguish content. Explain that some people perceive color in different ways, and that some may not perceive color at all. Discuss different ways to supplement information presented using color, such as using shapes and icons. +Describe how some people rely on color differences to understand and distinguish content. Explain that some people perceive color in different ways, and that some may not perceive color at all. Discuss different ways to supplement information presented using color, such as using shapes and icons. #### Learning Outcomes for Topic From 873707bf52fe12d07e48165eee8534d850bd1e06 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 19 Jan 2022 11:47:34 +0100 Subject: [PATCH 392/416] More instances of cooperate -> collaborate --- content/designer/images-and-graphics.md | 4 ++-- content/designer/interaction-design.md | 2 +- content/designer/navigation-design.md | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index acddc7c93..5f20f51a2 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -171,7 +171,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to support assessment. * Practical — Give students a set of informative images. Ask students to annotate text alternatives that help developers and content authors provide the descriptions in the implementation phase. Assess how students provide boilerplate descriptions that would then be completed and maintained through the development and authoring phases. -* Practical — Give students an image of text and ask them to cooperate with other team roles such as developers and content authors to ensure the image has an equivalent alternative text. Assess how students identify the need for alternative text for images of text. +* Practical — Give students an image of text and ask them to collaborate with other team roles such as developers and content authors to ensure the image has an equivalent alternative text. Assess how students identify the need for alternative text for images of text. * Short Answer Questions — Present students with a situation where a human verification system needs to be used and ask them to provide various authentication alternatives for biometrics and CAPTCHA. Assess how students understand the need for providing various authentication alternatives for biometrics and CAPTCHA. {% include excol.html type="end" %} @@ -216,7 +216,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Practical — Have students add complex images to a website, such as charts or diagrams, and ensure they have the required contrast ratio. Assess how students understand the contrast requirements for complex images. -* Practical — Have students cooperate with developers and content authors to implement a map that can be understood and effectively used by all. Assess how students identify the need for text alternatives for complex images and cooperate with other team members to ensure such alternatives are effective. +* Practical — Have students collaborate with developers and content authors to implement a map that can be understood and effectively used by all. Assess how students identify the need for text alternatives for complex images and collaborate with other team members to ensure such alternatives are effective. {% include excol.html type="end" %} diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index b43825ef6..a9a58b1a7 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -164,7 +164,7 @@ Optional ideas to assess knowledge: * Short Answer Questions — Ask students about the commonly used modifier keys in operating systems, browsers, and assistive technologies. Assess how students identify commonly used modifier keys in operating systems, browsers, and assistive technologies. * Practical — Give students an interface that only works with the mouse and ask them to provide keyboard interaction. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. -* Practical — Have students cooperate with developers to avoid custom keyboard shortcut conflicts with existing operating system and assistive technology keystrokes. Assess how students cooperate with developers to develop strategies that avoid custom keyboard shortcut conflicts. +* Practical — Have students cooperate with developers to avoid custom keyboard shortcut conflicts with existing operating system and assistive technology keystrokes. Assess how students collaborate with developers to develop strategies that avoid custom keyboard shortcut conflicts. * Practical — Give students a custom widget and ask them to define appropriate focus placement and appearance as well as meaningful sequences depending on user interaction. Assess how students create user experiences that consider visual focus indicators and focus placement as well as meaningful sequences. {% include excol.html type="end" %} diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 164d6b628..588b6e5fd 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -231,7 +231,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Have students identify and describe the blocks of repeated content in a website and cooperate with developers to provide a way for users to bypass such blocks. Assess how students identify and describe blocks of repeated content and how they cooperate with developers to provide a method to bypass such blocks. +* Practical — Have students identify and describe the blocks of repeated content in a website and collaborate with developers to provide a way for users to bypass such blocks. Assess how students identify and describe blocks of repeated content and how they collaborate with developers to provide a method to bypass such blocks. * Practical — Give students a document and ask them to provide the table of contents. Assess how students provide the table of contents for documents. * Practical — Give students an interface with too many page navigational components. Ask students to identify the ones that are likely to cause distractions and unnecessary noise. Assess how students select page navigational components that minimize distractions and unnecessary noise. From 8afa5958808f79270f8be7c99b5d974d92bbe393 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 19 Jan 2022 12:04:17 +0100 Subject: [PATCH 393/416] Define -> Include --- content/designer/interaction-design.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index a9a58b1a7..029720abd 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -152,10 +152,10 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Invite students to try standard keyboard conventions. For example, the use of the tab to move through user interface components in a meaningful sequence, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that standard interactions must be preserved as much as possible when designing custom widgets, as users mostly expect these. -* Invite students to research keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers must cooperate with other team members, including developers and user researchers, on strategies to define custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and collaborating with developers to implement such keystrokes. +* Invite students to research keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers must collaborate with other team members, including developers and user researchers, on strategies to include custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and collaborating with developers to implement such keystrokes. * Present examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. * Invite students to research how assistive technologies and adaptive strategies rely on keyboard support to provide specific functionality, such as navigating sequentially using spoken commands. Demonstrate interaction with assistive technologies in web pages and applications with and without keyboard support. -* Refer back to [Designer Module 1: Visual Design, Topic Orientation Cues](/curricula/designer-modules/visual-design/#topic-orientation-cues) to reflect on focus indicators. Explain that, in addition to visually distinguishable focus indicators, designers must consider programmatic keyboard focus when providing keyboard support. Emphasize that designers must cooperate with other team members, including developers and user researchers, to design user experiences that use focus placement to reflect changes of context and user interaction. +* Refer back to [Designer Module 1: Visual Design, Topic Orientation Cues](/curricula/designer-modules/visual-design/#topic-orientation-cues) to reflect on focus indicators. Explain that, in addition to visually distinguishable focus indicators, designers must consider programmatic keyboard focus when providing keyboard support. Emphasize that designers must collaborate with other team members, including developers and user researchers, to design user experiences that use focus placement to reflect changes of context and user interaction. * Show examples of help functionality for custom keyboard shortcuts used in rich applications and in complex widgets. Explain that, while custom keyboard shortcuts are preferred by some users for efficiency reasons, using those shortcuts alone can distract others who may not be familiar with such keyboard shortcuts. Explain that providing these help methods is a designer's responsibility, whereas implementing them is a responsibility shared with the developer. #### Ideas to Assess Knowledge for Topic @@ -164,7 +164,7 @@ Optional ideas to assess knowledge: * Short Answer Questions — Ask students about the commonly used modifier keys in operating systems, browsers, and assistive technologies. Assess how students identify commonly used modifier keys in operating systems, browsers, and assistive technologies. * Practical — Give students an interface that only works with the mouse and ask them to provide keyboard interaction. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. -* Practical — Have students cooperate with developers to avoid custom keyboard shortcut conflicts with existing operating system and assistive technology keystrokes. Assess how students collaborate with developers to develop strategies that avoid custom keyboard shortcut conflicts. +* Practical — Have students collaborate with developers to avoid custom keyboard shortcut conflicts with existing operating system and assistive technology keystrokes. Assess how students collaborate with developers to develop strategies that avoid custom keyboard shortcut conflicts. * Practical — Give students a custom widget and ask them to define appropriate focus placement and appearance as well as meaningful sequences depending on user interaction. Assess how students create user experiences that consider visual focus indicators and focus placement as well as meaningful sequences. {% include excol.html type="end" %} From 7aab896fc479c2fde36bc59409a2720eaa96f337 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 19 Jan 2022 12:27:58 +0100 Subject: [PATCH 394/416] Some fixes --- content/designer/interaction-design.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index 029720abd..b748aded5 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -164,7 +164,7 @@ Optional ideas to assess knowledge: * Short Answer Questions — Ask students about the commonly used modifier keys in operating systems, browsers, and assistive technologies. Assess how students identify commonly used modifier keys in operating systems, browsers, and assistive technologies. * Practical — Give students an interface that only works with the mouse and ask them to provide keyboard interaction. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. -* Practical — Have students collaborate with developers to avoid custom keyboard shortcut conflicts with existing operating system and assistive technology keystrokes. Assess how students collaborate with developers to develop strategies that avoid custom keyboard shortcut conflicts. +* Practical — Have students collaborate with developers to include custom keyboard shortcuts that do not conflict with existing operating system and assistive technology keystrokes. Assess how students collaborate with developers to develop strategies that avoid custom keyboard shortcut conflicts. * Practical — Give students a custom widget and ask them to define appropriate focus placement and appearance as well as meaningful sequences depending on user interaction. Assess how students create user experiences that consider visual focus indicators and focus placement as well as meaningful sequences. {% include excol.html type="end" %} @@ -196,7 +196,7 @@ Optional ideas to teach the learning outcomes: * Show examples of interactions based on swipe and pinch gestures. Explain that users with mobility impairments may have difficulty to perform such gestures. Therefore, interfaces must have alternatives that do not require swiping or pinching to perform an action. * Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments may have difficulty to perform such gestures. Therefore, interfaces must have alternatives that do not require motion for these gestures. * Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events. Therefore, interfaces must support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. -* Refer back to [Designer Module 1: Visual Design, Topic Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts). Explain that larger target sizes for pointer are recommended where possible. The minimum recommended size is 44 by 44 CSS pixels. +* Refer back to [Designer Module 1: Visual Design, Topic Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts). Explain that larger target sizes for pointer inputs are recommended where possible. The minimum recommended size is 44 by 44 CSS pixels. #### Ideas to Assess Knowledge for Topic @@ -221,7 +221,7 @@ Optional ideas to assess knowledge: Suggested resources to support your teaching: -* [How People with Disabilities Use the Web](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. +* [[How People with Disabilities Use the Web]](/people-use-web/) — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use. * [Keyboard Compatibility (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/keyboard/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [Colors with Good Contrast (Web Accessibility Perspective)](/perspective-videos/contrast/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [Clear Layout and Design (Web Accessibility Perspective)](/perspective-videos/layout/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. From baf3934a7c9cc803445b8064e6255c171633520c Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 19 Jan 2022 13:25:51 +0100 Subject: [PATCH 395/416] of -> for --- content/designer/images-and-graphics.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 5f20f51a2..ef870b2ae 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -110,7 +110,7 @@ Students should be able to: * specify text alternatives for functional images using the following methods: * text alternatives for images - * combinations of text alternatives of images and adjacent text inside components + * combinations of text alternatives for images and adjacent text inside components * adjacent text inside components to understand its function * specify consistent naming and imagery for components that have the same functionality across web pages * explain the benefits of using text labels and decorative images for functionality, instead of using images with text alternatives that are only available to some users, such as screen reader users @@ -128,7 +128,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Give students different examples of images conveying function, such as a printer for a "print" button and a magnifying glass for a "search" button. Ask students to provide an appropriate text alternative. Assess how students identify images that convey function and how they provide text alternatives that describe the functionality of the component the image is attached to. +* Practical — Give students different examples of images conveying function, such as a printer for a "print" button and a magnifying glass for a "search" button. Ask students to provide an appropriate text alternative for each. Assess how students identify images that convey function and how they provide text alternatives that describe the functionality of the component. * Practical — Ask students to design a series of graphical buttons and links in a way that they are perceivable and distinguishable by all users. Assess how students apply accessibility requirements, such as contrast ratio, to graphical buttons and links. {% include excol.html type="end" %} @@ -162,7 +162,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different images that convey information, such as images to provide instructions, and to identify people and objects. Explain that such information must be provided using text alternatives in order to be understood by users who do not see the image. Emphasize that these alternatives may require coordination among designers, developers, and content authors. For references on how to provide text alternatives for images, see [G82: Providing a text alternative that identifies the purpose of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G82.html). +* Show examples of different images that convey information, such as images to provide instructions, and to identify people and objects. Explain that users who do not see the image need text alternatives to understand such information. Emphasize that these alternatives may require coordination among designers, developers, and content authors. For references on how to provide text alternatives for images, see [G82: Providing a text alternative that identifies the purpose of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G82.html). * Explain that images of text present information intended to be read as text. Emphasize that sometimes it is difficult to tell visually if text has been coded as text or as an image. Coordination among designers, developers, and content authors is therefore needed to determine if the technologies in use can achieve the same desired visual presentation in a text format. Emphasize that, if an image of text is still required, there must be a text alternative that conveys the same information as the image of text. Explain that coding an image of text appropriately is a responsibility of the developer, whereas providing descriptions for images of text is a responsibility shared with the content author. * Show examples of different verification systems, such as CAPTCHA, to identify humans trying to access a service or system. Explain that these verification systems must support several modalities, including visual, auditory, and cognitive. For references on how to provide accessible CAPTCHA, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). From 1ca86c69563dc0c86e3a295f8880d80ceb196e42 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 19 Jan 2022 16:16:52 +0100 Subject: [PATCH 396/416] Clean-up and idea to assess knowledge --- content/designer/multimedia-and-animations.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 6898c2bdf..e55287aa9 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -139,7 +139,7 @@ Students should be able to Optional ideas to teach the learning outcomes: * Show examples of description of visual information. Emphasize how these alternatives describe the visual information (including images of text) for people who cannot see the videos. Explain that different standards and policies may refer to description of visual information using different terms, such as audio description, video description, and described videos. Explain that defining the methods to control the description is a designer's responsibility, whereas providing the description is a responsibility shared with the content author. -* Show examples of captions. Explain that captions are a synchronized text version of the speech and non-speech audio information needed to understand the content. Explain that different standards and policies may refer to captions using different terms, such as subtitles. Explain that defining the methods to control the captions is a designer's responsibility, whereas providing the captions is a responsibility shared with the content author. Explain that determining where to place captions and in what color and font they are presented is a designer's responsibility, whereas providing such captions is a responsibility shared with the content author. +* Show examples of captions. Explain that captions are a synchronized text version of the speech and non-speech audio information needed to understand the content. Explain that different standards and policies may refer to captions using different terms, such as subtitles. Explain that defining the methods to control the captions, determining where to place captions, and in what color and font they are presented are designer's responsibilities. Providing such captions is a responsibility shared with the content author. * Show examples of text transcripts. Explain that transcripts are a text version of the speech and non-speech audio information needed to understand the content. Explain that defining the placement and spacing for the transcripts is a designer's responsibility, whereas providing the transcripts is a responsibility shared with the content author. * Show examples of sign languages. Reflect on the different sign languages that exist depending on region and country. Explain that sign languages are essential for some people who are deaf and use written language as their second language. Mention that some deaf people do not use sign languages. Explain that defining the methods to enable and disable sign languages is a designer's responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author. * Show examples of accessible and inaccessible media players. Emphasize that it is generally more reliable to use an existing media player with support for accessibility than to design one from scratch. Emphasize how accessible media players are operable by keyboard, make keyboard focus visible, have clear labels, have appropriate contrast ratios, and are easy to find on the page. For an overview on skills needed to develop a media player, expected functionality, and existing players, see the resource Making Audio and Video Media Accessible, [Media players](/media/av/player/). @@ -208,6 +208,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: +* Short Answer Questions — Ask students about the characteristics of accessible media players. Assess how students explain characteristics of accessible media players. * Portfolio — Have students include accessible video and audio content on a website. Assess how students understand the accessibility requirements of video and audio content, including description, captions, transcripts, and sign language. ## Teaching Resources From 570bd7d8e8562867437b5b0059f50f4ee9fa5a3f Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 19 Jan 2022 22:20:29 +0100 Subject: [PATCH 397/416] Clarifying and cleaning up --- content/designer/forms-design.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 583ae10d6..15a1b6d68 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -171,7 +171,7 @@ Students should be able to: * specify clear and consistent names for form elements across websites and applications * specify visual and non-visual instructions for: * required input fields - * changes in context before the component that originates such changes + * major changes in the content before the component that originates such changes * existing time limits in a form and how to adjust them, extend them, and turn them off * the current step and the total number of steps involved in a multi-step form * associate form elements that share the same purpose, such as those to provide an address, and communicate these groups visually and non-visually @@ -245,9 +245,9 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Show examples of notification messages. Explain that they must be identified both visually and non-visually in order to be distinguishable by all users. +Show examples of notification messages. Explain that users need visual and non-visual methods to identify and distinguish such notifications. -Show examples of visual and non-visual notifications for error messages and other types of feedback for forms. Explain that notifications may have different levels of priority when in the context of a complex form. Explain that defining such levels of priority and which types of notifications each of these levels should contain is a designer's responsibility whereas implementing these levels is a developer's responsibility. +Show examples of visual and non-visual notifications for error messages and other types of feedback for forms. Explain that notifications may have different levels of priority when in the context of a complex form. Explain that defining such levels of priority and which types of notifications each of these levels should contain is a designer's responsibility, whereas implementing these levels is a developer's responsibility. #### Learning Outcomes for Topic From aea22cda824847c8eddef0f4f02a6e5ebf3bfd75 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 20 Jan 2022 10:44:36 +0100 Subject: [PATCH 398/416] #376 Adds ARIA refs --- content/designer/interaction-design.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index b748aded5..f4e19a326 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -152,7 +152,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Invite students to try standard keyboard conventions. For example, the use of the tab to move through user interface components in a meaningful sequence, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that standard interactions must be preserved as much as possible when designing custom widgets, as users mostly expect these. -* Invite students to research keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers must collaborate with other team members, including developers and user researchers, on strategies to include custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and collaborating with developers to implement such keystrokes. +* Invite students to research keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers must collaborate with other team members, including developers and user researchers, on strategies to include custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and collaborating with developers to implement such keystrokes. For information on developing custom keyboard interfaces, see WAI-ARIA Authoring Practices [Developing a Keyboard INterface](https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard/) * Present examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. * Invite students to research how assistive technologies and adaptive strategies rely on keyboard support to provide specific functionality, such as navigating sequentially using spoken commands. Demonstrate interaction with assistive technologies in web pages and applications with and without keyboard support. * Refer back to [Designer Module 1: Visual Design, Topic Orientation Cues](/curricula/designer-modules/visual-design/#topic-orientation-cues) to reflect on focus indicators. Explain that, in addition to visually distinguishable focus indicators, designers must consider programmatic keyboard focus when providing keyboard support. Emphasize that designers must collaborate with other team members, including developers and user researchers, to design user experiences that use focus placement to reflect changes of context and user interaction. @@ -228,3 +228,4 @@ Suggested resources to support your teaching: * [Large Links, Buttons, and Controls (Web Accessibility Perspectives)](/perspective-videos/controls/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [Notifications and Feedback (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/notifications/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. +* [](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex) — Demonstrates how to make common rich internet application patterns and widgets accessible by applying WAI-ARIA roles, states, and properties and implementing keyboard support. \ No newline at end of file From c01c4debbb8a50d8e3828fe25d225446cd3ee79b Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 20 Jan 2022 12:09:37 +0100 Subject: [PATCH 399/416] Clarifies relationship between learning outcomes and teaching ideas for module --- content/designer/navigation-design.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 588b6e5fd..8f4259382 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -158,7 +158,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Discuss strategies that people use to navigate to different pages of the same site, including menus, breadcrumb trails, search functionalities, and site maps. Explain that different people rely on different navigational components. Discuss strategies to use several site navigational methods that minimize distractions and unnecessary noise. +Discuss strategies that people use to navigate to different pages of the same site, including menus, breadcrumb trails, search functionalities, and site maps. Explain that different people rely on different navigational components. Discuss strategies to use several site navigational methods to favor various user experiences. #### Learning Outcomes for Module @@ -191,7 +191,6 @@ Optional ideas to assess knowledge: * Practical — Give students a website and ask them to provide multiple ways to navigate across the website. Assess how students identify and design the different user experiences for site navigation, including search functionalities, breadcrumb trails, and site maps. * Practical — Give students a website and ask them to provide descriptive titles that identify each of the pages. Assess how students provide clear and descriptive page titles. -* Practical — Give students an interface with excessive use of navigational components and ask them to determine which of these navigational components are necessary and which should be removed. Assess how students select navigational components to avoid distraction and unnecessary noise. {% include excol.html type="end" %} @@ -201,7 +200,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Discuss strategies that people use to navigate to different parts of a web page, including tables of contents and methods to bypass blocks of repeated content. Explain that different groups of users rely on different navigational components. Discuss how to assess and balance which ones to use to favor various user experiences while avoiding distractions and unnecessary noise. +Discuss strategies that people use to navigate to different parts of a web page, including tables of contents and methods to bypass blocks of repeated content. Explain that different groups of users rely on different navigational components. Discuss how to use page navigation components that minimize distractions and unnecessary noise. ### Learning Outcomes for Topic @@ -244,6 +243,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: * Short Answer Questions — Ask students to outline the different types of navigational methods that exist and provide examples for each. Assess how students understand and communicate those different types of navigational methods for websites, documents, and applications. +* Practical — Give students an interface with excessive use of navigational components and ask them to determine which of these navigational components are necessary and which should be removed. Assess how students select navigational components to avoid distraction and unnecessary noise. * Portfolio — Have students design the navigation menu and other navigational components for a website. Assess how students understand accessibility features of navigation across websites and applications. ## Teaching Resources From 383eba32d446cd98c3f2309e720743b9bd8303c1 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 20 Jan 2022 13:21:30 +0100 Subject: [PATCH 400/416] #398 Adds optional materials as requested in TF --- content/designer/visual-design.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index c2b5f9a36..2b79263e8 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -226,7 +226,7 @@ Optional ideas to assess knowledge: Refer to responsive design techniques. Explain that other elements also contribute to an accessible user experience. Encourage consideration of how content sequence, focus indicators, and target size can be designed to adapt to different screen sizes and screen configurations. -Demonstrate approaches to detect the overuse of design elements to avoid potential overload and distraction for some users. +Demonstrate approaches to detect the overuse of design elements to minimize potential overload and distraction for some users. #### Learning Outcomes for Topic @@ -250,6 +250,7 @@ Optional ideas to teach the learning outcomes: * Show examples of user interfaces showing up in both portrait and landscape modes. Explain that the ability to show an interface both in portrait and landscape is essential for people who cannot change their device orientation due to mobility impairments. * Show examples of different user interfaces that support customizing line height as well as spacing between paragraphs, words, and letters to support readability. * Show examples of different target sizes and explain that some people have difficulty to tap smaller targets due to mobility impairments. Explain that target sizes must be large enough to accommodate different people's needs. +* Invite students to research how overuse of design elements can cause distractions and cognitive overload for some users. For example, overuse of interactive widgets, images, and moving content can make some users overwhelmed. #### Ideas to Assess Knowledge for Topic @@ -257,6 +258,7 @@ Optional ideas to assess knowledge: * Practical — Have students design different layouts considering text resizing, line height, spacing between paragraphs, words, and letters. Assess how students consider text resizing, line height, and spacing between paragraphs, words, and letters. * Practical — Have students design an interface that adapts to portrait and landscape modes. Assess how students understand the need for interfaces to adapt to both portrait and landscape modes. +* Short Answer Questions — Ask students about the elements that can cause distractions and cognitive overload. Assess how students identify interactive widgets, images, and moving content as elements that can cause distractions and cognitive overload. {% include excol.html type="end" %} @@ -267,6 +269,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: * Short Answer Questions — Ask students about the contrast ratio for the different user interface components. Assess how students understand the different contrast ratio requirements depending on the components. +* Practical — Give students a complex layout and ask them to simplify it so that it can be used by all. Assess how students select elements that minimize distractions and cognitive overload. * Portfolio — Have students design a web page. Assess how students use customizable color, layout, spacing, and placement to support content perception, identification, and readability. ## Teaching Resources From 68abff6055c022435ec6fa455743d0a64aa07637 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Thu, 20 Jan 2022 20:41:41 +0100 Subject: [PATCH 401/416] Updates SCs in competencies --- content/designer/forms-design.md | 1 + content/designer/images-and-graphics.md | 4 ++++ content/designer/information-design.md | 13 ++++++++----- content/designer/interaction-design.md | 9 +++++---- content/designer/multimedia-and-animations.md | 2 -- content/designer/navigation-design.md | 11 ++++++----- content/designer/visual-design.md | 4 ++-- 7 files changed, 26 insertions(+), 18 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 15a1b6d68..46b493fb5 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -102,6 +102,7 @@ Skills required for this module: * [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) * [WCAG Success Criterion 2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG21/quickref/#focus-visible) * [WCAG Success Criterion 3.3.1 Error Identification](https://www.w3.org/WAI/WCAG21/quickref/#error-identification) + * [WCAG Success Criterion 3.3.2 Labels and Instructions]()https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions * [WCAG Success Criterion 3.3.3 Error Suggestion](https://www.w3.org/WAI/WCAG21/quickref/#error-suggestion) * [WCAG Success Criterion 3.3.4 Error Prevention](https://www.w3.org/WAI/WCAG21/quickref/#error-prevention-legal-financial-data) * [WCAG Success Criterion 4.1.3 Status Messages](https://www.w3.org/WAI/WCAG21/quickref/#status-messages) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index ef870b2ae..55ca6ba22 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -78,8 +78,12 @@ Skills required for this module: * Applied expertise in teaching: * [WCAG Success Criterion 1.1.1 Non-Text Content](https://www.w3.org/WAI/WCAG21/quickref/#non-text-content) + * [WCAG Success Criterion 1.4.1 Use of Color](https://www.w3.org/WAI/WCAG21/quickref/#use-of-color) + * [WCAG Success Criterion 1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum) * [WCAG Success Criterion 1.4.5 Images of Text](https://www.w3.org/WAI/WCAG21/quickref/#images-of-text) + * [WCAG Success Criterion 1.4.6 Contrast (Enhanced)](https://www.w3.org/WAI/WCAG21/quickref/#contrast-enhanced) * [WCAG Success Criterion 1.4.9 Images of Text (No Exception)](https://www.w3.org/WAI/WCAG21/quickref/#images-of-text-no-exception) + * [WCAG Success Criterion 1.4.11 Non-Text Contrast](https://www.w3.org/WAI/WCAG21/quickref/#non-text-contrast) * In-depth knowledge of: * [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) * Prior [Designer Modules](/curricula/designer-modules/) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index c3ab0fa9e..69872af87 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -77,12 +77,15 @@ Skills required for this module: {% include excol.html type="middle" %} * Applied expertise in teaching: + * [WCAG Success Criterion 1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG21/quickref/#non-text-content) * [WCAG Success Criterion 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) - * [WCAG Success Criterion 2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/quickref/#keyboard) - * [WCAG Success Criterion 3.1.1 Unusual Words](https://www.w3.org/WAI/WCAG21/quickref/#unusual-words) + * [WCAG Success Criterion 1.3.3 Sensory Characteristics](https://www.w3.org/WAI/WCAG21/quickref/#sensory-characteristics) + * [WCAG Success Criterion 1.3.5 Identify Input Purpose](https://www.w3.org/WAI/WCAG21/quickref/#identify-input-purpose) + * [WCAG 2 Success Criterion 1.4.5 Images of Text](https://www.w3.org/WAI/WCAG21/quickref/#images-of-text) + * [WCAG 2 Success Criterion 2.4.4 Link purpose (In Context)](https://www.w3.org/WAI/WCAG21/quickref/#link-purpose-in-context) + * [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) + * [WCAG Success Criterion 3.1.3 Unusual Words](https://www.w3.org/WAI/WCAG21/quickref/#unusual-words) * [WCAG Success Criterion 3.1.4 Abbreviations](https://www.w3.org/WAI/WCAG21/quickref/#abbreviations) - * [WCAG Success Criterion 3.2.1 On Focus](https://www.w3.org/WAI/WCAG21/quickref/#on-focus) - * [WCAG Success Criterion 3.2.2 ON Input](https://www.w3.org/WAI/WCAG21/quickref/#on-input) * [WCAG Success Criterion 3.3.2 Labels or Instructions](https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions) * In-depth knowledge of: * [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) @@ -131,7 +134,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of pages and explain how they are divided into several regions. Demonstrate that, in addition to visually distinguishing these regions, semantics and text are needed to ensure that all users can understand the relations between them. Explain that defining and planning the different regions is a designer's responsibility, whereas adding the semantics is a responsibility shared with the developer. +* Discuss different types of page regions, including header, navigation, main, and footer. Demonstrate that, in addition to visually distinguishing these regions, some people need semantics and text to understand the relations between them. Explain that defining and planning the different regions is a designer's responsibility, whereas adding the semantics is a responsibility shared with the developer. * Show examples of online articles and forms. Discuss how these are divided into manageable pieces so that they are easier to understand and to navigate. For example, by using headings with their corresponding rank levels to indicate the different parts, as well as sections, paragraphs, and lists to convey content meaning. * Show examples of diagrams and illustrations that can complement the information presented in text. For example, visual instructions that supplement the text of a user manual. Explain that they help users with reading disabilities to understand difficult pieces of text. Explain that defining the presentation of such diagrams and illustrations is a responsibility of the designer, whereas providing the diagrams and illustrations is a responsibility of the content author. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique [G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes](https://www.w3.org/WAI/WCAG21/Techniques/general/G103). * Show examples of text descriptions to make diagrams and illustrations perceivable. For example, text descriptions of an electronic device layout. Explain that these descriptions help people who don’t see the images to perceive the information. Explain that defining the presentation of such descriptions is a responsibility of the designer, whereas providing such descriptions is a responsibility shared with the content author. Text alternatives will be discussed in detail in [Designer Module 5: Images and Graphics](/curricula/designer-modules/images-and-graphics/). diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index f4e19a326..a716a2b92 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -87,15 +87,16 @@ Skills required for this module: * [WCAG Success Criterion 1.4.12 Text Spacing](https://www.w3.org/WAI/WCAG21/quickref/#text-spacing) * [WCAG Success Criterion 2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/quickref/#keyboard) * [WCAG Success Criterion 2.1.2 No Keyboard Trap](https://www.w3.org/WAI/WCAG21/quickref/#no-keyboard-trap) + * [WCAG Success Criterion 2.1.4 Character Key Shortcuts](https://www.w3.org/WAI/WCAG21/quickref/#character-key-shortcuts) * [WCAG Success Criterion 2.2.1 Timing Adjustable](https://www.w3.org/WAI/WCAG21/quickref/#timing-adjustable) * [WCAG Success Criterion 2.2.5 Re-Authenticating](https://www.w3.org/WAI/WCAG21/quickref/#re-authenticating) * [WCAG Success Criterion 2.2.6 Timeouts](https://www.w3.org/WAI/WCAG21/quickref/#timeouts) * [WCAG Success Criterion 2.4.3 Focus Order](https://www.w3.org/WAI/WCAG21/quickref/#focus-order) - * [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) * [WCAG Success Criterion 2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG21/quickref/#focus-visible) - * [WCAG Success Criterion 3.3.1 Error Identification](https://www.w3.org/WAI/WCAG21/quickref/#error-identification) - * [WCAG Success Criterion 3.3.3 Error Suggestion](https://www.w3.org/WAI/WCAG21/quickref/#error-suggestion) - * [WCAG Success Criterion 3.3.4 Error Prevention](https://www.w3.org/WAI/WCAG21/quickref/#error-prevention-legal-financial-data) + * [WCAG Success Criterion 2.5.1 Pointer Gestures](https://www.w3.org/WAI/WCAG21/quickref/#pointer-gestures) + * [WCAG Success Criterion 2.5.2 Pointer Cancellation](https://www.w3.org/WAI/WCAG21/quickref/#pointer-cancellation) + * [Success Criterion 2.5.4 Motion Actuation](https://www.w3.org/WAI/WCAG21/quickref/#motion-actuation) + * [WCAG Success Criterion 2.5.5 Target Size]() * [WCAG Success Criterion 4.1.3 Status Messages](https://www.w3.org/WAI/WCAG21/quickref/#status-messages) * In-depth knowledge of: * [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index e55287aa9..8a1dee374 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -87,8 +87,6 @@ Skills required for this module: * [WCAG Success Criterion 1.4.6 Sign Language (prerecorded](https://www.w3.org/WAI/WCAG21/quickref/#sign-language-prerecorded) * [WCAG Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide) * [WCAG Success Criterion 2.3.1 Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG21/quickref/#three-flashes-or-below-threshold) - * [WCAG Success Criterion 3.2.1 On Focus](https://www.w3.org/WAI/WCAG21/quickref/#on-focus) - * [WCAG Success Criterion 3.2.5 Change on Request](https://www.w3.org/WAI/WCAG21/quickref/#change-on-request) * In-depth knowledge of: * [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) * Prior [Designer Modules](/curricula/designer-modules/) diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 8f4259382..ccd7a80d3 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -45,7 +45,7 @@ Students should be able to: * define blocks of repeated content * create site maps and descriptive page titles to help users locate specific web pages within websites * evaluate the use of navigational components, including menus, tables of contents, and site maps -* select navigational components that minimize distraction and unnecessary noise +* select navigational components that minimize distractions and unnecessary noise * identify related requirements for developers to implement: * interactions for navigational components, including by keyboard, mouse, touch, and speech * clear and descriptive names for navigational components @@ -91,6 +91,7 @@ Skills required for this module: * [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) * [WCAG 2 Success Criterion 2.4.8 Location](https://www.w3.org/WAI/WCAG21/quickref/#location) * [WCAG 2 Success Criterion 3.2.3 Consistent Navigation](https://www.w3.org/WAI/WCAG21/quickref/#consistent-navigation) + * [WCAG Success Criterion 3.2.4 Consistent Identification](https://www.w3.org/WAI/WCAG21/quickref/#consistent-identification) * In-depth knowledge of: * [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) * Prior [Designer Modules](/curricula/designer-modules/) @@ -223,8 +224,8 @@ Optional ideas to teach the learning outcomes: * [G1: Adding a link at the top of each page that goes directly to the main content area](https://www.w3.org/WAI/WCAG21/Techniques/general/G1.html), * [G123: Adding a link at the beginning of a block of repeated content to go to the end of the block](https://www.w3.org/WAI/WCAG21/Techniques/general/G123.html), and * [G124: Adding links at the top of the page to each area of the content](https://www.w3.org/WAI/WCAG21/Techniques/general/G124.html). -* Show examples of tables of contents, for example in an electronic book or document. Explain that they provide an overview of the whole document and allow navigation to specific parts of the content. For references on how to provide a table of contents, see technique [G64: Providing a Table of Contents](https://www.w3.org/WAI/WCAG21/Techniques/general/G64.html). -* Invite students to research how the overuse of page navigational components can cause distraction and unnecessary noise for some users. For example, too many methods to bypass blocks of repeated content can contribute to a more cluttered keyboard user experience instead of making navigation easier. +* Show tables of contents for electronic books or documents. Explain that they provide an overview of the whole document and allow navigation to specific parts of the content. For references on how to provide a table of contents, see technique [G64: Providing a Table of Contents](https://www.w3.org/WAI/WCAG21/Techniques/general/G64.html). +* Invite students to research how the overuse of page navigational components can cause distractions and unnecessary noise for some users. For example, too many methods to bypass blocks of repeated content can contribute to a more cluttered keyboard user experience instead of making navigation easier. #### Ideas to Assess Knowledge for Topic @@ -242,8 +243,8 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: -* Short Answer Questions — Ask students to outline the different types of navigational methods that exist and provide examples for each. Assess how students understand and communicate those different types of navigational methods for websites, documents, and applications. -* Practical — Give students an interface with excessive use of navigational components and ask them to determine which of these navigational components are necessary and which should be removed. Assess how students select navigational components to avoid distraction and unnecessary noise. +* Short Answer Questions — Ask students to outline the different types of navigational methods that exist and to provide examples for each. Assess how students understand and communicate the different types of navigational methods for websites, documents, and applications. +* Practical — Give students an interface with excessive use of navigational components and ask them to determine which are necessary and which should be removed. Assess how students select navigational components that minimize distractions and unnecessary noise. * Portfolio — Have students design the navigation menu and other navigational components for a website. Assess how students understand accessibility features of navigation across websites and applications. ## Teaching Resources diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 2b79263e8..4bc44f1fd 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -133,7 +133,7 @@ Optional ideas to teach the learning outcomes: * Show examples of sufficient and insufficient contrast ratio for text. Explain that contrast ratio for text (including images of text) needs to be at least 4.5:1 with respect to their background. For references on how to apply sufficient contrast ratio to text (including images of text), see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). * Show examples of different interactive components, such as buttons and links. Explain that they should have a contrast ratio of at least 3:1. For references on how to apply sufficient contrast ratio to interactive components, see techniques [G207: Ensuring that a contrast ratio of 3:1 is provided for icons](https://www.w3.org/WAI/WCAG21/Techniques/general/G207) and [G209: Provide sufficient contrast at the boundaries between adjoining colors](https://www.w3.org/WAI/WCAG21/Techniques/general/G209). -* Show examples of interfaces where information is conveyed exclusively with differences in color, such as a form where required fields are marked in red. Explain that some people perceive color in different ways, and that some may not perceive color at all. Some people may require methods different from color to understand that information. For references on how to supplement information conveyed through color, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). +* Show examples of interfaces that convey information exclusively with differences in color, such as a form with required fields marked in red. Explain that some people perceive color in different ways, and that some may not perceive color at all. Some people may require methods different from color to understand that information. For references on how to supplement information conveyed through color, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). #### Ideas to Assess Knowledge for Topic @@ -206,7 +206,7 @@ Optional ideas to teach the learning outcomes: * Invite students to use a web page that has appropriate focus indicators first, and then invite them to use a web page without focus indicators. Explain how focus indicators allow people who rely on keyboard navigation to determine where they are as they move through web pages and applications. For reference on how to provide appropriate focus indicators, see techniques [G149: Using user interface components that are highlighted by the user agent when they receive focus](https://www.w3.org/WAI/WCAG21/Techniques/general/G149.html) and [G195: Using an author-supplied, highly visible focus indicator](https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html). * Show examples of different web page regions, such as header, navigation, main, and footer. Explain that several groups of people with disabilities rely on visual and programmatic cues to perceive such regions. Explain that defining the presentation of these cues is a designer's responsibility, whereas implementing such cues and their semantics is a developer's responsibility. -* Show examples of interfaces where information is provided through vision only, such as those with icons and color to convey the status of different tasks in a project. Explain that some people cannot rely on visual means to obtain information. These users need text to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). +* Show examples of interfaces that convey information through vision only, such as those with icons and color to convey the status of different tasks in a project. Explain that some people cannot rely on visual means to obtain information. These users need text to understand the information provided. For references on how to complement information presented visually with text, see technique [G96: Providing textual identification of items that otherwise rely only on sensory information to be understood](https://www.w3.org/WAI/WCAG21/Techniques/general/G96.html). #### Ideas to Assess Knowledge for Topic From b74aab812db6426bf0a54ed6b65f266c277211b6 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Fri, 21 Jan 2022 13:08:00 +0100 Subject: [PATCH 402/416] Wording udpates --- content/designer/forms-design.md | 16 ++++++++-------- content/designer/images-and-graphics.md | 7 ++++--- content/designer/information-design.md | 4 ++-- content/designer/interaction-design.md | 8 ++++---- content/designer/visual-design.md | 6 +++--- 5 files changed, 21 insertions(+), 20 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 46b493fb5..4918c21fc 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -145,7 +145,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of different form elements and reflect on their purposes. For example, edit boxes, check boxes, radio buttons, and buttons. Emphasize that non-standard uses of form elements can cause cognitive overload as well as compatibility issues with assistive technologies and adaptive strategies. -* Show examples of standard versus non-standard form elements. Explain that standard elements are generally accessible by default, and that there is little need for extra work to make them accessible at a later phase. However, use of non-standard elements generally requires additional coding to ensure these elements are usable with the keyboard and compatible with assistive technologies. +* Demonstrate the use of standard versus non-standard form elements. Explain that standard elements are generally accessible by default, and that there is little need for extra work to make them accessible at a later phase. However, use of non-standard elements generally requires additional coding to ensure these elements are usable with the keyboard and compatible with assistive technologies. #### Ideas to Assess Knowledge for Topic @@ -183,10 +183,10 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages. -* Show examples of different form elements, for example buttons, checkboxes, text boxes, and listboxes, across websites and applications. Emphasize that each should have a clear name that identifies its purpose. For reference on how to provide consistent names for different form elements across websites and applications, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). -* Show examples of required and non-required form fields. Explain that instructions about which of the fields are required should be provided using several methods, including visual and non-visual instructions. -* Present examples of time limits, such as those warning about session expirations. Explain that visual and non-visual instructions must be provided so that users are aware of the time limits, and methods must be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designer's responsibility, whereas implementing methods to stop, extend, or adjust time limits is a responsibility shared with the developer. -* Show examples of form elements that share the same purpose, for example those to provide an address. Explain that form elements that share the same purpose need clear visual and non-visual associations. +* Show examples of different form elements, including buttons, checkboxes, text boxes, and listboxes, across websites and applications. Emphasize that each should have a clear name that identifies its purpose. For reference on how to provide consistent names for different form elements across websites and applications, see technique [G197: Using labels, names, and text alternatives consistently for content that has the same functionality](https://www.w3.org/WAI/WCAG21/Techniques/general/G197). +* Demonstrate the use of several methods to provide instructions for required form fields, including color as well as visual and non-visual instructions. +* Invite students to reflect on time limits, such as those warning about session expirations. Explain that visual and non-visual instructions must be provided so that users are aware of the time limits, and methods must be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designer's responsibility, whereas implementing methods to stop, extend, or adjust time limits is a responsibility shared with the developer. +* Discuss groups of form elements that share the same purpose, for example those to provide an address. Explain that form elements that share the same purpose need clear visual and non-visual associations. * Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved. #### Ideas to Assess Knowledge for Topic @@ -227,7 +227,7 @@ Optional ideas to teach the learning outcomes: * Show examples of overall information about submission errors. Explain that this information makes users aware that their submission contains errors and help them search for specific error messages in the rest of the content. * Show effective and ineffective examples of specific messages that identify each of the fields in error. Explain that these messages help users identify and locate the specific fields that contain errors. Mention that it is best practice to keep the original submission when possible, so that users can understand what needs to be corrected. * Show effective and ineffective examples of suggestions for correction. Explain that these suggestions help users understand what the right way is to submit the form. Emphasize that these suggestions should be provided when possible, unless they compromise the security and the purpose of the form. -* Show examples of critical submissions, for example buying an airline ticket and submitting legal data. Discuss methods to reverse, check, and confirm the information included in such submissions. +* Show examples of critical submissions, including buying an airline ticket and submitting legal data. Discuss methods to reverse, check, and confirm the information included in such submissions. #### Ideas to Assess Knowledge for Topic @@ -267,9 +267,9 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of placement and appearance of notifications. Explain that these notifications must be distinguishable both visually and non-visually. Explain that defining the notifications placement and appearance is responsibility of the designer, whereas implementing such notifications is a developer's responsibility. -* Show examples of different methods to communicate notifications, such as through text messages, semantic relations, haptic and audio feedback, and popup windows. Explain that there needs to be a variety of methods available to allow interaction by different groups of users. +* Discuss different methods to communicate notifications, such as through text messages, semantic relations, haptic and audio feedback, and popup windows. Explain that there needs to be a variety of methods available to allow interaction by different groups of users. * Show examples of overlapping notifications. Explain that some users may find it daunting to process several notifications at the same time, so a method needs to be defined that allows to prioritize notifications based on their relevance. Explain that defining methods to prioritize notifications based on their relevance is a designer's responsibility, whereas implementing the methods is a developer's responsibility. -* Demonstrate examples of notification processing using assistive technologies, including screen readers and voice assistants. Explain that the notifications may come at a faster pace than the technology is able to process, so users may end up missing information. Emphasize that it is good practice to design methods to store the notifications to allow users to check the notifications at their own pace. +* Demonstrate how assistive technologies, including screen readers and voice assistants, process notifications. Explain that the notifications may come at a faster pace than the technology is able to process, so users may end up missing information. Emphasize that it is good practice to design methods to store the notifications to allow users to check the notifications at their own pace. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 55ca6ba22..fba740d8f 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -124,7 +124,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different images used to convey functionality, for example for printing, searching, or saving a document. Explain that these images need an equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). +* Demonstrate the use of images to convey functionality, for example printing, searching, or saving a document. Explain that these images need an equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). * Invite students to research the most common iconography and naming for elements such as print, save, and search. Explain that these iconography and names must be consistent throughout the website. * Refer back to [Designer Module 1 Visual Design, Topic Color](/curricula/designer-modules/visual-design/#topic-color) to explain contrast ratio requirements for functional images. @@ -167,6 +167,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of different images that convey information, such as images to provide instructions, and to identify people and objects. Explain that users who do not see the image need text alternatives to understand such information. Emphasize that these alternatives may require coordination among designers, developers, and content authors. For references on how to provide text alternatives for images, see [G82: Providing a text alternative that identifies the purpose of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G82.html). +* Refer back to [Designer Module 1 Visual Design, Topic Color](/curricula/designer-modules/visual-design/#topic-color) to explain contrast ratio requirements for informative images. * Explain that images of text present information intended to be read as text. Emphasize that sometimes it is difficult to tell visually if text has been coded as text or as an image. Coordination among designers, developers, and content authors is therefore needed to determine if the technologies in use can achieve the same desired visual presentation in a text format. Emphasize that, if an image of text is still required, there must be a text alternative that conveys the same information as the image of text. Explain that coding an image of text appropriately is a responsibility of the developer, whereas providing descriptions for images of text is a responsibility shared with the content author. * Show examples of different verification systems, such as CAPTCHA, to identify humans trying to access a service or system. Explain that these verification systems must support several modalities, including visual, auditory, and cognitive. For references on how to provide accessible CAPTCHA, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). @@ -188,7 +189,7 @@ Optional ideas to support assessment. Complex images are those whose description requires more than a short phrase or sentence. Show examples of complex images, including diagrams and charts, and explain accessibility requirements that these images have, such as appropriate contrast ratio and appropriate text descriptions. -Explain that coordination among different team members is required to assess the use of complex images based on the overall context, so that the information of such images is perceived and understood visually and through the provided descriptions. +Explain that designers must coordinate with different team members to specify the placement, operation, and functionality of complex images visually and through the provided alternatives. #### Learning Outcomes for Topic @@ -212,7 +213,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Refer back to [Designer Module 1: Visual Design, Topic: Color](/curricula/designer-modules/visual-design/#topic-color). Explain that they must have a contrast ratio of at least 3:1, as they are necessary to understand the content. For references on how to provide complex graphics that meet the required contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). +* Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Refer back to [Designer Module 1: Visual Design, Topic: Color](/curricula/designer-modules/visual-design/#topic-color). Explain that they must have a contrast ratio of at least 3:1, depending on text size and format when they are necessary to understand the content. For references on how to provide complex graphics that meet the required contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). * Explain that complex images must also have text descriptions that allow people who don’t see them to understand and interact with the image content. Explain that providing these text alternatives is a designer's responsibility, whereas providing the text descriptions is a responsibility shared with the content author. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 69872af87..87822aa8a 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -145,7 +145,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: -* Practical — Give students an eBook. Ask them to propose how it might be split into smaller and more manageable pieces to more easily navigate and understand. Assess how students use pages, landmarks, and headings with their corresponding rank levels as well as paragraphs, lists, and other structures to split large amounts of text into smaller and more manageable pieces. +* Practical — Give students an eBook. Ask them to propose how it might be split into smaller and more manageable pieces to make content easier to understand and navigate. Assess how students use pages, landmarks, and headings with their corresponding rank levels as well as paragraphs, lists, and other structures to split large amounts of text into smaller and more manageable pieces. * Practical — Give students a complex piece of text. Ask them to select diagrams and illustrations that complement the text. Assess how students select diagrams and illustrations to complement processes and instructions presented in text. * Practical — Give students diagrams and illustrations. Ask them to select descriptions to make information perceivable for people who cannot see the images. Assess how students select descriptions for diagrams and illustrations. * Practical — Give students unusual words and abbreviations. Ask them to select methods to explain such words or expand the abbreviations. Assess how students select methods to provide explanations of unusual words and expansions of abbreviations. @@ -174,7 +174,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of labels, including names for links, buttons, and form controls. Explain that these labels help users identify these components. Explain that defining the presentation of these labels is a designer's responsibility, implementing these labels is a developer's responsibility, and providing labels is a responsibility shared with the content author. -* Show examples of overall instructions, for example indications of what will happen after pressing a button. Explain that these instructions help users better understand the purpose and functionality of components. Explain that instruction presentation is a designer's responsibility, implementing these instructions is a developer's responsibility, and defining the content of these instructions is a responsibility shared with the content author. +* Show examples of overall instructions, such as indications of what will happen after pressing a button. Explain that these instructions help users better understand the purpose and functionality of components. Explain that instruction presentation is a designer's responsibility, implementing these instructions is a developer's responsibility, and defining the content of these instructions is a responsibility shared with the content author. * Show examples of multi-step processes, such as a multi-step form, with instructions to indicate the current step and total number of steps in the process. Then show examples of multi-step processes without such instructions. Compare the user experiences for each of the examples. Explain that people rely on such instructions to get an understanding of where they are in the process and how many steps the process has. Explain that defining the presentation of such instructions is a designer's responsibility, implementing these instructions is a developer's responsibility, and providing these instructions is a responsibility shared with the content author. * Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to understand and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and non-visually, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look is a designer's responsibility, whereas coding those relations is a developer's responsibility. diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index a716a2b92..468dd5711 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -95,7 +95,7 @@ Skills required for this module: * [WCAG Success Criterion 2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG21/quickref/#focus-visible) * [WCAG Success Criterion 2.5.1 Pointer Gestures](https://www.w3.org/WAI/WCAG21/quickref/#pointer-gestures) * [WCAG Success Criterion 2.5.2 Pointer Cancellation](https://www.w3.org/WAI/WCAG21/quickref/#pointer-cancellation) - * [Success Criterion 2.5.4 Motion Actuation](https://www.w3.org/WAI/WCAG21/quickref/#motion-actuation) + * [WCAG Success Criterion 2.5.4 Motion Actuation](https://www.w3.org/WAI/WCAG21/quickref/#motion-actuation) * [WCAG Success Criterion 2.5.5 Target Size]() * [WCAG Success Criterion 4.1.3 Status Messages](https://www.w3.org/WAI/WCAG21/quickref/#status-messages) * In-depth knowledge of: @@ -153,7 +153,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Invite students to try standard keyboard conventions. For example, the use of the tab to move through user interface components in a meaningful sequence, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that standard interactions must be preserved as much as possible when designing custom widgets, as users mostly expect these. -* Invite students to research keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers must collaborate with other team members, including developers and user researchers, on strategies to include custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and collaborating with developers to implement such keystrokes. For information on developing custom keyboard interfaces, see WAI-ARIA Authoring Practices [Developing a Keyboard INterface](https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard/) +* Invite students to research keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers must collaborate with other team members, including developers and user researchers, on strategies to include custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and collaborating with developers to implement such keystrokes. For information on developing custom keyboard interfaces, see WAI-ARIA Authoring Practices [Developing a Keyboard Interface](https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard/) * Present examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. * Invite students to research how assistive technologies and adaptive strategies rely on keyboard support to provide specific functionality, such as navigating sequentially using spoken commands. Demonstrate interaction with assistive technologies in web pages and applications with and without keyboard support. * Refer back to [Designer Module 1: Visual Design, Topic Orientation Cues](/curricula/designer-modules/visual-design/#topic-orientation-cues) to reflect on focus indicators. Explain that, in addition to visually distinguishable focus indicators, designers must consider programmatic keyboard focus when providing keyboard support. Emphasize that designers must collaborate with other team members, including developers and user researchers, to design user experiences that use focus placement to reflect changes of context and user interaction. @@ -164,7 +164,7 @@ Optional ideas to teach the learning outcomes: Optional ideas to assess knowledge: * Short Answer Questions — Ask students about the commonly used modifier keys in operating systems, browsers, and assistive technologies. Assess how students identify commonly used modifier keys in operating systems, browsers, and assistive technologies. -* Practical — Give students an interface that only works with the mouse and ask them to provide keyboard interaction. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. +* Practical — Give students an interface and ask them to provide its keyboard interactions. Assess how students understand the need for alternatives to mouse input and how they use standard keyboard interactions when possible. * Practical — Have students collaborate with developers to include custom keyboard shortcuts that do not conflict with existing operating system and assistive technology keystrokes. Assess how students collaborate with developers to develop strategies that avoid custom keyboard shortcut conflicts. * Practical — Give students a custom widget and ask them to define appropriate focus placement and appearance as well as meaningful sequences depending on user interaction. Assess how students create user experiences that consider visual focus indicators and focus placement as well as meaningful sequences. @@ -197,7 +197,7 @@ Optional ideas to teach the learning outcomes: * Show examples of interactions based on swipe and pinch gestures. Explain that users with mobility impairments may have difficulty to perform such gestures. Therefore, interfaces must have alternatives that do not require swiping or pinching to perform an action. * Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments may have difficulty to perform such gestures. Therefore, interfaces must have alternatives that do not require motion for these gestures. * Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events. Therefore, interfaces must support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. -* Refer back to [Designer Module 1: Visual Design, Topic Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts). Explain that larger target sizes for pointer inputs are recommended where possible. The minimum recommended size is 44 by 44 CSS pixels. +* Refer back to [Designer Module 1: Visual Design, Topic Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts). Explain that larger target sizes for pointer inputs are recommended where possible. The minimum recommended size is forty-four by forty-four CSS pixels. #### Ideas to Assess Knowledge for Topic diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index 4bc44f1fd..ccc79a887 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -132,14 +132,14 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of sufficient and insufficient contrast ratio for text. Explain that contrast ratio for text (including images of text) needs to be at least 4.5:1 with respect to their background. For references on how to apply sufficient contrast ratio to text (including images of text), see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). -* Show examples of different interactive components, such as buttons and links. Explain that they should have a contrast ratio of at least 3:1. For references on how to apply sufficient contrast ratio to interactive components, see techniques [G207: Ensuring that a contrast ratio of 3:1 is provided for icons](https://www.w3.org/WAI/WCAG21/Techniques/general/G207) and [G209: Provide sufficient contrast at the boundaries between adjoining colors](https://www.w3.org/WAI/WCAG21/Techniques/general/G209). +* Show examples of different interactive components, such as buttons and links. Explain that they must have a contrast ratio of at least 3:1. For references on how to apply sufficient contrast ratio to interactive components, see techniques [G207: Ensuring that a contrast ratio of 3:1 is provided for icons](https://www.w3.org/WAI/WCAG21/Techniques/general/G207) and [G209: Provide sufficient contrast at the boundaries between adjoining colors](https://www.w3.org/WAI/WCAG21/Techniques/general/G209). * Show examples of interfaces that convey information exclusively with differences in color, such as a form with required fields marked in red. Explain that some people perceive color in different ways, and that some may not perceive color at all. Some people may require methods different from color to understand that information. For references on how to supplement information conveyed through color, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). #### Ideas to Assess Knowledge for Topic Optional ideas to assess knowledge: -* Short Answer Questions — Give students several components and ask them what the contrast ratio should be. Assess how students understand and distinguish sufficient contrast ratio for different components. +* Short Answer Questions — Give students several components and ask them what the contrast ratio must be. Assess how students understand and distinguish sufficient contrast ratio for different components. * Practical — Have students design a prototype and apply sufficient contrast ratio to text, images of text, components, and graphics. Assess how students understand and apply sufficient contrast ratio based on the different components that they are designing. * Practical — Discuss examples of information presented using color. Ask students to supplement that information using other visual cues. Assess how students use shapes and icons to supplement information presented using color distinguishable. @@ -171,7 +171,7 @@ Optional ideas to teach the learning outcomes: * Demonstrate the use of styles to distinguish links, buttons, and form labels and instructions, from plain text. Explain how people rely on font types, font sizes, spacing, and color to distinguish components. * Show examples of usable font sizes and explain how they support readability. Contrast previous examples with fonts that are not as easy to read. Emphasize that several user groups rely on customizable fonts to read and understand content properly. -* Demonstrate the use of custom style properties to increase the contrast ratio in a web page, for example properties in user style sheets and functionality in operating systems. Explain that use of these tools affect how the page is viewed. +* Demonstrate the use of custom style properties to increase the contrast ratio in a web page, for example properties in user style sheets and functionality in operating systems. Explain that use of these tools affects how the page is viewed. * Show examples of different page layouts with and without appropriate spacing. Explain how spacing allows for better readability of the content and for better identification of the different parts of the interface. * Show examples of text aligned to the left, to the right, and justified. Explain that it is difficult for some users to read justified text due to the uneven spacing created by the justification. Therefore, text should align to only one side where possible to enhance readability. For reference, see technique [G169: Aligning Text on Only One Side](https://www.w3.org/WAI/WCAG21/Techniques/general/G169). From ee665f430dee704f19df3dc6c3a3681c326e15ce Mon Sep 17 00:00:00 2001 From: Carlos Duarte Date: Fri, 28 Jan 2022 16:15:11 +0000 Subject: [PATCH 403/416] Editorial updates for visual design module --- content/designer/visual-design.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/visual-design.md b/content/designer/visual-design.md index ccc79a887..75a20b881 100644 --- a/content/designer/visual-design.md +++ b/content/designer/visual-design.md @@ -133,7 +133,7 @@ Optional ideas to teach the learning outcomes: * Show examples of sufficient and insufficient contrast ratio for text. Explain that contrast ratio for text (including images of text) needs to be at least 4.5:1 with respect to their background. For references on how to apply sufficient contrast ratio to text (including images of text), see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). * Show examples of different interactive components, such as buttons and links. Explain that they must have a contrast ratio of at least 3:1. For references on how to apply sufficient contrast ratio to interactive components, see techniques [G207: Ensuring that a contrast ratio of 3:1 is provided for icons](https://www.w3.org/WAI/WCAG21/Techniques/general/G207) and [G209: Provide sufficient contrast at the boundaries between adjoining colors](https://www.w3.org/WAI/WCAG21/Techniques/general/G209). -* Show examples of interfaces that convey information exclusively with differences in color, such as a form with required fields marked in red. Explain that some people perceive color in different ways, and that some may not perceive color at all. Some people may require methods different from color to understand that information. For references on how to supplement information conveyed through color, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). +* Show examples of interfaces that convey information exclusively through differences in color, such as a form with required fields marked in red. Explain that some people perceive color in different ways, and that some may not perceive color at all. Some people may require methods different from color to understand that information. For references on how to supplement information conveyed through color, see technique [G182: Ensuring that additional visual cues are available when text color differences are used to convey information](https://www.w3.org/WAI/WCAG21/Techniques/general/G182.html). #### Ideas to Assess Knowledge for Topic @@ -189,7 +189,7 @@ Optional ideas to assess knowledge: {% include excol.html type="middle" %} -Explain how people with disabilities use visual and non-visual cues to orient on web pages and applications. For example, focus indicators to show interactive elements and spacing and grouping to communicate regions. Present strategies to help students incorporate early planning for such cues within the visual design phase. +Explain how people with disabilities use visual and non-visual cues to orient themselves on web pages and applications. For example, focus indicators to show interactive elements and spacing and grouping to communicate regions. Present strategies to help students incorporate early planning for such cues within the visual design phase. #### Learning Outcomes for Topic From 213e6eeb780ace488377300919c9eac89b7b2815 Mon Sep 17 00:00:00 2001 From: Carlos Duarte Date: Fri, 28 Jan 2022 16:41:35 +0000 Subject: [PATCH 404/416] Editorial updates for Information Design module --- content/designer/information-design.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/designer/information-design.md b/content/designer/information-design.md index 87822aa8a..c2a00500c 100644 --- a/content/designer/information-design.md +++ b/content/designer/information-design.md @@ -45,7 +45,7 @@ Students should be able to: * describe how to communicate the structure of multi-page articles or processes visually and non-visually * describe how to provide information about the name and purpose of user interface components using descriptive labels and instructions * discuss ways to break down information presented in tables, including the use of simple tables, lists, imagery, and plain text -* evaluate the use of several methods to convey the information, including text, labels, instructions, semantics, and imagery depending on user needs +* evaluate the use of several methods to convey information, including text, labels, instructions, semantics, and imagery depending on user needs * identify related requirements for developers to programmatically associate landmarks, headings, table header cells and data cells, as well as form labels and instructions to their corresponding control {% include excol.html type="all" %} @@ -81,8 +81,8 @@ Skills required for this module: * [WCAG Success Criterion 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) * [WCAG Success Criterion 1.3.3 Sensory Characteristics](https://www.w3.org/WAI/WCAG21/quickref/#sensory-characteristics) * [WCAG Success Criterion 1.3.5 Identify Input Purpose](https://www.w3.org/WAI/WCAG21/quickref/#identify-input-purpose) - * [WCAG 2 Success Criterion 1.4.5 Images of Text](https://www.w3.org/WAI/WCAG21/quickref/#images-of-text) - * [WCAG 2 Success Criterion 2.4.4 Link purpose (In Context)](https://www.w3.org/WAI/WCAG21/quickref/#link-purpose-in-context) + * [WCAG Success Criterion 1.4.5 Images of Text](https://www.w3.org/WAI/WCAG21/quickref/#images-of-text) + * [WCAG Success Criterion 2.4.4 Link purpose (In Context)](https://www.w3.org/WAI/WCAG21/quickref/#link-purpose-in-context) * [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) * [WCAG Success Criterion 3.1.3 Unusual Words](https://www.w3.org/WAI/WCAG21/quickref/#unusual-words) * [WCAG Success Criterion 3.1.4 Abbreviations](https://www.w3.org/WAI/WCAG21/quickref/#abbreviations) @@ -167,7 +167,7 @@ Students should be able to: * specify clear and distinguishable labels for components, including visual and programmatic names * define overall instructions to make information in multi-step processes more understandable, for example text and graphical representations * define visual and non-visual instructions to communicate the total number of steps and the current step in multi-step forms and processes -* associate controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions, and communicate such groups visually and non-visually +* associate controls that share the same purpose, such as those collecting personal information, payment methods, or consent to legal conditions, and communicate such groups visually and non-visually #### Teaching Ideas for Topic @@ -176,7 +176,7 @@ Optional ideas to teach the learning outcomes: * Show examples of labels, including names for links, buttons, and form controls. Explain that these labels help users identify these components. Explain that defining the presentation of these labels is a designer's responsibility, implementing these labels is a developer's responsibility, and providing labels is a responsibility shared with the content author. * Show examples of overall instructions, such as indications of what will happen after pressing a button. Explain that these instructions help users better understand the purpose and functionality of components. Explain that instruction presentation is a designer's responsibility, implementing these instructions is a developer's responsibility, and defining the content of these instructions is a responsibility shared with the content author. * Show examples of multi-step processes, such as a multi-step form, with instructions to indicate the current step and total number of steps in the process. Then show examples of multi-step processes without such instructions. Compare the user experiences for each of the examples. Explain that people rely on such instructions to get an understanding of where they are in the process and how many steps the process has. Explain that defining the presentation of such instructions is a designer's responsibility, implementing these instructions is a developer's responsibility, and providing these instructions is a responsibility shared with the content author. -* Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, and consent to legal conditions. Explain that grouping them is essential for some people to understand and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and non-visually, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look is a designer's responsibility, whereas coding those relations is a developer's responsibility. +* Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, or consent to legal conditions. Explain that grouping them is essential for some people to understand and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and non-visually, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look is a designer's responsibility, whereas coding those relations is a developer's responsibility. #### Ideas to Assess Knowledge for Topic @@ -201,7 +201,7 @@ Students should be able to: * identify uses of tables to present data that share a logical relationship * define table header cells and data cells, and provide clear and distinguishable styles for each -* define graphical representations of complex tables that help users more easily understand its purpose and meaning +* define graphical representations of complex tables that help users more easily understand their purpose and meaning * evaluate the use of complex tables and select simpler ways to provide the information, for example: * simpler tables * charts, diagrams, and other graphical representations From 0ade63c87bcfb43ba3d7b0d13774565d8451af70 Mon Sep 17 00:00:00 2001 From: Carlos Duarte Date: Fri, 28 Jan 2022 17:43:06 +0000 Subject: [PATCH 405/416] Editorial edits for interaction design module --- content/designer/interaction-design.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index 468dd5711..a48bdcf31 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -122,7 +122,7 @@ Topics to achieve the learning outcomes: Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain how keyboard support benefits other ways of interacting, including speech interaction and effective use of some assistive technologies. -Present examples of specific non-standard shortcuts. Explain that providing custom keyboard interactions can support efficiency but can also disrupt the users' expectations. Designers must document these custom interactions and make them consistent throughout the interface. Emphasize that defining the keyboard interactions is a designer's responsibility, whereas implementing such interactions is a responsibility shared with the developer. +Present examples of specific non-standard shortcuts. Explain that providing custom keyboard interactions can support efficiency but can also disrupt the users' expectations. Designers must document these custom interactions and make them consistent throughout the interface. Emphasize that defining keyboard interactions is a designer's responsibility, whereas implementing such interactions is a responsibility shared with the developer. #### Learning Outcomes for Topic @@ -178,7 +178,7 @@ Optional ideas to assess knowledge: Show examples of user interfaces that react to motion, such as shaking the device to perform a specific action. Explain that some people may perform these motion-based gestures inadvertently, while others may not be able to perform them at all. Present alternatives to motion-based gestures, for example providing methods to undo, abort, and reverse actions performed using complex gestures. -Discuss gestures that require dragging and drawing specific paths on a touch screen. Explain the difficulties these may present for some people with disabilities. Present approaches to using complex gestures appropriately in interaction design. +Discuss gestures that require dragging and drawing specific paths on a touch screen. Explain the difficulties these may present for some people with disabilities. Present approaches to using complex gestures appropriately. #### Learning Outcomes for Topic From 845d5d254eb5dda1ac8c7876c18c82d59cc0d38d Mon Sep 17 00:00:00 2001 From: Carlos Duarte Date: Fri, 28 Jan 2022 18:02:21 +0000 Subject: [PATCH 406/416] Editorial edits for images and graphics module --- content/designer/images-and-graphics.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index fba740d8f..766ca1e72 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -115,7 +115,7 @@ Students should be able to: * specify text alternatives for functional images using the following methods: * text alternatives for images * combinations of text alternatives for images and adjacent text inside components - * adjacent text inside components to understand its function + * adjacent text inside components to understand their function * specify consistent naming and imagery for components that have the same functionality across web pages * explain the benefits of using text labels and decorative images for functionality, instead of using images with text alternatives that are only available to some users, such as screen reader users * apply appropriate contrast ratio for functional images @@ -126,7 +126,7 @@ Optional ideas to teach the learning outcomes: * Demonstrate the use of images to convey functionality, for example printing, searching, or saving a document. Explain that these images need an equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). * Invite students to research the most common iconography and naming for elements such as print, save, and search. Explain that these iconography and names must be consistent throughout the website. -* Refer back to [Designer Module 1 Visual Design, Topic Color](/curricula/designer-modules/visual-design/#topic-color) to explain contrast ratio requirements for functional images. +* Refer back to [Designer Module 1: Visual Design, Topic Color](/curricula/designer-modules/visual-design/#topic-color) to explain contrast ratio requirements for functional images. #### Ideas to Assess Knowledge for Topic @@ -167,7 +167,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Show examples of different images that convey information, such as images to provide instructions, and to identify people and objects. Explain that users who do not see the image need text alternatives to understand such information. Emphasize that these alternatives may require coordination among designers, developers, and content authors. For references on how to provide text alternatives for images, see [G82: Providing a text alternative that identifies the purpose of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G82.html). -* Refer back to [Designer Module 1 Visual Design, Topic Color](/curricula/designer-modules/visual-design/#topic-color) to explain contrast ratio requirements for informative images. +* Refer back to [Designer Module 1: Visual Design, Topic Color](/curricula/designer-modules/visual-design/#topic-color) to explain contrast ratio requirements for informative images. * Explain that images of text present information intended to be read as text. Emphasize that sometimes it is difficult to tell visually if text has been coded as text or as an image. Coordination among designers, developers, and content authors is therefore needed to determine if the technologies in use can achieve the same desired visual presentation in a text format. Emphasize that, if an image of text is still required, there must be a text alternative that conveys the same information as the image of text. Explain that coding an image of text appropriately is a responsibility of the developer, whereas providing descriptions for images of text is a responsibility shared with the content author. * Show examples of different verification systems, such as CAPTCHA, to identify humans trying to access a service or system. Explain that these verification systems must support several modalities, including visual, auditory, and cognitive. For references on how to provide accessible CAPTCHA, see technique [G143: Providing a text alternative that describes the purpose of the CAPTCHA](https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html) and [G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality](https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html). @@ -204,7 +204,7 @@ Students should be able to: * design user experiences for complex images, including: * how to get to the image descriptions * what the descriptions should look like - * if the descriptions are equivalent to the information provided in the image + * ensuring the descriptions are equivalent to the information provided in the image * identify related requirements for content authors to: * provide descriptive, equivalent textual information to understand complex images and graphics, including diagrams, charts, maps, and infographics * break down complex images into smaller and more manageable pieces, for example simpler images, tables, and plain text @@ -213,7 +213,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Refer back to [Designer Module 1: Visual Design, Topic: Color](/curricula/designer-modules/visual-design/#topic-color). Explain that they must have a contrast ratio of at least 3:1, depending on text size and format when they are necessary to understand the content. For references on how to provide complex graphics that meet the required contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). +* Provide examples of complex images and graphics, such as charts, diagrams, maps, and infographics. Refer back to [Designer Module 1: Visual Design, Topic Color](/curricula/designer-modules/visual-design/#topic-color). Explain that they must have a contrast ratio of at least 3:1, depending on text size and format when they are necessary to understand the content. For references on how to provide complex graphics that meet the required contrast ratio, see technique [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html). * Explain that complex images must also have text descriptions that allow people who don’t see them to understand and interact with the image content. Explain that providing these text alternatives is a designer's responsibility, whereas providing the text descriptions is a responsibility shared with the content author. #### Ideas to Assess Knowledge for Topic @@ -248,7 +248,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of images and graphics that do not convey function or information, such as ornamental icons. Explain that they serve ornamental purposes as long as people can understand and interact with the user interface with or without such icons. Explain that deciding what is the images' role is a designer's responsibility, whereas coding the images so that they render with the appropriate role is a developer's responsibility. +* Show examples of images and graphics that do not convey function or information, such as ornamental icons. Explain that they serve ornamental purposes as long as people can understand and interact with the user interface with or without such icons. Explain that deciding what are the images' role is a designer's responsibility, whereas coding the images so that they render with the appropriate role is a developer's responsibility. * Invite students to research how overuse of decorative images can impact some users. For example, too many decorative images can create distractions and cognitive overload, as well as slow down loading times. #### Ideas to Assess Knowledge for Topic @@ -267,7 +267,7 @@ Optional ideas to assess knowledge: Optional ideas to assess knowledge: * Short Answer Questions — Ask students which types of images require which contrast ratio. Assess how students understand the different types of images and their requirements for contrast ratio. -* Portfolio — Have students design the imagery for a website. Assess how students include accessibility requirements in the images in graphics they design, for example contrast ratio, text alternatives that belong to the design phase, and placeholders for any other text alternative that is planned for later stages of the design and development process. +* Portfolio — Have students design the imagery for a website. Assess how students include accessibility requirements in the images and graphics they design, for example contrast ratio, text alternatives that belong to the design phase, and placeholders for any other text alternative that is planned for later stages of the design and development process. ## Teaching Resources From da5525088edf99f3d010982971e4db6c25fc6278 Mon Sep 17 00:00:00 2001 From: Carlos Duarte Date: Fri, 28 Jan 2022 18:38:51 +0000 Subject: [PATCH 407/416] Editorial edits for design forms module --- content/designer/forms-design.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 4918c21fc..3f20432f1 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -162,7 +162,7 @@ Optional ideas to support assessment: {% include excol.html type="middle" %} -Refer back to [Designer Module 2: Information Design, Topic: Naming and Grouping](/curricula/designer-modules/information-design/#topic-naming-and-grouping). Show examples of labels and instructions in the context of forms. +Refer back to [Designer Module 2: Information Design, Topic Naming and Grouping](/curricula/designer-modules/information-design/#topic-naming-and-grouping). Show examples of labels and instructions in the context of forms. #### Learning outcomes for Topic @@ -235,7 +235,7 @@ Optional ideas to assess knowledge: * Practical — Give students an interface containing errors and ask them to provide an overall descriptive message informing that there are submission errors. Assess how students provide overall informative messages when there are submission errors * Practical — Give students a form field submission containing errors and ask them to provide messages about each of the wrongly submitted fields. Assess how students provide appropriate error messages for wrongly submitted fields and how they provide suggestions for correction when possible. -* Practical — Give students a form field submission containing errors and ask them to provide suggestion for correction when possible. Assess how students provide suggestion for correction. +* Practical — Give students a form field submission containing errors and ask them to provide suggestions for correction when possible. Assess how students provide suggestions for correction. * Practical — Give students a form submission containing legal data and ask them to provide methods to reverse, check, and confirm that submission. Assess how students understand the need for methods to reverse, check, and confirm critical submissions. {% include excol.html type="end" %} From 708f7579b40e6c67abf13f154b7ddbd51c364174 Mon Sep 17 00:00:00 2001 From: Carlos Duarte Date: Mon, 31 Jan 2022 09:25:58 +0000 Subject: [PATCH 408/416] Fix link in markdown file (#448) --- content/designer/forms-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 4918c21fc..b41644559 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -102,7 +102,7 @@ Skills required for this module: * [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) * [WCAG Success Criterion 2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG21/quickref/#focus-visible) * [WCAG Success Criterion 3.3.1 Error Identification](https://www.w3.org/WAI/WCAG21/quickref/#error-identification) - * [WCAG Success Criterion 3.3.2 Labels and Instructions]()https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions + * [WCAG Success Criterion 3.3.2 Labels and Instructions](https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions) * [WCAG Success Criterion 3.3.3 Error Suggestion](https://www.w3.org/WAI/WCAG21/quickref/#error-suggestion) * [WCAG Success Criterion 3.3.4 Error Prevention](https://www.w3.org/WAI/WCAG21/quickref/#error-prevention-legal-financial-data) * [WCAG Success Criterion 4.1.3 Status Messages](https://www.w3.org/WAI/WCAG21/quickref/#status-messages) From 5f0bcddcfbd5d132240541ad87dea0260f0cbb63 Mon Sep 17 00:00:00 2001 From: Carlos Duarte Date: Mon, 31 Jan 2022 10:27:51 +0000 Subject: [PATCH 409/416] Update navigation-design.md (#444) --- content/designer/navigation-design.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index ccd7a80d3..03b02febc 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -85,12 +85,12 @@ Skills required for this module: * [WCAG Success Criterion 1.3.2 Meaningful Sequence](https://www.w3.org/WAI/WCAG21/quickref/#meaningful-sequence) * [WCAG Success Criterion 2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/quickref/#keyboard) * [WCAG Success Criterion 2.1.2 No Keyboard Trap](https://www.w3.org/WAI/WCAG21/quickref/#no-keyboard-trap) - * [WCAG 2 Success Criterion 2.4.1 Bypass Blocks](https://www.w3.org/WAI/WCAG21/quickref/#bypass-blocks) + * [WCAG Success Criterion 2.4.1 Bypass Blocks](https://www.w3.org/WAI/WCAG21/quickref/#bypass-blocks) * [WCAG Success Criterion 2.4.2 Page Titled](https://www.w3.org/WAI/WCAG21/quickref/#page-titled) - * [WCAG 2 Success Criterion 2.4.5 Multiple Ways](https://www.w3.org/WAI/WCAG21/quickref/#multiple-ways) + * [WCAG Success Criterion 2.4.5 Multiple Ways](https://www.w3.org/WAI/WCAG21/quickref/#multiple-ways) * [WCAG Success Criterion 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) - * [WCAG 2 Success Criterion 2.4.8 Location](https://www.w3.org/WAI/WCAG21/quickref/#location) - * [WCAG 2 Success Criterion 3.2.3 Consistent Navigation](https://www.w3.org/WAI/WCAG21/quickref/#consistent-navigation) + * [WCAG Success Criterion 2.4.8 Location](https://www.w3.org/WAI/WCAG21/quickref/#location) + * [WCAG Success Criterion 3.2.3 Consistent Navigation](https://www.w3.org/WAI/WCAG21/quickref/#consistent-navigation) * [WCAG Success Criterion 3.2.4 Consistent Identification](https://www.w3.org/WAI/WCAG21/quickref/#consistent-identification) * In-depth knowledge of: * [Foundation Prerequisites](/curricula/designer-modules/#foundation-prerequisites) From 76b370d6068d12a03f460789bda530509d114f1e Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 31 Jan 2022 11:35:46 +0100 Subject: [PATCH 410/416] Changed apostrophe position --- content/designer/interaction-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index a48bdcf31..b56fa78fb 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -122,7 +122,7 @@ Topics to achieve the learning outcomes: Demonstrate standard keyboard interactions, for example the use of the tab, enter, escape, and arrow keys. Explain how keyboard support benefits other ways of interacting, including speech interaction and effective use of some assistive technologies. -Present examples of specific non-standard shortcuts. Explain that providing custom keyboard interactions can support efficiency but can also disrupt the users' expectations. Designers must document these custom interactions and make them consistent throughout the interface. Emphasize that defining keyboard interactions is a designer's responsibility, whereas implementing such interactions is a responsibility shared with the developer. +Present examples of specific non-standard shortcuts. Explain that providing custom keyboard interactions can support efficiency but can also disrupt the user's expectations. Designers must document these custom interactions and make them consistent throughout the interface. Emphasize that defining keyboard interactions is a designer's responsibility, whereas implementing such interactions is a responsibility shared with the developer. #### Learning Outcomes for Topic From bb9a6847d526f0390f0fa6d1b102cfb11f11f5a2 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Mon, 31 Jan 2022 12:17:04 +0100 Subject: [PATCH 411/416] Fixes #443 --- content/designer/navigation-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/navigation-design.md b/content/designer/navigation-design.md index 03b02febc..47a233bc7 100644 --- a/content/designer/navigation-design.md +++ b/content/designer/navigation-design.md @@ -148,7 +148,7 @@ Optional ideas to assess knowledge: * Practical — Have students define mouse, keyboard, touch, and speech interactions for navigation menus. For example, how to open, navigate, activate, and close such menus using the mouse, keyboard, touch, and speech. Assess how students understand the need for different interaction patterns based on the input method in use. * Practical — Give students different navigation menu states, such as hover, focus, current, active, and visited, and ask them to provide visual and non-visual methods to distinguish them from one another. Assess how students communicate navigation menus and menu items states visually and non-visually. -* Practical — Give students a navigation menu and ask them to provide visual and non-visual indications about the currently selected item. Assess how students provide appropriate indications about the page location with respect to the entire website. +* Practical — Give students a navigation menu and ask them to provide visual and non-visual indications about the currently selected item. Assess how students provide appropriate indications about the currently selected item. * Practical — Give students navigation menus containing long strings of text. Ask them to ensure the text is displayed irrespective of the viewport and screen configuration used. Assess how students understand the diversity among different languages, viewports, and screen configurations. {% include excol.html type="end" %} From ea693595ffc724124f3a6d420e86c6644a025ce8 Mon Sep 17 00:00:00 2001 From: David Sloan Date: Wed, 2 Feb 2022 07:58:31 +0000 Subject: [PATCH 412/416] Minor copy edits (#451) --- content/designer/interaction-design.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/designer/interaction-design.md b/content/designer/interaction-design.md index b56fa78fb..1e23301ba 100644 --- a/content/designer/interaction-design.md +++ b/content/designer/interaction-design.md @@ -152,7 +152,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Invite students to try standard keyboard conventions. For example, the use of the tab to move through user interface components in a meaningful sequence, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that standard interactions must be preserved as much as possible when designing custom widgets, as users mostly expect these. +* Invite students to try standard keyboard conventions. For example, the use of the tab key to move through user interface components in a meaningful sequence, use of the arrow keys to move through list items, and use of the enter key to select an item. Explain that standard interactions must be preserved as much as possible when designing custom widgets, as users mostly expect these. * Invite students to research keystrokes that are not part of standard keyboard interactions. For example, letter keys together with modifier keys to perform specific actions. Explain that designers must collaborate with other team members, including developers and user researchers, on strategies to include custom keyboard shortcuts. This includes researching commonly used keystrokes for complex interaction patterns, defining the keystrokes in the design phase, and collaborating with developers to implement such keystrokes. For information on developing custom keyboard interfaces, see WAI-ARIA Authoring Practices [Developing a Keyboard Interface](https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard/) * Present examples of keyboard shortcuts that may conflict with browsers, operating systems, and assistive technologies. For example, modifier keys and single letter keys that are used by browsers and assistive technologies to provide built-in functionality. Explain that these keystrokes should be avoided when possible. * Invite students to research how assistive technologies and adaptive strategies rely on keyboard support to provide specific functionality, such as navigating sequentially using spoken commands. Demonstrate interaction with assistive technologies in web pages and applications with and without keyboard support. @@ -194,8 +194,8 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of interactions based on swipe and pinch gestures. Explain that users with mobility impairments may have difficulty to perform such gestures. Therefore, interfaces must have alternatives that do not require swiping or pinching to perform an action. -* Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments may have difficulty to perform such gestures. Therefore, interfaces must have alternatives that do not require motion for these gestures. +* Show examples of interactions based on swipe and pinch gestures. Explain that users with mobility impairments may have difficulty performing such gestures. Therefore, interfaces must have alternatives that do not require swiping or pinching to perform an action. +* Show examples of gestures that require motion, such as shaking the device, to perform an action. Explain that users with mobility impairments may have difficulty performing such gestures. Therefore, interfaces must have alternatives that do not require motion for these gestures. * Show examples of operations carried out using path-based gestures, such as dragging. Explain that people with mobility impairments may inadvertently initiate touch or mouse events. Therefore, interfaces must support alternatives for people to perform actions associated with multi-pointer gestures or to undo actions carried out inadvertently with multi-pointer gestures. * Refer back to [Designer Module 1: Visual Design, Topic Flexible Layouts](/curricula/designer-modules/visual-design/#topic-flexible-layouts). Explain that larger target sizes for pointer inputs are recommended where possible. The minimum recommended size is forty-four by forty-four CSS pixels. @@ -229,4 +229,4 @@ Suggested resources to support your teaching: * [Large Links, Buttons, and Controls (Web Accessibility Perspectives)](/perspective-videos/controls/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [Notifications and Feedback (Web Accessibility Perspectives)](https://www.w3.org/WAI/perspective-videos/notifications/) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities. * [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) — Address accessibility of web content on desktops, laptops, tablets, and mobile devices. -* [](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex) — Demonstrates how to make common rich internet application patterns and widgets accessible by applying WAI-ARIA roles, states, and properties and implementing keyboard support. \ No newline at end of file +* [](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex) — Demonstrates how to make common rich internet application patterns and widgets accessible by applying WAI-ARIA roles, states, and properties and implementing keyboard support. From 325c387660614c719c429a3667cef610c6b5e96f Mon Sep 17 00:00:00 2001 From: David Sloan Date: Wed, 2 Feb 2022 10:17:43 +0000 Subject: [PATCH 413/416] [ED-Med] Edit to guidance on functional image text alternatives (#452) * Update images-and-graphics.md This suggested edit attempts to underline the importance of avoiding including a component's role (e.g. button or link) in its text alternative, as this is already communicated to AT through the component's element or role attribute value, and repeating it in the text alternative would duplicate role information. * Added info in teaching idea * Update content/designer/images-and-graphics.md * Update content/designer/images-and-graphics.md Co-authored-by: daniel-montalvo Co-authored-by: daniel-montalvo <49305434+daniel-montalvo@users.noreply.github.com> --- content/designer/images-and-graphics.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 766ca1e72..219b45f04 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -124,7 +124,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Demonstrate the use of images to convey functionality, for example printing, searching, or saving a document. Explain that these images need an equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). +* Demonstrate the use of images to convey functionality, for example printing, searching, or saving a document. Explain that these images need an equivalent, succinct text alternative that explains the function rather than a description of the image. Emphasize that text alternatives must not include the component's role, for example "image", "link", or "button". The role will be announced by assistive technologies when conveyed programmatically in the implementation phase. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). * Invite students to research the most common iconography and naming for elements such as print, save, and search. Explain that these iconography and names must be consistent throughout the website. * Refer back to [Designer Module 1: Visual Design, Topic Color](/curricula/designer-modules/visual-design/#topic-color) to explain contrast ratio requirements for functional images. From 3252dd9a85c78ae5e592f5c0942d8e640129ea89 Mon Sep 17 00:00:00 2001 From: daniel-montalvo <49305434+daniel-montalvo@users.noreply.github.com> Date: Wed, 2 Feb 2022 11:38:23 +0100 Subject: [PATCH 414/416] Checkboxes (#454) * Checkboxes * Checkboxes --- content/designer/forms-design.md | 6 +++--- content/developer/forms.md | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/content/designer/forms-design.md b/content/designer/forms-design.md index 1f1beb7c2..c1226923c 100644 --- a/content/designer/forms-design.md +++ b/content/designer/forms-design.md @@ -128,13 +128,13 @@ Topics to achieve the learning outcomes: {% include excol.html type="middle" %} -Explore different form elements and their purpose, including edit boxes, check boxes, radio buttons, and buttons. Explain standard versus non-standard uses of form elements (for example using read-only edit boxes when expecting text input) and how non-standard uses of form elements impacts accessibility. +Explore different form elements and their purpose, including edit boxes, checkboxes, radio buttons, and buttons. Explain standard versus non-standard uses of form elements (for example using read-only edit boxes when expecting text input) and how non-standard uses of form elements impacts accessibility. #### Learning Outcomes for Topic Students should be able to: -* identify the purposes of form elements, including edit boxes, check boxes, radio buttons, and buttons +* identify the purposes of form elements, including edit boxes, checkboxes, radio buttons, and buttons * describe how non-standard uses of form elements can cause compatibility issues and cognitive overload * evaluate the use of standard versus non-standard form elements * select form elements that minimize extra work to make them accessible in the implementation phase @@ -144,7 +144,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Show examples of different form elements and reflect on their purposes. For example, edit boxes, check boxes, radio buttons, and buttons. Emphasize that non-standard uses of form elements can cause cognitive overload as well as compatibility issues with assistive technologies and adaptive strategies. +* Show examples of different form elements and reflect on their purposes. For example, edit boxes, checkboxes, radio buttons, and buttons. Emphasize that non-standard uses of form elements can cause cognitive overload as well as compatibility issues with assistive technologies and adaptive strategies. * Demonstrate the use of standard versus non-standard form elements. Explain that standard elements are generally accessible by default, and that there is little need for extra work to make them accessible at a later phase. However, use of non-standard elements generally requires additional coding to ensure these elements are usable with the keyboard and compatible with assistive technologies. #### Ideas to Assess Knowledge for Topic diff --git a/content/developer/forms.md b/content/developer/forms.md index 373201889..fef1f6449 100644 --- a/content/developer/forms.md +++ b/content/developer/forms.md @@ -126,7 +126,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: * Provide examples of explicit and implicit associations using the `label` element. Explain that an implicit association can be achieved by wrapping the `label` element and its content around the form control. Explain explicit associations by means of the `for` attribute and indicate that its value must be a unique identifier of the form control that the label refers to. Explain the use of other explicit associations using the HTML attribute `title`, the WAI-ARIA attributes `aria-label` and `aria-labelledby`. Explain that use of `placeholder` for labels should be avoided as its value disappears once the user has entered a value. Examples of how to label form controls are provided in the WAI tutorials on [Labeling controls](https://www.w3.org/WAI/tutorials/forms/labels/). -* Show examples of form controls that are related to each other, such as check boxes and radio buttons to select possible answers for a given question. Mention that the `fieldset` element is used to group them all, and that the `legend` element provides the label they share. Examples of how to group form controls are provided in the WAI tutorials on [Grouping controls](https://www.w3.org/WAI/tutorials/forms/grouping/). +* Show examples of form controls that are related to each other, such as checkboxes and radio buttons to select possible answers for a given question. Mention that the `fieldset` element is used to group them all, and that the `legend` element provides the label they share. Examples of how to group form controls are provided in the WAI tutorials on [Grouping controls](https://www.w3.org/WAI/tutorials/forms/grouping/). * Invite students to navigate form controls using the keyboard only. Demonstrate the use of the tab key to move through different form controls. Demonstrate the use of the arrow keys to select options from combo boxes and lists. * Demonstrate the use of voice commands, keystrokes, and gestures provided by assistive technologies and adaptive strategies to navigate through form controls. Explore advanced functionality that some tools provide, such as presenting all form controls in a list where users can select the form control they are interested in. Examples of how people with disabilities interact with the Web are provided in [How People with Disabilities Use the Web](https://www.w3.org/WAI/people-use-web/). * Demonstrate how people with mobility impairments or with low vision can click the label element to activate a specific form control if both are associated with each other. From 3111ae302c0eb6198b31d90158877266ad249ea5 Mon Sep 17 00:00:00 2001 From: daniel-montalvo <49305434+daniel-montalvo@users.noreply.github.com> Date: Wed, 2 Feb 2022 11:40:58 +0100 Subject: [PATCH 415/416] Adds "content" (#453) --- content/designer/multimedia-and-animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/multimedia-and-animations.md b/content/designer/multimedia-and-animations.md index 8a1dee374..b7a84d47c 100644 --- a/content/designer/multimedia-and-animations.md +++ b/content/designer/multimedia-and-animations.md @@ -160,7 +160,7 @@ Optional ideas to assess knowledge: Discuss different types of moving content, including carousels and animations. Present methods to avoid seizures, physical reactions, distractions, and unpredictable keyboard focus management caused by moving content. For example, support for pausing, stopping, or hiding moving content, as well as minimizing blinking and flashing. -**Caution**: Do not show blinking or flashing that can cause seizures. Moving content can cause nausea and other reactions. If you choose to show examples, give students enough time to privately opt out of seeing the content. +**Caution**: Do not show blinking or flashing content that can cause seizures. Moving content can cause nausea and other reactions. If you choose to show examples, give students enough time to privately opt out of seeing the content. #### Learning Outcomes for Topic From 0e37a66dc9107c2c1edbfd2563941583c013bb3a Mon Sep 17 00:00:00 2001 From: daniel-montalvo <49305434+daniel-montalvo@users.noreply.github.com> Date: Wed, 2 Feb 2022 17:09:56 +0100 Subject: [PATCH 416/416] Revert "[ED-Med] Edit to guidance on functional image text alternatives (#452)" (#458) This reverts commit 325c387660614c719c429a3667cef610c6b5e96f. --- content/designer/images-and-graphics.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/designer/images-and-graphics.md b/content/designer/images-and-graphics.md index 219b45f04..766ca1e72 100644 --- a/content/designer/images-and-graphics.md +++ b/content/designer/images-and-graphics.md @@ -124,7 +124,7 @@ Students should be able to: Optional ideas to teach the learning outcomes: -* Demonstrate the use of images to convey functionality, for example printing, searching, or saving a document. Explain that these images need an equivalent, succinct text alternative that explains the function rather than a description of the image. Emphasize that text alternatives must not include the component's role, for example "image", "link", or "button". The role will be announced by assistive technologies when conveyed programmatically in the implementation phase. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). +* Demonstrate the use of images to convey functionality, for example printing, searching, or saving a document. Explain that these images need an equivalent, succinct text alternative that explains the function rather than a description of the image. For reference on how to provide a text alternative for an image conveying function, see technique [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html). * Invite students to research the most common iconography and naming for elements such as print, save, and search. Explain that these iconography and names must be consistent throughout the website. * Refer back to [Designer Module 1: Visual Design, Topic Color](/curricula/designer-modules/visual-design/#topic-color) to explain contrast ratio requirements for functional images.