Accessibility meets findability
Since the early days of the web, and the browser wars, we arrived to an era of peace.
Nowadays we as web designers are in the best position to develop accessible websites , and in this article i will show you some obscure html tags and attributes, that will help you create accessible and findable websites.
There are many different techniques out there, that will help you achieve accessible and findable websites, bellow I have described a few different options and pointed out a few resources where you can learn more.
Correct way of using tables
Back in the day, web documents used to have table-based layouts and this was a bad practice for the various reasons, when css became widely supported web designers started to adapt some standards and abandoned the table based layout websites.
Just because table-based layouts are a bad idea, does not means that you shouldn’t use them to display tabular data so please do not ignore their power for this purpose.
Tables can also offer great options to increase density of keywords on a web document and search engine love them.
| Tags | Used for |
|---|---|
| abbr | together with the tittle attribute can be used to specify what an abbriviation stands for, helping users to learn it and search engine to index it. |
| acronym | together with the tittle attribute can be used to specify what an acronym stands for, helping users to learn it and search engine to index it. |
Please notice above the summary attribute and the <caption> tag offer two valuable opportunity points to insert extra keywords and make the document more accessible by giving more information to the users.
Building a table following the accessible standards we have increased the keywords on the page, not bad.
Acronym tag
Acronyms are all over the place, you do not know them all and this is where this tag come into play.
Users will search for some acronym or they might search for the the all sentence, well with the example below you will find a way to clear this up.
W3C
Using the attribute title together with the <acronym> tag you can deliver the content in both ways, easy and simple.
Abbr tag
Abbreviations are handled in the same way as the example above and they have the same vantages to deliver an accessible web.
PT
Accessible forms
Online web forms are everywhere and for some users this can be confusing, so creating accessible web forms is a key element of today’s web design.
A form element on your website can have a positive or negative impact on your site is used and help your conversion rates.
Below is a web form that has all the features to make as accessible as possible.
Note that the <fieldset> tag wraps all the form in one container creating that separation layer in which the user can focus, followed by the <legend> tag where can describe what the form is for and you can also insert a keyword in the <cite> tag for a more findable approach.
Finally you should use the <label> tag to clearly describe what information that you expect from the user.
All of this tags bring opportunities for a more accessible and findable forms.
Conclusion
For me accessibility on the web is a very important asset for us web designers, because as shown above you can create accessible web sites which therefor will be more findable and seo friendly.
You can have a very well designed and presentable website but do not ignore this strong asset as everyone is a winner with this approach.
For more info in accessibility i recommend this resources below:
- WCAG 2.0
- Accessify
- Websitetips
- Webcredible
- Web Accessibility: Web Standards and Regulatory Compliance book
Please share your tips below.