* {
                color: transparent;
            }
        

https://www.matuzo.at/blog/building-the-most-inaccessible-site-possible-with-a-perfect-lighthouse-score/

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

https://design-system.service.gov.uk/components/date-input/

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 */
            }
        

https://www.amazon.de/

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;
            }
        

https://add0n.com/stylus.html

Beware of roles

            ul {
                list-style-type: none;
            }
        

            <ul role="list">