├── .gitignore ├── .stylelintrc ├── DOCUMENTATION.md ├── LICENSE.md ├── README.md ├── dist ├── a11yana.css ├── a11yana.min.css └── a11yana.min.css.map ├── index.html ├── netlify.toml ├── package-lock.json ├── package.json ├── postcss.config.js ├── src ├── 0-universalize.css ├── 1-variables.css ├── 2-base.css ├── 3-typography.css ├── 4-style.css ├── 5-forms.css └── 6-misc.css └── tester.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-standard", 3 | "rules": { 4 | "declaration-block-no-duplicate-properties": null, 5 | "at-rule-no-vendor-prefix": null, 6 | "media-feature-name-no-vendor-prefix": null, 7 | "property-no-vendor-prefix": null, 8 | "selector-no-vendor-prefix": null, 9 | "value-no-vendor-prefix": null, 10 | "indentation": "tab", 11 | } 12 | } -------------------------------------------------------------------------------- /DOCUMENTATION.md: -------------------------------------------------------------------------------- 1 | # Documentation (temporary) 2 | This is temporary file containing documentation of supported features. This will later be added to the project website's documentation. 3 | 4 | ## Why a11yana? 5 | * Frameworks like bootstrap can be great, but... 6 | * inslusive design and accessibility first 7 | * minimal and clutter-free; great for people with cognitive impairment 8 | * classless; easy to implement 9 | * examples of best-practice accessibility 10 | 11 | ## Elements and features 12 | * Optimized for any zoom level with any browser font size 13 | * Great browser support: 0.1% + not dead (explain better) 14 | 15 | ### Skip link 16 | ```html 17 | 18 | Skip to main content 19 | 20 | ... 21 | ``` 22 | 23 | ### Subtitles 24 | ```html 25 | 26 | This is the main title 27 | This is the subtitle 28 | 29 | ``` 30 | 31 | ## Best practice/suggested semantics for accessibility 32 | 33 | ### Blockquotes 34 | ```html 35 |
36 |

Some quote goes here.

37 |
38 | ``` 39 | 40 | ```html 41 |
42 |
43 |

Some quote goes here.

44 |
45 |
46 | The author and a reference to the work. 47 |
48 |
49 | ``` -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Alexander Sandberg 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # a11yana 2 | 3 | a11yana (*pronounced allyana*) is a classless CSS framework with a focus on accessibility. 4 | 5 | **This is still in the early stages!** See [the project](https://github.com/alexandersandberg/a11yana/projects/1) for a status of the work towards the initial release. -------------------------------------------------------------------------------- /dist/a11yana.css: -------------------------------------------------------------------------------- 1 | /* 2 | universalize.css (v1.0.2) — by Alexander Sandberg (https://alexandersandberg.com) 3 | ------------------------------------------------------------------------------ 4 | 5 | Based on Sanitize.css (https://github.com/csstools/sanitize.css). 6 | 7 | (all) = Used for all browsers. 8 | x lines = Applies to x lines down, including current line. 9 | 10 | ------------------------------------------------------------------------------ 11 | */ 12 | 13 | /* 14 | Prevent padding and border from affecting width (all) 15 | */ 16 | *, 17 | ::before, 18 | ::after { 19 | box-sizing: border-box; 20 | } 21 | 22 | /* 23 | 1. Inherit text decoration (all) 24 | 2. Inherit vertical alignment (all) 25 | */ 26 | ::before, 27 | ::after { 28 | text-decoration: inherit; /* 1 */ 29 | vertical-align: inherit; /* 2 */ 30 | } 31 | 32 | /* 33 | 1. Use default UI font (all) 34 | 2. Make font size more accessible to everyone (all) 35 | 3. Make line height consistent (all) 36 | 4. Prevent font size adjustment after orientation changes (IE, iOS) 37 | 5. Prevent overflow from long words (all) 38 | */ 39 | html { 40 | font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; /* 1 */ 41 | font-size: 125%; /* 2 */ 42 | line-height: 1.6; /* 3 */ 43 | -webkit-text-size-adjust: 100%; /* 4 */ 44 | word-break: break-word; /* 5 */ 45 | } 46 | 47 | /* 48 | Whitespace between content and viewport edge (all) 49 | */ 50 | body { 51 | padding: 1em; 52 | } 53 | 54 | /* 55 | Remove inconsistent and unnecessary margins 56 | */ 57 | body, /* (all) */ 58 | dl dl, /* (Chrome, Edge, IE, Safari) 5 lines */ 59 | dl ol, 60 | dl ul, 61 | ol dl, 62 | ul dl, 63 | ol ol, /* (Edge 18-, IE) 4 lines */ 64 | ol ul, 65 | ul ol, 66 | ul ul, 67 | button, /* (Safari) 3 lines */ 68 | input, 69 | select, 70 | textarea { /* (Firefox, Safari) */ 71 | margin: 0; 72 | } 73 | 74 | /* 75 | 1. Show overflow (IE18-, IE) 76 | 2. Correct sizing (Firefox) 77 | */ 78 | hr { 79 | overflow: visible; 80 | height: 0; 81 | } 82 | 83 | /* 84 | Add correct display 85 | */ 86 | main, /* (IE11) */ 87 | details { /* (Edge 18-, IE) */ 88 | display: block; 89 | } 90 | 91 | summary { /* (all) */ 92 | display: list-item; 93 | } 94 | 95 | /* 96 | Remove style on navigation lists (all) 97 | */ 98 | nav ol, 99 | nav ul { 100 | list-style: none; 101 | padding: 0; 102 | } 103 | 104 | /* 105 | 1. Use default monospace UI font (all) 106 | 2. Correct font sizing (all) 107 | */ 108 | pre, 109 | code, 110 | kbd, 111 | samp { 112 | font-family: 113 | /* macOS 10.10+ */ "Menlo", 114 | /* Windows 6+ */ "Consolas", 115 | /* Android 4+ */ "Roboto Mono", 116 | /* Ubuntu 10.10+ */ "Ubuntu Monospace", 117 | /* KDE Plasma 5+ */ "Noto Mono", 118 | /* KDE Plasma 4+ */ "Oxygen Mono", 119 | /* Linux/OpenOffice fallback */ "Liberation Mono", 120 | /* fallback */ monospace, 121 | /* macOS emoji */ "Apple Color Emoji", 122 | /* Windows emoji */ "Segoe UI Emoji", 123 | /* Windows emoji */ "Segoe UI Symbol", 124 | /* Linux emoji */ "Noto Color Emoji"; /* 1 */ 125 | 126 | font-size: 1em; /* 2 */ 127 | } 128 | 129 | /* 130 | 1. Change cursor for elements (all) 131 | 2. Add correct text decoration (Edge 18-, IE, Safari) 132 | */ 133 | abbr[title] { 134 | cursor: help; /* 1 */ 135 | text-decoration: underline; /* 2 */ 136 | -webkit-text-decoration: underline dotted; 137 | text-decoration: underline dotted; /* 2 */ 138 | } 139 | 140 | /* 141 | Add correct font weight (Chrome, Edge, Safari) 142 | */ 143 | b, 144 | strong { 145 | font-weight: bolder; 146 | } 147 | 148 | /* 149 | Add correct font size (all) 150 | */ 151 | small { 152 | font-size: 80%; 153 | } 154 | 155 | /* 156 | Change alignment on media elements (all) 157 | */ 158 | audio, 159 | canvas, 160 | iframe, 161 | img, 162 | svg, 163 | video { 164 | vertical-align: middle; 165 | } 166 | 167 | /* 168 | Remove border on iframes (all) 169 | */ 170 | iframe { 171 | border-style: none; 172 | } 173 | 174 | /* 175 | Change fill color to match text (all) 176 | */ 177 | svg:not([fill]) { 178 | fill: currentColor; 179 | } 180 | 181 | /* 182 | Hide overflow (IE11) 183 | */ 184 | svg:not(:root) { 185 | overflow: hidden; 186 | } 187 | 188 | /* 189 | Show overflow (Edge 18-, IE) 190 | */ 191 | button, 192 | input { 193 | overflow: visible; 194 | } 195 | 196 | /* 197 | Remove inheritance of text transform (Edge 18-, Firefox, IE) 198 | */ 199 | button, 200 | select { 201 | text-transform: none; 202 | } 203 | 204 | /* 205 | Correct inability to style buttons (iOS, Safari) 206 | */ 207 | button, 208 | [type="button"], 209 | [type="reset"], 210 | [type="submit"] { 211 | -webkit-appearance: button; 212 | } 213 | 214 | /* 215 | 1. Fix inconsistent appearance (all) 216 | 2. Correct padding (Firefox) 217 | */ 218 | fieldset { 219 | border: 1px solid #666; /* 1 */ 220 | padding: 0.35em 0.75em 0.625em; /* 2 */ 221 | } 222 | 223 | /* 224 | 1. Correct color inheritance from
(IE) 225 | 2. Correct text wrapping (Edge 18-, IE) 226 | */ 227 | legend { 228 | color: inherit; /* 1 */ 229 | display: table; /* 2 */ 230 | max-width: 100%; /* 2 */ 231 | white-space: normal; /* 2 */ 232 | } 233 | 234 | /* 235 | 1. Add correct display (Edge 18-, IE) 236 | 2. Add correct vertical alignment (Chrome, Edge, Firefox) 237 | */ 238 | progress { 239 | display: inline-block; /* 1 */ 240 | vertical-align: baseline; /* 2 */ 241 | } 242 | 243 | /* 244 | 1. Remove default vertical scrollbar (IE) 245 | 2. Change resize direction (all) 246 | */ 247 | textarea { 248 | overflow: auto; /* 1 */ 249 | resize: vertical; /* 2 */ 250 | } 251 | 252 | /* 253 | 1. Correct outline style (Safari) 254 | 2. Correct odd appearance (Chrome, Edge, Safari) 255 | */ 256 | [type="search"] { 257 | outline-offset: -2px; /* 1 */ 258 | -webkit-appearance: textfield; /* 2 */ 259 | } 260 | 261 | /* 262 | Correct cursor style of increment and decrement buttons (Safari) 263 | */ 264 | ::-webkit-inner-spin-button, 265 | ::-webkit-outer-spin-button { 266 | height: auto; 267 | } 268 | 269 | /* 270 | Correct text style (Chrome, Edge, Safari) 271 | */ 272 | ::-webkit-input-placeholder { 273 | color: inherit; 274 | opacity: 0.54; 275 | } 276 | 277 | /* 278 | Remove inner padding (Chrome, Edge, Safari on macOS) 279 | */ 280 | ::-webkit-search-decoration { 281 | -webkit-appearance: none; 282 | } 283 | 284 | /* 285 | 1. Inherit font properties (Safari) 286 | 2. Correct inability to style upload buttons (iOS, Safari) 287 | */ 288 | ::-webkit-file-upload-button { 289 | font: inherit; /* 1 */ 290 | -webkit-appearance: button; /* 2 */ 291 | } 292 | 293 | /* 294 | Remove inner border and padding of focus outlines (Firefox) 295 | */ 296 | ::-moz-focus-inner { 297 | border-style: none; 298 | padding: 0; 299 | } 300 | 301 | /* 302 | Restore focus outline style (Firefox) 303 | */ 304 | :-moz-focusring { 305 | outline: 1px dotted ButtonText; 306 | } 307 | 308 | /* 309 | Remove :invalid styles (Firefox) 310 | */ 311 | :-moz-ui-invalid { 312 | box-shadow: none; 313 | } 314 | 315 | /* 316 | Change cursor on busy elements (all) 317 | */ 318 | [aria-busy="true"] { 319 | cursor: progress; 320 | } 321 | 322 | /* 323 | Change cursor on control elements (all) 324 | */ 325 | [aria-controls] { 326 | cursor: pointer; 327 | } 328 | 329 | /* 330 | Change cursor on disabled, non-editable, or inoperable elements (all) 331 | */ 332 | [aria-disabled="true"], 333 | [disabled] { 334 | cursor: not-allowed; 335 | } 336 | 337 | /* 338 | Change display on visually hidden accessible elements (all) 339 | */ 340 | [aria-hidden="false"][hidden] { 341 | display: inline; 342 | display: initial; 343 | } 344 | 345 | [aria-hidden="false"][hidden]:not(:focus) { 346 | clip: rect(0, 0, 0, 0); 347 | position: absolute; 348 | } 349 | 350 | /* 351 | Print out URLs after links (all) 352 | */ 353 | @media print { 354 | a[href^="http"]::after { 355 | content: " (" attr(href) ")"; 356 | } 357 | } 358 | /* ----- Variables ----- */ 359 | 360 | /* Light mode default, dark mode if recognized as preferred */ 361 | :root { 362 | --background-main: #fefefe; 363 | --background-element: #eee; 364 | --background-inverted: #282a36; 365 | --text-main: #1f1f1f; 366 | --text-alt: #333; 367 | --text-inverted: #fefefe; 368 | --border-element: #282a36; 369 | --theme: #7a283a; 370 | --theme-light: hsl(0, 25%, 65%); 371 | --theme-dark: hsl(0, 25%, 45%); 372 | } 373 | 374 | /* @media (prefers-color-scheme: dark) { 375 | :root { 376 | --background-main: #282a36; 377 | --text-main: #fefefe; 378 | } 379 | } */ 380 | /* ----- Base ----- */ 381 | 382 | body { 383 | margin: auto; 384 | max-width: 36rem; 385 | min-height: 100%; 386 | overflow-x: hidden; 387 | } 388 | /* ----- Typography ----- */ 389 | 390 | h1, 391 | h2, 392 | h3, 393 | h4, 394 | h5, 395 | h6 { 396 | margin: 3.2rem 0 0.8em; 397 | } 398 | 399 | /* 400 | Heading sizes based on a modular scale of 1.25 (all) 401 | */ 402 | h1 { 403 | font-size: 2.441rem; 404 | line-height: 1.1; 405 | } 406 | 407 | h2 { 408 | font-size: 1.953rem; 409 | line-height: 1.15; 410 | } 411 | 412 | h3 { 413 | font-size: 1.563rem; 414 | line-height: 1.2; 415 | } 416 | 417 | h4 { 418 | font-size: 1.25rem; 419 | line-height: 1.3; 420 | } 421 | 422 | h5 { 423 | font-size: 1rem; 424 | line-height: 1.4; 425 | } 426 | 427 | h6 { 428 | font-size: 1rem; 429 | line-height: 1.4; 430 | 431 | /* differentiate from h5, somehow. color or style? */ 432 | } 433 | 434 | p, 435 | ul, 436 | ol, 437 | figure { 438 | margin: 0.6rem 0 1.2rem; 439 | } 440 | 441 | /* 442 | Subtitles 443 | - Change to header h* + span instead? 444 | - Add support for taglines (small title above main) as well? Needs
: 445 | header > span:first-child 446 | */ 447 | h1 span, 448 | h2 span, 449 | h3 span, 450 | h4 span, 451 | h5 span, 452 | h6 span { 453 | display: block; 454 | font-size: 1em; 455 | font-style: italic; 456 | font-weight: normal; 457 | line-height: 1.3; 458 | margin-top: 0.3em; 459 | } 460 | 461 | h1 span { 462 | font-size: 0.6em; 463 | } 464 | 465 | h2 span { 466 | font-size: 0.7em; 467 | } 468 | 469 | h3 span { 470 | font-size: 0.8em; 471 | } 472 | 473 | h4 span { 474 | font-size: 0.9em; 475 | } 476 | 477 | small { 478 | font-size: 1em; 479 | opacity: 0.8; /* or some other way of differentiating it from body text */ 480 | } 481 | 482 | mark { 483 | background: pink; /* change to proper color, based on theme */ 484 | } 485 | 486 | /* 487 | Define a custom tab-size in browsers that support it. 488 | */ 489 | pre { 490 | -moz-tab-size: 4; 491 | -o-tab-size: 4; 492 | tab-size: 4; 493 | } 494 | 495 | /* 496 | Long underlined text can be hard to read for dyslexics. Replace with bold. 497 | */ 498 | ins { 499 | text-decoration: none; 500 | font-weight: bolder; 501 | } 502 | 503 | blockquote { 504 | border-left: 0.3rem solid #7a283a; 505 | border-left: 0.3rem solid var(--theme); 506 | margin: 0.6rem 0 1.2rem 0; 507 | padding-left: 2rem; 508 | } 509 | 510 | blockquote p { 511 | font-size: 1.2em; 512 | font-style: italic; 513 | } 514 | 515 | figure { 516 | margin: 0; 517 | } 518 | /* ----- Layout ----- */ 519 | 520 | body { 521 | background: #fefefe; 522 | background: var(--background-main); 523 | color: #1f1f1f; 524 | color: var(--text-main); 525 | } 526 | 527 | a { 528 | color: #7a283a; 529 | color: var(--theme); 530 | text-decoration: underline; 531 | } 532 | 533 | a:hover { 534 | color: hsl(0, 25%, 65%); 535 | color: var(--theme-light); 536 | } 537 | 538 | a:active { 539 | color: hsl(0, 25%, 45%); 540 | color: var(--theme-dark); 541 | } 542 | 543 | :focus { 544 | outline: 3px solid hsl(0, 25%, 65%); 545 | outline: 3px solid var(--theme-light); 546 | outline-offset: 3px; 547 | } 548 | 549 | ::-moz-selection { 550 | background: hsl(0, 25%, 65%); 551 | background: var(--theme-light); 552 | color: #fefefe; 553 | color: var(--text-inverted); 554 | } 555 | 556 | ::selection { 557 | background: hsl(0, 25%, 65%); 558 | background: var(--theme-light); 559 | color: #fefefe; 560 | color: var(--text-inverted); 561 | } 562 | 563 | input { 564 | background: #eee; 565 | background: var(--background-element); 566 | padding: 0.5rem 0.65rem; 567 | border-radius: 0.5rem; 568 | border: 2px solid #282a36; 569 | border: 2px solid var(--border-element); 570 | font-size: 1rem; 571 | } 572 | 573 | mark { 574 | background: pink; /* change to proper color, based on theme */ 575 | padding: 0.1em 0.15em; 576 | } 577 | 578 | kbd, /* different style for kbd? */ 579 | code { 580 | background: #eee; 581 | padding: 0.1em 0.25em; 582 | border-radius: 0.2rem; 583 | -webkit-box-decoration-break: clone; 584 | box-decoration-break: clone; 585 | } 586 | 587 | kbd > kbd { 588 | padding-left: 0; 589 | padding-right: 0; 590 | } 591 | 592 | pre { 593 | -moz-tab-size: 4; 594 | -o-tab-size: 4; 595 | tab-size: 4; 596 | } 597 | 598 | pre code { 599 | display: block; 600 | padding: 0.3em 0.7em; 601 | word-break: normal; 602 | overflow-x: auto; 603 | } 604 | /* ----- Forms ----- */ 605 | /* ----- Misc ----- */ 606 | 607 | [tabindex="-1"]:focus { 608 | outline: none; 609 | } 610 | 611 | [hidden] { 612 | display: none; 613 | } 614 | 615 | [aria-disabled], 616 | [disabled] { 617 | cursor: not-allowed !important; 618 | pointer-events: none !important; 619 | } 620 | 621 | /* 622 | Style anchor links only 623 | */ 624 | a[href^='#']::after { 625 | content: ''; 626 | } 627 | 628 | /* 629 | Skip link 630 | */ 631 | body > a:first-child { 632 | background: #7a283a; 633 | background: var(--theme); 634 | border-radius: 0.2rem; 635 | color: #fefefe; 636 | color: var(--text-inverted); 637 | padding: 0.3em 0.5em; 638 | position: absolute; 639 | top: -10rem; 640 | } 641 | 642 | body > a:first-child:focus { 643 | top: 1rem; 644 | } 645 | -------------------------------------------------------------------------------- /dist/a11yana.min.css: -------------------------------------------------------------------------------- 1 | *,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;font-size:125%;line-height:1.6;-webkit-text-size-adjust:100%;word-break:break-word}body{padding:1em}body,button,dl dl,dl ol,dl ul,input,ol dl,ol ol,ol ul,select,textarea,ul dl,ul ol,ul ul{margin:0}hr{overflow:visible;height:0}details,main{display:block}summary{display:list-item}nav ol,nav ul{list-style:none;padding:0}code,kbd,pre,samp{font-family:Menlo,Consolas,Roboto Mono,"Ubuntu Monospace",Noto Mono,Oxygen Mono,Liberation Mono,monospace,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:1em}abbr[title]{cursor:help;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}audio,canvas,iframe,img,svg,video{vertical-align:middle}iframe{border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}fieldset{border:1px solid #666;padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto;resize:vertical}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:inline;display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);position:absolute}@media print{a[href^=http]:after{content:" (" attr(href) ")"}}:root{--background-main:#fefefe;--background-element:#eee;--background-inverted:#282a36;--text-main:#1f1f1f;--text-alt:#333;--text-inverted:#fefefe;--border-element:#282a36;--theme:#7a283a;--theme-light:#bc8f8f;--theme-dark:#8f5656}body{margin:auto;max-width:36rem;min-height:100%;overflow-x:hidden}h1,h2,h3,h4,h5,h6{margin:3.2rem 0 .8em}h1{font-size:2.441rem;line-height:1.1}h2{font-size:1.953rem;line-height:1.15}h3{font-size:1.563rem;line-height:1.2}h4{font-size:1.25rem;line-height:1.3}h5,h6{font-size:1rem;line-height:1.4}figure,ol,p,ul{margin:.6rem 0 1.2rem}h1 span,h2 span,h3 span,h4 span,h5 span,h6 span{display:block;font-size:1em;font-style:italic;font-weight:400;line-height:1.3;margin-top:.3em}h1 span{font-size:.6em}h2 span{font-size:.7em}h3 span{font-size:.8em}h4 span{font-size:.9em}small{font-size:1em;opacity:.8}ins{text-decoration:none;font-weight:bolder}blockquote{border-left:.3rem solid #7a283a;border-left:.3rem solid var(--theme);margin:.6rem 0 1.2rem;padding-left:2rem}blockquote p{font-size:1.2em;font-style:italic}figure{margin:0}body{background:#fefefe;background:var(--background-main);color:#1f1f1f;color:var(--text-main)}a{color:#7a283a;color:var(--theme);text-decoration:underline}a:hover{color:#bc8f8f;color:var(--theme-light)}a:active{color:#8f5656;color:var(--theme-dark)}:focus{outline:3px solid #bc8f8f;outline:3px solid var(--theme-light);outline-offset:3px}::-moz-selection{background:#bc8f8f;background:var(--theme-light);color:#fefefe;color:var(--text-inverted)}::selection{background:#bc8f8f;background:var(--theme-light);color:#fefefe;color:var(--text-inverted)}input{background:#eee;background:var(--background-element);padding:.5rem .65rem;border-radius:.5rem;border:2px solid #282a36;border:2px solid var(--border-element);font-size:1rem}mark{background:pink;padding:.1em .15em}code,kbd{background:#eee;padding:.1em .25em;border-radius:.2rem;-webkit-box-decoration-break:clone;box-decoration-break:clone}kbd>kbd{padding-left:0;padding-right:0}pre{-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code{display:block;padding:.3em .7em;word-break:normal;overflow-x:auto}[tabindex="-1"]:focus{outline:none}[hidden]{display:none}[aria-disabled],[disabled]{cursor:not-allowed!important;pointer-events:none!important}a[href^="#"]:after{content:""}body>a:first-child{background:#7a283a;background:var(--theme);border-radius:.2rem;color:#fefefe;color:var(--text-inverted);padding:.3em .5em;position:absolute;top:-10rem}body>a:first-child:focus{top:1rem} 2 | /*# sourceMappingURL=a11yana.min.css.map */ -------------------------------------------------------------------------------- /dist/a11yana.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["a11yana.css"],"names":[],"mappings":"AAeA,iBAGC,qBACD,CAMA,eAEC,uBAAwB,CACxB,sBACD,CASA,KACC,yFAAiG,CACjG,cAAe,CACf,eAAgB,CAChB,6BAA8B,CAC9B,qBACD,CAKA,KACC,WACD,CAKA,wFAcC,QACD,CAMA,GACC,gBAAiB,CACjB,QACD,CAKA,aAEC,aACD,CAEA,QACC,iBACD,CAKA,cAEC,eAAgB,CAChB,SACD,CAMA,kBAIC,2KAYqC,CAErC,aACD,CAMA,YACC,WAAY,CACZ,yBAA0B,CAC1B,wCAAyC,CACjC,gCACT,CAKA,SAEC,kBACD,CAKA,MACC,aACD,CAKA,kCAMC,qBACD,CAKA,OACC,iBACD,CAKA,gBACC,iBACD,CAKA,eACC,eACD,CAKA,aAEC,gBACD,CAKA,cAEC,mBACD,CAKA,gDAIC,yBACD,CAMA,SACC,qBAAsB,CACtB,0BACD,CAMA,OACC,aAAc,CACd,aAAc,CACd,cAAe,CACf,kBACD,CAMA,SACC,oBAAqB,CACrB,uBACD,CAMA,SACC,aAAc,CACd,eACD,CAMA,cACC,mBAAoB,CACpB,4BACD,CAKA,wDAEC,WACD,CAKA,4BACC,aAAc,CACd,WACD,CAKA,4BACC,uBACD,CAMA,6BACC,YAAa,CACb,yBACD,CAKA,mBACC,iBAAkB,CAClB,SACD,CAKA,gBACC,6BACD,CAKA,iBACC,eACD,CAKA,iBACC,eACD,CAKA,gBACC,cACD,CAKA,gCAEC,kBACD,CAKA,4BACC,cAAe,CACf,eACD,CAEA,wCACC,kBAAsB,CACtB,iBACD,CAKA,aACC,oBACC,2BACD,CACD,CAIA,MACC,yBAA0B,CAC1B,yBAA0B,CAC1B,6BAA8B,CAC9B,mBAAoB,CACpB,eAAgB,CAChB,uBAAwB,CACxB,wBAAyB,CACzB,eAAgB,CAChB,qBAA+B,CAC/B,oBACD,CAUA,KACC,WAAY,CACZ,eAAgB,CAChB,eAAgB,CAChB,iBACD,CAGA,kBAMC,oBACD,CAKA,GACC,kBAAmB,CACnB,eACD,CAEA,GACC,kBAAmB,CACnB,gBACD,CAEA,GACC,kBAAmB,CACnB,eACD,CAEA,GACC,iBAAkB,CAClB,eACD,CAOA,MACC,cAAe,CACf,eAGD,CAEA,eAIC,qBACD,CAQA,gDAMC,aAAc,CACd,aAAc,CACd,iBAAkB,CAClB,eAAmB,CACnB,eAAgB,CAChB,eACD,CAEA,QACC,cACD,CAEA,QACC,cACD,CAEA,QACC,cACD,CAEA,QACC,cACD,CAEA,MACC,aAAc,CACd,UACD,CAkBA,IACC,oBAAqB,CACrB,kBACD,CAEA,WACC,+BAAiC,CACjC,oCAAsC,CACtC,qBAAyB,CACzB,iBACD,CAEA,aACC,eAAgB,CAChB,iBACD,CAEA,OACC,QACD,CAGA,KACC,kBAAmB,CACnB,iCAAkC,CAClC,aAAc,CACd,sBACD,CAEA,EACC,aAAc,CACd,kBAAmB,CACnB,yBACD,CAEA,QACC,aAAuB,CACvB,wBACD,CAEA,SACC,aAAuB,CACvB,uBACD,CAEA,OACC,yBAAmC,CACnC,oCAAqC,CACrC,kBACD,CAEA,iBACC,kBAA4B,CAC5B,6BAA8B,CAC9B,aAAc,CACd,0BACD,CAEA,YACC,kBAA4B,CAC5B,6BAA8B,CAC9B,aAAc,CACd,0BACD,CAEA,MACC,eAAgB,CAChB,oCAAqC,CACrC,oBAAuB,CACvB,mBAAqB,CACrB,wBAAyB,CACzB,sCAAuC,CACvC,cACD,CAEA,KACC,eAAgB,CAChB,kBACD,CAEA,SAEC,eAAgB,CAChB,kBAAqB,CACrB,mBAAqB,CACrB,kCAAmC,CAC3B,0BACT,CAEA,QACC,cAAe,CACf,eACD,CAEA,IACC,eAAgB,CACd,aAAc,CACX,UACN,CAEA,SACC,aAAc,CACd,iBAAoB,CACpB,iBAAkB,CAClB,eACD,CAIA,sBACC,YACD,CAEA,SACC,YACD,CAEA,2BAEC,4BAA8B,CAC9B,6BACD,CAKA,mBACC,UACD,CAKA,mBACC,kBAAmB,CACnB,uBAAwB,CACxB,mBAAqB,CACrB,aAAc,CACd,0BAA2B,CAC3B,iBAAoB,CACpB,iBAAkB,CAClB,UACD,CAEA,yBACC,QACD","file":"a11yana.min.css","sourcesContent":["/*\n\tuniversalize.css (v1.0.2) — by Alexander Sandberg (https://alexandersandberg.com)\n\t------------------------------------------------------------------------------\n\n\tBased on Sanitize.css (https://github.com/csstools/sanitize.css).\n\n\t(all) = Used for all browsers.\n\tx lines = Applies to x lines down, including current line.\n\n\t------------------------------------------------------------------------------\n*/\n\n/*\n\tPrevent padding and border from affecting width (all)\n*/\n*,\n::before,\n::after {\n\tbox-sizing: border-box;\n}\n\n/*\n\t1. Inherit text decoration (all)\n\t2. Inherit vertical alignment (all)\n */\n::before,\n::after {\n\ttext-decoration: inherit; /* 1 */\n\tvertical-align: inherit; /* 2 */\n}\n\n/*\n\t1. Use default UI font (all)\n\t2. Make font size more accessible to everyone (all)\n\t3. Make line height consistent (all)\n\t4. Prevent font size adjustment after orientation changes (IE, iOS)\n\t5. Prevent overflow from long words (all)\n*/\nhtml {\n\tfont-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; /* 1 */\n\tfont-size: 125%; /* 2 */\n\tline-height: 1.6; /* 3 */\n\t-webkit-text-size-adjust: 100%; /* 4 */\n\tword-break: break-word; /* 5 */\n}\n\n/*\n\tWhitespace between content and viewport edge (all)\n*/\nbody {\n\tpadding: 1em;\n}\n\n/*\n\tRemove inconsistent and unnecessary margins\n*/\nbody, /* (all) */\ndl dl, /* (Chrome, Edge, IE, Safari) 5 lines */\ndl ol,\ndl ul,\nol dl,\nul dl,\nol ol, /* (Edge 18-, IE) 4 lines */\nol ul,\nul ol,\nul ul,\nbutton, /* (Safari) 3 lines */\ninput,\nselect,\ntextarea { /* (Firefox, Safari) */\n\tmargin: 0;\n}\n\n/*\n\t1. Show overflow (IE18-, IE)\n\t2. Correct sizing (Firefox)\n*/\nhr {\n\toverflow: visible;\n\theight: 0;\n}\n\n/*\n\tAdd correct display\n*/\nmain, /* (IE11) */\ndetails { /* (Edge 18-, IE) */\n\tdisplay: block;\n}\n\nsummary { /* (all) */\n\tdisplay: list-item;\n}\n\n/*\n\tRemove style on navigation lists (all)\n*/\nnav ol,\nnav ul {\n\tlist-style: none;\n\tpadding: 0;\n}\n\n/*\n\t1. Use default monospace UI font (all)\n\t2. Correct font sizing (all)\n*/\npre,\ncode,\nkbd,\nsamp {\n\tfont-family:\n\t\t/* macOS 10.10+ */ \"Menlo\",\n\t\t/* Windows 6+ */ \"Consolas\",\n\t\t/* Android 4+ */ \"Roboto Mono\",\n\t\t/* Ubuntu 10.10+ */ \"Ubuntu Monospace\",\n\t\t/* KDE Plasma 5+ */ \"Noto Mono\",\n\t\t/* KDE Plasma 4+ */ \"Oxygen Mono\",\n\t\t/* Linux/OpenOffice fallback */ \"Liberation Mono\",\n\t\t/* fallback */ monospace,\n\t\t/* macOS emoji */ \"Apple Color Emoji\",\n\t\t/* Windows emoji */ \"Segoe UI Emoji\",\n\t\t/* Windows emoji */ \"Segoe UI Symbol\",\n\t\t/* Linux emoji */ \"Noto Color Emoji\"; /* 1 */\n\n\tfont-size: 1em; /* 2 */\n}\n\n/*\n\t1. Change cursor for elements (all)\n\t2. Add correct text decoration (Edge 18-, IE, Safari)\n*/\nabbr[title] {\n\tcursor: help; /* 1 */\n\ttext-decoration: underline; /* 2 */\n\t-webkit-text-decoration: underline dotted;\n\t text-decoration: underline dotted; /* 2 */\n}\n\n/*\n\tAdd correct font weight (Chrome, Edge, Safari)\n*/\nb,\nstrong {\n\tfont-weight: bolder;\n}\n\n/*\n\tAdd correct font size (all)\n*/\nsmall {\n\tfont-size: 80%;\n}\n\n/*\n\tChange alignment on media elements (all)\n*/\naudio,\ncanvas,\niframe,\nimg,\nsvg,\nvideo {\n\tvertical-align: middle;\n}\n\n/*\n\tRemove border on iframes (all)\n*/\niframe {\n\tborder-style: none;\n}\n\n/*\n\tChange fill color to match text (all)\n*/\nsvg:not([fill]) {\n\tfill: currentColor;\n}\n\n/*\n\tHide overflow (IE11)\n*/\nsvg:not(:root) {\n\toverflow: hidden;\n}\n\n/*\n\tShow overflow (Edge 18-, IE)\n*/\nbutton,\ninput {\n\toverflow: visible;\n}\n\n/*\n\tRemove inheritance of text transform (Edge 18-, Firefox, IE)\n*/\nbutton,\nselect {\n\ttext-transform: none;\n}\n\n/*\n\tCorrect inability to style buttons (iOS, Safari)\n*/\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n\t-webkit-appearance: button;\n}\n\n/*\n\t1. Fix inconsistent appearance (all)\n\t2. Correct padding (Firefox)\n*/\nfieldset {\n\tborder: 1px solid #666; /* 1 */\n\tpadding: 0.35em 0.75em 0.625em; /* 2 */\n}\n\n/*\n\t1. Correct color inheritance from
(IE)\n\t2. Correct text wrapping (Edge 18-, IE)\n*/\nlegend {\n\tcolor: inherit; /* 1 */\n\tdisplay: table; /* 2 */\n\tmax-width: 100%; /* 2 */\n\twhite-space: normal; /* 2 */\n}\n\n/*\n\t1. Add correct display (Edge 18-, IE)\n\t2. Add correct vertical alignment (Chrome, Edge, Firefox)\n*/\nprogress {\n\tdisplay: inline-block; /* 1 */\n\tvertical-align: baseline; /* 2 */\n}\n\n/*\n\t1. Remove default vertical scrollbar (IE)\n\t2. Change resize direction (all)\n*/\ntextarea {\n\toverflow: auto; /* 1 */\n\tresize: vertical; /* 2 */\n}\n\n/*\n\t1. Correct outline style (Safari)\n\t2. Correct odd appearance (Chrome, Edge, Safari)\n*/\n[type=\"search\"] {\n\toutline-offset: -2px; /* 1 */\n\t-webkit-appearance: textfield; /* 2 */\n}\n\n/*\n\tCorrect cursor style of increment and decrement buttons (Safari)\n*/\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n\theight: auto;\n}\n\n/*\n\tCorrect text style (Chrome, Edge, Safari)\n*/\n::-webkit-input-placeholder {\n\tcolor: inherit;\n\topacity: 0.54;\n}\n\n/*\n\tRemove inner padding (Chrome, Edge, Safari on macOS)\n*/\n::-webkit-search-decoration {\n\t-webkit-appearance: none;\n}\n\n/*\n\t1. Inherit font properties (Safari)\n\t2. Correct inability to style upload buttons (iOS, Safari)\n*/\n::-webkit-file-upload-button {\n\tfont: inherit; /* 1 */\n\t-webkit-appearance: button; /* 2 */\n}\n\n/*\n\tRemove inner border and padding of focus outlines (Firefox)\n*/\n::-moz-focus-inner {\n\tborder-style: none;\n\tpadding: 0;\n}\n\n/*\n\tRestore focus outline style (Firefox)\n*/\n:-moz-focusring {\n\toutline: 1px dotted ButtonText;\n}\n\n/*\n\tRemove :invalid styles (Firefox)\n*/\n:-moz-ui-invalid {\n\tbox-shadow: none;\n}\n\n/*\n\tChange cursor on busy elements (all)\n*/\n[aria-busy=\"true\"] {\n\tcursor: progress;\n}\n\n/*\n\tChange cursor on control elements (all)\n*/\n[aria-controls] {\n\tcursor: pointer;\n}\n\n/*\n\tChange cursor on disabled, non-editable, or inoperable elements (all)\n*/\n[aria-disabled=\"true\"],\n[disabled] {\n\tcursor: not-allowed;\n}\n\n/*\n\tChange display on visually hidden accessible elements (all)\n*/\n[aria-hidden=\"false\"][hidden] {\n\tdisplay: inline;\n\tdisplay: initial;\n}\n\n[aria-hidden=\"false\"][hidden]:not(:focus) {\n\tclip: rect(0, 0, 0, 0);\n\tposition: absolute;\n}\n\n/*\n\tPrint out URLs after links (all)\n*/\n@media print {\n\ta[href^=\"http\"]::after {\n\t\tcontent: \" (\" attr(href) \")\";\n\t}\n}\n/* ----- Variables ----- */\n\n/* Light mode default, dark mode if recognized as preferred */\n:root {\n\t--background-main: #fefefe;\n\t--background-element: #eee;\n\t--background-inverted: #282a36;\n\t--text-main: #1f1f1f;\n\t--text-alt: #333;\n\t--text-inverted: #fefefe;\n\t--border-element: #282a36;\n\t--theme: #7a283a;\n\t--theme-light: hsl(0, 25%, 65%);\n\t--theme-dark: hsl(0, 25%, 45%);\n}\n\n/* @media (prefers-color-scheme: dark) {\n :root {\n --background-main: #282a36;\n --text-main: #fefefe;\n }\n} */\n/* ----- Base ----- */\n\nbody {\n\tmargin: auto;\n\tmax-width: 36rem;\n\tmin-height: 100%;\n\toverflow-x: hidden;\n}\n/* ----- Typography ----- */\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n\tmargin: 3.2rem 0 0.8em;\n}\n\n/*\n\tHeading sizes based on a modular scale of 1.25 (all)\n*/\nh1 {\n\tfont-size: 2.441rem;\n\tline-height: 1.1;\n}\n\nh2 {\n\tfont-size: 1.953rem;\n\tline-height: 1.15;\n}\n\nh3 {\n\tfont-size: 1.563rem;\n\tline-height: 1.2;\n}\n\nh4 {\n\tfont-size: 1.25rem;\n\tline-height: 1.3;\n}\n\nh5 {\n\tfont-size: 1rem;\n\tline-height: 1.4;\n}\n\nh6 {\n\tfont-size: 1rem;\n\tline-height: 1.4;\n\n\t/* differentiate from h5, somehow. color or style? */\n}\n\np,\nul,\nol,\nfigure {\n\tmargin: 0.6rem 0 1.2rem;\n}\n\n/*\n\tSubtitles\n\t- Change to header h* + span instead?\n\t- Add support for taglines (small title above main) as well? Needs
:\n\t header > span:first-child\n*/\nh1 span,\nh2 span,\nh3 span,\nh4 span,\nh5 span,\nh6 span {\n\tdisplay: block;\n\tfont-size: 1em;\n\tfont-style: italic;\n\tfont-weight: normal;\n\tline-height: 1.3;\n\tmargin-top: 0.3em;\n}\n\nh1 span {\n\tfont-size: 0.6em;\n}\n\nh2 span {\n\tfont-size: 0.7em;\n}\n\nh3 span {\n\tfont-size: 0.8em;\n}\n\nh4 span {\n\tfont-size: 0.9em;\n}\n\nsmall {\n\tfont-size: 1em;\n\topacity: 0.8; /* or some other way of differentiating it from body text */\n}\n\nmark {\n\tbackground: pink; /* change to proper color, based on theme */\n}\n\n/*\n\tDefine a custom tab-size in browsers that support it.\n*/\npre {\n\t-moz-tab-size: 4;\n\t -o-tab-size: 4;\n\t tab-size: 4;\n}\n\n/*\n\tLong underlined text can be hard to read for dyslexics. Replace with bold.\n*/\nins {\n\ttext-decoration: none;\n\tfont-weight: bolder;\n}\n\nblockquote {\n\tborder-left: 0.3rem solid #7a283a;\n\tborder-left: 0.3rem solid var(--theme);\n\tmargin: 0.6rem 0 1.2rem 0;\n\tpadding-left: 2rem;\n}\n\nblockquote p {\n\tfont-size: 1.2em;\n\tfont-style: italic;\n}\n\nfigure {\n\tmargin: 0;\n}\n/* ----- Layout ----- */\n\nbody {\n\tbackground: #fefefe;\n\tbackground: var(--background-main);\n\tcolor: #1f1f1f;\n\tcolor: var(--text-main);\n}\n\na {\n\tcolor: #7a283a;\n\tcolor: var(--theme);\n\ttext-decoration: underline;\n}\n\na:hover {\n\tcolor: hsl(0, 25%, 65%);\n\tcolor: var(--theme-light);\n}\n\na:active {\n\tcolor: hsl(0, 25%, 45%);\n\tcolor: var(--theme-dark);\n}\n\n:focus {\n\toutline: 3px solid hsl(0, 25%, 65%);\n\toutline: 3px solid var(--theme-light);\n\toutline-offset: 3px;\n}\n\n::-moz-selection {\n\tbackground: hsl(0, 25%, 65%);\n\tbackground: var(--theme-light);\n\tcolor: #fefefe;\n\tcolor: var(--text-inverted);\n}\n\n::selection {\n\tbackground: hsl(0, 25%, 65%);\n\tbackground: var(--theme-light);\n\tcolor: #fefefe;\n\tcolor: var(--text-inverted);\n}\n\ninput {\n\tbackground: #eee;\n\tbackground: var(--background-element);\n\tpadding: 0.5rem 0.65rem;\n\tborder-radius: 0.5rem;\n\tborder: 2px solid #282a36;\n\tborder: 2px solid var(--border-element);\n\tfont-size: 1rem;\n}\n\nmark {\n\tbackground: pink; /* change to proper color, based on theme */\n\tpadding: 0.1em 0.15em;\n}\n\nkbd, /* different style for kbd? */\ncode {\n\tbackground: #eee;\n\tpadding: 0.1em 0.25em;\n\tborder-radius: 0.2rem;\n\t-webkit-box-decoration-break: clone;\n\t box-decoration-break: clone;\n}\n\nkbd > kbd {\n\tpadding-left: 0;\n\tpadding-right: 0;\n}\n\npre {\n\t-moz-tab-size: 4;\n\t -o-tab-size: 4;\n\t tab-size: 4;\n}\n\npre code {\n\tdisplay: block;\n\tpadding: 0.3em 0.7em;\n\tword-break: normal;\n\toverflow-x: auto;\n}\n/* ----- Forms ----- */\n/* ----- Misc ----- */\n\n[tabindex=\"-1\"]:focus {\n\toutline: none;\n}\n\n[hidden] {\n\tdisplay: none;\n}\n\n[aria-disabled],\n[disabled] {\n\tcursor: not-allowed !important;\n\tpointer-events: none !important;\n}\n\n/*\n\tStyle anchor links only\n*/\na[href^='#']::after {\n\tcontent: '';\n}\n\n/*\n\tSkip link\n*/\nbody > a:first-child {\n\tbackground: #7a283a;\n\tbackground: var(--theme);\n\tborder-radius: 0.2rem;\n\tcolor: #fefefe;\n\tcolor: var(--text-inverted);\n\tpadding: 0.3em 0.5em;\n\tposition: absolute;\n\ttop: -10rem;\n}\n\nbody > a:first-child:focus {\n\ttop: 1rem;\n}\n"]} -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | a11yana 8 | 9 | 10 | 11 | Skip to main content 12 | 13 |
14 |

15 | a11yana 16 | A classless CSS framework 17 |

18 |

a11yana (pronounced allyana) is a classless CSS framework with a focus on accessibility.

19 |

This is still in the early stages! See the project on GitHub for a status of the work towards the initial release.

20 |
21 | 22 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | command = "npm install && npm run build" -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "a11yana", 3 | "version": "0.0.1", 4 | "description": "", 5 | "main": "dist/a11yana.min.css", 6 | "style": "dist/a11yana.min.css", 7 | "repository": { 8 | "type": "git", 9 | "url": "git+https://github.com/alexandersandberg/a11yana.git" 10 | }, 11 | "keywords": [ 12 | "css", 13 | "accessibility", 14 | "a11y", 15 | "minimal", 16 | "css-framework", 17 | "classless" 18 | ], 19 | "author": "Alexander Sandberg (https://alexandersandberg.com)", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/alexandersandberg/a11yana/issues" 23 | }, 24 | "homepage": "https://github.com/alexandersandberg/a11yana#readme", 25 | "devDependencies": { 26 | "cssnano": "^4.1.10", 27 | "onchange": "^6.0.0", 28 | "postcss-cli": "^6.1.2", 29 | "postcss-preset-env": "^6.6.0", 30 | "rimraf": "^2.6.3", 31 | "stylelint": "^10.1.0", 32 | "stylelint-config-standard": "^18.3.0" 33 | }, 34 | "scripts": { 35 | "clean": "rimraf dist", 36 | "stylelint": "stylelint \"src/*.css\"", 37 | "postcss": "cat src/*.css | postcss -o dist/a11yana.css", 38 | "minify": "postcss -u cssnano -o dist/a11yana.min.css dist/a11yana.css -m", 39 | "build": "npm run stylelint && npm run postcss && npm run minify && echo \"📦 Finished building\"", 40 | "dev": "npm run build -s && onchange \"src/*.css\" -- npm run build -s \">\" {{changed}} \"(\"{{event}}\")\"" 41 | }, 42 | "browserslist": [ 43 | "> 0.1%", 44 | "not dead" 45 | ] 46 | } 47 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require("postcss-preset-env")({ 4 | "autoprefixer": true, 5 | "stage": 1 6 | }), 7 | ], 8 | }; 9 | -------------------------------------------------------------------------------- /src/0-universalize.css: -------------------------------------------------------------------------------- 1 | /* 2 | universalize.css (v1.0.2) — by Alexander Sandberg (https://alexandersandberg.com) 3 | ------------------------------------------------------------------------------ 4 | 5 | Based on Sanitize.css (https://github.com/csstools/sanitize.css). 6 | 7 | (all) = Used for all browsers. 8 | x lines = Applies to x lines down, including current line. 9 | 10 | ------------------------------------------------------------------------------ 11 | */ 12 | 13 | /* 14 | Prevent padding and border from affecting width (all) 15 | */ 16 | *, 17 | ::before, 18 | ::after { 19 | box-sizing: border-box; 20 | } 21 | 22 | /* 23 | 1. Inherit text decoration (all) 24 | 2. Inherit vertical alignment (all) 25 | */ 26 | ::before, 27 | ::after { 28 | text-decoration: inherit; /* 1 */ 29 | vertical-align: inherit; /* 2 */ 30 | } 31 | 32 | /* 33 | 1. Use default UI font (all) 34 | 2. Make font size more accessible to everyone (all) 35 | 3. Make line height consistent (all) 36 | 4. Prevent font size adjustment after orientation changes (IE, iOS) 37 | 5. Prevent overflow from long words (all) 38 | */ 39 | html { 40 | font-family: system-ui; /* 1 */ 41 | font-size: 125%; /* 2 */ 42 | line-height: 1.6; /* 3 */ 43 | -webkit-text-size-adjust: 100%; /* 4 */ 44 | word-break: break-word; /* 5 */ 45 | } 46 | 47 | /* 48 | Whitespace between content and viewport edge (all) 49 | */ 50 | body { 51 | padding: 1em; 52 | } 53 | 54 | /* 55 | Remove inconsistent and unnecessary margins 56 | */ 57 | body, /* (all) */ 58 | dl dl, /* (Chrome, Edge, IE, Safari) 5 lines */ 59 | dl ol, 60 | dl ul, 61 | ol dl, 62 | ul dl, 63 | ol ol, /* (Edge 18-, IE) 4 lines */ 64 | ol ul, 65 | ul ol, 66 | ul ul, 67 | button, /* (Safari) 3 lines */ 68 | input, 69 | select, 70 | textarea { /* (Firefox, Safari) */ 71 | margin: 0; 72 | } 73 | 74 | /* 75 | 1. Show overflow (IE18-, IE) 76 | 2. Correct sizing (Firefox) 77 | */ 78 | hr { 79 | overflow: visible; 80 | height: 0; 81 | } 82 | 83 | /* 84 | Add correct display 85 | */ 86 | main, /* (IE11) */ 87 | details { /* (Edge 18-, IE) */ 88 | display: block; 89 | } 90 | 91 | summary { /* (all) */ 92 | display: list-item; 93 | } 94 | 95 | /* 96 | Remove style on navigation lists (all) 97 | */ 98 | nav ol, 99 | nav ul { 100 | list-style: none; 101 | padding: 0; 102 | } 103 | 104 | /* 105 | 1. Use default monospace UI font (all) 106 | 2. Correct font sizing (all) 107 | */ 108 | pre, 109 | code, 110 | kbd, 111 | samp { 112 | font-family: 113 | /* macOS 10.10+ */ "Menlo", 114 | /* Windows 6+ */ "Consolas", 115 | /* Android 4+ */ "Roboto Mono", 116 | /* Ubuntu 10.10+ */ "Ubuntu Monospace", 117 | /* KDE Plasma 5+ */ "Noto Mono", 118 | /* KDE Plasma 4+ */ "Oxygen Mono", 119 | /* Linux/OpenOffice fallback */ "Liberation Mono", 120 | /* fallback */ monospace, 121 | /* macOS emoji */ "Apple Color Emoji", 122 | /* Windows emoji */ "Segoe UI Emoji", 123 | /* Windows emoji */ "Segoe UI Symbol", 124 | /* Linux emoji */ "Noto Color Emoji"; /* 1 */ 125 | 126 | font-size: 1em; /* 2 */ 127 | } 128 | 129 | /* 130 | 1. Change cursor for elements (all) 131 | 2. Add correct text decoration (Edge 18-, IE, Safari) 132 | */ 133 | abbr[title] { 134 | cursor: help; /* 1 */ 135 | text-decoration: underline; /* 2 */ 136 | text-decoration: underline dotted; /* 2 */ 137 | } 138 | 139 | /* 140 | Add correct font weight (Chrome, Edge, Safari) 141 | */ 142 | b, 143 | strong { 144 | font-weight: bolder; 145 | } 146 | 147 | /* 148 | Add correct font size (all) 149 | */ 150 | small { 151 | font-size: 80%; 152 | } 153 | 154 | /* 155 | Change alignment on media elements (all) 156 | */ 157 | audio, 158 | canvas, 159 | iframe, 160 | img, 161 | svg, 162 | video { 163 | vertical-align: middle; 164 | } 165 | 166 | /* 167 | Remove border on iframes (all) 168 | */ 169 | iframe { 170 | border-style: none; 171 | } 172 | 173 | /* 174 | Change fill color to match text (all) 175 | */ 176 | svg:not([fill]) { 177 | fill: currentColor; 178 | } 179 | 180 | /* 181 | Hide overflow (IE11) 182 | */ 183 | svg:not(:root) { 184 | overflow: hidden; 185 | } 186 | 187 | /* 188 | Show overflow (Edge 18-, IE) 189 | */ 190 | button, 191 | input { 192 | overflow: visible; 193 | } 194 | 195 | /* 196 | Remove inheritance of text transform (Edge 18-, Firefox, IE) 197 | */ 198 | button, 199 | select { 200 | text-transform: none; 201 | } 202 | 203 | /* 204 | Correct inability to style buttons (iOS, Safari) 205 | */ 206 | button, 207 | [type="button"], 208 | [type="reset"], 209 | [type="submit"] { 210 | -webkit-appearance: button; 211 | } 212 | 213 | /* 214 | 1. Fix inconsistent appearance (all) 215 | 2. Correct padding (Firefox) 216 | */ 217 | fieldset { 218 | border: 1px solid #666; /* 1 */ 219 | padding: 0.35em 0.75em 0.625em; /* 2 */ 220 | } 221 | 222 | /* 223 | 1. Correct color inheritance from
(IE) 224 | 2. Correct text wrapping (Edge 18-, IE) 225 | */ 226 | legend { 227 | color: inherit; /* 1 */ 228 | display: table; /* 2 */ 229 | max-width: 100%; /* 2 */ 230 | white-space: normal; /* 2 */ 231 | } 232 | 233 | /* 234 | 1. Add correct display (Edge 18-, IE) 235 | 2. Add correct vertical alignment (Chrome, Edge, Firefox) 236 | */ 237 | progress { 238 | display: inline-block; /* 1 */ 239 | vertical-align: baseline; /* 2 */ 240 | } 241 | 242 | /* 243 | 1. Remove default vertical scrollbar (IE) 244 | 2. Change resize direction (all) 245 | */ 246 | textarea { 247 | overflow: auto; /* 1 */ 248 | resize: vertical; /* 2 */ 249 | } 250 | 251 | /* 252 | 1. Correct outline style (Safari) 253 | 2. Correct odd appearance (Chrome, Edge, Safari) 254 | */ 255 | [type="search"] { 256 | outline-offset: -2px; /* 1 */ 257 | -webkit-appearance: textfield; /* 2 */ 258 | } 259 | 260 | /* 261 | Correct cursor style of increment and decrement buttons (Safari) 262 | */ 263 | ::-webkit-inner-spin-button, 264 | ::-webkit-outer-spin-button { 265 | height: auto; 266 | } 267 | 268 | /* 269 | Correct text style (Chrome, Edge, Safari) 270 | */ 271 | ::-webkit-input-placeholder { 272 | color: inherit; 273 | opacity: 0.54; 274 | } 275 | 276 | /* 277 | Remove inner padding (Chrome, Edge, Safari on macOS) 278 | */ 279 | ::-webkit-search-decoration { 280 | -webkit-appearance: none; 281 | } 282 | 283 | /* 284 | 1. Inherit font properties (Safari) 285 | 2. Correct inability to style upload buttons (iOS, Safari) 286 | */ 287 | ::-webkit-file-upload-button { 288 | font: inherit; /* 1 */ 289 | -webkit-appearance: button; /* 2 */ 290 | } 291 | 292 | /* 293 | Remove inner border and padding of focus outlines (Firefox) 294 | */ 295 | ::-moz-focus-inner { 296 | border-style: none; 297 | padding: 0; 298 | } 299 | 300 | /* 301 | Restore focus outline style (Firefox) 302 | */ 303 | :-moz-focusring { 304 | outline: 1px dotted ButtonText; 305 | } 306 | 307 | /* 308 | Remove :invalid styles (Firefox) 309 | */ 310 | :-moz-ui-invalid { 311 | box-shadow: none; 312 | } 313 | 314 | /* 315 | Change cursor on busy elements (all) 316 | */ 317 | [aria-busy="true"] { 318 | cursor: progress; 319 | } 320 | 321 | /* 322 | Change cursor on control elements (all) 323 | */ 324 | [aria-controls] { 325 | cursor: pointer; 326 | } 327 | 328 | /* 329 | Change cursor on disabled, non-editable, or inoperable elements (all) 330 | */ 331 | [aria-disabled="true"], 332 | [disabled] { 333 | cursor: not-allowed; 334 | } 335 | 336 | /* 337 | Change display on visually hidden accessible elements (all) 338 | */ 339 | [aria-hidden="false"][hidden] { 340 | display: initial; 341 | } 342 | 343 | [aria-hidden="false"][hidden]:not(:focus) { 344 | clip: rect(0, 0, 0, 0); 345 | position: absolute; 346 | } 347 | 348 | /* 349 | Print out URLs after links (all) 350 | */ 351 | @media print { 352 | a[href^="http"]::after { 353 | content: " (" attr(href) ")"; 354 | } 355 | } 356 | -------------------------------------------------------------------------------- /src/1-variables.css: -------------------------------------------------------------------------------- 1 | /* ----- Variables ----- */ 2 | 3 | /* Light mode default, dark mode if recognized as preferred */ 4 | :root { 5 | --background-main: #fefefe; 6 | --background-element: #eee; 7 | --background-inverted: #282a36; 8 | --text-main: #1f1f1f; 9 | --text-alt: #333; 10 | --text-inverted: #fefefe; 11 | --border-element: #282a36; 12 | --theme: #7a283a; 13 | --theme-light: hsl(0, 25%, 65%); 14 | --theme-dark: hsl(0, 25%, 45%); 15 | } 16 | 17 | /* @media (prefers-color-scheme: dark) { 18 | :root { 19 | --background-main: #282a36; 20 | --text-main: #fefefe; 21 | } 22 | } */ 23 | -------------------------------------------------------------------------------- /src/2-base.css: -------------------------------------------------------------------------------- 1 | /* ----- Base ----- */ 2 | 3 | body { 4 | margin: auto; 5 | max-width: 36rem; 6 | min-height: 100%; 7 | overflow-x: hidden; 8 | } 9 | -------------------------------------------------------------------------------- /src/3-typography.css: -------------------------------------------------------------------------------- 1 | /* ----- Typography ----- */ 2 | 3 | h1, 4 | h2, 5 | h3, 6 | h4, 7 | h5, 8 | h6 { 9 | margin: 3.2rem 0 0.8em; 10 | } 11 | 12 | /* 13 | Heading sizes based on a modular scale of 1.25 (all) 14 | */ 15 | h1 { 16 | font-size: 2.441rem; 17 | line-height: 1.1; 18 | } 19 | 20 | h2 { 21 | font-size: 1.953rem; 22 | line-height: 1.15; 23 | } 24 | 25 | h3 { 26 | font-size: 1.563rem; 27 | line-height: 1.2; 28 | } 29 | 30 | h4 { 31 | font-size: 1.25rem; 32 | line-height: 1.3; 33 | } 34 | 35 | h5 { 36 | font-size: 1rem; 37 | line-height: 1.4; 38 | } 39 | 40 | h6 { 41 | font-size: 1rem; 42 | line-height: 1.4; 43 | 44 | /* differentiate from h5, somehow. color or style? */ 45 | } 46 | 47 | p, 48 | ul, 49 | ol, 50 | figure { 51 | margin: 0.6rem 0 1.2rem; 52 | } 53 | 54 | /* 55 | Subtitles 56 | - Change to header h* + span instead? 57 | - Add support for taglines (small title above main) as well? Needs
: 58 | header > span:first-child 59 | */ 60 | h1 span, 61 | h2 span, 62 | h3 span, 63 | h4 span, 64 | h5 span, 65 | h6 span { 66 | display: block; 67 | font-size: 1em; 68 | font-style: italic; 69 | font-weight: normal; 70 | line-height: 1.3; 71 | margin-top: 0.3em; 72 | } 73 | 74 | h1 span { 75 | font-size: 0.6em; 76 | } 77 | 78 | h2 span { 79 | font-size: 0.7em; 80 | } 81 | 82 | h3 span { 83 | font-size: 0.8em; 84 | } 85 | 86 | h4 span { 87 | font-size: 0.9em; 88 | } 89 | 90 | small { 91 | font-size: 1em; 92 | opacity: 0.8; /* or some other way of differentiating it from body text */ 93 | } 94 | 95 | mark { 96 | background: pink; /* change to proper color, based on theme */ 97 | } 98 | 99 | /* 100 | Define a custom tab-size in browsers that support it. 101 | */ 102 | pre { 103 | tab-size: 4; 104 | } 105 | 106 | /* 107 | Long underlined text can be hard to read for dyslexics. Replace with bold. 108 | */ 109 | ins { 110 | text-decoration: none; 111 | font-weight: bolder; 112 | } 113 | 114 | blockquote { 115 | border-left: 0.3rem solid var(--theme); 116 | margin: 0.6rem 0 1.2rem 0; 117 | padding-left: 2rem; 118 | } 119 | 120 | blockquote p { 121 | font-size: 1.2em; 122 | font-style: italic; 123 | } 124 | 125 | figure { 126 | margin: 0; 127 | } 128 | -------------------------------------------------------------------------------- /src/4-style.css: -------------------------------------------------------------------------------- 1 | /* ----- Layout ----- */ 2 | 3 | body { 4 | background: var(--background-main); 5 | color: var(--text-main); 6 | } 7 | 8 | a { 9 | color: var(--theme); 10 | text-decoration: underline; 11 | } 12 | 13 | a:hover { 14 | color: var(--theme-light); 15 | } 16 | 17 | a:active { 18 | color: var(--theme-dark); 19 | } 20 | 21 | :focus { 22 | outline: 3px solid var(--theme-light); 23 | outline-offset: 3px; 24 | } 25 | 26 | ::selection { 27 | background: var(--theme-light); 28 | color: var(--text-inverted); 29 | } 30 | 31 | input { 32 | background: var(--background-element); 33 | padding: 0.5rem 0.65rem; 34 | border-radius: 0.5rem; 35 | border: 2px solid var(--border-element); 36 | font-size: 1rem; 37 | } 38 | 39 | mark { 40 | background: pink; /* change to proper color, based on theme */ 41 | padding: 0.1em 0.15em; 42 | } 43 | 44 | kbd, /* different style for kbd? */ 45 | code { 46 | background: #eee; 47 | padding: 0.1em 0.25em; 48 | border-radius: 0.2rem; 49 | box-decoration-break: clone; 50 | } 51 | 52 | kbd > kbd { 53 | padding-left: 0; 54 | padding-right: 0; 55 | } 56 | 57 | pre { 58 | tab-size: 4; 59 | } 60 | 61 | pre code { 62 | display: block; 63 | padding: 0.3em 0.7em; 64 | word-break: normal; 65 | overflow-x: auto; 66 | } 67 | -------------------------------------------------------------------------------- /src/5-forms.css: -------------------------------------------------------------------------------- 1 | /* ----- Forms ----- */ 2 | -------------------------------------------------------------------------------- /src/6-misc.css: -------------------------------------------------------------------------------- 1 | /* ----- Misc ----- */ 2 | 3 | [tabindex="-1"]:focus { 4 | outline: none; 5 | } 6 | 7 | [hidden] { 8 | display: none; 9 | } 10 | 11 | [aria-disabled], 12 | [disabled] { 13 | cursor: not-allowed !important; 14 | pointer-events: none !important; 15 | } 16 | 17 | /* 18 | Style anchor links only 19 | */ 20 | a[href^='#']::after { 21 | content: ''; 22 | } 23 | 24 | /* 25 | Skip link 26 | */ 27 | body > a:first-child { 28 | background: var(--theme); 29 | border-radius: 0.2rem; 30 | color: var(--text-inverted); 31 | padding: 0.3em 0.5em; 32 | position: absolute; 33 | top: -10rem; 34 | } 35 | 36 | body > a:first-child:focus { 37 | top: 1rem; 38 | } 39 | -------------------------------------------------------------------------------- /tester.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML5 elements tester 8 | 9 | 10 | 11 | Skip to main content 12 | 13 |
14 |

HTML5 elements tester

15 |

A test page containing most of the HTML5 elements that you'll ever need. Useful for testing CSS resets or CSS frameworks.

16 |

A project by Alexander Sandberg · GitHub repository

17 |
18 | 19 |
20 | 34 |
35 |
36 |

Sections

37 |

Elements: <body>, <article>, <section>, <nav>, <aside>, <h1>–<h6>, <header>, <footer>

38 |
39 | 40 |
41 |
42 |

<h1>–<h6>:

43 |
44 | 45 | 49 |

<h1> A unique title, specific for the page

50 |

<h2> Heading levels should reflect structure, not style

51 |

It can also be useful to test how body text below a heading appears on the page, for example to check the margin. This text is wrapped in <p> and is a direct sibling to the above <h2>.

52 |

<h3> If you need a visually smaller title, use CSS

53 |

To create a semantically correct HTML structure that's accessible for everyone, make sure you're nesting the headings correctly. Never use more than one <h1> per page, and don't skip heading levels.

54 |

<h4> Headings below level 4 are not used as much

55 |
<h5> But that doesn't mean you should forget about them
56 |
<h6> And last, but not least, the heading with the lowest rank
57 |
58 | 59 |
60 | 63 | 64 |

All these tags are already in use on the page. The list below contains links to each use case. See the source code of this file for more details.

65 | 74 |
75 | 76 | 79 |
80 | 81 |
82 |
83 |

Grouping content

84 |

Elements: <p>, <address>, <hr>, <pre>, <blockquote>, <ol>, <ul>, <li>, <dl>, <dt>, <dd>, <figure>, <figcaption>, <main>, <div>

85 |
86 | 87 |
88 |
89 |

<p>:

90 |
91 | 92 |

Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields. [1]

93 |
94 | 95 |
96 |
97 |

<address>:

98 |
99 | 100 |
101 | Name: Alexander Sandberg
102 | Street adress: 1 Rover street
103 | State: N/A
104 | Planet: Mars
105 | Digital home: alexandersandberg.com
106 |
107 |
108 | 109 |
110 |
111 |

<hr>:

112 |
113 | 114 |
115 |
116 | 117 |
118 |
119 |

<pre>:

120 |
121 | 122 | 
Preformatted text
123 |           will be presented
124 |     exactly as written
125 |           in the         HTML file.
126 |
127 |
128 | 129 |
130 |
131 |

<blockquote>:

132 |
133 | 134 |
135 |

The text inside this blockquote is wrapped in <p> tags. Sometimes the quote is really long, and possibly have to occupy multiple lines, but that shouldn't be a problem.

136 |
137 |
138 | 139 |
140 |
141 |

<ol> + <ul> + <li>:

142 |
143 | 144 |
    145 |
  1. List item 1
    2. 146 |
  2. List item 2 147 |
      148 |
    1. List item 1
      2. 149 |
    150 |
    3. 151 |
  3. List item 3 152 |
      153 |
    • List item 1
      • 154 |
    • List item 2 155 |
        156 |
      • List item 1 157 |
          158 |
        1. List item 1
          2. 159 |
        2. List item 2
          3. 160 |
        161 |
        • 162 |
      • List item 2
        • 163 |
      164 |
      • 165 |
    • List item 3
      • 166 |
    167 |
    4. 168 |
  4. List item 4
    5. 169 |
170 |
    171 |
  • List item 1 172 |
      173 |
    • List item 1 174 |
        175 |
      • List item 1
        • 176 |
      177 |
      • 178 |
    • List item 2
      • 179 |
    180 |
    • 181 |
  • List item 2
    • 182 |
  • List item 3 183 |
      184 |
    1. List item 1
      2. 185 |
    2. List item 2
      3. 186 |
    187 |
    • 188 |
189 |
190 | 191 |
192 |
193 |

<dl> + <dt> + <dd>:

194 |
195 | 196 |
197 |
This is a term
198 |
And this is the accompanying description, explaining the above term.
199 |
You can also have multiple descriptions (<dt>), like this one, for each term (<dt>).
200 |
And why not nest lists inside this description? 201 |
202 |
Another term
203 |
With some description.
204 |
205 |
    206 |
  • List item 1
    • 207 |
208 |
    209 |
  1. List item 1
    2. 210 |
  2. List item 2
    3. 211 |
212 |
213 |
214 |
215 | 216 |
217 |
218 |

<figure> + <figcaption>:

219 |
220 | 221 |

Used with an <img>:

222 |
223 | Keanu Reeves looking fine 224 |
Wholesome Keanu Reeves from placekeanu.com.
225 |
226 | 227 |

Used with a <blockquote>:

228 |
229 |
230 |

Seek wealth, not money or status. Wealth is having assets that earn while you sleep. Money is how we transfer time and wealth. Status is your place in the social hierarchy.

231 |
232 | 233 |
234 | Naval Ravikant (@naval) on Twitter. 235 |
236 |
237 |
238 | 239 |
240 |
241 |

<main>:

242 |
243 | 244 |

See the main content of this page for a use case of <main>.

245 |
246 | 247 |
248 |
249 |

<div>:

250 |
251 | 252 |
253 |

This paragraph of text is contained inside a <div>. The element really has no special meaning, other than grouping content together, and should be used as a last resort when no other element is suitable.

254 |
255 |
256 | 257 | 260 |
261 | 262 |
263 |
264 |

Text-level semantics

265 |

Elements: <a>, <em>, <strong>, <small>, <s>, <cite>, <q>, <dfn>, <abbr>, <ruby>, <rb>, <rt>, <rtc>, <rp>, <data>, <time>, <code>, <var>, <samp>, <kbd>, <sub>, <sup>, <i>, <b>, <u>, <mark>, <bdi>, <bdo>, <span>, <br>, <wbr>

266 |
267 | 268 | 281 | 282 |
283 |
284 |

<em> + <i> + <strong> + <b>:

285 |
286 | 287 |

The <em> element represents stress emphasis of its contents. Meanwhile, <i> is since HTML5 used for text in an alternative voice or mood, or otherwise offset from the normal prose, as you may define it.

288 |

If you want to draw attention to some text, feel free to use <b>. However, if you want to mark the importance of something, you should use <strong>.

289 |
290 | 291 |
292 |
293 |

<small> + <u> + <mark> + <s>:

294 |
295 | 296 |

When you want your text to represent small print, use <small>.

297 |

In most cases, there's a better element than <u> to use, but it can be useful for labelling msispelt text. Avoid using it, however, where the text could be confused for a hyperlink.

298 |

You can highlight text for reference purposes with <mark>, or if the contents is no longer accurate or relevant, wrap it with <s>.

299 |
300 | 301 |
302 |
303 |

<abbr> + <dfn>:

304 |
305 | 306 |

By wrapping an abbreviation like CSS in both <dfn> and <abbr>, we define the term. This can later be used only using <abbr>, since we already defined CSS once before.

307 |
308 | 309 |
310 |
311 |

<q> + <cite> + <data> + <time>:

312 |
313 | 314 |

When citing creative work, include the reference with a <cite> element. www.w3.org explains that A citation is not a quote (for which the <q> element is appropriate) instead, like used here.

315 |

If you want to link content with a machine-readable translation, use <data> with a value attribute. However, if this data is a time- or date-related, like the date , you have to use <time> together with the datatime attribute.

316 |
317 | 318 |
319 |
320 |

<code> + <var> + <samp> + <kbd> + <sub> + <sup>:

321 |
322 | 323 |

When sharing code-snippets, make sure to use the <code> element. This can be done both display: inline;, as well as block-level:

324 | 
* {
325 | color: rebeccapurple;
326 | background: aliceblue;
327 | }
328 |

Variables should be surrounded by <var>, or x amount of people might be confused.

329 |

Sample or quotes output are represented with <samp>: Your expression '1 + 1' equals 2.

330 |

To represent user input, like the shortcut Cmd + R on macOS, use <kbd>.

331 |

If you want to subscript or superscript text, use <sub> or <sup>.

332 |
333 | 334 |
335 |
336 |

<bdi> + <bdo> + <ruby> + <rb> + <rt> + <rtc> + <rp>:

337 |
338 | 339 |

Consider using <bdi> when working with bidirectional content, like the names Alexander and علي‎.

340 |

If you need to override the bidirectional algorithm for some content and its children, use <bdo>:

341 |

Don't forget to specify the dir attribute!

342 |

I said, don't forget to specify the dir attribute!

343 |

Some use of <ruby> and its related elements:

344 | 345 | 漢 (Kan) 346 | 字 (ji) 347 | 348 |
349 | 旧金山jiùjīnshānSan Francisco 350 |

More information about the explanation and usage of these can be read here on www.w3.org.

351 |
352 | 353 |
354 |
355 |

<span> + <br> + <wbr>:

356 |
357 | 358 |

A <span> can be used to mark up inline text for various uses, here to make the text bolder.

359 |

If you have really long text you might want to insert a
blank line with the <br> element. You can also insert word breaking opportunities using <wbr>, to help the browser break long words like Pneumonoultramicroscopicsilicovolcanoconiosis. 360 |

361 |
362 | 363 | 366 |
367 | 368 |
369 |
370 |

Edits

371 |

Elements: <ins>, <del>

372 |
373 | 374 |
375 |
376 |

<ins> + <del>:

377 |
378 | 379 |

If you make a really huge mistake, you can always go back and fix it later. And don't forget to learn from your mistake.

380 |

Both <ins> and <del> can be block-level, like this.

 381 |

Here's a block-level paragraph removal.

 382 |
383 | 384 | 387 |
388 | 389 |
390 |
391 |

Embedded content

392 |

Elements: <picture>, <source>, <img>, <iframe>, <embed>, <object>, <param>, <video>, <audio>, <track>, <map>, <area>, <math>, <svg>

393 |
394 | 395 |
396 |
397 |

<img> + <svg>:

398 |
399 | 400 | Keanu Reeves looking fine 401 | 402 | 403 | This is a fallback message. If you see this, your browser does not support inline SVG. 404 | 405 |
406 | 407 |
408 |
409 |

<picture> + <source>:

410 |
411 | 412 |

A different image will be shown depending on viewport size.

413 | 414 | 415 | Keanu Reeves looking fine 416 | 417 |
418 | 419 |
420 |
421 |

<iframe>:

422 |
423 | 424 | 425 |
426 | 427 |
428 |
429 |

<embed>:

430 |
431 | 432 | 433 |
434 | 435 |
436 |
437 |

<object> + <param>:

438 |
439 | 440 | 441 | 442 | 443 |
444 | 445 |
446 |
447 |

<video> + <audio> + <track>:

448 |
449 | 450 | 453 |

Audio is from an example on MDN.

454 | 459 |

Video and subtitles are from an example on MDN.

460 |
461 | 462 |
463 |
464 |

<map> + <area>:

465 |
466 | 467 |

Each side of the image below is linked to different anchors on this page. Give it a try!

468 | 469 | 470 | 471 | 472 | Keanu Reeves looking fine 473 |
474 | 475 |
476 |
477 |

<math>:

478 |
479 | 480 |

The quadratic formula is:
481 | 482 | x 483 | = 484 | 485 | 486 | - b 487 | ± 488 | 489 | b 2 490 | - 491 | 4 ⁢ a ⁢ c 492 | 493 | 494 | 495 | 2 ⁢ a 496 | 497 | 498 | 499 |

500 |
501 | 502 | 505 |
506 | 507 |
508 |
509 |

Tabular data

510 |

Elements: <table>, <caption>, <colgroup>, <col>, <tbody>, <thead>, <tfoot>, <tr>, <td>, <th>

511 |
512 | 513 |
514 |
515 |

<table> + <caption> + <colgroup> + <col>+ <tbody> + <thead> + <tfoot> + <tr> + <td> + <th>:

516 |
517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 |
This is the table caption
<thead>2nd colgroup2nd colgroup3rd colgroup
<tbody>This is a cell spanning two columnsLast column
<tfoot>Cell 2Cell 3Cell 4
549 |
550 | 551 | 554 |
555 | 556 |
557 |
558 |

Forms

559 |

Elements: <form>, <label>, <input>, <button>, <select>, <datalist>, <optgroup>, <option>, <textarea>, <output>, <progress>, <meter>, <fieldset>, <legend>

560 |
561 | 562 |
563 |
564 |

<form> + <label> + <input> + <button> + <select> + <datalist> + <optgroup> + <option> + <textarea> + <fieldset> + <legend>:

565 |
566 | 567 |
568 |
569 | Welcome to the form 570 |

571 | 574 |

575 |

576 | 579 |

580 |

581 | 584 |

585 |

586 | 589 |

590 |

591 | 594 |

595 |

596 | 599 |

600 |

601 | 604 |

605 |

606 | 609 |

610 |

611 | 614 |

615 |

616 | 619 |

620 |

621 | 624 |

625 |

626 | 629 |

630 |

631 | 634 |

635 |

636 | 639 |

640 |

641 | 644 |

645 |

646 | 649 |

650 |

651 | 654 |

655 |

656 | 659 | 662 | 665 |

666 |

667 | 670 | 673 | 676 |

677 |

678 | 685 |

686 |

687 | 699 |

700 |

701 | 708 |

709 |

710 | 723 |

724 |

725 | 735 |

736 |

737 | 740 |

741 |

742 | 745 |

746 |

747 | 750 |

751 |

752 | 755 |

756 |

757 | 760 |

761 |

762 | 765 |

766 |

767 | 770 |

771 |

772 | 773 |

774 |
775 |
776 |
777 | 778 |
779 |
780 |

<output>:

781 |
782 | 783 |
784 |
785 | Testing the <output> element 786 | + 787 | = 788 | 789 |

Code is taken from this example by W3.

790 |
791 |
792 |
793 | 794 |
795 |
796 |

<progress> + <meter>:

797 |
798 | 799 |
800 |
801 | Testing <progress> and <meter> 802 |

803 | 806 |

807 |

808 | 811 |

812 |

813 | 816 |

817 |

818 | 821 |

822 |
823 |
824 |
825 | 826 | 829 |
830 | 831 |
832 |
833 |

Interactive elements

834 |

Elements: <details>, <summary>, <dialog>

835 |
836 | 837 |
838 |
839 |

<details> + <summary>:

840 |
841 | 842 |
843 | This can be expanded 844 |

And by doing so, more information is revealed.

845 |
846 |
847 | 848 |
849 |
850 |

<dialog>:

851 |
852 | 853 | 854 |

This text is inside a <dialog> box! It should be hidden by default, and shown to the user when given an open attribute.

855 | 856 |
857 | 858 | 861 |
862 | 863 |
864 |
865 |

Scripting

866 |

Elements: <script>, <noscript>, <template>, <canvas>

867 |
868 | 869 |
870 |
871 |

<script> + <noscript>:

872 |
873 | 874 |

Dynamic scripts and data blocks are included with the <script> element.

875 | 878 |

If scripting is disabled when loading the page, content inside <noscript> is used instead.

879 | 882 |
883 | 884 |
885 |
886 |

<template>:

887 |
888 | 889 |

Below this paragraph, there's a <template> element containing a HTML declaration, that can be used by scripts.

890 | 893 |
894 | 895 |
896 |
897 |

<canvas>:

898 |
899 | 900 |

A <script> is used to draw a rectangle in the <canvas> below.

901 | 902 | Alternative text explaining what's on display in this <canvas>. 903 | 904 | 910 |
911 | 912 | 915 |
916 |
917 | 918 | 923 | 924 | 927 | 928 | 929 | --------------------------------------------------------------------------------