%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
Consistently Accessible: Building Better Websites with Pattern Libraries
1. Consistently Accessible
Building Better Websites with
Pattern Libraries
Marc Thorson and Stacy Carston
Accessibility Architects
Great Lakes Educational Loan Services, a Nelnet Company
March 23, 2018
2. About Us
The Great Lakes Accessibility Team
◦ Stacy Carston
◦ Marc Thorson
◦ We support hundreds of developers and their agile teams with the goal of
continually providing state-of-the-art products and services that are accessible to
everyone.
Great Lakes Educational Loan Services, Inc.
◦ 50+ years of supporting student loan services for millions of borrowers and
thousands of schools and lenders
◦ Technology-centric company focused on doing what’s right
◦ Recently acquired by Nelnet
2
3. Where we were in 2013 - 2014
Major site redesign / overhaul
◦ Student loan borrowers use this site to manage their student loans
◦ Goals included modernizing the code base and responsive design
◦ Front-end quickly became very complex
Many new, internal-facing web applications
◦ Need to make these quickly and easily
◦ Lack of experienced front-end developers
7. It’s also more accessible!
WCAG 2.0 Guideline 3.2 Predictable
◦ 3.2.4 Consistent Identification (Level AA)
Components that have the same functionality within a set of Web pages are
identified consistently.
Users are happier
8. So why not?
Websites are increasingly complex
Websites change over time
◦ Usually by adding more content
Multiple teams working on the same site
Lack of front-end expertise
◦ It’s hard to keep up with the web
13. Goals
Solve the challenges making consistency difficult
Reduce code duplication
Improve:
◦ Accessibility
◦ Responsive Behavior
◦ Overall code quality
Align patterns with brand standards
14. Building Our Own
Two parts
◦ CSS & JS libraries
◦ Documentation website to tie it all together
Why write our own UI libraries?
◦ Well-defined brand often conflicted with popular UI libraries
◦ Needed to be accessible
15. Our Approach
Collaboration between designers and developers
Versioning (SemVer)
◦ Many static assets are un-versioned
Identify common components
◦ Expand / Collapse
◦ Tab Panels
◦ Progress Tracker
◦ Message Boxes
16. Making Improvements
Focus on the components themselves
Refine appearance and behavior
Test in a variety of environments
◦ Browsers
◦ Assistive Technology
◦ Devices
Especially helpful for complex components or those using WAI-ARIA
17. Improving our Improvements
Providing more style documentation
◦ Colors, Typography, Grid System
Basic Components
◦ Buttons, Links, Form Elements
Build in accessible behavior as much as possible
18. Great Lakes’ Pattern Library
CSS and JS libraries
Static Website with:
◦ Examples
◦ HTML & JS Code Snippets
◦ Usage Guidelines
◦ Instructions and Developer Notes
◦ Template for Prototyping and New Projects
20. Usage
It was popular!
◦ Expand / Collapse is the most used component
New hires can quickly get up to speed
Developers appreciated having these components readily available
◦ Saves time and money
21. Styling
Avoid conflict with existing styles
◦ We prefixed our CSS classes
Presenting the HTML, CSS & JS as a package makes it hard to imagine
them with different styles
◦ Distinct styles for internal, business applications vs. external, customer facing
websites
22. Maintenance
Maintenance is critical
◦ Need to be responsive about fixing bugs
◦ Needs to stay up to date with new technologies and the changing needs of
your organization
Difficult to get time allocated
◦ Have a dedicated team
◦ Use a more “open-source” model
◦ How to do this and ensure that new additions are properly tested?
23. Adoption
Most effective for new sites
Harder to integrate into existing sites
◦ Needs to work with existing styles
◦ Update existing patterns
◦ The larger the site, the harder this is
Consistently using the new patterns makes future updates easier
24. Summary
Consistent user interfaces provide usability and accessibility benefits.
Pattern libraries are an excellent tool to help your organization achieve
that consistency.
Reusable patterns allow accessibility improvements to have a greater
effect.
I’d like to start off with a story about the company we work for – Great Lakes. Our main line of business is servicing federal student loans and one of the major products we support is a website that borrowers use to manage their student loans: make payments, sign up for auto pay, apply for a different repayment plan – there’s a lot going on. In 2014, we had recently completed a complete overhaul and redesign of this website. Some of our goals were to modernize the code base and implement a responsive design. When we first started, this was rather exciting – it’s a fresh start, on the front end this is all new HTML and CSS, and I’m just going to be able to do everything right this time! Reality quickly got in the way. The redesign was a success, a lot of hard work went into it and it resulted in many updates and improvements to the overall experience, but from the inside some of us were looking at how quickly the CSS ballooned, or how fixing some accessibility issues felt like whack-a-mole, and we wanted to know how we could do better, how we could improve our processes to create an even better, more consistent site.
Around the same time, another effort was really starting to take off. A lot of our internal business functions relied on using mainframe screens, and we wanted to provide the same functionality through web applications instead. There was a strong need to make these quickly and easily, but there was far more work there than we had experienced front-end developers. We needed to make it easier for developers who may have little HTML experience to implement these UIs and keep them consistent with each other.
We placed a high value on consistency and that’s because consistency is key to a great user interface, and it is also key to an accessible user interface.
A consistent interface is a more beautiful interface. Consistency creates a greater sense of polish and professionalism.
A consistent interface builds brand recognition and customer trust.
A consistent interface is also just easier to use.
And this is because a consistent interface is a more predictable interface.
But consistency is hard to achieve, as evidenced by the Great Lakes experiences I described, and many other examples.
What is a pattern library? Loosely defined, a pattern library is a collection of reusable UI and/or UX patterns.
