Stephanie Eckles
@5t3ph
5t3ph.dev/a11y-ds-slides
2007 - 2018
Advertising/Marketing Developer
2007 - 2018
Advertising/Marketing Developer
Oct 2018 - Present
Lead DS Developer,
Frontend Product Dev
egghead instructor
ModernCSS.dev
LearnFromSteph.dev
dev.to/5t3ph
mom of 2 girls
🥰
provide a cohesive visual language, essential to building products faster and better
establish design standards among products
form a shared lexicon of
UI terms
reduce technical debt with
tested, accessible components
an isolated piece of code
used as building blocks for more complex UI
components inherently abstract pain points by encapsulation
components inherently
abstract pain points by
encapsulation
components inherently
abstract pain points by
encapsulation
providing semantic
HTML
components inherently
abstract pain points by
encapsulation
providing semantic
HTML
themed style
variants
components inherently
abstract pain points by
encapsulation
providing semantic
HTML
themed style
variants
components inherently
abstract pain points by
encapsulation
providing semantic
HTML
themed style
variants
guide developers with low familiarity with frontend/a11y
robust theme
capabilities alleviate
contrast issues
robust theme
capabilities alleviate
contrast issues
5t3ph.dev/a11y-ds-contrast
in-context a11y warnings
and documentation
in-context a11y warnings
and documentation
Example: <IconButton />
in-context a11y warnings
and documentation
Example: <IconButton />
failure to provide reasonable alternative text for the label
in-context a11y warnings
and documentation
npm install warning
in-context a11y warnings
and documentation
warning(
props['aria-label'],
'Design System: IconButton requires an aria-label prop. For a working, accessible example, see https://designsystemdocs.io/components/icon-buttons',
);
Example: <IconButton />
in-context a11y warnings
and documentation
warning(
props['aria-label'],
'Design System: IconButton requires an aria-label prop. For a working, accessible example, see https://designsystemdocs.io/components/icon-buttons',
);
Example: <IconButton />
in-context a11y warnings
and documentation
warning(
props['aria-label'],
'Design System: IconButton requires an aria-label prop. For a working, accessible example, see https://designsystemdocs.io/components/icon-buttons',
);
Example: <IconButton />
in-context a11y warnings
and documentation
warning(
props['aria-label'],
'Design System: IconButton requires an aria-label prop. For a working, accessible example, see https://designsystemdocs.io/components/icon-buttons',
);
in-context a11y warnings
and documentation
warning(
props['aria-label'],
'Design System: IconButton requires an aria-label prop. For a working, accessible example, see https://designsystemdocs.io/components/icon-buttons',
);
in-context a11y warnings
and documentation
warning(
props['aria-label'],
'Design System: IconButton requires an aria-label prop. For a working, accessible example, see https://designsystemdocs.io/components/icon-buttons',
);
required props and a11y-aware
defaults in consideration of
component intent
component
intent
component
intent
🤝
component
intent
accessibility
guidelines
🤝
component
intent
accessibility
guidelines
🤝
overlap of design system guidelines and accessibility standards
required props and a11y-aware defaults
Example: <Input />
interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
type?: InputType;
}
const Input: React.FunctionComponent<IInputProps> = ({ type = "text" }) => {
return <input type={type} />;
};
required props and a11y-aware defaults
Example: <Input />
interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
type?: InputType;
}
const Input: React.FunctionComponent<IInputProps> = ({ type = "text" }) => {
return <input type={type} />;
};
required props and a11y-aware defaults
Example: <Input />
interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
type?: InputType;
}
const Input: React.FunctionComponent<IInputProps> = ({ type = "text" }) => {
return <input type={type} />;
};
required props and a11y-aware defaults
Example: <Image />
interface IImageProps {
alt: string;
src: string;
}
const Image: React.FunctionComponent<IImageProps> = ({ alt = "", src }) => {
return <img alt={alt} src={src} />;
};
required props and a11y-aware defaults
Example: <Image />
interface IImageProps {
alt: string;
src: string;
}
const Image: React.FunctionComponent<IImageProps> = ({ alt = "", src }) => {
return <img alt={alt} src={src} />;
};
required props and a11y-aware defaults
best practice defaults
specific to your design system
required props and a11y-aware defaults
best practice defaults
specific to your design system
best practice defaults
specific to your design system
Example: <Button />
interface IButtonProps {
variant?: 'contained' | 'outlined' | 'text';
}
const Button: React.FunctionComponent<IButtonProps> = ({ variant = "contained", ...props }) => {
return <button class=`button-${variant}` {...props} />;
};
best practice defaults
specific to your design system
Example: <Button />
interface IButtonProps {
variant?: 'contained' | 'outlined' | 'text';
}
const Button: React.FunctionComponent<IButtonProps> = ({ variant = "contained", ...props }) => {
return <button class=`button-${variant}` {...props} />;
};
robust, contrast-safe theming
robust, contrast-safe theming
in-context a11y warnings and docs
required
props
robust, contrast-safe theming
in-context a11y warnings and docs
required
props
a11y-aware
defaults
robust, contrast-safe theming
in-context a11y warnings and docs
required
props
a11y-aware
defaults
design system
best practices
robust, contrast-safe theming
in-context a11y warnings and docs
required
props
a11y-aware
defaults
design system
best practices
accessible, easy to
implement design system components
robust, contrast-safe theming
in-context a11y warnings and docs
But...
But...
components can't cover every accessibility concern
Going beyond components...
Going beyond components...
production-ready
accessible examples in documentation
Going beyond components...
a11y-tested library of extended patterns
Going beyond components...
encouraging a11y linters and browser extensions
Going beyond components...
offering accessibilty audits
Going beyond components...
offering "getting started" workshops
Stephanie Eckles
@5t3ph
5t3ph.dev/a11y-ds-slides