Add Focus Appearance and Alt Text outcomes first draft

[iadawn]

Content taken from Focus Appearance (Exploratory to Developing) and Text Alternatives (Exploratory to Developing)

[netlify]

✅ Deploy Preview for wcag3-howtos ready!

Name	Link
🔨 Latest commit	fc816b8
🔍 Latest deploy log	https://app.netlify.com/sites/wcag3-howtos/deploys/6734bec0fd01cf0008c0b481
😎 Deploy Preview	https://deploy-preview-112--wcag3-howtos.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[PoornimaSubramanian]

Hi! Couple of things to check in here -

For Focus appearance:

1. One suggestion for the below TBC line in Focus Appearance to add 'in the viewport' or 'of viewport' whichever makes it easier to understand -
   Not obscured: The focus indicator is not obscured or partially obscured (more than 50% in the viewport, TBC)

2. A small typo to correct the spelling of 'indicators' in the below line -
   5. Is the indicator using lines or a bounding box? (Baseline)
   Yes, see [line / bounding box indiators]

3. Question: Is this referring to whether the indicator showing (or) using the tooltip?
   Does the indicator use a tooltip or additional content as the indicator? (Baseline)

For Text alternatives:

1. Question: Should there be a method to call out 'images that contain text in it'?

[bruce-usab]

I feel you are heading in right direction. In particular, it is helpful to now have outcome Focus Appearance as a more realized model Keyboard Input to follow.

[rachaelbradley]

We need to rework this to better reflect the realignment of guidelines, outcomes and methods discussed in today's meeting.

[julierawe]

Hi, folks, thanks so much for all of the great work on this so far! I huddled with a few members of COGA, and we have some flags about the outcome template/formatting:

Hierarchy of information

Outcome name (“Focus appearance”) is hard to notice at the top of the page.

• It’s a smaller font/seems less important than “Get started.”
• It’s far away from all of the information about this outcome.

“Get started” sounds like a second step (“Take action/What to do”) instead of first step (“Purpose/Why to do it).”

• Consider changing the name of “Get started” to “Why” or “Overview” or “Introduction.”

Box just below “Get started” needs more context to connect it to the rest of page.

• Suggest adding “Outcome,” which is currently not mentioned on this page other than in the breadcrumbs.
• The new wording would be: “Outcome: The keyboard focus must have a sufficient visual indicator.”

“Methods” page would benefit from a tweak that makes two things clear:

• The “Decision tree” is a series of questions that will help users determine which method to use.
• There is a “Methods” section below the decision tree.
• “See More” surprised us as link text—instead of a CTA button to another page, could this be a collapsible section?

“User needs” seems like it should come before “Methods”

One page vs many tabs

The current template has a lot of tabs.

• This adds complexity in general and users can lose orientation.
• This also makes it harder to do things like print out the guidance for this outcome.
• Possible to put all of the “Focus appearance” information on one page with collapsible sections?

Colors

Red

• The red bullets and numbering are very concerning to COGA.
• Scrolling with red can be harmful for users—it has the potential to cause vestibular problems. [Reworded on September 24th]
• The red is also very problematic when viewed in dark mode.
• Red can also have different meanings in different cultures.

Light blue/gray

• The box around the one-sentence outcome description is very hard to see.
• This box is also hard to see in dark mode, as medium blue on black.
• It’s also hard to see the light blue/gray outline around each method on the "Methods" tab.

Breadcrumb formatting

Right now there is no visual emphasis to help users what page they’re on.

• Consider boldfacing the part of the breadcrumb the user is currently on to help the user knows where they are.
• Consider adding an icon that identifies what the "home page" is (to the left of "WCAG 3 Outcomes").

[ChrisLoiselle]

Question on Prerequisites being presented prior to baseline or enhanced and use of overall use of these words. A numbered list shows that an enhanced option precedes a prerequisite whereas the defined term of prerequisite is either a thing that is required as a prior condition for something else to happen or exist. or required as a prior condition.

1. So if using a numbered list, why would these be all intermixed in a numbering system within the focus appearance?
2. How does this differ from must, should, could A, AA, and AAA, for example, when comparing the Baseline, Enhanced and PreReq?
3. Are PreReqs a phase 0?
4. Level 1 failing to meet baseline would fail to meet PreReqs?
5. In conformance conversations 2024 - baseline is defined as A core set of required outcomes that must be met before scoring occurs. Are you stating that you are at Level 1 (baseline) and fail baseline, but haven't met any prior level (0) that may include some other baselines and prerequisites? Am I mis-reading this?
6. Baselines are required before scoring can occur, but prerequisites are required before baselines are required?

[scottaohara]

just some comments for my first pass through.

some comments aren't scoped to the content of the drafts, but some of the markup being used to signify the pages are drafts.

probably need to do a few more reads of this to make sure i don't have other thoughts.

[scottaohara]

on initial read, this seemed like it was saying the focus indicator needed to be unique per control.
but really, what this means is that the focused state should be visually distinct from other controls which are not focused. so tried to make that clearer in the first part of the sentence.

Suggested change

	* **Distinctive**: The keyboard focus indicator uses a style that is distinct from the style of other controls, so that the item in focus can be distinguished without reference to the non-focused state.
	* **Distinctive**: The keyboard focus indicator uses a style that is distinct from the style of other non-focused controls, so that the item in focus can be distinguished without reference to the non-focused state.

[scottaohara]

i don't quite follow this point. maybe because it reads as an incomplete sentence?

[netlify]

✅ Deploy Preview for wcag3 ready!

Name	Link
🔨 Latest commit	fc816b8
🔍 Latest deploy log	https://app.netlify.com/sites/wcag3/deploys/6734bec06f0a6e000840b8f6
😎 Deploy Preview	https://deploy-preview-112--wcag3.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.