-
Notifications
You must be signed in to change notification settings - Fork 27
Gap Analysis, WAI Adapt Content Attributes
The WAI-Adapt specifications enable web authors to personalize how content is presented in order to meet their needs and preferences. A working draft of attributes proposed includes action, destination, purpose, simplification and distraction [16].
In our work at WAI-Adapt we often compare our proposals with related vocabularies. Publication of WAI-Adapt's First Public Working Draft resulted in greater exposure, with new questions raised regarding our justification for standardizing new attributes. Similar questions asked whether there already existed current or planned HTML attributes that meet the needs we have identified. Several attributes and standards were pointed to, that seemed similar to the new WAI-Adapt proposals.
The WAI-Adapt Task Force decided to undertake a detailed gap analysis, comparing proposed WAI_Adapt attributes with any other markup that may be perceived delivering the same or similar benefit. This wiki page presents the gap analysis undertaken.
Gap analysis is a method of inquiry useful for identifying the differences between two items. The technique involves comparing a current item ('this' item, from our proposed specification) with a reference item ('that' item, from another source) and spelling out both similarities and differences. The group can then review the gap analysis, the identified areas of overlap between 'this' and 'that', and take decisions regarding the adoption of the item under analysis.
For each related vocabulary below, following some discussion we feature the following headings: [1] Relevant parts of the Adapt Spec to be compared [2] Gap Analysis: Overlap and Delta [3] Impact assessment: Once the gap has been established, an impact assessment articulates the impact that the gap has on the user's experience. [4] Decision: The WAI-Adapt TF then memorializes its decision regarding the items compared.
A sample gap analysis table:
| This item | That item | Similarities | Delta |
|---|---|---|---|
| Item A | Item B | Both are products | Item A is a physical product, while Item B is a digital product |
| Process X | Process Y | Both involve customer interactions | Process X is manual, while Process Y is automated |
| Attribute O | Attribute P | Both turn the element blue | P cannot turn a single letter blue; O enables more granular control |
Microformats are a set of conventional arrangements of HTML elements with specific CSS classes, created to serve as consistent and descriptive metadata about an element, designating it as representing a certain type of data (such as contact information, geographic coordinates, events, blog posts, products, recipes, etc.).[3] They allow software to process the information reliably by marking up the HTML with set classes such as h-event for event information. H-event, formerly known as h-calendar, is a good example of the mature and rich semantics that microformats can provide. MDN shows a sample event, before and after h-calendar markup [11].
(Google on the other hand recommends JSON-LD for the same effect. Also note that microdata no longer exists, and is largely rolled into the current microformat specifications)[13].
WAI-Adapt's purpose values 'date-start', 'date-end', 'address-line-1' and so on are likewise intended to clarify the semantics of events.
OVERLAP:
- can express element-level semantics
- can express the types of semantics that we want to convey in WAI-Adapt
- very flexible.
DELTA:
- no fixed versioning
- relies on overloading the 'class' attribute.
- downstream tooling like AT may need versioning
- does not use semantic elements
IMPACT ASSESSMENT: The lack of versioning, or a normative microformats specification, is a show-stopper for WAI-Adapt. W3C only publishes normative specifications.
BACKGROUND INFORMATION:
The @rel attribute defines the relationship between the current document and a linked resource [4]. @Rel can have an effect on < link>, < a>, < area> or < form>. @Rel is used on most web pages today in association with < link>[9][10].
WAI-Adapt's destination is likewise intended to clarify the relationship between a linked resource and the current document. Destination currently proposes 21 attributes, of which 6 are listed as valid for rel such as about, contact, help, related, services and terms. [15]
Let's look at 'help' as it would be implemented with Adapt as opposed to @rel.
Help, using @rel [12]
<label> Topic: <input name=topic> <a href="help/topic.html" rel="help">(Help)</a></label>
Help, using Adapt
<label> Topic: <input name=topic> <a href="help/topic.html" adapt-destination="help">(Help)</a></label>
OVERLAP:
- can express element-level semantics
DELTA:
- rel has many potential values which can deluge and confuse authors.
- Adapt ensures that the same approach that rel partially embodies is brought to bear on other interactive widgets that beg similar enrichment to assist users, such as buttons.
- rel restricts which values can apply to which types of tags. For example, external may not be used with the link tag.
The HTML autocomplete attribute lets web developers specify what (if any) permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field. [5]. Browsers call this feature 'autofill', and their implementations differ slightly [6]. The autocomplete attribute is available on < input> elements that take a text or numeric value as input, < textarea>, < select>, and < form>. The user-agent then populates the field with pre-configured or past values entered by the user. For instance, a browser might let the user save their name, address, phone number, and email addresses for autocomplete purposes. If an < input>, < select> or < textarea> element has no autocomplete attribute, then browsers use the autocomplete attribute of the element's form owner, which is either the < form> element that the element is a descendant of, or the < form> whose id is specified by the form attribute of the element.
OVERLAP:
WAI-Adapt's purpose used autocomplete values as the basis for defining its values, and includes all major autofill values such as 'address-line-1', "address-level1", and so on.
DELTA:
- autocomplete is only for form fields. WAI-Adapt can go on any element, not just form fields.
OPEN QUESTIONS:
- Can we ask WHATWG can we put autocomplete on more things?
HTML provides the semantic structure of web content, while CSS controls the presentation of that content. One powerful feature of CSS is media queries, which allow designers to modify the presentation of content based on specific conditions, such as screen size or device orientation. By using media queries, designers can create responsive web designs that adapt to different viewing contexts.
OVERLAP:
Media queries can be compared with these WAI-Adapt attributes:
WAI-Adapt's distraction attribute could be used to pause distracting animations and/or videos. Media queries can perform the same function.
WAI-Adapt's simplification attribute differentiates between critical features and less important features for user interface simplification. This facilitates simplified interfaces that emphasize critical features by offering fewer options. Adaptations can be based on personalization settings. The fact that simplification results in less information presented on screen has seemed, to some people, similar to the use of media-queries to present less information on smaller screens and more limited devices.
DELTA: Pause animation via media query operates on a per-page basis. WAI-Adapt's distraction attribute could be applied, by the author, on an element by element basis.
WAI-Adapt attributes are typically used to provide additional information for adaptive technology, while CSS media queries are used to adapt the visual presentation of the content based on the viewing context.
A well-known URI is a Uniform Resource Identifier for URL path prefixes that start with /.well-known/. They are implemented in web servers so that requests to the servers for well-known services or information are available at URLs consistent well-known locations across servers, as defined by the IETF in RFC 8615 [18].
Accessibility advocates see the potential in well-known URIs making help, login, password recovery and similar common functions more easily accessible. This seems at first glance similar to the scope addressed by destination.
Definition....
Should WAI-Adapt decide to accept one of the existing alternatives, and do not pass a new specification, the TF should consider publishing a note advocating for these attributes being used in the ways intended by WAI-Adapt, as they assist people to personalize web sites in general, and particularly for people with certain types of disabilities.
[1] https://github.com/w3c/adapt/wiki/Related-vocabularies
[2] http://microformats.org/wiki/about, http://microformats.org/wiki/microformats2
[3] https://en.wikipedia.org/wiki/Microformat
[4] https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
[5] https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
[6] Different browsers implement the autocomplete feature in slightly different ways resulting in variations in user experience, autofill suggestions, and settings management. (a) Google Chrome https://support.google.com/chrome/answer/142893 (b) Mozilla Firefox https://support.mozilla.org/en-US/kb/control-whether-firefox-automatically-fills-forms (c) Apple Safari https://support.apple.com/guide/safari/autofill-ibrwa005/mac (d) Microsoft Edge https://support.microsoft.com/en-us/help/4468242/microsoft-edge-browsing-data-and-privacy-microsoft-privacy.
[8] There are three normative sources. #1, IANA registry defined by RFC 8288 listing 121 values at the time of this writing; #2 the WHATWG HTML5 list of link types that lists 24; and #3 the Microformats Wiki list of existing rel values that lists 39. 33 of the values are listed on more than one of these sources. These 33 are alternate, appendix, author, bookmark, canonical, chapter, contents, copyright, dns-prefetch, external, glossary, help, icon, license, manifest, modulepreload, next, nofollow, noopener, noreferrer, opener, pingback, preconnect, prefetch, preload, prev, previous, search, section, start, stylesheet, subsection, tag.
[9] Web Almanac Survey 2022 reports 98% of pages have a rel attribute. The results show that 7.8 out of 7.9 million mobile pages (98%) contain the rel attribute. And of the 12.6 billion attributes seen in total, 0.2 billion (2%) are the rel attribute.
[10] A cursory examination of three top websites shows the following rel tags in use: alternate, apple-touch-icon, canonical, dns-prefetch, noopener noreferrer, noopener, preload, publisher, search, shortcut icon, stylesheet. Note that neither "publisher" nor "shortcut icon" appear on any of the lists.
[11] h-calendar markup sample: Before,
< font color="#ff0000">< div> <a href="http://www.wirelessfestival.co.uk/lineup/">Wireless 2010</a> <img src="wireless.jpg" />World class acts playing across four stages - but Wireless is about so much more than just amazing music... When: Saturday 3rd July, 12:00pm - 11:00pm Where: Hyde Park, London Category: Concert < div>< /font>
... marked up as follows with h-calendar,
< font color="#ff0000">< div class=”vevent”> <a href=”http://www.wireless.co.uk/” class=”url summary”>Wireless 2010</a> <img src=”wireless.jpg” class=”photo” /> < span class=”description”>World class acts playing across four stages - but Wireless is about so much more than just amazing music< /span> When: < span class="dtstart"> July 3rd, 2:00PM\<span class="value-title" title="2010-07-03T1200Z00">< /span> < /span>- < span class="dtend"> ~11:00PM< span class="value-title" title="2010-07-03T2300Z00">< /span> < /span> Where: < div class="location vcard"> < span class="fn org">Hyde Park< /span>, < span class="adr"> < span class="street-address">Hyde Park< /span>, < span class="locality">Paddington< /span>, < span class="region">London< /span> < /span> < span class="geo"> < span class="latitude"> < span class="value-title" title="51.50716" >< /span> < /span> < span class="longitude"> < span class="value-title" title="-0.17066">< /span> < /span> < /span> < /div> Category: \<span class="category">Concert< /span> < /div>< /font>
[12] https://html.spec.whatwg.org/multipage/links.html#link-type-help
[13] microdata was explicitly dropped by the W3C in 2013 (and therefore not part of W3C Microformats in HTML5 due to a lack of interest by anyone to edit the spec and keep it up to date. It was later briefly re-adopted by W3C in 2017, updated a few times as recently as 2018, and then re-abandoned again in less than a year. See https://microformats.org/wiki/microdata
[15] With minor adjustments: 'service' and 'terms-of-service' are defined for rel.
[16] Sample implementations of action, destination and purpose