DOCSLIB.ORG

Accessibility Guidelines for HTML, CSS and Javascript

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Accessibility Guidelines for HTML, CSS and Javascript Accessibility guidelines for HTML, CSS and JavaScript Date Version Author Status / comments Nov 3rd, 2018 3.0 Atalan Jan 21, 2019 3.1 Atalan Minor 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 – SPIE Observers: 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 ParisTech Acknowledgments Special 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, Atalan Table of contents Introduction ................................................................................................................................................ 6 Context and objectives ............................................................................................................................. 6 Who should read this document, and how to use it? ............................................................................... 6 Contact ..................................................................................................................................................... 6 License agreement .................................................................................................................................. 7 1 General structure ............................................................................................................................... 8 Add structure to the header area using <header role="banner"> ........................................ 8 Mark up the search field with role="search" .......................................................................... 8 Structure the main content area with <main role="main"> ................................................... 8 Structure information about the website and its author with <footer role="contentinfo"> 9 Structure primary and secondary navigation menus with <nav role="navigation"> .......... 9 Structure navigation menus with lists .......................................................................................... 10 Identify the current position in navigation systems with aria-current ................................... 10 Create a logical and thorough hierarchy for headings, using <h1> to <h6> tags ................. 12 Write the HTML code in a logical reading order ......................................................................... 15 Ensure that the HTML flow is consistent from one page to another ....................................... 16 2 Page Title........................................................................................................................................... 17 Provide a descriptive <title> element on each page ........................................................... 17 3 Language........................................................................................................................................... 18 Provide the primary language of the page with the lang attribute on the <html> tag ......... 18 Use the lang attribute to indicate a change of language ........................................................... 18 Make sure that hidden content is translated ............................................................................... 19 4 HTML Grammar and Semantics ...................................................................................................... 20 Write HTML code that follows the formal grammar rules of the DOCTYPE used ...................... 20 Use HTML elements for their right semantic purpose ................................................................ 20 5 Links and Buttons ............................................................................................................................ 21 Distinguish buttons from links ..................................................................................................... 21 Make link and button labels explicit with aria-label or the title attribute ..................... 21 Don't use the title or aria-label attributes on links and buttons that are already explicit ...... 22 Add the size and format of files to "Download" links. .................................................................. 23 Give advance warning before opening a new window ................................................................ 24 Combine successive elements being links (or buttons) with the same destination as one single link (or one button) ................................................................................................................................. 24 6 Images and Icons ............................................................................................................................. 27 Icon Fonts.................................................................................................................................... 27 SVG (Scalable Vector Graphics) ................................................................................................ 29 <img /> and <input type="image" /> tags ..................................................................... 31 Tag images that have captions with <figure role="group"> and <figcaption> ........ 33 Don't use CSS to display images that carry information ............................................................. 35 7 Forms ................................................................................................................................................. 36 Use the <label> tag with the for and id attributes to label form fields with a visible name 36 Use the aria-label or title attribute to label form fields that don't have a visible label 36 Add help text directly into the <label> tag ............................................................................. 37 Add required or aria-required="true" to mandatory fields....................................... 38 Add error messages and correction suggestions directly into the <label> tag...................... 39 Update the <title> element when the page reloads to display an error or confirmation message ................................................................................................................................................. 40 Group related fields with <fieldset> and <legend> .......................................................... 41 Organize the items of dropdown lists logically ............................................................................ 42 In forms with multiple steps, identify the current step using aria-current="step" ............. 43 8 Lists ................................................................................................................................................... 44 Tag unordered lists with <ul> and <li> ................................................................................ 44 Tag ordered lists with <ol> and <li> .................................................................................... 44 Mark up definition lists with <dl>, <dt> and <dd> ............................................................... 44 9 Tables ................................................................................................................................................ 46 Provide a <caption> for every data table .............................................................................. 46 Mark
Load more

Recommended publications
  • Annual Report 2019: Center for Persons with Disabilities
    ANNUAL REPORT 2019 CENTER FOR PERSONS WITH DISABILITIES CPD MISSION We are working together to create inclusive communities and improve the lives of children and adults with disabilities and their families through sustainable innovation, collaborative research, responsive service, and interdisciplinary training and education. CONTACT THE CPD Phone:435-797-1981 www.cpd.usu.edu Address: 6800 Old Main Hill Logan, UT 84322-6800 From the Director THIS PAST YEAR AT THE CPD has been marked by new projects, new personnel, and a renewed focus on building partnerships on campus, in our communities, and across the country. In the pursuit of our mission to create more inclusive communities and improve the lives of individuals with disabilities and their families, we have focused our efforts on diversifying our projects and expanding our reach into the community, state, and nation. New projects have strengthened our efforts on mental health issues, employment supports for people with disabilities, and literacy. This year marks the best funding year for the CPD in the past five years, which is a testament to the hard work of our dedicated staff. The fact that we have continued to grow, in spite of a challenging funding environment, is a clear indicator that the CPD is adapting Dr. Matthew Wappett and evolving. Much of our success has come from new federal and CPD Executive Director state partnerships that build upon the reputation of our people and programs. In FY 2019, CPD staff worked on 114 different projects delivering training, conducting research, and providing technical assistance in every Utah county, 46 U.S.
    [Show full text]
  • Least You Need to Know
    Accessibility Maintainers of WebLearn sites need to be aware of accessibility issues, for users with various types of impairment Why are accessibility issues important? Have you ever experienced problems such as Repetitive Strain Injury (RSI), sore eyes, headaches, back or shoulder aches from long term use of a computer? Are you perhaps colour blind, have a touch of dyslexia, or need magnification of the computer screen? Are you sensitive to screen flashing due to photo-sensitive epilepsy? It is not only major sensory impairments such as vision or hearing disabilities which impede people in their use of technology. In many cases, assistive/adaptive/access technology (AT) can be used to enable or facilitate the use, navigation, creation or completion of electronic materials (such as web pages, online forms, Internet services and products) that would be inaccessible by conventional means. Assistive technologies include screen readers (such as JAWS, ReadPlease, BrowseAloud) or screen enlargers (magnifiers), voice recognition systems, alternative input devices such as eye or head operated pointing devices. The Opera browser now includes voice-enabled shopping and booking systems and spoken commands to browse the web. What types of impairments need to be considered? It helps to classify types of impairments in order be able to address differing needs (AbilityNet (www.abilitynet.org.uk) • Vision – including blindness, partial sightedness, colour blindness and tunnel vision • Hearing – deaf and partial hearing • Headings are an absolute Mobility problems – RSI, problems with using hands or arms asset – you can key through • Cognitive, mental problems – including dyslexia, learning problems them by ‘arrowing down’ A quotation from a blind person browsing internet sites with the help of a screen reader: (using the down arrow on the keyboard) Holistic approach to web design Build your Content first (in a simple, linear layout), add styling on top of that (e.g.
    [Show full text]
  • Webaim Campus Training Session 2
    WebAIM Campus Training-Session 2 OK, another aspect of accessibility for users with low vision is ensuring that there is sufficient contrast between the text content and the background. This is something that impacts everybody. We all have difficulty reading content if there is insufficient contrast. It is important to keep in mind that ultimately the end user has control over the way they view your web content. They can change colors. They can invert contrast. They can enable high contrast to override your colors to view content in a way that works best for them. So keep that in mind. This is always something that they can do. That idea that we fully control the user experience-- we have to give that up. We have to give up that notion that we control what the user is going to see or what they're going to do. What we want to do instead is to enable a good experience. If the user comes and they customize, they adapt the content for their own needs, what we have provided still is going to work for them. To ensure that you provide sufficient contrast, WCAG does define this for you. They provide some measures. All you have to do is implement this very basic formula, and just put this in your memory banks and you'll be good. No, you don't want to be doing this complex math to determine if your content has sufficient contrast. You want to use tools like the WebAIM Contrast Checker. This is a tool that we've built.
    [Show full text]
  • Accessibility Requirements for UH Websites.Pdf
    Accessibility Requirements for UH Websites Section 508 and WCAG 2.0 Level A & AA These slides are at goo.gl/09Ifa2 Mitchell Ryan Sunny Ochi McCalla Walker ITS ITS UH Hilo ochi rmcalla swalker @hawaii.edu @hawaii.edu @hawaii.edu What is Accessibility? Accessibility is about access, not disability. Why is Accessibility Important? Without accessibility, those with disabilities would not be able to participate in this increasingly technology driven world. Physical Disabilities ● Color blind ● Low-vision or legally blind ● Hearing loss ● Low motor control ● Cognitive (e.g., dyslexia, high stress, non-native speaker, etc.) ● and more… Environmental/Temporary Disabilities ● Very small or large screen sizes ● Touch-only or keyboard-only ● Projected or on a TV ● Poor lighting ● Slow connection speed ● Background noise ● Printed ● User-overridden style sheets ● and more… Browser “Disabilities” ● Old IE ● Edge ● Safari (the new IE) ● Chrome ● Firefox ● Opera Mini ● UC Browser ● WebView (in-app) ● Different versions of the same browser ● and more… 2 Rule Sets Section 508 Law: www.section508.gov Checklist: webaim.org/standards/508/checklist WCAG 2.0 Specs: www.w3.org/TR/WCAG20 508 ♥ WCAG Checklist: webaim.org/standards/wcag/checklist Compliance Deadline (spoiler: January 18, 2018) Section 508 or WCAG 2.0? Already 508 compliant? Not yet 508 compliant? Should update Must update to WCAG 2.0 A and AA. to WCAG 2.0 A and AA. “Safe-harbor” exemption if already fully compliant as of January 2018. What does compliance mean? What I see is not what you get. Alt
    [Show full text]
  • Cen Cwa 15778 Workshop Agreement
    CEN CWA 15778 WORKSHOP February 2008 AGREEMENT ICS 35.240.30 English version Document Processing for Accessibility This CEN Workshop Agreement has been drafted and approved by a Workshop of representatives of interested parties, the constitution of which is indicated in the foreword of this Workshop Agreement. The formal process followed by the Workshop in the development of this Workshop Agreement has been endorsed by the National Members of CEN but neither the National Members of CEN nor the CEN Management Centre can be held accountable for the technical content of this CEN Workshop Agreement or possible conflicts with standards or legislation. This CEN Workshop Agreement can in no way be held as being an official standard developed by CEN and its Members. This CEN Workshop Agreement is publicly available as a reference document from the CEN Members National Standard Bodies. CEN members are the national standards bodies of Austria, Belgium, Bulgaria, Cyprus, Czech Republic, Denmark, Estonia, Finland, France, Germany, Greece, Hungary, Iceland, Ireland, Italy, Latvia, Lithuania, Luxembourg, Malta, Netherlands, Norway, Poland, Portugal, Romania, Slovakia, Slovenia, Spain, Sweden, Switzerland and United Kingdom. EUROPEAN COMMITTEE FOR STANDARDIZATION COMITÉ EUROPÉEN DE NORMALISATION EUROPÄISCHES KOMITEE FÜR NORMUNG Management Centre: rue de Stassart, 36 B-1050 Brussels © 2008 CEN All rights of exploitation in any form and by any means reserved worldwide for CEN national Members. Ref. No.:CWA 15778:2008 D/E/F CWA 15778:2008 (E) Contents Page
    [Show full text]
  • Webaim Quick Reference: Testing Web Content for Accessibility
    Quick Reference: Testing Web Content for Accessibility Test with Check keyboard accessibility Run a report at wave.webaim.org. For very complex or The first time testing with Mac, press Control + F7 to non-public pages, use the WAVE Chrome or Firefox enable full keyboard accessibility. extension (wave.webaim.org/extension). o In Safari, select Preferences > Advanced > o Watch the overview video on the WAVE homepage. Accessibility > Press Tab to highlight each Error icons flag known issues. Other icons identify item… potential problems or features. Click an icon to highlight Navigate the page using only the keyboard: the corresponding element and learn more using the o Tab: Navigate interactive elements (links, form Reference panel. controls, etc.) Use the Details panel to review page issues. Click an o Shift + Tab: Navigate backwards. icon to find it in the page. Uncheck icons to hide them. o Enter: Activate links or buttons, submit most forms. Turn off Styles to simplify the page view and to check o Spacebar: Activate checkboxes and buttons, expand a the reading and navigation order. select menu, or scroll the window. Click the Code button at the bottom of the page to see o Arrow keys: Navigate radio buttons, the page code with WAVE icons. select/dropdown menus, sliders, tab panels, tree Images menus, etc. Ensure alternative text (shown in green) conveys the Look for mouse-only interaction (e.g., rollover menus). equivalent content and/or function of the image. Confirm every focusable element has a keyboard focus Look for ways to replace images of text with true text.
    [Show full text]
  • Web Accessibility for Designers Great Web Accessibility Starts in the Design
    Web Accessibility FOR Designers Great web accessibility starts in the design. Plan Heading Structure Early Ensure all content and design fits into a logical heading structure. Ensure Logical Reading Order The reading order for screen reader users should align with the visual order. Provide Good Contrast Good Be especially careful with shades of orange, Bad yellow, and light gray. Use True Text Instead of Images of Text Abc True text enlarges better, loads faster, and is easier to translate and customize. Use Adequate Font Size AAA Small text is difficult for all users to see. Ensure text is optimally readable. Remember Line Length Abcdefg Don’t make lines too long or too short. Make Sure Links are Recognizable Link Distinguish links from body text using more than just color (e.g., underline). Design Keyboard Focus Indicators When navigating with the keyboard, the focused item must be visually distinctive. Design a “Skip to Main Content” Link Skip A keyboard accessible link for users to skip navigation should be at the top of the page. Ensure Link Text Makes Sense on Its Own Click Here Avoid “Click Here” or other ambiguous link text, such as “More” or “Continue”. Design Usable Widgets and Controls Dialogs, tooltips, menus, carousels, etc. must be easy to use and accessible. Use Animation, Video, and Audio Carefully Provide play/pause buttons. Avoid distracting movement. Don’t Convey Content Using Only Color Users may override or may not be able to see differences between colors. Design Accessible Form Controls First Name Ensure form controls have descriptive labels, Submit instructions, and error messages.
    [Show full text]
  • July 11, 2018 MEMORANDUM TO: State Board of Regents FROM
    TAB A State Board of Regents Phone 801.321.7101 Board of Regents Building, The Gateway Fax 801.321.7199 60 South 400 West TDD 801.321.7130 Salt Lake City, Utah 84101-1284 www.higheredutah.org July 11, 2018 MEMORANDUM TO: State Board of Regents FROM: David L. Buhler SUBJECT: General Consent Calendar The Commissioner recommends approval of the following items on the Regents’ General Consent Calendar: A. Minutes 1. Minutes of the Board Meeting May 18, 2018, Salt Lake Community College, Salt Lake City, Utah (Attachment). B. Grant Proposals 1. University of Utah – University of California San Francisco; “Pediatric TB”; $1,120,922. Swomitra Kumar Mohanty, Principal Investigator. 2. University of Utah – NIH Natl Ctr Complementary & Altrn Medcn; “Blueberry Derived Metabolites”; $1,444,408/ Amamdj Babu Velayutham, Principal Investigator. 3. University of Utah – US Department of Energy; “MUSE”; $16,000,000. Darryl P Butt, Principal Investigator. 4. University of Utah – US Department of Energy; “Radioelement Halide EFRC”; $1,199,998. Michael F Simpson, Principal Investigator. 5. University of Utah – NIH National Institute on Aging; “Supiano R01 April 2018”; $2,108,474. Katherine Perry Supiano, Principal Investigator. 6. University of Utah – DHHS National Institutes of Health; “Multiplexed PTP Probes”; $1,906,250. Amy M Barrios, Principal Investigator. 7. University of Utah – DHHS National Institutes of Health; “Virtual Coaching”; $2,442,813. Rebecca L Utz, Principal Investigator. 8. University of Utah – American Cancer Society Inc; “4-2-18_Kirchhoff_ACS”; $1,219,546. Ann C Kirchhoff, Principal Investigator. General Consent Calendar July 20, 2018 Page 2 9. University of Utah – NIH National Institute of Mental Health; “Bilder Resubmission 4.10.18”; $3,812,500.
    [Show full text]
  • Joint Regent/Trustee Retreat July 19, 2018 Southern Utah University, R Haze Hunter Conference Center
    Joint Regent/Trustee Retreat July 19, 2018 Southern Utah University, R Haze Hunter Conference Center 10:30 – 11:30 a.m. Pre-Session—Audit Committee Training Director of Audit & Financial Services David Pulsipher and Associate Commissioner Kimberly L. Henrie Location: Whiting Room 11:45 – 1:15 p.m. Opening Session – Lunch Location: Great Hall • Welcome Chair Harris Simmons, Chair Eric Leavitt • Lunch • Higher Education Strategic Plan and Initiatives Commissioner David L. Buhler Breakout Sessions: 1:30 - 2:30 p.m. Breakout Session #1 (both sessions repeat) • How Regents and Trustees Can Help Presidents Be Successful – (Location: Whiting Room) Selection and support for institutional presidents are critical to institutional…and higher education…success in Utah. In this session learn about Trustee and Regent roles and collaboration in conducting successful presidential searches and how presidential resource and review teams can help and support institutional presidents. o Associate Commissioner Elizabeth Hitch, President Emeritus David Pershing, and Assistant Commissioner/Legal Counsel Geoff Landward • New Regents’ Initiatives to Improve Access to Higher Education – (Location: Charles Hunter Room) While a college education is more important than ever, there are still significant barriers to even getting in the door. Learn how the Board of Regents is helping Utah high school students find their way to college through three exciting new initiatives: Automatic Acceptance Letters, Student Aid and Tuition Policy Evaluation and Redesign, and StepUp
    [Show full text]
  • USU Greats 2019-2020
    The Greats2019–2020 USU President Noelle E. Cockett shared her presidential priorities on Oct. 1, 2019, at the State of the University Address. Her priorities for the institution include ways in which the university is currently succeeding and aspirations for future success. All priorities fall within the university’s mission of learning, discovery, and engagement. USUTM United Presidential Priorities Inspire Student Success, Including Experiential Learning 1 Provide Access to Post-Secondary Education for Underserved Populations and Communities 3 Strengthen USU’s Trajectory of Research Distinction 5 Communicate and Develop Excellence in Water, Land, and Air Research 9 Increase Diversity of Students, Faculty, and Staff, and Promote Inclusiveness and Respect 11 Facilitate Student and Faculty Entrepreneurship 13 Expand Outreach to Utah Citizens in the Areas of Health and Well-Being 15 Continue to Compete in the Upper-Echelon of the Mountain West Conference 16 Fund the Future 17 Year of the Woman 7 Inspire Student Success, INCLUDING EXPERIENTIAL LEARNING Going Gold onors students and Undergraduate Frederickson studies combinatorics, HResearch Fellows Bryce Frederickson a branch of mathematics that analyzes and Ethan Hammer were named 2019 patterns in discrete objects. Following Goldwater Scholars in a prestigious graduation from USU in 2020, he plans national competition that recognizes to pursue doctoral studies. outstanding achievements in science Hammer has spent two summers and mathematics. of his undergraduate career conducting research with the National Park Ser- vice on varied mammalian species in southern Utah’s majestic Cedar Breaks National Monument. Following graduation from USU in 2020, Hammer plans to pursue a doctoral degree in conservation biology.
    [Show full text]
  • Journal of Knowledge and Best Practices in Juvenile Justice & Psychology
    2015, Vol. 9, No. 1 JOURNAL OF KNOWLEDGE AND BEST PRACTICES IN JUVENILE JUSTICE & PSYCHOLOGY Prairie View A&M University College of Juvenile Justice & Psychology Texas Juvenile Crime Prevention Center © 2015 College of Juvenile Justice & Psychology, Texas Juvenile Crime Prevention Center, Prairie View A&M University. All rights reserved. The College of Juvenile Justice and Psychology at Prairie View A&M University invites papers for publication in the Journal of Knowledge and Best Practices in Juvenile Justice & Psychology. The journal seeks relevant application research for the academic and practitioner communities of juvenile justice, psychology, and criminal justice. The editorial staff is soliciting both qualitative and quantitative articles on juvenile justice policy, delinquency prevention, treatment, and evaluation. The journal is published in hard copy and electronically. All articles submitted for review should be sent electronically to the senior editor [email protected]. The articles should follow the APA style and be typed in 12 point font. All inquiries and submissions should be directed to the senior editor. All submissions must be done electronically and manuscripts will be promptly refereed. Reviewing will be double-blind. In submitting manuscripts, authors acknowledge that no paper will be submitted to another journal during the review period. For publication in Journal of Knowledge and Best Practices in Juvenile Justice & Psychology: Manuscripts must follow the APA style (as outlined in the latest edition of Publication Manual of the American Psychological Association.) The title of all papers should be centered and typed in caps on the first page with 12 point font. The title page must include the name, affiliation, title/academic rank, phone number, and the email address of the author(s).
    [Show full text]
  • Administrative Structure of the Program
    The Clute Institute International Academic Conference Paris, France 2013 Enacting The Spirit Of The United Nations Convention On The Rights Of Persons With Disabilities: The Role Of Postsecondary Faculty In Ensuring Access Irene M. Duranczyk, University of Minnesota, Twin Cities, USA Karen A. Myers, Saint Louis University, USA Ellyn K. Couillard, Mercer University, USA Sara Schoen, University of Minnesota, Twin Cities, USA Jeanne L. Higbee, University of Minnesota, Twin Cities, USA Abstract Nations throughout the world have signed the United Nations (UN) Convention on the Rights of Persons With Disabilities. Many postsecondary educators support the ideals of access and equity for students with disabilities, but have received no training in how to ensure that these goals are achieved. This paper introduces the concepts of universal design and universal instructional design and provides specific guidelines for general communication and for creating accessible classrooms, lectures or presentations, documents, media, websites, and distance education courses. Keywords: access, inclusion, disabilities Introduction Article 24 of the United Nations (UN; 2006) Convention on the Rights of Persons With Disabilities addresses education; it “States Parties recognize the right of persons with disabilities to education. With a view to realizing this right without discrimination and on the basis of equal opportunity, States Parties shall ensure an inclusive education system at all levels . .” Although Article 24 further states that “appropriate measures” will be taken “to train professionals and staff who work at all levels of education,” in many nations professional development for all postsecondary faculty related to “disability awareness and the use of appropriate augmentative and alternative modes, means and formats of communication, educational techniques and materials to support persons with disabilities” is not as yet a reality.
    [Show full text]