Web Accessibility in Drupal
Download as PPTX, PDF0 likes73 views
Having an accessible website provides equal access and equal opportunity to people with disabilities. Providing an accessible website helps people with disabilities actively participate in society. Moreover, accessibility barriers in other media like print audio and visual can be overcome through an accessible Web. And last but not the least, web accessibility is required by laws and policies in some cases.
Ad
More Related Content
Similar to Web Accessibility in Drupal (20)
More from Promet Source (20)
Ad
Recently uploaded (20)
Ad
Web Accessibility in Drupal
- 1. Web Accessibility in Drupal Presented by: Donnabel Carato
- 2. About Me ● QA Lead at Promet Source Corp. ● Worked with Drupal for around a decade. ● Web Accessibility advocate
- 3. What is Web Accessibility
- 4. Why is Web Accessibility Important?
- 5. The Web is an important resource in many aspects of life ● Having an accessible website provides equal access and equal opportunity to people with disabilities ● Accessible Web helps people with disabilities actively participate in society ● Accessibility barriers in other media like print audio and visual can be overcome through an accessible Web ● Web accessibility is required by laws and policies in some cases
- 6. Assistive Technologies for PWDs Disability Assistive Technologies Blindness ● Screen readers ● Refreshable braille devices Low vision ● Screen enlargers ● Screen readers Color blindness ● Color enhancement overlays or glasses Deafness ● Captions ● Transcripts Motor/Mobility disabilities ● Head wand ● Mouth stick ● Alternative keyboards ● Eye gaze tracking ● Voice activation Cognitive disabilities ● Screen readers ● Screen overlays ● Augmentative communication aids
- 10. Perceivable You have to be able to perceive web content through at least one of your biological senses for it to be accessible at all.
- 11. Users perceive web content by: ● Seeing Web Content ● Hearing Web Content ● Feeling Web Content
- 12. Operable Operability is about making the input methods of web content functionally available to a wide range of input devices, including: ● mouse or touchpad ● keyboard ● touchscreen ● voice recognition software ● other specialized input devices (most of which emulate the keyboard or mouse)
- 13. Understandable Understandability is about making content and interfaces that people can comprehend. Create understandable content: ● Specify the Language ● Simplify the Reading or Vocabulary level ● Limit or Avoid Terminology or Concepts that are Unfamiliar or Complex e.g. Do not use slang! ● Provide Supplemental Formats
- 14. Robust Robustness is about ensuring compatibility with a broad range of user agents, including assistive technologies. ● Different user agent (browsers and other devices) parse web content differently ● This is also true across operating platforms (Windows, Mac, iOS, Android, Linux, etc.), and even across different versions of the same browser ● Different screen readers handle content differently ● Newer feature better support for newer technologies such as ARIA ● You’ll have draw a line on the last set of things you’ll support
- 15. WCAG 2.0 Web Content Accessibility Guidelines (WCAG) 2.0 defines how to make Web content more accessible to people with disabilities. These guidelines are also based on the 4 principles of accessibility.
- 16. Key Guidelines of WCAG 2.0
- 17. Non Text Content (Guideline 1.1.1) Example of Alt text describing a character in a book: <img src=”black_cat.jpg” alt=”A pudgy black cat sitting on a fence post” /> Example of empty Alt text used for a corner image in a user interface: <img src=”top_left_corner.png” alt=”” />
- 18. Time-Based Media (Guideline 1.2.2)
- 19. Info and Relationships (Guideline 1.3.1) Structure content in meaningful ways ● Headings ● Lists ● Form Labels ● Table Headers
- 20. Meaningful Sequence (Guideline 1.3.2) A meaningful sequence when navigating through a webpage using a keyboard is from left to right, top to bottom, much like the path the eyes take when reading a book.
- 21. Use of Color (Guidelines 1.4.1 and Guideline 1.4.3) 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.
- 22. Keyboard Accessible (Guideline 2.1.1) When developing custom interactive elements in Web content, developers should attempt to use device independent event handlers whenever possible. They may, however, use both mouse and keyboard event handlers together. Device independent event handlers: • onfocus • onblur • onselect • onchange
- 23. Provide Ways to Navigate (Guideline 2.4.1) 2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. ● Use skip links ● Use ARIA Landmarks
- 24. Link Purpose - In Context (Guideline 2.4.4) Link text should describe the destination of a link or its function if it operates a feature of a webpage. Do not use “click here” as link text.
- 25. Error Identification (Guideline 3.3.1) Be sure that screen reader users are aware of feedback messages. Use the ARIA role=”alert” on dynamically injected messages so they get read automatically. <label for=”firstname”>First Name</label> <input type=”text” id=”firstname” /> <div style=”display:none” role=”alert”> The first name field is required. </div>
- 26. Labels and Instructions (Guideline 3.3.2) Provide explicit instructions describing how things work, and associate those instructions with the relevant feature using aria-describedby.
- 29. Semantic Elements Instead of assigning a class of “nav” to a navigation div and another assigning an id of “navigation,” use of semantic elements allow for “nav” to replace div or span. Some other element names include <article>, <section>, <figure> and <figcaption>, <footer> and <header>.
- 30. WAI-ARIA
- 31. Aural Alerts A JavaScript method (Drupal.announce) in D8 takes advantage of the WAI- ARIA compliance and presents screen readers with a string to be read aloud to the user.
- 32. Constrained Tabbing Drupal tabbing.Manager was another thing added to Drupal core It enables constrain tabbing through the links.
- 33. Form Errors In Drupal 8 there is an option to turn on a feature to improve accessibility related to the display of form errors and you may put the error inline with the field.
- 34. CSS Display Options Instead of using “display:none”, D8 has adopted four new display classes: (1) hidden, (2) visually-hidden, (3) visually-hidden.focusable and (4) invisible.
- 35. ● https://www.w3.org ● https://dequeuniversity.com ● https://drupal.org ● https://webaccess.msu.edu/ ● https://www.ryerson.ca
- 37. Learning about web accessibility is fun! Thank you for attending and see you again next time!
Editor's Notes
- #2: This session is for everyone, developer or not.
- #4: Ask the audience who has heard about “accessibility” before and what comes to their minds when they heard about it. Web accessibility means that people with disabilities can use the Web People with disabilities can perceive, interact, understand, navigate and contribute to the Web Web accessibility benefits a lot of individuals, including older people with changing abilities due to aging Our Diverse Abilities Roughly 1 in 5 (about 20%) people have a disability of some kind Some disabilities cannot be hidden (blindness, physical disabilities, etc.) Others are hidden (deafness, seizures, reading disorders, etc.) Some are temporary (crutches, wheelchair, etc.) Age-related (lose sight, hearing, mobility and/or cognition) Disabilities that matter most on the web are disabilities with the eyes, ears, hands and brain
- #7: How do users with disabilities access web content? They use assistive technologies.
- #8: Websites do not have the correct implementation and developers do not have accessibility in mind when they started working on it Some web softwares are not compatible with the assistive technologies that people with disabilities use
- #11: … But for web content we are only concerned with sight, sound and touch.
- #12: Seeing Web Content Most people perceive webpages by looking at them For users with low or no vision, this does not work well if the developers only focus on that Hearing Web Content Blind users use screen reader software, which converts digital text into synthesized speech Different != bad, unless the experience is not parallel Blind users are used to listening rather than seeing, so it’s a logical and natural approach for them Feeling Web Content Digital text can be converted into 3D Braille characters with: Printed paper with raised dots Refreshable Braille devices Screen readers and Braille software is pretty much the same except for one is for hearing and the other is for touch For users that are both blind and deaf, touch output is the only available device Why Perceivability Matters If you cannot perceive web content, it might as well not exist If you can’t see it, you should provide a digital text alternative for the screen readers can convert that into sound or Braille If you can’t hear it, you should provide captions and/or transcripts for audio content
- #13: Not Everyone Uses a Computer Like You Do Not everyone can use a mouse and touchpad because of fine motor skills Some use alternative devices, like devices that sense movements in the cheeks or tracks the gaze of the eyes Everything Has to Work Goal of operability = ensure that web components work All features must be functional, especially navigation and dynamic/interactive components, no matter what device a person is using
- #14: Specify the Language If the language isn’t set by the website (i.e. <html lang=”en”>), the screen reader will read the pronunciation rules of whatever language is specified in the user’s default settings That’s cool if the user only speaks one language and sets the default language Developers can mark certain words or phrases to help with this also (i.e. <span lang=”fr”>Je parle français</span>). Simplify the Reading or Vocabulary level Write in plain language Things that can be difficult for some users include: Long or unfamilar words Long sentences Complex sentence construction Unclear wording Long passages of text: It's usually best to break up text into sections with headings, shorter paragraphs, and lists, where appropriate Lines of text that are too close to each other It's usually best to include some blank visual space between lines of text Limit or Avoid Terminology or Concepts that are Unfamiliar or Complex Don’t use slang because it’s confusing Provide Supplemental Formats For users that can’t read, provide alternative formats such as: Images Audio Video Accessibility guidelines don’t require you to do this, however it ends up benefiting all users
- #16: Web Content Accessibility Guidelines (WCAG) 2.0 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these.
- #18: 1.1.1 Non-Text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.
- #19: 1.2.2 Captions (Prerecorded): Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
- #20: 1.3.1 Info and Relationships: Information, structure , and relationships conveyed through presentation can be programmatically determined or are available in text. Properly nested headings, using HTML heading markup, should be used to structure topics and subtopics within a webpage, rather than using otherwise styled large bold text. --- If a collection of items on a page looks like a list, ensure that list markup has been used to create the list, rather than using simple line breaks after each item. -- Relationships between form labels and their respective input fields should be created using the HTML element and explicitly associating the two by matching the "id" attribute value of the input field, with the "for" attribute value of the element. -- Ensure that data tables use table header elements at the top of each column, and in some cases, at the start of each row.
- #21: 1.3.2 Meaningful Sequence: When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined . (Level A)
- #22: While the use of colour can help to add meaning to Web content, the use of colour on its own to represent meaning can create a barrier for those who cannot see colour, including those who are blind, colour blind, or have low vision.
- #23: 2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.
- #25: 2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
- #26: 3.3.1 Error Identification: If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.
- #27: 3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input.
- #28: Accessibility has been greatly improved with the release of Drupal 7. Many of the best practices have been incorporated into the Core making Drupal a good framework for building accessible sites. Some of the improvements include: Drag and drop functionality Improved color contrast and intensity Adding skip navigation to core themes Adding labels by default for input forms Fixing CSS display:none with consistent methods for hiding and exposing text on focus.
- #30: Drupal 8 has all the templates and semantic rules for accessibility It has HTML tags, like <article>, <section> …, roles for the main content, ARIA properties (aria required) out of the box and ARIA states out of the box (aria invalid) Very important to keep in mind is that Google likes semantic markup, so if you do all the described things, Google will “like you more”
- #31: Drupal 8 has followed WAI-ARIA guidance to make these more understandable to assistive technologies. Drag and Drop is a great example.
- #32: You use it when something changes dynamically For example, when you add a new content at the bottom, you add new items … Users, especially blind ones, may not see it, so you have to tell them (announce) that something changed.