In our last blog, we focused on reasons you should opt for accessibility. Motivation is typically the first hurdle in becoming accessible. After you have crossed it though, the next important question arises: how? Instituted with a motto to help organizations reach a stage of complete accessibility, Tekvision firmly believes in guiding people who want to make their online presence accessible. We understand simply spreading awareness won’t do. People also need someone to assist them with technical help. This is the first of our series of preliminary accessibility techniques that you can implement at your own level!
Part One talks about accessibility techniques at a wireframe stage. These are the things you can do at the beginning stages of development so you don’t have to do a ton of rework later.
Page Titles, Headings and Landmarks
When a user lands on a page, the page title helps user to identify a tab even among multiple open tabs. Some of the most common mistakes that can be avoided with respect to page title include
- Giving same page title (may be website name) to all pages on the website whereas it should differ like “Home|<website_name>”, “About|<website_name>”, etc.
- On admin panels of websites, many-a-times while editing records, form show up in separate page. Now if these forms are labelled “Edit Record”, then it becomes difficult to identify which record is being edited.
A screen reader user comprehends the content using headings and landmarks. Heading at level one (h1) is generally considered to be a best practice. It is also recommended to ensure that this heading is similar to the page title or should convey the same meaning as the page title and should generally be at the start of the main content.
Headings convey the hierarchy of the content sections whereas the landmarks convey semantics behind the various blocks of a given layout. Having a well-structured heading strategy to your content, with strategically placed tags (H1-H6) will also make it easier for a screen reader to jump from section to section. Naturally, whatever facilitates a screen reader to do its job better translates to better accessible experience. The cherry on the cake? Using well-structured heading tags is also a requirement for good SEO. By using this technique, you are bagging two prizes. After all, search engine is a software trying to read a web page and screen reader is also a software trying to do the same.
Use of colors
A lot of the people who use assistive technology like screen readers may not have a complete vision impairment. However, they may have a problem with discerning colors. If your content relies heavily on color to convey its point, this group of people won’t understand what you are trying to say. Also, for a certain intensity of impairment, the only way to engage with online content is to adjust the contrast setting of the page. Your original intent of using colors may lose its impact.
So, should you give up colors altogether? Also no. This is because another class of people may have learning disabilities. These people associate information with color, and grasp knowledge differently. A bland, colorless piece of content will create hurdles for these people to understand what you want to say. Besides, your online presence should also appeal to people without disabilities. Striking a good balance is key. The choice of colors should be done while your UX and design teams are ramping up wireframes. Before translating these wireframes to HTML and CSS, get the contrast color evaluation done. This will save you from rework on the CSS color codes you have generated or modified.
Balance out Responsiveness and Accessibility
Responsiveness is the characteristic of online content that allows it to be viewed properly across all devices. View the same content on a laptop and your mobile device, and you will understand how seamlessly the matter transitions. However, online content often needs an elaborate set of rules to render properly on all devices. The challenge here is that visually impaired persons often resize the text as per the intensity of their vision damage. If you fit your responsive design into a rigid set of rules, resizing the text can often break your design. You can get around this problem using relative sizes for your rules instead of absolute units. (For e.g. you can set your width to 25% of its original width for a mobile device instead of specifying the width in pixels.) You can also play with how different levels of zooming appear on different resolutions. You can change the viewing resolution from your own device to other devices (laptop to mobile). Understanding your demographic is key before you implement accessibility techniques that over-optimize for just one class of people, while making it harder for others to digest your online content.
Hyperlinks and Navigation Bars
Your hyperlinks are often formatted differently than regular text. Typically, hyperlinks become blue and underlined. A sighted person can easily make out a link using this formatting. However, screen readers use the underlying anchor tag to convey links. Therefore, keep your link text descriptive and self-explanatory. Simply putting ‘click here’ is not enough, as the user may be unsure where the link is going to take them.
Avoid using hyperlinks for actions like submit. Note that hyperlinks denote navigating to a separate page whereas buttons indicate an action.
Most of the times links are part of Navigation Bars which are common across the website or the application. In case of navigation bars, it is very important to identify whether a simple list of links is sufficient or does it need to be presented as a navigation menu.
End of Part One of our blog series on accessibility techniques. Stay tuned for Part Two
Recent Comments