Användbarhetsboken beskriver på ett konkret sätt hur man gör webbplatser tillgängliga och användbara. Läs ett provkapitel som pdf, eller läs den direkt här på webben.
.51 Tabeller
Ett annat område för informationsdesignen är tabeller. Här är det mest en fråga om att göra dem på ett sätt så att även synskadade kan använda dem.
I webbsammanhang kan det vara klargörande att skilja på två sorters tabeller:
• datatabeller - vanliga, normala tabeller som funnits sedan långt innan webben och som används för att presentera ett siffer- eller faktamaterial. Borde egentligen kallas bara för ”tabeller” men ”data” har lagts in för att uttryckligen skilja dem från layouttabellerna.
• layouttabeller - används för att bygga upp en sida, till exempel för att åstadkomma flera spalter. Ser inte alls ut som tabeller, men görs med samma HTML-koder.
Att koda tabeller så att de blir tillgängliga kräver omsorg om detaljerna. På finns länkar till bra genomgångar av hantverket.
Sortering av tabeller
För tabeller där användaren skall kunna styra sorteringen, se Låt användaren välja mellan olika sorteringar, sid 243 .
Texten ovan är ett avsnitt ur Användbarhetsboken. Varje avsnitt har sin egen webbsida. Här hittar du rättelser, tillägg, blogginlägg och kommentarer - eller gör dina egna. Några sidor (till exempel den du läser nu) har också hela bokens text. Steg för steg kommer hela bokens text att läggas ut här på webben.
Vill du läsa mer kan du:
- 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.
Tabellkodning för tillgänglighet
- HTML-standarden för tabeller
- Formatmallsstandarden för tabeller
- Bra pedagogisk introduktion: Bring on the tables
- Fler ställen att lära sig: The Web Standards Project
- Exempel från 24-timmarswebben: Exempel på tabeller
- Grundlig genomgång: Papers on Section 508 by Steve Ferg
- Verktyg för att granska komplexa tabeller: A Complex Table Inspector
Ur bloggen
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