78.1.5 Använd HTML-element utifrån betydelse
Skall - undantag, se boken
Varje avsnitt av Användbarhetsboken har sin egen webbsida - den du just läser hör till rådet Använd HTML-element utifrån betydelse. Här hittar du rättelser, tillägg, blogginlägg och kommentarer - eller gör dina egna. Så småningen kommer du även att kunna läsa själva boktexten här.
Du kan även:
- Läsa ett provkapitel om Användbarhet eller Typografi läsbarhet
- Börja läsa Användbarhetsboken här på webben
- Läsa mer om Användbarhetsboken, och höra vad andra sagt om den
- Köpa Användbarhetsboken hos Bokus eller Adlibris.
Ur bloggen
Ibland när man ser html-koden som en del publiceringssystem producerar, kan man bara skaka på huvudet. Som när man ser följande självbeskrivande rubrik på Örebros webbplats
<h2 class=“h2”><strong>Tekniken finns men är inte känd</strong></h2><br />
<q>-taggen – quotation – är ett bekymmer om man har ambitionen att skriva semantiskt korrekt html-kod. Den skall sätta ut citattecken runt det citerade, men eftersom Internet Explorer inte stödjer detta (ens i nya versionen 7), så blir det antingen fel där eller i andra webbläsare.
Mitt råd (t.ex. i Användbarhetsboken) brukar vara att i detta fall bryta mot standard, sätta ut sina citattecken själv och helt enkelt inte använda <q>.
I A List Apart presenterar dock Stacey Cordoni en bättre lösning, som både ger korrekt kod och ser till att citattecknen blir rätt.
Uppdaterat: Metoden är inte okontroversiell. Se Roger Johanssons (456 Berea Street) kommentar.
Accessify.com bjuder på en stor uppsättning verktyg för att producera tillgänglig html- och css-kod. Till exempel Accessible Table Builder som ställer ett antal frågor om tabellen som skall göras och sedan producerar koden.
Andra verktyg:
- Accessibility Tools
- Accessible Form Builder – A simple but very quick way of putting together a form that uses either CSS or table for layout, automatically creates
labelelements and the associatedforandidatttributes, as well as (optional)titleattributes for each text field. It’s as simple as entering a list of fields that need to be captured and hitting return.- Form Element Generator – Build individual form elements that are accessible (requires JavaScript to work). Could be used after creating the form above to address fields that are not straightforward text inputs.
- Pop-up Window Generator – Create pop-ups that are accessible and search engine-friendly. Note: this tool is going to get a revamp very soon, such that inline event handlers are not used. So, don’t flame me, all ye DOM scripters!
- Favelets – Little pieces of JavaScript that can be saved as favourites in Internet Explorer, Mozilla and Opera. You may find these useful for checking features of a page (for example, what links are present, images missing alt attributes etc
- General Developer Tools
- Yes/No List creator – It’s a tool for quickly generating accessible, XHTML-compliant yes/no radio button choices from a list
- Insta-Select – An easy XHTML-compliant
selectlist generator (paste in your list and out comes theselectwith releventoptionelements andvalueattributes)- List-o-matic – Create CSS-styled navigation blocks based on unordered list
<li>items.- Acrobot – converts all your acronyms/abbreviations using the
<acronym>and<abbr>tag- HTML to JavaScript Convertor – Similar to Response.Right, this tool takes your markup and converts it to a series of
document.write()statements that you can use in a block of JavaScript.- XFN (XHTML Friends Network) Link Creator – Build up XFN-friendly links for copying/pasting into a blog-roll or navigation menu.
- Response.Right – Save time converting large blocks of text/HTML to server-side write statements (such as PHP echo or ASP response.write) with this handy convertor.
- Quick Escape – Converts HTML to escaped characters suitable for pasting into form textarea inputs.


Post new comment