Accessible CSS

Meetup, 9. März 2023

Matthias Reuter, inovex
matthias.reuter@inovex.de

            * {
                color: transparent;
            }
        

Accessibility ≠ Screenreader

Accessibility:
Essential for some, useful for all.

Hiding things


            display: none;
        

            visibility: hidden;
        

            <p hidden></p>
        

Hiding things from screenreaders


            aria-hidden="true"
        
role="presentation"

Hiding things visually


            .hide-visually {
                position: absolute;
                left: -10000px;
                width: 1px;
                height: 1px;
                overflow: hidden;
                clip-path: inset(50%);
            }
        

Example

Date of birth

Hiding things visually 2


                <button class="close-button">
                  Close
                </button>
            

Hiding things visually 2


            .close-button {
                width: 40px;
                height: 40px;
                text-indent: 40px;
                overflow: hidden;
                background: url(close.svg) center no-repeat;
                background-size: contain;
            }
        

Hiding things, sometimes


            a.skip-link {
                /* hide visually */
            }

            a.skip-link:focus {
                /* show */
            }
        

Media Queries for UX


            @media (prefers-color-scheme: dark) {
                body {
                    background-color: #1e1e1e;
                    color: #d4d4d4;
                }
            }
        

Media Queries for UX


            @media (pointer: coarse) {
                button {
                    padding: 2em;
                }
            }
        

Media Queries for UX


            @media (prefers-reduced-motion: reduce) {
                *, *::after, *::before {
                    animation-duration: 1ms !important;
                    animation-delay: -1ms !important;
                    animation-iteration-count: 1 !important;
                    transition-duration: 1ms !important;
                    transition-delay: -1ms !important;
                }  
            }
        

Additional content for screenreaders

My favorite color is hotpink cornflowerblue.


            del::before, del::after, ins::before, ins::after {
                /* hide visually */
            }

            del::before { content: '[deletion start]';  }
            del::after  { content: '[deletion end]';    }
            ins::before { content: '[insertion start]'; }
            ins::after  { content: '[insertion end]';   }
        

Flexbox and order

Flexbox and order


            <div class="button-container">
                <button type="submit">Login</button>
                <button type="button">Cancel</button>
            </div>
        

            .button-container {
                display: flex;
                flex-direction: row-reverse;
                flex-wrap: wrap;
            }
        

Visual imparity


            :root {
                font-size: 20px;
            }
            p {
                font-size: 1rem; 
                line-height: 1.6;
                letter-spacing: 0.3px;
                word-spacing: 2px;
            }
        

Beware of roles


            ul {
                list-style-type: none;
            }
        

            <ul role="list">
        

Vielen Dank!

Matthias Reuter
UX-Engineer

inovex GmbH
Office Karlsruhe
Ludwig-Erhard-Allee 6
76131 Karlsruhe

Mobil: 0173 3181010
Mail: matthias.reuter@inovex.de