This is going to be a quick post, but something very essential.
<title> is something that represent your web page and it is indeed helpful specially those who opens multiple websites on different tabs.
Page <title> should convey the content of the page and information about the portal. It’s very essential to provide appropriate page <title>. Why is it so important to have an unique page <title> is that if we have a multiple tabs opened on a browser, just by looking at the title, we should know what page we would be using.
Page <title> is inserted as part of page <header> and the coode looks like:
<html>
<head>
<title>
Page name: Portal name
</title>
<head>
...and then starts the <body> attribute.
Did you remember our post on Skip links – what, why and how?. In that article, we have seen how skip links would benefit users who uses screen readers or keyboard only but wouldn’t it be cool if Skip links actually helps everyone?
Let’s say you run a knowledge base portal or a news daily and your readers would love to browser by skim reading the page and read complete article of their choice. So they decide to skim read by headings and as you know one needs to either a scroll through the page with mouse or use down arrow on the keyboard. Wouldn’t it be cool, if your readers have a choice where they don’t require to scroll down and down a lot to skim read and able to browse all headings at one place? That’s exactly what SkipTo plugin offers. Not only your readers can browse through headings easily but the tool also have ability to show them important sections of the page such as content area, navigation, search etc., What’s more? if your reader is in middle of e page and would want to see the headings list, they can do so just by using a keyboard short cut key! You, as a developer or author, have a flexibility to decide what level of headings you would want to display, whether to show module on keyboard focus or page load and decide a keyboard short cut key.
You can very much experience the SkipTo plugin on this website. Thank you PayPal Accessibility team for this wonderful gift! BTW, this plugin is open sourced so any of you can help improve the plugin!
Today, we see that web content is increasing with a rocket speed and more often we see non-textual elements on the websites and applications. let’s consider scenarios such as:
Due to bandwidth reason, if images are not loaded on to the web page
So how can make sure such non-text content is accessible to all users and search engines specially those images and image links? Ultimate solution is appropriate use of alt.
Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
Ideally, alt is a very simple technique but very helpful to several users including those who rely on low band width connections, screen reader users and search engines etc., How this wouold help them? for those who disable the images due to low band width connection, the text explaining the image will be shown, search engines can crawl through the alternate text while displaying search results and screen readers will read the page from code and announce the alternate text to users.
How to add alt attribute? Very simple; just add inside the element. Example: <img src="folder/image.jpg" alt="Sample Image">.
It’s essential to remember that the alt attribute given is meaningful and appropriate.
When to use? The answer is “always” but one thing to remember is that if the image is just about decorative, one should use null alt attribute. Example code would be: <img src="folder/decoimage.jpg" alt="">
As you may have noticed, some websites specially those are related to news have a tiny text and often difficult to read and more difficult for people with low vision or those elderly. But the argument from the authors is that they would want to accommodate as much information as they can on the page; so what is the solution and how we can include all users? There are a few methods that we can address this problem:
1. Educate users with a help page about existing accessibility options provided by browsers (This is recommended)
If your target users are someone who you think may not be able understand the documentation about existing accessibility features provided by browsers and not aware how to use them, you can provide a few accessibility options in your website itself
It would be good to include a “Help Page” and list down a few common accessibility options available in browsers. For instance, in most browsers, one can use “CTRL along with Plus” to increase the font and “Control along with minus” to decrease the font size. also, this help page can list the popular assistive technologies such as screen readers, screen magnification software.
Skip links is something we don’t see in most of the websites. “Skip links” helps users (especially the keyboard users) to jump directly to a block of content or to an unique area of the page. “Skip links” are used for:
Skip to main content
Skip to navigation
Skip to secondary navigation
Skip to Search
These links are nothing but book marks on a web page. “Skip links” are expected to be placed at the top of web page and should be the first available link.
Why is Skip links important?
Now, let’s discuss the rational for having skip links. Let’s visit Cleartrip – a travel website in India. Layout of this portal is: Screen shot of Cleartrip.com home page
Cleartrip logo on the top left
There are a few links on the top right such as My trips, sign in etc
Site navigation links such as Flights, Trains, Hotels etc
A form to search international and domestic flights
Aside to the search form, there is a module that shows offers and deals
And there are some footer links
In this page, mostly users will prefer to use the Search flights module. OK keep this in mind for now and let’s understand keyboard and screen reader users.
Keyboard only user will use “Tab” key that moves focus from one element to another and they can use “space” key or “return” key to activate an element. Now, let’s understand how the screen readers on personal computers (PC) such as Non Visual Desktop Access (NVDA) works on a webpage. Usually a screen reader reads content from left to right and top to bottom and there are designated keyboard commands that provides flexibility for users to browse the page by elements such as H for Headings, F for Forms etc. and screen reader users too use “space” or “return” key to activate an element.
Let’s get back to our Cleartrip example! As we agreed above, the most used feature of this page is Search form and a screen reader user can can use hot key F to directly jump to From input field but a keyboard only user have to press Tab key for several times to reach From input field. When a user is much familier with the page layout, he or she wouldn’t bbe interested to see the repeated block of elements each time. In this scenario, having a Skip to main content would be helpful so that keyboard only user or a screen reader user who may not be aware of hot keys can quickly jump to the search form. Another advantage I would think of is that Skip links would be handy when browsing a website on a device that has tiny screen.
It’s pretty simple. Create an hyper link at the top of the page with screen text “Skip to main content” or Wherever you feel the important feature on your page. For our above Cleartrip example, it would be appropriate to create a Skip to main content link. The code will be something like: <a href="#maincontent">Skip to main content</a>
Now, let’s come to the main content area and create an anchor name using: <a name="maincontent"></a>
We can apply the styles as needed using the CSS. Now, the argument would be whether Skip links should be visible or hidden. I believe, these links should be visible because, they cater to the needs of not just screen reader users but also the keyboard only users and mobile users.
To conclude, Skip links are helpful to several users including those who use keyboard only or view web pages on tiny devices. Let’s advocate Skip links and make best use of them!
