O documento fornece 7 dicas para melhorar a acessibilidade de websites: 1) Aumentar o tamanho da fonte e espaçamento entre linhas; 2) Adicionar links de pular para conteúdo; 3) Usar tabelas de forma acessível; 4) Manter contorno em links; 5) Evitar links vazios; 6) Indicar destino de links; 7) Revelar formato de links.
HTML/CSS tips to improve the accessibility of your websites
1. HTML/CSS TIPS TO
IMPROVE THE
ACCESSIBILITY OF
YOUR WEBSITES
Ivo Gomes
@ivogomes www.ivogomes.com
Quinta-feira, 10 de Novembro de 11
2. Why should I care?
Quinta-feira, 10 de Novembro de 11
3. ACCESSIBILITY
MYTHS
Quinta-feira, 10 de Novembro de 11
4. ACCESSIBILITY
MYTHS
Accessibility is just for blind people
Quinta-feira, 10 de Novembro de 11
5. ACCESSIBILITY
MYTHS
Accessibility is just for blind people
Accessible websites are ugly and boring
Quinta-feira, 10 de Novembro de 11
6. ACCESSIBILITY
MYTHS
Accessibility is just for blind people
Accessible websites are ugly and boring
Accessibility is expensive and difficult
Quinta-feira, 10 de Novembro de 11
7. ACCESSIBILITY
MYTHS
Accessibility is just for blind people
Accessible websites are ugly and boring
Accessibility is expensive and difficult
Offering a text-only version is good enough
Quinta-feira, 10 de Novembro de 11
8. ACCESSIBILITY
MYTHS
Accessibility is just for blind people
Accessible websites are ugly and boring
Accessibility is expensive and difficult
Offering a text-only version is good enough
Validation equals accessibility
Quinta-feira, 10 de Novembro de 11
9. ACCESSIBILITY
MYTHS
Accessibility is just for blind people
Accessible websites are ugly and boring
Accessibility is expensive and difficult
Offering a text-only version is good enough
Validation equals accessibility
If it works with a screen reader it is accessible
Quinta-feira, 10 de Novembro de 11
10. OK, so what can I do?
Quinta-feira, 10 de Novembro de 11
13. ENLARGE
YOUR
Quinta-feira, 10 de Novembro de 11
14. ENLARGE
YOUR
FONT
Quinta-feira, 10 de Novembro de 11
15. ENLARGE YOUR
FONT
Don’t use tiny 10px
or 12 px text size
Try 16px
or even more...
Quinta-feira, 10 de Novembro de 11
16. Pro tip: Try reading your website when
seated 1 meter away from the screen
Quinta-feira, 10 de Novembro de 11
17. USE RELATIVE FONT-SIZES
html {
font-size: 62.5%;
}
body {
font-size: 1.6em; = 16px (sort of)
}
Quinta-feira, 10 de Novembro de 11
18. USE RELATIVE FONT-SIZES
html {
font-size: 62.5%;
}
body {
font-size: 1.6em; = 16px (sort of)
}
Beware of the inheritance!
Quinta-feira, 10 de Novembro de 11
19. USE RELATIVE FONT-SIZES
!
body {
font-size: 1.6em; = 16px
}
h1 {
font-size: 2em; = 32px (not 20px)
}
body > h1
h1 font size is 2em x 1.6em
Quinta-feira, 10 de Novembro de 11
20. USE RELATIVE FONT-SIZES
body {
font-size: 16px;
font-size: 1.6rem; = 16px
}
h1 {
font-size: 20px;
font-size: 2rem; = 20px
}
Quinta-feira, 10 de Novembro de 11
22. INCREASE YOUR
LINE-HEIGHT
Quinta-feira, 10 de Novembro de 11
23. INCREASE YOUR
LINE-HEIGHT
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Suspendisse et felis malesuada
massa fermentum faucibus sit amet sed augue.
Aliquam aliquam auctor diam, sed varius nunc
tempus in. Fusce vel egestas massa. Quisque sit
amet libero risus, ac viverra enim.
line-height: normal;
Quinta-feira, 10 de Novembro de 11
24. INCREASE YOUR
LINE-HEIGHT
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Suspendisse et felis malesuada
massa fermentum faucibus sit amet sed augue.
Aliquam aliquam auctor diam, sed varius nunc
tempus in. Fusce vel egestas massa. Quisque sit
amet libero risus, ac viverra enim.
line-height: 1.4;
Quinta-feira, 10 de Novembro de 11
26. PROVIDE
SKIP-LINKS
Quinta-feira, 10 de Novembro de 11
27. PROVIDE
SKIP-LINKS
Skip links provide a way for users to jump directly
to the page content, without having to go through
all the navigation links.
Quinta-feira, 10 de Novembro de 11
68. PROVIDE
SKIP-LINKS
Most people choose to hide the skip links.
That’s not necessarily bad, if done right.
Quinta-feira, 10 de Novembro de 11
69. HIDING SKIP-LINKS
#skiplinks {
display:none; = BAD
}
#skiplinks {
text-indent:-9999px; = BAD
}
Quinta-feira, 10 de Novembro de 11
70. HIDING SKIP-LINKS, THE RIGHT WAY
#skiplinks a,
#skiplinks a:hover,
#skiplinks a:visited {
position:absolute;
left:0px; positions the links
top:-500px; outside of the
width:1px; viewport
height:1px;
overflow:hidden;
}
Quinta-feira, 10 de Novembro de 11
71. HIDING SKIP-LINKS, THE RIGHT WAY
#skiplinks a:active,
#skiplinks a:focus { shows the links
position:static; when they are
width:auto; activated (e.g.
height:auto; when navigating
}
with the keyboard)
Quinta-feira, 10 de Novembro de 11
72. HIDING SKIP-LINKS, THE RIGHT WAY
#skiplinks a:active,
#skiplinks a:focus { shows the links
position:static; when they are
width:auto; activated (e.g.
height:auto; when navigating
}
with the keyboard)
you can play with the positioning to
place the links wherever you want
Quinta-feira, 10 de Novembro de 11
73. HIDING SKIP-LINKS, THE RIGHT WAY
shows the links
when they are
activated (e.g.
when navigating
with the keyboard)
Quinta-feira, 10 de Novembro de 11
74. HIDING SKIP-LINKS, THE RIGHT WAY
shows the links
when they are
activated (e.g.
when navigating
with the keyboard)
Quinta-feira, 10 de Novembro de 11
92. DON’T CREATE
EMPTY LINKS
Quinta-feira, 10 de Novembro de 11
93. DON’T CREATE
EMPTY LINKS
Whenever you put a link on a web page, make
sure that it has text content. This may seem
incredibly obvious...
Quinta-feira, 10 de Novembro de 11
94. LINKS WITH NO TEXT CONTENT
<a href="http://example.com/"></a>
<a href="http://example.com/"><img src="image.gif"
alt=""></a>
Quinta-feira, 10 de Novembro de 11
95. THERE, I FIXED IT
<a href="http://example.com/">Link text</a>
<a href="http://example.com/"><img src="image.gif"
alt="Link text"></a>
Quinta-feira, 10 de Novembro de 11
97. ALWAYS REVEAL THE
LINK DESTINATION
Quinta-feira, 10 de Novembro de 11
98. ALWAYS REVEAL THE
LINK DESTINATION
You should always reveal links that open in a new
window or link to a non-HTML document
Quinta-feira, 10 de Novembro de 11
99. HIGHLIGHT LINKS THAT OPEN IN A
NEW WINDOW
a[target="_blank"],
a[target="new"] {
padding: 0 15px 0 0;
background-image: url(images/new_window.gif);
background-repeat: no-repeat;
background-position: right center;
}
Quinta-feira, 10 de Novembro de 11
100. HIGHLIGHT LINKS THAT OPEN IN A
NEW WINDOW
a[target="_blank"],
a[target="new"] {
padding: 0 15px 0 0;
background-image: url(images/new_window.gif);
background-repeat: no-repeat;
background-position: right center;
}
Quinta-feira, 10 de Novembro de 11
101. LOOK MA, NO IMAGES!
a[target="_blank"]:after,
a[target="new"]:after { you can use any
other HTML entity
content: "00a0 27A0"; instead of this one
}
Quinta-feira, 10 de Novembro de 11
102. LOOK MA, NO IMAGES!
a[target="_blank"]:after,
a[target="new"]:after { you can use any
other HTML entity
content: "00a0 27A0"; instead of this one
}
Quinta-feira, 10 de Novembro de 11
103. YOU CAN ALSO USE THIS FOR LINKS TO
NON-HTML DOCUMENTS
a[href$="pdf"]:after {
content: " (PDF)"; Link text (PDF)
}
a[href$=".doc"]:after {
content: " (DOC)"; Link text (DOC)
}
Quinta-feira, 10 de Novembro de 11
104. AND ALSO FOR LINKS TO EXTERNAL
WEBSITES
a[href^="http"]:after { External links
content: "21D7"; (start with http)
}
a[href^="http://yourwebsite.com"]:after,
a[href^="http://www.yourwebsite.com"]:after {
content: ""; Internal absolute
} links
Quinta-feira, 10 de Novembro de 11
105. BUT A BETTER SOLLUTION WOULD BE
<a class="external" href="http://whatever.com">Link
text<span> (external link)</span></a>
Link text (external link)
Quinta-feira, 10 de Novembro de 11
106. BUT A BETTER SOLLUTION WOULD BE
<a class="external" href="http://whatever.com">Link
text<span> (external link)</span></a>
a.external span
{
position: absolute;
left: -5000px;
width: 4000px;
}
Link text
Quinta-feira, 10 de Novembro de 11
108. MORE
LINKING TIPS
Quinta-feira, 10 de Novembro de 11
109. MORE
LINKING TIPS
When using big linkable blocks, make sure the
most important info comes first
Quinta-feira, 10 de Novembro de 11
110. MORE
LINKING TIPS
When using big linkable blocks, make sure the
most important info comes first
Quinta-feira, 10 de Novembro de 11
111. MORE
LINKING TIPS
When using JavaScript triggered links, you should
always provide a href
<a class=”ajax_do_this”> = BAD
Quinta-feira, 10 de Novembro de 11
112. MORE
LINKING TIPS
When using JavaScript triggered links, you should
always provide a href
<a class=”ajax_do_this”> = BAD
<a href=”#” class=”ajax_do_this”> = GOOD
Quinta-feira, 10 de Novembro de 11
113. MORE
LINKING TIPS
When using JavaScript triggered links, you should
always provide a href
<a class=”ajax_do_this”> = BAD
<a href=”#” class=”ajax_do_this”> = GOOD
<a href=”do-this-if-no-js.html”
class=”ajax_do_this”> = BETTER
Quinta-feira, 10 de Novembro de 11
115. NON-MOUSE
NAVIGATION
Quinta-feira, 10 de Novembro de 11
116. NON-MOUSE
NAVIGATION
You should always provide navigation feedback
for users that don’t or can’t use the mouse
Quinta-feira, 10 de Novembro de 11
117. NON-MOUSE
NAVIGATION
You should always provide navigation feedback
for users that don’t or can’t use the mouse
This includes the ones that use the keyboard to
navigate; their fingers (tactile screens); or other
assistive devices
Quinta-feira, 10 de Novembro de 11
118. Pro tip: Whenever you use :hover,
also use :focus
Quinta-feira, 10 de Novembro de 11
119. Pro tip: Whenever you use :hover,
also use :focus
You may want to include the :active state as well to cater for people who use Internet
Explorer 7 and earlier, since IE 8 is the first version to support :focus
Quinta-feira, 10 de Novembro de 11
120. MAKE LINKS FOCUSABLE TO
EVERYONE
a:hover
{
color:red;
}
a:hover,
a:focus,
a:active
{ = BETTER
color:red;
}
Quinta-feira, 10 de Novembro de 11
122. PARAGRAPH
SPACING
Quinta-feira, 10 de Novembro de 11
123. PARAGRAPH
SPACING
Make sure that there is enough spacing between
paragraphs
Quinta-feira, 10 de Novembro de 11
124. PARAGRAPH
SPACING
Make sure that there is enough spacing between
paragraphs
Like the line-height tip, this greatly improves text
readability
Quinta-feira, 10 de Novembro de 11
125. ADD SOME SPACING BETWEEN
PARAGRAPHS
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Suspendisse et felis malesuada
massa fermentum faucibus sit amet sed augue.
Aliquam aliquam auctor diam, sed varius nunc
tempus in. Fusce vel egestas massa. Quisque sit
amet libero risus, ac viverra enim.
p { margin: 0;}
Quinta-feira, 10 de Novembro de 11
126. ADD SOME SPACING BETWEEN
PARAGRAPHS
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Suspendisse et felis malesuada
massa fermentum faucibus sit amet sed augue.
Aliquam aliquam auctor diam, sed varius nunc
tempus in. Fusce vel egestas massa. Quisque sit
amet libero risus, ac viverra enim.
p { margin: 10px 0;}
Quinta-feira, 10 de Novembro de 11
127. And, as stupid as this tip might be, you
should always use <p> for paragraphs
Quinta-feira, 10 de Novembro de 11
128. WE SEE THIS A LOT
This text is the first paragraph.
<br>
<br>
= WRONG
This text is the second paragraph.
<p>This text is the first paragraph.</p>
<p>This text is the second paragraph.</p>
Quinta-feira, 10 de Novembro de 11
130. CHECK THE
COLOR CONTRAST
Quinta-feira, 10 de Novembro de 11
131. CHECK THE
COLOR CONTRAST
Check the contrast between the foreground and
the background colors
Quinta-feira, 10 de Novembro de 11
132. CHECK THE
COLOR CONTRAST
Check the contrast between the foreground and
the background colors
http://snook.ca/technical/colour_contrast/
colour.html
or Google for “color contrast checker”
Quinta-feira, 10 de Novembro de 11
133. CHECK THE
COLOR CONTRAST
Quinta-feira, 10 de Novembro de 11
134. CHECK THE
COLOR CONTRAST
Quinta-feira, 10 de Novembro de 11
136. ABOUT THE
ALT ATTRIBUTE
Quinta-feira, 10 de Novembro de 11
137. ABOUT THE
ALT ATTRIBUTE
The alt attribute provides a textual alternative to
images
Quinta-feira, 10 de Novembro de 11
138. ABOUT THE
ALT ATTRIBUTE
The alt attribute provides a textual alternative to
images
But you shouldn’t add an alternative text to every
image in your website
Quinta-feira, 10 de Novembro de 11
139. Waaa? No alt text?
Quinta-feira, 10 de Novembro de 11
140. I didn’t say that
Quinta-feira, 10 de Novembro de 11
141. You must ALWAYS add the alt attribute
Quinta-feira, 10 de Novembro de 11
142. BUT SOMETIMES IT’S BETTER IF IT’S
BLANK
<img src=”boobs.png” alt=”Boobs” />
Include alternative text only when the image
content is relevant
Quinta-feira, 10 de Novembro de 11
143. BUT SOMETIMES IT’S BETTER IF IT’S
BLANK
<img src=”boobs.png” alt=”Boobs” />
Include alternative text only when the image
content is relevant
<img src=”useless-decorative-picture.png” alt=”” />
If the image is irrelevant, the alt should be there,
but blank
Quinta-feira, 10 de Novembro de 11
145. ABOUT THE
TITLE ATTRIBUTE
Quinta-feira, 10 de Novembro de 11
146. ABOUT THE
TITLE ATTRIBUTE
The title attribute should be used to provide extra
information about some element on the page
Quinta-feira, 10 de Novembro de 11
147. So, stop duplicating the link text inside
the title attribute
Quinta-feira, 10 de Novembro de 11
148. USING THE TITTLE ATTRIBUTE THE
RIGHT WAY
<a href=”article.html” title=”I like icecream”>I like
Icecream</a> = BAD
Screen readers will just repeat the link text twice
Quinta-feira, 10 de Novembro de 11
149. USING THE TITTLE ATTRIBUTE THE
RIGHT WAY
<a href=”article.html” title=”I like icecream”>I like
Icecream</a> = BAD
Screen readers will just repeat the link text twice
<a href=”article.html” title=”Select an option to see
the corresponding items”>Select an option</a>
The title should provide some extra information
that is not immediatly visible on the screen
Quinta-feira, 10 de Novembro de 11
151. USE HEADINGS
FOR TITLES
Quinta-feira, 10 de Novembro de 11
152. USE HEADINGS
FOR TITLES
HTML headings, created with the h1-h6 elements,
are very useful and should be used for anything
that visually looks or acts like a heading.
Quinta-feira, 10 de Novembro de 11
153. USE HEADINGS
FOR TITLES
Quinta-feira, 10 de Novembro de 11
154. USE HEADINGS
FOR TITLES
Each document should have a logical heading
structure that starts at level 1 and doesn’t skip any
levels
Quinta-feira, 10 de Novembro de 11
155. USE HEADINGS
FOR TITLES
Each document should have a logical heading
structure that starts at level 1 and doesn’t skip any
levels
The title of the document’s main content should
be a level 1 heading
Quinta-feira, 10 de Novembro de 11
156. USE HEADINGS
FOR TITLES
Each document should have a logical heading
structure that starts at level 1 and doesn’t skip any
levels
The title of the document’s main content should
be a level 1 heading
There should be only one level 1 heading in each
document *
Quinta-feira, 10 de Novembro de 11
157. * WE CAN HAVE MORE THAN ONE <H1>
BUT ONLY FOR THE CONTENT TITLE
<h1>Organisation Name</h1>
<h2>Main menu</h2>
<ul><li>...</li></ul>
<h2>Sub menu</h2>
<ul><li>...</li></ul>
<div id="content-primary">
<h1>Page title</h1>
<p>Page content.</p>
</div>
Quinta-feira, 10 de Novembro de 11
158. AND THE HEADINGS SHOULD
REPRESENT THE DOCUMENT TREE
H1
- H2
- H2
- H3
- H4
- H3
- H2
- H3
- H2
- H3
- H4
- H5
Quinta-feira, 10 de Novembro de 11
160. USE THE
LANG ATTRIBUTE
Quinta-feira, 10 de Novembro de 11
161. USE THE
LANG ATTRIBUTE
Screen readers need to know in which language
the document is written
Quinta-feira, 10 de Novembro de 11
162. USE THE
LANG ATTRIBUTE
Or else, they will use the default English speaker
for every text
And if the website is not written in English, well,
you can imagine how it would sound like...
Quinta-feira, 10 de Novembro de 11
163. HOW TO APPLY THE LANG ATTRIBUTE
<html lang="pt-PT">
The entire website is written in portuguese
Quinta-feira, 10 de Novembro de 11
164. HOW TO APPLY THE LANG ATTRIBUTE
<html lang="pt-PT">
The entire website is written in portuguese
<span lang="en">website</span>
This word or phrase is written in english
Quinta-feira, 10 de Novembro de 11
169. If the image fails to load, the text might
become unreadable
Quinta-feira, 10 de Novembro de 11
Hello :)
170. But because we’re smart, we added a
solid background color :)
Quinta-feira, 10 de Novembro de 11
Hello :)
171. SO, ALWAYS APPLY A SOLID
BACKGROUND COLOR AS A FALL BACK
#some_div {
background: #7A593A url(“wilde.jpg”) no-repeat;
}
Quinta-feira, 10 de Novembro de 11
174. WRITE USEFUL PAGE
TITLES
The page title is what your users will see first
when searching for your page/website (either on
a search engine, or on the browser’s tab bar and
favorites menu)
Quinta-feira, 10 de Novembro de 11
175. THERE ARE SOME SIMPLE RULES
Reverse the order of the title, i.e. put the
document title first and the site name last.
This makes the document title appear first in
bookmark lists, browser tabs, and search results.
<title>Page Title - Website Title</title>
Quinta-feira, 10 de Novembro de 11
176. THERE ARE SOME SIMPLE RULES
Reverse the order of the title, i.e. put the
document title first and the site name last.
This makes the document title appear first in
bookmark lists, browser tabs, and search results.
<title>Page Title - Website Title</title>
vs.
Quinta-feira, 10 de Novembro de 11
177. THERE ARE SOME SIMPLE RULES
Use a plain separator character that doesn’t cause
confusion
- or |
Keep fancy characters, repetitions and other
attempts at graphic design out of page titles
<title>Page Title - Website Title</title>
<title>Page Title | Website Title</title>
Quinta-feira, 10 de Novembro de 11
178. THERE ARE SOME SIMPLE RULES
Write titles for humans, not search engines
Don’t put keywords or breadcrumbs on the page
title
<title>Page Title - Subcategory - Category - Website
Title</title> = BAD
Quinta-feira, 10 de Novembro de 11
180. USE LABELS
IN FORMS
Quinta-feira, 10 de Novembro de 11
181. USE LABELS
IN FORMS
Use the label element to make your HTML forms
accessible
Quinta-feira, 10 de Novembro de 11
182. USE LABELS
IN FORMS
Use the label element to make your HTML forms
accessible
The label element can be associated with its form
control either implicitly or explicitly.
Quinta-feira, 10 de Novembro de 11
183. HOW TO USE LABELS IN FORMS
An implicit association is created by putting the
form control inside the label element
<label>Your Name: <input type=”text” /></label>
<label><input type=”checkbox” value=”1” /> Pick
Me</label>
Quinta-feira, 10 de Novembro de 11
184. HOW TO USE LABELS IN FORMS
An explicit association is created by giving the
label element a for attribute with the same value
as the form control’s id attribute.
<label for=”name”>Your Name</label>
<input type=”text” id=”name” />
<input type=”checkbox” value=”1” id=”option1” />
<label for=”option1”> Pick Me</label>
Quinta-feira, 10 de Novembro de 11
185. USING LABELS INCREASES THE
CLICKABLE AREA
Without labels
Male
Female
Quinta-feira, 10 de Novembro de 11
186. USING LABELS INCREASES THE
CLICKABLE AREA
Without labels
Male
Female
Clickable area
Quinta-feira, 10 de Novembro de 11
187. USING LABELS INCREASES THE
CLICKABLE AREA
With labels
Male
Female
Clickable area
Quinta-feira, 10 de Novembro de 11
189. GROUP FORM
ELEMENTS
Quinta-feira, 10 de Novembro de 11
190. GROUP FORM
ELEMENTS
Use the fieldset and legend elements to group
HTML form controls
Quinta-feira, 10 de Novembro de 11
191. Do not use the fieldset element if all
you want to do is create a graphical
border around some content on a page
Quinta-feira, 10 de Novembro de 11
192. Use fieldset and legend to group
logically related form controls, and
always use both elements together
Quinta-feira, 10 de Novembro de 11
193. GROUP FORM
ELEMENTS
Since some screen readers will announce the
legend text before each form control, it is
important to keep the legend text concise and
consider how the legend and label texts will work
when put together.
Quinta-feira, 10 de Novembro de 11
194. COMBINING LEGEND WITH LABELS
<fieldset>
<legend>Favourite colour</legend>
<input type="radio" name="fav-col" id="fav-col-1"
value="red"><label for="fav-col-1">Red</label>
<input type="radio" name="fav-col" id="fav-col-2"
value="green"><label for="fav-col-2">Green</label>
<input type="radio" name="fav-col" id="fav-col-3"
value="blue"><label for="fav-col-3">Blue</label>
</fieldset>
Quinta-feira, 10 de Novembro de 11
195. GROUP FORM
ELEMENTS
Use the optgroup element to group select
options
Quinta-feira, 10 de Novembro de 11
196. GROUPING OPTIONS
<label for="cars">Choose a car brand:</label>
<select name="cars" id="cars">
<option value="none" selected>None</option>
<optgroup label="Swedish">
<option value="saab">Saab</option>
<option value="volvo">Volvo</option>
</optgroup>
<optgroup label="French">
<option value="citroen">Citroën</option>
<option value="peugeot">Peugeot</option>
<option value="renault">Renault</option>
</optgroup>
</select>
Quinta-feira, 10 de Novembro de 11
197. GROUPING OPTIONS
<label for="cars">Choose a car brand:</label>
<select name="cars" id="cars">
<option value="none" selected>None</option>
<optgroup label="Swedish">
<option value="saab">Saab</option>
<option value="volvo">Volvo</option>
</optgroup>
<optgroup label="French">
<option value="citroen">Citroën</option>
<option value="peugeot">Peugeot</option>
<option value="renault">Renault</option>
</optgroup>
</select>
Quinta-feira, 10 de Novembro de 11
200. ENLARGE
YOUR
Quinta-feira, 10 de Novembro de 11
201. ENLARGE
YOUR
BUTTONS
Quinta-feira, 10 de Novembro de 11
202. ENLARGE YOUR
BUTTONS
Make your buttons and clickable elements
larger
Quinta-feira, 10 de Novembro de 11
203. ENLARGE YOUR
BUTTONS
Users with limited or low mobility may have
dificulty to perform precise movements.
We can make their life easier by enlarging the
clickable elements.
Quinta-feira, 10 de Novembro de 11