Russ Weakley

accessible-forms. A series of HTML test cases to determine how specific elements are announced in different screen reader / browser combinations.

maxdesign-slides. A range of CSS, HTML and Accessibility slide decks and associated exercises for self-paced learning

example-layout-one-fixed. One-column fixed-width responsive layout

language-switcher. A simple, accessible language switcher module

example-layout-one-full. One-column full-width responsive layout

example-layout-two-full. Two-column full width responsive layout

html-elements-names. HTML elements and possible accessible names

navbar. A complex responsive and accessible navbar

accessibility-workshop-developers. A detailed accessibility training workshop for developers

simplex. A simple, flexible component library for complex sites and apps

07-bootstrap-three-column-gallery. Bootstrap three column gallery

05-bootstrap-blog-post-template-left. Bootstrap blog post template with left sidebar

08-bootstrap-four-column-gallery. Bootstrap four column gallery

html5-content-types. HTML 5 content type table

03-bootstrap-kickoff-template-responsive. Bootstrap kickoff template wit responsive type

exercise. This file can be used to teach keyboard use and screen reader use as it has a range of links, tables and forms.

01-bootstrap-kickoff-template. Bootstrap kickoff template

aria-roles. A chart on the various ARIA roles

floating-label. A quick demo of floating, animated labels

web-usability-resources. HTML

example-layout-three-full. Three-column full-width responsive layout

accessible-accordion. An accessible accordion modified from the W3C version

validation-tests. A repository to test various HTML configurations for validity

09-bootstrap-six-column-gallery. Bootstrap six column gallery

getting-started-with-css. Getting started with CSS

segmented-control. A Segment Control is a horizontal control made of multiple segments

accessible-hint-error. Examples of accessible inline error messages and hints.

accessible-error-fieldset. Test for error messages within fieldsets

a-deep-dive-into-accessible-notifications. A deep dive into accessible notifications - A11y Camp 2022

aria-states-properties. WAI ARIA states and properties, including when these properties were introduced

02-bootstrap-kickoff-template-image. Bootstrap kickoff template with image for logo

switch-checkbox. A simple checkbox element styled to look like an on-off switch

06-bootstrap-two-column-gallery. Bootstrap two column gallery

equal-height-borders. Equal-height borders on Bootstrap Columns

date-picker-input. A page to demonstrate a simple date picker option

states. Systemising states within component libraries

accessibility-checklist. An Accessibility Compliance checklist

aria-label-popover. Making the aria-label visible as a popover

04-bootstrap-blog-post-template-right. Bootstrap blog post template - right sidebar

html-css-tests. A range of HTML and CSS test files based on common questions

complex-table. A simple demo of a complex table

maxdesign. HTML

Accessibility-test-cases. Accessibility tests

default-styling. Styling with the :default selector

details-styling. A quick demo to show how to style the details element

responsive-bootstrap-buttons. Creating elegant responsive Bootstrap buttons

upvote-downvote. A simple upvote-downvote module

placeholder. Simple styling for the placeholder attribute

user-select. A quick demo of user-select property

highres. Creating high resolution background images

accessible-svg. A page to test some accessibility concerns with SVG files

travel-survey. A quick dummy survey

scalable-backgrounds-in-css. Scalable Backgrounds in CSS

less-colors. A simple example of LESS colors

open-close. A checkbox based open-close toggle

button-dropdown. A quick description of Accessibility issues with button dropdown

srcset. A simple scrset attribute test to deliver different device-pixel-ratio images