SVG && A11y

Neven Duranec
-- frontend janitor --
@nevenduranec

What is (web) accessibility?

The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability.

<img
    src="path/to/graphic.svg"
    alt="My super info about the graphic"
    role="img"
>
       <svg
            width="74"
            height="90"
            viewBox="0 0 74 90"
            xmlns="http://www.w3.org/2000/svg"
        >

                <path
                      class="light"
                      d="M44.399 70.106v-2.821c0-5.504 2.237-10.793 6.15-14.52 4-3.812 6.196-8.94 6.196-14.462 0-11.014-8.964-19.978-19.978-19.978-.756 0-1.523.042-2.276.126-9.528 1.053-17.137 9.11-17.67 18.715a19.998 19.998 0 0 0 6.036 15.472c3.99 3.87 6.278 9.201 6.278 14.644v2.822a3.444 3.444 0 0 0 3.438 3.44h8.386a3.442 3.442 0 0 0 3.44-3.438z"
                      stroke="#000" stroke-width="4" fill="transparent" />

                <path class="ray" d="M1.5 38.267h8.643a1.5 1.5 0 1 0 0-3H1.5a1.5 1.5 0 0 0 0 3z" fill="#000" />
                <path class="ray" d="M73.534 36.767a1.5 1.5 0 0 0-1.5-1.5h-8.643a1.5 1.5 0 1 0 0 3h8.643a1.5 1.5 0 0 0 1.5-1.5z"
                      fill="#000" />
                <path class="ray" d="M35.267 1.5v8.643a1.5 1.5 0 1 0 3 0V1.5a1.5 1.5 0 0 0-3 0z" fill="#000" />
                <path class="ray" d="M60.644 10.769l-6.111 6.111a1.5 1.5 0 1 0 2.122 2.121l6.111-6.111a1.5 1.5 0 1 0-2.122-2.121z"
                      fill="#000" />
                <path
                      class="ray" d="M19.001 54.533a1.5 1.5 0 0 0-2.121 0l-6.111 6.111a1.5 1.5 0 1 0 2.122 2.121l6.111-6.111a1.5 1.5 0 0 0-.001-2.121z"
                      fill="#000" />
                <path class="ray" d="M16.88 19.001a1.5 1.5 0 0 0 2.122-2.121l-6.111-6.111a1.5 1.5 0 1 0-2.121 2.121l6.11 6.111z"
                      fill="#000" />
                <path class="ray" d="M60.644 62.765a1.5 1.5 0 0 0 2.122-2.121l-6.111-6.111a1.5 1.5 0 1 0-2.121 2.121l6.11 6.111z"
                      fill="#000" />


                <path d="M43.276 77.521H30.258a1.5 1.5 0 0 0 0 3h13.019a1.5 1.5 0 0 0-.001-3z" fill="#000" />
                <path d="M44.776 83.761a1.5 1.5 0 0 0-1.5-1.5H30.258a1.5 1.5 0 0 0 0 3h13.019a1.5 1.5 0 0 0 1.499-1.5z"
                      fill="#000" />
                <path d="M41.521 88.5a1.5 1.5 0 0 0-1.5-1.5h-6.509a1.5 1.5 0 0 0 0 3h6.509a1.5 1.5 0 0 0 1.5-1.5z"
                      fill="#000" />

    </svg>

Text

Accessibility is not about doing more work. It’s about doing the right work.

Q & A

SVG && A11y

By Neven Đuranec

Made with Slides.com

SVG && A11y

  • 163

More from Neven Đuranec