A collection of free Responsive Bootstrap templates - can be used for blogs, company or personal websites.
A range of CSS slide decks and associated exercises for self-paced learning.
Simplex is a simple, flexible component library that can be used to build complex websites and applications.
Simplex uses BEM and OOCSS principles, and aims is to: define base HTML element styles; define a series of re-usable components; define a series of simple and flexible utility classes; define a simple grid system.
View DownloadA series of recent presentations on Accessibility, CSS, Design Systems and more.
This presentation covers; different types of disabilities, assistive technologies, legal and ethical responsibilities as well as a range of terms such as W3C, WAI and WCAG.
VIEW ON SLIDESHARE
In the old days, many developers looked at complex websites and web applications as a series of individual pages. These days, it’s all about abstraction. Come on a journey as we explore the pain and glory of baking accessibility into UX, design and front-end pattern libraries.
VIEW ON SLIDESHARE
This presentation will take a deep dive into how to create an auto-complete ssearch function that is accessible to a range of different users including keyboard-only and screen reader users. Along the way, we will explore important keystrokes and aria attributes that can be used enhance the experience for all users.
VIEW ON SLIDESHARE
This presentation for Inclusive Design 24 (#ID24) explores how to create accessible, usable "floating" labels. Floating labels are where the label moves above form controls based on user interaction.
VIEW ON SLIDESHARE
A quick slide deck that outlines a range of pointers that can be used to help make button dropdowns more accessible.
VIEW ON SLIDESHARE
Have you ever tried to style checkboxes or radio buttons and ended up pulling your hair out? This presentation will explore a few simple tricks that can be used to style checkboxes and radio buttons. In this case, we will make them look like an on/off switch.
VIEW ON SLIDESHARE
Creating custom-designed radio buttons and checkboxes has never been easy. Many developers have found ways of hacking these elements using CSS and JavaScript. but can they also be accessible. The answer is yes, with a little extra effort. This presentation will walk through some simple examples to show how radio buttons and checkboxes can be semantic as well as keyboard/screen-reader accessible.
VIEW ON SLIDESHARE
At first glance, CSS line-height seems very simple, but there is a lot going on below the surface. Line-height is important for any designer or front end developer to understand as it can impact almost every aspect of our layouts.
VIEW ON SLIDESHARE
So, you've built an amazing new web application. It uses all the latest frameworks and libraries. It's beautiful to behold. But is it accessible? Many web applications these days are built on top of pre-existing frameworks or code bases and there is little thought to how well these components will work for different assistive devices.
VIEW ON SLIDESHARE
A quick presentation on some of the potential issues with using any framework.
VIEW ON SLIDESHARE
The presentation will explore the use of WAI-ARIA and the aria-live property to alert screen readers to changes in the DOM. The presentation will also look at support for aria-live across various screen readers and how the property can be most effectively used today.
VIEW ON SLIDESHARE
