Ad

Tuesday, March 22, 2016

Shopify Unite Conference talk: web Accessibility is not boring it is an essential User Experience

Shopify Developer Conference: web accessibility talk. Web accessibility is about more than just accommodating a minority group of audience with special web browsing needs! It's about reading in sunlight (needing strong color contrast), night stand reading mode, on-the-go mobile browsing with audio input, desktop audio dictation and much more.

* By Steven bosworth of the themes team
* Shopify image alt texts, fall back texts are important
* Best practice: label all things in theme though tedious
* Each form field should be properly labeled even if hidden
* Form error messages need clear label that traces back to the right field
* form.error is the shopify errors object
* tables : accessibility helpers understands how the td s are tied together. Challenging on mobile - single column display. Shopify handles this for us. (Css work around, hidden span s that announce the correct data, hidden visually but accessibility engine readable
* Best Practice: User testing reveals hidden accessibility problems.
* Caveat: accessibility engines, may not understand relationship between two div s whose visual relation is obvious
* Color contrast and text: studies found white on yellow is not accessible in sunlight reading mode.
* Best practice: test color contrast while designing and developing
* Resource: Twitter #a11y topic on accessibility
* Resource: color blindness testing and simulation tools available on the web.

6 comments:

  1. Nice piece of information on HTML5. With the expansion of smartphones and other portable gadgets, the demand for responsive website design that go comfy on all devices keeps on increasing. This leads to invention and expansion of HTM5 web technology. PHP Training in Chennai

    ReplyDelete
  2. Excellent post. I have read your blog it's very interesting and informative. Keep sharing.
    erp software in chennai

    ReplyDelete
  3. I simply wanted to write down a quick word to say thanks to you for those wonderful tips and hints you are showing on this site.

    IBM BPM Online Training in Chennai
    IBM BPM Online Training

    ReplyDelete

React UI, UI UX, Reactstrap React Bootstrap

React UI MATERIAL  Install yarn add @material-ui/icons Reactstrap FORMS. Controlled Forms. Uncontrolled Forms.  Columns, grid