Accessibility in pattern libraries
-
Upload
russ-weakley -
Category
Education
-
view
495 -
download
0
Transcript of Accessibility in pattern libraries
![Page 1: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/1.jpg)
Accessibility in pattern librariesAccessibility in
pattern libraries
![Page 2: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/2.jpg)
Moving away from pages
![Page 3: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/3.jpg)
In the past, many people approached complex websites and web
applications as a series of “pages”.
![Page 4: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/4.jpg)
These pages were often designed and built as complete entities.
![Page 5: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/5.jpg)
More recently, in complex websites and applications, the focus has shifted from full page layouts to
re-usable components.
![Page 6: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/6.jpg)
A re-usable component could be a layout grid structure, a button, an
input, a drop-down, a menu, a heading, a table, or even a pullquote.
![Page 7: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/7.jpg)
So, what are pattern
libraries?
![Page 8: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/8.jpg)
Pattern libraries are a collection of user interface components that can
be used multiple times across a website or web application.
![Page 9: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/9.jpg)
On large websites and complex applications, pattern libraries have a
range of benefits.
![Page 10: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/10.jpg)
In many cases they make it faster and easier to build.
![Page 11: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/11.jpg)
If done well, they provide a shared vocabulary across all teams.
![Page 12: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/12.jpg)
And most importantly, they provide a consistent level of quality.
![Page 13: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/13.jpg)
Lego blocks?
![Page 14: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/14.jpg)
Most complex pattern libraries follow the “lego building block” concept.
![Page 15: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/15.jpg)
This means that they start with individual “lego building blocks” and then use these block to build
larger and more complex components.
![Page 16: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/16.jpg)
Complex pattern libraries are often broken down into categories such as
elements, modules and components.
![Page 17: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/17.jpg)
Elements Modules Components
![Page 18: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/18.jpg)
Elements
![Page 19: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/19.jpg)
Elements are standard HTML elements such as headings, labels,
inputs, buttons, etc.
![Page 20: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/20.jpg)
They are the basic lego building blocks of the pattern library.
![Page 21: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/21.jpg)
Most of these elements are rarely used on their own - they are used to make modules and components.
![Page 22: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/22.jpg)
Modules
![Page 23: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/23.jpg)
Modules are small sets of elements that are joined together in re-usable
chunks.
![Page 24: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/24.jpg)
For example, an input module could include a label, an input, a hint text, a possible error message and then all of
the possible states including focus, hover, and disabled.
![Page 25: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/25.jpg)
Static Input
Disabled Input
This field cannot be filled in
Error Message
Additional Information
Additional Information
Invalid Input
Focussed Input
Invalid user data
Value
Additional Information
Inputs
Placeholder
Static Input
Additional Information
Value
Disabled Input This field cannot be filled in
Error Message
Additional Information
Invalid Input
Focussed Input
Invalid user data
Additional Information
Inputs - Side-By-Side
Placeholder
Input module
![Page 26: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/26.jpg)
Components
![Page 27: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/27.jpg)
Components are modules that are added together to build larger, more
comprehensive concepts.
![Page 28: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/28.jpg)
An example might be a signup form that includes various form control modules, a button module and a potential success/error module.
![Page 29: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/29.jpg)
Elements
![Page 30: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/30.jpg)
Modules
![Page 31: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/31.jpg)
Component
![Page 32: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/32.jpg)
Final screens
![Page 33: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/33.jpg)
Screens are where modules and components are combined into the final concepts that are presented to
the user.
![Page 34: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/34.jpg)
An example might be a login screen, which not only has the login form
component, but also the navigation component, header component and
footer component.
![Page 35: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/35.jpg)
A screen may also have different states depending on a number of
different factors, such as the type of user, where they are in the current
process etc.
![Page 36: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/36.jpg)
Generally, screens are not part of a pattern library. The pattern library is used to help create these screens.
![Page 37: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/37.jpg)
Different types of pattern libraries
![Page 38: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/38.jpg)
Pattern libraries can and should be used during all phases of the design
and development process.
![Page 39: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/39.jpg)
There are three distinctly different types of pattern library:
UX/UI pattern libraries Design style guides
Front end pattern libraries
![Page 40: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/40.jpg)
UX/UI pattern libraries
![Page 41: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/41.jpg)
UX/UI pattern libraries often include comprehensive documentation
that:
![Page 42: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/42.jpg)
1. Define all elements, modules and components.
![Page 43: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/43.jpg)
2. Define the various states for all elements, modules, components (i.e. hover, focus, active states, logged-in
or logged out etc).
![Page 44: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/44.jpg)
3. Define key dynamic behaviours (i.e. animations, transitions, fly-outs,
drop-downs etc).
![Page 45: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/45.jpg)
4. Define feedback and notification mechanisms (i.e. success messages,
error messages etc).
![Page 46: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/46.jpg)
5. Define additional information associated with modules (i.e. hints,
tips etc).
![Page 47: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/47.jpg)
These pattern libraries normally take the form of detailed wireframes and/or prototypes along with additional
documentation.
![Page 48: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/48.jpg)
They help to communicate to internal teams and stakeholders how a
website or app should be built.
![Page 49: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/49.jpg)
Design style guides
![Page 50: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/50.jpg)
During the design phase, the emphasis is less about defining re-usable modules and more about
defining a consistent “look and feel” across every aspect of the website or
application.
![Page 51: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/51.jpg)
For this reason, they are more often style guides rather than pattern
libraries.
![Page 52: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/52.jpg)
Design style guides should address:
![Page 53: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/53.jpg)
1. How core branding will be implemented across the website or
app.
![Page 54: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/54.jpg)
2. The overall “look and feel”.
![Page 55: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/55.jpg)
3. How typefaces and font-size will be used.
![Page 56: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/56.jpg)
4. How colour schemes will be used.
![Page 57: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/57.jpg)
Front end pattern libraries
![Page 58: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/58.jpg)
Front-end pattern libraries should produce fully functional HTML/CSS/JS examples of all elements, modules
and components.
![Page 59: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/59.jpg)
These examples should include all states, dynamic behaviours and
feedback mechanisms.
![Page 60: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/60.jpg)
These elements and modules can then be used as needed to rapidly build complex components and the
final screens.
![Page 61: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/61.jpg)
The danger of copy/paste pattern
libraries
![Page 62: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/62.jpg)
One danger with front-end pattern libraries is where modules and components are presented as
examples that have to be copied and pasted by developers.
![Page 63: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/63.jpg)
The problem is that they can easily be applied incorrectly.
![Page 64: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/64.jpg)
Pattern libraries should be built so that modules and components are
referenced directly from the pattern library in some way.
![Page 65: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/65.jpg)
This means that they can be updated automatically without leaving legacy
versions across an application.
![Page 66: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/66.jpg)
More importantly, they cannot be applied incorrectly.
![Page 67: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/67.jpg)
What about existing pattern
libraries?
![Page 68: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/68.jpg)
There is a wide range of pre-existing UX and front-end pattern libraries
available today.
![Page 69: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/69.jpg)
Some of these pattern libraries have a simple purpose - such as predefined sets of UI modules in wireframe form,
or front-end grid systems.
![Page 70: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/70.jpg)
Others, especially in the front-end, are full “frameworks” that offer a wide range of fully functional elements,
modules and components.
![Page 71: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/71.jpg)
There are some great benefits to using a pre-existing framework.
![Page 72: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/72.jpg)
They are often ready to use and are therefore quick to implement.
![Page 73: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/73.jpg)
They are also often useful for rapid prototyping during the UX/UI phase.
![Page 74: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/74.jpg)
However, there can be some downsides as well.
![Page 75: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/75.jpg)
The pre-build modules and components may not suit your
project which means they have to be heavily modified.
![Page 76: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/76.jpg)
They often produce a generic look, mainly because people are not
experienced enough to know how to customise them.
![Page 77: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/77.jpg)
You are also relying on someone else for code quality.
![Page 78: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/78.jpg)
This is especially true for accessibility within pre-existing
frameworks.
![Page 79: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/79.jpg)
Do you want to rely on others to make sure all of your modules and components are accessible?
![Page 80: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/80.jpg)
Accessibility in all phases
![Page 81: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/81.jpg)
Many people focus on addressing accessibility during the front-end
phase only.
![Page 82: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/82.jpg)
However, accessibility can be addressed to some degree during the
UX/UI and design phases as well.
![Page 83: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/83.jpg)
UX/UI pattern libraries should describe solutions to some aspects
of accessibility such as states, behaviours, proximity, notifications,
error messages etc.
![Page 84: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/84.jpg)
Good UX/UI pattern libraries even help to describe how keystrokes
should allow users to “travel” through complex components.
![Page 85: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/85.jpg)
These descriptions should help front-end teams when building the
final modules and components.
![Page 86: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/86.jpg)
Design style guides should address a range of design-related
accessibility concerns such as: colour contrast, use of proximity, use
of iconography and font-size.
![Page 87: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/87.jpg)
These requirements can then be applied into the front-end modules
and components.
![Page 88: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/88.jpg)
So, the UX/UI and design phases provide recommendations and
requirements.
![Page 89: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/89.jpg)
And these recommendations and requirements can then be put into action during the front-end phase.
![Page 90: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/90.jpg)
Baking in accessibility?
![Page 91: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/91.jpg)
In the old days, accessibility reviews were often tacked on at the end of major site or application builds.
Often just before launch.
![Page 92: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/92.jpg)
Full site build with accessibility review just before launch
UX Design Build Launch
Review
![Page 93: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/93.jpg)
Even worse, in some circumstances, reviews were carried out after launch
- only when someone made a complaint.
![Page 94: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/94.jpg)
Full site build with accessibility review after launch
UX Design Build Launch
Review
![Page 95: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/95.jpg)
Of course, that sort of thing never happens today… does it?
![Page 96: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/96.jpg)
With complex applications and websites, there has been a shift away from a single massive build cycle.
![Page 97: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/97.jpg)
Instead, complex applications and websites are often rolled out in a
series of feature releases.
![Page 98: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/98.jpg)
Feature Feature Feature Feature
Rolling feature releases over time
![Page 99: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/99.jpg)
A feature is a stand-alone section of a web application. A new feature may require anything from a single
screen to multiple screens.
![Page 100: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/100.jpg)
For example, in a banking web application, a new feature could allow
customers to add additional bank accounts to the system.
![Page 101: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/101.jpg)
Because features are released individually, accessibility reviews can
be conducted on an individual feature rather than an entire
application or site.
![Page 102: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/102.jpg)
A single feature build process with accessibility review before launch
UX Test Build Test Launch
Review
![Page 103: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/103.jpg)
And, if accessibility is considered during all phases of feature
development, the accessibility review should be even less painful.
![Page 104: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/104.jpg)
A single feature build process with accessibility integrated throughout all phases
A A Review
UX Test Build Test Launch
![Page 105: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/105.jpg)
However, with the use of pattern libraries, accessibility can be “baked
in” even earlier in the process.
![Page 106: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/106.jpg)
In many cases, an initial pattern library is built before any features are
ready.
![Page 107: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/107.jpg)
These initial pattern libraries often include elements and modules but no
components.
![Page 108: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/108.jpg)
Accessibility should be “baked into” each of these modules. And, they need to be carefully reviewed before
proceeding.
![Page 109: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/109.jpg)
What does this mean? Well, it means following basic
accessibility guidelines…
![Page 110: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/110.jpg)
Making sure all modules use semantic and well-formed markup.
![Page 111: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/111.jpg)
Using alt attributes on images.
![Page 112: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/112.jpg)
Making sure for and id attributes are used correctly for labels and inputs.
![Page 113: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/113.jpg)
Making sure th, thead, tbody are used appropriately in tables.
![Page 114: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/114.jpg)
Using additional aria roles, labels and descriptions where appropriate.
![Page 115: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/115.jpg)
If modules are built correctly, they provides a solid foundation for all
future components.
![Page 116: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/116.jpg)
The process is often similar to a feature release, except the outcome is the initial pattern library rather than
a feature.
![Page 117: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/117.jpg)
Pattern library build with accessibility integrated throughout all phases
A A Review
UX Design Build Ready
![Page 118: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/118.jpg)
As new features move into production, new components are built and added into the pattern library.
![Page 119: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/119.jpg)
Some people make the mistake of assuming that these components will
automatically be accessible because they use the tested modules
as a base.
![Page 120: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/120.jpg)
However, components often present their own accessibility issues.
![Page 121: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/121.jpg)
For this reason, new components should also be tested and reviewed before launch, as part of the feature
release.
![Page 122: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/122.jpg)
A single feature build process with accessibility integrated throughout all phases
A A Review
UX Test Build Test Launch
![Page 123: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/123.jpg)
Bottom line
![Page 124: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/124.jpg)
For large websites and complex apps, pattern libraries are critical.
![Page 125: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/125.jpg)
UX/UI pattern libraries and design style guides should include
accessibility as part of the process.
![Page 126: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/126.jpg)
For front-end pattern libraries, make sure to bake accessibility into all core modules and test carefully.
![Page 127: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/127.jpg)
Make sure to test all components and screens as they are released
with features.
![Page 128: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/128.jpg)
And, avoid building pattern libraries that rely on developers having to
copy/paste code samples.
![Page 129: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/129.jpg)
These steps will save a world of pain in the future.
![Page 130: Accessibility in pattern libraries](https://reader031.fdocuments.us/reader031/viewer/2022030317/5a669bd87f8b9ad4438b4aa7/html5/thumbnails/130.jpg)
Russ Weakley Max Design
Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley