Meer en meer commerciële websites zijn met pop-ups van deze dagen. In veel gevallen, ben ik geïnspireerd door meer pop-ups worden gebruikt voor reclame, waarschijnlijk als gevolg van de harde werkelijkheid is dat "banner-blindheid '. In andere gevallen, pop-ups gebruikt voor het weergeven van aanvullende inhoud aan de bovenliggende pagina. Helaas zijn veel ontwerpers weinig weten over het maken van een goede pop-up venster dat toegankelijk zal zijn.


Onder de vele zorgen van toegankelijk ontwerpen is te vinden in "Richtsnoer 6" van de W3C's Web Content Accessibility Guidelines: http://www.w3.org/TR/WCAG10/ # gl-nieuwe-technologieën - "Ervoor zorgen dat de pagina's zijn toegankelijk, zelfs bij de nieuwere technologieën worden niet ondersteund of zijn uitgeschakeld. " Simpel gezegd, dient u ervoor te zorgen dat uw inhoud blijft toegankelijk voor diegenen die een wijziging van de toegankelijkheid van de instellingen uit te schakelen scripting of waarvan de keuze van aangepaste technologie niet herkent scripting. Zie ook de betreffende afdeling 508 criteria: http://www.access-board.gov/sec508/guide/1194.22.htm # (l)


Pop-ups behoren tot de items die vaak in strijd met deze toegankelijkheid richtsnoer


Een pop-up venster link zal waarschijnlijk beginnen als volgt uit: <a href = "#" onClick = "window.open ...... of: <a href =" javascript:; onclick = "window.open (. ...... In beide gevallen is de koppeling volledig onbruikbaar voor mensen met scripts uitgeschakeld of met browsers die geen JavaScript herkent.


Van hier uit op Laten we ervanuit gaan dat onze doelgroep past een van de twee zojuist genoemde situaties - ofwel ze hebben JavaScript uitgeschakeld of hun browser JavaScript niet kan herkennen.


In het eerste geval is met "#" als de hypertext verwijzing zal resulteren in het beste geval in hun wordt gehouden aan de top van de pagina. De "#"-teken wordt geïnterpreteerd als wat is bekend als een "Fragment Identifier Scheidingsteken" (zie geekspeak op - http://www.w3.org/Addressing/URL/4_2_Fragments.html). Wat betekent dit voor ons is dat de "#" geacht wordt te punt ergens, zoals een naam object op de pagina. Het is geen standaard "niets doen" karakter. De hash symbool prepends de naam van de doelgroep. Dus dat <a href="#contact"> Contact me </ a> neemt u mee naar een plek op de pagina die de naam "contact" - <a name="contact"> </ a>


Met behulp van gewoon "#" als de hypertext verwijzing is slecht omdat "Een nietig fragment-id met of zonder het hekje betekent dat de URL verwijst naar het hele object." In de meeste browsers, zal worden uitgelegd als wees terug naar het begin van de pagina. In het beste geval zullen niets doen wanneer geklikt.


In het tweede geval, het gebruik van "javascript:" als de hypertext verwijzing gewoon niets. Vergeet niet dat we te maken met die die voor een reden dan ook geen gebruik kunnen maken van alles wat afhankelijk is van JavaScript. Dus nogmaals, deze link doet niets voor iemand wiens browser ondersteunt geen javascript herkennen.


Dit kan op een betere en goed werken voor alle


Gelukkig kunnen we een toegankelijk alternatief dat functies perfect voor mensen met Javascript, maar degradeert goed voor degenen die dat niet doen. We doen dit door gebruik te maken van een echte link naar de werkelijke bestemming in onze hypertekst referentie:


<a href = "file.html" onclick = "window.open ( 'file.html', 'window_name', 'toolbar = yes, location = yes, status = yes, menubar = yes, scrollbars = yes, resizable = yes , Breedte = xxx, hoogte = xxx '); return false "> Open Venster </ a>


Het bovenstaande is de "toegankelijk"-methode voor het openen van een popup (het openen van nieuwe vensters is sowieso slecht, dus ik vermoed dat dit het minste van twee kwaden). Met behulp van de real-bestand als de hypertext verwijzing, maar de link naar "return false" zal functioneren of de persoon heeft Javascript of niet. Mensen zonder Javascript nog steeds tot de inhoud, en degenen die JavaScript hebt u de pop-up zoals de bedoeling was.


Nu, hier is de behandeling van: Veel mensen bieden een middel tot afsluiting van de pop-up, dat is net geopend. Nogmaals, ze doen dit met een van beide <a href ="#"... of <a href = "javascript :;... Zoals zo: <a href="#" onClick="window.close()"> Sluit </ a> Nou, zoals ik al zei, dit alles doet, is ze naar de top van de pagina. Ervan uitgaande dat de pop-up is gekoppeld aan slechts een pagina kunnen we hen terug te brengen van de verwijzende bestand in de hypertekst referentie: <a href="referrer.html" onClick="window.close()"> Close </ a>


Het gebruik van het woord "Close" zou kunnen zijn, maar er zijn twee denkrichtingen.


1. Door geen opening in het nieuwe venster op de w / o JavaScript, de terug-knop nog steeds werken en zal gebruik maken van deze


2. Met behulp van een titel zal hen helpen om te voorspellen wat er zal gebeuren. Zoals zo: <a href="referrer.html" title="clicking deze koppeling gaat u terug naar de referrer als u het antwoord aan niemand hebben JavaScript" onClick="window.close()"> Sluit </ a>


Als alternatief kunt u ook gebruik maken van de alt tekst kenmerk van een transparant spacer image: <a href="referrer.html"> <img src = "pad / spacer.gif" width = "1" hoogte = "1" grens = " 0 "alt =" [Ga Terug ]"></ a> (Dit gaat ervan uit dat ze ook surfen met afbeeldingen uitgeschakeld of op een niet-grafische browser)


Uiteindelijk, dit komt neer op wat u me horen zeggen zo vaak: Je kunt niet voorspellen de gebruiker of hun instellingen. U hoeft dus niet te proberen. Maak het recht en het zal bruikbaar zijn voor iedereen.


Disclaimer:


Het openen van nieuwe vensters is al erg genoeg zoals het is. Het bovenstaande artikel wordt alleen gericht is op je uitleggen hoe je ze beter. Het beste antwoord is niet te gebruiken op alle. Zie de volgende link voor meer informatie --

• Jakob Nielsen's Alertbox: de top tien van nieuwe fouten van de Web Design
  
  
• Jakob Nielsen's Alertbox: Top Tien-Web Design Fouten van 2002
  
  
• Duik in de toegankelijkheid: dag 16, niet het openen van nieuwe vensters
  
  
• Dan's Web Tips: het openen van nieuwe browservensters
  
  

Karl Groves is een freelance web designer die heeft verricht werkzaamheden voor de productie van dergelijke sites als National Cancer Institute, Netwerk voor een goede en Aerospace Medical Association.