HPwDuW: Fix links from throughout the site to the resource

[remibetin]

Description

e.g., link to a specific story is now a broken anchor link in the top-level page

• easy ones that are just a link fix and don't need any analysis
• harder ones where we need to make sure that the reference still works 'cause the stories changed a bit

Resources in question:

• Accessibility Principles: Add links to HPwDUtW wai-accessibility-principles#52
• Perspective Videos: Add links to HPwDUtW wai-perspective-videos#87
  • Customizable
  • Captions
  • Layout
  • Understandable
  • Speech
  • Controls
  • Voice
  • Contrast
  • Notifications
  • Keyboard
• New in WCAG 2.2 - See HPwDuW: Fix links from throughout the site to the resource #541 (comment)
• New in WCAG 2.1 - See HPwDuW: Fix links from throughout the site to the resource #541 (comment)
• Easy Checks
  • Headings
  • Zoom
• Tips: Add links to HPwDUtW wai-quick-start#405
  • Developing
  • Designing
  • Writing

Resource Shortname

wai-people-use-web

[remibetin]

@shawna-slh

Here are my suggestions for updating "New in WCAG 2.2":

2.4.11 Focus Not Obscured (Minimum) (AA) & 2.4.12 Focus Not Obscured (Enhanced) (AAA)

Problem
This page has a big banner that's always across the bottom. (a sticky footer) When I move focus to items, some are hidden behind the banner and I can't see them.
Works well
When I move focus to items, I can see them all.

Current persona: a reporter with repetitive stress injury who uses speech recognition software:

Proposed persona: a reporter with limited use of his arms who doesn't use a mouse:

2.4.13 Focus Appearance (AAA)

Problem
I can't tell where the keyboard focus is as I move around a web page or app.
Works well
I can see where the keyboard focus is as I move around a web page or app.

Current personas: a reporter with repetitive stress injury who doesn't use a mouse:
and Retiree with low contrast sensitivity:

Proposed personas: a reporter with limited use of his arms who doesn't use a mouse: and Retiree with low contrast sensitivity:

2.5.7 Dragging Movements (AA)

Problem
I cannot hold down the mouse button and drag it accurately enough to move the items in this list.
Works well
When I click on an item in the list, I get up and down arrows and I can click those to change the order.

Current persona: a retiree with hand tremor:

Proposed persona: a retiree with hand tremor:

2.5.8 Target Size (Minimum) (AA)

Problem
The buttons are so close, I hit "Cancel" when going for "Submit". Then I have to start all over again.
Works well
There is more space between the buttons so I don't hit the wrong button even when I'm riding on the bumpy bus.

Current persona: a retiree with hand tremor:

Proposed persona: a retiree with hand tremor:

3.2.6 Consistent Help (A)

Problem
Whenever I use the online app to schedule my medical appointments, I can't remember what to do at each step. I've seen a Chat option in some places, but can't find it now.
Works well
When I need help, I can easily find the Chat option that's always in the lower right corner of the page.

Current persona: a supermarket assistant with cognitive disabilities:

Proposed personas: I see several related stories to choose from:

• Ian, data entry clerk with autism. The story of Ian clearly underlines the need of a consistent layout and navigation, but it is more formulated as "I get confused when the layout changes" than "I can't remember what to do".
• Stefan, student with attention deficit hyperactivity disorder and dyslexia. The story of Stefan overall may be more related to not remembering what to do after a previous action.
• Lakshmi, senior accountant who is blind. The story includes a "Consistent layout" barrier example that is closely related. That being said, the current formulation of the problem would be inappropriate ("I've seen" / "that's always in the lower right corner") and would need update.
• Sophie, basketball fan with Down syndrome

3.3.7 Redundant Entry (A)

Problem
Whenever I use the online app to schedule my medical appointments, I have to re-type some information that I entered in a previous step.
Works well
The app automatically fills in information that I entered in previous steps.

Current persona: a supermarket assistant with cognitive disabilities:

Proposed persona: a retiree with short-term memory loss:

(the story contains a "Saved information" barrier example that is closely related.

3.3.8 Accessible Authentication (Minimum) (AA)

Problem
I can never remember my password, it’s really hard to get into this app.
Works well
To get into this app, I can put my e-mail address. Then I get an e-mail message, and I can click a link in the e-mail to get into the app.

Current persona: a supermarket assistant with cognitive disabilities:

Proposed persona: a retiree with short-term memory loss:

(the story contains a "Login page" barrier example that is closely related).

3.3.9 Accessible Authentication (Enhanced) (AAA)

Problem
To get into this app, it's asking me to click on pictures of cats, but I can't tell which are cats.
Works well
To get into this app, I can copy and paste my password.

Current persona: a supermarket assistant with cognitive disabilities:

Proposed persona: a basketball fan with Down syndrome:

[remibetin]

@shawna-slh

Here are my suggestions for updating "New in WCAG 2.1":

1.3.5 Identify Input Purpose (AA)

Problem: My address is so complicated. There's lots of numbers and long words. It's hard to type it all without making mistakes.

Works well: I love websites that can automatically fill it all in for me. Then I don't have to work so hard to get the numbers and spelling right.

Current persona: Supermarket assistant with dyslexia and dyscalculia:

Proposed persona: Student with dyslexia.

1.4.11 Non-Text Contrast (AA)

Problem: I couldn't use the "Order Form" — there were no text boxes. After a long call with customer service, I learned there were text box borders that were too light for me to see.

Works well: It's easy for me to see all the icons and buttons and everything — even in the sunlight.

Current persona: Retiree with low contrast sensitivity:

Proposed persona: Retiree with low contrast sensitivity:

1.4.12 Text Spacing (AA)

Problem: Most text is hard to read. It's so cluttered I can't keep my focus. Just increasing the space between lines makes all the difference. When I'm really tired, I also increase the space between words. However, some websites don't work right — some of the text gets cut off and even buttons disappear.

Works well: OK, I know I'm a bit of a geek, but I've perfected a user style sheet to make text spacing just right for me. It's a relief when websites work well with my CSS.

Current personas: Student with dyslexia: and Retiree with low vision:

Proposed personas: Student with dyslexia: and Retiree with low vision:
(that being said, Elias' story does not specifically address this point and he would probably not define himself as "a bit of a geek")

2.1.4 Character Key Shortcuts (A)

Problem: When I was using my mail app with voice commands, it kept deleting the messages instead of opening them.
Note: There was a shortcut key for delete that was triggered by something the reporter was saying, and no way to turn off the shortcut keys.

Works well: In my spreadsheet application, there's a setting to turn off or modify character key shortcuts.

Current persona: Reporter with repetitive stress injury who uses voice recognition software:

Proposed persona: Reporter with limited use of his arms who frequently uses keyboard shortcuts and voice recognition software:

2.5.3 Label in Name (A)

Problem: It understood most of my voice commands until I got to the Send button. I kept saying 'Send' and it didn't work.
Note: It was visually labeled 'send' but the 'name' in the code was 'submit'. It would have worked if the 'name' started with 'send'.

Current persona: Reporter with repetitive stress injury who uses voice recognition software:

Proposed persona: Reporter with limited use of his arms who uses voice recognition software:

2.5.5 Target Size (AAA)

Problem: The buttons are so small, I hit "Cancel" when going for "Submit". Then I have to start all over again.

Works well: This website buttons are big enough that I don't hit the wrong button even when I'm riding on the bumpy bus.

Current persona: Retiree with hand tremor (and big fingers):

Proposed persona: Retiree with hand tremor (and big fingers):

2.5.6 Concurrent Input Mechanisms (AAA)

Problem: When my RSI acts up, I switch back and forth a lot between keyboard, mouse, stylus, voice. This application doesn't let me use the stylus when I have a keyboard plugged in.

Current persona: Reporter with repetitive stress injury who uses voice recognition software:

Proposed persona: Reporter with limited use of his arms:

Proposed reformulation of the problem

Problem: I switch back and forth a lot between keyboard, joystick and voice. This application doesn't let me use the joystick when I have a keyboard plugged in.

4.1.3 Status Messages (AA)

Problem: I selected a class for the conference, but I can't tell if it got added to my schedule.

Works well: When I add a meeting to my calendar, I hear a confirmation.

Current persona: Accountant who is blind and uses a screen reader:

Proposed persona: Senior accountant who is blind and uses a screen reader:

[remibetin]

@shawna-slh I have created a dedicated PR to add links in Tips for Getting Started pages: w3c/wai-quick-start#405

Here are some notes that may not be blockers but things to consider for a further update:

• I have used the titles of each User Story pages instead of a reformulation.
• No more User Stories for:
  • Designing – Ensure that form elements include clearly associated labels
  • Designing – Create designs for different viewport sizes
  • Developing – Use mark-up to convey meaning and structure
• I am sometimes surprised that some User stories do not refer to some tips. For example, Stefan, student with attention deficit hyperactivity disorder and dyslexia is the only story linking to Include alternative text for images. I assume Lakshmi, senior accountant who is blind is concerned too.