GEL
Technical documentation
Heydon
Heydon
Abrupt greeting
Opposite of don’t
Quantity variable symbol
“Kind of like
documentation...”
Developer, designer, writer
Developer, designer, writer
Developer, designer, writer
GEL
GEL
Global (as in everywhere)
Experience
(as in Jimi Hendrix)
Language
(as in the reification of meaning)
GEL
Pronounced “Gel” (life “Gif”)
It’s documentation.
-
How things have been done
-
How to do similar things
“Exemplification”
However...
“high level”
“low level”
?
“For a screen reader user, the HTML is the UX”
— Ian Pouncey
Ouch! My arms!!
BBC content and functionality
is for everyone.
GEL
Technical Documentation
Hence...
Which was very nearly...
GEF
An example:
- Which HTML elements should the buttons be composed of?
- Where should they appear in the source?
- How should they be labeled for screen reader users?
- Should they be grouped as a list?
And of course, there's
debouncing
NOT A PATTERN LIBRARY
Exemplify best practices
Without dictating stacks, frameworks, methodologies, etc.
:aria-pressed="state"
aria-pressed={state}
===
Concept / UX design
Interface
Technical architecture
High level
Low level
Design
Development
🤔
The Pocket
<div class="gel-pocket__foot">
<button class="gel-button">
<span>Show more</span>
<svg viewBox="0 0 32 32" aria-hidden="false" focusable="false">
<path d="M16 29L32 3h-7.2L16 18.3 7.2 3H0"></path>
</svg>
</button>
</div>
Progressively enhanced to include...
height: 50vh
inert
inert
inert
inert
inert
inert
if (!item.isIntersecting) {
item.target.setAttribute('inert', 'inert');
} else {
item.target.removeAttribute('inert');
}
isIntersecting
!isIntersecting
if ('IntersectionObserver' in window) {
// ENHANCE!
}
No IntersectionObserver?
Ditch it.
inert
It's so useful, we include a small polyfill
Continue reading...
this.next = this.truncated.querySelector('[inert]'); this.truncated.insertBefore(this.continue, this.next);
Continue reading...
Continue reading...
Logical
source
order
I wrote all of it!
(and I’d do it again, but...)
received wisdom
testing
innovation
Four test versions
- Users like links...
- ... but we already have 'too many'
- Same page links are unpopular...
- ... but moving focus programmatically
helps many who experience trouble with navigating between tabs and panels - Arrow key navigation is ergonomic...
- ... if the user is experienced enough to know it's there
Tabs?
Tags?
Initial
content
Evolving
content
Standards
Prior art
Research
Testing &
research
Production
ME:
@heydonworks
@heydon@mastodon.social
heydonworks.com
SITE: bbc.github.io/gel
CODE: github.com/bbc/gel/
GEL for Technica11y
By heydon
GEL for Technica11y
- 1,779