Yahoo! User Interface Blog (YUIBlog)

Yui: Darba laiks Ce 11 Aug

Augusts 8, 2011 pie 09:47 Luke Smith | In Development , Darba laiks | Nr Komentāri

Meklēšana Direct Pieejamība

Mēs esam gatavojas sekot iepriekšējo post par Search Direct . Tur ir par Search Direct vērts runāt par daudz, bet, par starteri, kā iegūt piekļuvi pieredzi tiesības ir gan interesanti un svarīgi. Viktors Tsaran un Caridy Patino pievienosies mums zvana, lai runātu par projektu, pārskata īstenošanu un atbildēt uz visiem jūsu jautājumiem par Search Direct vai pieejamību labāko praksi.

Time & Detaļas

Mēs esam formāta maiņu šonedēļ. Mēs gatavojas, lai mēģinātu rīkot sesiju pilnībā uz Adobe Connect. Nebūs konference tilta, lai izsauktu. Audio arī caur Connect. Mēs izmantosim Connect tērzēšanu, lai pārvaldītu jautājumus.

Mēs būsim tiešsaistē kā parasti 10:00-11:00 PDT ceturtdien Darba laiks Connect telpā .

Update: Mēs joprojām uz konferences tilta

Ar gājienu ironija, izrādās, ka Connect nav labu pieejamību neredzīgiem dalībniekiem, tāpēc mēs, lieto Connect ekrāna dalīšanu un konferenču tilts audio, kā parasti. Savienojuma dati:

1. Dial, lai 1-888-371-8922 (Skype lieliski darbojas ārpus ASV, dalībnieki *)
2. Ievadiet dalībnieks kodu 47188953 #
3. Join ekrāns sūtīšanu (tas liks jums instalēt Adobe Connect spraudnis ja tas ir jūsu pirmo reizi, izmantojot to)

Update # 2: Ieraksts pieejams

Lūk lejupielādējamo ierakstu par šo Darba laiks .

Atrast sarunas: Bloglines | technorati

Daļa, un paplašināt: Grāmatzīme ar Del.icio.us | digg tā! | reddit!

Making Search Direct Accessible

Augusts 8, 2011 plkst 09:44 līdz Caridy Patino | In Accessibility , izstrāde | 4 Komentāri

Dažus mēnešus atpakaļ mēs uzsāka pirmo beta atbrīvošanu Search Direct. Šis jaunais produkts pēta ieviestā reālā laika atsauksmes, uzreiz sniegt atbildes uz lietotāju ar katra taustiņa nospiešanas. Ņemot vērā to dažādību Yahoo 's auditoriju, mēs vēlējāmies, lai Search Direct kā pieejamību. Sākumā mēs uzskatīja, ka tas būtu viegls uzdevums, jo šis produkts būtu balstīta uz 3 Yui, JavaScript ar pieejamības bibliotēku cep savos DNS. Pretēji manas cerības par inženieri, šis uzdevums izrādījās grūtāk, nekā mēs gaidīts.

Introducing Search Direct

Kaut Search Direct ir būvēta no zemes uz augšu, izmantojot Yui ir sastāvdaļa infrastruktūru, tās visvairāk tas ir acīmredzams redzamā interfeisa pamatā ir Yui automātiskās pabeigšanas widget , kas ietver daudzas pieejamības pazīmes tiesības no kastes. Ieteikumi, kas saistīti ar konkrētu pieprasījumu, tiek parādīti šajā AutoComplete īstenošanu. Meklēt Direct ir arī saturs panelis, aka bagāts panelis, kur ierosinājumu saistīti saturs tiek rādīts. Par bagāto panelis nodoms ir nodrošināt tiešu atbildi uz lietotāju, ja no automātiskās pabeigšanas sarakstā ierosinājums ir izvēlēts.

Jaunus ierosinājumus, tiek parādīti sarakstā katru taustiņu, un pirmais ierosinājums ir atlasīta pēc noklusējuma. Šo noklusējuma izvēle sauc mīksts izvēli. Soft izvēli un turpmākās mijiedarbības ar ieteikumu saraksta diktēt saturu, kas tiek pārveidoti bagāts panelī. Patiesībā, lietas ir nedaudz sarežģītāks (darbības optimizācijas, papildu cache slāņi, utt), bet vienkāršības labad mēs varam pieņemt, ka tas ir bieži darbplūsmu.

Pieejamības līdzekļi

In meklējumi padarītu Search Direct pieejamāku, mēs skatījāmies īstenošanu Search Assistant, tehnoloģija, Yahoo! sākts pirms dažiem gadiem, kā arī dzimtā pieejamības pazīmes Yui.

Pēc šīs izmeklēšanas, trim primārās pieejamības pazīmes tika ierosināta Search Direct:

• Izmantojot Yui Internacionalizācija lietderība , lai apkalpotu lokalizētu saturu.
• Setting role un aria-* īpašības par elementiem AutoComplete widget, kas jāidentificē un apstrādā ar ekrāna lasītāju.
• Izmantojot slēpto div , kas pārstāv dzīvu reģions ( aria-live ), paziņot lietotājam, kad kaut kas notiek. Piemēram, pieejamo ierosinājumus numurs, atlasīto priekšlikumu, uc

Plāns bija informēt lietotāju par jebkurām Meklēšana Direct interfeisa izmaiņas, un nodrošina virkni tastatūras īsceļus, lai pārvietotos ar šādu vizuālās sastāvdaļas:

• Searchbox
• Pogas Iesniegt
• Ieteikumu saraksta
• Rich panelis

Izklausās brīze, labi? Nu, pieņemsim ņemt soli atpakaļ.

Problēma

Kas mēs esam šeit ir divi asinhronā procesi - no tiem atjaunināšanas ierosinājumu kopumu, un otru, lai ielādētu atbilstošo atbilžu - un viņi abi tiešām ātri. Mēs runājam par 250ms sākuma līdz beigām. Tā saskarne mainās tik strauji, lai sekotu viss var būt grūti ekrāna lasītājs lietotājam. Tas izpaužas kārtas lielums sarežģītāka, kad atjauninājumi notiek asinhroni, gandrīz reālā laika veidā. Tā kā ekrāna lasītājs tika paziņots par katru izmaiņu interfeisā, kā rezultātā pļāpāšana bija grūti jēgas par to, kas notiek.

Trūkst pieņemamu risinājumu, mēs sākām sadarboties ar Yahoo 's rezidents pieejamību guru, Victor Tsaran ( @ vick08 ), lai mēģinātu un nākt klajā ar kaut ko labāku.

Pirmo reizi mēs noskatījos Viktora mijiedarboties ar Search Direct, tas uzreiz skaidrs, kas man, ka viņa uzmanības centrā lielākā daļa bija bagāts paneļa, nevis ieteikumu saraksta. Tas bija pārsteigums, jo mēs apskatīts sarakstā kā "avots patiesības". Vienā no mūsu sesijās, mums bija insults of luck, kad mēs noticis, lai izslēgtu visas pieejamības pazīmes saraksta. Tiklīdz troksni ieviesa saraksts ir jāizgriež, Search Direct sāka jēga Victor!

Kā lietotājiem ekrāna lasītāji uztver Search Direct

Pēc tam saprotot, ka mēs mēģinājām atrisināt nepareizu problēmu, mēs devāmies atpakaļ uz sākotnējo lietotājs stāsts: "Kā lietotājs, es varu atbildēt, jo es tipa". Getting atbilde pāri lietotājs ir prioritāte. Pēc tam, kad no jauna definēt problēmu, mēs koncentrētu mūsu pieejamība pūles uz īstenošanu, ja ekrāna nolasītājs prioritāti bagāts paneļa satura ieteikumu saraksta.

Piemēram, ja lietotājs "miami wea" , ekrāna nolasītājs pateiks viņiem divas lietas:

• 10 ierosinājumus.
• LAIKA Miami, FL. ŠODIEN Brīžiem pērkona negaiss, 89 ° F līdz 77 ° F. RĪT, Izolēta pērkona negaiss, 90 ° F 74 ° F ...

Pēc tam turpināt lasīt no pārējās bagāto paneļa saturu. Lietotājam nav nepieciešams zināt visus 10 ieteikumus uzreiz, katru reizi, kad saraksta atjauninājumus. Ja viņi vēlas zināt, informācija ir viegli pieejama, izmantojot klaviatūru navigāciju.

Lai nodrošinātu, ka ieteikums saraksts ir vērtības pievienošana pieredzi, mēs pārliecināmies, ka pirmais teikums, kas bagāts panelī ir cieši saistīta ar tās attiecīgo ierosinājumu. Piemēram, pamatojoties uz iepriekšējo piemēru, "weather miami" ir pirmā frāze bagāts panelis ieteikumu: "Miami laika".

Victor Tsaran, no Yahoo! Accessibility Lab, parāda, kā tā darbojas FireFox ar NVDA ekrāna lasītāju:

Ekrāna lasītājs pieredzi mūsu pieteikums ir vieglāk sekot, jo mēs šobrīd tikai koncentrēties uz šādiem diviem vizuālās sastāvdaļas:

• Searchbox
• Rich panelis

Izmaiņas automātiskās pabeigšanas sarakstu kopumā vairs nav kāpurķēžu, un iesniegt poga tiek ignorēta, jo lietotājs vienmēr var hit jāievada pašreizējā vaicājuma vai izmantojiet tastatūras saīsni (Tilda piekļuves taustiņš: [control, alt or shift] + ~ ) lai pārslēgtos starp ievades elementiem un bagāts paneli. Šīs tastatūras navigācijas iespējas ir atklāts lietotājam, kad searchbox ir atzīts ekrāna lasītājs.

No inženierijas viedokļa, šīs izmaiņas ievērojami vienkāršāku lietas. DOM manipulāciju apjoma aktīvākajā komponents tika krasi samazinātas, uzlabojot vispārējo darbību Search Direct. Šeit ir īstenošanas piemērs:

 funkcija SDAAria () {
     var mezglu = this._liveRegion = Y.Node.create ('div role="status" class="off-screen" aria-live="assertive"> </ div>');
     / / Izveidot ARIA dzīvot reģionā ...
     . Y.one ("iestāde") pievienot (mezgls);
     / / Klausās aria: dzīvot ziņojumus, lai atjauninātu dzīvot reģionā
     this.on (ārija: dzīvajā ", this._handlerMsg, šis);
     / / Klausās tenkas: atsvaidzināt paziņot, cik daudzi ierosinājumi
     this.on ("tenkas: atsvaidzināt", this._handleGossipRefresh, šis);
 }
 SDAAria.ATTRS = {
      virknes: {
          valueFn: funkcija () {
              atgriezties Y.Intl.get ("SD-aria ');
          }
      }
 };
 SDAAria.prototype = {
     _ariaSay: funkcija (stringId, subs) {
         var ziņu = this.get ("stīgas." + stringId) | |'';
         this._liveRegion.setContent (subs Y.Lang.sub (ziņojumu, subs): ziņojums);
     },
     _handlerMsg: funkcija (e) {
         if (e.id) {
             this._ariaSay (e.id, e.subs);
         }
     },
     _handleGossipRefresh: funkcija () {
         var size = this.get ("ieteikumus") izmērs ();.
         this._ariaSay ((izmērs ir> 0 "IEROSINĀJUMI '?' NO_SUGGESTIONS") {
             n: lielums
         });
     }
 };

Gūtās atziņas

Veidojot pieejamu interfeisu, tas ir svarīgi uzdot pareizos jautājumus. Making katru bitu jūsu lietojumprogramma nevar būt pareizā pieeja.

Pieprasīt agri atsauksmes no lietotājiem ar ekrāna lasītājiem - nedomājiet, ka jums ir jūsu pamatiem, uz kuriem, līdz jūs saņemsiet dažas lietotāju atsauksmes. Izmantojot katrs instruments un līdzeklis ir Jūsu rīcībā, iespējams, nav arī nodrošina paredzēto efektu.

Lietotāji, ekrāna lasītājus var būt grūtības sekot līdzi reālā laika atjauninājumus, īpaši, ja ekrāna lasītāji ir bombarded ar paziņojumiem. Šajos scenārijos, mazāk var būt vairāk. Identificēt un koncentrēties uz to, kas ir svarīgi, lai lietotājs, nevis mēģināt atkārtot izejvielu piemērošanā gūto pieredzi, lai ekrāna lasītājs.

Par autoru: Caridy Patino, galvenā Frontend Yahoo! Search Direct. Viņš ir longtime Yui Contributor un veidotājs burbuļošana bibliotēkas Yui paplašināšana, kā arī viesu blogger ir YUIBlog.com Daloties daļā savu plašo pieredzi ēku augstas veiktspējas tīmekļa lietojumprogrammas. Loading stratēģijas, notikumu orientētu arhitektūru un SSJS ir daži no jautājumiem, kur Caridy pavada lielāko daļu sava laika šajās dienās.

Atrast sarunas: Bloglines | technorati

Daļa, un paplašināt: Grāmatzīme ar Del.icio.us | digg tā! | reddit!