Button eller Div til HTML Knapper?
Jeg ser ofte at folk bruger div eller span i stedet for button, men det kan give problemer i forhold til tilgængelighed og brugervenlighed. I stedet bør man overveje at bruge button.
Af. Jacob
Edited: 2018-05-26 21:05
En af de ting som har irriteret mig lidt, det er divitis i vores HTML sider på multimediedesigner uddannelsen. Kort sagt har vi fået undervisning i at bruge div elementer til nogle ting, som de egentlig ikke er tiltænkt.
Divitis er et gammelt begreb, som jeg egentlig havde glemt eksisterede. Det omhandler blandt andet unødig brug af div elementer, i situationer hvor der eksistere semantiske elementer som er lavet til formålet. Der kan måske være enkelte situationer, hvor det vil være forsvarligt at bruge div til visuel præsentation (i kombination med CSS) – men jeg vil helst undgå at bruge dem helt til det visuelle.
Det kunne eksempelvis være omkring design af knapper på web-sider. Jeg vil selv enten lave dem med a eller button, afhængig af situationen. Sidstnævnte vil nok være at foretrække til de fleste situationer, hvor man skal designe knapper på webside. Det skyldes at div ikke har nogen semantisk betydning, og de problemer det kan give for skærm oplæsere. Eksempelvis kan man normalt ikke "vælge" eller "bruge" et div element via tastaturet, med mindre man altså har kodet siden på en bestemt måde. Det problem opstår ikke med button elementet, da det netop er tiltænkt brug i brugerflader, og derfor kan man nemt vælge det med tabulator knappen, uden at man skal huske en masse ekstra "tungt" teoretisk stof.
HTML elementer
Det er ikke fordi, at jeg selv er super meget inde i det, og det er også et kompliceret emne. Men generelt forsøger jeg altid at læse om, hvordan de forskellige elementer skal bruges, inden jeg bruger dem. Det ville måske også være nemmere, hvis siden simpelthen bare holdt op med at virke, hvis man havde brugt et element forkert. Men sådan fungere HTML ikke.
I praksis betyder det sjældent så meget, fordi de færreste vil have en målgruppe der inkludere skærm-oplæsere. Men hvorfor ikke kode sine sider rigtigt fra starten? Ofte vil det ikke koste meget mere end en enkelt Google søgning. Det skal dog nævnes, at både div og span også kan give problemer for andre brugere, og altså ikke kun skærmoplæsere.
Der findes mange ekspert-blogs og hjemmesider, som beskæftiger sig med brugervenlighed (usability) og tilgængelighed (accessibility), og selvom jeg ikke vil anbefale at man læser alt indholdet igennem (det vil være for omfattende), så kan det altså stadig være en god idé, at læse om de specifikke teknologier og elementer, som man enten bruger i forvejen, eller overvejer at bruge senere.
Brug af DIV eller SPAN til knapper
Personligt vil jeg ikke gøre det, fordi det gør tingene mere kompliceret end de behøver at være. I HTML har vi button elementet, som både kan anvendes inde i form elementer (Eksempelvis til formular indsendelse), og det kan også bruges udenfor (Eksempelvis til spil i browseren). Fordelen ved at bruge button er, at den allerede har indbygget funktion, og dermed behøver vi ikke vide så meget om hvordan knappen fungere i forhold til skræm oplæsere, eller på andre enheder. Med div eller span elementer er det en anden situation, fordi de ikke har denne "default" funktionalitet indbygget, og vi bliver derfor nødt til at kode vores egen.
Mozilla har eksempelvis følgende eksempel for et span element:
<span role="button" tabindex="0" onclick="handleBtnClick()" onKeyPress="handleBtnKeyPress()">Save</span>
Som vi kan se skal vi altså både tilføje en "role" attribut og en "tabindex" attribut, for at sikre os, at vores knap vil have samme funktionalitet som en button.
Role="button" fortæller browseren, at den skal registrere elementet som en knap. tabindex="0" bliver brugt til, at styre rækkefølgen for, hvilket element som vælges via tryk på tabulator knappen på tastaturet.
Jeg kan godt selv blive lidt irriteret, når hjemmesider ikke tillader hurtig navigation via tabulator, da jeg ofte bruger det selv til hurtig udfyldning af formularer på hjemmesider. Det er altså ikke kun skærm oplæsere som kan have et problem, hvis man erstatter standard elementer med div eller span. Faktisk kan a elementer også give problemer, fordi de egentlig er tiltænkt links, og dermed har de en funktion som er unik til links, hvilket kan forstyrre hvis man bruger dem til knapper.
Det jeg selv forbinder med a elementer, det er links til andre sider. Hvis en funktion derimod erstatter indholdet på en side dynamisk, så vil jeg sjældent selv bruge et a-element til formålet. Det eneste tidspunkt jeg gære det, vil være hvis siden også skulle fungere uden JavaScript.
Styling af button elementer
Det kan være lidt svært, at få stylet et button element så det vil se ens ud i alle browsere, men det er altså ikke umuligt.
Det handler om, at vide hvad der skal ændres. Nedenfor ses et fint eksempel på en styling som virker i moderne browsere:
button {
font-size: inherit;
width: 120px;
border: none;
background: rgba(255,82,13, 0.5);
color: #fff;
display: block;
padding: 0.5em;
text-align: center;
margin: 0.5em;
}
button:hover {
cursor: pointer;
border-color:#fff;
background:rgba(181,53,0, 0.5);
color:#e4e4e4;
}
De vigtigste ting her, er at fjerne standard kanten (border) på knappen, indsætte en baggrundsfarve (background), og så selvfølgelig display:block; og width:120px; til sidst. Man kan også indstille en cursor ved :hover stadiet, sådan at musen skifter til en hånd, når brugeren føre pilen over knappen.
Særligt for button elementet gælder også, at den ikke arver font- indstillingerne fra dens forældre-elementer (parents), derfor angiver vi også font-size:inherit;, eller vi kan angive font-size specifikt for button elementet.
Links
- Using the button role (Engelsk) – mozilla.org
Fortæl os hvad du tænker: