Offline Camp
Published in

Offline Camp

Are you concerned about Accessibility?

How to educate developers on creating accessible websites.

Pages 1 and 2 of handwritten notes from our A11Y discussion at Offline Camp Berlin; Page 1: A11Y, SPA, Defaults give good accessibility, ARIA, Announcements, Tabbing Index, Routing, <H1></H1>, Select Dropdown vs Text Box + ARIA, Tradeoffs, Page Change Transitions, Government, “Can still mess up old school website,” HTML, CSS, DRAGON, Semantic Web, Is it an Offline First Problem?, What is introduced? Testing, Service Workers, powered, Submit, Progressive Enhancement, Internet Accessibility, 1 Solution, “Removing barriers for people with disabilities”; Page 2: Different Types of Accessibility (Creative, Sight, Motor, Etc.), Abilities vs Disabilities, Time Based UI, A11Y cont…, Changes, ARIA-LIVE, Education through Offline First patterns, Inject → Announcer, Polite vs Assertive, Legality, Can you grade A11Y (No!), So fast, $$$ Fines??, DAC
  • Routing
  • Semantic web (e.g. the [in]correct usage of hierarchical headings)
  • Using a select box (versus an input with ARIA attributes)
  • Forms
  • Tricks using tabIndex
  • Change transitions (e.g. animations) in the page
  • Always giving feedback from actions
Example of a skip navigation link on the WebAIM (Web Accessibility in Mind) website

Pro tip: DIY!

Image of the Offline Camp website as seen through the NoCoffee Vision Simulator

Second pro tip: Ignore the last one and test with real users!

Some other useful links

To infinity and beyond

Myles Borin’s tweet shares a talk on ARIA states
Steve Faulkner’s tweet suggests that Progressive Web Apps are Regressive #a11y Apps



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Daniela Matos de Carvalho

Software Engineer @Dashlane, mother, photographer amateur, former @requirelx organiser, prev @YLDio, @zpx_interactive