a11y

ACCESSIBILITY

tilgængelighed

WCAG 2.0 AA / AAA

  • World Wide Web: The web is for everyone
  • Er allerede et krav i flere lande, i EU fra 2025

alle?

  • A11y er ikke kun for blinde
  • Du har en brækket arm
  • Du er i bussen, og vil se en sjov video
  • Solen skinner direkte på skærmen

Semantik og tilgængelighed

HTML = INDHOLD

CSS = Styling af indhold

JavaScript: Interaktion med indhold

HyperText

MARKUP

Language

brug tags til at marke

indholdet UP  og give det

semantisk  betydning

<div>
    <div></div>
</div>
<div>
    <div>
        <ul><li></li></ul>
    </div>
    <div>
        <h1></h1>
        <p></p>
        <div>
            <img />
            <div></div>
        </div>
        <div>
            <h2></h2>
        </div>
    </div>
</div>
<div>
    <div></div>
</div>
<header>
    <nav></nav>
</header>
<main>
    <aside>
        <ul><li></li></ul>
    </aside>
    <article>
        <h1></h1>
        <p></p>
        <figure>
            <img />
            <figcaption></figcaption>
        </figure>
        <section>
            <h2></h2>
        </section>
    </article>
</main>
<footer>
    <nav></nav>
</footer>

når tags beskriver indholdet,

er det bedre for:

  • Screen-readers
  • Crawlers
  • Udviklere ;-)

når html ikke er nok

Structured Markup

  • Uddyber den semantiske betydning af indhold
  • Hjælper crawlers med at forstå indhold bedre
  • Bedre rankings
  • schema.org, Google Rich Snippets

men hvad med css og javascript?

  • Skal sitet virke uden JavaScript?
  • Uden CSS?
  • Frameworks fordele/ulemper

the rule of least power

When designing computer systems, one is often faced with a choice between using a more or less powerful language for publishing information, for expressing constraints, or for solving some problem. This finding explores tradeoffs relating the choice of language to reusability of information. The "Rule of Least Power" suggests choosing the least powerful language suitable for a given purpose.

en sidste ting før css og JS

document outline

Når vi tilføjer css, skal vi huske:

  • Farver / kontrast
  • Tydelig typografi
  • Mulighed for at zoome ind
    uden at ødelægge layout
  • Style :focus
    :focus-visible, :focus-within
  • Man stjæler ikke en cursor!

når vi tilføjer javascript, skal vi huske:

  • Keyboard-navigation ... for folk som mig
  • Brug aldrig tabindex > 0 ... ødelægger flow
  • WAI-ARIA specifikationer for:
  • <select> ... arrow down, space, enter osv.
  • <table> ... et helvede hvis du bruger screen-reader

demo

KB Workshop

By Mads Stoumann

Made with Slides.com

KB Workshop

  • 52

More from Mads Stoumann