Tip:
Highlight text to annotate it
X
Shilpi Kapoor- BarrierBreak
Ok, so we need to add the link right. I will just do that. Hi everybody, Sorry, technical
glitch we are just restarting. So again since I don't know where we stopped I am just going
to go through the powerpoint on design stage again. I think we kind of stopped where I
was talking about headings and heading structure. So I would continue from there on.
Like I was talking about its very important for a page to have the right heading structure
meaning its like you know a book that you buy and within the book you have chapters
and within the chapters you actually have heading or subheadings, topics or sub topics.
So its important for us to ensure that our website and our web pages have a very well
defined heading structure.
Now, lets talk about the next point which is choosing the right color contrast. Like
I was saying earlier on this is a very touchy topic for many companies. Because there are
certain colors that they want to follow. But its really important to actually choose the
right color contrast. We need to ensure that our background and foreground colors together
make an effective experience for the person who is accessing our website or applications.
Now lets talk about links. Generally you and I identify a link on a web page based on something
which has got an underline on it. So inherently when we see an underline, lets say a blue
text with an underline we say oh that's an link text that means we can click on it and
access another page or another website etc. from there. So that's really important for
us to remember, that we need to distinguish the link text from the rest of the content.
Very often we find designers who actually just provide the blue color but remove the
underline. That makes very difficult to distinguish between what is just a normal text and which
out of those are actually the links. Identifying your links very clearly is very important
at the design level.
Now let's talk about the next point which is skip links. On a web page very often, today
specifically we have very complex websites, we have top navigation, we might have a left
navigation and then we might have the main content. A lot of websites have first the
top navigation, or might have a right navigation and then the main content. Now, for a person
with disability, let's say visually impaired person, the screen reader will basically read
from left to right, top to bottom. He will or she will actually go through each and every
one of the link if he actually want to read the main content area. If we provide something
like Skip to main area at the top or skip to navigation then the person has got that
one link can take to that part of website to where they want to go to. So you find lots
of website that have skip to main content and have lot of websites that have skip to
navigation and that actually helps them from jumping a large number of links or text, jumping
right to the point where they want to read content from.
Now, let's talk about clear and descriptive link text. How often have you come across
websites that says 'Read More', Read More, Read More? But what more am I reading? Am
I reading more about technology, am I reading more about business, am I reading more about
world news? So be very clear in you link text actually will benefit a lot of users so that
they will then know how to interact with this website or what they need to do with it.
Last not the least is labels. Let's say you get on the website like twitter and you want
to create a new account. So when you say register it will actually give you a form. So whenever
you have form controls, like you might have a form where you might have to give your first
name, your last name, your sex, your age etc. So its very important in a form that every
form control actually has a label in it so that a label is associated. It's like somebody
doesn't know your name how will they identify you. It's as simple as that. If a visually
impaired person doesn't know what this form control is about and if it doesn't identify
itself like put your first name here he wouldn't know what to do with that form control. In
very simple language it's just about having somebody who is not named. And you wouldn't
want to know somebody who isn't named because you wouldn't be able to identify them then
and that's the same thing when you talk about form controls.
So, with that I think I covered the basics of Accessible Design. If you actually see
it's very simple. Its right reading order, its specifying heading effectively, using
the right color contrast, ensuring that the links are easily identified, providing features
like skip to main, skip links, having clear and descriptive link text and more so specifying
labels for form controls.
Now, let's come to our next presentation and now the topic that we are going to be talking
about is development - accessibility at the development stage.
So now let me now share my next slide. Now lets assume that you actually follow that
recommended which is actually check for accessibility at different stages. So you have now been
through the design stage and you have got an audit done and you have said Ok now let's
incorporate whatever is required from an accessibility perspective right through the design stage.
So now you have approved your design. Your development finally says lets start developing.
Like even at this point its very important to ensure that whatever is being developed
is being developed keeping in mind certain principles and certain guidelines so that
it will ensure that it does not lead to an increase in the cost. That's the most basic
think we need to ensure at this stage.
When the development house is developing the website or application the first CSS or standards
of html itself is the most important thing. The world wide consortium actually has drafted
the standards of html, CSS etc. So the first simple thing is to ensure that you have a
standard compliant website. W3c also provides validators in order to check whether your
html and CSS pages are compliant and actually follow the standards. That's the first step
that I think is key and important in doing any kind of development.
The next step is and this is in the most real order, lets talk about images. Images are
something which are found very often on a web page. We might have an image of a email,
we might have an of a CEO of the company, we might have an image of a news item etc.