12 Replies Latest reply on Jul 24, 2016 3:40 AM by pziecina

    Creating adaptive & responsive websites using Dreamweaver Creative Cloud 2015

    carolyn@10541

      I am creating a responsive website for a non-profit and I am looking for information on making the website easy to use for visually and hearing impaired. I would appreciate any suggestions.

      Thank you.

       

      [Moved from generic Cloud/Setup forum to specific Program forum... Mod]

        • 1. Re: Creating adaptive & responsive websites using Dreamweaver Creative Cloud 2015
          pziecina Adobe Community Professional

          carolyn@10541 wrote:

           

          I am looking for information on making the website easy to use for visually and hearing impaired.

          Initially I would suggest that you concentrate on the above, before moving on to how the site will work. That is because providing you do not use tables for layout, it should be possible to create an adaptive and fully responsive site using most layout techniques, accessibility is however a different matter.

           

          Personally I would say avoid any frameworks, such as Bootstrap or Foundation. That is because they do not use html5 semantics for structural mark-up. The reason that using html5 semantics is important, is because they have built-in meaning to all browsers and assistive software produced within the last 5 years.

           

          What that means for you is that no other mark-up such as ARIA should, or needs to be used with html5. So knowing what html5 to use, and where, is probably your best starting point. I would also avoid using video, audio and lightboxes in any such website unless you have experience in doing so for those using assistive technology.

           

          You could use video, audio and lightboxes, but if you do remember that any video and audio will require 'captioning', )that is providing a textual explanation, and/or subtitles) for lightboxes the situation is very different as it is essential that you tell the assistive technology when the lightbox image is 'triggered' and provide a full 'long description' on the page, and not as a link to another document providing the description, (in my opinion this should be done anyway).

           

          You should also be aware that the img tag alt attribute has special meanings for assistive technology -

          • An empty alt tag (alt="") means that the image is purely decorative, and the assistive technology should not display it, (if possible) or ignore it completely, (screen reader).
          • If an alt tag text is provided then a long description should also be provided. This now even has its own W3C html5 specification - https://www.w3.org/TR/html-longdesc/ .

           

          I could continue with recommendations, as this is a subject in which mark-up and semantics are extremely important. So what I would suggest is deciding what you want to do, what features you wish to provide, and then post specific questions.

           

          PZ

           

          Useful references -

          https://www.w3.org/TR/html-aria/

          https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

           

          Read this one very carefully -

          https://www.w3.org/TR/aria-in-html/

          • 2. Re: Creating adaptive & responsive websites using Dreamweaver Creative Cloud 2015
            BenPleysier Adobe Community Professional & MVP

            pziecina, I don't believe that it is you saying

            Personally I would say avoid any frameworks, such as Bootstrap or Foundation. That is because they do not use html5 semantics for structural mark-up.

            True, the examples that they give is devoid of said structure, but there is nothing wrong with changing/modifying that structure to suit.

             

            The real fact is that Bootstrap encourages the use of ARIA associated properties like in

            <a class="btn btn-default" href="#" role="button">Link</a>

            Another useful article Using ARIA in HTML | HTML5 Doctor

            • 3. Re: Creating adaptive & responsive websites using Dreamweaver Creative Cloud 2015
              pziecina Adobe Community Professional

              BenPleysier wrote:

               

              pziecina, I don't believe that it is you saying

              Personally I would say avoid any frameworks, such as Bootstrap or Foundation. That is because they do not use html5 semantics for structural mark-up.

              True, the examples that they give is devoid of said structure, but there is nothing wrong with changing/modifying that structure to suit.

               

              The real fact is that Bootstrap encourages the use of ARIA associated properties like in

              <a class="btn btn-default" href="#" role="button">Link</a>

              Another useful article Using ARIA in HTML | HTML5 Doctor

              Wrong Ben,

               

              If you look at rule 1 in the W3C document I linked to (https://www.w3.org/TR/aria-in-html/#first-rule-of-aria-use ) it says -

              Quote -

              "If you can use a native HTML element [HTML51] or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so."

               

              Note the "then do so".

               

              The rules are quite clear, also note the second rule which actually gives an example of using a 'button'.

               

              Yes, one could use bootstrap, but to do so is in my opinion, (and the w3C's) a retrograde step in accessibility, especially when html5 can, and should be used, to provide the maximum accessibility without any additional mark-up.

              • 4. Re: Creating adaptive & responsive websites using Dreamweaver Creative Cloud 2015
                Nancy OShea Adobe Community Professional & MVP

                Paula, I'm a little surprised at you.   Responsive frameworks and good web accessibility are NOT mutually exclusive.  You can have both very easily.    There is no rule that says you must use ARIA roles in Bootstrap.  Neither is there any compelling reason not to use Bootstrap or Foundation  with good HTML5 semantic markup.  I do it all the time. 

                 

                A quick example of semantic HTML5 tags with Bootstrap classes.

                 

                <!doctype html>

                <html>

                <head>

                <meta charset="utf-8">

                <title>Bootstrap Starter</title>

                <meta name="viewport" content="width=device-width, initial-scale=1">

                <meta http-equiv="X-UA-Compatible" content="IE=edge">

                <!--[if lt IE 9]>

                <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

                <![endif]-->

                 

                <!--Bootstrap-->

                <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

                 

                <style>

                .center-block {float:none}

                </style>

                </head>

                 

                <body class="container">

                <section class="row">

                <header>

                <div class="col-sm-6">

                <h1>Site Name</h1>

                </div>

                <div class="col-sm-6">

                <h2 class="text-right">Some Pithy Slogan</h1>

                </div>

                </header>

                </section>

                 

                <section class="row">

                <nav class="navbar navbar-default" role="navigation">

                <div class="navbar-header">

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                </button>

                <div class="collapse navbar-collapse" id="myNavbar">

                <ul class="nav navbar-nav">

                <li><a href="#">MENU 1</a></li>

                <li><a href="#">MENU 2</a></li>

                <li><a href="#">MENU 3</a> </li>

                <li><a href="#">MENU 4</a> </li>

                <li><a href="#">MENU 5</a></li>

                </ul>

                </div>

                </div>

                <!--end top nav-->

                </nav>

                </section>

                 

                <section class="row">

                <aside class="col-sm-2">

                <h3>Sidebar</h3>

                <p>Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.</p>

                </aside>

                <article class="col-sm-5">

                <h3>Heading 3</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

                 

                <h4>Heading 4</h4>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

                </article>

                 

                <article class="col-sm-5">

                <h3>Heading 3</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

                 

                <h4>Heading 4</h4>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

                </article>

                </section>

                <hr>

                <section class="row">

                <footer>

                <small>© 2016 all rights reserved.  Web Site Name</small>

                </footer>

                </section>

                 

                <!--latest jQuery-->

                <script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous"></script>

                 

                <!--Bootstrap-->

                <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

                </body>

                </html>

                 

                 

                 

                 

                Nancy O.

                • 5. Re: Creating adaptive & responsive websites using Dreamweaver Creative Cloud 2015
                  pziecina Adobe Community Professional

                  Nancy, I am very, very, surprised at you. Are you really telling me that you would recommend that someone learn all the bootstrap css rules in order to know which to apply, and that all that extra mark-up is really necessary?

                   

                  Also I would recommend that you read rule 1 in my reply to Ben, and then look at your nav element.

                   

                  Yes one can use bootstap and re-purpose everything, the question is, should one, and does it make any sense to do so, and I say no.

                  • 6. Re: Creating adaptive & responsive websites using Dreamweaver Creative Cloud 2015
                    Nancy OShea Adobe Community Professional & MVP

                    My bad, I neglected to remove the role from navigation.  

                     

                    Every Bootstrap document has the same basic class structure of

                         container,

                         row,

                         col. 

                     

                    You can apply those classes to ordinary div tags or semantic HTML5 tags.  It works either way. So basically, if you can remember  3 classes, you're golden.    How does that constitute extra markup?

                     

                    Nancy O.

                    • 7. Re: Creating adaptive & responsive websites using Dreamweaver Creative Cloud 2015
                      pziecina Adobe Community Professional

                      And what would you use for all the other sectioning and grouping elements ?

                       

                      https://www.w3.org/TR/2016/WD-html51-20160310/

                       

                      There is no point in using what is the massive css file that bootstrap css is, when a 5 - 10 kb custom file can be used. Even as a cdn file bootstrap is 29kb, and if they don't they are looking at a 120kb file. Bootstrap also requires a cdn javascript delivered file of 29kb, or none cdn 55kb, and lets not forget the jQuery file at 31kb, which is not optional.

                      • 8. Re: Creating adaptive & responsive websites using Dreamweaver Creative Cloud 2015
                        Nancy OShea Adobe Community Professional & MVP

                        And what would you use for all the other sectioning and grouping elements ?

                         

                        I thought I made that clear in my code example.  (n = number of grid boxes)

                         

                        <body class="container">

                        <section class="row">

                        <article class="col-sm-n">

                             <h3>heading 3</h3>

                             <p>paragraph</p>

                        </article>

                        </section>

                         

                        <section class="row">

                        <footer>

                             footer goes here

                        </footer>

                        </section>

                        </body>

                        </html>

                         

                        Hopefully people have the good sense to use minified scripts from CDNs.  It makes the web a bit faster for everyone if we do.   I'm using BS & JQ along with several other scripts including web fonts.  The total CSS and script load represents just 10% of my page . While images consume 80%.

                         

                         

                        Nancy O.

                        • 9. Re: Creating adaptive & responsive websites using Dreamweaver Creative Cloud 2015
                          osgood_ Level 8

                          Nancy O. wrote:

                           

                          And what would you use for all the other sectioning and grouping elements ?

                           

                          I thought I made that clear in my code example. (n = number of grid boxes)

                           

                          <body class="container">

                          <section class="row">

                          <article class="col-sm-n">

                          <h3>heading 3</h3>

                          <p>paragraph</p>

                          </article>

                          </section>

                           

                          <section class="row">

                          <footer>

                          footer goes here

                          </footer>

                          </section>

                          </body>

                          </html>

                           

                          Hopefully people have the good sense to use minified scripts from CDNs. It makes the web a bit faster for everyone if we do. I'm using BS & JQ along with several other scripts including web fonts. The total CSS and script load represents just 10% of my page . While images consume 80%.

                           

                           

                          Nancy O.

                           

                          Thats not the right use of the <section> tag is it?

                           

                          Surely when used in conjunction with other html5 tags it should be:

                           

                          <article>

                           

                          <section>

                          <h2>Header</h2>

                          Some crap here.

                          </section>

                           

                          <section>

                          <h2>Header</h2>

                          Some other crap here.

                          </section>

                           

                          </article>

                           

                          and <footer>, <aside> etc doesn't need to be surrounded in <section> tags.

                           

                          This is ok though, right, when no other html5 element is involved:

                           

                          <section class="blah">

                          <h2>Some crap</h2>

                          <p>This is some crap about something</p>

                          </section>

                           

                          Maybe..................

                          • 10. Re: Creating adaptive & responsive websites using Dreamweaver Creative Cloud 2015
                            pziecina Adobe Community Professional

                            I think we are both disagreeing about different things. What I am saying is that one could use bootstrap, but it is not a good idea.

                             

                            The bootstrap files would be used purely for positioning, they also require jQuery for them to work correctly, and one must rewrite the html code provided in the templates to use html5. Those using assistive technologies are the one group that are more likely to turn off javascript than any other. The bootstrap css is completely inappropriate to use for styling, unless one learns exactly which bootstrap css rule to apply for the style required, a task that I would certainly recommend against.

                             

                            Even forgetting about the accessibility problems when using jQuery/js to provide functionality, it is certainly not recommended to rely on js for any item to work correctly.

                             

                            Even paypal has provided a plug-in to try and correct the accessibility problems with bootstrap -

                            https://paypal.github.io/bootstrap-accessibility-plugin/

                            The problem with this, is that relies on javascript, and the developer would have to go through the entire code to ensure it did not modify the html incorrectly, then modify the javascript in the plug-in, to correct any problems.

                            • 11. Re: Creating adaptive & responsive websites using Dreamweaver Creative Cloud 2015
                              BenPleysier Adobe Community Professional & MVP

                              pziecina

                              This discussion seems to have rolled off the tracks. The OP wants to know about ARIA, which is a very important subject considering the number of people using the internet. As Nancy OShea has stated

                              There is no rule that says you must use ARIA roles in Bootstrap.  Neither is there any compelling reason not to use Bootstrap or Foundation  with good HTML5 semantic markup.  I do it all the time.

                              I think this is the crux of the matter after you suggested that you would 'avoid using a framework because they do not use semantic markup'.

                               

                              Nancy OSheahas shown that that statement was not true.

                               

                              Off Subject

                              A browser interprets HTML, CSS and JS. There is nothing wrong with using any of the these scripts in a document. Yes, JS can be turned off, but so can CSS. This is not a reason not to rely on them.

                              • 12. Re: Creating adaptive & responsive websites using Dreamweaver Creative Cloud 2015
                                pziecina Adobe Community Professional

                                I think as you suggest Ben, that we should simply agree to disagree, and concentrate on helping the OP.

                                 

                                Providing the OP follows the usage rules for accessibility, then how they develop the site is for them to decide, and we should help how we can.