Recently, several companies have launched amazing new sites that feature improvements in performance, responsiveness and the hotness of HTML5 and CSS3.
These are great accomplishments; however what many forget to improve is the accessibility of the site.
In this session, learn:
- Some quick and easy fixes you can do right now (contrast, colors, and :focus)
- Common mistakes we make (background images, icons, placeholder text vs label, semantic faux pas and roles)
- How to handle forms and errors
- Proposed features in the W3C pipeline
- Testing techniques and automation
- How to ensure company-wide standards
Accessibily means a digital world for everyone regardless of where, when, why, and how you consume the content that is being communicated. It's communication that's non-disciminatory in every way.
from
Simply Accesible
Accessibility means a digital world for everyone.
Disability classifications
Vision
- Color blindness - Can I use
- Low vision: blurry, clouded vision, center field loss, tunel vision
- Blindness: substantial, uncorrectable loss of vision
Hearing
Motor
Coginitive
AWD - Accessible Web Design or Accessibility First
Inclusive or Universal Design
ARIA = Access Rich Internet Applications
Is a set of attributes that you can add to HTML elements
First rule of ARIA: Don't use ARIA.
That is, better to use
Semantic HTML elements and attributes instead of ARIA marks.
W3C Validator
Site Audit for Keyboard Accessibility
Just use the keyboard (no mouse) to navigate the site and see how it works.
Site Audit for contrast and color
Have meaningfull content without colors. (e.g. use words like ERROR)
Site Audit for Transcription and Closed Caption
Site Audit for meaningful Alternative Text
Decorative images should have
alt tags but they need to be empty.
Useful images should have meaningful short alternative text.
Off Screen Text for Icons
Accessible SVGs - inline them and provide a tile.
Accessible Canvas
Site Audit for Easy to Read and Understand Content
Site Audit for Automation
Site Audit for Functional and Logical Forms
Site Audit using Screen Reader
Test with real users
Record/Document Audits
Provide Code Samples
Add Testing to build process
POUR
- Perceivable
- Operable (without a mouse)
- Understandable - clear and simple (writing and functionality)
- Robust - works across many devices
Resources
A11y Resources