Apply for the next session

Accessibility overview

Last updated: June 24, 2022

Making things “Work good” is just smart. But the people who evangelize for web accessibility often get a little tangled up in their own pride. They know a lot about this stuff! That is great.

We think we should share the information / instead of just shaming everyone.

Are you in? Let’s organize it.

If you find any good stuff /or have ideas on how to structure it — let’s talk about it! Send it to us in the classroom. : )

Our plan

To expose each point in the process – where you need to be aware. Instead of starting with something complex like a custom form, how about – we start at the beginning.

https://github.com/perpetual-education/inclusive-design-patterns

Hopefully – help with this a bit…

The idea here

…  is that you shouldn’t need to read all of these things – to learn how to incorporate these ideas into your design process.

Derek read/watched/coded along with — all of them – already.

Gotchas

  • https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html

Learning resources

Getting a solid list of useful things in order of the learning path – would still be good. And clear descriptions of what each resource is offering so that we don’t waste anyone’s time…

The goal isn’t to add every resource we can find. In fact – the fewer things to read the better. And so, as things become redundant – we can link to them in context – in the form of attribution instead.

Principals

Lists of resources

  • https://a11y.me
  • https://a11y.coffee/

Understanding how assistive technology works

Quick tools

Official stuff

  • https://www.w3.org/WAI/standards-guidelines/wcag/
  • https://wave.webaim.org/

Videos

  • https://www.youtube.com/watch?v=HtTyRajRuyY&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g

Nonvisual

  • https://dequeuniversity.com/screenreaders

Visual

  • https://dev.to/mpriour/an-introduction-to-high-contrast-accessibility-4im4
  • https://www.smashingmagazine.com/2022/03/windows-high-contrast-colors-mode-css-custom-properties

Implementation

  • https://shop.smashingmagazine.com/products/inclusive-design-patterns
  • https://www.smashingmagazine.com/printed-books/inclusive-components / https://inclusive-components.design/

Snarky (but real) stuff

  • https://briefs.video/videos/what-is-aria-even-for/

Other notes

  • https://perpetual.education/resources/sotb2021-notes/
  • {{put CSUN notes here}}

Big picture ideas

  1. The web is naturally accessible / until you break it
  2. Note where we’ve been on that front in the course…
  3. How to check
    1. Basic validation (all the way basic!)
    2. Using tab and keyboard controls to move around
    3. Overview of other screen operation
      1. Now and future (voice-activated etc)
    4. Using screen readers
    5. Other things to check (all at a basic level)
    6. …

https://github.com/perpetual-education/inclusive-design-patterns

Here’s a good first overview

 

Screen readers

Not sure how we’ll break this up yet – but here’s a start.

  1. JAWS®

    JAWS, Job Access With Speech, is the world’s most popular screen reader, developed for computer users whose vision loss prevents them from seeing screen content or navigating with a mouse. JAWS provides speech and Braille output for the most popular computer applications on your PC. You will be able to navigate the Internet, write a document, read an email and create presentations from your office, remote desktop, or from home. (Windows only)

    Site

  2. NVDA

    NonVisual Desktop Access (NVDA) is a free and open-source, portable screen reader for Microsoft Windows. NVDA allows blind and vision impaired people to access and interact with the Windows operating system and many third party applications. It has grown to be the second most popular screen reader worldwide. (Windows only)

    Site

  3. VoiceOver (Apple)

    VoiceOver is a built-in screen reader that describes aloud what appears on your computer screen: it speaks the text that’s in documents and windows.

    When a supported refreshable braille display is connected to your computer, VoiceOver detects the display and sends it information about what’s on the screen using. Using VoiceOver, you control the computer primarily with a keyboard, braille display, or trackpad, instead of the mouse. (Apple only)

    Site

Tools to include:

https://webhint.io/  Open-source / Microsoft Edge team

Getting certified

https://www.w3.org/WAI/fundamentals/foundations-course/

https://www.accessibilityassociation.org/s/certified-professional

 
Apply for the next session