Accessibility guidelines for HTML, CSS and JavaScript



Accessibility guidelines for HTML, CSS and JavaScriptDateVersionAuthorStatus / commentsNov 3rd, 20183.0AtalanJan 21, 20193.1AtalanMinor changes in text of the 6.2 guideline.In partnership with: Air Liquide – Atos – BNP Paribas – Capgemini – EDF – Generali – SFR – SNCF – Société Générale – SPIEObservers: AbilityNet (UK) – Agence Entreprises & Handicap – AnySurfer (Belgium) – Association des Paralysés de France (APF) – Association Valentin Haüy (AVH) – CIGREF – Design For All Foundation (Spain) – ESSEC – Handirect – Hanploi – Sciences Po – Télécom ParisTechAcknowledgmentsSpecial thanks to our AcceDe Web partners for their input and commitment:Thanks to their support, participation in the working groups, proofreading of documents, and testing of manuals, the partner companies have provided valuable input to the Accede Web project. This has made it possible to create manuals that successfully meet the needs of the different stakeholders of a web project. These companies are also contributing to making the web more accessible by authorizing the free distribution of this content. We would also like to thank the following observers of the AcceDe Web project whose actions raise awareness of the AcceDe Web manuals and aid their distribution: AbilityNet (UK), Agence Entreprises & Handicap, AnySurfer (Belgium), Association des Paralysés de France, Association Valentin Haüys, CIGREF, Design for All foundation (Spain), ESSEC, Handirect, Hanploi, Sciences Po and Télécom ParisTech.We thank all the members of the review committees for the quality and relevance of their comments: English version: Robin Christopherson (UK - AbilityNet), Ramon Corominas (Spain - Technosite), Deborah Edwards-Onoro (USA - Lireo Design), Thomas Frandzen (Denmark - Agency for Digitisation, Ministry of Finance), Char James-Tanny, (USA - a11yBos), Matt May (USA – Adobe), Sophie Schuermans (Belgium – Anysurfer), Jared Smith (USA - WebAIM), Christophe Strobbe (Germany), Gijs Veyfeyken (Belgium – Anysurfer)French version: Benjamin Ach (accessibility expert), Vincent Aniort (APF), Jean-Baptiste Audras (University of Grenoble), Claire Bizingre (accessibility consultant), Victor Brito (accessibility consultant), Anna Castilla (Provaltis), ?ve Demazière (Sciences Po), Nicolas Fortin (French Ministry of Media and Culture), Marc-?tienne Vargenau (Alcatel-Lucent) and ?ric Vidal (Fédération des aveugles de France), as well as all the teams of our partner companies.Finally, we would like to thank Laurent Bracquart and Johan Ramon, Christophe Pineau and Marion Santelli of Atalan for their dedication and commitment to this initiative.Sébastien Delorme, Sylvie Goldfain, AtalanTable of contents TOC \o "2-2" \h \z \t "Titre 1;1" Introduction PAGEREF _Toc529784515 \h 6Context and objectives PAGEREF _Toc529784516 \h 6Who should read this document, and how to use it? PAGEREF _Toc529784517 \h 6Contact PAGEREF _Toc529784518 \h 6License agreement PAGEREF _Toc529784519 \h 71General structure PAGEREF _Toc529784520 \h 81.1Add structure to the header area using <header role="banner"> PAGEREF _Toc529784521 \h 81.2Mark up the search field with role="search" PAGEREF _Toc529784522 \h 81.3Structure the main content area with <main role="main"> PAGEREF _Toc529784523 \h 81.4Structure information about the website and its author with <footer role="contentinfo"> PAGEREF _Toc529784524 \h 91.5Structure primary and secondary navigation menus with <nav role="navigation"> PAGEREF _Toc529784525 \h 91.6Structure navigation menus with lists PAGEREF _Toc529784526 \h 101.7Identify the current position in navigation systems with aria-current PAGEREF _Toc529784527 \h 101.8Create a logical and thorough hierarchy for headings, using <h1> to <h6> tags PAGEREF _Toc529784528 \h 121.9Write the HTML code in a logical reading order PAGEREF _Toc529784529 \h 151.10Ensure that the HTML flow is consistent from one page to another PAGEREF _Toc529784530 \h 162Page Title PAGEREF _Toc529784531 \h 172.1Provide a descriptive <title> element on each page PAGEREF _Toc529784532 \h 173Language PAGEREF _Toc529784533 \h 183.1Provide the primary language of the page with the lang attribute on the <html> tag PAGEREF _Toc529784534 \h 183.2Use the lang attribute to indicate a change of language PAGEREF _Toc529784535 \h 183.3Make sure that hidden content is translated PAGEREF _Toc529784536 \h 194HTML Grammar and Semantics PAGEREF _Toc529784537 \h 204.1Write HTML code that follows the formal grammar rules of the DOCTYPE used PAGEREF _Toc529784538 \h 204.2Use HTML elements for their right semantic purpose PAGEREF _Toc529784539 \h 205Links and Buttons PAGEREF _Toc529784540 \h 215.1Distinguish buttons from links PAGEREF _Toc529784541 \h 215.2Make link and button labels explicit with aria-label or the title attribute PAGEREF _Toc529784542 \h 215.3Don't use the title or aria-label attributes on links and buttons that are already explicit PAGEREF _Toc529784543 \h 225.4Add the size and format of files to "Download" links. PAGEREF _Toc529784544 \h 235.5Give advance warning before opening a new window PAGEREF _Toc529784545 \h 245.6Combine successive elements being links (or buttons) with the same destination as one single link (or one button) PAGEREF _Toc529784546 \h 246Images and Icons PAGEREF _Toc529784547 \h 276.1Icon Fonts PAGEREF _Toc529784548 \h 276.2SVG (Scalable Vector Graphics) PAGEREF _Toc529784549 \h 296.3<img /> and <input type="image" /> tags PAGEREF _Toc529784550 \h 316.4Tag images that have captions with <figure role="group"> and <figcaption> PAGEREF _Toc529784551 \h 336.5Don't use CSS to display images that carry information PAGEREF _Toc529784552 \h 357Forms PAGEREF _Toc529784553 \h 367.1Use the <label> tag with the for and id attributes to label form fields with a visible name PAGEREF _Toc529784554 \h 367.2Use the aria-label or title attribute to label form fields that don't have a visible label PAGEREF _Toc529784555 \h 367.3Add help text directly into the <label> tag PAGEREF _Toc529784556 \h 377.4Add required or aria-required="true" to mandatory fields PAGEREF _Toc529784557 \h 387.5Add error messages and correction suggestions directly into the <label> tag PAGEREF _Toc529784558 \h 397.6Update the <title> element when the page reloads to display an error or confirmation message PAGEREF _Toc529784559 \h 407.7Group related fields with <fieldset> and <legend> PAGEREF _Toc529784560 \h 417.8Organize the items of dropdown lists logically PAGEREF _Toc529784561 \h 427.9In forms with multiple steps, identify the current step using aria-current="step" PAGEREF _Toc529784562 \h 438Lists PAGEREF _Toc529784563 \h 448.1Tag unordered lists with <ul> and <li> PAGEREF _Toc529784564 \h 448.2Tag ordered lists with <ol> and <li> PAGEREF _Toc529784565 \h 448.3Mark up definition lists with <dl>, <dt> and <dd> PAGEREF _Toc529784566 \h 449Tables PAGEREF _Toc529784567 \h 469.1Provide a <caption> for every data table PAGEREF _Toc529784568 \h 469.2Mark up the row and column header cells with <th> PAGEREF _Toc529784569 \h 469.3In simple tables use the scope attribute to associate data cells with their corresponding headers. PAGEREF _Toc529784570 \h 479.4In complex tables, use the headers and id attributes to associate header cells with their corresponding data cells PAGEREF _Toc529784571 \h 489.5Add role="presentation" to each layout <table> PAGEREF _Toc529784572 \h 499.6Don't use data table markup for a layout table PAGEREF _Toc529784573 \h 499.7Make sure layout tables follow the right reading order PAGEREF _Toc529784574 \h 4910Using CSS PAGEREF _Toc529784575 \h 5210.1Use CSS to layout text PAGEREF _Toc529784576 \h 5210.2Ensure that the content can be read when images are turned off PAGEREF _Toc529784577 \h 5210.3Ensure that the content is understandable with CSS turned off PAGEREF _Toc529784578 \h 5311Zoom and text size PAGEREF _Toc529784579 \h 5611.1Use only relative font sizes (em, %, small, etc.) PAGEREF _Toc529784580 \h 5611.2Ensure content visibility even when its size is doubled PAGEREF _Toc529784581 \h 5611.3Do not disable the zoom with the user-scalable property PAGEREF _Toc529784582 \h 5612Keyboard Navigation PAGEREF _Toc529784583 \h 5812.1Ensure that the tab order follows the logical reading order PAGEREF _Toc529784584 \h 5812.2Provide “skip links” PAGEREF _Toc529784585 \h 5812.3Ensure that keyboard focus is visible PAGEREF _Toc529784586 \h 5913Scripts PAGEREF _Toc529784587 \h 6113.1Ensure that scripts can be activated with both the mouse and the keyboard PAGEREF _Toc529784588 \h 6114Additional Guidelines (rarely applicable) PAGEREF _Toc529784589 \h 6214.1To comply with level A (WCAG 2.0) PAGEREF _Toc529784590 \h 6214.2To comply with level AA (WCAG 2.0) PAGEREF _Toc529784591 \h 6214.3To comply with level AAA (WCAG 2.0) PAGEREF _Toc529784592 \h 62IntroductionContext and objectivesThis document provides guidelines for making HTML, CSS and JavaScript more accessible and ensuring WCAG 2.0 compliance.This manual is part of a set of four complementary manuals that can be downloaded from the AcceDe Web website:Accessibility guidelines for graphic design.Accessibility guidelines for HTML, CSS and Javascript (this manual).Accessibility guidelines for the main rich interface components.Accessibility guidelines for editors (template).Who should read this document, and how to use it?This document should be provided to stakeholders and/or contractors implementing the technical specifications, and HTML / CSS and JavaScript integration. It complements project specifications. The recommendations may be supplemented or removed depending on the context of use, such work can be carried out by the project owner.These recommendations can be used when creating HTML/CSS. Some of them can be used for dynamic content, for example, when templates are created for a content management system (CMS). Note The online version of these guidelines comes with many examples, links to complementary resources, etc. It is available at: . ContactPlease send any comments about this document to Atalan, the coordinator of the AcceDe Web project, at the following email address: accede@atalan.ca.License agreementThis document is subject to the terms of the Creative Commons BY 3.0 license.You are free to: copy, distribute and communicate the work to the public,change this work,under the following conditions: Mention of the authorship if the document is modified:You must include the Atalan and AcceDe Web logos and references, indicate that the document has been modified, and add a link to the original work at must not in any circumstances cite the name of the original author in a way that suggests that he or she endorses you or supports your use of the work without its express agreement.You must not in any circumstances cite the name of partner companies (Air Liquide, Atos, BNP Paribas, Capgemini, EDF, Generali, SFR, SNCF, Société Générale and SPIE), or the organizations which have supported this initiative (AbilityNet, Agence Entreprises & Handicap, AnySurfer, Association des Paralysés de France (APF), CIGREF, Design For All Foundation, ESSEC, Handirect, Hanploi, Sciences Po and Télécom ParisTech) without their express agreement.The Atalan and AcceDe Web logos and trademarks are registered and are the exclusive property of Atalan. The logos and trademarks of partner companies are the exclusive property of Air Liquide, Atos, BNP Paribas, Capgemini, EDF, Generali, SFR, SNCF, Société Générale and SPIE.General structureAdd structure to the header area using<header role="banner">Mark up the main header section (i.e. logo, search field etc.) with <header role="banner">. WarningWhile the <header> tag may be used several times in a web page, role="banner" should only be used once per web page. NoteIt is perfectly acceptable to nest several ARIA roles: <div role="search"> into <header role="banner">, for example.<header role="banner"> <img src=" my-site-logo.png" alt="My site (logo" /> <div role="search" … > […] </div> […] </header>Mark up the search field with role="search"The website search field should be identified with role="search". <form role="search" … > <input type="text" title="Keyword Search" /> <input type="submit" value="Search" /> </form> WarningA page can only contain one role="search".Structure the main content area with <main role="main">The main content area of the page should be marked up with <main role="main">. WarningA page should only contain one <main> element and only one role="main" attribute.<header role="banner"> […] </header> <nav role="navigation"> […] </nav> <main role="main"> […] </main> <footer role="contentinfo"> […] </footer>Structure information about the website and its author with <footer role="contentinfo">Information about the website and its author, such as the copyright and the “Legal mentions” and “Credits” links must be structured with <footer role="contentinfo">. WarningA page can only contain one role="contentinfo".<header role="banner">[…]</header> <nav role="navigation">[…]</nav> <main role="main">[…]</main> <footer role="contentinfo"> <ul> <li><a href="…">Sitemap</a></li> <li><a href="…">Credits</a></li> <li><a href="…">Terms and Conditions</a></li> </ul> <p>? Company name</p> </footer>Structure primary and secondary navigation menus with <nav role="navigation">Primary and secondary navigation menus should be marked up with <nav role="navigation">. NoteThe <nav> element is reserved for website’s internal links.In other words, it should not be used to mark up a list of external links, such as a list of social media links. TipGood practice is to add an aria-label attribute to the <nav> tag to specify the type of navigation section.<header role="banner">[…]</header> <nav role="navigation" aria-label="Primary menu">[…]</nav> <nav role="navigation" aria-label="Secondary menu">[…]</nav> <main role="main"> <nav aria-label="Breadcrumb">[…]</nav> […] </main> <footer role="contentinfo">[…]</footer>Structure navigation menus with listsUse unordered list elements <ul> and <li> to mark up navigation menus.For primary menus, be sure to nest the links appropriately:<nav role="navigation" aria-label="Main menu"> <ul> <li><a href="…">First menu item</a></li> <li> <a href="…">Second menu item</a> <ul> <li><a href="…">First sub-menu item</a></li> <li><a href="…">Second sub-menu item</a></li> </ul> </li> <li><a href="…">Third menu item</a></li> </ul></nav>Identify the current position in navigation systems with aria-currentIn all navigation systems (menus, breadcrumb trails, pagination systems, etc.), the current position must be identified by aria-current="page".However, any parent sections and sub-sections must only be identified in menus (and not in breadcrumb trails) by aria-current="true".Example in a menuIn the example below of code for a navigation menu, the parent section “Upcoming events” is identified by aria-current="true" included in the <a> element and the current page “Education” is identified by aria-current="page" included in the <li> element.<nav role="navigation" aria-label="Main menu"> <ul> <li><a href="…">Home</a></li> <li><a href="…" aria-current="true">Upcoming events</a> <ul> <li><a href="…">Culture</a></li> <li aria-current="page">Education</li> <li><a href="…">Sports</a></li> </ul> </li> <li><a href="…">News</a></li> <li><a href="…">Contact</a></li> </ul></nav>Example in a pagination systemIn the code example below for a pagination system, the current page “2” is identified by aria-current="page" included in the <li> element.<nav aria-label="Pagination"> <ul> […] <li><a href="…" aria-label="Page 1">1</a></li> <li aria-current="page">2</li> <li><a href="…" aria-label="Page 3">3</a></li> […] </ul></nav>Example in a breadcrumb trailIn the example below of code for a breadcrumb trail, the current page “Editorial manual” is identified by aria-current="page" included in the <li> element.<nav aria-labelledby="intro-pagination"> <p id="intro-pagination">You are here:</p> <ul> <li><a href="…">Home</a></li> <li><a href="…">AcceDe Web guidelines</a></li> <li aria-current="page">Editorial manual</li> </ul></nav>Create a logical and thorough hierarchy for headings, using <h1> to <h6> tagsOn each page, headings should be tagged from <h1> to <h6>. The structure of the headings should be both logical and thorough.In other words:There should not be any "jumps" or inconsistencies in the heading structure (i.e. from <h1> to <h3> without <h2> in between).All elements that function as headings should be marked up using heading tags. Notes Several <h1> elements can be used on a page if there are primary headings. Good accessibility practice is to avoid using hidden headings. TipTo create a logical and understandable heading hierarchy, imagine the headings of the page as a "Table of Contents". Is it logical? thorough? NoteThe ARIA heading role with the aria-level attribute (with a value of 1 to 6) will override the semantics of any native <html> tag.For example:<p role="heading" aria-level="1">Heading Level 1</p> is semantically equivalent to <h1>Titre de niveau 1</h1>.<div role="heading" aria-level="3">Heading Level 3</div> is semantically equivalent to <h3>Titre de niveau 3</h3>.However, this technique is not optimal for accessibility, it should only be used as a last resort. ExamplesThree examples of heading structures for this page are provided below. The first two are correct, but the last one is not.Example 1 (correct)<h1><a href="/"><img src="GreenPeace.png" alt="GreenPeace (go back to homepage)" /></a></h1>[…]<h2>In the spotlight</h2>[…]<h3>The Canadian government should not be writing blank cheques for Texas oil-giant</h3>[…]<h2>The latest updates</h2>[…]<h3>Plastic pollution reaches the Antarctic</h3>[…]<h3>Captain Crudeau’s Colossal Mistake</h3>[…]<h3>The Canadian government should not be writing blank cheques for Texas oil-giant</h3>[…]<h2>Multimedia</h2>[…]<h2>Join the movement</h2>[…]<h2>Become volunteer</h2>[…]In this example of HTML code, the heading structure is logical and thorough.Example 2 (correct)<a href="/"><img src="GreenPeace.png" alt="GreenPeace (go back to homepage)" /></a>[…]<h1>In the spotlight</h1>[…]<h2>The Canadian government should not be writing blank cheques for Texas oil-giant</h2>[…]<h1>The latest updates</h1>[…]<h2>Plastic pollution reaches the Antarctic</h2>[…]<h2>Captain Crudeau’s Colossal Mistake</h2>[…]<h2>The Canadian government should not be writing blank cheques for Texas oil-giant</h2>[…]<h1>Multimedia</h1>[…]<h1>Join the movement</h1>[…]<h1>Become volunteer</h1>[…]In this example of HTML code, the heading structure is also logical and thorough.Note that other heading structures are possible.Example 3 (incorrect)<a href="/"><img src="GreenPeace.png" alt="GreenPeace (go back to homepage)" /></a>[…]<h1>In the spotlight</h1>[…]<h2>The Canadian government should not be writing blank cheques for Texas oil-giant</h2>[…]<h1>The latest updates</h1>[…]<h4>Plastic pollution reaches the Antarctic</h4>[…]<h4>Captain Crudeau’s Colossal Mistake</h4>[…]<h4>The Canadian government should not be writing blank cheques for Texas oil-giant</h4>[…]<h1>Multimedia</h1>[…]<p>Join the movement</p>[…]<p>Become volunteer</p>[…]In this example of HTML code, the heading structure is incorrect because it includes “jumps” and inconsistencies (abrupt transition from <h1> to <h4>).Also, “Join the movement” and “Become a volunteer” are not tagged as a heading.Write the HTML code in a logical reading orderThe flow of the HTML code should follow the reading order of the page.In other words, when one piece of content follows another in the visual flow, it should also immediately follow that element in the HTML code. Tip To test this recommendation, turn off the CSS and check that the resulting page order matches the page when CSS is active. WarningIf some content is hidden by default, make sure that it is properly positioned in the HTML flow when styles are disabled.Ensure that the HTML flow is consistent from one page to another The order of the main blocks of content in the HTML should remain consistent from one page to another. For example, if the secondary menu is placed after the main content, it is important to keep this order on all pages of the website.Page TitleProvide a descriptive <title> element on each pageOn each page, the <title> element must include a descriptive title. It must, at least, provide both the name of the page and the name of the website. Tip The name of the current page should come first in the <title> element before other information. For example, <title>[Current page name] | [Website name]</title>. Good practice is to ensure that the content in the <title> element is consistent throughout the entire website. NoteIn certain circumstances, the title content is modified when the page is reloaded after a user action. Some examples include: When filters are used to mask content with keywordsWhen pagination is used to separate sections of an article.When a search term is entered into a search field.When updates are on the server side, the title of the affected page should be modified. For example:<title>Search results for [Search term] (page 3/7) | [Site name]</title>LanguageProvide the primary language of the page with the lang attribute on the <html> tagIn order to ensure a proper presentation of text content to the end user, the primary language should be declared on each page.Use the lang attribute on the <html> tag.For example, for an English page use:<html lang="en"> Tip Populate the lang attribute with the relevant language code (or in some cases three letters).Some common codes are:en for English.fr for French.es for Spanish.de for German.it for Italian.Use the lang attribute to indicate a change of languageIf some of the content is in a language other than the primary language of the page, it should be specified with the lang attribute.For example, on an English page:<a href="…" lang="fr" hreflang="fr">Version fran?aise</a> Tip If one element does not enclose all of the foreign language content, encapsulate it with a <span> or <div> tag and give it the appropriate lang attribute. NoteIt is not necessary to announce a change of language for: Proper namesForeign words that have been incorporated into the dictionary of the primary language.Foreign words that are pronounced and understood with the accent of the principal language (i.e. “RSVP”, if the primary language is English).Make sure that hidden content is translatedFor websites in multiple languages or when using scripts developed in a foreign language, make sure to translate into the website’s current language all the hidden content in:alt attributes of images.aria-label attributes.title attributes.<title> and <desc> tags of <svg>.Tags for content not visible on screen.(via a CSS class “.sr-only”, for example) Note This recommendation applies more generally to any content that can be read/displayed using assistive technologies.HTML Grammar and SemanticsWrite HTML code that follows the formal grammar rules of the DOCTYPE usedUse a valid DOCTYPE for each page and make sure the HTML code complies with the formal grammar rules of that DOCTYPE (the choice of DOCTYPE is open). Note This DOCTYPE must be placed before the <html> tag.The following aspects of formal grammar are particularly important:Elements are nested according to their specifications.Elements have complete start and end tagsThere are no duplicate attributes on an element.Each id attribute has a unique value on the page. WarningObsolete HTML elements and attributes intended for formatting purposes should not be used.Use HTML elements for their right semantic purposeHTML elements should be used for the righ semantic purpose and not solely for the way they make content appear visually.TagsUse it toDon’t use it to<a>Mark up a hypertext linkCreate a button<hr />Create a semantic division between distinct groups of content in a text box.Create a visual separator line<fieldset>Group form elements which are related to one anotherCreate a visual border<q>Mark up a short quotePlace quotation marks around non-quoted textLinks and ButtonsDistinguish buttons from links To help the end user understand rich interfaces, use buttons for actions, and limit the use of links to navigation:ButtonsButton elements <button />, <input /> allow users to carry out an action, such as submitting a form, switching to the next image in a carousel, closing a modal dialogue box, etc.LinksLinks <a> are for user navigation. They are used to move to another page or another part of the current page, by means of anchors.Make link and button labels explicit with aria-label or the title attribute A link or button is not explicit when the label alone does not sufficiently describe its destination or function.Link labels, such as "Read More", "Learn More", "More Information", "Click Here" are ambiguous. So is the "Ok" button.In these cases use the aria-label attribute or the title attribute to add detail. Consider the following examples of a link pointing to a page of the AccesDe Web project.The aria-label attributeA link or button can be made more explicit using the aria-label:Add the aria-label attribute to the <a>, <button> or <input /> element.Populate this attribute with first the exact text of the link or button itself followed by the text that makes the link or button more explicit. <a href="…" aria-label="Read more about the AcceDe Web project"> Read more</a> Tip Good practice is to give the exact text of the link or button first followed by the text to make the link or button more explicit.The title attributeA link or button can be made more explicit using the title attribute:Add the title attribute to the <a>, <button> or <input /> element.Populate this attribute with first the exact text of the link or button itself followed by the text that makes the link or button more explicit. <a href="…" title="Read more about the AcceDe Web project"> Read more</a> Tip Good practice is to give the exact text of the link or button first followed by the text to make the link or button more explicit. NoteOne of these two techniques must also be used to distinguish links or buttons that seem to provide explicit information but lead to different pages or actions.If there are two “Search” buttons on the same page, for example, they need to be distinguished:<input type="submit" value="Search" aria-label="Search a news" /> […] <input type="submit" value="Search" aria-label="Search a person in the directory" />Don't use the title or aria-label attributes on links and buttons that are already explicitA link or button is explicit when the label alone sufficiently describes its destination or function.For example:The link "AcceDe Web Project" is explicit by nature.So is a button labelled "Confirm Order".The title and aria-label attributes (which make ambiguous links accessible) should not be used if the link text or label are already explicit.14254424765000Here are some examples of incorrect use of the aria-label on an <input /> tag:<input type="submit" value="Confirm Order" aria-label="" />14287514000400<input type="submit" value="Confirm Order" aria-label="Confirm my Order" />14254427368500And here are some examples of incorrect use of the title attribute on an <a> tag:<a href="…" title="">AcceDe Web project</a>14287513873400<a href="…" title="AcceDe Web project">AcceDe Web project</a>14224013936900<a href="…" title="AcceDe Web">AcceDe Web project</a>Add the size and format of files to "Download" links.If a link is being used to download a file, add the following information to the link:Document name.Document format.Document size.<a href="Toronto bus service.pdf">Download the map of Toronto bus routes (PDF - 2 MB)</a> NoteIf an icon is used to indicate the file format, refer to Section "6. Images and Icons", to implement it in an accessible way. TipIn situations where the size of the downloadable file can not be known in advance (i.e. generation on the fly), good accessibility practice is to give an approximate or maximum size.For example:<a href="invoice.pdf"> Download your March invoice (PDF – Approx. 1.5MB)</a>Give advance warning before opening a new window When a link opens a new window, warn the user in advance by specifying it (with the mention for example "new tab").For links on text, use the aria-label attribute:<a href="gtc.html" target="_blank" aria-label="General Terms and Conditions (new tab)"> General Terms and Conditions </a>For links on icons and images, refer to chapter 6 (Images and Icons). Note Use of the title attribute also complies with accessibility requirements:<a href="gtc.html" target="_blank" title="General Terms and Conditions (new tab)"> General Terms and Conditions </a>Combine successive elements being links (or buttons) with the same destination as one single link (or one button)When several successive buttons or links have the same function, they must be considered as one single link or button (using a single <a> or <button> tag).Example 114066648387000Here is an example of non recommended coding for an icon and text that serve together as a button to add the page to my bookmarks:<button> <img src="heart.png" alt="Add to my bookmarks" /></button><button>Add to my bookmarks</button>11018646291500Here is an example of more accessible coding for the same icon and text that serve together as a button to add the page to my bookmarks:<button> <img src="heart.png" alt="" /> Add to my bookmarks</button>Example 2 (clickable cards)13384749378200Here is an example of incorrect coding for an image, a title, a date and an introduction serving as a link to the details of a news item:<a href="…"> <img src="people-in-the-snow.jpg" alt=" Winter weather just getting started across Canada" /></a><h2><a href="…">Winter weather just getting started across Canada</a></h2><p class="date"> <a href="…">12/12/2016</a></p><p class="intro"> <a href="…"> Winter has arrived in Canada and won’t be leaving anytime soon. Southern Ontario is expected to see its first big snowfall of the year while British Columbia continues to see snow and falling temperatures.</a></p>9461547848600And finally, more accessible coding of the same image, title, date and introduction serving as a link to the details of a news item:<a href="…"> <img src="people-in-the-snow.jpg" alt="" /> <h2>Winter weather just getting started across Canada</h2> <p class="date">12/12/2016</p> <p class="intro">Winter has arrived in Canada and won’t be leaving anytime soon. Southern Ontario is expected to see its first big snowfall of the year while British Columbia continues to see snow and falling temperatures.</p></a> TipIf possible, we recommend to follow the following pattern when the clickable card contains lots of text, so that only the title in the card will be read as a link by screen readers:<article> <img src="people-in-the-snow.jpg" alt="" /> <h2><a href="…">Winter weather just getting started across Canada</a></h2> <p class="date">12/12/2016</p> <p class="intro">Winter has arrived in Canada and won’t be leaving anytime soon. Southern Ontario is expected to see its first big snowfall of the year while British Columbia continues to see snow and falling temperatures.</p></article>and to extend the surface of the clickable area with the following trick: and IconsIcon Fonts Note Whether the icon is decorative, informative, or acts as a link/button, the container tag should be given aria-hidden="true" to ensure that screen readers do not present this information to the user as they encounter it. If possible, the tag serving the icon should be a <span> because it has no semantic value.Decorative and ambient IconsWhen a decorative or ambient icon is included in the HTML code there is no need for an alternative.In the following HTML code, the icon is simply a visual embellishment of the text "Error messages" (which is explicit by nature):<h2> <span class="icon error" aria-hidden="true"></span> Error messages</h2>Informative IconsWhen an informative icon is included in the HTML code:Add a tag (i.e. <span>) immediately after the tag which contains the icon.Add information to this tag to make the icon explicit.Hide the content of the tag with CSS or place it off-screen using the CSS "opacity: 0;" or "position: absolute;" properties.Good practice is to add a title attribute, containing the replacement text value, inside the tag used to display the icon (so that the text appears when mousing over) (<span class="Walking icon" title="By walking:" aria-hidden="true"></span>)The icon image above refers to the time and distance to reach a destination by walking. The code should be: <p> <span class="Walking icon" title="By walking:" aria-hidden="true"></span> <span class="offscreen">By walking: </span> <span>2 min</span> <span>111 m</span></p>.off-screen { position: absolute; left: -99999rem;}Unlabeled icon links or buttons.When an unlabeled icon acting as a link or button is added into the HTML code:Add a <span> tag inside the <a> or <button> element.Add text into the <span> to make the icon explicit. Hide the content of this tag with CSS or place it off-screen using the CSS "opacity: 0;" or "position: absolute;" properties.Good practice is to add a title attribute, containing the replacement text value, inside the tag used to display the icon (so that the text appears when mousing over) (<span class="icon home" title="Home" aria-hidden="true"></span>) In the example of HTML code below, the icon is a link that points to the home page:<a href="/"> <span class="icon home" title="Home" aria-hidden="true"></span> <span class="offscreen">Home</span></a>.offscreen { position: absolute; left: -99999rem;}SVG (Scalable Vector Graphics) WarningIn Internet Explorer, <svg> tags receive keyboard focus by default.To optimize keyboard navigation in that browser, the focusable=”false” attribute must be added to each <svg> tag used to display an image. Note There are different techniques for coding SVG images. The techniques listed below are those that were found to be the most robust when tested.Decorative/ambient <svg> When a <svg> is simply decorative or ambient, add aria-hidden="true".In the following HTML code, the <svg> simply enhances the label "Error Messages" (explicit by nature):<h2> <svg aria-hidden="true" focusable="false">[...]</svg> Error Messages</h2> Warning A purely decorative or ambient <svg> element does not need the title, aria-label, aria-labelledby and/or aria-describedby attributes. Likewise, it should not have a <title> and/or <desc> rmative <svg> When an informative <svg> image is included in the HTML code:Add a tag (<span>, for example) immediately after the <svg> tag.Populate this new tag with the replacement text that explains the SVG image.Hide this tag when using CSS by making it invisible or taking it out of the screen, by means of the CSS properties: “opacity: 0” or “position: absolute” respectively.Add aria-hidden="true" to the <svg> element. In the example of HTML code below, the <svg> shows that the text applies to a walking section:<p> <svg aria-hidden="true" focusable="false"> [...] </svg> <span class="offscreen">By walking: </span> <span>2 min</span> <span>111 m</span></p>.off-screen { position: absolute; left: -99999rem;} Warning Do not start an <svg> element with "Image […]".<svg> links and buttons aloneWhen a <svg> image alone (without a label), acting as a link or a button, is included in the HTML code:Add an attribute role="img" attribute to the <svg> tag.Add a <title> tag after opening of the <svg> tag and populate it with the information that makes the link or button explicit. Add an id attribute to this <title> tag and set it to a unique value.Add an aria-labelledby attribute to the <svg> tag and give it the same value as the id attribute of the <title> tag. In the following HTML code, the <svg> points to the home page of a website:<a href="/"> <svg role="img" aria-labelledby="icon-svg-home" focusable="false"> <title id="icon-svg-home">Home</title> [...] </svg></a> WarningDo not start the text alternative by “Link to […]” or “Button to […]”. <img /> and <input type="image" /> tags Note Regardless of whether an <img /> element is decorative, informative, or act as a link/button, it should in all cases have an alt attribute. This is to ensure that screen readers do not read the source file name (i.e. the content of the src attribute).Decorative/ambient <img />When a decorative or ambient <img /> element is included in the HTML code, the alt attribute must remain empty (without any space between the quotation marks of alt=""). In the HTML example below, the <img /> element simply enhances "Error messages" (which is explicit by nature):<h2> <img src="error.png" alt="" /> Error messages</h2>Informative <img /> elementsWhen an informative <img /> element is used in the HTML code, populate its alt attribute with the information conveyed by the image.The image above refers to the time and distance to reach a destination by walking. The code should be:<p> <img src="walk.png" alt="By walking:" /> <span>2 min</span> <span>111 m</span></p> NoteIf the <img /> elements is used to display an informative image in SVG format, add a role="img" attribute inline to ensure good compatibility with mobile assistive technologies:<p> <img role="img" src="walk.svg" alt="By walking: " /> <span>2 min</span> <span>111 m</span></p> WarningDo not start alternative text with alt="Image of […]". This information is already provided by the assistive technology when it encounters the <img /> element.Unabeled <img /> links or buttonsWhen an <img /> element acting as link or bottom is included alone (without a label) in the HTML code, add the information needed to make it explicit into the alt attribute. In the HTML example below, the <img /> element points to the home page:<a href="/"> <img src="home.png" alt="Home" /></a> Warning Do not start the alt text with alt="Link to […]" or alt="Button […]" when the <img> element is acting as a link or button. This information is already provided to the assistive technology by the <a> or <button> elements.<input type="image" />When <input type="image" /> is included in the HTML code, add the information needed to make it explicit into its alt attribute. In the HTML example below, the <input type="image" … /> launches a search within the website:<input type="image" src="magnifier.png" alt="Search site" … /> Warning Do not start the alt attribute with alt="Button […]" when the <input type="image" … /> element is acting as a link or button. This information is already provided to the assistive technology by the <input type="image" … /> elements.Tag images that have captions with <figure role="group"> and <figcaption>Images that have captions should be tagged with <figure role="group"> and <figcaption>.The <figure role="group"> element should include the image AND the legend, and the legend should be tagged with <figcaption>. Note The alternative text (i.e. alt attribute for the <img /> tag) should contain a reference to the caption.Example 1Bolivian desert, picture by Audesou, February 2013.<figure role="group"> <img src="…" alt="Three llamas in the Bolivian desert." /> <figcaption> Bolivian desert, picture by Audesou, February 2013. </figcaption></figure>Example 2Photo 1: Bolivian desert, picture by Audesou, February 2013. <figure role="group"> <img src="…" alt="Three llamas in the Bolivian desert [photo 1]" /> <figcaption> Photo 1: Bolivian desert, picture by Audesou, February 2013. </figcaption></figure>Don't use CSS to display images that carry informationCSS should not be used to display images that carry information.In other words, images with information should be included in the HTML code (i.e. via the <img /> or svg elements). NoteImage sprites (images loaded in the background via CSS) are not appropriate for images that carry information. Tip Images are considered to carry information if some of the page content would be missing without them. These images include:Logos.Text images.Image links and buttons.Etc. WarningIn particular, text should not be placed off-screen and replaced by a background images.When images are not uploaded, information may be lost.-1104-7932000<a href="/" id="logo">[My logo text]</a> -1104-4469800#logo { display: block; width: 300px; height: 100px; text‐indent: ‐99999px; background: url('images/logo.png'); }This technique should be replaced with pure HTML code (such as an image tag with the proper alt attribute).FormsUse the <label> tag with the for and id attributes to label form fields with a visible name To label fields with a visible name:Use the <label> tag for each form name. Add the for attribute to each <label> tag and an id attribute on each form field.Populate the for and id attributes of each name/field pair with the same, unique value.<label for="firstname">Your name</label><input type="text" id="firstname" name="name" /><label for="country">Your country</label><select id="country" name="country"> <option value="belgium">Belgium</option> <option value="france">France</option> […]</select> WarningThe title and aria-label attributes should not be used for fields which have already been labeled this way. NoteIt is important to provide identical names for fields that have the same function.For example, if there are several identical identification forms on the website, do not use "ID" on one, and "Login" on the other.Use the aria-label or title attribute to label form fields that don't have a visible label To label form fields that don't have a visible label:Add aria-label or title to the field.Populate the attribute by specifying the field’s function.<input type="search" aria-label="Your search" name="search" /><input type="submit" value="Search" /><select aria-label="Filter news" name="filter"> <option>By Date</option> <option>By Topic</option> […]</select> NoteFields that don't have a visible label, can also be labeled with the <label> element and the for and id attributes.Then hide the <label> off screen. For example using CSS “position: absolute;” and “left: -99999px;”. WarningThe placeholder attribute cannot serve as a label.It should only be used to provide additional assistance with text entry.<input type="text" aria-label="Your search" placeholder="Enter keywords" />Add help text directly into the <label> tagHelp text should be included in the <label> element.This especially applies to:Instructions on how to format the input such as MM/DD/rmation about the type and maximum size of files than can be sent.Mandatory fields.Etc.<label for="date"> Date of Birth <span>(MM/DD/YYYY)</span></label><input type="date" id="date" name="date" /><label for="number"> Your client number <input type="text" id="number" name="number" /> <span>i.e., 76432-BT-VZ</span></label> NoteIn some cases, because of a specific design layout for example, the help text cannot be included in the <label>.In these cases:Add the id attribute into the tag containing the help text.Populate the id with a unique value.Add the aria-describedby attribute to the corresponding field.Populate aria-describedby with the id value included in the help text.<label for="document"> Add a document to your case </label> <input type="file" id="document" name="document" aria-describedby="formats" /> <h2> Documents currently in your case</h2> <ul> <li>CV</li> <li>Cover Letter</li> </ul> <p id="formats">Accepted formats: pdf or doc.</p>Note that the aria-describedby attribute can include several id values from different sources. WarningThe placeholder attribute should not be used for help text that is essential to understand the type of data to be entered.It should only be used to provide additional assistance with text entry.<input type="search" title="Your search" placeholder="Enter keywords" />Add required or aria-required="true" to mandatory fieldsMandatory fields should have a required or aria-required="true" attribute. NoteWhen using these attributes, the <label> should include a distinctive indication.<label for="email">Your email *</label><input type="email" id="email" name="email" required /><input type="checkbox" id="conditions" aria-required="true" /><label for="conditions">I accept the conditions of sale (required)</label>Add error messages and correction suggestions directly into the <label> tagWhen error messages and suggestions are placed next to the corresponding form fields, they need to be added directly into the <label> tag. Tip In addition to the error message, good practice is to add aria-invalid="true" to the field.<label for="name"> Your name * <span>Please fill in your name</span></label><input type="text" id="name" name="name" required aria-invalid="true" /><label for="email"> Your email * <input type="text" id="email" name="email" required aria-invalid="true" /> <span>Please provide a valid email format (example@)</span></label> NoteIn some cases, because of a specific design layout for example, it is not possible to place the error message directly into the <label>.In that case:Add an id attribute to the element that contains the error message. Give this id a unique value.Add aria-describedby to the corresponding input field.Add the id value of the error message to this aria-describedby attribute.<label for="document"> Add a document to your file </label> <input type="file" id="document" name="document" aria-invalid="true" aria-describedby="formats error" /> <h2>Documents currently in your file</h2> <ul> <li>CV</li> <li>Cover letter</li> </ul><p id="error">File format incorrect.</p> <p id="formats">Valid formats: pdf or doc.</p>Note that aria-describedby can reference several id values.Update the <title> element when the page reloads to display an error or confirmation messageWhen the form sends an error or confirmation message after reloading the page, the <title> element should always be updated to show that information.For example, if submission is successful:<title>Confirmation - Contact | [site name]</title>If there is an error:<title>Error - Contact | [site name]</title> TipIt is recommended to include this information at the beginning of the <title> element. NoteIn some situations, the title does not need to be updated because the title displayed after submission is already obvious.For exampleA login which goes directly to the “User Profile”.A button which says “Next step” as part of a multi page form.A contact page that sends a preview page.Group related fields with <fieldset> and <legend>When a form has multiple fields and some of them have the same label, use <fieldset> and <legend> to group them.<fieldset> <legend>Participant 1</legend> <label for="firstName-1">First Name</label> <input type="text" id="firstName-1" name="firstName-1" /> <label for="lastName-1">Last Name</label> <input type="text" id="lastName-1" name="lastName-1" /> […]</fieldset><fieldset> <legend>Participant 2</legend> <label for="firstName-2">First Name</label> <input type="text" id="firstName-2" name="firstName-2" /> <label for="lastName-2">Last Name</label> <input type="text" id="lastName-2" name="lastName-2" /> […]</fieldset> WarningThe <fieldset> and <legend> elements should systematically be used when several groups of fields have identical labels.For example: A series of different questions on the same page which can all be answered “yes” or “no”.A list of participants at an event, which all have a First Name and Last Name. If the form is too long, but none of the fields have the same label, use the tags <h1> to <h6> to sort the fields groups. NoteIt is also a good practice to group radio buttons and checkboxes with <fieldset> and <legend>.For example:<fieldset> <legend>Sports played</legend> <ul> <li> <input type="checkbox" id="basketball" /> <label for="basketball">Basketball</label></li> <li> <input type="checkbox" id="tennis" /> <label for="tennis">Tennis</label></li> […] </ul> </fieldset>Organize the items of dropdown lists logically When dropdown lists are used, the items listed should be organized logically.The logical order depends on the context, but it may be:Alphabetical order (i.e. a list of languages).Numbered order (i.e. a list of departments).Practical order ("Canada" first in form to sign up for a Canadian service). Tip Good practice is to avoid prefixing the content of the <option> element with decorative characters (dashes, stars, space, etc.).This will allow the user direct access to a desired value or group of values by simply pressing a key on the keyboard (pressing the "I" key to reach the country "Italy", for example).48591698500 <select> <option>--Belgium</option> <option>--France</option> <option>--Germany</option> <option>--Italy</option> <option>--Spain</option> </select>Should be replaced by:864566571500 <select> <option>Belgium</option> <option>France</option> <option>Germany</option> <option>Italy</option> <option>Spain</option> </select>In forms with multiple steps, identify the current step using aria-current="step"In the navigation menu of a form with multiple steps, the current step should be identified by means of aria-current="step".<nav aria-label="Steps of your order"> <ol> <li><a href="…">Personal information</a></li> <li aria-current="step"><em>Payment</em></li> <li>Preview</li> </ol></nav> Note When forms have multiple steps, it should also be possible for the user to return to a previous step by means of a link, for example.ListsTag unordered lists with <ul> and <li>Use the <ul> and <li> elements to mark up lists of items which can appear in any order (menus, tabs, sharing buttons, site map, etc.).If required, make sure that lists are properly nested:<ul> <li>First item of first level</li> <li> Second item of first level <ul> <li>First item of second level</li> <li>Second item of second level</li> </ul> </li> <li>Third item of first level</li> </ul>Tag ordered lists with <ol> and <li>Use the <ol> and <li> tags to mark up lists of items that must appear in a specific order (list of steps in a procedure, ranking, etc.). In other words, when the information would not be understood if the items were presented in a different order.If required, make sure that lists are properly nested:<ol> <li>First item of first level</li> <li> Second item of first level <ul> <li>First item of second level</li> <li>Second item of second level</li> </ul> </li> <li>Third item of first level</li></ol>Mark up definition lists with <dl>, <dt> and <dd>Use <dl>, <dt> and <dd> tags to mark up definition lists.A definition list is a series of key/value pairs that might be found, for example, in a product description, or in a glossary of terms. Note One keyword (<dt> tag) might have several values (<dd> tags).Example with the description of an event:<h2>Web Accessibility Conference</h2><dl> <dt>Location</dt> <dd>Paris</dd> <dt>Dates</dt> <dd>Saturday, September 7</dd> <dd>Wednesday, October 14</dd> <dt>Time</dt> <dd>Starts at 10 a.m.</dd></dl>Example with a glossary:<dl> <dt><dfn>ARIA</dfn></dt> <dd>Accessible Rich Internet Application</dd> […] <dt><dfn>WCAG</dfn></dt> <dd>Web Content Accessibility Guidelines</dd> […]</dl>TablesProvide a <caption> for every data table When a data table is included in the HTML code, is should have a clear and concise title.This title should be included in the <caption> element, and should introduce the content.<table> <caption>Average monthly temperatures of the 3 largest cities in Canada.</caption> […]</table>Average monthly temperatures of the 3 largest cities in Canada.TorontoMontrealVancouverJune22°C28°C26°CJuly24°C30°C28°CMark up the row and column header cells with <th>In all data tables, mark up each column and row header cell with the <th> tag.When a cell is essential to understand the data provided in the table, it should be marked up with <th>.<table> <caption>Average monthly temperatures of the 3 largest cities in Canada.</caption> <tr> <td>&nbsp;</td> <th>Toronto</th> <th>Montreal</th> <th>Vancouver</th> </tr> <tr> <th>June</th> <td>22°C</td> <td>28°C</td> <td>26°C</td> </tr> <tr> <th>July</th> <td>24°C</td> <td>30°C</td> <td>28°C</td> </tr></table>In simple tables use the scope attribute to associate data cells with their corresponding headersA data table is simple when each header cell applies to all of the cells in the row or column. To associate headers with their corresponding data in this type of table, add the scope attribute into the <th> tags. The value of the attribute depends on the type of header: If the data cells form a column: scope="col".If the data cells form a row: scope="row".<table> <caption>Average monthly temperatures of the 3 largest cities in Canada.</caption> <tr> <td>&nbsp;</td> <th scope="col">Toronto</th> <th scope="col">Montreal</th> <th scope="col">Vancouver</th> </tr> <tr> <th scope="row">June</th> <td>22°C</td> <td>28°C</td> <td>26°C</td> </tr> <tr> <th scope="row">July</th> <td>24°C</td> <td>30°C</td> <td>28°C</td> </tr></table>In complex tables, use the headers and id attributes to associate header cells with their corresponding data cells A data table is complex when the header cells do not apply to all of the cells in the row or column. To associate headers with their corresponding data cells in this type of table, add the id attribute to all <th> cells and the headers attribute to all the <td> cells.The next step is to populate the headers attributes with the values found in the corresponding header cells. If several headers are associated with a data cell, they are separated by a space (space delimited) in the corresponding headers attribute.<table> <caption>Sales revenue comparison of Davis and Davison companies in the UK and in the rest of the world.</caption> <tr> <th id="header-1">In millions of pounds sterling</th> <th id="header-2">In the UK</th> <th id="header-3">Rest of the World</th> </tr> <tr> <th id="header-4">Davis</th> <td headers="header-4 header-2 header-1"> 50.7 </td> <td headers="header-4 header-3 header-1"> 139.3 </td> </tr> <tr> <th id="header-5">Davison</th> <td headers="header-5 header-2 header-1"> 27.1 </td> <td headers="header-5 header-3 header-1"> 476.0 </td> </tr></table>Comparison of sales revenue between the Davis and Davison companies in the UK and the rest of the world.In millions of pounds sterlingIn the UKRest of the WorldDavis50.7139.3Davison27.1476.0 WarningThe headers attribute should not be used in combination with the scope attribute. NoteGood practice is to organize the id values of the header cell according to the logical visual order of the table. A screen reader (using voice or braille) will announce the headers in this order.Add role="presentation" to each layout <table> Mark up layout tables by including role="presentation" in the <table> tag.<table role="presentation">[…]</table>Don't use data table markup for a layout tableA layout table should not contain elements and attributes which are only appropriate for data tables.In other words:<caption>, <th>, <thead> and <tfoot> elements should not be used in a layout table.scope, headers, axis and colgroup attributes should not be used in a layout table.Make sure layout tables follow the right reading orderWhen a screen reader (voice or braille) translates a layout table, the content is read in a linear way i.e. cell by cell, from left to right, row after row.So the reading order should remain consistent on each layout table.For instance, if the source code below is used, the reading order will be:First name.Last name.Age.“First name” field.“Last name” field.“Age” field.<table role="presentation"> <tr> <td><label for="first-name">First name</label></td> <td><label for="last-name">Last name</label></td> <td><label for="age">Age</label></td> </tr> <tr> <td><input type="text" name="first-name" id="first-name" /></td> <td><input type="text" name="last-name" id="last-name" /></td> <td><input type="text" name="age" id="age" /></td> </tr></table>To follow a right reading order while keeping the layout table, try this instead:<table role="presentation"> <tr> <td> <label for="first-name">First name</label> <input type="text" name="first-name" id="first-name" /> </td> <td> <label for="last-name">Last name</label> <input type="text" name="last-name" id="last-name" /> </td> <td> <label for="age">Age</label> <input type="text" name="age" id="age" /> </td> </tr></table> Warning To ensure optimal screen reader compatibility and guarantee that the right reading order is followed, it is strongly recommended to limit the use of layout tables.Using CSSUse CSS to layout text Example of a specific font added in text format (Technique used: @font-face CSS3).Ensure that the content can be read when images are turned offWhen images are turned off, the content of the page should remain visible and readable. No information should be lost and there should be sufficient contrast between the foreground and background.In other words, all the content should be visible and readable:Even when CSS images are turned off for the page.Even when HTML images are replaced with their alt attributes. TipWhen text is placed over a background image, make sure to provide an alternative background color that will ensure text readability in the absence of the background image.background: black url(../images/dark-background.png) repeat-x;This replacement color can be inherited from a parent. WarningParticular attention should be paid to the readability of text alternatives for images embedded in the HTML when images are not displayed.Ensure that the content is understandable with CSS turned offEnsure that the information remains available and understandable even when CSS is disabled, especially when colors, sizes, shapes or positions are carrying information.Also, do not generate informative content with CSS.ExamplesPosition of the current selection in the menu (Example 1) In this example, "Programs" has bold text a red border indicating it is currently selected.In the solution presented below, a <strong> element is added to ensure that the information is not lost without CSS.<a href="…" aria-current="true"> <strong>Programs</strong></a>Position of the current selection in the menu (Example 2)In this example, a different colored arrow and an additional border indicate that the link "Values" is the current page.In this case, an efficient way of conveying without CSS that it is the current page is to remove the surrounding <a> tag.<ul> <li><a href="…">2015 key figures</a></li> <li><a href="…">Governance</a></li> <li aria-current="page">Values</li> <li><a href="…">Subsidiaries</a></li> <li><a href="…">SPIE around the world</a></li> <li><a href="…">Innovation</a></li> <li><a href="…">History</a></li></ul>CSS Generated Content (example 3)When informative content, is necessary to understand the content, it should not be generated by CSS.In this first example, information about the PDF format of the downloadable fils is added with CSS. This is problematic.a[href*=".pdf"]::after{ content: ' (PDF)';}In this second example, information about a "New Window" is added with CSS. This is also incorrect.a[target=_blank]::after{ content: ' (new window)';}Zoom and text sizeUse only relative font sizes (em, %, small, etc.) To set the font size, use only relative measurements in CSS font-size such as em, %, rem, or keywords (x-small, small, etc.).Do not use absolute units such as pt, cm, etc. Note This recommendation does not apply to CSS print (media type print).Ensure content visibility even when its size is doubledEnsure the readability of content even when the font size is doubled by the user. This prevents text overlapping, being cut off, etc. Text changes should size up to at least 200% and flow without breaking out of the layout, overlapping or appearing off-screenTo ensure that:Do not use units (px, pt, %, em, etc.) with the CSS line-height property.Be vigilant when using absolute positioning (CSS position: absolute; declaration). While this positioning is compatible with accessibility it can sometimes cause overlapping in the content.Do not define a fixed height (CSS height property) on elements likely to contain text, particularly form fields. TipTo test this recommendation:In Firefox, select: View > Zoom > Zoom Text Only, then double the text size by pressing the CTRL key and + sign 6 times (CTRL and 0 returns the zoom to it’s default size).With Safari (Mac), hold the Command and Option keys down and press the + key 4 times. Check that all of the text can be read (without any overlapping or missing text).In Chrome, the “Zoom Text Only” setting can be used by adding the extension “Zoom Text Only”.In Internet Explorer, the text can not be enlarged easily up to 200%.Do not disable the zoom with the user-scalable propertyGive users the possibility to zoom. To ensure this, avoid using the one of the declarations: <meta content="width=device-width;initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" name="viewport" /><meta name="viewport" content="user-scalable=no" />Keyboard NavigationEnsure that the tab order follows the logical reading orderThe tab order should logically follow the visual order of the page. In other words, if an interactive element follows another interactive element in the visual presentation of the page, the focus should also move from the first to the second element in the same order. WarningDo not use positive values (value above 0) on the tabindex attribute because it can disrupt the natural tab order of the page. NoteIn some complex components, such as tabbed interfaces, navigating from one interactive element to another is done with the arrow keys rather than the Tab key.Provide “skip links” A "Skip to content" should be placed on each page to help keyboard users navigate the page. This should be the first interactive element on the page. This internal link will take the user directly to the main content.<a class="skiplink" href="#content">Skip to content</a>[…]<main role="main"><a id="content" tabindex="-1"></a>[…]</main> Warning To ensure that this anchor link works with VoiceOver and in Internet Explorer, the destination tag should be <a tabindex="-1"></a>. NoteThe link may be hidden by default. However, it must become visible when it receives keyboard focus.Therefore, the "skip to content" link should never be hidden using CSS properties display: none; and/or visibility: hidden; which would make it completely unusable with keyboard navigation. A better approach would be to use the code below:a.skiplink { display: inline-block; color: #555; background: #fff; padding: .5em; position: absolute; left: -99999px; z-index: 100;}a.skiplink:focus { left: 0; } TipIn some situations, it takes a lot of tabbing to reach the main and secondary menus and/or search engine from the top of the page. In these cases, add "Skip to" links, as in the following example:<ul id="skiplink"> <li> <a href="#content">Skip to content</a> </li> <li> <a href="#nav">Skip to navigation</a> </li> <li> <a href="#search">Skip to search</a> </li> </ul>Ensure that keyboard focus is visibleIn order to ensure that sighted keyboard users can navigate in the page and know where they are, each interactive element (links, buttons, form fields, etc.) should stand out visually focus ring when it receives focus. NoteEnsure that this focus indicator has sufficient contrast. TipGood practice is to systematically back up each :hover selector with a :focus rule.For example:main a:hover,main a:focus { text-decoration: none; }ScriptsEnsure that scripts can be activated with both the mouse and the keyboardEach time that a script can be activated with a mouse, it should be possible to activate it with a keyboard (and vice versa).That is to say, each time a mouse can activate a script using an element (i.e. a button, link, etc.) the element should:Be focusable with a keyboard.Allow activation of the script using the keyboard once the element is given focus. Warning Keyboard shortcuts vary from system to system. Therefore, whenever possible, avoid interactions with specific keys.For example, to trigger an action when the user tabs away from an element, listen with the generic event onblur rather than using Tab and Shift + Tab keys. MobileEnsure that the tactile interactions work with both the mouse and keyboard.Additional GuidelinesThe following Success Criteria of the Web Content Accessibility Guidelines (WCAG) were not covered in this manual, because either rarely applicable in a web project or because there are not a priority for users. To comply with level A (WCAG 2.0)Populate the alt on each image map <area /> tag.Tag block level quotations with <blockquote>.Tag inline quotations with <q>.Add the title attribute to describe each <iframe>.Add the title attribute to describe each <frame>.Group related options in <select> boxes with <optgroup>.Provide alternatives to graphical CAPTCHA or find a non graphical kind of CAPTCHA.Indicate the language of each downloadable document that is in a foreign language.Provide alternative links to ismap attributes as a backup.Indicate the reading direction dir="ltr" (left to right) or dir="rtl" (right to left) on the <html> elements.Use the dir attribute to indicate a change of direction in the body of a document. Provide a text alternative to all multimedia (<video>, <audio>, <object>, etc.).Do not use the wmode parameter with transparent or opaque values.Do not add text to decorative <canvas> elements.Provide text alternatives to informative <canvas> elements or add links to text alternatives.To comply with level AA (WCAG 2.0)No additional requirements for level AA (WCAG 2.0).To comply with level AAA (WCAG 2.0)The link context can be determined from the link text itself without the title attribute.Tag definition lists with <dfn>.Tag abbreviations with <abbr>.Limit line length to 80 characters, regardless of text size.Provide paragraph spacing at least 1.5 times larger than the line spacing.Provide line spacing (leading) at least a space-and-a-half within paragraphs.Ensure that no horizontal scroll bar is needed even when text is increased to 200%.Ensure that lines are no longer than 80 characters when the user reduces the browser window size. ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download