3

WCAG 2.1 has officially been released so I'd like to try to support it as much as I can.

I'm having difficulty understanding guideline 1.3.6 (Identify Purpose). https://www.w3.org/WAI/WCAG21/Understanding/identify-purpose.html

These are the examples it gives on how to pass this criterion:

  1. A website uses ARIA landmarks to identify the regions of the page,
    and users can hide areas that are not the 'main'.
  2. The links in the navigation of a website are marked-up so that users can add their own icons.
  3. Icons on a website are marked-up so that the user can substitute their own icon set into the page.

I'm fine with the first point. That basically means correctly using the new HTML5 elements <header>, <footer>, <main>, <article>, <aside>, and <section>.

The other two points (that are completely unrelated to the first point) I've got no idea on how to comply with those. I don't think the markup for such a thing even exists at the moment.

Does anyone know how to comply with points 2 and 3?

(Not using any icons on your site doesn't count as an answer).

Improve this question

1 Answer 1

Reset to default
1

1.3.6 Identify Purpose (AAA) builds on 1.3.5 Identify Input Purpose (AA), similar to how 1.4.6 Contrast (Enhanced) (AAA) builds on 1.4.3 Contrast (Minimum) (AA).

Most companies have AA as their conformance standard. Guideline 1.3.6 is a AAA guideline, so while it's admirable that you are attempting to satisfy some AAA requirements, keep in mind that the W3 cautions against trying to satisfy all AAA requirements. See "Note 2".

Be that as it may, using landmark elements in HTML, or using landmark roles are certainly a good first step, as you mentioned. (Note that the <article> tag is not a landmark.) Landmarks are great for screen reader users but unfortunately, browsers have not surfaced landmark navigation to sighted keyboard users (yet?). If you want to allow navigating by landmarks, you have to code it yourself.

The other examples you noted are new and do not have any new markup to support them yet, so again you'd have to code it yourself. See "Personalization Semantics Content Module 1.0" for some fascinating work in this area. There's a reference to a "personalization demo" that is interesting. It kind of uses "progressive enhancement" and "graceful degradation" to customize a form to have just the basic fields (for cognitive issues) or more fields, but it had to be coded in and is not part of the markup language yet.

(Note: The demo is a little confusing at first. You have to select the "Personalise (read JSON)" button on the right [which is not styled to look like a button], and then select the "More Options" or "Less Options" to increase or decrease the number of input fields. It has some simple javascript that is hiding/unhiding fields based on the aria-importance attribute, which isn't a real attribute.)

Improve this answer
2
  • Browsers have surfaced the ability for people to hide all content that is not the "main" content. It's called reader mode ;) (both firefox and safari have it)
    – Daniel Tonon
    Jul 3, 2018 at 22:10
  • If only it were that simple. There are more heuristics involved than just showing main. Many websites have a main but the browser doesn’t show a reader mode. It’s some combination of sections and possibly articles too. But showing just main doesn’t help with navigating to other landmarks.
    – slugolicious
    Jul 4, 2018 at 2:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.