Images
- Provide Alt attributes to describe what the subject of the image asset is.
- Informative and descriptive file name (Great for SEO too :D).
- For images that are for pure decoration, apply
alt="null"
and do not provide atitle
attribute to mark as safely ignore for Assistive Technology.
Anchors
- Title tags for anchors to describe where the link goes.
- Anchor text should explain where the link goes.
-
a
,a:link
anda:visited
styles (2 recomended) - Make sure they are recognisable as anchors. -
a:hover
anda:focus
styles (2 recomended) -
a:active
styles (2 recomended)
Controls and Inputs
- All inputs should have a
name
attribute to desribe what data it is to expect.
Buttons (and other click)
Typography and Copy
- Avoid long reading lines
- Avoid small font
- Avoid
text-transform: uppercase;
for long reading, if not most of the type design.
Structure
- Samtantics help!
- ARIA roles
ARIA roles in elements landmarks help assistive tech.
-
<header role="banner">
-
<nav role="navigation">
-
<main role="main">
-
<aside role="complementary">
-
<form role="form">
-
<footer role="contactinfo">
-
<form role="banner">
- Web Content Accessibility Guidelines (WCAG) 2.0 - http://www.w3.org/TR/WCAG20/
- a11y Project - http://a11yproject.com/resources.html
- HTML5 and Accessiblity - http://www.w3.org/Talks/2014/0317-HTML5-A11Y/