SlideShare uma empresa Scribd logo
1 de 210
Baixar para ler offline
HTML/CSS TIPS TO
   IMPROVE THE
   ACCESSIBILITY OF
   YOUR WEBSITES




                 Ivo Gomes
                 @ivogomes           www.ivogomes.com

Quinta-feira, 10 de Novembro de 11
Why should I care?



Quinta-feira, 10 de Novembro de 11
ACCESSIBILITY
   MYTHS




Quinta-feira, 10 de Novembro de 11
ACCESSIBILITY
   MYTHS
    Accessibility is just for blind people




Quinta-feira, 10 de Novembro de 11
ACCESSIBILITY
   MYTHS
    Accessibility is just for blind people
    Accessible websites are ugly and boring




Quinta-feira, 10 de Novembro de 11
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
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
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
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
OK, so what can I do?



Quinta-feira, 10 de Novembro de 11
1.
Quinta-feira, 10 de Novembro de 11
ENLARGE

Quinta-feira, 10 de Novembro de 11
ENLARGE
                                     YOUR
Quinta-feira, 10 de Novembro de 11
ENLARGE
                                     YOUR
            FONT
Quinta-feira, 10 de Novembro de 11
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
Pro tip: Try reading your website when
          seated 1 meter away from the screen




Quinta-feira, 10 de Novembro de 11
USE RELATIVE FONT-SIZES

        html {
          font-size: 62.5%;
        }

        body {
           font-size: 1.6em;         = 16px (sort of)
        }




Quinta-feira, 10 de Novembro de 11
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
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
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
2.
Quinta-feira, 10 de Novembro de 11
INCREASE YOUR
   LINE-HEIGHT




Quinta-feira, 10 de Novembro de 11
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
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
3.
Quinta-feira, 10 de Novembro de 11
PROVIDE
   SKIP-LINKS




Quinta-feira, 10 de Novembro de 11
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
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
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
HIDING SKIP-LINKS

        #skiplinks {
            display:none;            = BAD
        }

        #skiplinks {
            text-indent:-9999px; = BAD
        }




Quinta-feira, 10 de Novembro de 11
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
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
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
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
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
4.
Quinta-feira, 10 de Novembro de 11
TABLES
   DONE RIGHT




Quinta-feira, 10 de Novembro de 11
TABLES
   DONE RIGHT
    If you must use tables (remember kids, only for
    tabular data), please do it the right way




Quinta-feira, 10 de Novembro de 11
How?



Quinta-feira, 10 de Novembro de 11
Define a summary and a caption for
                       the table




Quinta-feira, 10 de Novembro de 11
TABLES DONE RIGHT

        <table summary=”Example Table”>
          <caption>Table 1: Company data</caption>
          <thead>
            <tr>
              <th scope=”col”>Company</th>
              <th scope=”col”>Employees</th>
              <th scope=”col”>Founded</th>
           </tr>
          </thead>




Quinta-feira, 10 de Novembro de 11
Use the th element to specify row and
           column headers in data tables




Quinta-feira, 10 de Novembro de 11
TABLES DONE RIGHT

        <table summary=”Example Table”>
          <caption>Table 1: Company data</caption>
          <thead>
            <tr>
              <th scope=”col”>Company</th>
              <th scope=”col”>Employees</th>
              <th scope=”col”>Founded</th>
           </tr>
          </thead>




Quinta-feira, 10 de Novembro de 11
TABLES DONE RIGHT

          <tbody>
            <tr>
              <th scope=”row”>ACME Inc</th>
              <td>1000</td>
              <td>1947</td>
            </tr>
            <tr>
              <th scope=”row”>XYZ Corp</th>
              <td>2000</td>
              <td>1973</td>
            </tr>
          </tbody>
        </table>

Quinta-feira, 10 de Novembro de 11
AND IT LOOKS LIKE THIS




                                     Source: Bring on the tables
                                        http://1.gf.gc.sl.pt
Quinta-feira, 10 de Novembro de 11
5.
Quinta-feira, 10 de Novembro de 11
DON’T REMOVE THE
   LINK OUTLINE




Quinta-feira, 10 de Novembro de 11
DON’T REMOVE THE
   LINK OUTLINE
    Users that rely on the keyboard for navigation
    need to know which link is focused




Quinta-feira, 10 de Novembro de 11
SO, DON’T EVER, EVER, REMOVE THE
   OUTLINE OF LINKS

        a{
                    outline:none;    = BAD
        }




Quinta-feira, 10 de Novembro de 11
But, but, the outline
                      looks sooooo ugly...


Quinta-feira, 10 de Novembro de 11
OK, YOU CAN REMOVE THE OUTLINE,
   BUT ONLY WHEN THE LINK IS ACTIVE

        a:active {
            outline:none;
        }




Quinta-feira, 10 de Novembro de 11
6.
Quinta-feira, 10 de Novembro de 11
DON’T CREATE
   EMPTY LINKS




Quinta-feira, 10 de Novembro de 11
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
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
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
7.
Quinta-feira, 10 de Novembro de 11
ALWAYS REVEAL THE
   LINK DESTINATION




Quinta-feira, 10 de Novembro de 11
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
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
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
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
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
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
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
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
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
8.
Quinta-feira, 10 de Novembro de 11
MORE
   LINKING TIPS




Quinta-feira, 10 de Novembro de 11
MORE
   LINKING TIPS
    When using big linkable blocks, make sure the
    most important info comes first




Quinta-feira, 10 de Novembro de 11
MORE
   LINKING TIPS
    When using big linkable blocks, make sure the
    most important info comes first




Quinta-feira, 10 de Novembro de 11
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
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
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
9.
Quinta-feira, 10 de Novembro de 11
NON-MOUSE
   NAVIGATION




Quinta-feira, 10 de Novembro de 11
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
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
Pro tip: Whenever you use :hover,
                            also use :focus




Quinta-feira, 10 de Novembro de 11
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
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
10.
Quinta-feira, 10 de Novembro de 11
PARAGRAPH
   SPACING




Quinta-feira, 10 de Novembro de 11
PARAGRAPH
   SPACING
    Make sure that there is enough spacing between
    paragraphs




Quinta-feira, 10 de Novembro de 11
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
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
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
And, as stupid as this tip might be, you
     should always use <p> for paragraphs




Quinta-feira, 10 de Novembro de 11
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
11.
Quinta-feira, 10 de Novembro de 11
CHECK THE
   COLOR CONTRAST




Quinta-feira, 10 de Novembro de 11
CHECK THE
   COLOR CONTRAST
    Check the contrast between the foreground and
    the background colors




Quinta-feira, 10 de Novembro de 11
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
CHECK THE
   COLOR CONTRAST




Quinta-feira, 10 de Novembro de 11
CHECK THE
   COLOR CONTRAST




Quinta-feira, 10 de Novembro de 11
12.
Quinta-feira, 10 de Novembro de 11
ABOUT THE
   ALT ATTRIBUTE




Quinta-feira, 10 de Novembro de 11
ABOUT THE
   ALT ATTRIBUTE
    The alt attribute provides a textual alternative to
    images




Quinta-feira, 10 de Novembro de 11
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
Waaa? No alt text?



Quinta-feira, 10 de Novembro de 11
I didn’t say that




Quinta-feira, 10 de Novembro de 11
You must ALWAYS add the alt attribute




Quinta-feira, 10 de Novembro de 11
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
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
13.
Quinta-feira, 10 de Novembro de 11
ABOUT THE
   TITLE ATTRIBUTE




Quinta-feira, 10 de Novembro de 11
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
So, stop duplicating the link text inside
                the title attribute




Quinta-feira, 10 de Novembro de 11
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
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
14.
Quinta-feira, 10 de Novembro de 11
USE HEADINGS
   FOR TITLES




Quinta-feira, 10 de Novembro de 11
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
USE HEADINGS
   FOR TITLES




Quinta-feira, 10 de Novembro de 11
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
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
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
* 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
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
15.
Quinta-feira, 10 de Novembro de 11
USE THE
   LANG ATTRIBUTE




Quinta-feira, 10 de Novembro de 11
USE THE
   LANG ATTRIBUTE
    Screen readers need to know in which language
    the document is written




Quinta-feira, 10 de Novembro de 11
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
HOW TO APPLY THE LANG ATTRIBUTE

        <html lang="pt-PT">

               The entire website is written in portuguese




Quinta-feira, 10 de Novembro de 11
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
16.
Quinta-feira, 10 de Novembro de 11
SPECIFY BACKGROUND
   COLORS




Quinta-feira, 10 de Novembro de 11
SPECIFY BACKGROUND
   COLORS
    Remember to specify a solid background color
    when using background images




Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
                                     Hello :)
If the image fails to load, the text might
          become unreadable




Quinta-feira, 10 de Novembro de 11
                                     Hello :)
But because we’re smart, we added a
          solid background color :)




Quinta-feira, 10 de Novembro de 11
                                     Hello :)
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
17.
Quinta-feira, 10 de Novembro de 11
WRITE USEFUL PAGE
   TITLES




Quinta-feira, 10 de Novembro de 11
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
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
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
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
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
18.
Quinta-feira, 10 de Novembro de 11
USE LABELS
   IN FORMS




Quinta-feira, 10 de Novembro de 11
USE LABELS
   IN FORMS
    Use the label element to make your HTML forms
    accessible




Quinta-feira, 10 de Novembro de 11
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
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
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
USING LABELS INCREASES THE
   CLICKABLE AREA
    Without labels

              Male
              Female




Quinta-feira, 10 de Novembro de 11
USING LABELS INCREASES THE
   CLICKABLE AREA
    Without labels

              Male
              Female


    Clickable area




Quinta-feira, 10 de Novembro de 11
USING LABELS INCREASES THE
   CLICKABLE AREA
    With labels

              Male
              Female


    Clickable area




Quinta-feira, 10 de Novembro de 11
19.
Quinta-feira, 10 de Novembro de 11
GROUP FORM
   ELEMENTS




Quinta-feira, 10 de Novembro de 11
GROUP FORM
   ELEMENTS
    Use the fieldset and legend elements to group
    HTML form controls




Quinta-feira, 10 de Novembro de 11
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
Use fieldset and legend to group
            logically related form controls, and
             always use both elements together




Quinta-feira, 10 de Novembro de 11
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
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
GROUP FORM
   ELEMENTS
    Use the optgroup element to group select
    options




Quinta-feira, 10 de Novembro de 11
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
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
20.
Quinta-feira, 10 de Novembro de 11
ENLARGE

Quinta-feira, 10 de Novembro de 11
ENLARGE
                                     YOUR
Quinta-feira, 10 de Novembro de 11
ENLARGE
    YOUR
   BUTTONS
Quinta-feira, 10 de Novembro de 11
ENLARGE YOUR
   BUTTONS
    Make your buttons and clickable elements
    larger




Quinta-feira, 10 de Novembro de 11
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
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
If you make your website easier to use for
              users with special needs




Quinta-feira, 10 de Novembro de 11
You’re also making it easier to use for
                         everyone else




Quinta-feira, 10 de Novembro de 11
Thank You



Quinta-feira, 10 de Novembro de 11
Thank You


                                 @ivogomes
                   http://www.ivogomes.com/talks/a11y.pdf
Quinta-feira, 10 de Novembro de 11

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Web Designing Presentation
Web Designing PresentationWeb Designing Presentation
Web Designing Presentation
 
Introdução PowerPoint
Introdução PowerPointIntrodução PowerPoint
Introdução PowerPoint
 
Css - Tema 1
Css - Tema 1Css - Tema 1
Css - Tema 1
 
Publication Design Chapter 05
Publication Design Chapter 05Publication Design Chapter 05
Publication Design Chapter 05
 
Graphic design by Muhammad Mujeeb Riaz
Graphic design by Muhammad Mujeeb RiazGraphic design by Muhammad Mujeeb Riaz
Graphic design by Muhammad Mujeeb Riaz
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
Introduo Informtica Mdulo 1 1193933851888380 4
Introduo Informtica Mdulo 1 1193933851888380 4Introduo Informtica Mdulo 1 1193933851888380 4
Introduo Informtica Mdulo 1 1193933851888380 4
 
CSS na Prática - Webdesign 2022
CSS na Prática - Webdesign 2022CSS na Prática - Webdesign 2022
CSS na Prática - Webdesign 2022
 
Hardware e software conceitos
Hardware e software conceitosHardware e software conceitos
Hardware e software conceitos
 
introduction of graphic design
introduction of graphic designintroduction of graphic design
introduction of graphic design
 
Netiqueta
NetiquetaNetiqueta
Netiqueta
 
Manual powerpoint 2007
Manual powerpoint 2007Manual powerpoint 2007
Manual powerpoint 2007
 
Creating and styling tables
Creating and styling tablesCreating and styling tables
Creating and styling tables
 
Guia rapido word 2016
Guia rapido word 2016Guia rapido word 2016
Guia rapido word 2016
 
Visual Design Elements
Visual Design ElementsVisual Design Elements
Visual Design Elements
 
Power point 2010
Power point 2010Power point 2010
Power point 2010
 
Understanding the Web Page Layout
Understanding the Web Page LayoutUnderstanding the Web Page Layout
Understanding the Web Page Layout
 
Simplificando o design digital
Simplificando o design digitalSimplificando o design digital
Simplificando o design digital
 
1.1 introduction to small basic
1.1   introduction to small basic1.1   introduction to small basic
1.1 introduction to small basic
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 

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
  • 11. 1. Quinta-feira, 10 de Novembro de 11
  • 12. ENLARGE 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
  • 21. 2. 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
  • 25. 3. 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
  • 28. Quinta-feira, 10 de Novembro de 11
  • 29. Quinta-feira, 10 de Novembro de 11
  • 30. Quinta-feira, 10 de Novembro de 11
  • 31. Quinta-feira, 10 de Novembro de 11
  • 32. Quinta-feira, 10 de Novembro de 11
  • 33. Quinta-feira, 10 de Novembro de 11
  • 34. Quinta-feira, 10 de Novembro de 11
  • 35. Quinta-feira, 10 de Novembro de 11
  • 36. Quinta-feira, 10 de Novembro de 11
  • 37. Quinta-feira, 10 de Novembro de 11
  • 38. Quinta-feira, 10 de Novembro de 11
  • 39. Quinta-feira, 10 de Novembro de 11
  • 40. Quinta-feira, 10 de Novembro de 11
  • 41. Quinta-feira, 10 de Novembro de 11
  • 42. Quinta-feira, 10 de Novembro de 11
  • 43. Quinta-feira, 10 de Novembro de 11
  • 44. Quinta-feira, 10 de Novembro de 11
  • 45. Quinta-feira, 10 de Novembro de 11
  • 46. Quinta-feira, 10 de Novembro de 11
  • 47. Quinta-feira, 10 de Novembro de 11
  • 48. Quinta-feira, 10 de Novembro de 11
  • 49. Quinta-feira, 10 de Novembro de 11
  • 50. Quinta-feira, 10 de Novembro de 11
  • 51. Quinta-feira, 10 de Novembro de 11
  • 52. Quinta-feira, 10 de Novembro de 11
  • 53. Quinta-feira, 10 de Novembro de 11
  • 54. Quinta-feira, 10 de Novembro de 11
  • 55. Quinta-feira, 10 de Novembro de 11
  • 56. Quinta-feira, 10 de Novembro de 11
  • 57. Quinta-feira, 10 de Novembro de 11
  • 58. Quinta-feira, 10 de Novembro de 11
  • 59. Quinta-feira, 10 de Novembro de 11
  • 60. Quinta-feira, 10 de Novembro de 11
  • 61. Quinta-feira, 10 de Novembro de 11
  • 62. Quinta-feira, 10 de Novembro de 11
  • 63. Quinta-feira, 10 de Novembro de 11
  • 64. Quinta-feira, 10 de Novembro de 11
  • 65. Quinta-feira, 10 de Novembro de 11
  • 66. Quinta-feira, 10 de Novembro de 11
  • 67. 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
  • 75. 4. Quinta-feira, 10 de Novembro de 11
  • 76. TABLES DONE RIGHT Quinta-feira, 10 de Novembro de 11
  • 77. TABLES DONE RIGHT If you must use tables (remember kids, only for tabular data), please do it the right way Quinta-feira, 10 de Novembro de 11
  • 78. How? Quinta-feira, 10 de Novembro de 11
  • 79. Define a summary and a caption for the table Quinta-feira, 10 de Novembro de 11
  • 80. TABLES DONE RIGHT <table summary=”Example Table”> <caption>Table 1: Company data</caption> <thead> <tr> <th scope=”col”>Company</th> <th scope=”col”>Employees</th> <th scope=”col”>Founded</th> </tr> </thead> Quinta-feira, 10 de Novembro de 11
  • 81. Use the th element to specify row and column headers in data tables Quinta-feira, 10 de Novembro de 11
  • 82. TABLES DONE RIGHT <table summary=”Example Table”> <caption>Table 1: Company data</caption> <thead> <tr> <th scope=”col”>Company</th> <th scope=”col”>Employees</th> <th scope=”col”>Founded</th> </tr> </thead> Quinta-feira, 10 de Novembro de 11
  • 83. TABLES DONE RIGHT <tbody> <tr> <th scope=”row”>ACME Inc</th> <td>1000</td> <td>1947</td> </tr> <tr> <th scope=”row”>XYZ Corp</th> <td>2000</td> <td>1973</td> </tr> </tbody> </table> Quinta-feira, 10 de Novembro de 11
  • 84. AND IT LOOKS LIKE THIS Source: Bring on the tables http://1.gf.gc.sl.pt Quinta-feira, 10 de Novembro de 11
  • 85. 5. Quinta-feira, 10 de Novembro de 11
  • 86. DON’T REMOVE THE LINK OUTLINE Quinta-feira, 10 de Novembro de 11
  • 87. DON’T REMOVE THE LINK OUTLINE Users that rely on the keyboard for navigation need to know which link is focused Quinta-feira, 10 de Novembro de 11
  • 88. SO, DON’T EVER, EVER, REMOVE THE OUTLINE OF LINKS a{ outline:none; = BAD } Quinta-feira, 10 de Novembro de 11
  • 89. But, but, the outline looks sooooo ugly... Quinta-feira, 10 de Novembro de 11
  • 90. OK, YOU CAN REMOVE THE OUTLINE, BUT ONLY WHEN THE LINK IS ACTIVE a:active { outline:none; } Quinta-feira, 10 de Novembro de 11
  • 91. 6. 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
  • 96. 7. 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
  • 107. 8. 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
  • 114. 9. 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
  • 121. 10. 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
  • 129. 11. 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
  • 135. 12. 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
  • 144. 13. 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
  • 150. 14. 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
  • 159. 15. 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
  • 165. 16. Quinta-feira, 10 de Novembro de 11
  • 166. SPECIFY BACKGROUND COLORS Quinta-feira, 10 de Novembro de 11
  • 167. SPECIFY BACKGROUND COLORS Remember to specify a solid background color when using background images Quinta-feira, 10 de Novembro de 11
  • 168. Quinta-feira, 10 de Novembro de 11 Hello :)
  • 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
  • 172. 17. Quinta-feira, 10 de Novembro de 11
  • 173. WRITE USEFUL PAGE TITLES 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
  • 179. 18. 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
  • 188. 19. 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
  • 198. 20. Quinta-feira, 10 de Novembro de 11
  • 199. ENLARGE 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
  • 204. Quinta-feira, 10 de Novembro de 11
  • 205. Quinta-feira, 10 de Novembro de 11
  • 206. Quinta-feira, 10 de Novembro de 11
  • 207. If you make your website easier to use for users with special needs Quinta-feira, 10 de Novembro de 11
  • 208. You’re also making it easier to use for everyone else Quinta-feira, 10 de Novembro de 11
  • 209. Thank You Quinta-feira, 10 de Novembro de 11
  • 210. Thank You @ivogomes http://www.ivogomes.com/talks/a11y.pdf Quinta-feira, 10 de Novembro de 11