Locales: Made in LA

Update: Color<Coded> launched Locales on November 16 with a campaign—”Keep It Locales” (Buy Local)—to support the sustainability of small businesses in our communities by increasing their visibility and promoting ethical spending. We were generously hosted by one of our profiles (and the hottest spot for micheladas), La Chuperia.

LOCALES is a web platform that connects residents of Los Angeles with small businesses that are owned and operated by people of color (currently in English and Español). The tech collective I joined in May, Color<Coded>, is working on a “soft” launch of the service next month. For now, I’m pleased to share that some suggestions I made via Slack are leading us to consider accessibility, styleguides, and careful form design in our process. Also, I’m building something with React, Babel, and Webpack (vs. Ruby on Rails)!

thinking about accessibility is indispensable when building technologies!

* accessibility includes language

Resources include: “Accessible UI Components for the Web” by Addy Osmani, The A11y Project, ally.js, WebAIM Color Constrast Checker, randoma11y.com, Sim Daltonism/Color Oracle, Marvel’s Styleguide, Nicole Saidy’s Intro to Style Guides, Frontify, multilingual.js

“Recommendation Form” mockup by Aldo Puicon

let React = require('react')

module.exports = React.createClass({
 displayName: 'Form',

getInitialState() {
 return {
 name: '',
 phone: '',
 ownerNames: '',
 address: '',
 recommendation: ''
 }
},

render() {
 return (
 <form>
 <label>
 Name of Business
 </label>
 <input type="text" value={this.state.name} onChange={(event) => this.onInputChange(event, 'name')}/>

<label>
 Business Telephone Number
 </label>
 <input type="text" value={this.state.phone} onChange={(event) => this.onInputChange(event, 'phone')}/>

<label>
 Name of Owner(s)
 </label>
 <input type="text" value={this.state.ownerNames} onChange={(event) => this.onInputChange(event, 'ownerNames')}/>

<label>
 Business Address
 </label>
 <input type="text" value={this.state.address} onChange={(event) => this.onInputChange(event, 'address')}/>

<label>
 Why are you recommending this business?
 </label>
 <input type="textarea" value={this.state.recommendation} onChange={(event) => this.onInputChange(event, 'recommendation')}/>

<button onClick={this.onSubmit}>
 Submit
 </button>
 </form>
 )
 },

onSubmit() {
 alert('You submitted ' + this.state.name)
 },

onInputChange(event, key){
 let newInputState = {}
 newInputState[key] = event.target.value
 this.setState(newInputState)
 }
})

 

Advertisement