Showcase Examples with Videos/Scenario Descriptions

The following scenario descriptions outline the example stories to be developed. Please refer to Showcase Examples with Videos/Requirements Analysis for more background.

Video Captions

Use the increased use of videos as an argument to highlight the relevance of this topic. Emphasize that video content can be beneficial to accessibility, when it is implemented correctly. Explain the need for captioning for people with hearing impairments. Describe the complementary benefits for others, especially for people with lower language skills, people in loud environments, people is silent environments, and for privacy.

Outline

[Cuts of websites with embedded videos playing]
Narration: today the web is full of video and multimedia content
[View of an instructional video playing]
Narration: videos are useful, for example for providing instructions
[Someone watching instructional video playing]
Narration: for example, for people with some forms of learning disabilities
[Close-up on the computer speakers to denote audio]
Narration: but many people with hearing impairments cannot hear the sounds
[Video playing with captions clearly visible]
Narration: captions are needed to make multimedia content accessible
[Loud environment (bar, airport, ...) with captioned video playing on a screen]
Narration: but they also make video usable in loud environments
[Silent environment (library, train, ...) with captioned video playing on a screen]
Narration: and also in silent environments and for privacy
[Someone watching instructional video with captions playing]
Narration: also for non-fluent speakers and for many more
[Cuts of websites with embedded videos playing]
Narration: provide captions for all your multimedia content
Narration: visit w3.org/WAI for more tips and information

Comments

Comment: I think video needs to start with close up of person watching embedded videos playing on a website {James 12 Oct}
+1 to James, then possibly pan out to a loud environment, quiet environment, for example? {Kevin, 13 Oct}

Disabilities Highlighted

People with hearing disabilities
People with cognitive disabilities

Benefits Highlighted

Accessibility for people with hearing disabilities
Accessibility for people with cognitive disabilities
People in loud and silent environments
People with lower language skills

Requirements Highlighted

[WCAG 2.0] 1.2.2 Captions (Prerecorded)
[WCAG 2.0] 1.2.4 Captions (Live)

Color Contrast

Relate the issue to the personal experience of the reader/viewer, as most will have encountered a situation of illegible text. Emphasize that good choice of colors is good practice in addition to an accessibility requirement. Use the statistic "1 in 12 adult males" and age-related visual limitations to counter the myth that it is only about a small group of people impacted. Explain the additional benefits, especially for mobile use.

Outline

[Visually appealing website with crisp colors (emphasis on text)]
Narration: good web design includes sufficient contrast to make it more readable
[View of links, icons, buttons, and other website elements]
Narration: this includes text but also links, icons, buttons, and other elements
[Close-up of text that is difficult to read due to color contrast]
Narration: yet too many website use colors that make text too difficult to read
[Website appears without color tones to illustrate color perception limitations]
Narration: this is especially problematic for people with color perception limitations
[View of large office space with many people in front of computers]
Narration: which includes approximately 1 in 12 adult males in your target audience
[Older female person (to contrast previous males) using a computer]
Narration: also people with age-related vision deterioration are impacted
[Visually appealing website being displayed on a mobile phone]
Narration: good colors also makes your website easier to use in more situations
[View of sun glare on the mobile phone]
Narration: especially in situations with different lighting conditions
[Visually appealing website with crisp colors (emphasis on text)]
Narration: provide sufficient color contrast for all text displayed
Narration: visit w3.org/WAI for more tips and information

Comments

Comment: "links, icons, buttons, and other elements" ...would not use generic "other elements." Be specific or eliminate {Sharron 11 Oct}
Comment: "too many website....too difficult" - suggest dropping the second "too." {Sharron 11 Oct}
Comment: suggest including a person enjoying said website in the first scene. {James 12 Oct}
This seems to jump right into the detail of what it is rather than the value. I wonder if it would be feasible to start with more of the scenarios to outline the impact on people before talking about links and buttons and things {Kevin, 13 Oct}
+1 to Kevin, I’d also use jargon only at the end, having sufficient contrast is bringing up more question than it answers. {Eric, 13 Oct}

Disabilities Highlighted

People with color perception limitations

Benefits Highlighted

Accessibility for people with color perception limitations
More adaptable to different computer displays
More adaptable to different lighting conditions

Requirements Highlighted

[WCAG 2.0] 1.4.1 Use of Color
[WCAG 2.0] 1.4.3 Contrast (Minimum)
[WCAG 2.0] 1.4.6 Contrast (Enhanced)

Voice Recognition

Demonstrate the broad variety of use cases for voice recognition and its increased deployment, especially in mobile devices. Connect this to the need for people with physical disabilities, and emphasize the face they people rely on this technology. Also highlight the complementary benefits, for example for repetitive stress injury, broken arm, and possibly others. Emphasize that this is mostly a matter of proper coding and include some examples of what that means. Reiterate that such proper coding benefits many users.

Outline

[Person dictating text to a computer, driver using voice commands, etc.]
Narration: voice recognition is being increasingly used for computer interaction
Narration: for example to dictate text, control your car navigation system, and more
[Person with a physical disability using the computer through voice]
Narration: people with physical disabilities have been relying on this technology for years
[Person without visible disability using the computer through voice]
Narration: also people with repetitive stress injury who cannot type for long benefit
[Person with cast around the arm using the computer through voice]
Narration: and people with temporary situational limitations, such as a broken arm
[Illustrative view of web page code (maybe pages of code scrolling by)]
Narration: your website needs to be properly coded for these people to use it
[Illustrative view of forms, buttons, and other interactive components]
Narration: this includes providing labels, visible focus, and keyboard compatibility
[Person dictating text to a computer, driver using voice commands, etc.]
Narration: properly marking up your content allows voice recognition users to use your website
Narration: visit w3.org/WAI for more tips and information

Comments

Comment: "for example to dictate text, control your car navigation system, and more." Would omit "and more" to be specific or not mention.{Sharron 11 Oct}
Comment: "also people with repetitive stress injury who cannot type for long benefit" Suggest change to "there are benefits as well for people with repetitive stress injury who cannot type for long." {Sharron 11 Oct}
General comment: Actually, I think this is beyond wordsmithing - I don't think this scenario is making the point clearly, there is too much jargon. The tasks need to be broken down in more civilian language, will work on an alternative suggestion. {Sharron 11 Oct}
Comment: I don't like the "illustrative views" or the "you need to..." language in this scenario, it takes the viewer out of the personal connection with people and makes it seem like an instructional video. To maintain connection and empathy, I'd keep all shots live action video (with people if possible) and remove "you need to..." language. Our objectives as described in Showcase Requirements Page, are to make a11y tangible, raise empathy, illustrate features, demonstrate benefits, and show example of technology, NOT tell people what they need to do. {James 12 Oct}
- +1 to remove the instructional video tone {Kevin, 13 Oct}
- +1, and I think the first few use cases could even be without narration (it would need to be in the AD version, of course) {Eric, 13 Oct}
"Illustrative view of web page code (maybe pages of code scrolling by)]" - the Fix the Web video has a good example of how to do this without getting too geeky! {Kevin, 13 Oct}

Disabilities Highlighted

People with physical disabilities
People with repetitive stress injury

Benefits Highlighted

Accessibility for people with physical disabilities
Accessibility for people with repetitive stress injury
People with temporary physical limitations (eg. broken arm)
People using hands-free computing (eg. car navigation systems)
People who are just more comfortable using voice

Requirements Highlighted

[WCAG 2.0] 1.1.1 Non-text Content
[WCAG 2.0] 1.3.1 Info and Relationships
[WCAG 2.0] 2.1.1 Keyboard
[WCAG 2.0] 2.1.3 Keyboard (No Exception)
[WCAG 2.0] 2.4.7 Focus Visible

Note: Several other WCAG 2.0 requirements relate to voice recognition but are not highlighted in this example.

Text to Speech

Demonstrate the broad variety of use cases for text to speech and its increased deployment, especially in mobile devices. Connect this to the need for people with different disabilities, and emphasize the face they people rely on this technology. Also highlight the complementary benefits, for example for people wanting to listen rather than and people with low literacy. Emphasize that this is mostly a matter of proper coding and include some examples of what that means. Reiterate that such proper coding benefits many users.

Outline

[Person listening to audio (on a tablet) with highlighted words being read aloud]
Narration: text to speech allows your website to be read out loud to your users
[Person with blindness using braille, with screen-reader software visible]
Narration: people with visual disabilities have been relying on this technology for years
[Person using screen magnification with text to speech enabled]
Narration: this includes people with low vision who have difficulty reading text
[Person without visible disability using text to speech with word highlighting]
Narration: also people with dyslexia who need to see and hear the information benefit
[Person without visible disability listening to text to speech output]
Narration: as well as people with low literacy who have difficulty reading text
[Illustrative view of web page code (maybe pages of code scrolling by)]
Narration: your website needs to be properly coded for these people to use it
[Illustrative view of headings, navigation bars, and other page components]
Narration: this includes properly marking up headings, navigation, and other page areas
[Illustrative view of search engine results (maybe many scrolling by)]
Narration: which also helps search engines to better index your website contents
[Person listening to website (email) on a mobile phone with earplugs on a train]
Narration: provide text alternatives to allow more users to use your website
Narration: visit w3.org/WAI for more tips and information

Comments

Do not begin with a technical phrase like "text to speech." Rather, say something like "Many people turn on automated readers that will read onscreen text out loud to them..." {Sharron 11 Oct}
this construction: "...also people with dyslexia who need to see and hear the information benefit." is awkward, as mentioned above. By the time you get to the "benefit" you have left the "people with dyslexia" far behind because the qualifying information is in between. Simplify the phrase and make it direct. {Sharron 11 Oct}
The audience as described in the Showcase Requirements Page is a general audience. Talking about marking-up content will not resonate with them. The language here must be much less technical and/or more explanatory. {Sharron 11 Oct}
Comment: I agree with Sharon about being too technical in this one, I don't like the "illustrative views" or the "you need to..." language in this scenario, it takes the viewer out of the personal connection with people and makes it seem like an instructional video. To maintain connection and empathy, I'd keep all shots live action video (with people if possible) and remove "you need to..." language. Our objectives as described in Showcase Requirements Page, are to make a11y tangible, raise empathy, illustrate features, demonstrate benefits, and show example of technology, NOT tell people what they need to do. {James 12 Oct}
'and emphasize the face they people rely on this technology' in introduction - not sure what this means {Kevin, 13 Oct}
This one is really, really confusing. I agree with all what the comments before say. I’d love to see this more people-focused and less technology-focused {Eric, 13 Oct}

Disabilities Highlighted

People with visual disabilities
People with certain forms of dyslexia

Benefits Highlighted

Accessibility for people with visual disabilities
Accessibility for people with certain forms of dyslexia
People with low literacy
Search engine optimization
People using hands-free computing (eg. car navigation systems)
People who are just more comfortable listening rather than reading

Requirements Highlighted

[WCAG 2.0] 1.1.1 Non-text Content
[WCAG 2.0] 1.3.1 Info and Relationships
[WCAG 2.0] 1.3.3 Sensory Characteristics
[WCAG 2.0] 2.4.2 Page Titled
[WCAG 2.0] 2.4.4 Link Purpose (In Context)
[WCAG 2.0] 2.4.6 Headings and Labels
[WCAG 2.0] 2.4.8 Location
[WCAG 2.0] 2.4.9 Link Purpose (Link Only)
[WCAG 2.0] 2.4.10 Section Headings
[WCAG 2.0] 3.1.1 Language of Page

Note: Several other WCAG 2.0 requirements relate to text to speech but are not highlighted in this example.

Layout and Design

Relate the issue to the personal experience of the reader/viewer, as most will have encountered a situation of convoluted layouts. Emphasize that good layout and design is good practice in addition to an accessibility requirement. Also highlight the complementary benefits, for example for people using mobile devices and people in a hurry. Include some examples of what good layout and design entails.

Outline

[Visually appealing website with generous layout (emphasis on layout)]
Narration: good web design includes generous layout and good indication of items
[View of headings, navigation bars, and other page components]
Narration: this includes use of headings, white space, and consistent styling
[Illustrative view of convoluted website with complex layout and content]
Narration: yet too many website have complex layout making information difficult to find
[Person using screen magnification with small portions of the website visible]
Narration: this is especially problematic for people with visual disabilities who use the layout to orient themselves
[Person in front of a screen who is obviously confused and frustrated]
Narration: and for people with cognitive and learning disabilities, who need clarity and consistency of the presentation
[Older person in a similar setting and level of aggravation]
Narration: also older people who are new to computers and others with low computer skills are impacted by bad design
[Person without visible disability equally aggravated by website]
Narration: in fact, most people have difficulty with bad layout and design
[Visually appealing website being displayed on a mobile device]
Narration: while good design makes your website easier to use in more situations, such as on a mobile device
[Person using website while on the go and obviously in a hurry]
Narration: especially when you are in a hurry and need information fast
[Visually appealing website with generous layout (emphasis on layout)]
Narration: provide generous and consistent layout to make your website easier to use
Narration: visit w3.org/WAI for more tips and information

Comments

I would suggest a different approach here. Tell a story, relate it to way-finding in the world. Good sign posts, consistent markers along a journey, etc. Then bring the viewer back to relate it to the web. {Sharron 11 Oct}
I could see this being reworked as well. I would make sure to put a person in that first scene either way. I think the more symbolic or artistic (as Sharron described) the better. Everyone understands good and bad design, focusing on the literal can take away from a good story that resonates. {James 12 Oct}
Again, this one starts with the techy bits rather than the people bits {Kevin, 13 Oct}
Apart from the comments above, how do we make sure that we have sample pages that feel modern and usable to viewers. I have no constructive ideas on this, unfortunately. {Eric, 13 Oct}

Disabilities Highlighted

People with cognitive disabilities

Benefits Highlighted

Accessibility for people with cognitive disabilities
People with lower computer skills
Better adaptability on different devices (eg. mobile)
Improved usability for everyone

Requirements Highlighted

[WCAG 2.0] 2.4.4 Link Purpose (In Context)
[WCAG 2.0] 2.4.8 Location
[WCAG 2.0] 2.4.9 Link Purpose (Link Only)
[WCAG 2.0] 2.4.10 Section Headings
[WCAG 2.0] 3.2.3 Consistent Navigation
[WCAG 2.0] 3.2.4 Consistent Identification

Note: Several other WCAG 2.0 requirements relate to layout and design but are not highlighted in this example.

Notifications and Feedback

Relate the issue to the personal experience of the reader/viewer, as most will have encountered a situation of unclear instructions and error messages. Emphasize that clear notifications and feedback is good practice in addition to an accessibility requirement. Also highlight the complementary benefits, for example for people who are new to computer or who don't know the website. Include some examples of what good notifications and feedback entails.

Outline

[Cuts of different websites with many notifications and feedback]
Narration: websites are becoming increasingly dynamic and interactive
Narration: clear notifications and feedback make websites easier to use
[Close-up of understandable, well-highlighted error message (with instructions)]
Narration: help users avoid mistakes, and to correct them where needed
[Cuts of different instructions, notifications, and error messages]
Narration: this includes instruction on how to complete forms
Narration: and clear feedback on forms and interactive components
[Close-up of cryptic error message with scary-looking styling (eg lots of red)]
Narration: overly complex error messages confuse your users and scare them away
[Person in front of a screen who is obviously confused and frustrated]
Narration: this includes people with cognitive and learning disabilities, who need simple information and design
[Older person in a similar setting and level of aggravation]
Narration: also older people who are new to computers and others with low computer skills are impacted
[Person without visible disability equally aggravated by website]
Narration: in fact, most people have difficulty with confusing notifications and feedback
Narration: especially when they are unfamiliar with the particular website
[Cuts of different websites with many notifications and feedback]
Narration: clear notifications and feedback to make your website easier to understand
Narration: visit w3.org/WAI for more tips and information

Comments

Again, I suggest a much less technical approach. Something like "We all make mistakes. Some are easy to fix and others more difficult..." Show some in-person transaction (**brainstorm, not a real suggestion, but something like...pick up a hammer when you needed a screwdriver and quickly exchange it for the right tool.**) Then narrate the increased difficulty of identifying mistakes online and go from there. {Sharron 11 Oct}
+1. I suggest focus on people and their experience rather than on "how-to" (I'd suggest never using "you" or "your" in any of the narration). Viewers connect with people, not screencasts of UIs. {James 12 Oct}
+1 to avoid the how-to/instructional start and focus on the people {Kevin, 13 Oct}
+1 as well. What about just showing someone using the web with notifications (filling out forms, getting facebook popup-like notifications, ect.) and then switch the view to a screen reader user where the information is read out, a low vision user that gets a notification. {Eric, 13 Oct}

Disabilities Highlighted

People with cognitive disabilities

Benefits Highlighted

Accessibility for people with cognitive disabilities
People with lower computer skills
People unfamiliar with the website
Improved usability for everyone

Requirements Highlighted

[WCAG 2.0] 3.2.1 On Focus
[WCAG 2.0] 3.2.2 On Input
[WCAG 2.0] 3.2.5 Change on Request
[WCAG 2.0] 3.3.1 Error Identification
[WCAG 2.0] 3.3.2 Labels or Instructions
[WCAG 2.0] 3.3.3 Error Suggestion
[WCAG 2.0] 3.3.4 Error Prevention (Legal, Financial, Data)
[WCAG 2.0] 3.3.5 Help: Context-sensitive help is available
[WCAG 2.0] 3.3.6 Error Prevention (All)

Large Click Areas

Relate the issue to the personal experience of the reader/viewer, as most will have encountered a situation with too small click/touch areas. Emphasize that large click areas is good practice in addition to an accessibility requirement. Also highlight the complementary benefits, for example for people who are using mobile devices, especially on the go. Include some examples of what is meant by large click areas.

Outline

[Visually appealing website with large click areas (emphasis on click areas)]
Narration: good web design includes large click areas for mouse and touch-screens
[View of buttons, links, and other interactive components]
Narration: this includes buttons, links, and other interactive components
[Person using website on a mobile device on a moving train]
Narration: it makes your website work better in more situations, such as on mobiles
[Person trying to click small form elements (eg. radio buttons)]
Narration: yet too many website provide only tiny space, making it difficult to click and touch
[Person with limited dexterity using a mouse (emphasis on dexterity)]
Narration: this is especially problematic for people with reduced dexterity
[Older person with tremors using a mouse (emphasis on dexterity)]
Narration: including older people with tremors and other physical limitations
[Person with cast around the arm using touch screen (emphasis on dexterity)]
Narration: and people with temporary situational limitations, such as a broken arm
[Visually appealing website with large click areas (emphasis on click areas)]
Narration: provide large click areas to make your website easier to use
Narration: visit w3.org/WAI for more tips and information

Comments

This needs a story too, one that invites the viewer in. Show success first - consider all the great things we can now do on line, even from our phones. But wait, what happens when the target is too small? Good design/large click areas to the rescue! {Sharron 11 Oct}
+1 {James 12 Oct}
+1. Large buttons could show outdoors person with gloves on? Don't know where you are going to get someone with a full arm cast ;) {Kevin, 13 Oct}
+1. Also this is somehow a bit negative. We shouldn’t show people who are unable to click/touch small targets but just start out with the premise that the person is able to use the web site because the targets have the right size. {Eric, 13 Oct}

Disabilities Highlighted

People with physical disabilities

Benefits Highlighted

Accessibility for people with physical disabilities
People with temporary physical limitations
People using mobile devices (especially on the go)
Improved usability for everyone

Requirements Highlighted

(WCAG/Mobile) 3.2 Touch Target Size and Spacing

Text Customization

Relate the issue to the personal experience of the reader/viewer, as most will have encountered a situation of illegible text. Use different examples to illustrate the variety of people impacted by text customization. Refer to mobile apps and content formats, which often pose specific challenges regarding text customization. Emphasize that text customization is good practice in addition to an accessibility requirement.

Outline

[Text on visually appealing website being changed in size, spacing, and colors]
Narration: websites that are well designed and well coded can be easily customized
Narration: for example, to change the size, spacing, and colors of website text
[Somebody sitting on sofa with text on a tablet computer reflowing after resize]
Narration: this allows them to be more adaptable and usable in different situations
[Close-up of text that requires horizontal scrolling or overlaps after resize]
Narration: while inaccessible websites require horizontal scrolling or the text disappears when it is resized
[Website appears on mobile phone (app) and does not react to gesture for resizing]
Narration: or the text does not resize at all due to faulty implementation or content format
[Website appears blurry until text is customized to illustrate low vision needs]
Narration: which excludes some people with low vision from using your website
[Close-up of (long) text being customized to different fonts types and styling]
Narration: also people with dyslexia who require particular settings for reading
[Person without visible disability enlarging the text size on a website]
Narration: and people who just feel more comfortable with custom display settings
[Text on visually appealing website being changed in size, spacing, and colors]
Narration: ensure that text can be customized to different settings
Narration: visit w3.org/WAI for more tips and information

Comments

I would suggest that person on the sofa be included in those first couple cuts so the story starts with them and not a UI. {James 12 Oct}
Sorry, but again I would focus on the people first rather than opening with the tech {Kevin, 13 Oct}
'Close-up of (long) text being customized to different fonts types and styling' - I think this is a really challenging thing to show. Unless there are in website controls this is quite difficult to achieve. Do we want to promote the accessibility controls seen on some sites? If we don't then I think that this video is limited really to a note on responsive design. Is that enough to highlight in one of these videos? {Kevin, 13 Oct}
Brainstorm! For this video I could imagine to go a different route than with the other videos: Show a website and then time-lapse style go through iterations to make it accessible for different needs. It could start with the Narrator saying “This website” … goes to contrast mode (using basically transform: all 1.5s linear;) … “can be used by people with high contrast needs” … to another color scheme … “or with deuteranopia” … increases the font size … “or with low vision” … changes back to the original layout, then narrows the width to show a mobile view … “everywhere” … changes to a more playful display with colorful layout and a playful font … “by everyone” … Child lays down a tablet … “Ensure that text can be customized for different uses.” {Eric, 13 Oct}

Disabilities Highlighted

People with visual disabilities
People with cognitive disabilities

Benefits Highlighted

Accessibility for people with visual disabilities
Accessibility for people with cognitive disabilities
Better adaptability on different devices (eg. mobile)
Improved usability for everyone

Requirements Highlighted

[WCAG 2.0] 1.4.4 Resize text
[WCAG 2.0] 1.4.8 Visual Presentation

Simple Language

Relate the issue to the personal experience of the reader/viewer, as most will have encountered a situation of complex language. Make references to presentation, which needs to be considered along with language. Emphasize that simple language and presentation is good practice in addition to an accessibility requirement. Also highlight the complementary benefits, for example for people new to computers and with lower computer skills, new to the website, unfamiliar with the subject matter, or in a hurry and distracted. Include some examples of what simple language entails.

Outline

[Website with very clearly presented procedure (eg. "purchasing")]
Narration: websites with clearly articulated information are easier to use by everyone
[View of person selecting items, typing, and going through the process]
Narration: especially for people new to your website or not familiar with the subject
[View of person using the website on a mobile phone while on the go]
Narration: and for people who are in a hurry, or distracted, or many more situations
[Close-up of block of dense text with lots of jargon and acronyms]
Narration: yet many websites use overly complex language, jargon, and acronyms
[Illustrative view of forms and website processes (eg. "purchasing")]
Narration: especially on forms and for carrying out website tasks, such as purchasing
[View of person obviously aggravated trying to make sense of a website]
Narration: this makes your website difficult to use and unappealing to many users
[View of another person obviously unable to use the website]
Narration: and impossible for some people with disabilities to use, for example people with cognitive disabilities
[Older person using the computer and cuts of other computer users]
Narration: also older people who are new to computers, people with low computer skills, and people with low computer skills
[Website with very clearly presented procedure (eg. "purchasing")]
Narration: use the clearest and simplest language for presenting information
Narration: visit w3.org/WAI for more tips and information

Comments

I would suggest starting with a person in the first scene, and not using "your" in the narration. {James 12 Oct}
I think broadly this is another challenging one to show. I find it difficult to see the flow of this story; where the added benefit is, etc. It also will inevitably disconnect from the people as the video will need to show enough of the text to highlight the good or bad. Sorry, no immediate ideas on how to address this :( {Kevin, 13 Oct}
I agree with Kevin, maybe we could have a simpler start, like showing only the most important information on a smartwatch, to convey that most of the time simple content helps more than the convoluted text one often reads. {Eric, 13 Oct}

Disabilities Highlighted

People with cognitive disabilities

Benefits Highlighted

Accessibility for people with cognitive disabilities
People with lower computer skills
People with lower language skills
People unfamiliar with the website
People using mobile devices (especially on the go)
Improved usability for everyone

Requirements Highlighted

[WCAG 2.0] 2.4.8 Location
[WCAG 2.0] 3.1.3 Unusual Words
[WCAG 2.0] 3.1.4 Abbreviations
[WCAG 2.0] 3.1.5 Reading Level
[WCAG 2.0] 3.1.6 Pronunciation

Keyboard Compatibility

Demonstrate the broad variety of use cases for keyboard compatibility. Connect this to the need for people with different disabilities, and emphasize the face they people rely on this functionality. Include some examples of what keyboard compatibility entails.

Outline

[Cuts of forms being completed, buttons being pressed, and widgets being activated]
Narration: the web today is highly dynamic and interactive
Narration: this includes completing forms, and activating buttons and widgets
[Person using keyboard (emphasis on keyboard)]
Narration: many people use the keyboard only to browse and use your website
[Person using ergonomic keyboard (emphasis on keyboard)]
Narration: for example people with repetitive stress injury using ergonomic keyboards
[Person with cast around the arm not able to use mouse (emphasis on dexterity)]
Narration: and people with temporary situational limitations, such as a broken arm
[Person using website on terminal without mouse]
Narration: or just a computer with a missing or broken mouse
[Cuts of people with physical disabilities using specialized keyboards]
Narration: for some people with physical disabilities using a mouse is not an option
[Person with visual disability (blindness) using keyboard]
Narration: also for people who cannot see the mouse to operate it
[Illustrative view of web page code (maybe pages of code scrolling by)]
Narration: your website needs to be properly coded for these people to use it
[Illustrative view of forms, applications, and navigation menus]
Narration: this includes forms, applications, and navigation menus
[Cuts of forms being completed, buttons being pressed, and widgets being activated]
Narration: ensuring keyboard accessibility allows more users to use your website
Narration: visit w3.org/WAI for more tips and information

Comments

I strongly suggest not using "your" in the narration, it forces the viewer into a role and makes them focus on their own situation and how it applies to "other" people rather than letting them feel a connection and empathize with the actors. These videos are about awareness and understanding which will lead to action on their own in my opinion. {James 12 Oct}
Another option to people first rather than the tech {Kevin, 13 Oct}
'Person using ergonomic keyboard' - I don't know that an ergo keyboard suggests forced mouse use {Kevin, 13 Oct}
'Illustrative view of web page code' - it may be that showing a keyboard engagement with a form would be better here; the tabbing, focussing, selecting etc. The code may be a bit too abstract {Kevin, 13 Oct}
'your website needs to be properly coded for these people to use it' - arguably this comment applies to all of the tips, not sure what the aim of including it here is {Kevin, 13 Oct}
Again too much emphasis on what (certain) users can’t do. Don’t show someone who has a broken arm that can’t hold a mouse, show someone who has a broken arm who is delighted as they can use the web easily despite their situation (for example submit their master thesis or something like that). {Eric, 13 Oct}

Disabilities Highlighted

People with physical disabilities
People with visual disabilities (blindness)
People with repetitive stress injury

Benefits Highlighted

Accessibility for people with physical disabilities
Accessibility for people with visual disabilities (blindness)
Accessibility for people with repetitive stress injury
People with temporary physical limitations (eg. broken arm)
People with temporary situational limitations (eg. no mouse)
People who are just more comfortable using keyboard

Requirements Highlighted

[WCAG 2.0] 1.1.1 Non-text Content
[WCAG 2.0] 1.3.1 Info and Relationships
[WCAG 2.0] 2.1.1 Keyboard
[WCAG 2.0] 2.1.3 Keyboard (No Exception)
[WCAG 2.0] 2.4.7 Focus Visible

Note: Several other WCAG 2.0 requirements relate to keyboard compatibility but are not highlighted in this example.

Changelog

Note: You can use the wiki functionality to view and compare different versions of this page.

25 August 2015

Changes made based on 10 June EOWG survey results and 19 June EOWG meeting.

Overall Changes

Changed format of the outlines to be more storyboard-like;
Examples start and end with positive situations;
Moved to using voice-over narration due to timing constraints;
Added "Requirements Highlighted" to each example to map to WCAG;
Made style and approach more consistent throughout all examples;
Addressed survey comments and EOWG resolutions (details below);

Video Captions

Reduced aspects being highlighted;
Removed search engines optimization;

Color Contrast

Corrected statistical figures;
Refined references to "color perception limitations" (separate from vision acuity);

Voice Recognition

Refined personas to make more realistic;
Provided more examples of broader benefits;

Text to Speech

Added low vision, dyslexia, and low literacy;
Clarified search engine optimization benefit;

Layout and Design

Added cognitive disabilities and older people;
Removed confusing references to coding;
Emphasized usability benefits;

Notifications and Feedback (was Error Message)

Renamed example to make it more generic;
Added people with lower computer skills;
Emphasized usability benefits;

Large Click Areas

Emphasized touch screens;
Emphasized usability benefits;

Text Customization

Clarified issue and use cases;
Emphasized usability benefits;

Simple Language

References to presentation aspects;
Removed browser aspects (scope creep);
Provided more examples of broader benefits;
Emphasized usability benefits;

Keyboard Compatibility (was Keyboard Access)

Added visual disabilities (blindness);
Provided more examples of broader benefits;