17 Mar 2019

Small Tweaks You Should Try On Your Website

By PixiDesigns | 17 Mar 2019 | website,tweaks | 281 Comments

Though we all know IT is ever changing industry here are few things for you that could help your website accessibility;

#Document Structure and Semantics
Structure of your frontend in HTML should be well organized to get more attention and be remembered that screen readers only rely on well structured code style. Always try to use the elements that HTML5 spec provides. Always use HTML5 Doctor or consult Pixidesigns team for the resources. Accessibility and Semantic structure is the most important thing to keep in mind while preparing your HTML. Make sure to follow the below points to achieve well structured and semantic structure.

# Use Single <main> Element
Using one <main> element is important and responsible for building semantic structured  document. By doing this you make it more like a signpost for the users and can be very helpful for screen readers.

# Use Elements Appropriately
For any button instance you should avoid jumping to attach your JavaScript to a <div> or to a <a href="#"> instead you should use <button> elements only. <button> are attached to keyboards events and also help screen reader users just because the announcement of the element is correct, any user who is focused on that button is just a stroke away and that event would trigger. This makes better user experience for your website.

# Importance of Heading Hierarchy
Importance of heading hierarchy is important for screen readers as it creates a nice and meaningful page for them. You may have sub sections of the heading with an option to skip and back to page. Let them consume the content as much and as easily as possible.

# Typography Tweaks for Blog and Article
Always be remembered that big fonts are anyhow gives advantage over small fonts, simple reason is that one may have difficulty in reading small font but no one could have the same difficulty in reading large fonts so, always try to use font size 16px and line-height to around 1.5.
Highlighting key words, phrases and font selection is also a quite nice and important idea one should take care while writing a blog or an article.

# Keyboard Support
Few users prefer to use keyboard to navigate the website, this is very useful for them. It might not look good to you but its helpful anyways. You can use addEventListener('keyup') followed by the keycode and run whatever code hides your dialogue.


Leave a Comment

Your email address will not be published. Required fields are marked *